@font-face {
    font-family: RO Sans;
    src: url(/fonts/ro-sans/ROsanswebtextregular.eot) format("embedded-opentype"),url(/fonts/ro-sans/ROsanswebtextregular.woff) format("woff"),url(/fonts/ro-sans/ROsanswebtextregular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: RO Sans;
    src: url(/fonts/ro-sans/ROsanswebtextitalic.eot) format("embedded-opentype"),url(/fonts/ro-sans/ROsanswebtextitalic.woff) format("woff"),url(/fonts/ro-sans/ROsanswebtextitalic.ttf) format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: RO Sans;
    src: url(/fonts/ro-sans/ROsanswebtextbold.eot) format("embedded-opentype"),url(/fonts/ro-sans/ROsanswebtextbold.woff) format("woff"),url(/fonts/ro-sans/ROsanswebtextbold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


:root {
    --c-primary: 199.9deg 98.7% 30.6%; /* Donkerblauw */
    --c-secondary: 41.5deg 100% 53.5%; /* Donkergeel */
    --c-accent: 199.8deg 64.7% 73.3%; /* Lichtblauw */
    --c-accent-light: 199.6deg 63.4% 83.9%; /* Lichtblauw 60% */
    --c-accent-lighter: 200deg 65.9% 92%; /* Lichtblauw 30% */
    --c-account: 332.4deg 100% 39.6%; /* Robijnrood */
    --c-info: 33.26deg 94.15% 59.8%;
    --c-tip: 33.26deg 94.15% 54.8%;
    --c-success: 98deg 83.7% 28.8%; /* Groen */
    --c-success-700: 139.2deg 39.1% 25.1%;  /* Donkergroen */
    --c-warning: 4.3deg 75.3% 47.6%;
    --c-warning-light: 13deg 100% 92.7%;
    --c-shadow: 0deg 0% 60%;

    --c-gray-100: 0deg 0% 95.3%;
    --c-gray-200: 0deg 0% 90.2%;
    --c-gray-300: 0deg 0% 80%;
    --c-gray-400: 0deg 0% 70.6%;
    --c-gray-500: 0deg 0% 60%;

    --c-body: 222.2deg 47.4% 11.2%;
    --c-page: #F3F3F3;
    
    --c-card-icon: hsl(33.26deg 94.15% 79.8%);

    --chat-own-msg-bg: 225.63deg 53.38% 73.92%;
    --chapters-bg: #fff;

    --f-accent: "RO Sans", Calibri, Verdana, sans-serif;
    --f-main: "RO Sans", Calibri, Verdana, sans-serif;
    --f-heading-weight: 700;
    
    --i-auth-bg: url('/images/auth-radio.webp');

    --f-btn-weight: 400;
    --s-btn-radius: 0;

    --s-webinarsub-radius: 0;

    --c-subs-header-bg: 0 0% 100%;
    
    --s-subs-logo-height: 100px;
    --s-subs-logo-max-w: fit-content;
    --s-subs-logo-top-margin-vert: 0px;
    --s-subs-logo-top-margin-vert-md: 0px;
    --s-subs-logo-bottom-margin-vert: calc(var(--s-subs-logo-height) * 0.25);
    --s-subs-logo-bottom-margin-vert-md: calc(var(--s-subs-logo-height) * 0.25);

    --c-subs-nav: var(--c-body);
    --f-subs-nav: var(--f-main);
    --f-subs-nav-weight: 700;
    --c-subs-nav-overlay-bg: hsl(0 0% 0%/0.5);

    --c-subs-menu-active-bg: hsl(var(--c-accent));
    --s-subs-menu-active-height: 3px;
    --s-subs-menu-active-radius: 0.25rem;

    --c-subs-acc-menu-bg: var(--c-subs-header-bg);
    --s-subs-acc-menu-radius: var(--s-webinarsub-radius);
                
    --viewer-min-height: 100dvh;
    --viewer-info-space: 4rem;
    
    --viewer-background-color: inherit;
    --viewer-text-color: inherit;
}

.btn {
    --_c-btn-bg: transparent;
    --_c-btn-hover-bg: hsl(var(--c-gray-200));
    --_c-btn-border: transparent;
    --_c-btn-hover-border: hsl(var(--c-gray-200));
    --_c-btn-color: hsl(var(--c-body));
    --_c-btn-hover-color: inherit;
}

.btn--primary {
    --_c-btn-bg: hsl(var(--c-primary));
    --_c-btn-hover-bg: color-mix(in lch, hsl(var(--c-primary)) 70%, black);
    --_c-btn-border: hsl(var(--c-primary));
    --_c-btn-hover-border: color-mix(in lch, hsl(var(--c-primary)) 70%, black);
    --_c-btn-color: hsl(0 0% 100%);
    --_c-btn-hover-color: hsl(0 0% 100%);
}

.btn--outline-primary {
    --_c-btn-bg: hsl(0 0% 100%);
    --_c-btn-hover-bg: hsl(var(--c-primary));
    --_c-btn-border: hsl(var(--c-primary));
    --_c-btn-hover-border: hsl(var(--c-primary));
    --_c-btn-color: hsl(var(--c-primary));
    --_c-btn-hover-color: hsl(0 0% 100%);
}

.btn--secondary {
    --_c-btn-bg: hsl(var(--c-secondary));
    --_c-btn-hover-bg: color-mix(in lch, hsl(var(--c-secondary)) 70%, black);
    --_c-btn-border: hsl(var(--c-secondary));
    --_c-btn-hover-border: color-mix(in lch, hsl(var(--c-secondary)) 70%, black);
    --_c-btn-color: hsl(0 0% 0%);
    --_c-btn-hover-color: hsl(0 0% 100%);
}

.btn--outline-secondary {
    --_c-btn-bg: hsl(0 0% 100%);
    --_c-btn-hover-bg: hsl(var(--c-secondary));
    --_c-btn-border: hsl(var(--c-secondary));
    --_c-btn-hover-border: hsl(var(--c-secondary));
    --_c-btn-color: hsl(var(--c-secondary));
    --_c-btn-hover-color: hsl(0 0% 100%);
}

.btn--success {
    --_c-btn-bg: hsl(var(--c-success));
    --_c-btn-hover-bg: color-mix(in lch, hsl(var(--c-success)) 70%, black);
    --_c-btn-border: hsl(var(--c-success));
    --_c-btn-hover-border: color-mix(in lch, hsl(var(--c-success)) 70%, black);
    --_c-btn-color: hsl(0 0% 100%);
    --_c-btn-hover-color: hsl(0 0% 100%);
}

.btn--outline-success {
    --_c-btn-bg: hsl(0 0% 100%);
    --_c-btn-hover-bg: hsl(var(--c-success));
    --_c-btn-border: hsl(var(--c-success));
    --_c-btn-hover-border: hsl(var(--c-success));
    --_c-btn-color: hsl(0 0% 5%);
    --_c-btn-hover-color: hsl(0 0% 5%);
}

.btn--warning {
    --_c-btn-bg: hsl(var(--c-warning));
    --_c-btn-hover-bg: color-mix(in lch, hsl(var(--c-warning)) 70%, black);
    --_c-btn-border: hsl(var(--c-warning));
    --_c-btn-hover-border: color-mix(in lch, hsl(var(--c-warning)) 70%, black);
    --_c-btn-color: hsl(0 0% 100%);
    --_c-btn-hover-color: hsl(0 0% 100%);
}

.btn--outline-warning {
    --_c-btn-bg: hsl(0 0% 100%);
    --_c-btn-hover-bg: hsl(var(--c-warning));
    --_c-btn-border: hsl(var(--c-warning));
    --_c-btn-hover-border: hsl(var(--c-warning));
    --_c-btn-color: hsl(var(--c-warning));
    --_c-btn-hover-color: hsl(0 0% 100%);
}

.btn--outline-white {
    --_c-btn-bg: transparent;
    --_c-btn-hover-bg: hsl(0 0% 100%);
    --_c-btn-border: hsl(0 0% 100%);
    --_c-btn-hover-border: hsl(0 0% 100%);
    --_c-btn-color: hsl(0 0% 100%);
    --_c-btn-hover-color: hsl(var(--c-body));
}

.btn--link {
    --_c-btn-bg: transparent;
    --_c-btn-hover-bg: hsl(0 0% 100%);
    --_c-btn-border: transparent;
    --_c-btn-hover-border: transparent;
    --_c-btn-color: hsl(var(--c-body));
    --_c-btn-hover-color: hsl(var(--c-body));
}

.vwr-countdown {
    --c-vwr-countdown-bg: transparent;
    --c-vwr-countdown-txt: hsl(0deg 0% 100%);
    align-items: center;
}