@import url('font.css');

:root{
    --blue: #0d6efd;
    --blue_hover: #0b5ed7;
    --grey: #6c757d; 
    --grey_hover: #5c636a;
    --green: #1a8754;
    --green_hover: #157347;
    --yellow: #ffc107;
    --yellow_hover: #ffca2c;
    --red: #dc3545;
    --red_hover: #bb2d3b;
    --light: #f8f9fa;
    --light_hover: #d3d4d5;
    --dark: #212529;
    --dark_hover: #424649;
}

*{ 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 13pt;
}

h1{
    font-size: 18pt;
    font-weight: bold;
    color: var(--dark);
    padding-bottom: 0.5em;
}

h2{
    font-size: 16pt;
    font-weight: bold;
    color: var(--dark);
}

h3{
    font-size: 15pt;
    color: var(--dark);
}

.noselect{
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.display_whitespace{
    white-space: pre-wrap;
}

.bold{
    font-weight: bold;
}

.cursor_pointer{
    cursor: pointer;
}

.font_small{
    font-size: 11pt;
}

html{
    color: var(--dark);
    background-color: var(--light);
}

body{
    background-color: var(--light);
}

.hidden{
    display: none !important;
}

.blue{
    color: var(--blue);
}

.grey{
    color: var(--grey);
}

.green{
    color: var(--green);
}

.yellow{
    color: var(--yellow);
}

.red{
    color: var(--red);
}

.light{
    color: var(--light);
}

.dark{
    color: var(--dark);
}

.bg_dark{
    background-color: var(--dark);
}

.button{
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: var(--button_background);
    color: var(--button_color);
    cursor: pointer;
    text-align: center;
    padding: 0.35em 0.85em 0.35em 0.85em;
    border: none;
    border-radius: 0.2em;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
}

.button:hover{
    background-color: var(--button_hover);
}

.button.blue{
    --button_background: var(--blue);
    --button_hover: var(--blue_hover);
    --button_color: var(--light);
}

.button.grey{
    --button_background: var(--grey);
    --button_hover: var(--grey_hover);
    --button_color: var(--light);
}

.button.green{
    --button_background: var(--green);
    --button_hover: var(--green_hover);
    --button_color: var(--light);
}

.button.yellow{
    --button_background: var(--yellow);
    --button_hover: var(--yellow_hover);
    --button_color: var(--dark);
}

.button.red{
    --button_background: var(--red);
    --button_hover: var(--red_hover);
    --button_color: var(--light);
}

.button.light{
    --button_background: var(--light);
    --button_hover: var(--light_hover);
    --button_color: var(--dark);
}

.button.dark{
    --button_background: var(--dark);
    --button_hover: var(--dark_hover);
    --button_color: var(--light);
}

.background_dark{
    background-color: var(--dark);
}

.padding_small{
    padding: 0.3em;
}

.padding_bottom_medium{
    padding-bottom: 0.7em;
}

.padding_bottom_small{
    padding-bottom: 0.3em;
}

.padding_top_medium{
    padding-top: 0.7em;
}


.margin_small{
    margin: 0.3em;
}

.container{
    width: 100%;
    padding-right: 1em;
    padding-left: 1em;
    margin-right: auto;
    margin-left: auto;
}

.row{
    display: flex;
    flex-wrap: wrap;
}

.col{
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.text_right{
    text-align: right !important;
    overflow-wrap: break-word;
}

.text_center {
    text-align: center !important;
    overflow-wrap: break-word;
}

.text_left {
    text-align: left !important;
    overflow-wrap: break-word;
}

.center_middle{
    display:flex;
    justify-content: center;
    align-items: center;
}



.form textarea,
.form select,
.form input[type=text],
.form input[type=password],
.form input[type=number],
.form input[type=time],
.form input[type=date],
.form input[type=color]{
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: var(--dark);
    background-color: var(--light);
    background-clip: padding-box;
    border: 1px solid var(--grey_hover);
    font-size: 11.5pt;
    outline: none !important;
}

.form textarea{
    resize: vertical;
}

.form input[type=text]:read-only,
.form input[type=password]:read-only,
.form input[type=number]:read-only,
.form input[type=time]:read-only,
.form input[type=date]:read-only,
.form input[type=text]:disabled,
.form input[type=password]:disabled,
.form input[type=number]:disabled,
.form input[type=time]:disabled,
.form input[type=date]:disabled,
.form input[type=color]:disabled,
.form select:disabled,
.form textarea:read-only,
.form textarea:disabled{
    background-color: var(--light_hover);
}

.form textarea.invalid,
.form select.invalid,
.form input[type=text].invalid,
.form input[type=password].invalid,
.form input[type=number].invalid,
.form input[type=time].invalid,
.form input[type=date].invalid,
.form input[type=color].invalid{
    border-color: var(--red) !important;
}

.form textarea.invalid:focus,
.form select.invalid:focus,
.form input[type=text].invalid:focus,
.form input[type=password].invalid:focus,
.form input[type=number].invalid:focus,
.form input[type=time].invalid:focus,
.form input[type=date].invalid:focus,
.form input[type=color].invalid:focus{
    box-shadow: 0 0 0 0.2rem var(--red_hover) !important;
} 

.form textarea.valid,
.form select.valid,
.form input[type=text].valid,
.form input[type=password].valid,
.form input[type=number].valid,
.form input[type=time].valid,
.form input[type=date].valid,
.form input[type=color].valid{
    border-color: var(--green) !important;
}

.form textarea.valid:focus,
.form select.valid:focus,
.form input[type=text].valid:focus,
.form input[type=password].valid:focus,
.form input[type=number].valid:focus,
.form input[type=time].valid:focus,
.form input[type=date].valid:focus,
.form input[type=color].valid:focus{
    box-shadow: 0 0 0 0.2rem var(--green_hover) !important;
}

.form textarea:read-write:focus,
.form input[type=text]:read-write:focus,
.form input[type=password]:read-write:focus,
.form input[type=number]:read-write:focus,
.form input[type=time]:read-write:focus,
.form input[type=date]:read-write:focus,
.form input[type=color]:read-write:focus{
    border-color: var(--grey);
    box-shadow: 0 0 0 0.2rem var(--grey_hover);   
}

.form label {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    line-height: 1.5;
}

.form input[type=checkbox] + label{
    padding-top: 0;
    padding-bottom: 0;
}

.form .input_feedback{
    font-size: 11pt;
    padding-top: 0.3em;
}

.col1_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col2_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col3_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.col4_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col5_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col6_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.col7_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col8_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col9_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.col10_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col11_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col12_xs{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media screen and (min-width: 576px) {
    .col1_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    
    .col2_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    
    .col3_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .col4_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .col5_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    
    .col6_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .col7_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    
    .col8_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    
    .col9_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    .col10_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    
    .col11_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    
    .col12_sm{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .col1_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    
    .col2_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    
    .col3_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .col4_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .col5_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    
    .col6_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .col7_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    
    .col8_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    
    .col9_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    .col10_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    
    .col11_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    
    .col12_md{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 992px) {
    .col1_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    
    .col2_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    
    .col3_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .col4_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .col5_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    
    .col6_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .col7_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    
    .col8_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    
    .col9_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    .col10_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    
    .col11_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    
    .col12_lg{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 1400px) {
    .col1_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    
    .col2_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    
    .col3_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .col4_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .col5_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    
    .col6_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .col7_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    
    .col8_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    
    .col9_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    .col10_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    
    .col11_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    
    .col12_xl{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}


.menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--grey);
    margin-bottom: 1em;
}

.menu .logo{
    font-size: 16pt;
    text-decoration: none;
    padding-left: 2em;
    color:  var(--light);
}

.menu ul{
    position: relative;
}

.menu ul li{
    position: relative;
    list-style: none;
    float: left;
    border-right: 1px solid var(--dark_hover);
    width: 11em;
    text-align: center;
    cursor: pointer;
}

.menu>ul>li:last-child{
    border-right: none;
    width: 13em;
    padding-right: 2em;
}

.menu ul li a,
.menu ul li .dropdown,
.menu ul li .submenu{
    text-decoration: none;
    display: inline-block;
    padding: 0.8em;
    color: var(--light);
    display: inline-block;
    min-width: 100%;
}

.menu ul li a:hover,
.menu ul li:hover > .dropdown,
.menu ul li:hover > .submenu,
.menu ul li.dropdown_opened > span,
.menu ul li.submenu_opened > span{
    background-color: var(--grey_hover);
}

.menu .dropdown::after,
.menu .submenu::after{
    display: inline-block;
    content: "";
    vertical-align: 0.1em;   
}

.menu .dropdown::after{
    margin-left: 0.255em;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.menu .submenu::after{
    margin-left: 0.35em;
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}

.menu ul li ul{
    position: absolute;
    left: 0;
    background-color: var(--grey);
    display: none;
}

.menu ul li:hover > ul,
.menu ul li.dropdown_opened > ul,
.menu ul li:hover > ul,
.menu ul li.submenu_opened > ul{
    display: block;
}

.menu ul li ul li{
    float: none;
    padding-right: 0 !important;
    border-right: none;
    border-top: 1px solid var(--dark_hover);
}

.menu ul li ul li .submenu.right + ul{
    top: -1px;
    left: 8em;
}

.menu ul li ul li .submenu.left + ul{
    top: -1px;
    left: -8em;
}

.menu ul li ul li ul li:first-child{
    border-top: none;
}


@media screen and (max-width: 575px) {
    .menu.collapse_xs .logo{
        padding: 1em;
    }

    .menu.collapse_xs > ul{
        display: none;
    }

    .menu.collapse_xs.menu_opened > ul {
        display: initial;
        width: 100%;
    }

    .menu.collapse_xs ul li{
        width: 100%;
        padding-right: 0;
        border-right: none;
        border-top: none !important;
        text-align: left;
    }

    .menu.collapse_xs ul li ul{
        position: relative;
        width: 100%;
        padding-left: 2em;
        left: 0 !important;
    }

    .menu.collapse_xs .menutoggle{
        position: relative;
        width: 2em;
        height: 2em;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 2em;
    }

    .menu.collapse_xs .menutoggle::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--light);
        transform: translateY(-0.666em);
        box-shadow: 0 0.666em var(--light);
    }

    .menu.collapse_xs .menutoggle::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--light);
        transform: translateY(0.666em);
    }

    .menu.collapse_xs.menu_opened .menutoggle::before{
        transform: rotate(45deg);
        box-shadow: 0 0 var(--light);
    }

    .menu.collapse_xs.menu_opened .menutoggle::after{
        transform: rotate(315deg);
    }
}

@media screen and (max-width: 767px) {
    .menu.collapse_sm .logo{
        padding: 1em;
    }

    .menu.collapse_sm > ul{
        display: none;
    }

    .menu.collapse_sm.menu_opened > ul {
        display: initial;
        width: 100%;
    }

    .menu.collapse_sm ul li{
        width: 100%;
        padding-right: 0;
        border-right: none;
        border-top: none !important;
        text-align: left;
    }

    .menu.collapse_sm ul li ul{
        position: relative;
        width: 100%;
        padding-left: 2em;
        left: 0 !important;
    }

    .menu.collapse_sm .menutoggle{
        position: relative;
        width: 2em;
        height: 2em;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 2em;
    }

    .menu.collapse_sm .menutoggle::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--light);
        transform: translateY(-0.666em);
        box-shadow: 0 0.666em var(--light);
    }

    .menu.collapse_sm .menutoggle::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--light);
        transform: translateY(0.666em);
    }

    .menu.collapse_sm.menu_opened .menutoggle::before{
        transform: rotate(45deg);
        box-shadow: 0 0 var(--light);
    }

    .menu.collapse_sm.menu_opened .menutoggle::after{
        transform: rotate(315deg);
    }
}

