:root {
    --background_color: #dddddd;
    --text_color: #000;
    --line2_text_color: rgb(99, 99, 99);
    --location_light_shadow: rgba(255, 255, 255, 0.5);
    --location_dark_shadow: rgba(0, 0, 0, 0.1);
    --location_state_dark_shadow: rgba(0, 0, 0, 0.25);
    --location_state_light_shadow: rgba(255, 255, 255, 0.5);
    --light_shadow: rgba(255, 255, 255, 0.83);
    --dark_shadow: rgba(0, 0, 0, 0.1);
    /* --location_light_shadow: rgba(255, 255, 255, 0.83);
    --location_dark_shadow: rgba(217, 210, 200, 0.51);
    --light_shadow: rgba(255, 255, 255, 0.83);
    --dark_shadow: rgba(217, 210, 200, 0.51);  */
    --item_background_color: #efeeee;
    --item_background_color_transparent: #efeeee00;
    --location_background_color: #dddddd;
    --location_background_color_transparent: #dddddd00;
    --location_text_color: rgb(99, 99, 99);
    --location_line2_text_color: rgb(167, 167, 167);
    --state_0: #ff0000;
    --state_1: #ff9100;
    --state_2: #fbff00;
    --state_3: rgb(0, 172, 0);
    --adder_button: #000;
    --edit_button: #000;
    --drill_color: #000;
    --demand_color: #7C1811;
    --reorder_color: #9c8500;
    --refill_color: #3A8323;
    --topbar_color: #4E70BE;
    --bread_color: #969aa3;
    --bread_text_color: black;
    --navigation_color: #6480c2;
    --navigation_text_color: white;
    --topbar_shadow: 0 0 1vh .25vh black;
    --bread_shadow: 0 0 1vh 0px black;
    --modal_button_background_color: #cecece;
    --modal_button_text_color: #000000;
    --modal_textview_background_color: #fff;
    --modal_textview_text_color: #000;
    --modal_text_color: #000;
    --modal_placeholder_color: grey;
    --modal_yes_color: rgb(77, 189, 77);
    --modal_no_color: rgb(203, 88, 75);
    --modal_add_color: #53753c;
    --modal_delete_color: red;
    --modal_leave_color: #b44c43;
    --check_fab_no_check_color: rgb(83, 83, 83);
    --check_fab_state_0_color: #ff0000;
    --check_fab_state_1_color: #ff9100;
    --check_fab_state_2_color: #fbff00;
    --check_fab_state_3_color: rgb(0, 151, 0);
    --field_background: #ffffff94;
    --field_button_background: #9292923b;
    --badge_color: #338bff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background_color: #0E2C52;
        --text_color: #9ec8ff;
        --line2_text_color: #5082c4;        
        --location_light_shadow: rgba(23, 60, 109, 0.5);
        --location_dark_shadow: rgba(0, 0, 0, 0.2);
        --location_state_dark_shadow: rgba(0, 0, 0, 0.5);
        --location_state_light_shadow: rgba(255, 255, 255, 0.3);
        --light_shadow: rgba(23, 60, 109, 0.7);
        --dark_shadow: rgba(0, 0, 0, .2);
        /* --location_light_shadow: rgba(255, 255, 255, 0.83);
        --location_dark_shadow: rgba(217, 210, 200, 0.51);
        --light_shadow: rgba(255, 255, 255, 0.83);
        --dark_shadow: rgba(217, 210, 200, 0.51);  */
        --item_background_color: #0e315f;
        --item_background_color_transparent: #0e315f00;
        --location_background_color: #0E2C52;
        --location_background_color_transparent: #0E2C5200;
        --location_text_color: #5082c4;
        --location_line2_text_color: #2e5f9e;
        --state_0: #ff0000;
        --state_1: #ff9100;
        --state_2: #fbff00;
        --state_3: #3cff00;
        --adder_button: #9ec8ff;
        --edit_button: #9ec8ff;
        --drill_color: #9ec8ff;
        --demand_color: #7C1811;
        --reorder_color: #9c8500;
        --refill_color: #3A8323;
        --topbar_color: #4E70BE;
        --bread_color: #969aa3;
        --bread_text_color: black;
        --navigation_color: #6480c2;
        --navigation_text_color: white;
        --topbar_shadow: 0 0 1vh .25vh black;
        --bread_shadow: 0 0 1vh 0px black;
        --modal_button_background_color: #cecece;    
        --modal_button_text_color: #9ec8ff;
        --modal_textview_background_color: #9ec8ff;
        --modal_textview_text_color: #000;
        --modal_text_color: #9ec8ff;
        --modal_placeholder_color: #556f91;
        --modal_yes_color: lightgreen;
        --modal_no_color: salmon;
        --modal_add_color: #53753c;
        --modal_delete_color: red;
        --modal_leave_color: #b44c43;
        --check_fab_no_check_color: rgb(83, 83, 83);
        --check_fab_state_0_color: #ff0000;
        --check_fab_state_1_color: #ff9100;
        --check_fab_state_2_color: #fbff00;
        --check_fab_state_3_color: rgb(0, 151, 0);
        --field_background: #ffffff94;
        --field_button_background: #9292923b;
    }
} 

