/* TABLE OF CONTENTS
    01. General
    02. Header
    03. Footer
    04. Forms
    05. Buttons
    06. Orders
    07. PFP
    08. Chats
    09. Users
    10. Facilities
    11. Confirm Modal
    12. Map
    13. Queries
        a. Mobile
        b. Tablet
        c. iPad Pro
*/


/* 01. GENERAL */
    :root {
        --white: #fff;
        --black: #000;
        --blue: #4E7291;
        --light-blue: #b1c6ce;
        --dark-blue: #274d6f;
        --green: #04C36B;
        --orange: #FFBA00;
    }
    @font-face {
        font-family: "Roboto Regular";
        src: url("/webfonts/Roboto-Regular.ttf");
    }
    @font-face {
        font-family: "Roboto Medium";
        src: url("/webfonts/Roboto-Medium.ttf");
    }
    @font-face {
        font-family: "Roboto Black";
        src: url("/webfonts/Roboto-Black.ttf");
    }

    html, body {
        width: 100%;
        height: 100%;
    }
    body {
        font-weight: 500;
        background: var(--blue);
        color: var(--white);
    }
    p {
        font-size: 1em;
    }
    * { font-family: 'Roboto Medium', 'Arial', 'Helvetica', sans-serif; }
    a { 
        text-decoration: none;
        color: var(--white);
    }
    a:hover, a:focus, a:target { 
        text-decoration: underline;
    }
    h1, h2, h3, h4, h5, h6, h2 span { font-family: 'Roboto Medium'; }
    .mobile-hide { display: inherit; }
    .mobile-only { display: none !important; }
    .tablet-only { display: none !important; }
    .quarter-width { width: 25%; }
    .half-width { width: 50%; }
    .three-quarter-width { width: 75%; }
    .full-width { width: 100%; }
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }
    .text-uppercase { text-transform: uppercase; }
    .header-light { font-weight: 500; }
    .header-medium { font-weight: 700; }
    .header-heavy { font-weight: 900; }
    .hide { display: none; }
    .err {
        font-size: 0.8em;
        color: rgb(192, 28, 28);
    }
    .errs {
        border: 5px solid var(--red);
        margin-bottom: 20px;
        padding: 10px;
        font-weight: 500;
        text-align: center;
    }
    .errs strong { font-size: 1.4em; }
    .green { color: var(--green) !important; }
    .orange { color: var(--orange) !important; }
    body .content {
        height: calc(100% - 40px);
        overflow-y: auto;
    }
    .grey-bg {
        min-height: 100vh;
        background: #F4F4F4;
        border-radius: 25px 25px 0 0;
        color: var(--dark-blue);
    }
    .grey-bg.auto-height {
        min-height: auto;
    }
    div.grey-bg a { 
        color: var(--blue);
    }
    div.grey-bg a:hover, div.grey-bg a:focus, div.grey-bg a:target { 
        color: var(--orange);
    }
    p.title {
        font-weight: 700;
        font-size: 1.4em;
    }
    a.back {
        font-size: 1.2em;
    }
    .btn-primary, div.grey-bg a.btn-primary {
        color: var(--white);
        background: var(--blue);
        border: 2px solid var(--blue);
    }
    div.grey-bg .btn-primary:hover, div.grey-bg .btn-primary:focus, div.grey-bg .btn-primary:target, div.grey-bg .btn-primary:active {
        color: var(--blue);
        background: var(--orange);
        border: 2px solid var(--orange);
        text-decoration: none;
    }
    .sr-only {
        height: 1px;
        width: 1px;
        position: absolute;
        left: -1000px;
    }
    p.blue, a.blue {
        color: var(--blue);
    }


/* 02. HEADER */    
    header {
        position: relative;
        width: 100%;
        padding: 10px;
        font-size: 1.2em;
        margin-bottom: 2.5em;
    }
    header.header {
        top: 2em;
    }
    header.splash {
        top: 30%;
    }
    header img {
        margin-bottom: 1em;
        filter: drop-shadow(0 0 0.25em rgba(0, 0, 0, 0.5));
    }
    header.header.map {
        position: absolute;
        margin-bottom: 0;
        top: 0;
        height: 50px;
        background: var(--blue);
        z-index: 999;
    }



/* 03. FOOTER */
    footer {
        z-index: -1;
        display: block;
        position: sticky;
        top: calc(100% - 70px);
        width: 100%;
        height: 70px;
        font-size: 1.2em;
        padding: 10px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50% 50% 0 0 / 70% 70% 0 0;
    }