@media screen and (max-width: 991px) {
    .menu.collapse_md .logo{
        padding: 1em;
    }

    .menu.collapse_md > ul{
        display: none;
    }

    .menu.collapse_md.menu_opened > ul {
        display: initial;
        width: 100%;
    }

    .menu.collapse_md ul li{
        width: 100%;
        padding-right: 0;
        border-right: none;
        border-top: none !important;
        text-align: left;
    }

    .menu.collapse_md ul li ul{
        position: relative;
        width: 100%;
        padding-left: 2em;
        left: 0 !important;
    }

    .menu.collapse_md .menutoggle{
        position: relative;
        width: 2em;
        height: 2em;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 2em;
    }

    .menu.collapse_md .menutoggle::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--light);
        transform: translateY(-0.666em);
        box-shadow: 0 0.666em var(--light);
    }

    .menu.collapse_md .menutoggle::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--light);
        transform: translateY(0.666em);
    }

    .menu.collapse_md.menu_opened .menutoggle::before{
        transform: rotate(45deg);
        box-shadow: 0 0 var(--light);
    }

    .menu.collapse_md.menu_opened .menutoggle::after{
        transform: rotate(315deg);
    }
}

@media screen and (max-width: 1199px) {
    .menu.collapse_lg .logo{
        padding: 1em;
    }

    .menu.collapse_lg > ul{
        display: none;
    }

    .menu.collapse_lg.menu_opened > ul {
        display: initial;
        width: 100%;
    }

    .menu.collapse_lg ul li{
        width: 100%;
        padding-right: 0;
        border-right: none;
        border-top: none !important;
        text-align: left;
    }

    .menu.collapse_lg ul li ul{
        position: relative;
        width: 100%;
        padding-left: 2em;
        left: 0 !important;
    }

    .menu.collapse_lg .menutoggle{
        position: relative;
        width: 2em;
        height: 2em;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 2em;
    }

    .menu.collapse_lg .menutoggle::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--light);
        transform: translateY(-0.666em);
        box-shadow: 0 0.666em var(--light);
    }

    .menu.collapse_lg .menutoggle::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--light);
        transform: translateY(0.666em);
    }

    .menu.collapse_lg.menu_opened .menutoggle::before{
        transform: rotate(45deg);
        box-shadow: 0 0 var(--light);
    }

    .menu.collapse_lg.menu_opened .menutoggle::after{
        transform: rotate(315deg);
    }
}

