html, body {
    border: 0;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    background-color: #ECECEC;
    touch-action: manipulation;
}

body {
    font-family: 'latoregular';
    font-size: 2vmin;
    position: relative;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}


*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    width: 100%;
    height: 100%;
    background-color: #ECECEC;
}


.word-wrap {
    word-wrap: break-word; /* IE */
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.fade-in {
    animation: fade-in 1s;
    -moz-animation: fade-in 1s; /* Firefox */
    -webkit-animation: fade-in 1s; /* Safari and Chrome */
    -o-animation: fade-in 1s; /* Opera */
}

    .fade-in.ng-enter {
        display: none;
    }

        .fade-in.ng-enter.ng-enter-active {
            display: block;
        }

.section-content {
    position: absolute;
    top: 3vh;
    right: 2vw;
    bottom: 3vw;
    left: 2vw;
}

.no-cursor {
    cursor: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.loading-container {
    position: fixed;
    top: 7px;
    left: 50%;
    margin-left: -200px;
    width: 400px;
    text-align: center;
    color: black;
    z-index: 1002;
}

    .loading-container span {
        background-color: #F9EDBE;
        line-height: 20px;
        color: black;
        padding: 5px 35px 5px 35px;
        border: 1px solid #F0C36D;
        border-radius: 2px;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);
    }

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1002;
    background: rgba(255, 255, 255, 0.5);
}

.blackout {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1002;
    background-color: white;
}

.training-mode-banner {
    position: fixed;
    width: 100%;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    max-height: 1vh;
    font-size: 1vh;
}

    .training-mode-banner div {
        background-color: yellow;
    }

    .training-mode-banner.top {
        bottom: 0;
    }

    .training-mode-banner.bottom {
        top: 0;
    }

    .training-mode-banner.middle {
        top: 40vh;
    }

    .training-mode-banner div span:after {
        content: 'TRAINING MODE -- TRAINING MODE -- TRAINING MODE -- TRAINING MODE -- TRAINING MODE -- TRAINING MODE -- TRAINING MODE -- TRAINING MODE -- TRAINING MODE -- TRAINING MODE -- TRAINING MODE';
    }

.training-mode-text {
    position: fixed;
    top: 1vh;
    right: 0;
    left: 0;
    width: 30vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: yellow;
    font-size: 5vmin;
    font-family: 'latolight';
}


/*#region header*/
header {
    position: fixed;
    top: 0;
    height: 10.5vh;
    width: 100vw;
}

.classic-background-color {
    background-color: #3A3F45;
}

.rebrand-background-color {
    background-color: #404040;
}

    header .logo-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 25%;
    }

        header .logo-wrapper .classic-logo {
            position: absolute;
            top: 20%;
            bottom: 20%;
            left: 30px;
            right: 0;
            background-image: url('images/titan-logo.svg');
            background-repeat: no-repeat;
        }

        header .logo-wrapper .rebrand-logo {
            position: absolute;
            top: 10%;
            bottom: 20%;
            left: 5%;
            right: 0;
            background-image: url('images/linq-school-nutrition-logo.svg');
            background-repeat: no-repeat;
            background-size: contain;
        }

        header .logo-wrapper span {
            position: relative;
            top: 50%;
            color: #969798;
            line-height: 250%;
            left: 5%;
        }

    header .district-name-wrapper {
        position: absolute;
        top: 0;
        left: 25%;
        height: 100%;
        padding-left: 2vw;
    }

        header .district-name-wrapper div {
            position: relative;
            top: 50%;
            color: #969798;
            line-height: 250%;
        }

        header .district-name-wrapper.left {
            left: 0;
        }

    header .header-icons-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        height: 55%;
        width: 25%;
    }

        header .header-icons-wrapper > div {
            position: relative;
            height: 100%;
            text-align: right;
        }

        header .header-icons-wrapper .connected {
            position: relative;
            display: inline-block;
            height: 60%;
            width: 15%;
            margin-top: 4%;
            margin-right: 1px;
            background: url('images/pos-connected.svg') no-repeat bottom right;
            background-size: contain;
        }

        header .header-icons-wrapper .disconnected {
            position: relative;
            display: inline-block;
            height: 60%;
            width: 15%;
            margin-top: 4%;
            margin-right: 1px;
            background: url('images/pos-disconnected.svg') no-repeat bottom right;
            background-size: contain;
        }

        header .header-icons-wrapper .badge {
            position: absolute;
            right: -5px;
            top: -2px;
            border-radius: 6px;
            background-color: red;
            text-align: center;
            color: #ffffff;
            font-size: 1.5vmin;
            line-height: 2vh;
            display: inline-block;
            padding-left: 5px;
            padding-right: 5px;
        }

        .notCached {
            top: 15px;
            background-color: #f9a64a !important;
        }

        header .header-icons-wrapper .back {
            display: inline-block;
            height: 60%;
            width: 10%;
            margin-top: 4%;
            margin-right: 20px;
            background: url('images/back-button.svg') no-repeat bottom right;
            background-size: contain;
            cursor: pointer;
        }

        header .header-icons-wrapper .health-log-trigger {
            display: inline-block;
            height: 63%;
            width: 12%;
            margin-top: 5%;
            margin-right: 10px;
            background: url(images/contact-support.svg) no-repeat bottom right;
            background-size: contain;
            cursor: pointer;
        }

    header .header-text-wrapper {
        position: absolute;
        bottom: 5px;
        right: 0;
        height: 35%;
        width: 100%;
        color: #969798;
        font-size: 1.7vmin;
        line-height: 180%;
    }

        header .header-text-wrapper > div {
            position: relative;
            height: 100%;
            width: 100%;
            text-align: right;
        }

        header .header-text-wrapper .terminal {
            display: inline-block;
            border-right: 1px solid #969798;
            padding-right: 15px;
        }

            header .header-text-wrapper .terminal span {
                color: orange;
            }

        header .header-text-wrapper .date-time {
            display: inline-block;
            padding-left: 10px;
        }

        header .header-text-wrapper .username-icon {
            display: inline-block;
            height: 80%;
            width: 4%;
            background: url('images/logged-in-user.svg') no-repeat bottom right;
            background-size: contain;
        }

        header .header-text-wrapper .username {
            display: inline-block;
            /*min-width: 8%;*/
            padding-left: 10px;
            margin-right: 20px;
        }
/*#endregion header*/

.keyboard-content-wrapper {
    position: fixed;
    top: 10.5vh;
    bottom: 53.5vh;
    left: 0;
    right: 0;
}

.keyboard-content-menu-content-wrapper {
    position: fixed;
    top: 10.5vh;
    bottom: 53.5vh;
    left: 25vw;
    right: 0;
}

