@import "branding.less";

* {
    cursor: default !important;
}

html,
button {
    color: #eeeeff;
}

input,
select,
textarea {
    color: #333;
    border: 1px solid #999999;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

div {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid #ccc;
    margin: 0.5em 0;
    padding: 0;
    clear: both;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

p.justify {
    text-align: justify;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

::-webkit-scrollbar {
    width: 40px;
    height: 40px;
}

/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;

}

::-webkit-scrollbar-button:vertical:start:decrement, /* UP */
::-webkit-scrollbar-button:vertical:end:increment, /* down */
::-webkit-scrollbar-button:horizontal:start:decrement, /* left */
::-webkit-scrollbar-button:horizontal:end:increment { /* right */
    background-image: url('/images/scroll.png');
    background-repeat: no-repeat;
}

::-webkit-scrollbar-button:vertical:start:decrement { /* UP */
    background-position: -1px -2px;
}

::-webkit-scrollbar-button:vertical:end:increment { /* down */
    background-position: -41px -2px;
}

::-webkit-scrollbar-button:horizontal:start:decrement { /* left */
    background-position: -41px -42px;
}

::-webkit-scrollbar-button:horizontal:end:increment { /* right */
    background-position: -1px -42px;
}

/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement {
    display: none;
}

/* Place The scroll down button at the bottom */
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement {
    background: #E0E0E0;
    border: 1px solid #A8A8A8;
    border-radius: 2px;
    box-shadow: inset -3px -3px 5px -2px #ACACAC;
    height: 40px;
    width: 40px;
}

/* Track below and above */
::-webkit-scrollbar-track-piece {
    background-color: rgba(241, 241, 241, 0.18);
    border-right: 1px solid rgba(128, 128, 128, 0.25);
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 2px;
    box-shadow: inset 2px 2px 5px -2px rgba(0, 0, 0, 0.39);
}

/* The thumb itself */
::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border: 1px solid #A8A8A8;
    border-radius: 2px;
    box-shadow: inset -3px -3px 5px -2px #ACACAC
}

/* Corner */
::-webkit-scrollbar-corner {
    background-color: #ccc;
}

/* Resizer */
/*::-webkit-scrollbar-resizer {
    background-color: gray;
}*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

*, *:after, *:before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; /*-webkit-tap-highlight-color: rgba(0,0,0,0);*/
}

body {
    background: #222222;
    overflow: hidden;
    padding: 0;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    opacity: 1;
    /*transition: opacity 1s;
    -webkit-transition: opacity 0.5s;*/
}

body.is-initialising {
    /*opacity: 0;*/
    min-height: 500px;

    background: #222222 url('/images/logos/kobas-logo-white.svg') center center no-repeat;
    background-size: 280px;
}

body.is-updating {
    min-height: 500px;
    background: #222222 url('/images/logos/kobas-logo-white.svg') center center no-repeat;
    background-size: 280px;
}

body.is-initialising.snow,
body.is-updating.snow {
    background: #222222 url('/images/logos/kobas-logo-white.png') center center no-repeat;
    background-size: 280px;
}

body.is-updating:before {
    content: 'Please wait while we update your EPoS system.';
    display: block;
    margin: 100px auto;
    background: #eee;
    border: 3px solid @olive;
    text-align: center;
    color: #333;
    width: 500px;
    height: 80px;
    font-size: 20px;
    line-height: 80px;
    border-radius: 4px;
    -webkit-animation: pulse 3s linear infinite;
}

body.training-mode {
    background: #222;
}

ul.invisible-list {
    list-style: none;
    padding: 0;
    margin:0;
}

.capitalize { text-transform: capitalize; }
.uppercase  { text-transform: uppercase;  }
.lowercase  { text-transform: lowercase;  }

.click-marker {
    position: absolute;
    z-index: 99999;
    width: 24px;
    height: 24px;
    display: block;
    background: url('/images/pointer.png') center center no-repeat;
}

.reload-link {
    display: none;
}

.is-initialising .reload-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.loading-bar {
    position: absolute;
    top: -500px;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    background: #eee;
    border: 3px solid @olive;
    color: #333;
    text-align: center;
    border-radius: 0 0 4px 4px;
    z-index: 5000;
    -webkit-transition: top 0.3s ease-in-out; /* Safari */
    transition: top 0.3s ease-in-out;
    -webkit-animation: pulse 3s linear infinite;
}

body.is-loading .loading-bar {
    top: -3px;
    -webkit-transition: top 1s cubic-bezier(0.56, 0.09, 0.68, 1.17);
    transition: top 1s cubic-bezier(0.56, 0.09, 0.68, 1.17);
}

@-webkit-keyframes pulse {
    0% {
        background-color: #fff;
    }
    50% {
        background-color: @olive;
    }
    100% {
        background-color: #fff;
    }
}

#actionDiv {
    display: none;
}

html, button, input, select, textarea {
    font-family: Tahoma, Geneva, sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    margin-bottom: 1em;
}

h1 {
    font-size: 22px;
}

h2 {
    font-size: 14px;
}

p {
    margin: 0;
}

a {
}

a:visited {
}

a:hover {
}

table, tr {
    border: none;
}

td.indent {
    padding-left: 1em;
}

.container {
    min-width: 600px;
    position: relative;
    overflow: hidden;
}

form {
    position: relative;
}

form .well {
    padding: 1em 0.5em;
    max-height: 400px;
}

form .input-container {
    width: 50%;
    margin-bottom: 1em;
    float: left;
    position: relative;
}

input {
    font-size: 18px;
    padding: 0.2em;
    width: 100%;
    height: 32px;
}

.input-currency.currency-gbp:after {
    content: '£';
    position: absolute;
    display: block;
    top: 1px;
    left: 1px;
    background: #ccc;
    height: 30px;
    padding: 0 0.5em;
    line-height: 31px;
}

.input-currency input {
    padding-left: 30px;
}

form label {
    width: 40%;
    text-align: right;
    float: left;
    display: block;
    font-size: 18px;
    padding: 0 10% 0 0;
    clear: both;
    margin-bottom: 1em;
    line-height: 32px;
}

.col-1,
.col-2 {
    position: absolute;
    height: 100%;
}

.col-1 {
    width: 70%;
    left: 0;
}

.col-2 {
    right: 0;
    width: 30%;
}

#online-ordering-banner {
    height: 60px;
    color: white;
    font-weight: bold;
    font-size: 0.8em;
	padding-top: 10px;
	padding-left: 20px;
    text-align: left;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
	z-index: 10;
}

.warn-banner {
    pointer-events: none;
    background: red;
    color: white;
    font-weight: bold;
    font-size: 0.8em;
	padding-top: 5px;
    text-align: center;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
#warn-support {
    height: 27px;
}

.navigation {
    height: 8%;
    border-bottom: 5px solid #8c0f10;
	overflow: hidden;
	white-space: nowrap;
}

.navigation-scroll-control
{
	height:   100%;
	width: 	  5%;
	position: relative;
	float:	  left;
}

.navigation-scroll-control button
{
	height: 100%;
	width: 100%;
	text-align: center;
}

.menu-items {
    height: 92%;
}

.items-container {
    height: 100%;
    padding: 2px;
}

/*Consumption modes are gonna change the parent class of .menu-items*/
.menu-items .item-button-container {
    opacity: 0.3;
}

.menu-items.eatinavailable .eatin,
.menu-items.deliveryavailable .delivery,
.menu-items.takeawayavailable .takeaway {
    opacity: 1;
    visibility: visible;
}

.admin {
    height: 8%;
    border-bottom: 5px solid #8c0f10;
}

.transaction {
    position: relative;
}

.payment-rows-4 .transaction {
    height: 62%;
}

.payment-buttons {
    padding: 2px 0;
    background: rgba(100, 100, 100, 0.1);
}

.payment-rows-4 .payment-buttons {
    height: 30%;
}

.payment-rows-3 .transaction {
    height: 69%;
}

.payment-rows-3 .payment-buttons {
    height: 23%;
}

.payment-rows-2 .transaction {
    height: 73.5%;
}

.payment-rows-2 .payment-buttons {
    height: 18%;
}

.payment-rows-1 .transaction {
    height: 82%;
}

.payment-rows-1 .payment-buttons {
    height: 10%;
}

.total, .change, .discount, .addedToTab, .promo, table.loyalty {
    height: 10%;
    float: left;
    text-transform: uppercase;
}

.addedToTab span {
    text-transform: none;
}

.total td {
    /*background-color: #CE0100;*/
    color: #fff;
    padding: 0 2%;
    -webkit-box-shadow: inset 0px -2px 0px 0px rgba(255, 255, 255, 0.5);
    box-shadow: inset 0px -2px 0px 0px rgba(255, 255, 255, 0.5);
    font-size: 1.2em;
}

.change td {
    background-color: transparent;
    color: #fff;
    padding: 0 2%;
    -webkit-animation: fadein 4s ease-in-out -2s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
    -moz-animation: fadein 4s ease-in-out -2s infinite alternate;
    animation: fadein 4s ease-in-out -2s infinite alternate;
    font-size: 1.2em;
}

.change-bar {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    background: @olive;
    border-bottom: 3px solid #333;
    text-align: right;
    z-index: 10002;
    color: #000;
}

.change-bar img {
    float: left;
    margin: 10px 0 10px 1em;
}

.change-bar h1 {
    margin: 0;
    padding: 0 1em 0 0;
    line-height: 62px;
    font-size: 2em;
}

.addedToTab td {
    background-color: rgba(185, 243, 0, 0.57);
    color: #ffffff;
    padding: 0 2%;
    font-size: 1.2em;
}

@-webkit-keyframes fadein {
    0% {
        background: transparent;
    }
    50% {
        background: #eb0d0d;
    }
    100% {
        background: transparent;
    }
}

@-moz-keyframes fadein {
    0% {
        background: transparent;
    }
    50% {
        background: #eb0d0d;
    }
    100% {
        background: transparent;
    }
}

@keyframes fadein {
    0% {
        background: transparent;
    }
    50% {
        background: #eb0d0d;
    }
    100% {
        background: transparent;
    }
}

body.isipad .keyboard-qwerty {
    display: none;
}

.keyboard-qwerty {
    position: fixed;
    bottom: 0;
    -webkit-transform: translateY(340px);
    transform: translateY(340px);
    left: 0;
    right: 0;
    width: 100%;
    height: 300px;
    padding-top: 20px;
    background-color: #fff;
    -webkit-transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    border-top: 2px solid @olive;
}