.h100{
    height: 100% !important;
}

.w100{
    width: 100% !important;
}

.rotate_180{
    transform: rotate(180deg);
}

.filter_light{
    filter: invert(100%) sepia(0%) saturate(5242%) hue-rotate(84deg) brightness(92%) contrast(113%)
}

.filter_light:hover{
    filter: invert(90%) sepia(9%) saturate(0%) hue-rotate(284deg) brightness(97%) contrast(86%);
}

.card{
    display: block;
    width: 100%;
    padding: 0.5em;
    text-decoration: none;
    color: var(--dark);
}

.card:hover{
    background-color: var(--light_hover);
}

.card.selected{
    background-color: var(--dark);
    color: var(--light) !important;
}

.card.selected h1,
.card.selected h2,
.card.selected h3{
    color: var(--light) !important;
}

.card img,
.image_container img{
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
}

.image_container{
    display: flex;
    align-items: center;
}

.aspectratio_3_2{
    aspect-ratio: 3/2;
}

.aspectratio_4_3{
    aspect-ratio: 4/3;
}

.fullwindow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.small_button_bar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-right: 10px;
    padding-top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.small_icon_top_right{
    display: block;
    width: 30px;
    height: 30px;
    margin: 5px;
    cursor: pointer;
}

body.fullscreen_opened{
    height: 100vh;
    overflow-y: hidden;
}

#session_warning_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    width: 300px;
}

.modal_content {
    width: 100%;
    text-align: center;
}

.modal_content button {
    margin: 10px 0;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
}