@import "normalize.css";
@import "forms.css";
@import "questionaire.css";
@import "utilities.css";
@import "card.css";
@import "licensee.css";
@import "home.css";
@import "learningjournal.css";
@import "database.css";
@import "pdf.css";
@import "charts.css";
@import "admin.css";
@import "overview-grid.css";

:root {
    --primary:  hsl(203, 29%, 44%);
    --primary--dark--1:  hsl(203, 29%, 34%);
    --primary--dark--2:  hsl(203, 29%, 24%);
    --primary--light:  hsl(203, 29%, 94%);
    --primary--light--2:  hsl(203, 29%, 80%);
    --primary--light--3:  hsl(203, 29%, 54%);
    --secondary: hsl(43, 20%, 70%);
    --secondary--light: hsl(43, 20%, 94%);
    --secondary--light--2: hsl(43, 20%, 90%);
    --secondary--light--3: hsl(43, 20%, 80%);
    --secondary--dark--1: hsl(43, 20%, 60%);
    --secondary--dark--2: hsl(43, 20%, 50%);
    --secondary--dark--3: hsl(43, 20%, 40%);
    --cta: hsl(36, 95%, 47%);
    --white: hsl(0, 0%, 100%);
    --alert: #a34c4c;
    --alert--light: #f6c6c6;
    --alert-orange: #e39c1c;
    --alert-green: #86ce9b;

    --text: hsl(203, 26%, 23%);
    --text--white: hsl(203, 29%, 84%);
    --vp-max-width: 1300px;

    --section-side-padding: 60px;

    --rounded-corners: 2em;
    --rounded-corners--m: 1.6em;
    --grid-gap: 2em;
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";

    --box-shadow--m: 0 3px 10px rgba(0, 0, 0, 0.1);
    --box-shadow--l: 0 7px 10px rgba(0, 0, 0, 0.2);
}
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../fonts/fa-solid-900.ttf") format("woff2"), url("../fonts/fa-solid-900.ttf") format("truetype");

}
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fonts/fa-regular-400.ttf") format("woff2"), url("../fonts/fa-regular-400.ttf") format("truetype");
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url("../fonts/Poppins-Light.ttf") format("truetype");
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: block;
    src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
}

.fas,
.fa-solid {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; }

html {
    font-size: 62.5%; /* 1em = 10px, if the default browser font-size is 16px. (62.5% of 16 = 10) */
}
body {
    /*font-family: Georgia, "Times New Roman", Hei, "黑体", "微软雅黑", "宋体", serif;*/
    font-family: 'Poppins', Open Sans,Arial,Hei, "黑体", "微软雅黑", "宋体",sans-serif;
    font-size: 1.8em;
    line-height: 1.5;
    background-color: var(--primary);
    /*background-color: var(--secondary);*/
    background: rgb(79,119,145);
    min-width: 760px;

}
figure {
    margin: 0;
}
@media all and (max-width: 768px) {
    body {
        font-size: 1.6em;
    }
}


.header__top, .breadcrums--wrapper, footer, .header_max-width, .inner-section {
    padding-left: var(--section-side-padding);
    padding-right: var(--section-side-padding);
}
header {
    overflow: hidden;
    /*background-color: #fff;*/
}
.header__inner {
    padding-top: 1em;
    padding-bottom: 1em;
    /*max-width: var(--vp-max-width);*/
    margin: 0 auto;
}
.header__top, .breadcrums--wrapper {
    max-width: var(--vp-max-width);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;

    /*width: 100%;*/
}
.header__top {
    padding-bottom: 1em;
}
figure.logo {
    width: 390px;
    margin: 0;
}
.header__top__nav {
    margin-left: auto;
    color: var(--primary--light);
    display: flex;
    font-size: .8em;
}
.header__top__nav > * {
    display: flex;
    gap: .3em;
    align-items: center;
}
.header__top__nav > *:after {
    content: '|';
    display: block;
    margin: 0 .7em;
}
.header__top__nav > *:last-child:after {
    display: none;
}
.header__top__nav a {
    color: var(--primary--light);
    text-decoration: none;
}
.header__top__nav a:hover {
    font-weight: 800;
}
.header__bottom {
    display: flex;
    flex-direction: column;
}
.header__line {
    width: 300px;
    height: 17px;
    border-radius: 100px;
    box-shadow: 0 3px rgba(0,0,0,0.1);
}
.header__line.primary {
    background-color: var(--primary);
}
.header__line.secondary {
    background-color: var(--secondary);
}
.header__line.white {
    background-color: var(--primary--light--2);
}
.header__line.one {
    width: 80vw;
    min-width: 300px;
    left: -5px;
    position: relative;
    max-width: calc((100vw / 2) + 400px);
}
.header__line.three {
    width: 70vw;
    min-width: 400px;
    left: -5px;
    position: relative;
    max-width: calc((100vw / 2) + 300px);
}