body.show-keyboard-qwerty .keyboard-qwerty {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

body.show-keyboard-qwerty .popup {
    top: 20px !important;
    -webkit-transform: translate(-50%, 0%) !important;
    transform: translate(-50%, 0%) !important;
}

.keyboard-row {
    width: 870px;
    margin: 0 auto;
    clear: left;
    min-height: 5px;
}

.keyboard-row2 {
    padding-left: 50px;
}

.keyboard-row3 {
    padding-left: 70px;
}

.keyboard-row4 {
    padding-left: 10px;
}

.keyboard-row5 {
    padding-left: 190px;
}

.key {
    float: left;
    width: 60px;
    height: 50px;
    font-weight: normal;
    border-radius: 4px;
    margin-left: 2px;
    margin-bottom: 2px;
    text-shadow: none;
    font-size: 15px;
    color: #222222;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+5,dddddd+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 5%, #dddddd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 5%, #dddddd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 5%, #dddddd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd', GradientType=0); /* IE6-9 */

    border: 1px solid #888888;
}

.keyboard-qwerty .key {
    color: @olive;
    background: #222;
    border: none;
}

.keyboard-qwerty .key:active {
    color: #fff;
}

.key-hidekeyboard:after {
    content: '';
    background: url(/images/hide-keyboard.gif) no-repeat;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 31px;
}

.key[disabled] {
    color: #ccc;
}

.keyboard-qwerty .key[disabled] {
    color: #666;
}

.key-double {
    width: 140px;
}

.key-med {
    width: 100px;
}

.key-space {
    width: 66%;
}

.key-clear {
    color: #ce0100;
}

.failure {
    color: #EC1C24;
    font-weight: bold;
}

.training-order-warning,
.training-payment-warning {
    padding: 2%;
    color: #fff;
    background-color: #c8272d;
    margin-bottom: 1%;
}

body.training-mode .payment-button,
body.training-mode .login .notification {
    background-color: #c8272d;
    border-color: #DC4E51;
}

body.training-mode .payment-button.style-success {
    background-color: #9dce2c;
}

body.training-mode .popup {
    background: url(../images/training.png);
}

body.training-mode .popup,
body.training-mode .b-close .fa {
    border-color: #c8272d;
}

.order {
    height: 90%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    width: 100%;
    font-size: 1em;
    float: left;
    position: relative;
    overflow-x: hidden;
    background: rgba(100, 100, 100, 0.1);
}

.order table {
    float: left;
}

.order td {
    padding: 0.5em 0;
    vertical-align: top;
}

.order td td {
    padding: 0.5em 2%;
}

.order table .line-item:nth-child(even) td {
    background: rgba(145, 145, 145, 0.2);
}

.order .icon-note {
    vertical-align: middle;
    display: inline;
}

.order .line-item-answer {
    font-size: 0.8em;
    font-style: italic;
}

.order .line-item-answer td {
    padding-top: 0;
}

.order.long-order .line-item-answer {
    display: none;
}

.order.long-order .show-buttons tr.line-item-answer {
    display: table-row;
}

.expand-order-item {
    display: none;
}

.order.long-order .expand-order-item {
    display: inline-block;
}

.order.long-order .show-buttons .expand-order-item {
    display: none;
}

.order.long-order .user,
.order.long-order .clockDiv {
    display: none;
}

.long-order {
    overflow-y:scroll;
}

.order .promo-discount-holder {
    padding-top: 0;
    padding-bottom: 0;
}

.order .user {
    position: absolute;
    bottom: 0.5em;
    left: 1em;
    width: 12em;
    overflow: hidden;
}

.basket-logo {
    display: block;
    margin: 0 auto;
    width: 90%;
    height: auto;
    padding: 0 10%;
    background: url('/images/logos/kobas-logo-white.svg') center center no-repeat;
    background-size: contain;
}

.snow .basket-logo {
    background: url('/images/logos/kobas-logo-white.png') center center no-repeat;
    background-size: contain;
}

.motd {
    text-align: center;
}

.discount td {
    color: #ff9900;
    padding: 0.5em 0%;
    font-size: 0.9em;
}

.discount-applied {
    color: #ff9900;
    font-size: 0.9em;
}

.discount-applied.qualified {
}

.place td {
    padding: 0.5em 0%;
    font-size: 0.9em;
}

.promo td {
    color: #ff9900;
    padding: 0.5em 0%;
    font-size: 0.9em;
}

.promo tr.fixed-discount-basket td{
    color: @olive;
}

.promo tr.fixed-discount-basket span.discount-applied{
    color: @olive;
}

table.loyalty {
    table-layout: fixed;
}

.loyalty {
    background: #d7df21;
    border-bottom: 3px solid #000;
}

.loyalty img {
    margin-right: 0.5em;
    float: left;
}

.loyalty td,
td.loyalty {
    color: #ffffff;
    font-weight: bold;
    padding: 0.5em 0%;
    font-size: 0.9em;
    line-height: 23px;
    text-shadow: 1px 1px #a4ab1a;
}

.table-style td.loyalty {
    font-size: 1.2em;
    border-left: 1px solid #E6EF10;
}

.loyalty-discounts .tag {
    width: auto;
    padding: 0.1em 0.5em;
    margin-bottom: 0.1em;
}

.reminder {
    color: #378de5;
    font-weight: bold;
    font-size: 0.9em;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    margin-bottom: 3px;
}

.fa-heart {
    color: #f00;
}

.customer-profile {
    width: 160px;
    float: left;
    margin: 0 10px 0 0;
    background-image: url(../images/profile-default.png);
}

.birthday-icon {
    display: none;
}

.birthday-icon.yesterday,
.birthday-icon.tomorrow,
.birthday-icon.today {
    display: inline-block;
    color: #f00;

}

.pulse-colour {
    -webkit-animation: pulsecolour linear 5s infinite;
    animation: pulsecolour linear 5s infinite;
}

@-webkit-keyframes pulsecolour {
    0% {
        color: #7621df;
    }
    25% {
        color: #df2121;
    }
    50% {
        color: #7621df;
    }
    75% {
        color: #df2121;
    }
    100% {
        color: #7621df;
    }
}

@keyframes pulsecolour {
    0% {
        color: #7621df;
    }
    25% {
        color: #df2121;
    }
    50% {
        color: #7621df;
    }
    75% {
        color: #df2121;
    }
    100% {
        color: #7621df;
    }
}

.birthday-tag {
    display: none;
}

.birthday-tag.today,
.birthday-tag.tomorrow,
.birthday-tag.yesterday {
    background: @olive;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
    text-shadow: 1px 1px #a4ab1a;
    display: inline-block;
    border-radius: 3px;
    padding: 0.3em;
    position: relative;
}

.clockDiv {
    text-align: right;
    position: absolute;
    bottom: 0.5em;
    right: 1em;
}

.popupOpen .order .clockDiv {
    display: none;
}

.isipad .oldKeyboard {
    display: none;
}

.nav-tabs-holder 
{
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
}
.nav-tabs 
{
    height: 100%;
    background: #000;
    padding: 2px 2px 0 2px;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	left: -1px;
}

.button,
button {
    display: inline-block;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 1em;
    position: relative;
    font-size: 1em;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    min-height: 30px;
    color: #fff;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
    line-height: normal;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+5,111111+100 */
    background: #333333; /* Old browsers */
    background: -moz-linear-gradient(top, #333333 5%, #111111 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #333333 5%, #111111 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #333333 5%, #111111 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#111111', GradientType=0); /* IE6-9 */

    /*border:3px solid #444444;*/
    border: none;
}

.button:active,
button:active {
    -webkit-box-shadow: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.2);
}

.button:focus,
button:focus {
    outline: 0;
    /*-webkit-filter: brightness(1.05);*/
}

.smallButton,
.deleteButton {
    padding: 0.4em 0.7em 0.4em;
}

.deleteButton:after {
    content: '';
    display: inline-block;
    background: url(../images/delete.png) no-repeat;
    width: 1em;
    height: 1em;
    background-size: 1em 1em;
}

#tab-rename-select {
	font-size: 1.1em;
	height: 40px;
}

.table-picker {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    margin: 0;
    float: left;
    display: inline;
    padding: 0.9em;
    color: #ffffff;
    position: relative;
    font-size: 0.9em;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    background: #378de5;
}

.payment-button-container {
    width: 33.33%;
    height: 33.33%;
    padding: 2px;
    float: left;
    position: relative;
}

.payment-button {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    margin: 0;
    float: left;
    display: inline;
    padding: 0em;
    color: #ffffff;
    position: relative;
    font-size: 0.8em;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    background: #378de5;
    /*border: 3px solid #84bbf3;*/
}

.navigation-scroll-control 
{
	background: black;
	padding: 4px 2px 4px 4px;
}
.navigation-scroll-control button 
{
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #ffffff;
    position: relative;
    font-size: 0.8em;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    background: #378de5;
	height: 100%;
}

.button-notification {
    position: absolute;
    top: -0.2em;
    right: -0.2em;
    background: @olive;
    border-radius: 50%;
    width: 1.2em;
    height: 1.2em;
    color: #fff;
    z-index: 1;
    text-align: center;
    line-height: 1.2em;
    text-shadow: 1px 1px #a4ab1a;
}

button.context-button,
.button.context-button{
    background: #f1f1f1;
    border: 2px solid #9d9ea3;
    color: #000;
}

.order .item-option-button-container {
    padding-top: 0;
    display: none;
}

.order tr.item-option-button-container td {
    padding-top: 0;
}

.order .show-buttons .item-option-button-container {
    display: table-row;
}

.order table .line-item.show-buttons > td {
    /*outline: 2px solid @olive;*/
    -webkit-box-shadow: inset 0px 0px 0px 2px #84bbf3;
    -moz-box-shadow: inset 0px 0px 0px 2px #84bbf3;
    box-shadow: inset 0px 0px 0px 2px #84bbf3;
}

.order > table {
    background: #222222;
    position: relative;
    z-index: 1;
}

.item-option-button {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    margin: 0;
    float: left;
    display: inline;
    padding: 0.3em 0;
    color: #ffffff;
    position: relative;
    font-size: 0.8em;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    background: #378de5;
}

.item-button-container {
    float: left;
    width: 14.28%;
    height: 10%;
    padding: 2px;
}