.serving-date {
    padding-left: 10px;
    color: #1CB0CF;
}

/*#region keyboard content left*/
.keyboard-content-menu {
    position: fixed;
    top: 10.5vh;
    bottom: 53.5vh;
    left: 0;
    right: 75vw;
}

    .keyboard-content-menu ul {
        height: 100%;
        width: 100%;
    }

        .keyboard-content-menu ul li {
            padding: 0;
            margin: 0;
            height: 16%;
            width: 100%;
            color: white;
            border-bottom: 1px solid #2D3133;
            cursor: pointer;
            display: table;
        }

    .keyboard-content-menu.disabled ul li {
        cursor: default;
    }

    .keyboard-content-menu ul li span:first-of-type {
        display: table-cell;
        vertical-align: middle;
        height: 100%;
        width: 20%;
        padding-right: 10px;
        margin: 0;
        -webkit-user-select: none;
        user-select: none;
    }

    .keyboard-content-menu ul li.disabled span:first-of-type {
        cursor: not-allowed;
    }

    .keyboard-content-menu ul li span.sessions {
        background: url('images/sessions.svg') no-repeat center;
        background-size: contain;
    }

    .keyboard-content-menu ul li span.recall-transaction {
        background: url('images/recall-transaction.svg') no-repeat center;
        background-size: contain;
    }

    .keyboard-content-menu ul li span.change-date {
        background: url('images/change-date.svg') no-repeat center;
        background-size: contain;
    }

    .keyboard-content-menu ul li span.credit-account {
        background: url('images/credit-account.svg') no-repeat center;
        background-size: contain;
    }

    .keyboard-content-menu ul li span.statistics {
        background: url('images/statistics.svg') no-repeat center;
        background-size: contain;
    }

    .keyboard-content-menu ul li span.settings {
        background: url('images/settings.svg') no-repeat center;
        background-size: contain;
    }

    .keyboard-content-menu ul li span.delete {
        background: url('images/delete-serving.svg') no-repeat center;
        background-size: contain;
    }

    .keyboard-content-menu ul li.selected span:first-of-type {
        background-color: #DE8033;
    }

    .keyboard-content-menu ul li a {
        display: table-cell;
        vertical-align: middle;
        height: 100%;
        padding-left: 10px;
        -webkit-user-select: none;
        user-select: none;
        text-decoration: none;
        color: #fff;
    }

    .keyboard-content-menu ul li.disabled a {
        color: #C8CBCE;
        cursor: not-allowed;
    }

    .keyboard-content-menu.disabled ul li a {
        color: #C8CBCE;
    }

    .keyboard-content-menu ul li.selected a {
        background-color: #2D3133;
    }

    .keyboard-content-menu ul li.header {
        color: #898F94;
        height: 20%;
    }

        .keyboard-content-menu ul li.header.highlight {
            background-color: #2DBBA6;
            color: #fff;
        }

            .keyboard-content-menu ul li.header.highlight.disabled {
                background-color: #2DBBA6;
                cursor: default;
            }
/*#endregion keyboard content left*/

.number-pad-content-wrapper {
    position: fixed;
    bottom: 37vh;
    height: 52.5vh;
    width: 60vw;
}

    .number-pad-content-wrapper.no-footer {
        height: 89.5vh;
        bottom: 0;
    }

.form-input {
    margin-bottom: 10px;
}

.form-button {
    text-align: right;
}

.form-label {
    position: relative;
    color: #94999E;
    margin-bottom: 10px;
    font-family: 'latoregular';
}

select {
    width: 100%;
    font-size: 2.5vmin;
    line-height: 250%;
}