/* 04. FORMS */
    form {
        position: relative;
        padding: 10px;
        font-weight: 700;
    }
    form input, form textarea, form select, .form-btn, div.search input, div.search select {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        outline: 0;
        border: 2px solid #d9d9d9;
        margin-bottom: 40px;
    }
    form select {
        background: var(--white);
        padding: 10px;
    }
    form label, form input, .form-btn, .pseudo-label {
        font-size: 1em;
    }
    form input::placeholder {
        opacity: 0.2;
    }
    form input[type=checkbox] {
        width: initial;
    }
    label.checkmark {
        height: 40px;
    }
    form input.is_error, form textarea.is_error, form select.is_error {
        border: 2px solid var(--orange);
    }    
    .datetimepicker.datetimepicker-inline {
        border: 0;
        margin: 0 auto;
    }
    .datetimepicker.datetimepicker-inline .switch {
	    background-color: var(--orange);
        color: var(--white);
    }
    .datetimepicker.datetimepicker-inline table.table-condensed th.next, .datetimepicker.datetimepicker-inline table.table-condensed th.prev {
        color: var(--orange);
    }
    .datetimepicker.datetimepicker-inline table tr td.today.active {
        background-image: none;
        background-color: var(--dark-blue);
        color: var(--white);
    }
    .datetimepicker.datetimepicker-inline table tr td.disabled, .datetimepicker.datetimepicker-inline table tr td.disabled:hover, .datetimepicker.datetimepicker-inline table tr td span.disabled, .datetimepicker.datetimepicker-inline table tr td span.disabled:hover {
        cursor: not-allowed;
        opacity: 0.3;
    }
    input[type=range] {
        appearance: none;
        -webkit-appearance: none;
        margin: 18px 0;
        width: 100%;
    }
    input[type=range]:focus {
        outline: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        background: var(--blue);
        border-radius: 1.3px;
        border: 0.2px solid var(--blue);
    }
    input[type=range]::-webkit-slider-thumb {
        border: 2px solid var(--black);
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: var(--white);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        margin-top: -14px;
    }
    input[type=range]:focus::-webkit-slider-runnable-track {
        background: var(--blue);
    }
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        background: var(--blue);
        border-radius: 1.3px;
        border: 0.2px solid var(--blue);
    }
    input[type=range]::-moz-range-thumb {
        border: 2px solid var(--black);
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: var(--white);
        cursor: pointer;
    }
    input[type=range]::-ms-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }
    input[type=range]::-ms-fill-lower {
        background: #2a6495;
        border: 0.2px solid var(--blue);
        border-radius: 2.6px;
    }
    input[type=range]::-ms-fill-upper {
        background: var(--blue);
        border: 0.2px solid var(--blue);
        border-radius: 2.6px;
    }
    input[type=range]::-ms-thumb {
        border: 2px solid var(--black);
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: var(--white);
        cursor: pointer;
    }
    input[type=range]:focus::-ms-fill-lower {
        background: var(--blue);
    }
    input[type=range]:focus::-ms-fill-upper {
        background: var(--blue);
    }
    label button.password-toggle {
        background: none;
        border: none;
        outline: none;
        color: var(--white);
    }
    label button.password-toggle.blue {
        color: var(--blue);
    }
    
    .form-errors, .success {
        padding: 10px;
        background: var(--white);
        color: var(--blue);
        border: 2px solid var(--orange);
    }
    button.btn-action {
        cursor: pointer;
        appearance: button;
        -webkit-appearance: button;
        font-size: 1.2em;
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        outline: 0;
        border: 0;
        margin-bottom: 40px;
        background: var(--blue);
        color: var(--white);
    }
    button.btn-action:hover, button.btn-action:focus, button.btn-action:target, button.btn-action:active {
        background: var(--orange);
        color: var(--white);
    }
    form input[type=radio] {
        display: none;
    }
    form input[type=radio] + label {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        aspect-ratio: 1/0.48;
        padding: 10px;
        border-radius: 25px;
        background: var(--white);
        color: var(--blue);
        text-align: center;
    }
    form input[type=radio] + label:focus, form input[type=radio] + label:hover, form input[type=radio] + label:target {
        cursor: pointer;
        box-shadow: inset 0 0 0 8px var(--green), 0 0 0 6px #04C36B50;
        color: var(--green);
    }
    form p {
        font-size: 1.2em;
    }
    form input[type=radio] + label p {
        font-size: 1em;
    }
    form input[type=radio] + label {
        position: relative;
    }
    form input[type=radio] + label figure {
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
    }
    form input[type=radio] + label img {
        height: 40px;
        width: auto;
    }
    form input[type=radio]:checked + label {
        box-shadow: inset 0 0 0 8px var(--green), 0 0 0 6px #04C36B50;
        color: var(--green);
    }
    form select {
        font-size: 1.2em;
        padding: 13px 10px;
    }
    form section {
        padding: 20px;
        border-radius: 25px;
        margin-bottom: 30px;
        background: var(--light-blue);
        border: 2px solid var(--blue);
        box-shadow: 0 5px 3px 5px rgba(0, 0, 0, 0.3);
        color: var(--dark-blue);
    }
    form i.blue {
        color: var(--blue);
    }
    form section.white {
        background: var(--white);
        color: var(--blue);
    }
    form.order-form a {
        color: var(--blue);
    }
    form.order-form input[type=button], form.order-form input[type=submit] {
        background: var(--blue);
        color: var(--white);
        border: 2px solid var(--blue);
    }
    form.order-form input[type=button]:focus,
    form.order-form input[type=button]:hover,
    form.order-form input[type=button]:target,
    form.order-form input[type=submit]:focus,
    form.order-form input[type=submit]:hover,
    form.order-form input[type=submit]:target {
        background: var(--white);
        color: var(--blue);
    }
    form input[type=button], form input[type=submit] {
        margin-bottom: 0;
    }
    #delivery-table {
        width: 100%;
    }
    .datetimepicker.datetimepicker-inline {
        width: 100%;
    }

    .datetimepicker.datetimepicker-inline table.table-condensed th.next, .datetimepicker.datetimepicker-inline table.table-condensed th.prev {
	    color: var(--blue);
    }
    .datetimepicker.datetimepicker-inline .switch {
        background-color: var(--blue);
        color: var(--white);
    }
    .datetimepicker.datetimepicker-inline .switch:focus, .datetimepicker.datetimepicker-inline .switch:hover, .datetimepicker.datetimepicker-inline .switch:target {
        background: var(--white);
        color: var(--blue);
    }
    .datetimepicker thead tr:first-child th:hover, .datetimepicker tfoot th:hover {
        background: transparent;
        color: var(--white);
    }
    .datetimepicker.datetimepicker-inline .switch:hover {
        background: var(--orange);
        color: var(--white);
    }
    .datetimepicker.datetimepicker-inline table.table-condensed th.next:hover, .datetimepicker.datetimepicker-inline table.table-condensed th.prev:hover {
        color: var(--orange);
    }



