:root {
    --black: #000;
    --white: #fff;

    --backgroundColor: #f2dcbf;
    --backgroundColor2: #f2dcbfbb;
    --backgroundColor3: #f1f1f1;
    --backgroundColor4: #e0e0e0;

    --borderColor: #d1bca1;
    --borderColor2: #ddc6a9;

    --buttonHoverColor: #e9ad6b;

    --titleColor: #0a0a0a;
    --textColor: #1a1a1a;
    --textColor2: #151140;
    --logocolor: #141240;
    --accentColor: #f18a10;
    --accentColor2: #db7a03;
    --accentColor3: #75748c;
    --accentColor4: #626175;

    --linkColor: #2677ce;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: var(--textColor);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--titleColor)
}

a, a:hover {
    text-decoration: none;
}

a.active {
    color: #003c7d;
}

.sidenav a {
    color: inherit;
    font-weight: 500;
}

.sidenav .badge-warning {
    color: var(--white);
    background-color: var(--accentColor);
}

a {
    color: var(--linkColor);
}

.nav-tabs {
    border-bottom: 0;
}

ul {
    list-style: none;
    padding: 0;
}

.material-symbols-outlined {
    vertical-align: middle;
    font-weight: 300!important;
}

.table {
    color: var(--textColor);
}

.btn-primary {
    background-color: var(--accentColor)!important;
    border-color: var(--accentColor)!important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--accentColor2)!important;
    border-color: var(--accentColor2);
}

.btn-secondary {
    background-color: var(--accentColor3);
    border-color: var(--accentColor3);
}

.btn-outline-secondary {
    border-color: var(--accentColor3);
}

.btn-secondary:hover, .btn-outline-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    background-color: var(--accentColor4)!important;
    border-color: var(--accentColor4)!important;
}

.sidenav {
    height: 100vh;
    background-color: var(--backgroundColor);
    border-right: 3px solid var(--borderColor);
    color: var(--textColor2);
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: 0;
}

.sidenav::-webkit-scrollbar {
    width: 0;
}

.sidenav .material-symbols-outlined {
    margin-right: .5rem;
}

@media screen and (max-width: 768px) {
    .sidenav {
        height: auto;
        border-right: none;
        overflow-y: hidden;
        font-size: 1rem;
        border-bottom: 3px solid var(--borderColor);
    }

    .sidenav img {
        max-height: 2rem;
    }

    .sidenav span:first-child {
        font-size: 1.75rem;
    }

    .menuicon {
        font-size: 2rem!important;
    }

    .letterbtn {
        padding: .2rem;
    }

    .borderedcalendar {
        border-top: 2px solid #dee2e6;
        border-left: none!important;
    }

    .bg-darkgrey {
        background-color: var(--backgroundColor3)!important;
    }
}

.sidenav a {
    border-radius: .2rem;
}

#navmenu a:hover, #navmenu a.active {
    background-color: var(--buttonHoverColor);
    color: var(--white);
}

.sidenav span:first-child {
    font-size: .6rem;
}

.usermenu {
    background-color: var(--borderColor);
}

.loginformbody {
    background-image: url("../img/blob-scene.svg");
    background-size: cover;
}

@media screen and (max-width: 768px) {
    .loginformbody {
        background-image: url("../img/blob-scene1.svg")!important;
    }
}

.container {
    height: 100vh;
}

.loginform {
    background-color: var(--backgroundColor);
    border-radius: 10px;
    border: 3px solid var(--borderColor);
}

.loginform h3 {
    color: var(--accentColor);
}

.loginform input {
    margin: 5px 0 10px;
}

.loginerror {
    color: red;
}

.bg-darkgrey {
    background-color: var(--backgroundColor4);
}

.bg-darkgrey h4 {
    margin-bottom: 0;
}

.bg-grey {
    background-color: var(--backgroundColor3);
}

.navlogo {
    max-height: 1.5rem;
}

.nav-link {
    font-weight: 500;
    color: var(--textColor2);
}

.nav-link.active, .nav-link:hover, .nav-item.active .nav-link {
    background-color: var(--white)!important;
    border: 1px solid rgba(0,0,0,.125)!important;
}

.btn-outline-primary {
    background-color: transparent!important;
    color: var(--accentColor)!important;
    border-color: var(--accentColor)!important;
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary.active {
    background-color: var(--accentColor)!important;
    border-color: var(--accentColor)!important;
    color: var(--white)!important;
}

.loginform .input-field {
    background-color: transparent;
    border-radius: .2rem;
    border: 2px solid var(--accentColor);
    margin: 5px 0 10px;
}

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.popup .infopopuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: var(--white);
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    font-size: .85rem;
}

.popup .infopopuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

.infosymbol {
    font-size: 1.25rem;
}

.border-none {
    border: none!important;
}

.ellipsistext {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btncontainer {
    display: flex;
    /* justify-content: space-between; */
    border-radius: .2rem;
}

.letterbtn {
    margin: 0;
    border: none;
    color: var(--textColor2)
}

.letterbtn:hover, .letterbtn:focus, .letterbtn:active, .letterbtn.active {
    margin: 0;
    border: none;
    color: var(--white);
    background-color: var(--accentColor);
}

.borderedcalendar {
    border-left: 2px solid #dee2e6;
}

.calendar-item {
    border-radius: .2rem;
}

.calendar-item a {
    color: var(--textColor2);
}

.filterall.active {
    background-color: var(--accentColor)!important;
    color: var(--white)!important;
}

.filterall {
    background-color: var(--backgroundColor3);
    border: 1px solid #dee2e6;
    color: var(--black);
}

.bg-white {
    background-color: var(--white);
}

.scrollerheight {
    max-height: 25rem;
}

.statuslabel {
    color: var(--black);
    background: var(--backgroundColor4);
    /* border-left-color: #3cb371; */
    user-select: none;
    position: relative;
    padding: 5px 15px 5px 30px;
    height: 32px;
    margin: 0 1px;
}

.statuslabel-before {
    border-left: 16px solid var(--white);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}

.statuslabel-after {
    /* border-left-color: #3cb371; */
    border-left: 16px solid var(--backgroundColor4);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
}

.label-coloured {
    background: var(--accentColor);
    color: var(--white);
}

.label-coloured .statuslabel-after {
    border-left: 16px solid var(--accentColor);
}

.card-body .nav-item.active .nav-link {
    background-color: var(--backgroundColor4)!important;
}