/*#region text-box*/
.text-box {
    position: relative;
    display: block;
    border: 1px solid #C8CBCE;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #fff;
    color: #000;
    font-size: 2.5vmin;
    cursor: pointer;
    line-height: 5.8vh;
    height: 6vh;
    padding: 0;
    margin: 0;
    padding-left: 5.3vw;
    outline: none;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

    .text-box.cash-count-denomination {
        display: table-cell;
        border-right: 1px solid #F3F3F3;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        background-color: #F3F3F3;
        color: #94999E;
        width: 50%;
        padding: 0;
        margin: 0;
        text-align: center;
        font-size: 2vmin;
        line-height: 300%;
    }

    .text-box.cash-count-input {
        display: table-cell;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        color: #94999E;
        width: 50%;
        padding: 0;
        margin: 0;
        text-align: center;
        font-size: 2vmin;
        line-height: 300%;
    }


    .text-box.tender-box {
        display: table-cell;
        color: #94999E;
        padding: 0;
        margin: 0;
        font-size: 2vmin;
        line-height: 300%;
        cursor: default;
    }

        .text-box.tender-box.tender-label {
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            background-color: #F3F3F3;
            width: 50%;
            text-align: right;
            padding-right: 5px;
        }

        .text-box.tender-box.tender-input {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            width: 50%;
            text-align: center;
        }

        .text-box.tender-box.tender-cash {
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            width: 50%;
            text-align: center;
        }

        .text-box.tender-box.tender-check {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            width: 50%;
            text-align: center;
        }

            .text-box.tender-box.tender-cash.selected, .text-box.tender-box.tender-check.selected {
                color: white;
                background-color: #1DB0D1;
            }

    .text-box.green {
        background-color: #2DBBA6;
        color: #fff;
    }

    .text-box span {
        color: #C8CBCE;
        padding: 0;
        margin: 0;
    }

        .text-box span.icon {
            position: absolute;
            left: 0;
            height: 100%;
            width: 4.5vw;
            padding: 0;
            margin: 0;
            background-color: #C8CBCE;
            color: #fff;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
            border: 1px solid #C8CBCE;
            box-sizing: border-box;
        }

    .text-box.focus span.icon {
        border-left: 1px solid #1CB0CF;
        border-bottom: 1px solid #1CB0CF;
        border-top: 1px solid #1CB0CF;
        box-sizing: border-box;
    }

    .text-box span.icon.starting-cash {
        background: #C8CBCE url('images/starting-cash.svg') no-repeat center;
        background-size: contain;
    }

    .text-box span.icon.username {
        background: #C8CBCE url('images/username.svg') no-repeat center;
        background-size: contain;
    }

    .text-box span.icon.password {
        background: #C8CBCE url('images/password.svg') no-repeat center;
        background-size: contain;
    }


    .text-box.focus {
        outline: none;
        border: 1px solid #1CB0CF;
        box-shadow: inset 0 0 0 1px #1CB0CF;
    }

    .text-box.error {
        outline: none;
        box-shadow: 0 0 3px 2px red;
    }
/*#endregion text-box*/

/*#region button*/
button {
    display: inline-block;
    border: 1px solid #278c7e;
    border-radius: 4px;
    background-color: #1fbba6;
    color: #fff;
    font-size: 2vh;
    height: 6vh;
    width: 15.5vw;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

    button.popeye-modal {
        height: 7.2vh;
    }

    button:active {
        background-color: #05ab95;
    }

    button:disabled {
        background-color: #30E8D0;
        border-color: #30E8D0;
        cursor: default;
    }

    button:focus {
        outline: none;
    }

    button.gray {
        background-color: #A3A7AB;
    }

    button span {
        line-height: 2.5vh;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
        width: 100%;
    }

.button-padding {
    padding-left: 3px;
    padding-right: 3px;
}

.disabled-button {
    cursor: not-allowed !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5) inset;
    /*opacity: 0.9;
	box-sizing: border-box;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5) inset;*/
}

    .disabled-button a {
        cursor: not-allowed !important;
    }
/*#endregion button*/

/*#region pager*/
.pager {
    position: relative;
    text-align: right;
}

    .pager div {
        float: left;
        width: 3.2vw;
        height: 4.4vh;
        cursor: pointer;
    }

    .pager .previous {
        background: url('images/backward.svg') no-repeat right;
        margin-right: 15px;
    }

        .pager .previous.disabled {
            background: url('images/backward-disabled.png') no-repeat right;
            background-size: contain;
            cursor: default;
        }

    .pager .next {
        background: url('images/forward.svg') no-repeat left;
    }

        .pager .next.disabled {
            background: url('images/forward-disabled.png') no-repeat left;
            background-size: contain;
            cursor: default;
        }
/*#endregion pager*/

/*#region login screen*/
.login-form-logo-wrapper {
    position: relative;
    width: 45%;
    height: 100%;
    float: left;
}

.login-form-logo {
    width: 80%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 0 1px 1px #C8CBCE;
    text-align: center;
}

    .login-form-logo img {
        width: auto;
        height: 87%;
        vertical-align: middle;
    }

.login-form {
    float: left;
    width: 50%;
}

    .login-form.setup {
        float: none;
        margin: auto;
    }

/*#endregion login screen*/

/*#region open register screen*/
.open-register-form {
    width: 55%;
}

.select-location {
}

    .select-location .grid .button {
        float: left;
        height: 10vh;
        width: 25%;
        text-align: center;
    }

        .select-location .grid .button button {
            height: 7.2vh;
            width: 13.5vw;
            color: #727273;
            line-height: 1;
            background-color: #E3E7EA;
            margin: auto;
        }

        .select-location .grid .button:nth-child(4n+1) {
            text-align: left;
        }

        .select-location .grid .button:nth-child(4n+4) {
            text-align: right;
        }
/*#endregion open register screenn*/

/*#region search screen*/
.student-search-bar {
    position: relative;
    height: 25%;
    background-color: #3A3F45;
}

.student-search-bar-clear {
    position: relative;
    top: 15%;
    width: 7vw;
    height: 6vh;
    margin-left: 2vw;
    background-color: #f9a64a;
    color: white;
    float: left;
}

.student-search-bar-no-id {
    position: relative;
    top: 15%;
    width: 10vw;
    height: 6vh;
    margin-left: 1vw;
    background-color: #f9a64a;
    color: white;
    float: left;
}

    .student-search-bar-no-id:active {
        background-color: #df7f26
    }

    .student-search-input {
    position: relative;
    top: 15%;
    width: 30vw;
    margin-left: 2vw;
    float: left;
}

.student-search-checkbox-wrapper {
    position: relative;
    height: 100%;
    margin-left: 2vw;
    float: left;
    display: table;
}

    .student-search-checkbox-wrapper .checkbox {
        display: table-cell;
        vertical-align: middle;
        width: 2vw;
        cursor: pointer;
        background: url('images/check-box.png') no-repeat right;
        background-size: contain;
    }

        .student-search-checkbox-wrapper .checkbox.checked {
            background: url('images/check-box-checked.png') no-repeat right;
            background-size: contain;
        }

    .student-search-checkbox-wrapper .checkbox-text {
        display: table-cell;
        vertical-align: middle;
        padding-left: 8px;
        cursor: pointer;
        color: #fff;
    }

.student-search-pager {
    position: relative;
    top: 25%;
    margin-right: 2vw;
    float: right;
}
/*#endregion search screen*/

/*#region serve-mode-footer*/
.serve-mode-footer {
    position: fixed;
    bottom: 0;
    height: 37vh;
    width: 100vw;
    background-color: #4C535A;
}

    .serve-mode-footer .left {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 60%;
    }

    .serve-mode-footer .right {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 40%;
    }

.serve-mode-buttons-wrapper {
    width: 35vw;
    height: 100%;
    display: table;
    margin: auto;
}

.serve-mode-buttons {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

    .serve-mode-buttons table {
        width: 100%;
        height: 18vh;
        border-spacing: 0;
    }

        .serve-mode-buttons table tbody {
            margin: 0;
            padding: 0;
            border-spacing: 0;
        }

        .serve-mode-buttons table tr {
            height: 50%;
            margin-top: 0;
            padding-top: 0;
        }

        .serve-mode-buttons table td {
            width: 33%;
            padding: 3px;
        }

        .serve-mode-buttons table tr:first-child td {
            margin-top: 0;
            padding-top: 0;
        }

        .serve-mode-buttons table tr:last-child td {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .serve-mode-buttons table td button {
            width: 100%;
            height: 100%;
            padding: 0;
        }

            .serve-mode-buttons table td button.orange {
                background-color: #f9a64a;
            }

    .serve-mode-buttons:active table td button.orange {
        background-color: #dF7f26;
    }

            .serve-mode-buttons table td button.paused {
                background-color: #f9a64a;
            }

            .serve-mode-buttons table td button.off {
                background-color: red;
            }


 .change-serve-mode {
    width: 100%;
    height: 50%;
    margin: auto;
}

    .change-serve-mode td {
        width: 33.33%;
        padding: 1%;
    }

        .change-serve-mode td button {
            width: 100%;
            height: 100%;
            line-height: 300%;
            font-size: 2vmin;
            color: #727273;
            background-color: #E3E7EA;
            padding: 0;
        }

            .change-serve-mode td button.selected {
                outline: none;
                color: #fff;
                background-color: #1DB0D1;
            }
/*#endregion serve-mode-footer*/

/*#region search-transaction-screen*/
.transaction-search-input {
    position: relative;
    top: 15%;
    width: 20vw;
    margin-left: 2vw;
    float: left;
}

.transaction-list, .transaction-list table {
    width: 100%;
}

    .transaction-list tbody:nth-of-type(odd) {
        background: #F9F9F9;
    }

.transaction-list-checkbox-wrapper {
    height: 3vh;
}

    .transaction-list-checkbox-wrapper .checkbox {
        height: 3vh;
        width: 2vw;
        cursor: pointer;
        background: url('images/check-box.png') no-repeat right;
        background-size: contain;
    }

        .transaction-list-checkbox-wrapper .checkbox.checked {
            background: url('images/check-box-checked.png') no-repeat right;
            background-size: contain;
        }
/*#endregion search-transaction-screen*/

/*#region cash count screen*/
.cash-count-section {
    background-color: #fff;
    border: 1px solid #C8CBCE;
    border-radius: 4px;
    padding: 20px;
    position: relative;
}

.cash-count-buttons {
    position: absolute;
    bottom: 75px;
    right: -72%;
}

    .cash-count-buttons button {
        height: 7vh;
        width: 10vw;
    }

.cash-count-row {
    margin-bottom: 10px;
}

    .cash-count-row table {
        width: 100%;
        padding-right: 10px;
        font-size: 2.5vmin;
        color: #94999E;
        line-height: 150%;
    }

        .cash-count-row table td {
            width: 50%;
            text-align: right;
        }

    .cash-count-row .left {
        float: left;
        width: 49%;
        display: table;
    }

    .cash-count-row .right {
        float: right;
        width: 49%;
        display: table;
    }

.modalTable table {
    width: 100%;
    margin: 0;
    padding: 0;
    border-spacing: 0;
    line-height: 250%;
    border-radius: 4px;
}

.modalTable table thead {
    background-color: #DDDDDD;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    text-align: left;
    color: #747474;
}

    .modalTable table th {
        padding-left: 10px;
        padding-right: 10px;
    }

        .modalTable table th:first-child {
            border-top-left-radius: 4px;
        }

        .modalTable table th:last-child {
            border-top-right-radius: 4px;
        }

    .modalTable table td {
        border: 1px solid #DDDDDD;
        padding-left: 10px;
        padding-right: 10px;
        color: #333
    }

.modalTable table tr:nth-child(even) {
    background: #F9F9F9;
}
/*#endregion cash-count-screen*/

/*#region select sessions screen*/
.serving-sessions {
    position: relative;
    height: 100%;
}

    .serving-sessions .left {
        float: left;
        width: 48%;
        height: 100%;
    }

    .serving-sessions .right {
        float: right;
        width: 48%;
        height: 100%;
    }

    .serving-sessions ul {
        height: 100%;
        width: 100%;
    }

        .serving-sessions ul li {
            background-color: #fff;
            border-left: 1px solid #E3E3E3;
            border-right: 1px solid #E3E3E3;
            border-bottom: 1px solid #E3E3E3;
            height: 30%;
            width: 100%;
            display: table;
            cursor: pointer;
            margin-bottom: 2%;
        }

            .serving-sessions ul li a {
                display: table-cell;
                vertical-align: middle;
                height: 100%;
                padding-left: 10px;
                -webkit-user-select: none;
                user-select: none;
            }

            .serving-sessions ul li:first-child {
                border-top: 1px solid #E3E3E3;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }

            .serving-sessions ul li:last-child {
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
            }
/*#endregion select sessions screen*/

/*#region serve screen*/
.serve-cart-wrapper {
    margin-top: 3%;
    height: 55%;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
}

.serve-cart {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}



    .serve-cart .table {
        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        height: 85%;
        border-top-left-radius: 4px;
    }

        .serve-cart .table table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            border: 1px solid #EAEAEA;
        }

            .serve-cart .table table tr {
                width: 100%;
                height: 20%;
            }

                .serve-cart .table table tr:nth-child(even) {
                    background: #F9F9F9;
                }

                .serve-cart .table table tr td {
                    border: 1px solid #EAEAEA;
                }

                    .serve-cart .table table tr td.quantity {
                        width: 10%;
                        text-align: center;
                    }

                    .serve-cart .table table tr td.item {
                        width: 60%;
                        padding-left: 10px;
                    }

                    .serve-cart .table table tr td.price {
                        width: 20%;
                        border-right: 0;
                        padding-left: 10px;
                    }

                    .serve-cart .table table tr td.delete {
                        width: 10%;
                        border-left: 0;
                    }

                        .serve-cart .table table tr td.delete .delete-icon {
                            height: 100%;
                            width: 3vw;
                            background: url('images/delete-serving.svg') no-repeat center;
                            background-size: contain;
                        }

    .serve-cart .total {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 88%;
        height: 15%;
        text-align: right;
        line-height: 200%;
    }

    .serve-cart .scroll {
        position: absolute;
        top: 0;
        left: 90%;
        width: 10%;
        height: 100%;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        background-color: #E2E2E2;
    }

        .serve-cart .scroll .up {
            position: absolute;
            top: 10px;
            width: 100%;
            height: 20%;
            background: url('images/up-arrow-serving.svg') no-repeat center;
            background-size: 30%;
        }

        .serve-cart .scroll .down {
            position: absolute;
            bottom: 10px;
            width: 100%;
            height: 20%;
            background: url('images/down-arrow-serving.svg') no-repeat center;
            background-size: 30%;
        }

.serve-button-pad {
    position: fixed;
    top: 10.5vh;
    bottom: 37vh;
    right: 0;
    height: 52.5vh;
    width: 40vw;
}

    .serve-button-pad .key {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 25%;
        background-color: #4C535A;
    }

        .serve-button-pad .key.credit-card {
            background-color: #f9a64a;
        }

        .serve-button-pad .key.earned {
            left: 50%;
            background-color: #f9a64a;
        }

        .serve-button-pad .key.account {
            top: 25%;
            background-color: #f9a64a;
        }

        .serve-button-pad .key.cash {
            top: 25%;
            left: 50%;
            background-color: #f9a64a;
        }

        .serve-button-pad .key.void {
            top: 50%;
            width: 25%;
            background-color: #5f6871;
        }

        .serve-button-pad .key.total {
            top: 50%;
            left: 25%;
            width: 75%;
            background-color: #1fbba6;
        }

        .serve-button-pad .key a {
            cursor: pointer;
            display: block;
            text-align: center;
            color: #fff;
            font-family: 'latolight';
            font-size: 3.5vmin;
            height: 100%;
            border-left: 1px solid #4b5259;
            border-bottom: 1px solid #4b5259;
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;
        }

            .serve-button-pad .key a > div {
                height: 100%;
                width: 100%;
                display: table;
            }

                .serve-button-pad .key a > div > div {
                    display: table-cell;
                    vertical-align: middle;
                }

    .serve-button-pad .page-navigation {
        position: fixed;
        width: 40vw;
        bottom: 37vh;
        height: 12vh;
        border: 1px solid #2B3237;
        border-bottom: 0;
        font-family: 'latolight';
        font-size: 3.5vmin;
        line-height: 350%;
        text-align: center;
        color: #fff;
    }

        .serve-button-pad .page-navigation .left {
            position: absolute;
            left: 0;
            width: 16%;
            height: 100%;
            background: #41484E url('images/serve-button-pad-menu-left.svg') no-repeat center;
            background-size: auto 30%;
        }

        .serve-button-pad .page-navigation .right {
            position: absolute;
            right: 0;
            width: 16%;
            height: 100%;
            background: #41484E url('images/serve-button-pad-menu-right.svg') no-repeat center;
            background-size: auto 30%;
        }

        .serve-button-pad .page-navigation .category {
            position: absolute;
            left: 16%;
            width: 68%;
            height: 100%;
            background-color: #5F6771;
            text-transform: lowercase;
            overflow: hidden;
        }

            .serve-button-pad .page-navigation .category div {
                float: left;
                width: 50%;
                height: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

                .serve-button-pad .page-navigation .category div.selected {
                    background-color: #1DB0D1;
                }

.pos-layout-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.pos-layout-button {
    position: relative;
    float: left;
    padding: 0;
    margin: 0;
}

    .pos-layout-button .wrapper {
        position: relative;
        width: 90%;
        height: 90%;
        margin-left: 5%;
        border-radius: 4px;
    }

        .pos-layout-button .wrapper > div {
            width: 100%;
            height: 100%;
            display: table;
        }

            .pos-layout-button .wrapper > div > div {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                /*display: -webkit-box;*/
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
/*#endregion serve screen*/

/*#region photo mode screen*/
.photo-mode-content-wrapper {
    position: fixed;
    bottom: 35vh;
    height: 54.5vh;
    width: 100vw;
}

.photo-mode-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.photo-mode-header-label {
    float: left;
}

.photo-mode-header-filter {
    float: right;
    width: 60vw;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #A4A9AE;
}

.photo-mode-student {
    position: relative;
    width: 16.6%;
    height: 24vh;
    float: left;
    padding: 0;
    margin: 0;
}

.photo-mode-footer {
    height: 30vh;
}

.photo-mode-student .click {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.photo-mode-student .wrapper {
    position: relative;
    width: 80%;
    height: 90%;
    margin: 0 auto;
}

    .photo-mode-student .wrapper .picture {
        width: 100%;
        height: 75%;
        margin-bottom: 5px;
        position: relative;
    }

    .photo-mode-student .wrapper .already-served {
        content: url('images/already-served.svg');
        position: absolute;
        top: 2px;
        left: 2px;
        width: 25%;
        max-width: 15%;
    }

    .photo-mode-student .wrapper .picture img {
        max-width: 100%;
        max-height: 100%;
    }

    .photo-mode-student .wrapper .text {
        color: #727272;
        width: 100%;
        overflow: hidden;
        height: 2.3vmin;
        line-height: 2.3vmin;
    }

        .photo-mode-student .wrapper .text.bold {
            font-family: 'latobold';
        }

.filter {
}

    .filter .grid .button {
        float: left;
        height: 10vh;
        width: 25%;
        text-align: center;
    }

        .filter .grid .button button {
            height: 7.2vh;
            width: 13.5vw;
            color: #727273;
            line-height: 1;
            background-color: #E3E7EA;
            margin: auto;
        }

            .filter .grid .button button.selected {
                color: #fff;
                background-color: #1DB0D1;
            }

        .filter .grid .button:nth-child(4n+1) {
            text-align: left;
        }

        .filter .grid .button:nth-child(4n+4) {
            text-align: right;
        }
/*#endregion photo mode screen*/


/*#region tender screen*/
.shared-account-box {
    border: 1px solid #C8CBCE;
    box-sizing: border-box;
    border-radius: 4px;
    color: #727272;
    line-height: 150%;
    padding: 10px;
    margin-bottom: 10px;
}

.shared-account-box-header {
    font-family: 'latobold';
}


.tender-section {
    background-color: #fff;
    border: 1px solid #E7E7E7;
    border-radius: 4px;
    padding: 20px;
    position: relative;
    margin-top: 3%;
    height: 60%;
}

    .tender-section .tender-details {
        position: absolute;
        top: 3%;
        left: 2%;
        width: 47%;
        height: 95%;
    }

    .tender-section .transaction-details {
        position: absolute;
        top: 3%;
        right: 2%;
        width: 47%;
        height: 95%;
    }

    .tender-section .tender-section-detail-wrapper {
        height: 100%;
        width: 100%;
        position: relative;
    }

    .tender-section .row {
        display: table;
        margin-bottom: 10px;
        width: 100%;
    }

    .tender-section .tender-total-buttons {
        position: absolute;
        bottom: 0;
        right: -75%;
    }

        .tender-section .tender-total-buttons button {
            height: 7vh;
            width: 10vw;
        }

.tender-buttons {
    position: fixed;
    top: 63%;
    right: 0;
    height: 13%;
    width: 40vw;
    background-color: #8A8F94;
}

    .tender-buttons .key {
        position: absolute;
        top: 0;
        left: 0;
        width: 25%;
        height: 100%;
    }

        .tender-buttons .key.one {
        }

        .tender-buttons .key.two {
            left: 25%;
        }

        .tender-buttons .key.three {
            left: 50%;
        }

        .tender-buttons .key.four {
            left: 75%;
        }

        .tender-buttons .key a {
            cursor: pointer;
            display: block;
            text-align: center;
            color: #fff;
            line-height: 380%;
            font-family: 'latolight';
            font-size: 3.5vmin;
            height: 100%;
            border-right: 1px solid #4b5259;
            border-bottom: 1px solid #4b5259;
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;
        }

        .tender-buttons .key.four a {
            border-right: 0;
        }
/*#endregion tender screen*/

/*#region student template*/
.student-wrapper-table {
    display: table;
    height: 100%;
    width: 100%;
}

.student-wrapper-cell {
    display: table-cell;
    vertical-align: middle;
    padding-left: 2vw;
    padding-right: 2vw;
}

.student-wrapper {
    position: relative;
    width: 100%;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #E7E7E7;
    box-sizing: border-box;
}

.student {
    position: absolute;
    top: 7%;
    left: 2.5%;
    width: 95%;
    height: 86%;
    color: #727272;
    line-height: 140%;
}

    .student.confirm {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 10vh;
        color: #727272;
        line-height: 140%;
    }

    .student .bold {
        font-family: 'latobold';
    }

    .student .space {
        margin-top: 3%;
    }

    .student .picture {
        width: 20%;
        height: 100%;
        float: left;
        position: relative;
    }

        .student .picture img {
            /* max-width: 90%; */
            max-height: 100%;
        }

    .student .main {
        width: 70%;
        height: 100%;
        float: left;
    }

    .student.confirm .main {
        width: 80%;
    }

    .student .name {
        width: 60%;
        float: left;
    }

    .student .shared-account {
        font-size: 1.8vmin;
        font-style: italic;
    }

    .student .name div {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .student .enrollment {
        width: 40%;
        float: left;
    }

        .student .enrollment div {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .student .enrollment .home-room {
            margin-left: 20px;
        }

        .student .enrollment .change-due {
            color: #E5404B;
        }

    .student .alert-message {
        width: 100%;
        float: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.8vmin;
        font-family: 'latobold';
        color: #00AED0;
        margin-top: 10px;
    }

        .student .alert-message:before {
            content: "";
            background: url('images/alert-icon.svg') no-repeat left bottom;
            width: 3vmin;
            height: 2vmin;
            float: left;
        }

    .student .icons {
        width: 10%;
        height: 80%;
        float: right;
    }

        .student .icons div {
            width: 75%;
            height: 35%;
     
        }

        .student .icons .recall {
            margin-top: 15%;
            background: url('images/last-patron-recall-transaction.svg') no-repeat right;
        }

        .student .icons .confirm {
            margin-top: 15%;
            background: url('images/confirm-alert.svg') no-repeat right;
        }

        .student .icons .allergy-confirm {
            margin-top: 15%;
            background: url('images/last-patron-medical.svg') no-repeat right;
        }

        .student .icons .print {
            margin-top: 20%;
            background: url('images/last-patron-print.svg') no-repeat right;
        }



.confirm-alert-message {
    font-size: 1.8vmin;
    color: #00AED0;
    margin-top: 10px;
}

    .confirm-alert-message:before {
        content: "";
        background: url('images/alert-icon.svg') no-repeat left center;
        width: 3vmin;
        height: 2vmin;
        float: left;
        color: #E5404B;
    }

.confirm-allergy {
    font-size: 1.8vmin;
    color: #E5404B;
    margin-top: 10px;
}

    .confirm-allergy:before {
        content: "";
        background: url('images/medical.svg') no-repeat left center;
        width: 3vmin;
        height: 2vmin;
        float: left;
        color: #E5404B;
    }

.confirm-visiting {
    font-size: 1.8vmin;
    color: #727272;
    margin-top: 10px;
}

    .confirm-visiting:before {
        content: "";
        background: url('images/charge.svg') no-repeat left center;
        width: 3vmin;
        height: 2vmin;
        float: left;
    }

.confirm-charge {
    font-size: 1.8vmin;
    color: #727272;
    margin-top: 10px;
}

    .confirm-charge:before {
        content: "";
        background: url('images/charge.svg') no-repeat left center;
        width: 3vmin;
        height: 2vmin;
        float: left;
    }

/*#endregion student template*/

/*#region buffered screen*/
.buffered-mode-content-wrapper {
    position: fixed;
    bottom: 30vh;
    height: 59.5vh;
    width: 100vw;
}

.buffered-mode-footer {
    height: 30vh;
}

.buffered-column-one {
    width: 47vw;
    height: 50vh;
    float: left;
}

.buffered-column-two {
    width: 47vw;
    height: 50vh;
    float: right;
}

.buffered-student-wrapper {
    position: relative;
    height: 15vh;
    margin-bottom: 2vh;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #E7E7E7;
    box-sizing: border-box;
}

.buffered-student {
    position: absolute;
    top: 7%;
    left: 2.5%;
    width: 95%;
    height: 86%;
    color: #727272;
    line-height: 140%;
    /*top: 5%;
	height: 90%;*/
}

.buffered-student-data {
    display: inline-block;
    width: 95%;
    height: 100%;
    float: left;
}

    .buffered-student-data .picture {
        height: 100%;
        float: left;
        position: relative;
    }

        .buffered-student-data .picture img {
            max-height: 100%;
        }

    .buffered-student-data .main {
        margin-left: 5px;
        height: 100%;
        float: left;
    }

.buffered-student-icons {
    display: inline-block;
    height: 100%;
    float: right;
    text-align: right;
}

    .buffered-student-icons .delete {
        display: inline-block;
        width: 2vw;
        height: 5vh;
        background-size: contain;
        background-image: url('images/buffered-delete.png');
        background-repeat: no-repeat;
        background-position: right;
    }

.buffered-student .bold {
    font-family: 'latobold';
}

.buffered-student .space {
    margin-top: 3%;
}

.buffered-student .name {
    width: 25vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buffered-student .alert-message {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.8vmin;
    font-family: 'latobold';
    color: #E5404B;
    margin-top: 10px;
}

buffered-student .alert-message:before {
    content: "";
    background: url('images/charge.svg') no-repeat left center;
    width: 3vmin;
    height: 2vmin;
    float: left;
}

.buffered-student .icons {
    position: relative;
    height: 100%;
    text-align: right;
}


/*#endregion buffered screen*/

/*#region number-pad*/
.number-pad {
    position: fixed;
    top: 10.5vh;
    right: 0;
    height: 52.5vh;
    width: 40vw;
    background-color: #5f6871;
}

.popeye-modal .number-pad {
    position: relative;
    top: 0;
    right: 0;
    height: 50vh;
    width: 100%;
    background-color: #5f6871;
}

.number-pad .key {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 25%;
}

    .number-pad .key span {
        display: block;
        width: 100%;
        height: 100%;
    }

    .number-pad .key a {
        cursor: pointer;
        display: block;
        text-align: center;
        color: #fff;
        font-family: 'latolight';
        font-size: 3.5vmin;
        height: 100%;
        border-right: 1px solid #4b5259;
        border-bottom: 1px solid #4b5259;
        box-sizing: border-box;
        -webkit-user-select: none;
        user-select: none;
    }

        .number-pad .key a > div {
            height: 100%;
            width: 100%;
            display: table;
        }

            .number-pad .key a > div > div {
                display: table-cell;
                vertical-align: middle;
            }

                .number-pad .key a > div > div > div {
                    padding: 0;
                    margin: 0;
                    font-size: 2.8vmin;
                }

        .number-pad .key a.backspace {
            background: url('images/backspace.svg') no-repeat center;
            background-size: contain;
        }

        .number-pad .key a.orange {
            background-color: #f9a64a;
        }

            .number-pad .key a.orange.pressed {
                background-color: #de8635;
            }

        .number-pad .key a.green {
            background-color: #1fbba6;
        }

            .number-pad .key a.green.pressed {
                background-color: #05ab95;
            }

        .number-pad .key a.pressed {
            background-color: #4b5259;
        }

    .number-pad .key.row-one {
    }

    .number-pad .key.row-two {
        top: 25%;
    }

    .number-pad .key.row-three {
        top: 50%;
    }

    .number-pad .key.row-four {
        top: 75%;
    }

    .number-pad .key.row-three-four {
        top: 50%;
        height: 50%;
    }

    .number-pad .key.col-one {
    }

        .number-pad .key.col-one a {
            border-left: 1px solid #4b5259;
        }

    .number-pad .key.col-two {
        left: 25%;
    }

    .number-pad .key.col-three {
        left: 50%;
    }

    .number-pad .key.col-two-three {
        left: 25%;
        width: 50%;
    }

    .number-pad .key.col-three {
        left: 50%;
    }

    .number-pad .key.col-four {
        left: 75%;
    }

        .number-pad .key.col-four a {
            border-right: 0;
        }
/*#endregion number-pad*/

/*#region keyboard*/
.keyboard {
    position: fixed;
    bottom: 0;
    top: 46.5vh;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #5F6871;
}

    .keyboard.uppercase .alpha {
        text-transform: uppercase;
    }

    .keyboard .row {
        height: 25%;
    }

    .keyboard ul {
        height: 100%;
        overflow: auto;
        border-bottom: 1px solid #4b5259;
    }

        .keyboard ul li {
            height: 100%;
            width: 10%;
            margin: 0;
            padding: 0;
            float: left;
            background-color: #5f6871;
        }

            .keyboard ul li a {
                cursor: pointer;
                display: block;
                text-align: center;
                color: #fff;
                font-family: 'latolight';
                font-size: 3.5vmin;
                height: 100%;
                border-right: 1px solid #4b5259;
            }

                .keyboard ul li a div {
                    height: 100%;
                    width: 100%;
                    display: table;
                }

                    .keyboard ul li a div div {
                        display: table-cell;
                        vertical-align: middle;
                    }

                .keyboard ul li a.backspace {
                    background: url('images/backspace.svg') no-repeat center;
                    background-size: contain;
                }

    .keyboard.disabled ul li a {
        cursor: default;
        color: #C8CBCE;
    }

    .keyboard ul li a.pressed {
        background-color: #4b5259;
    }

    .keyboard.disabled ul li a.pressed {
        background-color: inherit;
    }

    .keyboard ul li:last-child a {
        border-right: 0;
    }

    .keyboard ul li.orange {
        background-color: #f9a64a;
    }

        .keyboard ul li.orange a.pressed {
            background-color: #de8635;
        }

    .keyboard ul li.green {
        background-color: #1fbba6;
    }

        .keyboard ul li.green a.pressed {
            background-color: #05ab95;
        }


    .keyboard ul li.medium {
        width: 15%;
    }

    .keyboard ul li.large {
        width: 25%;
    }

    .keyboard ul li.space {
        background-color: #888e94;
        width: 50%;
    }

        .keyboard ul li.space a.pressed {
            background-color: #67717a;
        }

/*#endregion keyboard*/

/*#region modal*/

.popeye-modal-container .popeye-modal.xlarge {
    width: 80% !important;
}

.popeye-modal-container .popeye-modal.large{
    width: 60%;
}

.popeye-modal-container .popeye-modal.medium {
    width: 35% !important;
}

.popeye-modal-container .popeye-modal.confirm {
    width: 40% !important;
}

.popeye-modal-container .popeye-modal.small {
    width: 30% !important;
}

.popeye-modal-container > section {
    width: 60vw;
    position: relative;
    margin: auto;
    margin-top: 11.7vh;
    padding: 2.5vh 2.5vw 2.5vh 2.5vw;
    border-radius: 4px;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.3);
    background: #fff;
}

.popeye-modal.dev > section {
    margin-top: 2vh;
}

.popeye-modal.dev button {
    height: auto;
    width: auto;
    padding: 10px;
}

.popeye-modal .title {
    color: #2DBBA6;
    font-family: 'latobold';
    font-size: 2.5vmin;
    padding-bottom: 3%;
}

.popeye-modal.error .title {
    color: red;
}

.popeye-modal .buttons {
    margin-top: 5%;
}

    .popeye-modal .buttons button {
        line-height: 150%;
        padding-left: 5%;
        padding-right: 5%;
    }

.popeye-modal .close {
    position: absolute;
    right: 20px;
    top: 15px;
    width: 20px;
    height: 20px;
    background: url('images/modal-close.svg') no-repeat center;
}
/*#endregion modal*/

/*#region modal calendar*/
.change-serving-date-header {
    text-align: center;
}

    .change-serving-date-header h2 {
        margin-top: 0;
        color: #A4A9AE;
        font-family: 'latolight';
    }

.modal-calendar {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    color: #A4A9AE;
}

    .modal-calendar td {
        border: 1px solid #A4A9AE;
        width: 14.2%;
        height: 8vh;
        font-size: 4vmin;
        font-family: 'latolight';
    }

        .modal-calendar td.selected {
            background-color: #1DB0D1;
            color: white;
        }

.modal-calendar-buttons {
    width: 100%;
    margin-top: 20px;
}

    .modal-calendar-buttons td {
        width: 33%;
    }

    .modal-calendar-buttons button {
        height: 5vh;
    }
/*#endregion modal calendar*/


.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.dev-button {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 30px;
    width: 50px;
    text-align: center;
    line-height: 30px;
    background-color: transparent;
}

    .browser-warning {
        position: fixed;
        top: 10.5vh;
        bottom: 3.5vh;
        left: 0;
        right: 0;
    }

    .browser-warning .container {
        display: flex;
        flex-direction: column;
        position: relative;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: white;
        height: 100%;
        margin: 20px 40px 20px 40px;
        border-radius: 2px;
    }

    .browser-warning .header {
        color: #969798;
        font-size: 2.3vmin;
        font-weight: 600;
        text-align: center;
        padding-top: 100px;
    }

    .browser-warning .body {
        color: #969798;
        font-weight: 500;
        text-align: center;
        padding-top: 50px;
        width: 40%;
        margin: 0px auto auto auto;
        padding-top: 40px;
        line-height: 1.8;
    }

        .browser-warning .body a {
            color: #f9a64a;
        }

    .browser-warning .browsers {
        color: #969798;
        width: 80%;
        margin: 0px auto auto auto;
        padding-top: 40px;
        line-height: 1.8;
    }

    .browser-warning .browser {
        display: -ms-flexbox;
        display: -webkit-flex;
        width: 100%;
        font-weight: 800;
        font-size: 1.8vmin;
        margin: 0px auto auto auto;
        padding-top: 40px;
    }

    .browser-warning .browser-name {
        margin: 12px 10px 12px 10px;
    }

    .browser-warning img {
        width: 50px;
        vertical-align: text-top;
    }

    .browser-warning .browser-image {
        width: 5vh;
    }

    .browser-warning .browser-image div {
        height: 5vh;
    }

    .browser-warning .browser-image .chrome-logo {
        background-repeat: no-repeat;
        background-image: url('images/chrome-logo.svg');
    }

    .browser-warning .browser-image .edge-logo {
        background-repeat: no-repeat;
        background-image: url('images/edge-logo.svg');
    }

    .browser-warning .browser-image .safari-logo {
        background-repeat: no-repeat;
        background-image: url('images/safari-logo.svg');
    }

    .browser-warning a {
        margin-left: auto;
    }

    .browser-warning button {
        margin-left: auto;
        height: 5vh;
    }
       

@media (max-width: 575.98px) {
    .browser-warning .body {
        width: 70%;
        padding-top: 20px;
    }

    .browser-warning img {
        width: 25px;
        margin-top: 10px;
    }

    .browser-warning .browsers {
        width: 90%;
        padding-top: 0px;
    }

    .browser-warning .browser-name {
        margin: 15px 10px 15px 10px;
    }

    .browser-warning button {
        width: auto;
        font-size: 1.5vh;
    }
}     

@-webkit-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }

    100% {
        opacity: 1;
    }
}

.animate-flicker {
    -webkit-animation: flickerAnimation 1s infinite;
}

.negative-balance {
    color: #E5404B;
}

.warning-balance {
    color: #FFBF00;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fade-in { /* Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fade-in { /* Safari and Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fade-in { /* Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fade-out { /* Firefox */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fade-out { /* Safari and Chrome */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-o-keyframes fade-out { /* Opera */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

#confettis {
    background-image: url('images/birthday-notification/birthday-confettis.svg');
     -webkit-animation: fadeIn ease 3s; 
}

#balloons {
    background-image: url('images/birthday-notification/birthday-balloons.svg');
    -webkit-animation: floatBalloons 2s normal ease-out;
}

#confettis, #balloons {
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100px;
    height: 154px;
    top: -146px;
    position: absolute;
    left: 17px;
    z-index: -1;
}

#balloons-and-confettis {
    position: absolute;
    -webkit-animation: floatAway 1500ms normal forwards ease-in;
    animation-delay: 3s;
}

#happy-birthday {
    color: #0bb5a8;
    font-weight: 700;
    position: absolute;
    -webkit-animation: messageMovesUp 1s normal forwards ease-in;
    animation-delay: 3s;
    z-index: -1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes floatBalloons {
    0% {
        top: -30px;
    }

    100% {
        top: -146px;
    }
}

@-ms-keyframes floatBalloons {
    0% {
        top: -30px;
    }

    100% {
        top: -146px;
    }
}

@keyframes floatAway {
    0% {
        top: 0px;
    }

    100% {
        top: -180px;
    }
}

@-ms-keyframes floatAway {
    0% {
        top: 0px;
    }

    100% {
        top: -180px;
    }
}

@keyframes messageMovesUp {
    0% {
        top: 0px;
    }

    100% {
        top: -52px;
    }
}

@-ms-keyframes messageMovesUp {
    0% {
        top: 0px;
    }

    100% {
        top: -52px;
    }
}

.table.curbside-meals-layout {
    height: 100%;
}

.table.curbside-meals-layout table {
    width: 100%;
    font-family: "latolight";
    color: #fff;
    height: 100%;
    table-layout: fixed;
}

.table.curbside-meals-layout table thead {
    text-align: center;
}

.table.curbside-meals-layout table thead td {
    top: -3%;
    position: relative;
}

.table.curbside-meals-layout table thead td:first-child {
    width: 50vmin;
}

.table.curbside-meals-layout table tbody td {
    border-right: 1px solid #4b5259;
    background-color: #888e94;
    text-align: center;
}

.table.curbside-meals-layout table tbody td.serving-session-name {
    text-align: left;
    font-size: 3.5vmin;
    color: #fff;
    padding: 0px 21px;
}

.table.curbside-meals-layout table tbody td.in-cart {
    background-color: #f9a64a;
}

.table.curbside-meals-layout table tbody td span {
    font-family: 'latobold';
    font-size: 2.5vmin;
}

.table.curbside-meals-layout table tbody td.in-cart:not(.serving-session-name) {
    background-image: url('images/pickedup-curbside-day.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.table.curbside-meals-layout table tbody td.inactive {
    background-color: #5f6871;
    background-image: url('images/inactive-curbside-day.svg');
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: 11.5vmin; */
}

.curbside-serve-cart-wrapper {
    margin-top: 3%;
    height: 12%;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    font-family: 'latobold';
}

.curbside-serve-cart-wrapper .total {
    top: 15%;
    right: 5%;
    left: inherit;
    color: #969798;
}

.curbside-serve-cart-wrapper .total span {
    color: red;
    padding-right: 3%;
}

.serving-sessions .curbside-meals-session {
    background-color: #1fbba6;
    color: #fff;
}

.pos-display-none {
    display: none !important;
}

.pos-display-block {
    display: block !important;
}

.health-report__container h3 {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.health-report__issues {
    display: flex;
    flex-wrap: wrap;
}

.health-report__issue {
    flex: 1 1 0;
    width: 0;
    min-width: 300px;
    max-width: 300px;
    border: 1px solid #404040;
    margin: 0.25rem;
    padding: 1rem 0.5rem;
    border-radius: 4px;
    background: #5f6871;
    color: white;
    min-height: 30px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    justify-content: center;
}

.health-report__issue.selected {
    background: #f9a64a;
    color: black;
    box-shadow: inset 2px 3px 4px 1px #da9243;
}

.health-report__actions {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
}

.health-report__other .text-box {
    height: 6rem;
    max-width: 600px;
    padding: 0.5rem;
    font-size: 16px;
    line-height: 18px;
}
.health-report__other .text-box.error {
    border: 1px solid red;
    background: #f8e8e8;
}

.health-report__error {
    padding: 0.5rem;
    border: 1px solid red;
    background: #f8e8e8;
    color: #aa0505;
    margin: 0 0 1rem;
}

@media (max-width: 990px) {
    .health-report__issue {
        padding: 0.25rem;
        font-size: 13px;
        min-width: 225px;
        max-width: 225px;
    }
}

.unassigned-role {
    font-size: 2.5vmin;
}