@import 'lib/optiqualis/style/Constants.css';
@import 'lib/optiqualis/style/Palette.css';
@import 'lib/optiqualis/style/Print.css';

/*
extra light 200, light 300, regular 400, medium 500
font-family: "dm-sans", sans-serif;
font-weight: 200; 300 400 500
font-style: normal;
light (italic) 300, regular 400 (italic), bold 700 (italic), 
font-family: "mundial", sans-serif;
font-weight: 300;
font-style: normal;
*/

/* ===== Mobile size (Mobile first default) ===== */
.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
    display: none;
}
#components-reconnect-modal {
    display: none;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: none;
}

body {
    color: hsla(var(--maastricht-blue), 1);
    background-color: transparent;
    font-family: "mundial", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.9375rem;
    height: 100%;
    margin: 0;
}
.fullscreen-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: repeating-linear-gradient( 0deg, hsla(210, 72%, 17%, 1) 0%, hsla(197, 100%, 23%, 1) 2%, hsla(185, 100%, 28%, 1) 100% );
}
.safe-area {
    background: hsla(185, 100%, 28%, .9);
    margin: 0;
    z-index: 1;
    margin-top: env(safe-area-inset-top);
    margin-right: env(safe-area-inset-right);
    margin-bottom: env(safe-area-inset-bottom);
    margin-left: env(safe-area-inset-left);
}
.container-fluid {
    padding-right: calc(var(--bs-gutter-x) * .3);
    padding-left: calc(var(--bs-gutter-x) * .3);
}
.main_content {
    display: flex;
    flex-flow: column;
    height: 100dvh;
    min-height: 100vh;
}
.top_header {
    background: hsla(0, 100%, 100%, .15);
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    border: 1px solid hsla(0, 100%, 100%, 0.5);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 20px 5px 20px;
    margin: 6px 0 2px 0;
    height: 55px !important;
}
.top_nav {
    background: hsla(0, 100%, 100%, .15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid hsla(0, 100%, 100%, 0.5);
    padding: 5px 20px 5px 20px;
    margin: 0 0 2px 0;
    height: 45px;
}
.inner_content_last {
    background: hsla(0, 100%, 100%, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid hsla(0, 100%, 100%, 0.5);
    padding: 10px 10px 40px 10px;
    margin: 0 0 6px 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    flex: 1 1 auto !important;
}
.custom-overflow {
    overflow:visible;
}
/* Mobile menu */
.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: hsla(185, 100%, 28%, 1);
    border-top: 1px solid hsla(var(--gray-200), 1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .5rem .25rem;
    transform: translateY(0);
    transition: transform 180ms ease;
}
.mobile-bottom-nav.is-hidden {
    transform: translateY(110%);
}
.mobile-bottom-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    font-size: 0.75rem;
}
.mobile-bottom-item i {
    color: hsla(var(--orange-100), 1);
    font-size: 1.1rem;
    margin-bottom: 2px;
}
.mobile-bottom-label {
    color: hsla(var(--white), 1);
    font-family: "dm-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.7rem;
    line-height: 1;
}
.mobile-bottom-item span {
    display: block;
    line-height: 1.1;
}
.has-mobile-bottom-nav {
    padding-bottom: 64px;
}
/* end mobile menu */
.sidebar {
    background: hsla(0, 100%, 100%, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 1px solid hsla(0, 100%, 100%, 0.5);
    margin: 6px 2px 6px 0;
    width: 100px;
}
.inside-sidebar {
    height: calc(100dvh - 14px);
    min-height: calc(100vh - 14px);
}
/* Submenu */
.left-nav {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.left-item, .left-item:link, .left-item:visited {
    color: hsla(var(--gray-100), 1);
    font-family: "dm-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
    font-size: 0.9rem;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: 5px 0;
    border: 1px solid transparent;
}
.left-item i {
    color: hsla(43, 89%, 61%, 0.8);
}
.left-item:hover i {
    color: hsla(43, 89%, 61%, 1);
}
.left-item:hover, .left-item.active {
    background-color: hsla(0, 100%, 100%, 0.1);
    color: hsla(var(--gray-100), 1);
    border: 1px solid hsla(0, 100%, 100%, 0.15);
    border-radius: 4px;
}
.left-item span {
    text-align: center;
}
.dropdown {
    font-family: "dm-sans", sans-serif;
    font-weight: 300;
    font-style: normal;
}
/* End submenu */
.z-n1 {
    visibility: hidden;
}

/* ===== Tablet size (≥768px) ===== */
@media (min-width: 768px) {
    .container-fluid {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
    .top_header {
        border-top-left-radius: 15px; /* overruled if tablet detected */
        border-top-right-radius: 15px;
        margin: 20px 10px 2px 0;
    }
    .top_nav {
        margin: 0 10px 2px 0;
    }
    .inner_content_last {
        border-bottom-left-radius: 15px; /* overruled if desktop detected */
        border-bottom-right-radius: 15px;
        padding: 20px 20px 40px 20px;
        margin: 0 10px 20px 0;
    }
    .sidebar {
        background: hsla(0, 100%, 100%, 0.15);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        border: 1px solid hsla(0, 100%, 100%, 0.5);
        margin: 20px 2px 20px 10px;
        min-width: 130px;
    }
    .inside-sidebar {
        height: calc(100dvh - 42px);
        min-height: calc(100vh - 42px);
    }
}

/* ===== Desktop size (≥992px) ===== */
@media (min-width: 992px) {
    .container-fluid {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
    .top_header {
        border-top-left-radius: 15px; /* overruled if desktop detected */
        border-top-right-radius: 15px;
        margin: 20px 10px 2px 0;
    }
    .top_nav {
        margin: 0 10px 2px 0;
    }
    .inner_content_last {
        border-bottom-left-radius: 15px; /* overruled if desktop detected */
        border-bottom-right-radius: 15px;
        padding: 20px 20px 40px 20px;
        margin: 0 10px 20px 0;
    }
    .sidebar {
        background: hsla(0, 100%, 100%, 0.15);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        border: 1px solid hsla(0, 100%, 100%, 0.5);
        margin: 20px 2px 20px 10px;
        width: 260px;
    }
    .inside-sidebar {
        height: calc(100dvh - 42px);
        min-height: calc(100vh - 42px);
    }
    .left-nav {
        width: 220px;
    }
    .left-item, .left-item:link, .left-item:visited {
        flex-direction: row;
        justify-content: flex-start;
    }
}