/*----------------------------------------------------------
Author: Heart IT
------------------------------------------------------------
Eigentum von Heart IT
------------------------------------------------------------
#    #    #    #     # ######  ####### ######   #####  
#   #    # #   ##   ## #     # #       #     # #     # 
#  #    #   #  # # # # #     # #       #     # #       
###    #     # #  #  # ######  #####   ######   #####  
#  #   ####### #     # #     # #       #   #         # 
#   #  #     # #     # #     # #       #    #  #     # 
#    # #     # #     # ######  ####### #     #  #####  
------------------------------------------------------------
----------------------------------------------------------*/

/* nunito-200 - latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200;
    src: local(''), url('fonts/nunito-v23-latin-200.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/nunito-v23-latin-200.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* nunito-300 - latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 300;
    src: local(''), url('fonts/nunito-v23-latin-300.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/nunito-v23-latin-300.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* nunito-regular - latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local(''), url('fonts/nunito-v23-latin-regular.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/nunito-v23-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* poppins-100 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    src: local(''), url('fonts/poppins-v19-latin-100.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/poppins-v19-latin-100.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* poppins-200 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    src: local(''), url('fonts/poppins-v19-latin-200.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/poppins-v19-latin-200.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* poppins-300 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: local(''), url('fonts/poppins-v19-latin-300.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/poppins-v19-latin-300.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: local(''), url('fonts/poppins-v19-latin-regular.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/poppins-v19-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* poppins-600 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: local(''), url('fonts/poppins-v19-latin-600.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/poppins-v19-latin-600.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* poppins-700 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: local(''), url('fonts/poppins-v19-latin-700.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/poppins-v19-latin-700.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*===== VARIABLES CSS =====*/
:root {
    --header-height: 3rem;
    --nav-width: 4.25rem;
    /*===== Colors =====*/
    --first-color: #1DA1F2;
    --first-color-light: #F7F6FB;
    --body-color: hsl(0, 0%, 99%);
    --black-color: #000;
    --container-color: #fff;
    --border-color: hsl(0, 0%, 93%);
    --header-color: #000;
    --gray-color: #959595;
    --light-color: #f7f6fb;
    --text-color: #000;
    --white-color: #fff;
    --submenu-large-color: #242526;
    --submenu-large-hover-color: #3A3B3C;
    --small-menu-hover-color: #2f3036;
    --blue-accent: #2D6587;
    --primary-color: #0D6EFD;
    --abort-color: #D12020;
    --secondary-color: #959595;
    --thirdy-color: #39CCCC;
    --black-notblack: #000000c2;
    --alarm-success: #D1E7DD;
    --alarm-fail: #e7d1d1;
    /*===== Font and typography =====*/
    --body-font: 'Nunito', sans-serif;
    --header-font: 'Poppins', sans-serif;
    --biggest-font-size: 2rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    --font-medium: 400;
    /* ============ margins ============== */
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-fixed-2: 150;
}

/*===== BASE =====*/
*,
::before,
::after {
    box-sizing: border-box;
}

* {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}


html {
}

body {
    position: relative;
    overflow-x: hidden;
    margin: var(--header-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    transition: .5s;
}

/*body::after {
    content: "";
    background: url(/grayscale_nobuffer.png);
    opacity: 0.02;
    top: 10em;
    left: 35em;
    right: 0em;
    bottom: 0em;
    position: absolute;
    z-index: -1;
}*/

body,
button,
input,
textarea,
select {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    border-radius: 0em;
    color: black;
}

    input:focus,
    textarea:focus
    /*select:focus*/ {
        font-size: 16px;
    }

    input:disabled,
    select:disabled,
    textarea:disabled {
        opacity: 0.5;
        /*background-color: whitesmoke;*/
    }

button {
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 0em;
}

select {
    cursor: pointer;
}

datalist {
    position: absolute;
    max-height: 20em;
    border: 0 none;
    overflow-x: hidden;
    overflow-y: auto;
}

    datalist option {
        font-size: 0.8em;
        padding: 0.3em 1em;
        background-color: #ccc;
        cursor: pointer;
    }

        datalist option:hover, datalist option:focus {
            color: #fff;
            background-color: #036;
            outline: 0 none;
        }

input[type="date"] {
    cursor: pointer;
}

input[type="week"] {
    cursor: pointer;
}

/*******/
.date-input-wrapper {
    width: fit-content;
}

.date-input-wrapper {
    position: relative;
}

    .date-input-wrapper::after {
        width: 37px;
        height: 100%;
        background: transparent;
        position: absolute;
        content: "";
        right: 0px;
        top: 0px;
        border-radius: 5px;
        cursor: pointer;
    }

/*@supports not selector(::-webkit-calendar-picker-indicator) {
    .date-input-wrapper::before {
        display: block;
    }
}*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

a {
    text-decoration: none;
}

.firefox {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 5em;
}

.calendar__icon {
    position: absolute;
    right: 3rem;
}

.calendar__icon_shift {
    position: absolute;
    right: 0.2rem;
    font-size: 13pt;
}

.deleteIconButton {
    cursor: pointer;
}


/*=============== BUTTONS ===============*/


.primary {
    background-color: var(--primary-color);
}

.abort {
    background-color: var(--abort-color);
}

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

.thirdy {
    background-color: var(--thirdy-color);
}

.button {
    display: inline-block;
    color: var(--white-color);
    padding: 1rem 1.75rem;
    border-radius: .5rem;
    font-weight: var(--font-medium);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.downloadbutton {
    height: 78% !important;
}

.blackwhite {
    background-color: white;
    color: var(--black-notblack);
    border: 0.1em solid black;
}

/* === BUTTON HOVER EFFECT - OUTER ==== */
.button:hover {
    box-shadow: 0 0.188rem 0.375rem rgba(0, 0, 0, 0.16), 0 0.188rem 0.375rem rgba(0, 0, 0, 0.23);
}

/* === BUTTON HOVER EFFECT - INNER ==== */
.button__icon {
    transition: .3s;
}

.button--flex {
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
}

.button--link {
    color: var(--first-color);
    font-weight: var(--font-medium);
}

    .button--link:hover .button__icon {
        transform: translateX(.25rem);
    }

/*==== Button load =====*/
.customBtn.active i,
.customBtn1.active i {
    display: none;
}

.customBtn .loader,
.customBtn1 .loader {
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #fff;
    border-left-color: transparent;
    animation: loader 1s linear infinite;
}

.customBtn.active .loader,
.customBtn1.active .loader {
    display: block;
}

@keyframes loader {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.button-loader {
    display: none;
}

.is-loading .button-loader {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #00000070;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spin {
    display: block;
    width: 24px;
    height: 24px;
    aspect-ratio: 1 / 1;
    border: 4px solid #ffffff80;
    border-top-color: #ffffff;
    border-radius: 50%;
    /***/
    animation: loader 1s linear infinite;
}

.tablespin {
    display: none !important;
    border-radius: 50% !important;
    border-top-color: #939292;
    width: 20px;
    height: 20px;
    margin-top: 0.15em;
    position: relative;
    margin-left: 0.15em;
    top: -1.55em;
}

#general-loader {
    z-index: 999999999;
    position: absolute;
    height: 102vh;
    width: 100vw;
    top: -4.5em;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: #00000090;
}

    #general-loader .spin {
        width: 64px;
        height: 64px;
    }

    #general-loader.is-loading {
        display: flex;
    }