/* 05. BUTTONS */
    a.center, figure.center {
        margin: 0 auto;
    }
    a.round, a.round button {
        border-radius: 50%;
    }
    a.round, a.pill {
        display: block;
        position: relative;
        overflow: hidden;
        background: var(--white);
    }
    a.round { 
        width: 220px;
        height: 220px;
        padding: 20px;
        outline: solid 1.75em rgba(255, 255, 255, 0.2);
    }
    a.round.small {
        width: 100px;
        height: 100px;
        padding: 10px;
        outline: none;
    }
    a.pill {
        width: 220px;
        height: 80px;
        padding: 10px 40px;
        border-radius: 40px;
        font-size: 1.4em;
    }
    a.round button, a.pill button, a.round.small button {
        position: absolute;
        width: 80%;
        height: 80%;
        padding: 30px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid var(--light-blue);
        background: #d7d9e0;
        background: linear-gradient(0deg, rgba(215,217,225,1) 0%, rgba(241,243,245,1) 100%);
    }
    a.round.small button {
        padding: 15px;
    }
    a.phone {
        background: var(--green);
    }
    a.chat {
        background: var(--orange);
    }
    a.pill button {
        width: 90%;
        padding: 10px 0px;
        border-radius: 40px;
        color: var(--dark-blue);
    }
    a.round button img {
        position: relative;
        width: 100%;
        height: auto;
    }
    a.round.small img {
        position: absolute;
        width: 60%;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    a.round:hover, a.round:target, a.round:focus {
        background: linear-gradient(0deg, rgba(215,217,225,1) 0%, rgba(241,243,245,1) 100%);
        outline: solid 1.75em rgba(255, 255, 255, 0.5);
    }
    a.round.small:hover, a.round.small:target, a.round.small:focus {
        background: var(--blue);
        outline: none;
    }
    a.pill:hover, a.pill:target, a.pill:focus {
        background: linear-gradient(0deg, rgba(215,217,225,1) 0%, rgba(241,243,245,1) 100%);
    }
    a.round:hover button, a.round:target button, a.round:focus button, a.pill:hover button, a.pill:target button, a.pill:focus button {
        border: 2px solid var(--white);
        background: var(--white);
    }
    a.round.small:hover button, a.round.small:target button, a.round.small:focus button {
        border: 2px solid var(--white);
        background: var(--blue);
        outline: none;
    }
    .add-btn, .delete-btn {
        outline: none;
        background: none;
        border: 0;
        color: var(--dark-blue);
        font-weight: 900;
        padding: 0;
    }
    .add-btn:hover, .add-btn:active, .delete-btn:hover, .delete-btn:active {
        color: var(--orange);
    }

    @keyframes item-hover {
        from {
            background: var(--blue);
            color: var(--white);
        }

        to {
            background: var(--white);
            color: var(--blue);
        }
    }
    a.menu-item {
        display: block;
        text-align: center;
        font-weight: 700;
        font-size: 1.4em;
        background: var(--blue);
        color: var(--white);
        padding: 20px 40px;
        border-bottom: 2px solid var(--white);
        position: relative;
    }
    .row .col-12:first-of-type > a.menu-item {
        border-top: 2px solid var(--white);
    }
    a.menu-item:hover, a.menu-item:focus, a.menu-item:target {
        background: var(--white);
        color: var(--blue);
        text-decoration: none;
        animation: item-hover 0.35s ease-in;
    }


/* 06. ORDERS */
    .order-entry {
        position: relative;
        display: block;
        background: var(--white);
        width: 100%;
        margin-bottom: 20px;
        padding: 20px;
    }
    div.grey-bg .order-entry:hover, div.grey-bg .order-entry:focus, div.grey-bg .order-entry:target {
        color: var(--blue);
        text-decoration: none;
    }
    .order-entry .item, .order-entry .status-title {
        font-weight: 700;
        font-size: 1.4em;
    }
    .order-entry .col-1, .info-link {
        position: relative;
    }
    .order-entry .direction, .direction {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }


/* 07. PFP */
    figure.pfp {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
    }
    figure.pfp img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
    }
    figure.pfp.small {
        width: 60px;
        height: 60px;
    }
    figure.pfp.large {
        width: 150px;
        height: 150px;
    }