.item-button-container button {
    height: 100%;
    width: 100%;
    color: #fff;
    padding: 0;
    float: left; /* fixes weird chrome render bug where long text creates top margin */
    font-size: 0.8em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

button.style- {
    visibility: hidden;
}

button.style-1 {
    background: #c8272d;
    /*border:2px solid transparent;*//* #b01213;*/
}

button.style-2 {
    background: #ff6417;
    /*border:2px solid transparent;*//* #ed5316;*/
}

button.style-3 {
    background: #e8a911;
    /*border:2px solid transparent;*//* #da941b;*/
}

button.style-4 {
    background: #007c5a;
    /*border:2px solid transparent;*//* #045740;*/
}

button.style-5 {
    background: #0046ad;
    /*border:2px solid transparent;*//* #023b90;*/
}

button.style-6 {
    background: #57108b;
    /*border:2px solid transparent;*//* #4c0e79;*/
}

button.style-7 {
    background: #c721ac;
    /*border:2px solid transparent;*//* #9b2584;*/
}

button.style-8 {
    background: #A2AD00;
    /*border:2px solid transparent;*//* #8b8f11;*/
}

button.style-9 {
    background: #0090b4;
    /*border:2px solid transparent;*//* #057894;*/
}

button.style-10 {
    background: #ff6417;
}

button.style-success {
    background: #9dce2c;
    border: none;
    color: #fff;
}

button.style-danger {
    background: #fe1a00;
    border: 3px solid #fe1a00;
    border: none;
    color: #fff;
}

button.style-actionable {
    background: #378de5;
}

.nav-tabs button {
    width: 10%;
    height: 100%;
    display: inline;
    padding: 0em;
    position: relative;
    font-size: 0.8em;
    overflow: hidden;
	white-space: normal;
    text-decoration: none;
    border: 2px solid #000;
    border-bottom: none;
    text-align: center;
    float: left;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

.navigation.style-1, .admin.style-1 {
    border-bottom-color: #c8272d;
}

.navigation.style-2, .admin.style-2 {
    border-bottom-color: #ff6417;
}

.navigation.style-3, .admin.style-3 {
    border-bottom-color: #e8a911;
}

.navigation.style-4, .admin.style-4 {
    border-bottom-color: #007c5a;
}

.navigation.style-5, .admin.style-5 {
    border-bottom-color: #0046ad;
}

.navigation.style-6, .admin.style-6 {
    border-bottom-color: #57108b;
}

.navigation.style-7, .admin.style-7 {
    border-bottom-color: #c721ac;
}

.navigation.style-8, .admin.style-8 {
    border-bottom-color: #A2AD00;
}

.navigation.style-9, .admin.style-9 {
    border-bottom-color: #0090b4;
}

.col-1 button[disabled=disabled],
.col-2 button[disabled=disabled] {
    background: #666;
    color: #eee;
    text-shadow: none;
    border: none;
    position: relative;
    opacity: 0.7;
}

.col-1 button.soldout_remaining::after,
.col-2 button.soldout_remaining::after {
    content: attr(data-remaining);
    font-family: sans-serif;
    border: 1px solid #fff;
    display: block;
    /*font-size: 10px;*/
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    background: #378de5;
    /*width: 110%;*/
    width: 120%;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    text-shadow: none;
    /*top: 20%;*/
    top: 13%;
    /*right: -50%;*/
    right: -50%;
}

button.admin-online-orders-pending:after {
	content: attr(data-new-orders) ' New';
    font-family: sans-serif;
	color: white;
    border: 1px solid #fff;
    display: block;
    /*font-size: 10px;*/
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    background: #378de5;
    /*width: 110%;*/
    width: 120%;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    text-shadow: none;
    /*top: 20%;*/
    top: 13%;
    /*right: -50%;*/
    right: -50%;
}

.popup button[disabled=disabled] {
    background: #bbb;
    color: #888;
    text-shadow: none;
}

button[disabled=disabled]:active {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
}

.menu-items button[disabled=disabled]:after {
    content: 'sold out';
    font-family: sans-serif;
    border: 1px solid #fff;
    display: block;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    background: #ff0000;
    width: 120%;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    text-shadow: none;
    top: 20%;
    right: -40%;
}

.col-2 button[disabled=disabled] {

}

.payment-rows-4 .payment-button-container {
    height: 25%;
}

.payment-rows-3 .payment-button-container {
    height: 33.33%;
}

.payment-rows-2 .payment-button-container {
    height: 50%;
}

.payment-rows-1 .payment-button-container {
    height: 100%;
}

.col-2 button.on {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a2ad00+5,726f22+100 */
    background: #a2ad00; /* Old browsers */
    background: -moz-linear-gradient(top, #a2ad00 5%, #726f22 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #a2ad00 5%, #726f22 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #a2ad00 5%, #726f22 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a2ad00', endColorstr='#726f22', GradientType=0); /* IE6-9 */

    border: 3px solid #8b8f11;
    font-weight: bold;
}

span.credit {
    background-color: #fff;
    color: #33A000;
    border-radius: 2px;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.admin button {
    height: 100%;
    width: 100%;
}

.admin-button-container {
    float: left;
    width: 33.33%;
    height: 100%;
    padding: 4px 2px 4px 2px;
}

.session-upload-warning {
    background: #fe1a00 !important;
    color: #fff;
    padding: 1em !important;
    vertical-align: top;
}

.session-upload-warning img {
    float: left;
}

.session-upload-warning p {
    margin-bottom: 1em;
    text-align: center;
}

.session-upload-warning button {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.manual-session-qr {
    background: #fff;
    padding: 0.5em;
    border-radius: 3px;
    border: 3px solid @olive;
    display: block;
    margin: 0 auto 1em auto;
}

#manual-session-upload p {
    margin-bottom: 1em;
}

.item-quantity {
    position: absolute;
    display: none;
    background: #eee;
    border-left: 3px solid @olive;
    border-top: 3px solid @olive;
    box-shadow: 0px -4px 10px #000;
    width: 100%;
    right: 0;
    /*top: 0;*/
    bottom: 0;
    overflow: hidden;
    padding: 1em 0;
    z-index: 2;
}

.item-quantity h1 {
    text-align: center;
    color: #333;
    text-shadow: 1px 1px 0px #d8d8d8;
}

.item-quantity .numpad {
    max-width: 98%;
    width: 100%;
    padding: 0;
    margin: auto;
    float: none;
}

.item-quantity .numpad .cash-amount {
    max-width: 98%;
    width: 100%;
    margin: 0 auto;
    float: none;
    display: block;
}

.item-quantity .numpad .key {
    margin: 3px 1%;
    width: 31.333%;
}

.item-quantity .popup-confirm-controls {
    max-width: 98%;
    width: 100%;
    margin: 1em auto 0;
    display: block;
    float: none;
    clear: left;
}

.item-options-notes, .online-order-reject-notes {
    width: 100%;
    height: 110px;
    font-size: 1.5em;
    float: left;
    padding: 0.5em;
    margin: 0 0 0.5em 0;
}

.item-options .category-select {
    font-size: 24px;
    margin: 10px 0;
    width: 100%;
}

.side-menu {
    width: 152px;
    float: right;
    border-left: 2px solid #ccc;
}

.side-menu button {
    float: right;
    width: 140px;
    margin-bottom: 1em;
}

.has-side-menu {
    margin-right: 162px;
}

.popup {
	width: 756px;
    /* Proportional max-height to permit scaling on smaller device screens */
    max-height: 92%;
    background: #eee;
    color: #333;
    display: none;
    padding: 20px;
    box-shadow: inset 0px 0px 30px 10px rgba(255, 255, 255, 0.1);
    font-size: 16px;
    border: 3px solid @olive;
    border-radius: 5px;
}

.popup-banner{
    font-size: 0.8em;
    text-align: center;
    border-radius: 5px;
    border: 3px solid rgba(255,255,255,0.2);
    background-color: #378de5;
    padding: 0.6em 1em;
    margin: 1em 0;
}

.snow .popup:before {
    content: '';
    background: url("/images/snow-330px.png") center top no-repeat;
    position: absolute;
    top: -55px;
    left: 50%;
	width: 330px;
	height: 122px;
    margin-left: -163px;
	z-index: -1;
}

.snow .popup.popup-snow1:before {
  content: '';
  background: url("/images/snow-680px-01.png") center top no-repeat;
  position: absolute;
  top: -41px;
  left: 25%;
  width: 680px;
  height: 134px;
  margin-left: -163px;
  z-index: -1;
  opacity: 95%;
}
.snow .popup.popup-snow2:before {
  content: '';
  background: url("/images/snow-680px-02.png") center top no-repeat;
  position: absolute;
  top: -28px;
  left: 25%;
  width: 680px;
  height: 152px;
  margin-left: -163px;
  z-index: -1;
}
.snow .popup.popup-snow3:before {
  content: '';
  background: url("/images/snow-680px-03.png") center top no-repeat;
  position: absolute;
  top: -30px;
  left: 25%;
  width: 680px;
  height: 101px;
  margin-left: -163px;
  z-index: -1;
}

.popup:empty:before {
    display: none;
}

@-webkit-keyframes pulsecolor {
    0% {
        color: #999;
    }
    40% {
        color: #999;
    }
    50% {
        color: @olive;
    }
    80% {
        color: #999;
    }
    100% {
        color: #999;
    }
}

.popup:empty:after {
    content: 'Loading - till may auto lock before this completes';
    font-weight: bold;
    font-size: 0.9em;
    display: block;
    text-align: center;
    -webkit-animation: pulsecolor 4s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

.popup.alert {
    width: 400px;
}

.popup.alert button {
    width: 100px;
}

.container,
.warn-banner {
}

.popupOpen .container,
.popupOpen .warn-banner {
    -webkit-filter: blur(2px) brightness(0.8);
    filter: blur(2px);
}

.dialog-loading {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
}

.dialog-loading .loading {
    text-align: center;
    margin-top: 2em;
}

.popup.loading .dialog-loading {
    display: block;
}

.b-close {
    position: absolute;
    right: -50px;
    top: -50px;
    height: 80px;
    width: 80px;
}

.b-close-inside {
    position: absolute;
    right: -25px;
    top: -25px;
    height: 80px;
    width: 80px;
}

.b-close .fa {
    position: absolute;
    right: 30px;
    top: 30px;
    height: 40px;
    width: 40px;
    color: #fff;
    background: #333;
    border: 3px solid @olive;
    border-radius: 20px;
    text-decoration: none;
    text-align: center;
    line-height: 35px;
    font-size: 18px;
}

.well {
    border-radius: 2px;
    background: #ddd;
    border: 1px solid #ccc;
    padding: 0.5em;
}

.well-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.isipad .drop-menu,
.isipad .drop-menu button,
.isipad .well-scroll button {
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.well-shadow {
    box-shadow: inset 0em -1em 1em -1em #000;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 39px;
    height: 1em;
    margin-top: -1em;
    display: none;
}

.well .well {
    background: #eee;
}

.isipad .well-shadow {
    right: 0px;
}

.numpad {
    width: 360px;
    /*height: 500px;*/
    padding: 20px;
    float: left;
}

#login .numpad {
    min-height: 27.3em;
}

#login .spacer {
	min-height: 6em;
}

.cashpad {
    float: left;
    width: 110px;
    margin-top: 7px;
}

.popup h1 {
    text-align: center;
    color: #333;
    font-weight: normal;
    text-shadow: 1px 1px 0px #d8d8d8;
}

.numpad .key,
.cashpad .key {
    width: 100px;
    height: 80px;
    margin: 3px 3px;
    font-size: 20px;
    text-align: center;
    padding: 1em 0;
}

.cashpad .key {
    margin: 3px 0px;
}

.cashpad h1 {
    margin: 7px 0 15px 0;
}

.order-detail-nav-tab {
    margin: 0 0 -2px 0px;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid #ccc;
    width: 115px;
}

.nav-tab:first-child {
    margin-left: 10px;
}

.nav-tab-selected {
    background: #ddd;
    color: #222;
    border: 1px solid #ccc;
    font-weight: bold;
    border-bottom: none;
}

.payment-properties {
    font-weight: bold;
    border: 5px solid transparent;
    border-top: none;
}

.payment-properties td {
    padding: 0.1em 0;
}

.payment-due td {
    font-size: 1.2em;
}

.payment-due.border-top td {
    border-top: 1px solid #ccc;
}

.payment-breakdown-container {
    height: 561px;
    position: relative;
}

.payment-breakdown {
    background: #fff;
    border: 5px solid transparent;
}

.payment-breakdown td {
    vertical-align: top;
}

th.align-right,
td.align-right {
    text-align: right;
}

th.align-left,
td.align-left {
    text-align: left;
}

.align-center,
th.align-center,
td.align-center {
  text-align: center;
}

thead.sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}
thead.sticky th {
  position: sticky;
  top: -10px;
}

.payment-left-to-pay td {
    padding-bottom: 0.5em;
}

.payment-breakdown-controls {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.payment-breakdown-controls button {
    width: 100%;
    margin: 10px 0 0 0;
}

.payment-breakdown-scroll {
    max-height: 360px;
    overflow-x: auto;
    font-size: 0.8em;
}

.payment-breakdown-scroll.part-pay {
    max-height: 320px;
}

.payment-breakdown-discount td {
    font-style: italic;
    padding-left: 2em;
}

button#brefundcard:disabled, button#brefundother:disabled{
    background: lightgrey;
    color: darkgrey;
}

.panel-left {
    float: left;
}

.panel-right {
    float: right;
}

.panel-small {
    width: 240px;
}

.panel-big {
    width: 460px;
}

button.filter .fa-check-square,
button.filter.style-success .fa-square {
    display: none;
}

button.filter .fa-square,
button.filter.style-success .fa-check-square {
    display: inline-block;
}

#filters .filter {
    font-size: 0.9em;
    width: 134px;
    margin: 0 5px 0 0;
}

#filters .filter:last-child {
    margin-right: 0;
}

table.admin-user-list {
	border-bottom: 1px solid black;
}

.user-management-nav-tab-container, .online-orders-nav-tab-container {
    height: 510px;
    width: 100%;
	overflow: auto;
    padding: 0.5em;
    border-radius: 5px;
    background: #ddd;
    border: 1px solid #ccc;
}

.payment-nav-tab-container {
    height: 510px;
    overflow: hidden;
    width: 460px;
    padding: 0.5em;
    border-radius: 5px;
    background: #ddd;
    border: 1px solid #ccc;
}

.payment-money-container .numpad {
    padding: 0;
    width: 320px;
    float: right;
}

.payment-discounts-container {
    overflow: auto;
    padding: 0.5em;
    -webkit-overflow-scrolling: touch;
}

.payment-prepaid-container button,
.payment-discounts-container button {
    width: 48%;
    float: left;
    margin: 0 1% 1em 1%;
    height: 70px;
    padding: 0;
}

.payment-nav-tab-container .payment-scan-voucher,
.payment-nav-tab-container .payment-redeem-deposit {
    width: 98%;
}

#pdq-waiting {
    width: 666px;
}

