@charset "UTF-8";

/*
CSS Basis Arda omgevingen
Dit is de basis CSS voor ALLE aangesloten omgevingen.
Voor aanpassingen aan de portal.arda.nl omgeving ga naar portal.arda_custom.css

----------------------------
-  Variables declaration
-  Basic buttons & elements
-  Log-in, register, log-out
-  Profile, rapports
-  Steps & content
-  Quizzes
-  Feedback
-  Badges
-  Responsiveness
*/

/*--------------------Variables creation - DO NOT TOUCH----------------------*/

:root {
    /*Logo*/
    --clientLogo: transparent
        url(images/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: #031C26;

    /*Indien niet van toepassing onderstaande variabelen vullen met dezelfde waarde als primaryAccentColor*/
    --optionalAccentColor: #F18F01;
    --optionalAccentColorHover: #D27C00;

    /*Darkmode/lightmode*/
    --lightdark-bgcolor: #163b41;
    --lightdark-text: #E5E8EB;
    --lightdark-bgcolor-RGB: 23,46,61; /*Vul de lightdark-bgcolor als rgb waarden in. Deze word gebruikt voor de gradient op de landingspagina header/*

    /*Details*/
    --borderRadius: 5px;
    --borderRadiusButtons: 5px;
    --blurEffect: 5px;
    --boxShadowsGeneral: 0px 8px 25px rgba(255,255,255,0.50);

    /*Img & other*/
    --backgroundImage: transparent
        url(images/gamificationlearning_bg_start.jpg)
        center/cover no-repeat;
}


/*--------------------Barlow font - self-hosted----------------------*/

/* latin-ext */
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/barlow-400-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/barlow-400italic-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/barlow-600-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/barlow-600italic-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/barlow-700-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/barlow-700italic-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/barlow-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/barlow-400italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/barlow-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/barlow-600italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/barlow-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/barlow-700italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*--------------------Basic buttons & general elements----------------------*/

.app {
    font-family: var(--font-family-body);
    font-size: 1.15em;
    font-stretch: normal;
    font-kerning: auto;
    color: var(--lightdark-text);
    font-weight:400;
    background-color: var(--lightdark-bgcolor);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--lightdark-text);
    font-family: var(--font-family-headers);
	font-weight:700;
}
h3 {font-size: 1.3em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1.2em;}

.btn, .login-top__greeting + a {
    padding: 7px 15px;
    text-align: center;
    border-radius: var(--borderRadiusButtons);
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
	text-transform: initial;
    margin: 0;
    font-family: var(--font-family-body);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    color: var(--primaryAccentColor);
}

.btn-primary {
    color: #ffffff;
    background: var(--primaryAccentColor);
    border-color: var(--primaryAccentColor);
}

.btn-primary:hover {
    background: var(--primaryAccentColorHover);
    border-color: var(--primaryAccentColorHover);
}
.btn-primary:active, .btn-primary:focus {
    background: #93A700;
    border-color: #93A700;
}

.btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
    color: #ffffff;
    background: var(--primaryAccentColor);
    border-color: var(--primaryAccentColor);
}

.btn-accent {
    color: #ffffff;
    background: var(--primaryAccentColor);
    border-color: var(--primaryAccentColor);
    background: var(--optionalAccentColor);
    border-color: var(--optionalAccentColor);
}

.btn-accent:hover, .btn-accent:focus, .btn-accent:active {
    color: #ffffff;
    background: var(--primaryAccentColorHover);
    border-color: var(--primaryAccentColorHover);
    background: var(--optionalAccentColorHover);
    border-color: var(--optionalAccentColorHover);
}

.btn-light {
    color: var(--lightdark-bgcolor);
    background: var(--lightdark-text);
    border-color: var(--lightdark-text);
}

.btn-default,
.login-top__greeting + a {
    color: white;
    border: 1px solid var(--secondaryAccentColor);
    background: var(--secondaryAccentColor);
}
.btn-default:hover,
.login-top__greeting + a:hover{
    color: white;
    border: 1px solid var(--secondaryAccentColorHover);
    background: var(--secondaryAccentColorHover);
}
.btn-default:active, .btn-default:focus {
    background-color: #F5F8FB !important;
    color: #93A700;
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px !important;
    border:2px solid var(--lightdark-text) !important;
}

::placeholder,
::-webkit-input-placeholder,
::-ms-input-placeholder {
   text-transform: capitalize;
}

