/*-------------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-------------*/

@font-face {
		font-family: "VisbyRoundCF-Medium";
		src: url("https://s3.eu-central-1.amazonaws.com/awareness.onexillium.nl/general/css/fonts/VisbyRoundCF-Medium.woff") format("woff");
}
@font-face {
		font-family: "VisbyRoundCF-Bold";
		src: url("https://s3.eu-central-1.amazonaws.com/awareness.onexillium.nl/general/css/fonts/VisbyRoundCF-Bold.woff") format("woff");
}


/*-------------Variables declaration-------------*/
:root {
    /*Logo*/
    --clientLogo: transparent
        url(https://s3.eu-central-1.amazonaws.com/awareness.onexillium.nl/general/logo_onexillium.png) no-repeat !important;
    
    /*Fonts - load in your font, then apply to variables*/
    --font-family-headers: 'VisbyRoundCF-Bold';
    --font-family-body: 'VisbyRoundCF-Medium';
    
    /*Colors*/
    --primaryAccentColor: #6558B1;
    --primaryAccentColorHover: #7468B8;
    --secondaryAccentColor: #98DBCE;
    --secondaryAccentColorHover: #6558B1;
    --accentColorDark: #0C2340;
    
    /*Indien niet van toepassing onderstaande variabelen vullen met dezelfde waarde als primaryAccentColor*/
    --optionalAccentColor: #98DBCE;
    --optionalAccentColorHover: #6558B1;
    
    /*Darkmode/lightmode*/
    --lightdark-bgcolor: #F4F4F4;
    --lightdark-text: #605F5F;
    --lightdark-bgcolor-RGB: 244,244,244; /*Vul de lightdark-bgcolor als rgb waarden in. Deze wordt gebruikt voor de gradient op de landingspagina header/*
    /*Details*/
    --borderRadius: 10px;
    --borderRadiusButtons: 10px;
    /*--boxShadowsGeneral: 0px 12px 36px -5px rgba(164,164,164,0.80);*/
    --boxShadowsGeneral: 5px 5px 0px rgba(216,215,223,0.50);
    
    /*Img & other*/
    --backgroundImage: url(https://s3.eu-central-1.amazonaws.com/awareness.onexillium.nl/general/css/arda_onexillium_bg.jpg);
}
/*Letters iets breder uit elkaar voor dit font*/
.app, button {
    letter-spacing: 1px;
}
 /*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);
    letter-spacing: normal;
    font-family: var(--font-family-headers) !important;
}
.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 {
    background-size: 90%;
}

 /*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);
}

 /*drpodown menu gekleurd maken*/
.dropdown-menu {
    background-color: var(--primaryAccentColor);
}
.dropdown-menu>li>a {
    color: white;
    text-decoration: none;
    background-color: var(--primaryAccentColor);
}
.login-top-navigation__items--level-0>li>a {color:white;}
.login-top-navigation__items--level-0 {border:0;}
.login-top-navigation .dropdown-menu li a, .page-step__header .dropdown-menu li a {
    border-bottom: 1px solid var(--primaryAccentColorHover);
}
.e-header-s {color: var(--primaryAccentColor);}
.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);
}

.dropdown-menu>li>span, .dropdown-menu>li>strong {color: white;}

/* challenge button*/
.memo_start_btn, .login-top-navigation .dropdown .btn-default{
    color:white;
}
.btn-default, .login-top__greeting + a {
    color: var(--lightdark-text);
}
.login-top-navigation__items--level-0>li>a:hover {
    background-color: rgba(5,55,40,0.08);
}

/*leaderboard styling*/
.page-dashboard-widget--title-laatste-3-maanden .scoreboard_leaderboard, .page-dashboard-widget--title-laatste-3-maanden .scoreboard_leaderboard .scoreboard_title
{
    color: var(--lightdark-text);
}
.scoreboard_description {opacity:0.8;}