/*-------------Laad basis CSS Arda omgeving-------------*/
@import url("https://s3.eu-central-1.amazonaws.com/portal.ardaonline.com/general/css/portal.arda_basis.css");

/*-------------Fonts inladen-------------*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;1,300;1,400&display=swap');
@font-face {
		font-family: "BeauSansBold";
		src: url("fonts/PFBeauSansPro-Bold.ttf") format("truetype");
		font-display: swap;
}


/*-------------Variables declaration-------------*/
:root {
    /*Logo*/
    --clientLogo: transparent
        url(https://s3.eu-central-1.amazonaws.com/bewustwording.tredion.nl/general/logo/tredion_logo_kleur.png)
        no-repeat !important;
    
    /*Fonts - load in your font, then apply to variables*/
    --font-family-headers: 'BeauSansBold';
    --font-family-body: 'Open Sans', sans-serif;
    
    /*Colors*/
    --primaryAccentColor: #003865;
    --primaryAccentColorHover: #004883;
    --secondaryAccentColor: #fd5000;
    --secondaryAccentColorHover: #FF621A;
    --accentColorDark: #003864;
    
    /*Indien niet van toepassing onderstaande variabelen vullen met dezelfde waarde als primaryAccentColor*/
    --optionalAccentColor: #003865;
    --optionalAccentColorHover: #004883;
    
    /*Darkmode/lightmode*/
    --lightdark-bgcolor: #f5f1ef;
    --lightdark-text: #003864;
    --lightdark-bgcolor-RGB: 245,241,239; /*Vul de lightdark-bgcolor als rgb waarden in. Deze wordt gebruikt voor de gradient op de landingspagina header/*
    /*Details*/
    --borderRadius: 5px;
    --borderRadiusButtons: 10px;
    /*--boxShadowsGeneral: 0px 12px 36px -5px rgba(164,164,164,0.80);*/
    --boxShadowsGeneral: 0px 8px 25px rgba(164,164,164,0.50);
    
    /*Img & other*/
    --backgroundImage: url(https://s3.eu-central-1.amazonaws.com/bewustwording.tredion.nl/general/bg_arda_tredion.png);
}


 /*Titels font weight & kleuren*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .page-report h1 {
    font-weight:600;
    color: var(--primaryAccentColor);
}
.e-header-s {font-weight: 700; }

 /*Verdiepingvlak wit maken*/
.ardaStepVerdieping, .page-support-support-item {
	background: white;
    border: 1px solid #F0F0F0;
}

 /*Logo rechtsboven formaat aanpassen*/
.login-top {
	padding-top:60px;
    background-size: 70%;
}

 /*frosted glass effect header*/
.app--layout-new .page-step--normal .page-step__header,
.app--layout-new .page-course__header {
    background: rgba(255, 255, 255, 0.3);
}

.login-top-navigation-wrapper, .app--layout-new .page-course__header, .page-step--normal .page-step__header, .app--layout-new .page-step__header {
    background: none;
}
#page-profile-tabs a {
	color:var(--secondaryAccentColor);
}
 /*header knoppen oranje maken*/
.login-top-navigation .dropdown .btn-default {
    background-color: var(--secondaryAccentColor);
    border-color: var(--secondaryAccentColor);
}
 /*drpodown menu blauw maken*/
.dropdown-menu {
    background-color: var(--primaryAccentColor);
}
.dropdown-menu>li>a {
    color: white;
    text-decoration: none;
    background-color: var(--primaryAccentColor);
}
.login-top-navigation .dropdown-menu li a, .page-step__header .dropdown-menu li a {
    border-bottom: 1px solid var(--primaryAccentColorHover);
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .page-step-header-menu__item--current {
    color: white;
    text-decoration: none;
    background-color: var(--primaryAccentColorHover);
}
p a, .ardaTextContentRow p a {color:var(--secondaryAccentColor);}
p a:hover, .ardaTextContentRow p a:hover {color:var(--secondaryAccentColorHover);}

.arda_landingpage_content p {color: var(--primaryAccentColor)}
.dropdown-menu>li>span, .dropdown-menu>li>strong {color: white;}

/* challenge button*/
.memo_start_btn{
    color:White;
}