.pdqimage {
    margin: 0 auto 1em auto;
    display: block;
    height: 300px;
    width: auto;
}

#pdq-content {
    width: 250px;
    height: 300px;
    text-align: center;
    margin: 0 auto;
}

#pdq-content .icon-success {
    margin: 0.5em auto;
    font-size: 4em;
}

#pdq-notification {
    text-align: center;
    padding-bottom: 0.5em;
}

.icon-success .far {
    opacity: 1;
    transition: opacity 1s;
}

.icon-success .fa-check-circle {
    color: @olive;
    opacity: 0;
}

.clickthrough,
.clickthrough * {
    pointer-events: none;
}

.login {
    width: 400px;
    height: auto;
}

.login .notification {
    background: #378de5;
    position: absolute;
    top: -4.3em;
    padding: 1em;
    width: 400px;
    border-radius: 3px;
    left: -3px;
    font-size: 0.8em;
    border: 3px solid #84bbf3;
}

.login-notification {
    margin-left: 23px;
    float: left;
    width: 313px;
}

.login-notification span {
    width: 95%;
    position: relative;
    float: left;
}

#internet-offline-notification {
    background: #d62a2a;
    border: 3px solid #e26f6f;
}

#opening-tasks-notification {
    background: #378de5;
    border: 3px solid #84bbf3;
}

.login-button-icon {
    position: absolute;
    right: 2%;
    top: 35%;
    -webkit-font-smoothing: antialiased;
    font-size: 21px;
}

.login-danger-icon {
    position: absolute;
    left: 5%;
}

.login .pin {
    letter-spacing: 1.5em;
    padding: 0 0.5em 0 2em;
    width: 313px;
    margin: 10px 3px;
    font-weight: bold;
    text-align: center;
}

.login .failure {
    text-align: center;
    margin: 0;
    height: 14px;
    clear: both;
    padding-top: 0.5em;
}

.login-footer {
    display: flex;
    float: left;
    width: 100%;
    font-size: 13px;
    font-weight: bold;
    color: @balsamic;
}

.login-logo {
    height: 25px;
    margin-left: 25px;
    float: left;
}

.login-version {
    display: block;
    width: 120px;
    float: left;
    margin: 11px 0 0 6px;
}

.login-reload {
    float: right;
    display: block;
    margin: 11px 5px 0 0;
    text-align: right;
}

.login-till-identifier {
  padding-right: 18px;
  text-align: right;
  width: 40%;

  & p {
    text-align: center;
  }
}

.lockscreen .login {
    background: none;
    box-shadow: none;
    border: none;
}

.lockscreen .login h1 {
    color: #fff;
    text-shadow: none;
    margin-top: 2.5em;
}

.lockscreen .b-modal {
    background-color: rgba(0, 0, 0, 0.8);
}

.lockscreen .b-modal:after {
    content: '';
    position: absolute;
    top: 1em;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background: url(/images/locked.png) center center no-repeat;
    opacity: 1 !important;
}

#offline-mode p {
    margin-bottom: 1em;
}

.offline-animation {
    display: block;
    margin: 0 auto;
}

.cash-amount {
    font-size: 32px;
    padding: 0 0.5em;
    width: 313px;
    margin: 10px 3px;
    text-align: right;
    height: 39px;
}

.clocking-prompt {
    width: 580px;
}

.clocking-prompt p {
    margin-bottom: 1em;
}

.item-question,
.payment-types {
    padding: 1em;
}

.contact-cloud {
    width: 350px;
}

.contact-cloud .message {
    text-align: center;
}

p.progress-bar-message {
  font-size: 0.9em;
  font-weight: normal;
  color: @balsamic;
  text-align: left;
  margin-top: 1em;
}

.progress-bar-border {
  border: 1px solid @kale;
  border-radius: @border-radius-preferred;
}

.progress-bar-solid {
  background-color: @olive;
  text-align: center;
  margin-right: 1em;
  padding: 0.5em;
  border-radius: @border-radius-preferred;
  height: 2em;
}


/* Kobas olive pulse loading thing.*/
.circle {

    opacity: .9;
    background: #d7df21;
    border-radius: 40px;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.circle1 {
    background: url(/images/olive.png) center center no-repeat;
    opacity: .9;
    width: 50px;
    height: 50px;
    margin: -65px auto 30px auto;
    margin-top: -65px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: scale(0.8, 0.8);
        opacity: 0.8;
    }
    50% {
        -moz-transform: scale(1, 1);
        opacity: 1;
    }
    100% {
        -moz-transform: scale(0.8, 0.8);
        opacity: 0.8;
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: scale(0.8, 0.8);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0.8, 0.8);
        opacity: 0.8;
    }
}

button.item-question-answer,
button.payment-type {
    width: 31.3%;
    margin: 5px 1% 5px 1%;
    float: left;
    height: 70px;
    padding: 0;
}
button.item-question-answer {
    padding: 10px;
    position: relative;
    transition: border 100ms ease;
}

.tab-list-tools {
    border-bottom: 2px solid #ccc;
    margin-bottom: 1em;
}

.tab-list-tools button {
    width: 31.33%;
    float: left;
    margin: 0 1% 1em 1%;
}

.tab-list-container {
    display: none;
    height: 70%;
    overflow: auto;
}

.view-tab-tools .printed:after,
.tab-list-tab.printed:after {
    content: 'Printed';
    font-family: sans-serif;
    display: block;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    background: #0000ff;
    color: #fff;
    width: 120%;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    text-shadow: none;
    top: 20%;
    right: -50%;
}

.tab-list-order {
    height: 404px;
    max-height: 404px;
}

.tab-list-clear-order {
    width: 100%;
    margin: 1em 0 1em 0;
}

.tab-list-order-line-item {
    font-size: 0.8em;
    padding: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tab-list-order-line-item:nth-child(odd) {
    background-color: #fff;
}

.tab-list-tab .spendbar {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #9DCE2C;
    height: 3px;
}

.tab-list-tab .warn1 {
    background: yellow;
}

.tab-list-tab .warn2 {
    background: orange;
}

.tab-list-tab .over {
    background: red !important;
}

.tab-list-tab.tab-owned:before {
    content: '';
    background: url(../images/white-star-nobg.png) no-repeat;
    width: 12px;
    height: 13px;
    position: absolute;
    top: 3px;
    left: 3px;
}

.tab-list-tab .olive {
    display: block;
    width: 12px;
    height: 13px;
    background: url(../images/white-olive-nobg.png) no-repeat;
    position: absolute;
    bottom: 6px;
    left: 4px;
}

.tab-list-tab .accommodation {
    display: block;
    width: 12px;
    height: 13px;
    position: absolute;
    bottom: 7px;
    right: 11px;
    font-size: 15px;
    color: #d7df21;
}

.tab-list-tab .olive.match {
    background: url(../images/green-olive-nobg.png) no-repeat;
}

.tab-list-container.show-page {
    display: block;
}

.tab-list-container button {
    width: 31.33%;
    float: left;
    margin: 0 1% 1em 1%;
    padding: 0;
    height: 70px;
}

.user-list-container button {
    width: 31.33%;
    float: left;
    margin: 0 1% 1em 1%;
    padding: 0;
    height: 70px;
}

.old-session .view-last-order {
    display: none;
}

.first-page .previous-page,
.last-page .next-page,
.only-page .next-page,
.only-page .previous-page {
    visibility: hidden;
}

.tab-properties label {
    width: 100%;
    display: block;
}

.tab-name-container {
    width: 55%;
    float: left;
    margin-right: 5%;
}

.tab-name-container select {
    padding: 0.2em;
    height: 32px;
    width: 100%;
}

.tab-covers-container {
    width: 40%;
    float: left;
}

.tab-covers-container select {
    padding: 0.2em;
    height: 32px;
    width: 100%;
}

.tab-name-input, .tab-covers {
    width: 100%;
    margin: 10px 0;
}

.back-button {
    width: 160px;
    padding: 0.3em;
    height: auto;
    margin-left: 1%;
}

.select-tab-owner-container {
    float: right;
    width: 140px;

}

.select-tab-owner-container p {
    line-height: 30px;
    text-align: right;
}

.select-tab-owner-container select {
    width: 140px;
    font-size: 14px;
    height: 30px;
}

.view-tab-tools {
    clear: both;
}

.view-tab-tools button,
.view-tab-tools .drop-menu-container {
    width: 23%;
    margin: 1%;
    float: left;
    height: 50px;
    padding: 0;
}

.view-tab-tools button.small-button,
.view-tab-tools .drop-menu-container.small-button {
    width: 18%;
}

.drop-menu-container > button {
    width: 100%;
    margin: 0;
}

.view-tab-tools button.long-button {
    width: 31.3%;
}

.view-tab-tools button.short-button {
    width: 14.6%;
}

.paid-message {
    border: 3px solid @olive;
    font-weight: bold;
    font-size: 32px;
    padding: 0.2em 1em;
    float: right;
    transform: rotate(10deg);
    -webkit-transform: rotate(8deg);
    margin-right: 20px;
    border-radius: 6px;
}

.place-selectors .panel-small {
    width: 48%;
    margin: 0 1%;
    float: left;
}

.place-selectors .well {
    margin-bottom: 1em;
}

.place-selectors .well-scroll {
    height: 545px;
}

.place-selectors .panel-small button {
    width: 100%;
    margin: 0 0 0.5em 0;
    position: relative;
}

.place-selectors .panel-small button:last-child {
    margin-bottom: 0;
}

.place-selectors .capacity {
    position: absolute;
    top: 2px;
    left: 4px;
}

.table-active-tabs:after{
    content: attr(table-active-tab-count);
    font-family: sans-serif;
    border: 1px solid #fff;
    display: block;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    background: #378de5;
    width: 120%;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    text-shadow: none;
    top: 20%;
    right: -50%;
}

.popup-confirm-controls .button-left {
    float: left;
    margin-left: 0;
}

button.coming-soon {
    background: #bbb;
}

button.coming-soon:after {
    content: 'SOON';
    font-family: sans-serif;
    display: block;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    background: #ff9900;
    width: 120%;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    text-shadow: none;
    top: 25%;
    right: -45%;
}

.admin-menu-stat.tab-created-date,
.admin-menu-stat.tab-closed-date {
    width: 31.33%;
    margin: 0 1% 1em;
    text-align: left;
}

.tab-order-container {
    height: 348px;
    width: 39%;
    margin: 0 2% 0 0;
    float: left;
    clear: left;
    position: relative;
}

.tab-order-lineItems-container {
    width: 59%;
    margin: 0;
    float: left;
    position: relative;
}

.tab-order-scroll table {
    width: 100%;
}

.tab-order-scroll {
    clear: both;
    float: left;
    width: 100%;
    margin-top: 0;
    height: 348px;
}

.tab-order-item-scroll {
    height: 280px;
    margin-top: 0.5em;
}

.tab-order-shadow {
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

.tab-event,
.tab-order-items {
    font-size: 14px;
    background: #eeeeee;
}

.tab-event td,
.tab-order-items td {
    padding: 1em 0.5em;
    height: 62px;
    position: relative;
}

.tab-order-items .price-adjusted {
    position: absolute;
    transform: translate(-16px, 2px);
}

.order-item-notes-button {
    font-size: 15px;
    padding: 0 5px;
}
.order-item-notes {
    display: none;
    /*border-left: 3px solid #096cd2;*/
    border-left: 5px solid #d7df21;
    border-top: 1px solid #d7df21;
    background: #eeeeee;
}
.order-item-notes td:nth-child(1) {
    padding-left: 10px;
}
.order-item-notes-even {
    background: white;
}
tr.notes-table-spacing {
    height: 5px;
    display: none;
}
.order-item-notes-edit, .order-notes-edit {
    padding-top: 0;
    padding-bottom: 0;
    position: static;
    height: 40px;
    width: 80px;
    font-size: 16px;
    float: right;
    margin-right: 6px;
}
.order-notes-area {
    display: none;
    background: white;
    padding: 5px;
    padding-right: 0;
    margin-bottom: 5px;
    border-left: 5px solid #d7df21;
    /*font-style: italic;*/
    /*border-left: 3px solid #096cd2;*/
    /*color: #2e87e2;*/
}
.notes-area {
    font-style: italic;
    padding-left: 5px;
}
.tab-kitcheninstruction {
    background: #ddd !important;
    color: #666;
}

.tab-kitcheninstruction td {
    padding: 0.5em;
}

.tab-event .fa-comment {
    color: #666;
}

.tab-order-item-promos td {
    padding: 0.5em 0.5em;
    background: #333;
    font-weight: bold;
    font-size: 16px;
    color: #ff9900;
}

.tab-reminder,
.tab-reservation,
.tab-reservation-booking,
.tab-loyalty,
.tab-gift-card {
    height: 48px;
}

.tab-reservation-booking {
    height: 100%;
    min-height: 48px;
}

.tab-reminder .reminder,
.tab-reservation-booking .reservation,
.tab-reservation .reservation,
.tab-gift-card .gift-card,
.tab-loyalty .loyalty {
    border-bottom: none;
    margin-bottom: 0.5em;
}

.tab-gift-card {
    height: 51px;
}

.tab-reminder .reminder td,
.tab-reservation-booking .reservation td,
.tab-reservation .reservation td,
.tab-loyalty .loyalty td {
    padding: 0.5em 0.5em;
    font-weight: bold;
    font-size: 16px;
}

table.reservation {
    table-layout: fixed;
}

.gift-card{
    font-size: 0.9em;
    font-weight:normal;
    margin-bottom: 3px;
    color: #332;
    background: #ddd;
    border: 1px solid #ccc;
}

.gift-card-title {
    font-weight: bold;
    padding-left: 0.2em;
}

.gift-card-info {
    font-size: 0.9em;
    padding-left: 0.5em;
}

.tab-gift-card .gift-card td {
    padding: 0.5em 0.5em;
    font-size: 16px;
}
.gift-card-icon {
    color:  #378de5;
}
.gift-card-remove-from-tab {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    margin: 0;
    float: left;
    display: inline;
    padding: 0.3em 0;
    color: #ffffff;
    position: relative;
    font-size: 0.8em;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    background: #378de5;
}

#pay-remaining-gift-card {
    background: #378de5;
}

#gift-card-basket-value{
    position: relative;
    padding-top: 0;
    padding-left: 2.5em;
    text-transform: none;
    top: -0.5em;
    font-size: 0.75em;
}