.arda_notification, .todo-module-teaser__module-planned-at {
    background-color: #f5f8fb;
    border: 1px solid #E5E8EB;
    padding:10px 15px;
    border-radius:30px;
    width: fit-content;
    color: #657079;
}
.fa-icon {
    font: 25px / 1 FontAwesome;
    display: inline-block;
}
.fa-bookmark {color: #AC35DE; margin: 0px 10px 5px 10px;}




/*--------------------Log-in, register, log-out, Rapportages----------------------*/

.page-login:after, .page-register__content:after, .page-password-reset:after, .page-course-index:before, .page-logout:before {
    content: "";
    position: fixed;
    z-index:0;
	padding-top:10vh;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent var(--backgroundImage) center/cover no-repeat;
}

.page-login--new__form .btn,
.page-logout__form .btn,
.page-password-reset__form .btn {
    display: inline-block;
    width: auto;
    margin: 10px 0px;
    padding-left: 25px;
    padding-right: 25px;
    font-family: var(--font-family-body);
}

.page-login--new__form .btn {
    float:right;
}
.page-login__form .page-login__form__back-button {
    float:left;
}
.language-switcher {
    margin-top: 2rem;
    background-color: #E5E8EB;
    width: fit-content;
    border-radius: 20px;
    padding: 10px 20px;
}
.language-switcher__item__content__link__image {
    height: 15px;
    width: 30px;
}
.language-switcher__item__content__link__image:hover {
    height:16px;
}

.page-login--new__content,
.page-logout__content,
.page-password-reset__content,
.page-login__content,
.page-register__content {
    background: white;
    color: var(--accentColorDark);
    max-width: 550px;
	width:80vw;
    height: auto;
	margin: auto;
	float:none;
    text-align: left;
    border-radius: var(--borderRadius);
    filter: drop-shadow(var(--boxShadowsGeneral));
    -webkit-filter: drop-shadow(var(--boxShadowsGeneral));
	z-index: 5;
}
.page-logout__content {
    text-align: center;
}

.page-register__content {
	margin:10vh auto;
	max-width: 800px;
}
.page-register .panel-default {
    background-color: white;
    box-shadow:none;
}

.page-register__content__voucher {
    background-color: rgba(236, 236, 236, 1);
    padding: 10px 25px;
    border-radius: var(--borderRadius);
    margin: 10px 0;
}

.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, .password-change-form .form-control {
    color: var(--accentColorDark);
    background-color: #F5F8FB;
    text-align: left;
    border: 1px solid #E5E8EB;
    border-radius: var(--borderRadius) !important;
    padding: 5px 8px;
    font-size: 1em;
    height:auto;
    text-transform: initial;
}
.page-report__content__results .datagrid__filters, .page-report__content__results .dataTables_info {color: var(--lightdark-text);}
.panel {
    background-color: transparent;
    border: 0px;
}

.panel-default, .page-report-index .table-responsive,  .page-report__content .page-report__content__results, .page-report-index__content .form-group .input-group {
    background-color: rgba(0,0,0,0.05);
    border-radius: var(--borderRadius);
    padding: 3rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
	color: var(--lightdark-text);
}

.panel-default>.panel-heading {
    background-color: transparent !important;
    font-weight: bold;
    color: var(--lightdark-text);
}
.help-block {
    color: #96A7AA;
    font-style: italic;
}

.oauth-sign-in-button__button, .regular-auth-button__button {
    box-shadow: none;
    border-radius: var(--borderRadius);
    background-color: white !important;
    width: 100%;
    text-align: left;
    font-family: var(--font-family-body);
    color: var(--accentColorDark);
    min-height:50px;
    font-weight:400;
    font-size:initial;

}
.oauth-sign-in-button__button {
     background-color: #E5E8EB !important;

}

.page-login__content__external-oauth .oauth-sign-in-button--surfconext .oauth-sign-in-button__button,
.page-register__content__external-oauth .oauth-sign-in-button--surfconext .oauth-sign-in-button__button {
    background: #E5E8EB url(images/arda_university_icon.png) no-repeat;
    background-size: 25px auto;
    background-position: 10px 50%;
	color: var(--accentColorDark);
}

.page-login__content__external-oauth .oauth-sign-in-button--surfconext:nth-child(4) .oauth-sign-in-button__button,
.page-register__content__external-oauth .oauth-sign-in-button--surfconext:nth-child(4) .oauth-sign-in-button__button {
    background: #E5E8EB url(images/rijksoverheid.png) no-repeat;
    background-size: 25px auto;
    background-position: 10px 50%;
}

@media only screen and (max-width: 600px) {
    .page-login__content__external-oauth .oauth-sign-in-button--surfconext:nth-child(4) .oauth-sign-in-button__button,
    .page-register__content__external-oauth .oauth-sign-in-button--surfconext:nth-child(4) .oauth-sign-in-button__button {
        background: #E5E8EB url(images/rijksoverheid.png) no-repeat;
        background-size: 25px auto;
        background-position: 10px 0%;
    }
}

.page-login__content__regular-auth .regular-auth-button__button {
	box-shadow: none;
	font-weight: inherit;
    font-family: var(--font-family-body);
    padding: 0px;
}
.page-login__content__regular-auth .regular-auth-button__button:hover {
    padding: 0 10px;
    box-shadow: none;
}

.page-login--new .page-login__content__regular-auth {margin-bottom:30px;}
.page-login__content h1:first-child, .page-login__content h2:nth-child(2) {display:none}

.page-login--new .oauth-sign-in-button__button:hover,
.regular-auth-button__button:hover,
.oauth-sign-in-button__button:hover {
    background-color: #E5E8EB;
    padding:15px 20px 15px 65px;
    box-shadow:none;
}
.page-login__content .oauth-sign-in-button:after,
.page-login__content__regular-auth .regular-auth-button:after {
    content: " ";
    background: transparent url(images/green_arrow_right.png) no-repeat;
    background-size: 10px auto;
    background-position: 50% 50%;
    height: 50px;
    width:50px;
    float:right;
    margin-top: -55px;
    position: relative;
    border-radius: 0px 5px 5px 0px;
}
.page-login .page-login__form {
    max-width: 500px;
    margin-top:5vh;
}

.page-login .page-login__form input, .password-change-form input {
	margin: 8px 0;
}
.form-control input::placeholder {
	text-transform: initial;
}

.page-login--new .regular-auth-back-button {
    border: 0px;
    background:transparent;
}
.page-login--new .regular-auth-back-button .glyphicon-chevron-left {
    color: var(--primaryAccentColor);
    font-size: 1.5rem;
}
.page-login--new .page-login__form button {
    margin-bottom:2rem;
}

.page-login__content h2,
.page-logout__content h2,
.page-password-reset__content h2,
.page-register__content .control-label,
.page-register__content .checkbox > label {
    text-align: center;
    color: var(--accentColorDark);
    font-size: 1.5rem;
	font-weight: initial;
}

.page-login__content h1,
.page-login__content h3,
.page-logout__content h1,
.page-password-reset__content h1,
.page-register__content h2 {
    margin-bottom: 0.2em;
    color: var(--secondaryAccentColor);
    text-align: center;
    font-weight: 700;
    font-size:2rem;
}

.page-login__password-reset-link,
.page-login__password-reset-link:active,
.page-login__password-reset-link:focus,
.page-login__password-reset-link:hover,
.page-login__register-link,
.page-login__register-link:active,
.page-login__register-link:focus,
.page-login__register-link:hover,
.page-logout__content a,
.page-logout__content a:active,
.page-logout__content a:focus,
.page-logout__content a:hover,
.page-password-reset__login-link,
.page-password-reset__login-link:active,
.page-password-reset__login-link:focus,
.page-password-reset__login-link:hover{
    color: var(--primaryAccentColor);
}

.alert-success {
	color: #93A700;
	background-color: #E5EAC2;
}

.alert a {
    color: var(--primaryAccentColor);
    font-weight:700;
}
.alert a:hover {
    text-decoration: none;
    color: var(--primaryAccentColorHover);
}

#react-select-2-listbox {color: #FF004D;}
[id^="react-select-"] {color: var(--accentColorDark);}


/*--------------------Course page, Module pagina's, notificaties---------------------*/


.introduction-modal {
    width: 90% !important;
    max-width: 1080px;
    margin: 2rem auto;
}

.ardaCourseIndexIntroductionContainer h2 {
	font-size: 1.4em;
	font-weight:600;
}

.ardaCourseIndexIntroductionContainer .inactive, .ardaCourseIndexIntroductionContainer .inactive:hover {
	background-color: var(--primaryAccentColorHover);
	cursor: initial;
}

.page-module-voucher-calendar__empty p,
.page-module-calendar__empty p,
.page-module-history__empty p,
.page-module-index__empty p {
	color: var(--lightdark-text);
	font-style: italic;
}

.page-course {
    background-color: var(--lightdark-bgcolor);
    min-height: 100vh;
}
.page-course-index__intro {z-index:0; position: relative;}

.page-course__intro {
    text-align: center;
    color: var(--lightdark-text);
}

.page-course-index__content {
    padding-top: 100px;
}

.page-course__content .arda_module_index .arda_notification {
    margin:auto;
    margin-bottom: 2em;
}

.page-report-index,
.page-profile,
.page-register-user,
.page-report,
.page-support,
.page-notification-index,
.page-widget-page,
.page-dashboard,
.page-report__content,
.page-module-index,
.page-module-history,
.page-module-journey-calendar,
.page-module-voucher-calendar,
.page-module-calendar,
.page-webform-submission,
.page-not-found,
.page-badge-listing,
.page-badge-overview,
.page-course:before,
.page-manage--organization-replacements
{
    width: 100%;
    min-height: 100%;
    padding: 10vh 0;
    color:var(--lightdark-text);
}

.page-course:before {top: 0px;}

.page-report-index,
.page-notification-index,
.page-profile,
.page-register-user,
.page-report h1,
.page-support,
.page-course__intro {
    color: var(--lightdark-text);
}

.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline,
.has-error.checkbox label,
.has-error.checkbox-inline label,
.has-error.radio label,
.has-error.radio-inline label {
    color: #ff004d;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {

    background-color: var(--primaryAccentColor);
    border-color: var(--primaryAccentColor);
}

#page-profile-tabs a {
    color: var(--primaryAccentColor);
	font-weight: 600;
	background-color: #F5F8FB;
	transition: 0.2s ease;
}
#page-profile-tabs a:hover {
    color: var(--primaryAccentColorHover);
	background-color: rgba(255,255,255,1);
	border-color: white;
}
#page-profile-tabs .active a, #page-profile-tabs .active a:focus, #page-profile-tabs .active a:hover {
	color: var(--accentColorDark) !important;
	background-color: rgba(255,255,255,1) !important;
	border-color: white;
	margin-right:10px;
}
.page-profile__content {
    width: 100%;
    margin:auto;
}

