@charset "UTF-8";

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

/*--------------------Variables declaration----------------------*/

:root {
    /*Logo*/
    --clientLogo: transparent
        url(https://s3.eu-central-1.amazonaws.com/portal.ardaonline.com/general/arda_logo_wt_no_payoff.png)
        no-repeat;
    
    /*Fonts - load in your font at the top, then apply to variables*/
    --font-family-headers: "Barlow", sans-serif;
    --font-family-body: "Barlow", sans-serif;
    
    /*Colors*/
    --primaryAccentColor: #00B592;
    --primaryAccentColorHover: #00CDA6;
    --secondaryAccentColor: #00575F;
    --secondaryAccentColorHover: #00B592;
    --accentColorDark: #030D26;
    
    /*Indien niet van toepassing onderstaande variabelen vullen met dezelfde waarde als primaryAccentColor*/
    --optionalAccentColor: #F18F01; 
    --optionalAccentColorHover: #D27C00;
    
    /*Darkmode/lightmode*/
    --lightdark-bgcolor: #163b41;
    --lightdark-text: #E5E8EB;
    
    /*Details*/
    --borderRadius: 5px;
    --borderRadiusButtons: 5px;
    --boxShadowsGeneral: 0px 12px 36px -5px rgba(255,255,255,0.80);
    
    /*Img & other*/
    --backgroundImage: transparent
        url(https://s3.eu-central-1.amazonaws.com/portal.ardaonline.com/general/gamificationlearning_bg_start.jpg)
        center/cover no-repeat;
}

/*--------------------Aanpassingen aan de portal.arda.nl omgeving kun je hieronder doen ----------------------*/

 /*----header gradient in Arda groen----*/
.login-top-navigation-wrapper, .page-course__header {
    background: -moz-linear-gradient(rgba(22,59,65,1.00), rgba(22,59,65,0.00));
    background: -webkit-linear-gradient(rgba(22,59,65,1.00), rgba(22,59,65,0.00));
    background: linear-gradient(rgba(22,59,65,1.00), rgba(22,59,65,0.00)) !important;
}

.app--layout-new .page-step--normal .page-step__header,
.app--layout-new .page-course__header {
    background-color: rgba(38,102,113,0.20);
}

.step-quiz__nav__item--answered {
    background: #AC35DE;
    border-color: #AC35DE;
    opacity: 1;
}
.page-login__content__regular-auth .regular-auth-button__button {
    padding-left: 20px !important;
    background-color: var(--primaryAccentColor) !important;
    color:white;
}
.page-login__content__regular-auth .regular-auth-button__button:hover {
    padding-left: 25px !important;
    background-color: var(--primaryAccentColorHover) !important;
}
.page-login__content .oauth-sign-in-button:after, .page-login__content__regular-auth .regular-auth-button:after {
    color: white;
}
.introduction-modal {
    max-width: 800px;
    padding: 0 1.5em;
    color: #1b3c4d;
}
.introduction-modal .modal-body {padding: 2.5em;}
.introductionModalText {padding:1.5em;}
.introduction-modal h2 {color: #1b3c4d;}