/*===== HEADER =====*/
.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5rem;
    background-color: var(--header-color);
    z-index: var(--z-fixed);
    transition: .3s;
}

.header__toggle {
    color: var(--white-color);
    font-size: 1.5rem;
    cursor: pointer;
}

.header__img {
    width: 2.188rem;
    height: 2.188rem;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
}

    .header__img img {
        width: 2.5rem;
    }

.header__logo {
    color: var(--light-color);
    font-family: var(--header-font);
    padding-left: 1rem;
}


.drop-btn {
    width: auto;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 1.5rem;
    padding: 0 1.25rem;
    border-radius: 0.313rem;
    font-weight: 400;
}

    .drop-btn i {
        float: right;
        line-height: 3.125rem;
        font-size: 1.75rem;
        cursor: pointer;
    }

.wrapper {
    position: absolute;
    top: var(--header-height);
    /* top: 2rem; */
    display: flex;
    width: auto;
    background-color: var(--submenu-large-color);
    border-radius: 0.313rem;
    display: none;
    transition: .3s;
    z-index: var(--z-fixed-2);
}

    .wrapper.show2 {
        transition: .3s;
        display: block;
        display: flex;
    }

    .wrapper.show2 {
        transition: .3s;
        display: block;
        display: flex;
    }

    .wrapper ul {
        list-style: none;
        width: max-content;
        padding: .5rem 1rem;
    }

        .wrapper ul li {
            line-height: 3.438rem;
        }

            .wrapper ul li a {
                text-decoration: none;
                color: var(--gray-color);
                display: flex;
                font-weight: 400;
                column-gap: 1rem;
                padding: 0 0.625rem;
                align-items: center;
                transition: .3s;
                cursor: pointer;
            }

            .wrapper ul li:hover a {
                background-color: var(--submenu-large-hover-color);
            }

            .wrapper ul li a .icon {
                height: 2.5rem;
                width: 2.5rem;
                margin-right: 0.813rem;
                background-color: #ffffff1a;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                border-radius: 50%;
            }

/*===== NAV =====*/
.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--blue-accent);
    padding: .5rem 1rem 0 0;
    transition: .3s;
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.nav__logo,
.nav__link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem;
    cursor: pointer;
}

.nav__logo {
    margin-bottom: 2rem;
}

.nav__logo-icon {
    font-size: 1.25rem;
    color: var(--black-color);
}

.nav__logo-name {
    color: var(--black-color);
    font-weight: 400;
}

.nav__link {
    position: relative;
    color: var(--white-color);
    margin-bottom: 1.5rem;
    transition: .3s;
}

    .nav__link:hover {
        color: var(--black-color);
    }


.nav__link-header {
    position: relative;
    font-family: var(--header-font);
    color: var(--gray-color);
    transition: .3s;
}

    .nav__link-header:hover {
        color: var(--white-color);
    }

.nav__link-subheader {
    position: relative;
    font-family: var(--header-font);
    color: var(--gray-color);
    transition: .3s;
}

    .nav__link-subheader:hover {
        color: var(--white-color);
    }

.nav__icon {
    font-size: 1.25rem;
    transition: .3s;
}

.show {
    left: 0;
}

/* Add padding body movil */
.body-pd {
    padding-left: calc(var(--nav-width) + 1rem);
}

/* Active links */
.active {
    color: var(--white-color);
    font-weight: 900;
    padding-left: 1rem;
    transition: .3s;
}

    .active::before {
        content: '';
        position: absolute;
        left: 0;
        width: 0.313rem;
        height: 2rem;
        background-color: var(--white-color);
        transition: .3s;
    }

/*===== infoMenuSelector =====*/
#infoMenuSelector {
    width: 100%;
    height: 2em;
    /*padding-left: 2em;*/
}

    #infoMenuSelector div {
        width: auto;
        display: block;
        padding: 0em 1em 0.2em 1em;
        float: left;
        cursor: pointer;
        transition: 0.25s linear;
        /*box-shadow: -76px 2px 0px 0px #fff0;*/
    }

        #infoMenuSelector div.activetab {
            /*border-bottom: 0.1em solid rgb(41, 144, 212);*/
            transition: 0.25s linear;
            /*box-shadow: 0px 2px 0px 0px blue;*/
        }

        #infoMenuSelector div:after {
            display: block;
            content: '';
            border-bottom: solid 0.16rem #2d65879e;
            transform: scaleX(0);
            transition: transform 250ms ease-in-out;
        }

        #infoMenuSelector div.activetab:after {
            /*border-bottom: 0.1em solid rgb(41, 144, 212);*/
            transition: 0.25s linear;
            /*box-shadow: 0px 2px 0px 0px blue;*/
            transform: scaleX(1);
            /*transform-origin: 0% 50%; /*from left*/
            transform-origin: 100% 50%;
        }



        /*=============== search ===============*/
        .search__group {
    width: 80%;
}

.search__item {
    background-color: var(--container-color);
}