#page-profile-tabs .tab-content {
	    background-color: white;
    border-radius: 0 5px 5px 5px;
    padding: 2em;
    color: var(--accentColorDark);
}
#page-profile-tabs .nav-tabs {border-bottom:0px;}

.page-register-user .input-group-btn {font-size:1em;}

/*-----Boekjes-----*/

.page-course .module-teaser,
.page-course-index .course-teaser {
    margin: 20px 5px;
    transition: ease all 0.5s;
    -webkit-box-shadow: var(--boxShadowsGeneral);
    -moz-box-shadow: var(--boxShadowsGeneral);
    box-shadow: var(--boxShadowsGeneral);
	padding:0;
}

.page-course-index .course-teaser__image a:focus,
.page-course-index .course-teaser__image a:active:focus,
.page-course-index .course-teaser__image a:active,
.page-course__content .module-teaser__image a:focus,
.page-course__content .module-teaser__image a:active:focus,
.page-course__content .module-teaser__image a:active
{
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px !important;
    border:2px solid var(--lightdark-text) !important;
	padding:2px;
	border-radius: var(--borderRadius);
}

.page-course-index .course-teaser__image {min-height:auto;}
.course-teaser__image a {height: auto; min-height:auto;}
.page-course-index .course-teaser__image__image,
.page-course__content__panel__image__image {
    border-radius: var(--borderRadius);
    backdrop-filter: blur(var(--blurEffect));
}
.page-course .module-teaser,
.page-course-index .course-teaser {
    border-radius:var(--borderRadius);
}