.breadcrums--wrapper {
    height: 45px;
    display: flex;
    flex-direction: row;
    /*overflow: hidden;*/
    position: relative;
    align-items: center;
}
.breadcrums {
    padding-right: 20px;
    flex-shrink: 0;
    color: var(--text--white);
    font-size: .85em;

}
.breadcrums a {
    color: var(--text--white);
}
.header__line.two {
    width: 300vw;
    flex-shrink: 0;
}

.header__bottom__nav {
    position: absolute;
    right: var(--section-side-padding);

}
.header_max-width {
    /*background-color: #ffffff;*/
    left: 50%;
    height: 20px;
    position: absolute;
    width: 100%;
    max-width: var(--vp-max-width);
    transform: translateX(-50%);
}
.goToSelect {
    width: 100px;
    box-shadow: none;
    /*border: 2px solid var(--primary--light--2);*/
    font-size: .9em;
    margin-top: 18px;
    background-color: var(--primary);
    color: var(--text--white);
}
.goToSelect select {
    padding-right: 0;
}
.goToSelect:after {
    display: none;
}
#goToSelect optgroup {
    margin: 0;
    padding: 0;
}

/*fixed header*/

section {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
}
.inner-section, footer {
    max-width: var(--vp-max-width);
    margin: 0 auto;

}

footer {
    margin-bottom: var(--space-l);
    padding-top: var(--space-xl);

}
footer p {
    color: var(--text--white);
}


/* ########### SECTIONS ############### */
.section--primary-light {
    background-color: var(--primary--light);
    color: var(--primary);
}
.section--primary-light h3, .section--primary-light h1, .section--primary-light p {
    color: var(--primary)!important;
}

/* ########### TYPOGRAPHY ############### */
p {
    line-height: 1.5;
    color: var(--text);
    margin: 1em 0;
}

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.3;
}
h1 {
    /*color: var(--primary);*/
    margin-bottom: var(--space-m);
    margin-top: 0;
}

h2 {
    color: var(--primary);
    margin: 0;
    font-size: 1.4em;

}
h3 {
    font-size: 1.1em;
    /*color: var(--primary);*/
}
blockquote {
    font-style: italic;
}
blockquote .quote-name {
    font-style: normal;
}

main > p,
main > h1,
main > h2,
main > h3,
.title-header {
    color: var(--text--white);
}
a {
    color: var(--cta);
}


/* ########### BUTTONS ############### */



button {
    padding: .5em 1em;
    font-size: 1.1em;
    text-decoration: none;
    border-radius: 100px;
    border: 1px solid var(--primary);
    margin-top: 1em;
    display: inline-block;
    transition: all .3s;
    box-shadow: var(--box-shadow--m);

}

.button-wrapper {
    display: flex;
    gap: .9em;
    flex-wrap: wrap;
    margin-top: var(--space-l);
}
.button-wrapper button {
    margin: 0;
}


.btn--primary {
    background-color: var(--cta);
    color: var(--white);
    border: 1px solid var(--cta);
    padding: .5em 1em;
    font-size: 1.1em;
    text-decoration: none;
    border-radius: 100px;
    margin-top: 1em;
    display: inline-block;
    transition: all .3s;
    box-shadow: var(--box-shadow--m);
    min-width: 200px;
}
.btn--secondary {
    background-color: var(--primary--light);
    color: var(--primary);
    min-width: 200px;
}

