@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/awareness.nfir.nl/general/nfir_wit_zonder_tagline.png)
        no-repeat !important;
    --clientLogoWhite: transparent
        url(https://s3.eu-central-1.amazonaws.com/awareness.nfir.nl/general/nfir_logo_wit.png)
        no-repeat !important;
    
    /*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;
    --blurEffect: 3px;
    --boxShadowsGeneral: 0px 8px 25px rgba(255,255,255,0.50);
    
    /*Img & other*/
    --backgroundImage:
        url(https://s3.eu-central-1.amazonaws.com/portal.ardaonline.com/general/gamificationlearning_bg_start.jpg);
}

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

/*----header gradient in Arda groen
.login-top-navigation-wrapper, .page-course__header, .app--layout-new .page-step--normal .page-step__header, .app--layout-new .page-course__header {
    background: -moz-linear-gradient(rgba(22,59,65,0.8), rgba(22,59,65,0.00));
    background: -webkit-linear-gradient(rgba(22,59,65,0.8), rgba(22,59,65,0.00));
    background: linear-gradient(rgba(22,59,65,0.8), rgba(22,59,65,0.00)) !important;
    backdrop-filter: none;
}---*/
.app-root {
    background-color: var(--lightdark-bgcolor);
}

.step-quiz__nav__item--answered {
    background: #AC35DE;
    border-color: #AC35DE;
    opacity: 1;
}

/*----Report custom bg tint white----*/
.panel-default, .page-profile__content, .page-report-index .table-responsive, .page-report__content .page-report__content__results, .page-report-index__content .form-group .input-group {
    background-color: rgba(255,255,255,0.05);
    box-shadow: none;
}