.page-course .module-teaser--locked,
.page-course .module-teaser--locked:hover,
.page-course-index .course-teaser--locked,
.page-course-index .course-teaser--locked:hover,
.page-course .module-teaser--finished,
.page-course .module-teaser--finished:hover
{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


/*-----Slotjes & vinkjes op de boekjes & TODO pagina-----*/

.module-teaser .module-teaser__extra, .module-teaser--not-optional .panel-body::before  {
    height: 40px !important;
    width: 40px !important;
    position: absolute;
    top: 5px;
    right: 5px;
    left:auto;
    bottom: 0;
    z-index: 20;
}

.module-teaser .module-teaser__extra::before, .module-teaser--locked .module-teaser__extra::before, .module-teaser--not-optional .panel-body::before, .todo-module-teaser--not-optional::before {
    font: 25px / 1 FontAwesome;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    padding-left: 3px;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-shadow:none;
}

/* Slotje label */
.module-teaser--locked .module-teaser__extra::before,
.todo-module-listing .todo-module-teaser--not-linked::before {
    content: "\f023"; color: white;
}
/* Vinkje label */
.module-teaser--finished .module-teaser__extra::before {
    content: "\f00c"; color: #93A700;
}
/* Required/optional label */
.module-teaser--not-optional .panel-body::before,
.todo-module-teaser--not-optional::before {
    content: "\f02e";
    color: #AC35DE;
    top: 19px;
    left: 30px;
    font-size: 20px;
    z-index: 20;
}
.todo-module-teaser--not-optional::before {top:7px;}

.module-teaser--locked .module-teaser__image,
.todo-module-listing .todo-module-teaser--not-linked {
  -webkit-filter: blur(2px) grayscale(50%); /* Safari 6.0 - 9.0 */
  filter: blur(2px) grayscale(50%);
}

.module-teaser--finished .module-teaser__extra-finished{
    display:none;
}


/*--------------------Welkom gebruiker + logo rechtsboven--------------------*/

.login-top {
    padding-top: 50px;
    padding-right: 0px;
    width: 200px;
    top: 30px;
    right: 30px;
    font-size: 15px;
    font-family: var(--font-family-body);
    z-index: 5;
    background: var(--clientLogo);
    background-size: 60%;
    background-position: top right;
    background-repeat: no-repeat;
	color: var(--primaryAccentColor);
}

.login-top__greeting a,
.login-top__greeting a:active,
.login-top__greeting a:focus,
.login-top__greeting a:hover {
    color: var(--primaryAccentColor);
    font-weight: 600;
}

/*-----Header styles-----*/

.login-top-navigation {
    padding: 0px 10px;
    position: fixed;
    z-index: 10;
}

.dropdown-menu {
    font-size: 18px;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: clip;
    width: max-content;
	padding: 5px 0 0 0;
}
.login-top-navigation .dropdown-menu li a,
.page-step__header .dropdown-menu li a {
    padding: 10px 30px;
    border-bottom: 1px solid rgba(237,239,241,0.70);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.page-course__header,
.page-step__header {
    height: 70px;
    width: 100%;
    position: fixed;
    top: 0;
    box-shadow: none !important;
    color: var(--lightdark-text);
    z-index:1;
}

.page-step__header__pager {
	margin-left:20px;
	margin-top: 30px;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    background-color: rgba(237,239,241,1.00);
}


/*-----Rapportage uitzondering - blur valt over scrollbalk heen - staat op 0 om de balk te verwijderen op ALLE pagina's behalve module & steps-----*/
.page-report .login-top-navigation-wrapper {
    width: 0px;
}



/*-----Drop-down menu styles-----*/

.login-top-navigation__items--level-0, .login-top-navigation__items--level-1, .login-top-navigation__items--level-2, .login-top-navigation__items--level-3, .login-top-navigation__items--level-4 {
	background-color: rgba(237,239,241,0.70);
	margin: 0px;
}
.login-top-navigation__items__item--level-1 a {
    padding-left:50px !important;
}
.login-top-navigation__items__item--level-1 a:hover {
    translate: 5px;
}
.login-top-navigation__items--level-2 {
	margin-left:25px;
	background-color: rgba(36,71,146,0.04);
}

.login-top-navigation .dropdown .btn-default {
	background-color: var(--primaryAccentColor);
	border-color: var(--primaryAccentColor);
}
.login-top-navigation .dropdown .btn-default:hover {
	background-color: var(--primaryAccentColorHover);
	border-color: var(--primaryAccentColorHover);
}
.app--layout-new .page-course__header, .page-step--normal .page-step__header, .app--layout-new .page-step__header {
    background: -moz-linear-gradient(rgba(5,55,40,0.1), rgba(5,55,40,0));
    background: -webkit-linear-gradient(rgba(5,55,40,0.1), rgba(5,55,40,0));
    background: linear-gradient(rgba(5,55,40,0.1), rgba(5,55,40,0));
}

.app--layout-new .page-step__header__close .btn,
.app--layout-new .page-step__header__menu .btn,
.app--layout-new .page-course__header__close .btn,
.app--layout-new .page-step__header .step-volume-control button,
.login-top-navigation .btn {
    font-size: 20px;
    margin: 10px 5px;
    padding-top: 10px;
}
.glyphicon-menu-hamburger:before {
    font-weight:600;
}
.app--layout-new .page-step__header__pager,
.app--layout-new .page-step__header__title,
.app--layout-new .page-course__header__title {
    font-size: 1.1em;
	opacity: 0.8;
    padding-top:10px;
    top:auto;
}

.app--layout-new .page-step--normal .page-step__header,
.app--layout-new .page-course__header {
    height: 70px;
    backdrop-filter: blur(var(--blurEffect));
}
.app--layout-new .step-pager a:active, .app--layout-new .step-pager a:focus {
    opacity:1;
}
.app--layout-new .page-course__content {
    padding-top: 90px;
}

.page-step--hide-navigation .page-step__header__close .btn-default,
.page-step--hide-navigation.page-step--can-edit-steps .page-step__header__menu .btn-default {
	background-color: var(--secondaryAccentColor);
}

.page-step__content .replacement_content {
    display: inline-block;
    font-size: inherit;
    border-radius: var(--borderRadius);
    background-color: rgba(203,209,215,0.1);
    margin: 5px;
    padding: 5px 10px;
}

.page-step__content .memo_root {
    margin: 2em auto;
    padding-top:2em;
}
.page-step__content .replacement_item {
    border-radius: var(--borderRadius);
    background-color: rgba(203,209,215,0.1);
    padding: 12px;
}
.page-step__content .replacement_item .replacement_content {
    background-color: transparent;
}

.page-manage__content .form-group-depth-1 {
    border-radius: var(--borderRadius);
    background-color: rgba(203,209,215,0.1);
    padding: 15px 25px;
}


/*----------Notifications---------*/

.Toastify__toast--default {
    background-color: #fff;
    border-left: 5px solid #93A700;
    padding: 10px;
    border-radius: var(--borderRadius);
}
.notification-item {
    color: #93A700;
    border-left: 5px solid #93A700;
    padding: 0em 1em;
	box-shadow: 3px 3px 0px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: 3px 3px 0px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 3px 3px 0px 2px rgba(0,0,0,0.3);
}
.Toastify__progress-bar--default {background: #AC35DE;}

.Toastify__toast-container--top-center {
	width: fit-content !important;
	top:3em;
}

.notification-item-title:before {
    content: "   ";
}
.notification-item-title {
    color: var(--accentColorDark);
    display: inline;
}
.notification-item-highlight {
    font-weight: bold;
    display: inline;
    font-size: 2rem;
}
.notification-item-sent-at {
    color: #858c94;
}



/*---------------------------Reports-------------------------*/

.page-report-index__content div {
	width: 100%;
	margin:20px 0px;
    position:initial;
}

.page-report-index .table-responsive,
.page-report__content .page-report__content__results, .page-report-index__content .form-group .input-group {
	background-color:white;
	margin-top:15px;
	min-width: 100%;
    width: fit-content;
	padding:1em;
	color: var(--accentColorDark);
}

.table-responsive tbody {
	border-radius: var(--borderRadius);
	display:inline-grid;
	width:100%;
}

.table-responsive tbody tr {
display: inline-grid;
    background: #F5F8FB;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
	margin:5px;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.table-responsive tbody tr:hover {
	margin-left:8px;
}
.page-report__content {
    padding: 5vh 4vw !important;
}

.page-report__content table.dataTable thead>tr>th.sorting:before,
.page-report__content table.dataTable thead>tr>th.sorting:after {
    opacity: 0.5;
    cursor:pointer;
    transition: 0.2s;
	line-height: 6px;
	font-size: 0.6em;
    padding:4px;
}

.page-report__content .table>thead>tr>th {
    vertical-align: middle;
	color: var(--accentColorDark);
	opacity:0.7;
    padding-right: 30px !important;
	font-weight:700;
}
.page-report__content .table>thead>tr>th:hover {
	opacity: 1 !important;
    text-decoration: underline;
}

.page-report__content table.dataTable thead>tr>td.sorting_asc:before, .page-report__content table.dataTable thead>tr>td.sorting_desc:after, .page-report__content table.dataTable thead>tr>th.sorting_asc:before, .page-report__content table.dataTable thead>tr>th.sorting_desc:after {
    color: var(--primaryAccentColor) !important;
    opacity: 1 !important;
}
.page-report__content .table>thead>tr>th.sorting_desc, .page-report__content .table>thead>tr>th.sorting_asc {
	color: var(--accentColorDark) !important;
	opacity: 1;
}
.page-report__content tr .sorting_1 {
	background-color:#EFF1F4;
}

.page-report-index__content .input-group, .page-report-index__content .glyphicon, .page-report-index__content .form-control {
    position: initial;
}
.page-report-index__content .form-control {border-radius: 0 5px 5px 0 !important;}
.page-report__content a {font-weight:700;}
.form-control[disabled], fieldset[disabled] .form-control {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.20);
    color: var(--lightdark-text);
}

.page-report-index__content tr td:first-child {
    padding: 12px;
	max-width: 350px;
	font-weight: 600;
    text-decoration: none;
    background: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.page-report-index__content tr td:first-child a, .page-report-index__content tr td:first-child a:hover {
    color: var(--primaryAccentColor);
}

.page-report-index__content .table {
    margin-bottom:0px;
}

.page-report__content .table {
    min-width: 100%;
    border-radius: 5px;
    border: 1px solid #E5E8EB;
    box-shadow: none;
    padding:10px;
    background-color:white;
}

.page-report .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #F7F9FB !important;
}

.page-report-index__content a:hover {
    text-decoration: none;
}

.page-report-index__content .table>tbody>tr>td,
.page-report-index__content table>tbody>tr>th,
.page-report-index__content table>tfoot>tr>td,
.page-report-index__content table>tfoot>tr>th,
.page-report-index__content table>thead>tr>td,
.page-report-index__content table>thead>tr>th {
    border-top: 0px;
    color:var(--accentColorDark);
	padding: 0px 10px;
	display:contents;
}
.modal-dialog .modal-title {
	color:var(--accentColorDark);
}
.modal-dialog .modal-header .close {
    font-size:25px;
}

.page-report__content .page-report__content__actions .report-actions__actions {
	display:flex;
	gap: 5px;
}

.page-report__content__parameters {
	border-bottom: 0px;
	margin: 20px 0;
	padding:0;
	background: rgba(0,0,0,0.10);
	border-radius: var(--borderRadius);
}
.page-report__content .page-report__content__parameters div{
	margin:5px;
}
.page-report__content__parameters .report-parameters {
	display: flex;
}
.report-parameters__parameter--dialog .report-parameter__field {
	display: flex;
	width:95%;
	align-items: center;
	padding:0px 5px 0 0;
}
.report-parameters__parameter--dialog .report-parameter__field input {
	margin:0;
	cursor: default;
	margin-right: 10px;
	height: auto;
    border: 0px;
}
.report-parameter__clear, .report-parameter__search {
	margin:8px;
	zoom: 0.8;
}

.page-report__content__results .data-grid .row .datagrid__buttons .btn-group {display:block;}

.page-report__content__results .report-grid label, .page-report__content__results .report-grid .btn-group {
	display: inherit !important;
}

/*------------ Actionreports styling ---------*/

.page-report--with-actions .page-report__content .table {
    border-radius: 5px;
    border: 1px solid #E5E8EB;
    border-spacing: 0 10px;
    padding:10px;
    background-color: #F5F8FB;
}

.page-report--with-actions .page-report__content__actions {
    justify-content: start;
}

.page-report--with-actions .page-report__content .datagrid__table tbody tr {
    cursor: pointer;
    background-color: white !important;
    box-shadow: none;
    transition: transform 0.3s ease-out;
}
.page-report--with-actions .page-report__content .datagrid__table tbody tr:hover {
    transform: translateX(3px);
}
table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow:none;
}
.page-report--with-actions .page-report__content table.dataTable.table-striped>tbody>tr.selected>* {
    background-color: transparent;
    box-shadow: none;
}
.page-report--with-actions .page-report__content table.dataTable.table-striped>tbody>tr.selected {
    background-color: var(--primaryAccentColor) !important;
    transform: translateX(5px);
    box-shadow: none;
}

.page-report--with-actions .page-report__content .table-bordered>tbody>tr>td {
    border:0px;
}

.page-report--with-actions .page-report__content td:first-child {
    border-top-left-radius: var(--borderRadius);
    border-bottom-left-radius: var(--borderRadius);
    padding-left: 20px;
}
.page-report--with-actions .page-report__content td:last-child {
    border-bottom-right-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    padding-right: 20px;
}


/*--- Reports RESPONSIVE --*/

@media only screen and (max-width: 992px) {
	.page-report__content__parameters .report-parameters {
		display:inline-block;
	}
}







/*-------------------- Profile, Rapports, Widgets ----------------------*/

/* --- Leaderboard ---- */

.page-dashboard .app-content__content,
.page-badge-listing .app-content__content {
    max-width: 1000px;
    margin: auto;
}

.page-dashboard-widget {
    background: transparent;
}

.page-dashboard .scoreboard_myTotal,
.page-dashboard .scoreboard_leaderboard,
.page-dashboard .scoreboard_history,
.page-dashboard .scoreboard_achievement {
    padding: 1.5em;
    border-radius: var(--borderRadius);
    text-align: left;
    width: 100%;
    font-size: 1.1em;
}

.page-dashboard .scoreboard_myTotal {
color: white;
background-color: rgb(0,181,146);
}

.page-dashboard .scoreboard_myTotal_p span {
    font-weight: bold;
    font-size: 1.4em;
    margin-left: 1rem;
}
.scoreboard_myTotal_description {
    font-size: 0.7em;
    opacity: 0.7;
    font-style: italic;
}

.page-dashboard .page-dashboard-widget--id-c3e3ec81-460c-4e23-ba55-aef4bec2f56d {
    color: var(--accentColorDark);
}
.scoreboard_description {
    font-size:0.8em;
    font-style: italic;
    opacity:0.5;
}
.page-dashboard .scoreboard_leaderRow {
    background: transparent;
    padding: 15px 0;
    width: 100%;
    border: 0px;
    border-bottom: 1px solid rgba(89,113,100,0.46);
    margin:0;
    overflow:auto;
}
.page-dashboard .scoreboard_leaderboard, .page-dashboard .page-dashboard-widget--id-c3e3ec81-460c-4e23-ba55-aef4bec2f56d .scoreboard_title {
    background-color:white;
    color: var(--accentColorDark);
}
.page-dashboard-widget--title-laatste-3-maanden .scoreboard_leaderboard .scoreboard_title {
    color: white;
}
.page-dashboard-widget--title-laatste-3-maanden .scoreboard_leaderRow span {
    display:block;
    width:65px;
    margin-left:5px;
    opacity:0.8;
}
.page-dashboard-widget--title-laatste-3-maanden .scoreboard_leaderboard {
    background-color: var(--secondaryAccentColor);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    color: white;
}
.page-dashboard-widget--title-all-time-high .scoreboard_leaderboard {
    background-color: white;
    color: var(--accentColorDark);
}

.page-dashboard-widget--title-all-time-high .scoreboard_description + p {
    font-weight: bold;
    color: var(--optionalAccentColor);
}


.page-dashboard-widget--title-total-xp-steinitz {
        position:sticky;
        top:70px;
    }
.page-dashboard .scoreboard_leaderboard button {
    margin: 5px 0;
}
.page-dashboard .scoreboard_achievement {
    background-color: #f5f8fb;
    color:var(--accentColorDark);
    border: 1px solid rgba(243,243,243,1.00);
    border-left: 5px solid #93A700;
    margin: 10px 0px;
    padding: 20px 20px 18px;
}
.page-dashboard .achievement_date {
    font-size: 0.8em;
    color: #858c94;
}
.page-dashboard .achievement_xp {
    color: #93A700;
    font-weight: bold;
    font-size: 0.9em;
}
.page-dashboard .achievement_xp span {
    font-weight: 400;
    color:var(--accentColorDark);
}


/*-----------------Leaderboard/dashboard RESPONSIVE------------------*/

@media only screen and (max-width: 992px) {
    .page-dashboard__content__widgets {
        display: inline;
    }
    .page-dashboard-widget--title-total-xp-steinitz {
        position:relative;
        top:0px;
    }
}



/*-----Page TO-DO CSS-----*/

 .page-module-history__intro,  .page-module-voucher-calendar__intro, .page-module-calendar__intro, .page-module-index__intro, .page-module-journey-calendar__intro {
    margin-bottom:20px;
    margin-top:20px;
}

/*op to do list tekst kleur zwart maken */
.page-module-index__teasers, .todo-module-teaser, .todo-module-teaser__module-planned-at, .page-module-voucher-calendar__teaser, .page-module-calendar__teaser, .page-module-history__teaser {
	color: var(--accentColorDark);
}
.todo-module-teaser {
    grid-template-columns: 25% 1fr 1fr 5%;
	filter: drop-shadow(var(--boxShadowsGeneral));
    -webkit-filter: drop-shadow(var(--boxShadowsGeneral));
}
.page-module-journey-calendar__empty,
.page-module-voucher-calendar__empty,
.page-module-calendar__empty,
.page-module-index__empty,
.page-module-history__empty {
    border-radius: var(--borderRadius);
    background-color: rgba(203,209,215,0.1);
    padding: 15px;
}
.todo-module-teaser--not-linked {
    opacity: 0.5;
    box-shadow:none;
}
.todo-module-teaser--not-linked:hover{
    transform: translate(0, 0);
}
.todo-module-teaser--linked .todo-module-teaser--not-locked {
    opacity: 1;
}
.todo-module-teaser__module-image {
    max-width:90%;
}
.todo-module-teaser__module-description {
    font-size:initial;
}
.todo-module-teaser--linked:after {
    content: "\e080";
    color: var(--primaryAccentColor);
    display:inline-block;
    font-family: Glyphicons Halflings;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    text-align: right;
    width:100%;
}
.page-module-history__teasers .todo-module-teaser--linked:after {
    content: "\f00c";
    color: #93A700;
    font: 25px / 1 FontAwesome;
}
.page-module-history__teasers .todo-module-teaser--linked:after {
    content: "\f00c";
    color: #93A700;
    font: 25px / 1 FontAwesome;
}
.todo-module-teaser__module-planned-at::before {
    content: "\f133";
    color: #172E3D;
    font: 20px / 1 FontAwesome;
    margin-right:10px;
}

/*-----------------TO DO RESPONSIVE------------------*/

@media only screen and (max-width: 992px) {
    .page-dashboard__content__widgets {display: inline;}
    .todo-module-teaser__module-image {display:none;}
    .todo-module-teaser {display:inherit;}
}


@media only screen and (max-width: 600px) {
    .page-course-index__content__teasers__teaser {margin-bottom: -40px;}
}


/*--------------------Steps & content----------------------*/

p a, .page-logout__content a, .page-login__content p a {
    color: var(--primaryAccentColor);
    text-decoration: underline;
}
p a:hover, .page-logout__content a:hover, .page-login__content a:hover {
    color: var(--primaryAccentColorHover);
    text-decoration: underline;
    border-bottom:0;
}
p a:active, p a:focus {
    color: var(--primaryAccentColor);
    text-decoration: underline;
    border-bottom:0;
}

.txt-white {
    color: var(--lightdark-text);
    margin-top: 20px;
}
.text-center {
    text-align: center !important;
}
.wit_vlak_padding {
    padding: 1.5em;
    border-radius: var(--borderRadius);
    text-align: left;
    background-color: white;
    color: var(--accentColorDark) !important;
}

.app--layout-new .page-step {
    background-color: var(--lightdark-bgcolor);
    color: var(--lightdark-text);
    height: 100%;
    width: 100%;
}

.app--layout-new .page-step__content {
    width: 80vw;
    max-width: 1280px;
    padding: 70px 0px;
}

.screen-video,
.content-iframe {
    width: 85% !important;
    height: 85% !important;
    margin-left: 7%;
    margin-top: 1.8%;
    border-radius: var(--borderRadius);
}
.full-step-img {
	max-width: 100%;
    width: auto !important;
    max-height: 100vh;
}

.e-img {
    width: 100%;
    border-radius: var(--borderRadius);
    filter: drop-shadow(var(--boxShadowsGeneral));
    -webkit-filter: drop-shadow(var(--boxShadowsGeneral));
}

.ardaTextContentRow {
    padding: 5vw;
    font-size: 1.1em;
}

#stepNextBtn h4 {color:white;}

.ardaStepVerdieping h5 {
    color: var(--lightdark-text);
    font-weight: bold;
}

.e-header {
    color: var(--lightdark-text);
    font-family: var(--font-family-body);
    font-size: 2em;
    font-weight: 700;
}
.e-header-s {
    color: var(--optionalAccentColor);
    font-family: var(--font-family-body);
    font-size: 1.4em;
    width: 100%;
}

.e-paragraf {
    /*color: var(--lightdark-text);
    font-family: var(--font-family-body);
    font-size: 1.1em;
	line-height: 1.5em;*/
}

.screen-frame {
    width: 95% !important;
    z-index: -10;
    margin-left: 2%;
}

.page-step__content .col-md-6 h1 a,
.ardaTextContentRow a {
    padding: 7px 15px;
    text-align: center;
    color: white;
    font-size: large;
    font-weight: 600;
    text-decoration: underline;
    margin: 0;
    background: var(--secondaryAccentColor);
    border-radius: var(--borderRadius);
    border-color: var(--secondaryAccentColor);
}

.ardaTextContentRow a, .page-course__intro a, .page-report__content a, .page-widget-page .panel-body a {
    background: transparent;
    color: var(--primaryAccentColor);
    border: 0px;
    padding: 2px;
}

.ardaTextContentRow a:hover,
.page-course__intro a:hover,
.page-step__content a:active,
.page-step__content a:focus,
.page-step__content a:hover,
.page-report__content a:hover,
.page-widget-page .panel-body a:hover {
    color: var(--primaryAccentColorHover);
	border: 0px;
    text-decoration: underline;
}

.ardaStepVerdieping, .page-support-support-item {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: var(--borderRadius);
}

.ardaStepIndication {
    background: white;
	border: 1px solid #F0F0F0;
    padding: 20px 20px 10px;
    border-radius: var(--borderRadius);
    color: var(--accentColorDark);
    width: 100%;
    margin: 10px auto;
}
.ardaStepIndication .ardaXPstyle {
    color: #93A700;
    font-weight: bold;
}
.ardaStepIndication img {
    width: 30px;
    float: left;
    margin-right: 5px;
}

.ardaStepFinishedHeader {
    max-width: 800px;
    margin: auto;
    text-align: center;
    margin-bottom: 3em;
}


/*-----------Step Quizzes----------*/

.step-quiz:before {
    background: white;
    position: fixed;
    z-index: -10;
}

.page-step__content .step-quiz--busy, .page-step__content .step-quiz--intro {
    position: initial;
    padding: 2vw 10vw;
    background: white;
    padding: 2em;
    border-radius: var(--borderRadius);
    margin: 10vh auto;
    max-width: 800px;
    filter: drop-shadow(var(--boxShadowsGeneral));
    -webkit-filter: drop-shadow(var(--boxShadowsGeneral));
    color: var(--accentColorDark);
}

.step-quiz__score {
    color: var(--primaryAccentColor);
    margin:auto;
    margin-top:10rem;
}

.step-quiz__nav__item {
    width: 18px;
    height: 18px;
    font-size: initial;
    font-weight: bold;
    line-height: 15px;
    text-align: center;
    color: transparent;
    background: transparent;
    border-color: #858c94;
    border-radius: 20px;
}

.step-quiz__nav__item--current {
    background: var(--primaryAccentColor);
    border: none;
}

.step-quiz__nav__item--answered {
    background-color: var(--primaryAccentColor);
    border-color: var(--primaryAccentColor);
    opacity: 0.5;
}

.step-quiz__content h3 {
    position: relative;
    padding-bottom: 6px;
}

.step-quiz__content .checkbox label {
    background-color: #F5F8FB;
    padding: 5px 15px 5px 35px;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.step-quiz__content .checkbox label:hover {
    background-color: #E5E8EB;
}
.step-quiz__content .checkbox label:after {
    content: 'Finish';
}

.step-quiz__content h3:after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    display: block;
    border-bottom: 1px solid white;
}

.step-quiz__content .question__answers {
    margin-bottom:20px;
}

.step-quiz__content
    input[type="radio"]:checked
    ~ .question__answers__answer__content {
    color: white;
    background: var(--primaryAccentColor);
    border-color: var(--primaryAccentColor);
    font-weight: 500;
}

.step-quiz__content .question__answers__answer__content:hover {
    background-color: #E5E8EB;
}

.step-quiz__content .question__content, .step-quiz h3 {
    color: var(--accentColorDark);
}

.step-quiz__summary .list-group {
        -webkit-box-shadow: 5px 5px 25px -5px rgba(0,0,0,0.36);
        -moz-box-shadow: 5px 5px 25px -5px rgba(0,0,0,0.36);
        box-shadow: 5px 5px 25px -5px rgba(0,0,0,0.36);
    padding:1em;
    border-radius:  var(--borderRadius);
    background-color:white;
    color: var(--accentColorDark);
    max-width: 800px;
    margin: 1em auto;
}

.step-quiz__summary .list-group-item:last-child {
    background-color: #E5E8EB;
    font-weight: 500;
}

.step-quiz__summary .list-group-item-success + .list-group-item {
    display:none;
}

.step-quiz--completed h3 {
    color: var(--lightdark-text);
    margin: 4em auto 1em auto;
}

.step-quiz__summary .list-group-item-success .list-group-item-text:before {
    content: "\e013";
    display: inline-block;
    font-family: Glyphicons Halflings;
    font-style: normal;
    font-size: 0.8em;
    margin: 5px;
}

.step-quiz__summary .list-group-item-danger .list-group-item-text:before {
    content:"\e014";
    display: inline-block;
    font-family: Glyphicons Halflings;
    font-style: normal;
    font-size: 0.8em;
    margin: 5px;
}

.step-quiz__summary .answer_explanation:before {
    content: "\e003";
    display: inline-block;
    font-family: Glyphicons Halflings;
    font-style: normal;

    font-size: 0.8em;
    margin: 5px;
}

.step-quiz__next:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent white;
}

.step-quiz__next[disabled] {
    color: rgba(185, 185, 185, 1);
    background: transparent;
    border: 1px solid transparent;
}

.step-quiz__content .question__answers__answer__content {
    color: var(--accentColorDark);
    border-radius: var(--borderRadius);
    background: #F5F8FB;
    border:0px;
    padding: 15px;
    font-size: 1.1em;
}

.list-group-item-success {
    color: #819300;
    background-color: #F4FACF;
}

.step-quiz__completion-message {
    top:auto;
    margin-bottom: 2em;
}
.step-quiz.step-quiz--completed h3:after {
    border:0px;
}

.step-quiz.step-quiz--intro h3:after,
.step-quiz.step-quiz--complete h3:after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    display: block;
    border-bottom: 1px solid white;
}