.reservation {
    background: #378de5;
    border-bottom: 3px solid #000;
}

.reservation img {
    margin-right: 0.5em;
    float: left;
}

.reservation td, td.reservation {
    color: #ffffff;
    font-weight: bold;
    padding: 0.5em 0;
    font-size: 0.9em;
    line-height: 23px;
    text-shadow: 1px 1px #378de5;
}

.table-style td.reservation {
    font-size: 1.2em;
    border-left: 1px solid #378de5;
}

.reservation-back-button, .online-orders-detail-view-back-button {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 5%, #dddddd 100%);
    background: -webkit-linear-gradient(top, #ffffff 5%, #dddddd 100%);
    background: linear-gradient(to bottom, #ffffff 5%, #dddddd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd', GradientType=0);
    border: 1px solid #888888;
    font-size: 15px;
    color: #222222;
    margin-bottom: 2px;
    text-shadow: none;
}

.reservation-time-selected {
    display: block;
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
}
.reservation-pagination-info {
    text-align: center;
    font-style: italic;
    padding: 1em;
}


.reservation-load-more {
    width: 50%;
    position: relative;
    text-align: center;
    margin: 0 auto;
    display: block;
    height: 25px;
    padding: 0;
}


tr.reservation-passed td {
    opacity: 0.5;
}

tr.reservation-passed td:last-child {
    opacity: 1;
}

#reservations button[disabled] {
    background: #bbb;
    color: #888;
    text-shadow: none;
}

#reservation-create-button {
    background: #333333;
    background: -moz-linear-gradient(top, #333333 5%, #111111 100%);
    background: -webkit-linear-gradient(top, #333333 5%, #111111 100%);
    background: linear-gradient(to bottom, #333333 5%, #111111 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#111111', GradientType=0);
    border: none;
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 2px;
    text-shadow: none;
    float: right;
}

.res-customer-search-container {
    position: relative;
}

#res-customer-search-input {
    font-size: 1.5em;
    text-align: center;
    width: 100%;
    height: 51px;
    float: left;
    display: block;
}

.reservation-new-customer-container {
    width: 47.5%;
    float: left;
}

.reservation-new-customer-container#left {
    margin-right: 5%;
}

.reservation-input {
    width: 100%;
    margin: 10px 0;
    padding: 1.2em;
}

.reservation-warning {
    margin-bottom: 5px;
}

.reservation-field-was-required {
    border: 1px solid red;
}

.reservation-tag-wrapper {
    max-width: 200px;
}

.reservation-tag-display {
    float: left;
}

/** Reservation Create  **/
.res-icon-holder {
    position: relative;
    width: 100%;
    height: 100%;
}

.res-form-icon-right {
    position: absolute;
    top: 1em;
    right: 1em;
    font-size: 20px;
}

.res-form-icon-left {
    position: absolute;
    top: 1em;
    left: 1em;
    font-size: 20px;
}

.res-checkbox-label {
    margin-right: 10px;
}

.res-checkbox {
    width: 25px;
    top: 10px;
    position: relative;
    margin-right: 10px;
}

/** Reservation Create Time picker */
.reservation-time-wrapper {
    position: relative;
    width: 100%;
    height: 125px;
    display: block;
}

.reservation-time-wrapper .left, .reservation-time-wrapper .right {
    position: relative;
    width: 50%;
    float: left;
    display: block;
}

.input-time-wrap {
    width: 45%;
    float: left;
}

.input-time-increase, .input-time-decrease {
    width: 25px;
    margin: 0 auto;
}

.input-time-wrap input {
    width: 80%;
    margin: 0 auto;
    position: relative;
    display: block;
    text-align: center;
}

.input-time-increase button, .input-time-decrease button {
    background: none;
    color: black;
    margin: 0;
    padding: 0 5px;
}

/** Reservation Confirm **/
#reservation-create-customer .wrapper .left, #reservation-create-customer .wrapper .right {
    width: 45%;
    position: relative;
    float: left;
    margin-left: 2.5%;
}

.reservation-confirm-table {
    width: 100%;
}

.reservation-confirm-table thead tr th {
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    padding-bottom: 10px;
}

.reservation-confirm-table tbody tr td:first-child {
    font-weight: bold;
    width: 75px;
    padding: 5px;
}

/* Print Res done */
#print-reservation.printed:after {
    content: 'Printed';
    font-family: sans-serif;
    display: block;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    background: #0000ff;
    color: #fff;
    width: 120%;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    text-shadow: none;
    top: 20%;
    right: -48%;
}

/* Multi select PISCs */
.mpisc-question-answer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mpisc-icon-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    justify-items: flex-end;
    align-items: flex-end;
    bottom: 10px;
}

.mpisc-icon {
    padding: 0 5px;
    font-size: 12px;
    color: #d7df21;
    flex: 0 0 22px;
}

.mpisc-info-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-end;
    margin-top: 10px;
    font-size: 18px;
    border-top: 2px solid #378de5;
    border-bottom: 2px solid #378de5;
}

.mpisc-info-container.amount-error{
    border-top: 2px solid red;
    border-bottom: 2px solid red;
}

.mpisc-info-container.amount-success{
    border-top: 2px solid green;
    border-bottom: 2px solid green;
}

.mpisc-max-picked {
    border: 3px solid #d7df21;
}

.mpisc-clear-item-mode {
    border: 4px solid #c8272d;
}

.mpisc-clear-item-text-container {
    display: none;
    flex-flow: row wrap;
    justify-content: center;
    background: #c8272d;
    color: white;
    margin-top: 7px;
    padding: 5px;
    font-weight: bold;
    font-size: 18px;
}

.mpsic-info-wrapper {
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
    width: 200px;
    align-items: center;
}

.mpisc-checkbox {
    color: #9dce2c;
    font-size: 28px;
    opacity: 0;
}

.mpisc-checkbox .fa-exclamation-circle {
    color: red;
}

.next-item-question .fa-exclamation-circle {
    color: red;
    margin-left: 9px;
    font-size: 16px;
}

.mpisc-answer-name {
    flex: 1 1 auto;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    max-height: 2em;
    line-height: 1em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/** Date picker **/
.pika-day {
    font-size: 16px;
    line-height: 20px;
    padding: 0.5em;
}

.pika-lendar {
    width: 300px;
}

.tab-order-item-promos:last-child {
    border-bottom: 1px solid #ccc;
}

.tab-discount {
    background: #333;
    color: #ff9900;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 2px;
    font-weight: bold;
    display: block;
}

.tab-split-selected-items {
    position: absolute;
    background: #9dce2c;
    font-size: 12px;
    border-radius: 2px;
    font-weight: bold;
    display: block;
    color: white;
    padding: 2px 3px;
    right: 5px;
    bottom: 8px;
}
.tabs-split-selected-item-discount {
    bottom:14px;
}

.tab-event td:nth-child(2),
.tab-order-item-promos td.right {
    text-align: right;
    vertical-align: top;
}

.tab-order-items td:nth-child(2) {
    text-align: right;
}



.tab-order-items td.bcomp span,
.tab-order-items td.bvoid span,
.tab-order-items td.bwaste span,
.tab-order-items td.bdirector span {
    text-decoration: line-through;
}

.alt-rows:nth-child(odd),
.alt-rows:nth-child(odd) {
    background: #fff;
}

.alt-rows-strict{
    background: #fff;
}

.tab-event.selected {
    outline: 2px solid @olive;
    background: #666;
    color: #fff;
}

.tag {
    color: #333;
    background: @olive;
    padding: 0.1em 0;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    border-radius: 3px;
    width: 70px;
}

.tag.crit {
    color: #fff;
    background: #990000;
    width: 60px;
}

.tag.mini-tag {
    width: 70px;
    font-weight: normal;
    font-size: 9px;
    line-height: 20px;
    vertical-align: top;
}

.tag.grey {
    background: #666;
    color: #ccc;
}

#tab-controls h1 {
    margin-left: 170px;
    margin-right: 170px;
}

.orderTitle {
    font-size: 10px;
    padding: 1em 0.5em;
    margin: 0 1% 1em 1%;
}

.orderTitle strong {
    font-size: 16px;
    line-height: 16px;
}

.orderTitle .tab-details-tiny {
    width: 10%;
    display: inline-block;
    text-align: center;
    float: left;
}

.orderTitle .tab-details-sml {
    width: 20%;
    display: inline-block;
    text-align: center;
    float: left;
}

.orderTitle .tab-details-wide {
    width: 30%;
    display: inline-block;
    text-align: center;
    float: left;
}

.orderTitle .paymentAmount{
  width: 40%;
  padding-top: 0.4em;
  text-align: center;
  overflow:hidden;
  text-overflow:ellipsis;
}

.orderTitle .paymentDescription{
  padding-top: 0.6em;
  width: 40%
}