body {
    background-color: var(--background_color);
    margin-top: 6vh;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    height: calc(100vh - 7vh);
}

#topbar {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: var(--topbar_color);
    box-shadow: var(--topbar_shadow);
    width: 100%;
    height: 6vh;
    margin: 0px;
    z-index: 200;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}



#topbar #hamburger {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 4vh;
    width: 4vh;
    margin: 1vh;
}


#topbar #username_holder {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 6vh;
    width: calc(100% - 6vh);
    color: var(--navigation_text_color);
    text-align: right;
    padding-right: 1vh;
    font-size: 4vh;
    line-height: 6vh;
    display: table-cell;
    align-self: center;
}

#navigationList {
    position: fixed;
    top: 6vh;
    left: 0px;
    background-color: var(--navigation_color);
    box-shadow: var(--shadow);
    width: 100%;
    color: var(--navigation_text_color);
    margin: 0px;
    z-index: 103;
    transition: top 0.5s ease;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

#navigationList.unshow {
    /*display: none!important;*/
    top: var(--h)!important;
}

#navigationList .element{
    left: 0px;
    background-color: var(--navigation_color);
    width: 100%;
    height: 6vh;
    color: var(--navigation_text_color);
    margin: 0px;
    z-index: 101;
    text-align: center;
    font-size: 4vh;
    line-height: 6vh;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: black;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    display: grid;
    text-align: center;
    grid-template-columns: 0% 100%;
}

#navigationList .logout{
    left: 0px;
    background-color: var(--topbar_color);
    width: 100%;
    height: 8vh;
    color: var(--navigation_text_color);
    margin: 0px;
    z-index: 101;
    text-align: center;
    font-size: 4vh;
    line-height: 8vh;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: black;
}


#bread {
    position: fixed;
    top: 6vh;
    left: 0px;
    background-color: var(--bread_color);
    box-shadow: var(--bread_shadow);
    width: 100%;
    height: 6vh;
    margin: 0px;
    z-index: 90;
    color: var(--bread_text_color);
}

#bread #back {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 4vh;
    width: 4vh;
    margin: 1vh;
}

#bread #breadcrumbs:before {
    content: '';
    width: 3vh;
    height: 4vh;
    left: 6vh;
    position: absolute;
    pointer-events: none;
    background: linear-gradient( 90deg, var(--bread_color) 10%, rgba(150,154,163,0) 100%);
    z-index: 99;
}
#bread #breadcrumbs::-webkit-scrollbar {
    height: 0px;
    -webkit-appearance: none;
    display: none;
}
#bread #breadcrumbs {
    top: 0px;
    left: 0px;
    height: 4vh;
    width: calc(100% - 7vh);
    margin: 1vh;
    margin-left: 6vh;
    overflow: auto;
    display: flex;
    flex-direction: row-reverse;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

#bread #breadcrumbs #crust {
    display: flex;
    align-items: center;
}

#bread #breadcrumbs #crust #breadcrumb_root {
    position: relative;
    top: 0px;
    left: 0px;
    height: 4vh;
    width: 4vh;
    margin: 0px;
    z-index: 90;
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin-left: 2vh;
}

#bread #breadcrumbs .crumble {
    position: relative;
    top: 0px;
    left: 0px;
    height: 3vh;
    width: fit-content;
    margin: 0px;
    z-index: 90;
    text-align: center;
    font-size:3vh;
    white-space: nowrap;
    display: flex;
    align-items: center;
    color: var(--bread_text_color);
}