.search__item-title {
    font-size: var(--h1-font-size);
    font-weight: 50;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

.search__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: .5rem;
    padding: 0 1rem 0 1rem;
    border: 0.063rem solid #9595956c;
    cursor: pointer;
}

.search__icon {
    cursor: pointer;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 100;
}

.search__content {
    overflow: hidden;
    height: 0;
    margin: auto;
    width: 90%;
}

.search__item,
.search__header,
.search__item-title,
.search__icon,
.search__description,
.search__content {
    transition: .3s;
}

    .search__header:hover {
        background-color: var(--gray-color);
    }

/*=============== NAV--SMALL ===============*/

.nav__container-small {
    width: 100%;
    max-height: 0em;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.show-menu {
    transition: max-height 0.7s cubic-bezier(0, 1.63, 0.74, 0.24);
    max-height: 30em;
}

/*
.nav__container-small {
  display: none;
  width: 100%;
  height: 0em;
  overflow: hidden;
}

.show-menu {
  display: block;
  z-index: 10;
  position: absolute;
  height: 10em;
}*/

.nav__icon-small {
    color: var(--gray-color);
    font-size: 1.5rem;
    cursor: pointer;
}

.menu__group {
    width: 100%;
}

.menu__item {
    background-color: var(--submenu-large-color);
}

.menu__title {
    font-weight: 50;
    color: var(--light-color);
    text-align: center;
    margin: 0;
}

.menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: .5rem;
    padding: 0 1rem 0 1rem;
    border: 0.063rem solid #9595956c;
    cursor: pointer;
}

.menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: .5rem;
    padding: 1rem 1rem 1rem 2rem;
    border: 0.063rem solid #9595956c;
    cursor: pointer;
    color: var(--light-color);
    background-color: var(--submenu-large-hover-color);
}


.menu__icon {
    cursor: pointer;
    color: var(--gray-color);
    padding: 1rem;
    font-size: 1rem;
    font-weight: 100;
}

.menu__content {
    overflow: hidden;
    height: 0;
}

.menu__item,
.menu__header,
.menu__item-title,
.menu__icon,
.menu__description,
.menu__content {
    transition: .3s;
}

    .menu__header:hover {
        background-color: var(--small-menu-hover-color);
    }

.menu__row:hover {
    background-color: var(--blue-accent);
}


/* ======== TABLE STYLING ====== */
.data__table {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    margin-left: 0;
    width: 80vw;
}

.data__cell {
    padding: .5rem;
    font-family: var(--body-font);
    font-size: 1rem;
    text-align: center;
    border: none;
    width: 20%;
    transition: .3s;
    white-space: nowrap;
}

.states__table {
    border-spacing: 0;
    width: 100%;
}

.row__header,
.col__header {
    padding: .5rem;
    color: var(--white-color);
    border: none;
    text-align: center;
}

.states__row {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    transition: .3s;
    height: 2rem;
}

    .states__row:hover {
        box-shadow: 0 0.75rem 2rem hsla(0, 0%, 10%, .2);
    }

    .states__row.highlighted {
        background: silver;
    }


.col__header {
    width: 16.666%;
    background-color: var(--blue-accent);
    padding-left: 0.1em;
    padding-right: 0.1em;
}

    .col__header.mobile {
        width: 25%;
    }

.row__header {
    background-color: var(--blue-accent);
}

.data__cell:hover {
    background-color: #2d648760;
}



/* =========== REUSABLE CSS CLASSES ============== */
.container {
    margin-left: auto;
    margin-right: auto;
}

.input__form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
}

.grid {
    display: grid;
}

.section {
    padding: 1.5rem 0 1rem;
}

.section__title {
    position: relative;
    font-size: var(--h2-font-size);
    font-weight: 500;
    margin-bottom: var(--mb-1);
    letter-spacing: 0.125rem;
    text-align: left;
    padding: 1rem 3rem;
}

.svg__icon {
    fill: var(--gray-color);
}

/* ====== FORM CLASSES ===== */

.forms__container {
    width: 100%;
    padding-left: 3rem;
    padding-top: 2rem;
}

.form__inputs {
    display: flex;
    padding: 0 0 1.5rem 0;
    width: 70%;
    column-gap: 3rem;
    row-gap: 1.5rem;
    flex-direction: row;
    flex-wrap: wrap;
}

.form__content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 3rem;
    width: 30vw;
    border-bottom: 0.063rem solid #000;
}

.form__content-autocomplete {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 3rem;
    width: 30vw;
    border-bottom: 0.063rem solid #000;
}

    .form__content-autocomplete > input::-webkit-calendar-picker-indicator {
        opacity: 0;
    }


.form__content-qr {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    height: auto;
    width: 30vw;
    max-width: 320px; /* new*/
}

.form__content-chkbox {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 3rem;
    width: 30vw;
    accent-color: silver;
}

.chart__inputs {
    width: 70%;
    margin-bottom: 2em;
    border: 0.01em solid #e2e0e0;
    box-shadow: 1em 1em 1.5em #cacaca;
}

.qr__img {
    width: 9.375rem;
}

.qr__label {
    width: 100%;
    font-size: var(--small-font-size);
    color: var(--text-color);
    transition: .3s;
}

.alarm__icon {
    font-size: var(--h2-font-size);
    transition: .3s;
}


.form__input {
    width: 100%;
    height: 4em;
    padding: 1rem 1rem 1rem 0;
    background: none;
    color: var(--text-color);
    border: none;
    outline: none;
    z-index: 1;
}

.form__input-chkbox {
    width: 2em;
    height: 3em;
    padding: 1rem 1rem 1rem 0;
    background: none;
    color: var(--text-color);
    border: none;
    outline: none;
    z-index: 1;
    cursor: pointer;
    margin-top: 1.2em;
}

.form__input-autocomplete {
    width: 100%;
    height: 100%;
    padding: 1rem 1rem 1rem 2.5rem;
    background: none;
    color: var(--text-color);
    border: none;
    outline: none;
    z-index: 1;
}


.form__label {
    position: absolute;
    top: .75rem;
    width: 100%;
    font-size: var(--small-font-size);
    color: var(--text-color);
    transition: .3s;
}