.unset-warning {
    position: relative;
    color: red;
}

.popover {
    border: 1px solid #ccc;
    color: #333;
    background: #fff;
    position: absolute;
    width: 130px;
    margin-left: -60px;
    left: 50%;
    font-size: 0.8em;
    opacity: 0;
    top: 40px;
    padding: 8px;
    z-index: 2;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    transition: top 0.5s linear, opacity 0.5s linear;
}

.popover:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ffffff transparent;
}

.popover.show {
    top: 30px;
    opacity: 1;
}

.popover.shown {
    top: -10px;
}

.highlight {
    background-color: transparent;
    padding: 0 2%;
    -webkit-animation: fadein 4s ease-in-out -2s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
    -moz-animation: fadein 4s ease-in-out -2s infinite alternate;
    animation: fadein 4s ease-in-out -2s infinite alternate;
    padding: 1px 2px;
}

@-webkit-keyframes fadein {
    0% {
        background: transparent;
    }
    50% {
        background: #eb0d0d;
    }
    100% {
        background: transparent;
    }
}

@-moz-keyframes fadein {
    0% {
        background: transparent;
    }
    50% {
        background: #eb0d0d;
    }
    100% {
        background: transparent;
    }
}

@keyframes fadein {
    0% {
        background: transparent;
    }
    50% {
        background: #eb0d0d;
    }
    100% {
        background: transparent;
    }
}

.orderItemTitle {
    float: left;
    margin: 0;
    line-height: 20px;
    font-size: 14px;
    width: 200px;
}

.orderItemTitle span {
    float: left;
    display: block;
    width: 80px;
    text-align: left;
}

.order-paid #order-admin-menu-container,
.order-paid .admin-tab-order-item-container {
    display: none;
}

#order-admin-menu-container {
    float: right;
}

#order-admin-menu {
    width:350px;
}
#order-admin-menu  button {
    min-width:150px;
}
#order-admin-menu  button:nth-child(odd) {
    margin: 0.7em 0 0 1em;
}

.admin-tab-order-item-container {
    text-align: right;
    width: 100px;
}

.admining .admin-tab-order-item-container {
    display: table-cell;
}

.admin-tab-order-price,
.admin-tab-order-item {
    padding-top: 0;
    padding-bottom: 0;
    position: static;
    height: 40px;
    width: 80px;
    font-size: 16px;
}

#admin-summary-userx {
    margin-right: 10px;
}
#admin-return-userx {
    float:right;
}
.till_x_summary_figure {
    text-align:right;
}

/* Todo sean: move to somewhere where doesn't need important */
.till_x_summary_heading_one {
    background: #151515 !important;
}


#qrInput {
    display: none;
}

.drop-menu-container {
    position: relative;
}

.drop-menu-container .drop-menu {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #111111;
    border-radius: 2px 0 2px 2px;
    margin-top: -3px;
    padding: 0 0 1em 0;
    z-index: 1;
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.drop-menu-container.menu-show .drop-menu {
    display: block;
}

.drop-menu-container.menu-show .drop-menu-button {
    border-radius: 2px 2px 0 0px;
    /*border-left: 3px solid #000;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    border-bottom: 3px solid #111111;*/
    z-index: 2;
}

.drop-menu-container.menu-show .drop-menu-button:focus {
    outline: none;
}

.drop-menu button {
    min-width: 200px;
    margin: 0.7em 1em 0 1em;
    font-size: 0.9em;
    border: 1px solid #333;
}

#order-admin-cancel-button {
    display: none;
}

.admining .drop-menu-button {
    display: none;
}

.admining #order-admin-cancel-button {
    display: block;
}

.tab-item-admin-col1 {
    width: 40%;
    float: left;
    margin: 1em 0 0 0;
}

.tab-item-admin-col1 button {
    width: 100%;
}

.tab-item-admin-col2 {
    width: 55%;
    float: left;
    margin: 35px 5% 0 0;
    clear: left;
}

#view-special-order-container button {
    width: 48%;
    margin: 0.5em 0.8%;
}

.usageListTable td {
    padding: 4px;
    font-size: 0.8em;
}

.usageListTable .bottom-row {
    border-bottom: 1px solid #ccc;
}

.usageListTable h2 {
    text-align: center;
    margin: 0;
    padding: 0.5em;
}

.usage-notes {
    width: 100%;
    height: 100px;
    font-size: 1.2em;
    float: left;
    padding: 0.5em;
    margin: 1em 0 1em 0;
}

input.search {
    background: #fff url('../images/search.png') no-repeat 410px center;
}

.hint,
.warning {
    color: #fff;
    padding: 0.5em;
    border-radius: 4px;
    clear: both;
}

.hint.has-button {
    line-height: 2em;
}

.hint {
  background: #378de5;
}

.warning {
    background: #ce0100;
}

.popup-confirm-controls button {
    float: right;
    margin-left: 1em;
}

.adjust-item-price-controls {
    display: flex;
    justify-content: space-between;
}

button.adjust-price-control-button {
    float: none;
}

.popup-confirm-controls .style-success {
    width: 150px;
}

.popup-message {
    float: right;
    text-align: right;
    margin-right: 1em;
    font-weight: bold;
    line-height: 3.2em;
}

.button-confirm {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    margin-top: -12px;

}

.part-payment-breakdown .orderTitle button {
    width: 19%;
}

.part-payment-breakdown .orderTitle .tab-details-sml {
    padding-top: 7px;
}

.part-payment-breakdown .well-scroll {
    max-height: 400px;
}

.part-payment-breakdown {
  .refund{
    font-weight: bold;
    background: @stilton !important;
    color: @white !important;
    margin-top: 0;
    padding-top:0;
  }
}

.hide-due {
    display: none;
}

.hide-credit {
    display: block;
}

#promo-container, #discount-container {
    position: relative;
}

.promo-list-container {
    height: 200px;
}

.no-promos-message {
    font-size: 1.3em;
    font-weight: bold;
    color: #999;
    text-align: center;
    display: none;
    margin-top: 3.6em;
}

.promo-list-container.no-promos .no-promos-message {
    display: block;
}

.promo-list-container.discounts.no-promos .no-promos-message {
    display: block;
}

.promo-list-container.show-page {
    display: block;
}

.promo-list-container button {
    width: 31.33%;
    float: left;
    margin: 0 1% 1em 1%;
    padding: 0;
    height: 70px;
}

.promo-list-container button .fa {
    display: block;
    width: 12px;
    height: 13px;
    position: absolute;
    bottom: 6px;
    left: 4px;
}

.promo-list-fixed-discount{
    display:none;
}
.promo-autoapply {
    display: none;
}

.b-modal .containerFlex {
    display: flex !important;
}

.lastOrderContainer {
    width: 100%;
}

.show-autoapply-discounts .promo-autoapply {
    display: block;
}

.show-autoapply-discounts-message {
    display: none;
}

.show-autoapply-discounts .show-autoapply-discounts-message {
    display: inline;
}

.promo-list-tools {
    border-bottom: 2px solid #ccc;
    margin-bottom: 1em;
}

.promo-list-tools button {
    width: 31.33%;
    float: left;
    margin: 0 1% 1em 1%;
}

.promo-list-tools button.next-page {
    float: right;
}

#discount-container h1 {
    margin-top: 1em;
}

.scan-input-container {
    margin: 0 auto 1em auto;
}

.scan-input-container .failure {
    display: none;
    text-align: center;
    margin: 0 0 0.2em 0;
}

.scan-container {
    position: relative;
}

.barcode-input-container {
    position: relative;
}

.clear-scan,
.clear-barcode-input {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    padding: 0.5em 1em;
    font-weight: bold;
}

.scan-input,
.new-account-identifier,
.barcode-input {
    font-size: 1.5em;
    text-align: center;
    width: 100%;
    height: 51px;
    float: left;
    display: block;
}

.new-account-identifier {
    margin-top: 0em;
    margin-bottom: 1em;
}

.scan-input::-webkit-outer-spin-button,
.scan-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.new-account-details {
    padding-top: 1em;
}

#promo-scan {
    width: 560px;
}

#promo-scan.select-customer {
    width: inherit;
}

.cancel-scan-button {
    width: 25%;
    float: right;
}

#manual-input {
    width: 705px;
}


.use-camera-button {
    display: none;
}

.show-use-camera .scan-container {
    width: 75%;
    float: left;
}

.show-use-camera .use-camera-button {
    width: 23%;
    margin-left: 2%;
    margin-bottom: 1em;
    float: left;
    display: inline-block;
}

#promo-scan.show-use-camera {
    width: 660px;
}

.promoscope-tabOrder .promo-for-tabs:after {
    content: 'Tab promo';
    font-family: sans-serif;
    display: block;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    background: #0000ff;
    width: 120%;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    text-shadow: none;
    top: 28%;
    right: -50%;
}

.promo-unlocked {
    border: 4px solid #d7df21;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#535353+5,111111+100 */
    background: #535353; /* Old browsers */
    background: -moz-linear-gradient(top, #535353 5%, #111111 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #535353 5%, #111111 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #535353 5%, #111111 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#535353', endColorstr='#111111', GradientType=0); /* IE6-9 */

    position: relative;
    overflow: visible;
}

.promo-unlocked:before {
    content: '';
    display: inline-block;
    width: 23px;
    height: 22px;
    background: url(../images/tiny-olive.png) no-repeat;
    vertical-align: bottom;
    margin: 0 0.5em 0 0;
}

.voucher-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #333;
    color: #d7df21;
    text-align: right;
    font-size: 12px;
    padding: 0.1em 0.4em;
    border: 3px solid #d7df21;
    border-radius: 3px;
    box-shadow: 0px 1px #000;
}

.admin-menu-container .drop-menu-container,
.admin-menu-container button.admin-button {
    width: 21%;
    margin: 0em 2% 1em 2%;
    height: 77px;
    float: left;
    padding: 1em 0.5em;
}

.admin-menu-container .drop-menu-container {
    padding: 0;
}

.admin-menu-container button.drop-menu-button {
    width: 100%;
    padding: 0;
    margin: 0;
}

.admin-menu-container .drop-menu-container h2 {
    margin: 1em 1em 0em;
    color: #fff;
}

.admin-menu-container .drop-menu-container hr {
    margin: 1em;
    border-color: #333;
}

#admin-exittill {
    border-color: #fe1a00;
}

.isipad .drop-menu .admin-exittill {
    display: none;
}

.isipad .admin-exittill,
.isipad .admin-nosale {
    opacity: 0;
}

.admin-this-session {
    margin-bottom: 2em;
}

.admin-tools {
    margin-bottom: 2em;
}

.admin-menu-user {
    float: right;
    display: block;
    font-size: 12px;
    color: #666;
    font-weight: bold;
    margin: 12px 25px 0 0;
    text-align: right;
    width: 100%;
}

.admin-menu-stat {
    float: left;
    width: 21%;
    margin: 0 2% 1em 2%;
    font-size: 0.8em;
    text-align: center;
    white-space: nowrap;
}

.admin-menu-stat span {
    font-weight: bold;
}

.admin-manage-session-container button {
    width: 48%;
    margin: 1em 1%;
    height: 4.5em;
    float: left;
}

.sold-out-item-container {
    height: 400px;
}

.sold-out-item-container .item-button-container {
    height: 80px;
}

.sold-out-item-container h2 {
    clear: both;
    display: block;
    font-size: 18px;
    text-align: center;
}

.sold-out-item-container hr {
    margin: 1em 0;
    clear: both;
}

.sold-out-item-container button.soldout {
    background: #666;
}

.sold-out-item-container button.selected {
    color: #eee;
    text-shadow: none;
    border: none;
}

.sold-out-item-container button.selected:after {
    content: 'sold out';
    font-family: sans-serif;
    border: 1px solid #fff;
    display: block;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    background: #ff0000;
    width: 120%;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    text-shadow: none;
    top: 20%;
    right: -40%;
}

