@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");

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,800;1,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;1,300;1,400&display=swap');

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

:root {
    /*Logo*/
    --clientLogo: transparent
        url(https://s3.eu-central-1.amazonaws.com/security.reset.nl/general/logo_reset_full_color_200px.png)
        no-repeat !important;
    
    /*Fonts - load in your font, then apply to variables*/
    --font-family-headers: 'Raleway';
    --font-family-body: 'Open Sans', sans-serif;
    
    /*Colors*/
    --primaryAccentColor: #ED7728;
    --primaryAccentColorHover: #F7981B;
    --secondaryAccentColor: #ED7728;
    --secondaryAccentColorHover: #F7981B;
    --accentColorDark: #404040;
    
     /*Indien niet van toepassing onderstaande variabelen vullen met dezelfde waarde als primaryAccentColor*/
    --optionalAccentColor: #ED7728;
    --optionalAccentColorHover: #F7981B;
    
    /*Darkmode/lightmode*/
    --lightdark-bgcolor: #f7f7f7;
    --lightdark-text: #000000;
    --lightdark-bgcolor-RGB: 247,247,247; /*Vul de lightdark-bgcolor als rgb waarden in. Deze wordt gebruikt voor de gradient op de landingspagina header/*

    /*Details*/
    --borderRadius: 0px;
    --borderRadiusButtons: 0px;
    /*--boxShadowsGeneral: 0px 12px 36px -5px rgba(164,164,164,0.80);*/
    --boxShadowsGeneral: 0px 8px 25px rgba(164,164,164,0.20);
    --blurEffect: 5px;
    
    /*Img & other*/
    --backgroundImage: url(https://s3.eu-central-1.amazonaws.com/security.reset.nl/general/reset_main_bg.jpg);
}


  /*Titels font weight & kleuren*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .page-report h1, .e-header {
    font-weight:600;
    color: var(--accentColorDark);
	letter-spacing: -0.0415625em;
	font-family: var(--font-family-headers);
}

/*Switchen primaire kleur & broodtekst kleur step headers*/
.e-header-s {
	font-weight: 700; 
	color: var(--lightdark-text);    
	font-family: var(--font-family-headers);
}
.e-header {color: var(--primaryAccentColor);}

/*Secundaire knoppen donker maken*/
.btn-default, .login-top__greeting + a {
	background: var(--accentColorDark);
	border-color: var(--accentColorDark);
}
.btn-default:hover, .login-top__greeting + a:hover {
	background: var(--lightdark-text);
	border-color: var(--lightdark-text);
}

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

 /*Logo rechtsboven formaat aanpassen*/
.login-top {
	background-size: 120px auto;
}
.open>.dropdown-toggle.btn-default {color:white;}

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

 /*header knoppen oranje maken*/
.login-top-navigation .dropdown .btn-default, .ardaCourseIndexIntroductionContainer .inactive {
    background-color: var(--secondaryAccentColor);
    border-color: var(--secondaryAccentColor);
	opacity: 1;
}

/*Startpagina grijstinten omdraaien.*/
.arda_opening-container {
	background-color: var(--lightdark-bgcolor) !important;
}
.arda_welcome_text {
	background-color: white !important;
}

/*Transparant maken Profiel panel*/
.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:transparent;
	box-shadow: none;
}


/*drpodown menu grijs maken*/
.dropdown-menu {
	border-radius:0px;
	border: 0px;
	box-shadow: none;
	background-color: white;
}
.dropdown-menu>li>a {
    text-decoration: none;
    background-color: white;
}
.login-top-navigation .dropdown-menu li a, .page-step__header .dropdown-menu li a {
    border-bottom: 0px;
}

.supportOnderwerp {
	border-radius: var(--borderRadius);
    filter: drop-shadow(var(--boxShadowsGeneral));
    -webkit-filter: drop-shadow(var(--boxShadowsGeneral));
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .page-step-header-menu__item--current {
    background-color: var(--lightdark-bgcolor);
}

/*aanpassen kleur step-next & prev arrow*/
.app--layout-new .step-pager__next a, .app--layout-new .step-pager__previous a {
	filter: hue-rotate(230deg) saturate(1.4);
}

p a, .ardaTextContentRow p a {color:var(--secondaryAccentColor);}
p a:hover, .ardaTextContentRow p a:hover {color:var(--secondaryAccentColorHover);}

/*Chapter titel verbergen & coursenaam border bottom geven*/
.page-step-header-menu__item--type-chapter {display:none;}
.page-step-header-menu__item--type-module {border-bottom: 1px solid rgba(0,0,0,0.05);}

/*invulvelden wit maken*/
.form-control, .page-password-reset__form .form-control, .page-login__form .form-control, .report-parameters__parameter--dialog .report-parameter__field, .report-parameter .report-parameter__field input, .report-parameter .report-parameter__field select {
	background-color: white
}