.form__labelspace {
    position: absolute;
    top: .25rem;
    width: 100%;
    font-size: var(--small-font-size);
    color: var(--text-color);
    transition: .3s;
}

.form__label-autocomplete {
    position: absolute;
    top: .75rem;
    left: 3rem;
    width: 100%;
    font-size: var(--small-font-size);
    color: var(--text-color);
    transition: .3s;
}

.form__label-icon {
    position: absolute;
    font-size: 3rem;
    top: .75rem;
    /*left: -1em;*/
    left: 0em;
    width: 100%;
    font-size: var(--h2-font-size);
    color: var(--text-color);
    transition: .3s;
}

.form__label-icon-right {
    position: absolute;
    font-size: 3rem;
    top: 1rem;
    left: 90%;
    font-size: var(--h2-font-size);
    color: var(--text-color);
    transition: .3s;
    cursor: pointer;
    z-index: var(--z-fixed);
    display: none;
}

.form__label-pw-icon.form__label-icon-right {
    display: flex;
    top: 0.6rem;
    cursor: pointer;
}


/*Input focus move up label*/
.form__input:focus + .form__label {
    top: -.75rem;
    left: 0;
    font-size: var(--smaller-font-size);
    z-index: 10;
}

/*Input focus sticky top label*/
.form__input:not(:placeholder-shown).form__input:not(:focus) + .form__label {
    top: -.75rem;
    left: 0;
    font-size: var(--smaller-font-size);
    z-index: 10;
}

/*Input focus move up label*/
.form__input:focus + .form__labelspace {
    top: -1.1rem;
    left: 0;
    font-size: var(--smaller-font-size);
    z-index: 10;
}

/*Input focus sticky top label*/
.form__input:not(:placeholder-shown).form__input:not(:focus) + .form__labelspace {
    top: -1.1rem;
    left: 0;
    font-size: var(--smaller-font-size);
    z-index: 10;
}


.form__input-autocomplete:not(:placeholder-shown).form__input-autocomplete:not(:focus) + .form__label-autocomplete {
    left: 0 !important;
}

/*Input focus move up label*/
.form__input-autocomplete:focus + .form__label-autocomplete {
    top: -.75rem;
    left: 2.5rem;
    font-size: var(--smaller-font-size);
    z-index: 10;
}

/*Input focus sticky top label*/
.form__input-autocomplete:not(:placeholder-shown).form__input-autocomplete:not(:focus) + .form__label-autocomplete {
    top: -.75rem;
    left: 3rem;
    font-size: var(--smaller-font-size);
    z-index: 10;
}

/*Input focus move up label*/
.form__input-chkbox:focus + .form__label {
    top: -.75rem;
    left: 0rem;
    font-size: var(--smaller-font-size);
    z-index: 10;
}

/*Input focus sticky top label*/
.form__input-chkbox:not(:placeholder-shown).form__input-chkbox:not(:focus) + .form__label {
    top: -.75rem;
    left: 0rem;
    font-size: var(--smaller-font-size);
    z-index: 10;
}




/*=============== DROPDOWN ===============*/
.dropdown__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown__icon {
    font-size: 1.3rem;
    padding: 0 1rem 0 1rem;
    transition: .3s;
}

.dropdown__menu {
    margin: 0.5rem 0 0 0.5rem;
    display: none;
    transition: .3s;
}

.dropdown:hover > .dropdown__menu {
    display: block;
    transition: .3s;
}

.dropdown__item {
    padding: 1.5rem
}

.dropdown {
    position: relative;
}

.dropdown__menu {
    position: fixed;
    margin: 0;
    top: calc(var(--header-height)+0);
    padding: 0 1.5rem;
    background-color: var(--black-color);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}

.startButtons {
    position: relative;
    color: #FFF;
    background-color: #3c637c;
    /*background: linear-gradient(to left, #3C637C, #00394A);*/
    border: 0.15em solid var(--blue-accent);
    width: 9em;
    height: 9em;
    margin: 0.2em;
    float: left;
    text-align: center;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    cursor: pointer;
    transition: 0.25s ease-in-out;
    box-shadow: 5em 2em 3em 0em #00394a inset;
}

    .startButtons i {
        font-size: 4rem;
    }

    .startButtons span {
        position: absolute;
        bottom: 5px;
        left: 10px;
    }

    .startButtons:hover {
        color: var(--blue-accent);
        background: none;
        background-color: white;
        /*color: #dadada;
  background: linear-gradient(to right, #3C637C, #00394A);*/
        box-shadow: 0em 0em 3em 0em #00394a inset;
    }


    .startButtons a:visited {
        color: black;
    }




.field textarea {
    font-size: 16px;
    line-height: 28px;
    /* padding: 8px 16px; */
    padding-left: 1rem;
    width: 100%;
    min-height: 100px;
    border: unset;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    transition: .3s;
}

.field select {
    font-size: 16px;
    font-family: var(--body-font);
    line-height: 44px;
    height: 44px;
    /* padding: 8px 16px; */
    padding-left: 1rem;
    padding-right: 1rem;
    /*padding-top: 0.7rem;*/
    width: 100%;
    border: unset;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    transition: .3s;
}

.field input {
    font-size: 16px;
    line-height: 28px;
    /* padding: 8px 16px; */
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    transition: .3s;
}