.sold-out-item-container button.soldout_remaining:after {
    content: attr(data-remaining);
    background: #378de5;
}

#admin-set-sold-out-count {
    width: 400px;
}

.table-wrapper {
    width: 710px;
    max-height: 565px;
    margin-top: 1em;
    border-width: 2px;
    padding: 0;
}

.tillx .drop-menu-container {
    float: right;
    margin-bottom: 1em;
}

.tillx-figure {
    font-size: 16px;
    width: 45%;
    float: left;
    margin: 0 0 1em 0;
}

.table-style .tillx-break {
    background: #666;
    padding: 0;
    height: 1px;
}

.tillx-figure span {
    float: right;
    text-align: right;
}

.tillx table tr.of-which td:nth-child(1) {
  text-transform: none;
}

.tillx table tr td:nth-child(1) {
    text-transform: capitalize;
}

.finalise-session {
    float: right;
    margin-right: 1em;
}

table.table-style {
    font-size: 14px;
}

.table-style td,
.table-style th {
    padding: 0.5em;
    border-right: 1px solid #000;
    border-left: 1px solid #ccc;
}

.table-style td {
    border-right: 1px solid #ccc;
    border-left: 1px solid #fff;
}

.table-style th {
    background: #333;
    color: #fff;
    vertical-align: text-bottom;
}

.table-style tr td:nth-child(1) {
    font-weight: bold;
}

.table-style tr:nth-child(even) td {
    background: #fff;
}

.table-style th.sortable strong {
    text-decoration: underline;
}

.table-child {
    width: 100%;
}

.table-child,
.table-child tr,
.table-child tr:nth-child(even) td,
.table-child tr td {
    background: none;
    border: none;
    padding: 0;
}

table.usageListTable tbody:nth-child(even) {
    background: #fff;
}
table.usageListTable.table-style tr:nth-child(even) td {
    background: none;
}

#tab-add-deposit,
#item-admin-adjust-price {
    width: 490px;
    justify-content: center;
}

#tab-add-deposit .numpad,
#item-admin-adjust-price .numpad {
    padding: 0 0 20px 0;
    width: 320px;
    margin: 0 auto;
    float: none;
}

#item-admin-adjust-price .numpad .cash-amount {
    margin-top: 0;
}

.popup-confirm-controls .reset-item-adjust-price {
    float: left;
    margin-left: 0;
}

.discount-waiting {
    color: black;
    font-size: 15px;
    padding: 0.5em 0.5em;
    margin: 0 1% 0 1%;
    text-align: center;
    display: none;
}

/* Scrollable Table - Fixed Header */
.table-scroll {
    border: 0;
    border-collapse: collapse;
}

.table-scroll tr {
    display: flex;
    flex: 1;
}

.table-scroll th {
    width: 1px;
    word-wrap: break-word;
}

.table-scroll td {
    width: 1px;
    word-wrap: break-word;
}

/*.table-scroll thead tr:after {*/
/*content: '';*/
/*overflow-y: scroll;*/
/*visibility: hidden;*/
/*height: 0;*/
/*}*/

.table-scroll thead th {
    display: block;
}

.table-scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    /* Note Sean: set height that you want on this as over-ride */
}

/* Reservations List table */
#reservationListTable {
    width: 100%;
}

#reservationListTable tbody {
    max-height: 440px;
}

#reservationListTable td.reservation-icon, #reservationListTable th.reservation-icon {
    flex-basis: 5%;
    flex-grow: 0;
}

#reservationListTable td.reservation-reference, #reservationListTable th.reservation-reference {
    flex-basis: 17%;
    flex-grow: 0;
}

#reservationListTable td.reservation-reference {
    font-weight: normal;
}

#reservationListTable td.reservation-date, #reservationListTable th.reservation-date {
    flex-basis: 20%;
    flex-grow: 0;
    text-align: center;
}

#reservationListTable td.reservation-customer, #reservationListTable th.reservation-customer {
    flex-basis: 25%;
    flex-grow: 0;
}

#reservationListTable td.reservation-guests, #reservationListTable th.reservation-guests {
    flex-basis: 11%;
    flex-grow: 0;
    text-align: center;
}

#reservationListTable td.reservation-tags, #reservationListTable th.reservation-tags {
    flex-basis: 10%;
    flex-grow: 0;
}

#reservationListTable td.reservation-view, #reservationListTable th.reservation-view {
    flex-basis: 12%;
    flex-grow: 0;
}

#reservationListTable td.reservation-tags i {
    float: left;
    margin-right: 3px;
}

#reservationListTable td.no-reservations {
    text-align: center;
    padding-top: 2em;
    flex-grow: 1;
}

.reservationTable td {
    word-break: break-all;
    word-wrap: normal;
}

.reservationTable .fixedAtTwentyFivePercent {
    width: 25%;
}

/* Comp reason */
.usage-wrapper {
    padding: 1em;
}

select#usage-reason {
    font-size: 24px;
    margin: 10px 0;
    width: 100%;
}
#comp-items-message {
    font-weight: bold;
    padding: 1em;
}

label.usage-reason, label.usage-note{
    display: block;
    float: left;
}

textarea#usage-note {
    width: 100%;
    height: 150px;
    font-size: 1.5em;
    float: left;
    padding: 0.5em;
    margin: 0 0 1em 0;
}

div.comp-item-wrapper {
    overflow-y: auto;
}

/* Zindex */

.lockscreen.offline .b-modal:after {
    background: none;
}

.lockscreen.offline .b-modal,
.b-modal {
    opacity: 1 !important;
    background: -webkit-repeating-linear-gradient(
            -45deg,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7) 8px,
            rgba(20, 20, 20, 0.7) 8px,
            rgba(20, 20, 20, 0.7) 19px
    );
    background: repeating-linear-gradient(
            -45deg,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7) 8px,
            rgba(20, 20, 20, 0.7) 8px,
            rgba(20, 20, 20, 0.7) 19px
    );
}

.b-modal:not(.topPop) {
    display: none !important;
}

.keyboard-qwerty {
    z-index: 3000;
}

.isipad .hideIpad {
    visibility: hidden;
}

.hideV2 {
    display: none;
}

#debug-menu {
    font-family: 'Courier New', Courier, monospace;
    background-color: #000;
    color: @olive !important;
}

#konsole {
    height: 500px;
    overflow: auto;
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

#konsole .json {
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    /*white-space: pre;*/
}

.mainheader {
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    color: #003e7e;
}

.subheader {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
}

.subheader2 {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    color: #003e7e;
}

/* Used to hide extra password inputs on login */
.stealthy {
    left: 0;
    margin: 0;
    max-height: 1px;
    max-width: 1px;
    opacity: 0;
    outline: none;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: -1;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/*
 * Padding/Margin controls
 */

/* no padding top */
.n-p-t {
    padding-top: 0;
}

.n-p-b {
    padding-bottom: 0;
}

.n-p-tb {
    padding-top: 0;
    padding-bottom: 0;
}

.n-m-t {
    margin-top: 0;
}

.n-m-b {
    margin-bottom: 0;
}

.n-m-tb {
    margin-top: 0;
    margin-bottom: 0;
}

/*
 * Float controls
 */
.f-l {
    float: left;
}

.f-r {
    float: right;
}

/*
@media only screen and (max-width: 550px) {
    .container {
        min-width: 0;
        width: 100%;
    }

    .col-1 {
        display: none;
    }

    .col-2 {
        width: 100%;
    }
}

@media only screen and (min-width: 551px) {
    .container {
        min-width: 0;
        width: 100%;
    }

    .col-1 {
        display: block;
        width: 100%;
    }

    .col-2 {
        display: none;
    }
}

@media only screen and (min-width: 1023px) {
    .container {
        min-width: 0;
        width: 100%;
    }

    .col-1 {
        display: block;
        width: 70%;
    }

    .col-2 {
        display: block;
        width: 30%;
    }
}*/

@media only screen and (max-width: 800px) {
    body {
        font-size: 0.8em;
    }

    .item-options {
        font-size: 16px;
    }
}

@media only screen and (min-width: 1280px) {
    body {
        font-size: 1.2em;
    }

    .item-options {
        font-size: 16px;
    }
}

@media only screen and (min-width: 1600px) {
    body {
        font-size: 1.5em;
    }

    .item-options {
        font-size: 16px;
    }
}

#consumption-mode-picker
{
	height:	270px;
}

#consumption-mode-picker button
{
	width: 			200px;
	height: 		100px;
	margin-left:	15px;
	margin-right: 	15px;
	font-size: 		24px;
}

#printer-simulator {
    width:              100%;
    height:             100%;
    overflow:           hidden;
}
.printer-simulator-container{
    position:           fixed;
    right:              -430px;
    top:                0;
    width:              430px;
    height:             100%;
    background-color:   white;
    z-index:            10003;
    transition:         transform 100ms ease;
}
.printer-simulator-container.printer-simulator-active{
    transform: translateX(-430px);
    border-left: 2px solid grey;
}

#printer-simulator-icon {
    display:            none;
    justify-content:    center;
    align-items:        center;

    /* // Hide by default */
    display:            none;

    position:           absolute;
    left:               -50px;
    top:                10px;

    width:              40px;
    height:             40px;
    font-size:          1.6em;

    cursor:             pointer;
    background-color:   grey;
    text-align:         center;
    border-radius:      5px;
    z-index:            10003;
    border:             2px solid grey;
}
#printer-simulator-icon.printer-icon-active {
    background-color: #378de5;
    border: 2px solid #84bbf3;
}

.printer-simulator-container.printer-simulator-active #printer-simulator-icon .fa-print,
.printer-simulator-container #printer-simulator-icon .fa-times-circle{
    display: none;
}

.printer-simulator-container.printer-simulator-active #printer-simulator-icon .fa-times-circle,
.printer-simulator-container #printer-simulator-icon .fa-print{
    display: block;
}

#table-tab-clash
{
	width:  500px;
	height: 400px;
}

button.dallas-delete-key
{
	display: 		block;
	margin-bottom: 	3px;
}

.order-properties-tracking-checkbox-prompt
{
	font-weight:	bold;
	width:	43%;
}
#order-properties-tracking-checkbox
{
	width: 65px;
}

#order-reference-number
{
}

input.order-reference-number-banner
{
	height: 1.5em;
	margin-right:0.2em;
	margin-top:0em;
	width:90%;
}

input.order-reference-number-in-properties
{
	width: 30%;
}

#order-quick-reference
{
	margin-top: 4px;
	padding-left: 0.6em;
	padding-top:3px;
	background: #c8272d;
	padding-bottom: 3px;
	float:left;
	width: 100%;
}

#order-pending-alert {
	margin-top: 	4px;
	padding-left: 	0.6em;
	padding-top:	3px;
	padding-bottom: 3px;
	background: 	#c8272d;
	width: 			100%;
}

.order-properties-service-charge-prompt
{
    font-weight:	bold;
    width:	43%;
}

.order-properties-service-charge-view td {
    padding: 0.5em 0.5em;
    background: #333;
    font-weight: bold;
    font-size: 16px;
    color: #378de5;
}

.explainer
{
    font-size: 0.9em;
    margin-top: 0.5em;
}

#camera-modal {
    width: 685px;
}

#camera-qr-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30vmin;
    height: 30vmin;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

#camera-qr-overlay:after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 1);
    opacity: 0.45;
}

#camera-snapshot {
    display: none;
    position: absolute;
    top: 0;
    left: -11em;
    height: 10em;
    width: 10em;
}
#camera-debug-info {
    display: none;
    position: absolute;
    top: 11em;
    left: -11em;
    background: white;
}

#camera-loading-icon {
    display: none;
    margin: 0 auto;
    width: 200px;
}

#camera-flip-button {
    display: none;
}