/* 08. CHATS */
    .grey-bg.chats {
        margin-bottom: 180px;
    }
    .chat-message {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 180px;
        padding: 10px;
        background: var(--light-blue);
    }
    .chat-message textarea {
        margin-bottom: 0;
        resize: none;
    }


/* 09. USERS */
    details > summary {
        font-size: 1.2em;
        font-weight: 700;
    }


/* 10. FACILITIES */
    div.facility {
        background: var(--white);
        border: 2px solid var(--blue);
        padding: 10px;
    }
    div.facility .col-6 {
        text-align: center;
    }
    div.facility.edit {
        text-align: center;
    }
    div.facility.edit i.fa-chevron-right {
        margin-top: 8px;
    }
    span.orders-count {
        position: relative;
        display: inline-block;
        background: var(--orange);
        color: var(--blue);
        padding: 4px;
        border-radius: 4px;
        font-size: 0.6em;
        left: 0;
        top: -10px;
        width: 20px;
        height: 20px;
    }
    span.orders-count.large {
        width: 30px;
    }
    span.orders-count p {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    a.menu-item:hover span.orders-count, a.menu-item:focus span.orders-count, a.menu-item:target span.orders-count {
        background: var(--blue);
        color: var(--white);
    }
    .receipt {
        background: var(--white);
        color: var(--blue);
        padding: 20px;
        border-radius: 20px;
    }
    .receipt .row {
        padding: 10px;
        border-bottom: 2px solid var(--blue);
    }
    .receipt .row:last-of-type {
        padding: 10px;
        border-bottom: 0;
    }
    .invite {
        width: 100%;
        height: auto;
        aspect-ratio: 1/0.5;
        padding: 10px;
        text-align: center;
        background: var(--white);
        border: 2px solid var(--dark-blue);
    }
    .invite p {
        margin-top: 10px;
    }
    .staff-form {
        display: none;
    }
    .staff-form.visible {
        display: block;
    }
    .btn.form-btn i {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    .btn.form-btn i.fa-xmark {
        transform: none;
    }
    .user-type {
        text-align: center;
    }
    .user-type input[type=radio]+label {
        aspect-ratio: 1/.8;
    }


/* 11. CONFIRM MODAL */
    div#confirmation {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background: #4e729155;
        color: var(--blue);
        display: none;
    }
    div#confirmation .container {
        position: fixed;
        z-index: 1001;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        background: var(--white);
        border: 2px solid var(--blue);
        padding: 20px;
    }
    div#confirmation button {
        border: 2px solid var(--blue);
    }
    div#confirmation button:hover {
        border: 2px solid var(--blue);
        background: var(--blue);
        color: var(--white);
    }
    div#confirmation textarea, div#confirmation input {
        padding: 10px;
    }
    div#confirmation #errors.errors {
        border: 2px solid var(--blue);
        padding: 10px;
    }
    .btn-submit {
        background: var(--dark-blue);
        color: var(--white);
    }
    .btn-submit:hover, .btn-submit:focus, .btn-submit:target, .btn-submit:active {
        background: var(--white);
        color: var(--blue);
    }