#bread #breadcrumbs #lastCrumble {
    font-weight: bold;
}

#bread #breadcrumbs .divider {
    position: relative;
    top: 0px;
    left: 0px;
    height: 3vh;
    width: fit-content;
    margin: 0 .5vh 0 .5vh;
    z-index: 90;
    text-align: center;
    font-size: 3vh;
    white-space: nowrap;
    display: flex;
    align-items: center;}

.hide {
    display: none!important;
}

h1{
    color: var(--modal_text_color);
}

.fab {
    position: fixed;
    bottom: 3vh;
    right: 3vh;
    border-radius: 4vh;
    font-weight: bold;
    color: white;
    font-size: 2vh;
    box-shadow: 0px 1vh 2vh -1vh rgb(0 0 0 / 20%), 0px 1vh 2vh 0px rgb(0 0 0 / 14%), 0px 0.3px 3vh 0px rgb(0 0 0 / 12%);
    user-select: none;
    display: grid;
    align-content: center;
    grid-template-columns: 15% 85%;
    height: 6vh;
    place-items: center;
    width: 12vh;
    padding-left: 2vh;
    padding-right: 2vh;
    cursor: pointer;
    z-index: 99;
}
.round.fab {
    width: 6vh;
    height: 6vh;
    grid-template-columns: 100%;
    padding: 0px;
}
.modal .addButton.fab {
    position: sticky;
    left: 100%;
}
.fab.round.secfab{
    margin-right: calc(6vh + 10px);
}

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

.fabstate_0 {
    background: var(--check_fab_state_0_color);
    color: white;
}
.fabstate_1 {
    background: var(--check_fab_state_1_color);
    color: white;
}
.fabstate_2 {
    background: var(--check_fab_state_2_color);
    color: black;
}
.fabstate_3 {
    background: var(--check_fab_state_3_color);
    color: white;
}



#listOfChecks{
    color: var(--modal_text_color);
    margin-bottom: 14vh;
}

.checkEl {
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    place-items: center;
    height: 10vh;
    color: var(--modal_text_color);
}

.checkEl.closed {
    color: coral;
    text-decoration: line-through;
}

.modal.hide {
    opacity: 0;
    display: block!important;
    pointer-events: none;
    user-select: none;
    transform: scale(0);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.77, -0.22, 0.72, 0.01);
}

.modal {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform: scale(1);
    height: calc(100% - 14vh - 50px);
    width: calc(100% - 15%);
    padding: 10px;
    position: fixed;
    left: 5%;
    top: 14vh;
    z-index: 102;
    background: var(--background_color);
    overflow-y: auto;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: #243b5878;
    border-radius: 3vh;
    box-shadow: 1px 14px 17px 0px #0000008f, 0px 0px 0px 3000px #00000078;
    border-top: 1px solid #ffffff54;
    border-left: 1px solid #ffffff54;
    opacity: 1;
}

.modal h1 {
    text-align: center;
    color: var(--modal_text_color);
}

.checkJoin, .checkActions{
    height: 100%;
    width: 100%;
    display: inline-grid;
    place-items: center;
}

.currentCheck{
    color: var(--modal_yes_color);
}

.currentCheck .checkLeave{
    color: var(--modal_no_color);
}

.closeButton {
    background-color: none;
}
.closeButton.fab {
    background-color: var(--modal_leave_color);
}

.closeButton.topLeft {
    text-align: right;
    width: 5vh;
    color: var(--modal_leave_color);
    cursor: pointer;
}

.topRight {
    width: 5vh;
    cursor: pointer;
    position: absolute;
    top: 25px;
    right: 10px;
}

.addButton {
    background: var(--modal_add_color);
    z-index: 1;
}


.item.inactive{
    pointer-events: none;
    opacity: 0.4;
    filter: blur(1px);
    /*display: none;*/
}