#camera-unsupported-message {
    display: none;
}

.table-plan-container {
    background-color: #313131;
}

div.table-plan-header-container {
    display: flex;
    justify-content: center;
}

div.table-plan-header-left {
    flex: 1;
    text-align:left;
    margin-left: 12px;
}

div.table-plan-header-right {
    flex: 1;
    text-align: right;
    letter-spacing: 0.2em;
}

div.modal-header-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1em;
}

div.modal-header-left {
  flex: 1;
  text-align:left;
  margin-left: 0.2em;
  width: 33%;
}

div.modal-header-center {
  flex: 1;
  text-align: center;
  width: 33%;
}

div.modal-header-right {
  flex: 1;
  text-align: right;
  width: 33%;
}

td.bill-printed {
    background: @pickle !important;
}

#plan-view-selected-information {
    margin-left: 1em;
    float: left;
    color: @balsamic;
}

.tab-printed-lozenge {
    background: @kale;
    border-radius: 30%;
    color: white;
    padding: 6px;
}

/* 
   Kobas EPoS standard CSS supports screen heights of 768px (iPads) upwards.
   Below is CSS support for tablets with vertical screen height below 768px
   (mainly Android tablets)   
*/
@media (max-height: 767px) {
    #order-browser,
    #order-browser-inner,
    #admin-view-xreport,
    #tab-list,
    #tab-browser,
    #admin-set-sold-out,
    #add-payment,
    #add-payment .panel-left.panel-big,
    #add-payment .panel-right.panel-small,
    div#admin-user-management,
    #admin-user-management > div:first-of-type,
    .user-management-container,
    .online-orders-container,
    .tillx,
    #item-questions,
    #view-tab .view-tab,
    .item-question,
    #admin-online-orders > div:first-of-type,
    .online-orders-container
    {
        height: 100% !important;
    }

    #order-browser .table-wrapper {
        height: 73%;
    }

    .tillx .table-wrapper {
        height: 78%
    }

    #tab-browser .table-wrapper {
        height: 82%;
    }

    #tab-browser .table-wrapper tr {
        border-bottom: 1px solid lightgray;
    }

    #tab-list .tab-list-container {
        height: 65%;
    }

    .user-management-container .user-management-nav-tab-container {
        height: 68% !important;
    }

    .online-orders-container .online-orders-nav-tab-container {
        height: 80% !important;
    }

    #admin-set-sold-out #soldoutitemlist {
        height: 77% !important;
    }

    #promo-container .promo-list-container,
    #discount-container .promo-list-container {
        height: 165px;
    }

    #order-browser .table-wrapper {
        height: 67%;
    }

    .tillx .table-wrapper {
        height: 78%
    }

    #tab-browser .table-wrapper {
        height: 82%;
    }

    #login.popup {
        padding: 15px;
    }
    #login.popup .login-notification {
        padding: 0.6rem
    }
    #login.popup h1 {
        margin-bottom: 0.5em;
    }
    #login.popup .numpad  {
        padding: 10px 20px;
        min-height: 22.3em;
    }
    #login.popup .numpad .key  {
        height: 70px;
    }
    #login.popup .cashpad .key  {
        height: 76px;
    }
    .login .pin {
        margin: 8px 3px 8px;
    }

    #item-questions .item-question .well-scroll {
        height: 66% !important;
    }

    #item-admin-adjust-price .numpad .key {
        height: 65px;
    }

    #admin-menu  {
        padding: 15px;
    }
    #admin-menu h1  {
        margin-bottom: 0.5em;
    }
    #admin-menu .admin-menu-container {
        margin-bottom: 0.5em;
    }
    #admin-menu .admin-menu-container  .admin-this-session {
        margin-bottom: 0;
    }
    #admin-menu .admin-menu-container button.admin-button {
        height: 60px;
        font-size: 0.9em;
    }

    #admin-journal {
        height: 100% !important;
    }
    #admin-journal .table-wrapper {
        height: 92% !important;
    }

    #add-payment .cashpad .key,
    #add-payment .numpad .key,
    #reservation-payment-modal .add-payment-container .numpad .key,
    #reservation-payment-modal .cashpad .key {
        height: 15.8%;
    }

    #add-payment .panel-left.panel-big {
        display: flex;
        flex-flow: column;
    }

    #add-payment .payment-nav-tab-container.payment-money-container,
    #add-payment .payment-nav-tab-container.payment-discounts-container,
    #add-payment .payment-nav-tab-container.payment-prepaid-container,
    #add-payment .payment-breakdown-container,
    #reservation-payment-modal .add-payment-container,
    #add-payment .panel-left.panel-big  {
        height: 92% !important;
    }

    .payment-money-container .numpad,
    .payment-money-container .add-payment-container,
    .payment-money-container .add-payment,
    .payment-money-container .cashpad   {
        height: 100%;
    }

    .payment-money-container .cashpad  {
        display: flex;
        flex-flow: column;
    }

    #other-payment-types .well.well-scroll {
        height: 300px !important;
    }

    #reservation-payment-modal .payment-nav-tab-container {
        height: auto !important;
    }
    #reservation-payment-modal + .panel-right {
        height: 100% !important;
        #payment-breakdown {
            height: 92% !important;
        }
    }

    #reservations-table {
        max-height: calc(100% - 150px) !important;
        overflow: auto;
        overflow-x: hidden;
    }

    #tab-list .panel-left.panel-small,
    #tab-list .panel-right.panel-big,
    #tab-list .panel-left.panel-small .tab-list-order {
        height: 80% !important;
    }
    #tab-list .panel-right.panel-big .tab-list-container {
        height: 80%;
    }
    #view-tab .view-tab-tools button {
        height: 33px;
    }
    #tab-controls {
        height: 33%;
    }
    #tab-controls h1 {
        margin-bottom: 0.5em;
    }
    #view-order .lastOrderContainer .tab-order-item-scroll {
        min-height: 210px;
        max-height: 280px;
        height: auto;
    }
    #tab-events.tab-order-container {
        height: 270px;
    }
    #tab-events .tab-order-scroll {
        height: 100%;
    }
    #tab-order-lineItems .tab-order-item-scroll {
        max-height: 202px;
    }
    #online-order-detail-controls .well {
        max-height: calc(100% - 325px) !important;
    }
    .table-management-mode-detail-area {
        height: calc(100% - 120px) !important;
    }
    .table-manager-modal { 
        height: 92%;
    }
    .place-selectors .well-scroll {
        height: 100% !important;
    }
    #table-plan-view {
        height: calc(100% - 44px);
    }
    .table-plan-no-tables {
        height: 100%;
    }
    .table-plan-no-tables img {
        max-height: 93%;
    }
    #reservations {
        height: 100% !important;
        .well.well-scroll {
            max-height: calc(100% - 45px) !important;
        }
    }
    #reservation-create {
        height: calc(100% - 60px) !important;
        overflow: scroll;
        overflow-x: hidden;
    }
    .res-icon-holder {
        height: auto !important;
    }
    #view-tab.split-tab #tab-events + #tab-order-lineItems {
        height: 100% !important;
    }
    
    #view-tab.split-tab .view-tab {
        height: calc(100% - 125px) !important;
    }
    #view-tab.split-tab #tab-events .tab-order-scroll {
        height: 100% !important;
    }
    #view-tab.split-tab #tab-events + #tab-order-lineItems .tab-order-scroll {
        height: calc(100% - 68px) !important;
    }
}

.guestline-scroll {
    max-height: 410px;
    display: grid;
    gap: 10px;
    grid-template-columns: calc(33% - 5px) calc(33% - 5px) calc(33% - 5px);
    margin-bottom: 10px;
    button {
        cursor: pointer !important;
        min-height: 70px;
    }
    &-confirm {
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    }
}

#charge-to-room-take-payment {
    float: right;
    cursor: pointer !important;
}

div.snowflakes {
  z-index: 2;
  position: absolute;
}

@keyframes snowflakes-fall {
    0%{
        transform:translateY(0);
    }
    100%{
        transform:translateY(110vh);
    }
}
@keyframes snowflakes-shake {
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(80px);
    }
}

.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
  position:fixed;
  top:-10%;
  z-index:9999;
  -webkit-user-select:none;
  user-select:none;
  pointer-events: none;
  cursor:default;
  animation-name:snowflakes-shake;
  animation-duration:3s;
  animation-timing-function:ease-in-out;
  &, & .snowflake-inner {
    animation-iteration-count:infinite;
    animation-play-state:running
  }
  & .snowflake-inner {
    animation-duration:10s;
    animation-name:snowflakes-fall;
    animation-timing-function:linear;
  }
}


.snowflake:first-of-type {
    left:10%;
    animation-delay:1s
}
.snowflake:first-of-type .snowflake-inner,
.snowflake:nth-of-type(8) .snowflake-inner {
    animation-delay:1s;
}
.snowflake:nth-of-type(2) {
    left:20%;
    animation-delay:.5s;
}
.snowflake:nth-of-type(2) .snowflake-inner,
.snowflake:nth-of-type(6) .snowflake-inner {
    animation-delay:6s;
}
.snowflake:nth-of-type(3) {
    left:30%;
    animation-delay:2s;
}
.snowflake:nth-of-type(11) .snowflake-inner,
.snowflake:nth-of-type(3) .snowflake-inner {
    animation-delay:4s;
}
.snowflake:nth-of-type(4) {
    left:40%;animation-delay:2s;
}
.snowflake:nth-of-type(10) .snowflake-inner,
.snowflake:nth-of-type(4) .snowflake-inner {
    animation-delay:2s;
}
.snowflake:nth-of-type(5) {
    left:50%;animation-delay:3s;
}
.snowflake:nth-of-type(5) .snowflake-inner {
    animation-delay:8s;
}
.snowflake:nth-of-type(6) {
    left:60%;
    animation-delay:2s;
}
.snowflake:nth-of-type(7) {
    left:70%;
    animation-delay:1s;
}
.snowflake:nth-of-type(7) .snowflake-inner {
    animation-delay:2.5s;
}
.snowflake:nth-of-type(8) {
    left:80%;
    animation-delay:0s;
}
.snowflake:nth-of-type(9) {
    left:90%;
    animation-delay:1.5s;
}
.snowflake:nth-of-type(9) .snowflake-inner {
    animation-delay:3s;
}
.snowflake:nth-of-type(10) {
    left:25%;
    animation-delay:0s;
}
.snowflake:nth-of-type(11) {
    left:65%;
    animation-delay:2.5s;
}

#reservations{
  .customer-list-container{
    max-height: 600px;
  }
  .customer-details-container{
    padding-top: 20px;
  }
  .customer-profile{
    width:20%;
  }
  .table-wrapper{
    width: 78%;
    margin-top: 0;
    float:left;
  }
  .table-wrapper .well{
    padding: 0;
  }
  .table-wrapper button{
    margin-top: 5px;
    float:right;
  }
}
#admin-refund-positive-check{
  width: 500px;
  .popup-confirm-controls {
    button.continue:not(.tab) {
      width: 240px;
    }
    button.cancel-payment{
        width: 180px;
    }
  }
}

.notice-no-function {
  text-align: center;
  margin: 2em;
}

.width-pc-100 {
  width: 100%;
}

.width-pc-25 {
  width: 25%;
}

.width-pc-5 {
  width: 5%;
}

.text-smaller {
  font-size: 0.8em;
}

.emoji-ping-status {
  font-size: 0.4em;
}

.emoji-icon {
  font-size: 1.4em;
}

.emoji-icon-large {
  font-size: 1.8em;
}

th.devices-col1 {
  width: 30%;
}

th.devices-col-2 {
  width: 35%;
}

th.devices-col-3 {
  // Let this column width vary to take up any slack.
}

th.devices-col-4 {
  // Precise with for four emoji dots that represent pings.
  width: 60px;
}