.field-checkbox {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .field-checkbox input {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        box-shadow: unset;
        min-height: unset;
        cursor: pointer;
    }

    .field-checkbox label {
        display: flex;
        align-items: center;
        margin: 0;
    }

input.customer__input {
    padding-left: 2.5rem;
}

input[type="checkbox"]:focus {
    outline: 0;
}

.customer__container,
.project__container,
.pos__container,
.remarks__container,
.hours__container {
    width: 100%;
}

.delete__container {
    width: 1em;
}

.customer__container,
.project__container,
.pos__container,
.remarks__container,
.hours__container,
.billable__container {
    transition: all 0.3s ease-in;
}

input.remarks__input {
    height: 100px;
}

input.checkbox__input {
    align-self: center;
}



.field :focus {
    transition: .3s;
    outline: 1px solid #2D6587;
}

.field > label {
    font-size: 14px;
    font-weight: 400;
    display: block;
}

.field > .form__label-icon-right {
    padding-top: 0.8em;
    padding-right: 1em;
    width: 1em;
    line-height: 1em;
}

.field > .form__label-icon {
    padding-top: 1em;
    padding-left: 0.7em;
    width: 2em;
}

.field {
    position: relative;
}

.field__icon {
    position: absolute;
    top: 35px;
    left: 10px;
}



/* #option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2 {
  background: var(--blue-accent);
} */

.selection-1:checked:checked ~ .option-1,
.selection-2:checked:checked ~ .option-2 {
    background: var(--blue-accent);
}

.checked {
    background: var(--blue-accent);
}

    /* .hours__container .option span {
  color: #808080;
} */

    .checked > span,
    .checked > .option__container > .option__hours > label {
        color: #fff;
    }

/* #option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
  color: #fff;
} */

.selection-1:checked:checked ~ .option-1 span,
.selection-2:checked:checked ~ .option-2 span {
    color: #fff;
}

/* #option-1:checked:checked~.option-1>.option__container>.option__hours>label,
  #option-2:checked:checked~.option-2>.option__container>.option__hours>label {
    color: #fff;
  } */

.selection-1:checked:checked ~ .option-1 > .option__container > .option__hours > label,
.selection-2:checked:checked ~ .option-2 > .option__container > .option__hours > label {
    color: #fff;
}


.option__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    column-gap: 1rem;
    height: 100%;
}

.hours__from {
    display: inline-flex;
}

.hours__count {
    display: inline-flex;
}

.option__hours {
    display: flex;
    flex-direction: column;
}

    .option__hours label {
        color: #808080;
        order: 0;
    }

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

.hours__input {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    /* padding-left: 1rem; */
    width: 100%;
    min-height: 44px;
    text-align: left;
    border: unset;
    /* border-radius: 4px; */
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    transition: .3s;
    padding: 0;
    margin: 0;
}

    .hours__input:focus {
        transition: .3s;
        outline: 1px solid #2D6587;
    }


/* =================== ADD ENTRY ACTION BUTTON ==================== */

.action__button-container {
    display: flex;
    position: sticky;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    bottom: 0;
    width: 100%;
    background-color: transparent;
    backdrop-filter: blur(10px);
    height: 50px;
}

    .action__button-container > button {
        background-color: #2d648723;
        height: 100%;
        width: 40%;
        /* border-radius: 5px; */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        color: #000;
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    }

        .action__button-container > button:hover {
            background-color: #2D6587;
            color: #fff;
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        }


/* ============ MODAL WINDOW ========================== */
/* ===============   MODAL ====================== */
/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: var(--z-fixed-2);
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    transition: .3s;
    backdrop-filter: blur(10px);
    box-shadow: 1px 2px 17px -1px rgba(0, 0, 0, 0.377);
}

/* Modal Content/Box */
.modal-content {
    display: flex;
    flex-direction: column;
    background-color: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    transition: .3s;
    /* Could be more or less, depending on screen size */
}

.bullets {
    display: flex;
    flex-direction: column;
    padding: .5rem;
}