.numinp{
    display: grid;
    grid-template-columns: 10% 80% 10%;
    background: var(--field_button_background);;
    height: 7vh;
    border-radius: 1vh;
    overflow: hidden;
    margin-bottom: 1vh;
}
.numinpContainer .label {
    width: 100%;
    font-size: 3vh;
    color: var(--modal_text_color);
}
.numinp input{
    font-size: 4vh;
    height: 100%;
    width: 100%;
    background: var(--field_background);
    text-align: center;
    border-radius: 1vh;
    border: none;
}
.numinp .valueButton {
    width: 100%;
    font-size: 3vh;
    margin: 0px;
    display: inline-grid;
    text-align: center;
    background: none;
    align-content: center;
    color: var(--modal_button_text_color);
}

.twoBtn button {
    border: none;
    width: 90%;
    justify-self: center;
    padding: 25px;
    position: relative;
    cursor: pointer;
    background-color: var(--modal_button_background_color);
}

.twoBtn {
    display: grid;
    grid-template-columns: 50% 50%;
}

#sureModal p {
    text-align: center;
    font-size: 170%;
    color: var(--text_color);
}

@media only screen and (orientation: landscape) {
    #items {
        padding-left: calc(25 * (1vw - 1vh));
        padding-right: calc(25 * (1vw - 1vh));
        width: calc(100% - 2*28 * (1vw - 1vh))!important;
    }
    .searchBar{
        width: calc(100% - 50 * (1vw - 1vh));
        padding-left: calc(25 * (1vw - 1vh));
        padding-right: calc(25 * (1vw - 1vh));
    }

}


.loading #topbar {
    animation: d 1s linear infinite;
    background-image: linear-gradient(90deg, var(--topbar_color) 0vw, var(--topbar_color) 120vw, #184988 210vw, var(--topbar_color) 300vw);
    background-repeat: repeat-x;
    background-size: 420vw;
}

@keyframes d {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 420vw;
    }
}

.badge {
    position: fixed;
    bottom: 23px;
    left: -10px;
    background-color: var(--badge_color);
    -webkit-transform: rotate(45deg) scale(1) skew(0deg) translate(10px);
    -moz-transform: rotate(45deg) scale(1) skew(0deg) translate(10px);
    -o-transform: rotate(45deg) scale(1) skew(0deg) translate(10px);
    -ms-transform: rotate(45deg) scale(1) skew(0deg) translate(10px);
    transform: rotate(45deg) scale(1) skew(0deg) translate(10px);
    text-align: center;
    color: white;
    padding: 0 .5em;
    border-top: 0px;
    line-height: 20px;
    margin: 0;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
.badge:after {
    content: ' ';
    position: absolute;
    right: -19px;
    top: 0px;
    border-left: 20px solid var(--badge_color);
    border-bottom: 20px solid #00000000;
}
.badge:before {
    content: ' ';
    position: absolute;
    left: -19px;
    top: 0px;
    border-right: 20px solid var(--badge_color);
    border-bottom: 20px solid #00000000;
}

div#menuList {
    display: grid;
    grid-template-columns: 100%;
    width: 100%;
    height: 100%;
    font-size: 5vh;
    text-align: center;
    color: var(--text_color);
}

#menuList > a {
    height: 100%;
    width: 100%;
    display: grid;
    align-content: center;
    text-decoration: none;
    color: var(--text_color);
}

textarea.comments {
    width: 100%;
    height: 20vh;
    font-size: 4vh;
    resize: none;
    border: 0px solid;
    border-radius: 1vh;
    background: var(--field_background);
    transition: border 0.1s ease;
}

.drill{
    position: absolute;
    right: 2vh;
    cursor: pointer;
    height: 3vh;
    width: 3vh;
    display: inline-grid;
    align-content: center;
    fill: var(--location_text_color);
}

.ptr--ptr > div{
    color: var(--text_color);
    opacity: 0.4;
}

.errorMessage {
    position: relative;
    right: -100%;
    padding: 10px;
    background-color: #e23b3b;
    margin-bottom: 10px;
    border-top-left-radius: 1vh;
    border-bottom-left-radius: 1vh;
    padding-right: 30px;
    color: white;
    transition: right 1s ease;
}

.errorMessage h4 {
    margin: 8px;
    text-align: center;
    margin-bottom: -5px;
}
.errorMessage p {
    margin-bottom: 2px;
}

div#errContainter {
    position: fixed;
    top: 20vh;
    right: 0%;
    max-width: 30vmax;
    pointer-events: none;
    z-index: 998;
}

.errorMessage.expandedErr {
    right: 0%;
}

input.needed {
    border: solid 5px #ff4c37!important;
}