.btn--outline {
    background-color: rgba(0,0,0,0);
    border: 2px solid var(--primary--light);
}
.btn--warning {
    background-color: var(--alert);
    color: #ffffff;
}
.btn--back {
    background-color: var(--alert);
    background-color: rgba(0,0,0,0);
    color: var(--primary--light--2);
    border: 1px solid var(--primary--light--2);
    margin-bottom: var(--space-m);
}
.btn--back--header {
    margin-top: 0;
}

.btn--s {
    font-size: 1em;
}
.btn--primary:hover,
.btn--secondary:hover,
.button:hover,
.btn--back:hover,
.btn--outline:hover {
    /*background-color: var(--primary);*/
    background-color: var(--white);
    color: var(--cta);
    cursor: pointer!important;
    transition: all .3s;
    scale: 1.03;
    box-shadow: var(--box-shadow--l);
    border: 1px solid var(--primary);

}
.btn--primary.hover-white:hover,
button.hover-white:hover {
    /*background-color: var(--white);*/
    /*color: var(--cta);*/
}


/* ########### DIVIDERS ############### */
.divider {
    width: calc(100% + (var(--section-side-padding)));
    background-color: var(--primary);
    height: 17px;
    overflow: visible;
    position: relative;
    border-radius: 20px 0 0 20px;
    margin: var(--space-l) 0;
}
.divider.primary-light {
    background-color: var(--primary--light);

}
.divider-left {
    transform: translateX(calc(var(--section-side-padding) /-1));
    border-radius: 0 20px 20px 0;
}

@media all and (min-width: 1300px) {
    .divider {
        width: calc(100% + ((100vw - var(--vp-max-width)) / 2) + var(--section-side-padding)  );
    }
    .divider-left {
        transform: translateX( calc( ((100vw - var(--vp-max-width) ) / -2 ) - var(--section-side-padding)) );
    }

}

/* ########### LOGIN ############### */


/* ########### GRIDS ############### */
.grid {
    display: grid;
    gap: var(--grid-gap);

}
.grid--1 {
    grid-template-columns: repeat(1, 1fr);
}
.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid--3-2 {
    grid-template-columns: 3fr 2fr;
}
.row-gap--none {
    row-gap: 0;
}
.grid-span-col--all {
    grid-column: 1 / -1;
}


/* ########### Tables ############### */
.table th {
    padding: .5em;
    background-color: var(--secondary);
    color: var(--primary);
}
.table__footer td{
    background-color: var(--primary--dark--1);
    font-weight: bold;
}
.table .row--expired {
    background-color: var(--alert);
}
.table .row--almost-expired {
    background-color: var(--alert-orange);
    color: var(--primary--dark--2);
    font-weight: bold;
}

table {
    color: var(--text--white);
    width: 100%;
    /*max-width: 800px;*/
    border-collapse: collapse;
}
table td {
    border-bottom: 1px solid var(--primary--light);
    padding: var(--space-xs); 0
}


table tr > td:first-of-type {
    /*font-weight: 600; omzetten naar class */
    /*width: 300px;*/
}
table.table td, table.table th {
    border: 1px solid var(--primary--light);

}
table.table td {
    padding: .5em;
}
.table-cel-focus {
    /*background-color: rgba(255,255,255, 0.3);*/
    background-color: var(--primary--dark--1);
}





/* ########### Loader Spinner ############### */
.irc-loader--fs-wrapper {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(62, 93, 112, 0.84);
    left: 0;
    top: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .3s;
}
.irc-loader--wrapper {
    border-radius: 1em;
    padding: 3em;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    transform: translateY(100px);

}
.loader-show  .irc-loader--wrapper {
    transform: translateY(0);
    transition: transform .9s;
}
.irc-loader__text {
    color: var(--primary--light--2);
}
.irc-loader {
    border: 6px solid var(--primary--light);
    border-top: 6px solid var(--alert-green );
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;

}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-show {
    opacity: 1;
    transition: opacity .6s;
}

.loader-hide {
    /*display: none;*/
}




/* ########### MEDIA QUERIES ############### */

@media all and (max-width: 1050px) {


    /* ########### GRIDS ############### */

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }



@media all and (max-width: 990px) {

    :root {
        --section-side-padding: 40px;
    }



}

/* ########### TABLET  ############### */

@media all and (max-width: 850px) {

    :root {
        --section-side-padding: 20px;
    }

    /* ########### GRIDS ############### */
    .grid--2, .grid--3-2 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }


}





}