.modal__title {
    font-size: var(--big-font-size);
    line-height: 140%;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.bullets__details {
    display: inline-flex;
    padding-left: .5rem;
    padding-bottom: .3rem;
    column-gap: .5rem;
    font-size: var(--small-font-size);
}


/* The Close Button */
.close {
    color: white;
    /* float: right; */
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }




/* ===== MEDIA QUERIES=====*/

@media screen and (min-width: 320px) {
    body {
        margin: calc(var(--header-height)) 0 0 0;
        padding: 0;
        height: 100vh;
        overflow: hidden;
    }

    #mainframe {
        padding-left: 0em !important;
    }

    .main__container {
        width: 85%;
        margin-right: 1em;
        margin-left: 4em;
    }

    .hide-on-mobile {
        visibility: hidden;
        display: none;
    }

    .mobile__list {
        width: 100%;
        margin-right: unset;
        margin-left: unset;
    }


    .input__form {
        height: 87vh;
        overflow-y: scroll;
        overflow-x: hidden;
        grid-template-columns: repeat(1, 1fr);
    }

    .header {
        padding: 0 2rem 0 1rem;
    }

    .header__img {
        width: 2.5rem;
        height: 2.5rem;
    }

    .header__logo {
        width: auto;
        height: auto;
    }

        .header__logo img {
            width: 2.813rem;
        }

    .header__img img {
        width: 2.813rem;
        justify-content: space-between;
    }

    .nav__btns-small {
        display: block;
    }

    .navbar__secondary {
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
        /* position: fixed; */
        justify-content: flex-start;
        align-items: flex-start;
        top: calc(var(--header-height) + 10px);
        left: 0;
        padding: 0.1rem 1rem;
        width: 100%;
        background-color: #2D6587;
        height: fit-content;
        z-index: 1;
        transition: .3s;
    }

    .nav_title {
        width: 100%;
    }

        .nav_title > h2 {
            color: #D1E7DD;
            font-family: sans-serif;
            font-size: 1rem;
            font-weight: 400;
            padding: 0;
            margin: 0;
        }

    #infoMenuSelector {
        margin-left: -3em;
    }

    .chart__inputs {
        width: 89%;
    }


    .week__data {
        display: none;
    }

    .week__data-mobile {
        display: flex;
        align-items: center;
        column-gap: 1rem;
        justify-content: space-between;
        /* width: 100%; */
        height: 50px;
    }

    #date__range2 {
        padding-right: 1em;
        width: 6em;
        cursor: pointer;
        width: 40%;
    }



    .controls__container {
        display: flex;
        align-items: center;
        column-gap: 1rem;
    }

        .controls__container > h2 {
            font-family: sans-serif;
            font-weight: 400;
            color: var(--white-color);
        }

    .button__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--white-color);
        border-radius: 5px;
        height: 40px;
        width: 40px;
        transition: .3s;
    }

    .field-checkbox {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .button__arrow:hover {
        background-color: var(--secondary-color);
    }

    .button__arrow > .bx {
        color: var(--black-color);
        font-size: 1.5rem;
    }

    .button__calendar {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        border: 1px solid var(--white-color);
        border-radius: 5px;
        height: 40px;
        width: 40px;
        line-height: 40px;
        transition: .3s;
    }

        .button__calendar.mobile {
            background-color: var(--white-color);
            width: 46%;
            float: right;
            display: block;
            font-size: 15pt;
            text-align: center;
            width: 55%;
            vertical-align: middle;
        }

        .button__calendar:hover {
            border: 1px solid var(--secondary-color);
        }

        .button__calendar > .bx {
            color: var(--white-color);
            font-size: 1.5rem;
        }

    .nav_title > h3 {
        color: #D1E7DD;
        font-family: sans-serif;
        font-size: 0.8rem;
        font-weight: 200;
        padding: 0;
        margin: 0;
    }

    .search__group {
        /* display: grid;
    row-gap: 1.5rem; */
        margin: auto;
        width: 90%;
    }

    .section {
        padding: 1.5rem 0 1rem;
    }

    .section__title {
        position: relative;
        font-size: var(--h2-font-size);
        font-weight: 500;
        margin-bottom: var(--mb-1);
        /* text-transform: uppercase; */
        letter-spacing: 0.125rem;
        text-align: left;
        padding: 1rem 1rem;
    }

    .form__inputs {
        display: flex;
        padding: 0 0 1.5rem 0;
        width: 70%;
        column-gap: 3rem;
        row-gap: 1.5rem;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .form__content-autocomplete {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 3rem;
        width: 80%;
        border-bottom: 0.063rem solid #000;
    }

    .form__login {
        /*margin-left: 3.7em;*/
    }

    .form__content-qr {
        position: relative;
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
        height: auto;
        width: 80vw;
        align-items: flex-end;
    }


    #messageSuccess {
        display: none;
        background-color: var(--alarm-success);
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        width: 100%;
        height: 3rem;
        border-radius: 0.313rem;
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        opacity: 1;
    }

    #messageFail {
        display: none;
        background-color: var(--alarm-fail);
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        width: 100%;
        height: auto;
        border-radius: 0.313rem;
        transition: all 0.3s ease-in;
        opacity: 1;
    }

        #messageFail h3 {
            white-space: pre-line;
            font-size: 11pt;
            margin: 0em;
            padding: 0em;
        }

    .qr__img {
        width: 9.375rem;
    }

    .qr__label {
        width: 100%;
        font-size: var(--small-font-size);
        color: var(--text-color);
        transition: .3s;
    }

    .button {
        display: inline-block;
        width: 100%;
        padding: 1rem 1.75rem;
        border-radius: .5rem;
        font-weight: var(--font-medium);
        transition: .3s;
        margin-bottom: .5rem;
    }

    .button--flex {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        column-gap: 1rem;
        row-gap: 1rem;
    }


    .buttons__container-dual {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 100%;
        justify-content: flex-end;
        column-gap: 0.5rem;
    }

    .buttons__container-single {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: flex-end;
        column-gap: 2rem;
        row-gap: 1rem;
    }

    .nav__container-large {
        display: none;
    }


    .l-navbar {
        left: 0;
        display: none;
        padding: 1rem 1rem 0 0;
        z-index: var(--z-fixed-2);
    }


    .forms__container {
        width: 100%;
        padding-left: 1rem;
        padding-top: 2rem;
    }

    /*Show navbar desktop*/
    .show {
        width: calc(var(--nav-width) + 8rem);
    }

    .form__content {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 3rem;
        width: 80%;
        border-bottom: 0.063rem solid #000;
    }

    .form__content-chkbox {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 3rem;
        width: 80%;
    }

    .states__table {
        border-spacing: 0;
        width: 90%;
    }

    .data__cell {
        padding: 0;
        font-size: 1rem;
        overflow: hidden;
        padding-left: 0.1em;
        padding-right: 0.1em;
    }

        .data__cell.mobile {
            width: 25%;
        }

    .data__table {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3rem;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        cursor: pointer;
    }

    .project__record {
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
        justify-content: space-around;
        column-gap: .5rem;
        /* padding-top: 5rem; */
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 3rem;
        margin-bottom: 3rem;
        align-items: flex-start;
        width: 100%;
        background-color: #F7F9F9;
        border-bottom: 1px solid var(--blue-accent);
    }

    /* ==================HOURS CONTAINER ======================= */

    .hours__container {
        display: flex;
        flex-direction: row;
        /* background: #fff; */
        row-gap: 1rem;
        height: 10rem;
        /* width: 25rem; */
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        /* padding: 20px 15px; */
        /* box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2); */
    }

        .hours__container .option {
            /* background: #fff; */
            flex-direction: column;
            height: 11rem;
            width: 50%;
            display: flex;
            /* flex-direction: column; */
            column-gap: 1rem;
            align-items: center;
            justify-content: space-around;
            margin: 0 10px;
            border-radius: 5px;
            cursor: pointer;
            padding: 1rem;
            border: 2px solid lightgrey;
            transition: all 0.3s ease;
        }

            .hours__container .option span {
                display: none;
            }


        .hours__container > input[type="radio"] {
            display: none;
        }

    .delete__container {
        margin: auto;
        padding-top: 1em;
    }

        .delete__container i {
            font-size: 22pt;
        }


    @media screen and (min-width: 576px) {
        body {
            margin: calc(var(--header-height)) 0 0 0;
            height: 100vh;
            overflow: hidden;
        }

        #mainframe {
            padding-left: 0.3em !important;
        }

        .main__container {
            width: 85%;
            margin-right: unset;
            margin-left: unset;
        }

        .hide-on-mobile {
            visibility: hidden;
            display: none;
        }

        .button {
            width: 8rem;
        }

        .button--flex {
            column-gap: 0.3rem;
            height: 80%;
        }

        .buttons__container-dual {
            flex-direction: row;
            align-items: center;
            width: 80%;
            justify-content: space-between;
            row-gap: 1rem;
        }

        .nav__container-large {
            display: none;
        }

        .l-navbar {
            left: 0;
            display: none;
            padding: 4rem 1rem 0 0;
            z-index: var(--z-tooltip);
        }


        .forms__container {
            width: 100vw;
            padding-left: 2rem;
            padding-top: 2rem
        }

        /*Show navbar desktop*/

        .row__header,
        .col__header {
            padding: .1rem;
            font-size: var(--smaller-font-size);
        }

        .states__table {
            border-spacing: 0;
            width: 100%;
        }

        .data__cell {
            padding: .1rem;
            font-size: 1rem;
        }
    }


    @media screen and (min-width: 768px) {
        body {
            margin: calc(var(--header-height) + 1rem) 0 0 0;
            padding-left: calc(var(--nav-width) + 0.5rem);
        }

        #mainframe {
            padding-left: 0.8em !important;
        }

        .hide-on-mobile {
            visibility: unset;
            display: unset;
        }

        .input__form {
            height: 90vh;
            grid-template-columns: repeat(2, 1fr);
        }

        .header {
            padding: 0 5rem;
            justify-content: flex-start;
        }

        .nav__container-small {
            display: none;
        }

        .nav__btns-small {
            display: none;
        }

        .search__group {
            margin: 0;
            width: 80%;
        }


        .navbar__secondary {
            display: flex;
            position: fixed;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            top: 45px;
            left: 40px;
            padding: 0 4rem;
            width: 100%;
            background-color: #2D6587;
            height: 100px;
            z-index: 1;
            transition: .3s;
        }

        #infoMenuSelector {
            margin-left: unset;
        }

        .week__data {
            display: block;
        }

        .date__container {
            display: flex;
            align-items: center;
            justify-content: center;
            column-gap: 1rem;
            white-space: nowrap;
        }

            .date__container > span {
                color: #fff;
            }

        .week__data {
            display: flex;
            align-items: center;
            justify-content: center;
            column-gap: 1rem;
        }

        .week__data-mobile {
            display: none;
        }

        .total__hours > span {
            color: #fff;
        }

        .nav_title > h2 {
            color: #D1E7DD;
            font-family: sans-serif;
            font-size: var(--h2-font-size);
            font-weight: 400;
            padding: 0;
            margin: 0;
        }

        .nav_title > h3 {
            color: #D1E7DD;
            font-family: sans-serif;
            font-size: var(--h3-font-size);
            font-weight: 200;
            padding: 0;
            margin: 0;
        }


        .search__group {
            margin: 0;
            width: 100%;
        }

        .form__inputs {
            justify-content: space-between;
        }

        .button {
            width: 80%;
        }

        .button--flex {
            width: 10em;
            column-gap: 1rem;
        }

        .buttons__container-dual {
            width: 100%;
        }

        .buttons__container-single {
            width: 100%;
        }

        .button:hover .button__icon {
            transform: translateX(.25rem);
        }

        .form__inputs {
            justify-content: space-between;
        }

        .form__login {
            margin-left: 0em;
            margin-left: 0em;
        }

        .form__content-autocomplete {
            width: 100%;
        }

        .button {
            width: 80%;
        }

        .button--flex {
            width: 10em;
            column-gap: 1rem;
        }

        .buttons__container-dual {
            width: 100%;
        }

        .buttons__container-single {
            width: 100%;
        }

        .button:hover .button__icon {
            transform: translateX(.25rem);
        }


        .nav__container-large {
            display: block;
        }

        .nav__list-header {
            display: flex;
            flex-direction: row;
            width: 50vw;
            justify-content: flex-start;
            align-items: center;
            column-gap: 10vw;
        }

        .l-navbar {
            left: 0;
            padding: 1rem 1rem 0 0;
            display: block;
            box-shadow: 4px 0px 20px -7px rgb(0 0 0 / 51%);
            z-index: var(--z-fixed-2);
        }


        .forms__container {
            padding-left: 1rem;
        }

        .body-pd {
            padding-left: calc(var(--nav-width) + 10rem);
        }

        .form__content {
            width: 45%;
        }

        .form__content-chkbox {
            width: 45%;
        }

        .data__table {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 3rem;
            margin-left: 0;
            width: 100%;
        }

        .data__cell {
            padding: .5rem;
            font-family: var(--body-font);
            font-size: 1rem;
            text-align: center;
            border: none;
            width: 20%;
            transition: .3s;
        }

        .row__header,
        .col__header {
            padding: .5rem;
            font-size: var(--normal-font-size);
            color: var(--white-color);
            border: none;
            text-align: center;
        }
    }

    @media screen and (min-width: 1280px) {

        .header {
            justify-content: space-between;
            column-gap: 10vw;
            padding-right: 0 10rem 0 5rem;
        }

        .form__content-autocomplete {
            justify-content: space-between;
            height: 3rem;
            width: 45%;
        }

        .form__content-qr {
            width: 25vw;
            align-items: flex-end;
        }

        .nav__list-header {
            width: 70vw;
        }

        .chart__inputs {
            width: 70%;
        }

        .project__record {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            column-gap: 1rem;
            margin-top: 3rem;
            margin-bottom: 2rem;
            align-items: flex-start;
            width: 100%;
            background-color: #F7F9F9;
            border-bottom: 1px solid #2d648733;
            transition: all 0.6s ease-out;
            height: 15em;
        }

        .customer__container {
            margin-top: -1.55em;
        }

        /* ==================HOURS CONTAINER ======================= */

        .hours__container {
            display: flex;
            flex-direction: row;
            /* background: #fff; */
            row-gap: 1rem;
            height: 10rem;
            width: auto;
            align-items: center;
            justify-content: space-evenly;
            border-radius: 5px;
            /* padding: 20px 15px; */
            /* box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2); */
        }

            .hours__container .option {
                /* background: #fff; */
                height: 100%;
                width: 100%;
                display: flex;
                /* flex-direction: column; */
                column-gap: 1rem;
                align-items: center;
                justify-content: space-around;
                margin: 0 10px;
                border-radius: 5px;
                cursor: pointer;
                padding: 1rem;
                border: 2px solid lightgrey;
                transition: all 0.3s ease;
            }


            .hours__container > input[type="radio"] {
                display: none;
            }

        .field-checkbox {
            margin-top: 1rem;
        }

        .delete__container {
            margin: unset;
            padding-top: unset;
        }

            .delete__container i {
                font-size: var(--h2-font-size);
            }
    }

    /*---------------------------------------------------------*/
    /*Main Layout*/
    #mainframe {
        padding-left: 1.5em;
        height: 100%;
    }

    #maincontent {
        height: 100vh;
    }
    /*---------------------------------------------------------*/
    /*General Layout*/
    .hidden {
        visibility: hidden;
        display: none !important;
    }

    .hidden2 {
        opacity: 0 !important;
        pointer-events: none;
        /*height: 0em !important;
        overflow: hidden;
        color: transparent*/
    }

    .shrink {
        opacity: 0.5 !important;
        pointer-events: none;
        height: 0em;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .halfhidden {
        opacity: 0.5;
        cursor: pointer;
    }

    .flright {
        float: right;
    }

    .flleft {
        float: left;
    }

    /*Space*/
    /*Small*/
    .s-space-left {
        margin-left: 1em;
    }

    .s-space-right {
        margin-right: 1em;
    }

    .s-space-top {
        margin-top: 1em;
    }

    .s-space-bottom {
        margin-bottom: 1em;
    }

    /*Medium*/
    .m-space-bottom {
        margin-bottom: 5em;
    }

    .m-space-top {
        margin-top: 3em;
    }

    /*Big*/
    .b-space-bottom {
        margin-bottom: 10em;
    }

    /*Minus Space*/
    .m-minus-space-left {
        margin-left: -1.8em;
    }

    /*Height*/
    /*In EM height*/
    .h-14 {
        height: 14em;
    }

    .h-15 {
        height: 15em;
    }

    .h-20 {
        height: 20em;
    }

    /*---------------------------------------------------------*/
    /*Login*/
    /*---------------------------------------------------------*/
    /*Login*/
    .loginbody {
        padding: 0;
        margin: 0;
        padding-top: 1em;
    }

    #loginBox {
        /*box-shadow: 1px 0px 50px 40px rgb(102 135 154);*/
        border-bottom: 0.15em solid #a2a1a1;
        max-width: 29em;
        margin: auto;
        border: 0.1em solid whitesmoke;
        border-radius: 0.3em;
        transform: scale(2.5, 2.5);
        opacity: 0.04;
        transition: all linear 0.3s;
    }

        #loginBox header {
            border: none;
            height: 2.5em;
        }

        #loginBox .search__content {
            height: 16em;
        }

        #loginBox .forms__container {
            width: 79%;
            margin-left: auto;
            margin-right: auto;
        }

        #loginBox .form__inputs {
            width: 100%;
        }

        #loginBox .form__content-autocomplete {
            width: 100% !important;
            height: 2.5rem;
            border: 1px solid #00000036;
            border-radius: 0.3em;
            background-color: #f5f5f563;
        }

        #loginBox .form__label-autocomplete {
            top: -1.1rem;
        }

        #loginBox .form__label-icon {
            top: 0.6rem;
            left: 0.3rem;
        }

        #loginBox .login {
            width: 18em;
            margin: auto;
            height: 2.8em;
        }

        #loginBox .buttonbox {
            padding-bottom: 0.5em;
            width: 100%;
        }

        #loginBox button {
            width: 18em;
            margin: auto;
            height: 2.8em;
        }
        #loginBox.submitted {
            transform: scale(0.1, 0.1);
            opacity: 0.04;
            transition: all linear 0.3s;
        }

        #loginBox.normal {
            transform: scale(1, 1);
            opacity: 1;
            transition: all linear 0.2s;
        }

    #loginLayer {
        width: 100%;
        height: 100%;
        position: absolute;
        filter: blur(70em);
        z-index: -10;
        transition: all linear 0.5s;
        opacity: 1;
    }

    #loginLayer.white {
        opacity: 0;
    }

        #loginLayer.blue {
            background: #2d6587c7;
            opacity: 1;
        }

    .animate.pop {
        animation-duration: 0.1s;
        animation-name: animate-pop;
        /*animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);*/
        animation-timing-function: ease-in;
    }

    @keyframes animate-pop {
        0% {
            opacity: 0;
            transform: scale(0.9, 0.9);
        }

        100% {
            opacity: 1;
            transform: scale(1, 1);
        }
    }

    .animate {
        animation-duration: 0.5s;
        animation-name: animate-fade;
        animation-delay: 0.5s;
        animation-fill-mode: backwards;
    }

    @keyframes animate-fade {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .animate.silver {
        animation-duration: 0.9s;
        animation-name: animate-fade-silver;
        animation-delay: 0.2s;
        animation-fill-mode: backwards;
    }

    @keyframes animate-fade-silver2 {
        0% {
            opacity: 0;
            background-color: #dadada;
            border-radius: 2em;
        }

        100% {
            opacity: 1;
            background-color: white;
            border-radius: 0em;
        }
    }

    @keyframes animate-fade-silver {
        0% {
            opacity: 0;
            box-shadow: inset 5px -37px 49px 5px #eee;
            border-radius: 1em;
        }

        100% {
            opacity: 1;
            box-shadow: none;
            border-radius: 0em;
        }
    }

    @keyframes animate-fade-silver3 {
        0% {
            opacity: 0;
            border-top: 0.5em solid silver;
        }

        100% {
            opacity: 1;
            border-top: none;
        }
    }

    .animate-menu {
        animation-duration: 0.5s;
        animation-name: animation-menu;
        animation-delay: 0.3s;
        animation-fill-mode: backwards;
    }

    @keyframes animation-menu {
        0% {
            height: 0em;
        }

        100% {
            height: 1em;
        }
    }



    @media (max-width: 767px) {
        /*#mainframe {
    padding-left: 1rem !important;
    overflow: hidden;
  }*/
        .forms__container {
            padding-left: 0 !important;
            margin: 0;
        }

        .form__inputs {
            width: 90%;
            left: 0;
            margin: 0 !important;
        }

        .form__content,
        .form__content-autocomplete {
            width: 100% !important;
            margin: 0 auto !important;
        }

        .form__input-autocomplete:not(:placeholder-shown).form__input-autocomplete:not(:focus) + .form__label-autocomplete {
            left: 0 !important;
        }

        .form__content-qr {
            width: 90%;
            margin: 0 auto;
            align-items: center;
        }

        .form__alarm-success {
            width: 100% !important;
        }

        .hidden2 {
            display: none !important;
        }

        #general-loader {
            top: -3.2em;
        }
    }