/* 12. MAP */
    div.map {
        width: 100%; 
        height: 100%;
    }

    /* Marker tweaks */
    .mapboxgl-popup {
        padding: 0;
    }
    .mapboxgl-popup-content {
        padding: 0;
        width: 300px;
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);
        color: var(--blue);
        font-size: 1.1em;
    }
    .mapboxgl-popup-content p {
        margin-bottom: 0;
    }
    .mapboxgl-popup-close-button {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        font-size: 2em;
        background: var(--blue);
        color: var(--white);
        border-radius: 0 0 0 20px;
    }

    .mapboxgl-popup-close-button:hover {
        background: var(--orange);
    }

    .mapboxgl-popup-content .owner-name, .mapboxgl-popup-content .business-name {
        font-weight: 700;
    }

    .mapboxgl-popup-content .owner-name {
        font-size: 1.42em;
    }

    .mapboxgl-popup-content .business-name {
        font-size: 1.5em;
    }

    .mapboxgl-popup-content div {
        padding: 8px 10px;
    }

    .mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
        margin-top: 15px;
    }

    .mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
        border-bottom-color: var(--blue);
    }

    .marker {
        border: none;
        cursor: pointer;
        height: 100px;
        width: 100px;
        background-image: url('/img/graphics/map-marker.png');
        background-size: cover;
    }

    .mapboxgl-popup {
        padding-bottom: 50px;
        max-width: 300px !important;
    }

    .mapboxgl-popup-content div.link {
        padding: 0;
    }

    .mapboxgl-popup-content .link a {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--blue);
        color: var(--white);
        font-size: 1.4em;
        border: 2px solid var(--white);
        padding: 10px;
    }    
    .mapboxgl-popup-content .link a:hover, .mapboxgl-popup-content .link a:focus, .mapboxgl-popup-content .link a:target {
        text-decoration: none;
        background: var(--light-blue);
    }
    .mapboxgl-popup-content a.round.small.chat {
        background: var(--orange);
    }    
    .mapboxgl-popup-content a.chat, .mapboxgl-popup-content a.phone {
        width: 50px;
        height: 50px;
    }
    span.rating {
        font-size: 1.2em;
    }
    .star {
        color: var(--light-blue);
    }    
    .star.active {
        color: var(--orange);
    }
    #loading-ui {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--blue);
        color: var(--white);
        z-index: 999;
        text-align: center;
    }
    #loading-ui p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3em;
    }
    #loading-ui p i {
        color: var(--white);
        animation: loading 2s linear infinite;
        font-size: 4em;
    }
    #loading-ui.visible {
        display: block;
    }
    @keyframes loading {
        100% {
            transform: rotate(360deg);
        }
    }


/* 13. INVOICES */
    #invoice-items label {
        display: none;
    }
    .invoice {
        margin-bottom: 20px;
        border-bottom: 2px solid var(--blue);
        padding-bottom: 20px;
    }
    .invoice-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(0,0,0,0.25);
    }


/* 14. QUERIES */
    /* a. Phones and Lower Res Tablets */
        @media only screen and (max-width: 600px) {
            .mobile-hide { display: none; }
            .mobile-only { display: block !important; }
            .receipt .row:first-of-type {
                display: none;
            }
            form input[type=radio]+label {
                aspect-ratio: 1/.2;
            }
            #pseudo-labels {
                display: none;
            }
            #invoice-items label {
                display: block;
            }
        }

    /* b. Tablet */
        @media only screen and (min-width: 601px) and (max-width: 1024px) {
            .tablet-only { display: block !important; }
        }

    /* c. iPad Pro */
        @media only screen and (width: 1024px) and (height: 1366px) and (orientation: portrait) {
        }