.step-quiz.step-quiz--complete h3 + p {
    margin-bottom: 2em;
}

.step-quiz__summary .list-group-item {
    text-align: left;
    font-weight: 600;
    border:0px;
    border-radius: var(--borderRadius);
    margin:10px;
}
.step-quiz__summary .list-group-item-text {
    border-top: 0px;
    font-weight: 500;
}
.page-step__quiz .page-step__content {
    min-width: 100%;
}

.page-step__content #vraag {
    color: var(--accentColorDark);
    filter: drop-shadow(var(--boxShadowsGeneral));
    -webkit-filter: drop-shadow(var(--boxShadowsGeneral));
}

.page-step__content .total_score_field {
    position: fixed;
    z-index: 10;
    top: 10px;
    right: 60px;
    background-color: #E5E8EB;
    border-radius: var(--borderRadius);
    color: var(--primaryAccentColor);
}
.page-step__content .total_score_field p {
    margin: 11.5px;
    font-weight: 600;
    padding: 0px;
}

.step-quiz.step-quiz--intro .btn-primary {
    margin-top: 2em;
}

.step-quiz.step-quiz--intro .btn-primary:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*---------------Step question statistics------------*/

.page-step--question .question__answers .progress {background-color: #E5E8EB;}

.page-step--question .question__answers .question__answers__answer:nth-child(1)
.question-statistic-bar .progress-bar {background-color: #AC35DE}

.page-step--question .question__answers .question__answers__answer:nth-child(2)
.question-statistic-bar .progress-bar {background-color: #F18F01;}

.page-step--question .question__answers .question__answers__answer:nth-child(3)
.question-statistic-bar .progress-bar {background-color: #3C1518;}

.page-step--question .question__answers .question__answers__answer:nth-child(4)
.question-statistic-bar .progress-bar {background-color: #20A9E6;}

.page-step--question .question__answers .question__answers__answer:nth-child(5)
.question-statistic-bar .progress-bar {background-color: #FFDC00;}

.page-step--question .question__answers .question__answers__answer:nth-child(6)
.question-statistic-bar .progress-bar {background-color: #FFDC00;}

.page-step--question .progress-bar-danger {background-color: #FF004D;}
.page-step--question .progress-bar-success {background-color: #93A700;}

.step-question .question__answers__answer--selected {
    filter: drop-shadow(var(--boxShadowsGeneral));
    -webkit-filter: drop-shadow(var(--boxShadowsGeneral));
    border-color:white !important;
}
.step-question__question {margin:0;}
.question__answers label {font-weight: initial}
.step-question--answered .question__answers label {
    padding: 20px 0px 10px 0px;
}
.step-question--answered .question__answers__answer--selected label  {font-weight:700;}
.step-question--answered .question__answers__answer .question-statistic-count {margin-bottom:10px;}

.step-question .question__answers__answer--selected.question__answers__answer--not-correct,
.step-question .question__answers__answer--selected.question__answers__answer--correct {
    border-color:white;
}
.step-question {max-width: 800px; margin: auto;}

.arda-quiz-indication {
    background-color: rgba(218,218,218,0.2);
    border-radius: 5px;
    color: var(--lightdark-text);
    width: fit-content;
    padding: 5px 20px;
    display: inline-block;
    margin-top:5vh;
}

/*-----------Forum pagina---------*/

.forum-question-list__item, .forum-question-list__item:nth-child(odd) {
    color: var(--accentColorDark);
    background-color: white;
    filter: drop-shadow(var(--boxShadowsGeneral));
    border-radius: var(--borderRadius);
    -webkit-filter: drop-shadow(var(--boxShadowsGeneral));
    display: grid;
    grid-template-columns: auto 25%;
    transition: transform .3s ease;
    padding: 1em;
}
.forum-question-list__item:hover {
    transform: translate(0, -4px);
}
.forum-question-list__item__meta {text-align: right}

.forum-question-list__item__title a {
    color: var(--primaryAccentColor);
    font-weight:700;
}
.forum-question-list__item__title a:hover {
    text-decoration: none;
    color: var(--primaryAccentColorHover);
}
.forum-question-list__item__votes button, .forum-answer-list__item__meta button, .page-forum-question__meta-votes button {
    background-color: #93A700;
    border: 0px;
    padding: 5px 10px 3px;
    border-radius:20px;
    margin-right:10px;
}
.forum-question-list__item__votes button:hover, .forum-answer-list__item__meta button:hover, .page-forum-question__meta-votes button:hover {
    background-color: #B0C800;
    border: 0px;
}

.forum-question-list__item__answers {
    padding: 0px 15px;
    height: 31px;
}

.forum-question-list__item__votes {
    background-color: #7E8F00;
    border-radius:20px;
    padding: 0 20px 0px 0;
    color:white !important;
}
.forum-question-list__item__answers {
    border-radius:20px;
    background-color: #F5F8FB;
    padding: 5px 15px;
}
.forum-question-list__item__answers span {
    margin-right:10px;
}

/*-----Forum detailspagina-----*/

.page-forum-question__question__title h1 {color: var(--accentColorDark);}
.page-forum-question__question__content, .ql-toolbar.ql-snow, .page-forum-question__meta, .forum-answer-list__item:nth-child(odd) .forum-answer-list__item__content, .forum-answer-list__item:nth-child(2n) .forum-answer-list__item__content, .forum-answer-list__item:nth-child(odd)  {
    background: transparent;
    border: 0px;
}
.page-forum-question__content, .forum-answer-list__item  {
    background-color: white;
    color: var(--accentColorDark);
    border-radius: var(--borderRadius);
    padding: 1em 2em;
    border:0px;
}
.forum-answer-list__item:nth-child(odd), .forum-answer-list__item {
    background: #F5F8FB;
}
.page-forum-question__meta+.page-forum-question__answers {border-top:0px;}
.forum-answer-list__item__meta, .page-forum-question__meta {
    border-top: 1px solid #E5E8EB;
    padding-top:10px;
}

.forum-answer-submission-form .quill {
    background-color: #F5F8FB;
    border-radius: 10px;
    border:0px;
    padding:10px;
}
.ql-container.ql-snow {
    border:0px;
    background-color: white;
    border-radius:20px;
    margin: 15px 5px;
}
.ql-container {min-height:300px;}
.ql-editor.ql-blank:before, .ql-editor, .ql-container .ql-snow p {
    font-style:normal; font-size:1.1em;
    font-family: var(--font-family-body);
}
.ql-snow.ql-toolbar button:focus, .ql-snow.ql-toolbar button:hover {
    color: var(--primaryAccentColor);
}



/*------------Feedback pop-up----------*/

.feedback-modal__body {
	background-color: rgba(0,0,0,0.6);
	backdrop-filter: blur(10px);
}

.feedback-modal__body:after {
    background-image:none;
    opacity: 1;
}
.feedback-modal .modal-content,
.feedback-modal .modal-dialog .modal-content {
	background-color: transparent;
}

.feedback-modal__title__inner {
    color: white;
    font-family: var(--font-family-body);
}

.feedback-modal__detail-indicator__inner,
.feedback-detail__help-text__inner {
    background-color: transparent;
    color: white;
    padding: 10px;
}

.feedback-detail__submit__inner button[disabled], .feedback-detail__submit__inner button[disabled]:hover {
    background-color: var(--primaryAccentColor);
    color: #E5E8EB;
	filter: grayscale(100);
    padding: 10px;
	font-family: var(--font-family-body);
	transform: translateY(5px);
	transition: ease all;
}

.feedback-detail__question__inner {
	border: none;
	background: rgba(245,248,251,0.11);
}

.feedback-detail__submit__inner button {
    background-color: var(--primaryAccentColor);
    color: white;
	filter: grayscale(0);
    padding: 10px;
	font-family: var(--font-family-body);
	transform: translateY(0px);
}

.feedback-detail__submit__inner button:hover {
    background: var(--primaryAccentColor);
	color: #E5E8EB;
}
.feedback-detail__submit__inner button:active,
.feedback-detail__submit__inner button:focus,
.feedback-detail__submit__inner button:hover {
    background: var(--primaryAccentColor);
}
.feedback-detail__polar__text {
    background: var(--secondaryAccentColor);
    color: white;
}
.feedback-detail__polar__text:hover {
    background: var(--primaryAccentColor);
}
.feedback-detail__polar input:checked ~ .feedback-detail__polar__text {
    background-color: var(--primaryAccentColor);
}
.feedback-modal__success-button__inner button {
    background: var(--primaryAccentColor);
    padding: 10px 25px;
}
.feedback-modal__success {
    background: transparent;
    color: white;
    font-weight: normal;
}

.page-step__content .feedback-button {
	text-align: center;
	position:fixed;
	bottom:0px;
	left:0px;
    z-index:100;
	margin:auto;
	padding:25px;
	backdrop-filter: blur(5px);
	background-color: rgba(12,12,12,0.10);
	width:100%;
}
.page-step__content .feedback-button button {
	background: var(--primaryAccentColor);
}


/*----- Badges pagina -----*/

.page-badge-listing__badges-content .badge-listing {
    grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1rem;
    padding:20px 0px;
    align-items: flex-end;
}
.page-badge-listing__missing-badges-content .badge-listing {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 2rem;
    padding:20px 0px;
    align-items: flex-end;
}

.badge-listing__item {
    border-radius: var(--borderRadius);
	cursor: pointer;
	text-align: center;
}
.page-badge-listing .badge-modal__body {
    text-align: center;
        background-clip: padding-box;
        background-color: #fff;
        border: 0px;
        border-radius: 6px;
        box-shadow: 0 3px 9px rgba(0,0,0,.5);
        outline: 0;
        position: relative;
        padding:3em;
        width:30vw;
        margin: 15vh auto;
}

.page-badge-listing__badges {
    text-align: center;
    margin:auto;
}
.page-badge-listing__missing-badges {
    background-color: white;
    border-radius: var(--borderRadius);
    text-align: center;
    margin:auto;
}

.badge-listing__item-title {
    background-color: var(--secondaryAccentColor);
    color: white;
    text-align: center;
    width: fit-content;
    font-weight: bold;
    position: relative;
    margin: 0 auto -20px auto;
    top:auto;right:auto;left:auto;
}
.badge-modal__title-icon {display: none;}
.page-badge-listing__badges-heading h2 {
	color: var(--primaryAccentColor);
    padding:25px 0 0 0;
}
.page-badge-listing__missing-badges-heading h2 {
	color: var(--accentColorDark);
    padding:25px 0 0 0;
    font-size: 1.5em;
}
.badge-description-block {
    text-align: center;
    padding: 2em;
}
.badge-modal .modal-header {
    border-bottom: 0px !important;
}
.badge-modal .badge-modal__body {
    display: flex;
    flex-flow: column;
    text-align: center;
}
.badge-modal__header .badge-modal__title-text {
    color: var(--primaryAccentColor);
    text-align: center;
    position: absolute;
    width: 95%;
    margin-top: 2em;
    font-size: 1.5em;
}
.badge-modal__content-html {order: 2}
.badge-modal__content-html .alert {
    margin-bottom:0px;
}
.badge-listing__item-icon img {
    transform: translate-y(0px);
	max-width: 230px;
	transition: filter 0.5s ease;
}
.badge-points {
    color: #93A700;
    margin:auto;
    font-weight:bold;
}
.badge-modal__body-image {
    max-width: 300px;
    width: 90%;
    margin: auto;
}
.badge-score-description {
    font-size:1.2em;
    opacity:0.8;
}

.page-badge-listing__badges .badge-listing__item-icon img {
	animation: float 4s ease-in-out infinite;
	filter: saturate(1.5);
}
.page-badge-listing__badges .badge-listing__item-icon img:hover {
	filter: saturate(1.7) brightness(110%);
}
.page-badge-listing__missing-badges .badge-listing__item-icon img {
   filter: grayscale(100%) brightness(120%) contrast(40%);
}
.page-badge-listing__missing-badges .badge-listing__item-icon img:hover {
   filter: grayscale(0%) brightness(100%) contrast(100%);
}


@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-8px);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes pop-up {
  0% {
    transform: translatey(0);
  }
  90% {
    transform: translatey(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/* ondertiteling */


video::cue {
    /*font-size: 1em;*/
    line-height:1.3;
}

/*-----------------RESPONSIVE for tablets------------------*/

@media (max-width: 1199px) {
    .page-badge-listing__badges .badge-listing {grid-template-columns: 1fr 1fr 1fr;}
}

@media only screen and (max-width: 992px) {
    .e-background-left {
        width: 100%;
        height: 100%;
        position: fixed;
    }
	.page-badge-listing__missing-badges-content .badge-listing {
      grid-template-columns: 1fr 1fr 1fr;
	}
    /*
    video::cue {
        font-size:0.8em;
    }
        */
}


/*-----------------RESPONSIVE for phone------------------*/

@media only screen and (max-width: 640px) {
    /*Hide pager title on small screens*/
    .app--layout-new .page-step__header__title h5,
    .page-course__header__title
    {display:none;}

    .app--layout-new .page-step--normal .page-step__header, .app--layout-new .page-course__header {
        height:0px;
    }

	.page-badge-listing .badge-listing {
      grid-template-columns: 1fr;
	}
    .page-badge-listing__missing-badges-content .badge-listing {
      grid-template-columns: 1fr 1fr;
	}
}

/*-----------------ARDA gradient animator------------------*/

.arda_gradient_animated_activate {
    background: linear-gradient(233deg, #4eac62, #00b592, #93a700);
    background-size: 400% 400%;

    -webkit-animation: arda_color_gradient 60s ease infinite;
    -moz-animation: arda_color_gradient 60s ease infinite;
    -o-animation: arda_color_gradient 60s ease infinite;
    animation: arda_color_gradient 60s ease infinite;
}

@-webkit-keyframes arda_color_gradient {
    0%{background-position:0% 91%}
    50%{background-position:100% 10%}
    100%{background-position:0% 91%}
}
@-moz-keyframes arda_color_gradient {
    0%{background-position:0% 91%}
    50%{background-position:100% 10%}
    100%{background-position:0% 91%}
}
@-o-keyframes arda_color_gradient {
    0%{background-position:0% 91%}
    50%{background-position:100% 10%}
    100%{background-position:0% 91%}
}
@keyframes arda_color_gradient {
    0%{background-position:0% 91%}
    50%{background-position:100% 10%}
    100%{background-position:0% 91%}
}