body { cursor: url('../../assets/img/finger.png'), auto; }

/* Global */
input[type=search], input[type=text], input[type=password], input[type=datetime], input[type=datetime-local], input[type=date], input[type=month], input[type=time], input[type=week], input[type=number], input[type=email], input[type=url], input[type=tel], input[type=color], select, textarea {
    border: 1px solid #ccc;
    background-color: rgb(250, 255, 189);
    margin-right: 10px;
    padding : 2px 10px 2px 10px;
}
/* Andriod 14940: Welcome message on login page is centered for iOS devices but not Android ionic added title-left && header-item */
.title-left {
    text-align: center !important;
}
.header-item {
    left: 5px !important;  
    right: 5px !important;
}
.staff-header-right {
    right: 40px !important;
    position:absolute;
}
.staff-icon-right {
    right: 5px !important;
    position: absolute;
}
.item-divider, .no-wrap {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin: 0 !important;
}
.button.icon:not(.button-block) { border-radius: 50%!important; height: 34px; }
.item-divider { background-color: #fff; border: 0; }
.input-label-long {    padding: 0 10px 0 0 !important; width: 75%;} 
.custom-form .item { border: 0; overflow: visible; white-space:initial;}
.custom-form .item-input, .item-input textarea { padding: 10px; margin: 0 10px; }
.custom-form .item-select .input-label { padding: 0 10px 0 0!important;}
.custom-form .item-input input, .item-input textarea {
    border: 1px solid #ccc;
    background-color: rgb(250, 255, 189);
    width: 100%;
    max-width: 100%;
}
.custom-form .item-divider , hr { border-top: 1px solid #ccc!important; }
.item-select.no-label { margin: 0 7px 20px 7px; } 
.item-select.no-label .input-label { text-indent: -9999px; padding:0; }
.item-select.no-label select {
        width: 95%;
        max-width: 95%;
        margin: 0 12px;
        direction: ltr;
        border: 1px solid #ccc;
        padding: 3px 10px 3px 10px !important;
    } 
.item-select select { padding: 5px 30px 5px 5px!important; border: 1px solid #ccc; }
.button-non-spaced { margin: 0 0 -1px 0!important }
a {color:black;}
hr { border-top: 1px solid #ccc!important; }
.no-padding { padding:0!important; }
.no-margin { margin:0!important; }
.no-border {
    border:hidden;
}
.item-closer {
    margin-top: -10px !important;
}

.offline { font-weight: bold; color: red; text-align: center; font-size: 16px; }
.input-longlabel { min-width: 120px; }

.staff-table
{
    margin: 16px;
    font-size:16px;
    width:560px;
}

.staff-table tr:nth-child(even) {
    background-color: #f2f2f2;
}
    .staff-table td {
        padding: 8px;
        vertical-align: middle;
    }
        .staff-table td.left {
        }
    .staff-table td.right {
        text-align: right;
    }
        .staff-table td select {
            padding: 5px;
            padding-top: 2px;
            font-size: 16px;
            margin-right: 0px;
            display: inline-flex;
        }
        .staff-table td input {
            padding: 8px;
            font-size: 16px;        
            display: inline-flex;

        }

.checkbox input:checked + .checkbox-icon:before, .checkbox input:checked:before {
    border-color: transparent;
}
.staff-fullwidth {
    width: 100%;
}
.staff-width70 {
    width: 70%;
}
.staff-width40 {
    width: 40%;
}

.staff-left {
    float: left;
    line-height: 34px !important;
    display: inline-flex;
}
.staff-label {
    float: left;
}

.staff-right {
    float: right;
    text-align:right;
}
.staff-number {
    width: 80px;
    padding: 6px;
    margin-right: 0px !important;
}

.staff-checkbox {
    line-height: 34px !important;
    border-width: 0px;
    padding: 0px;
    display: inline-flex;
    background-color: transparent;
}

.staff-listcheckbox {
    line-height: 34px !important;
    border-width: 0px;
    float: right;
    padding: 0px;
    display: inline-flex;
    padding-left: 48px !important;
    background-color: transparent;
}

.item-text {
    white-space: normal;
}
.questionheader  { font-weight: bold; text-align:center; font-size: 20px;  margin: 10px 10px 10px 10px; }
.questioninfo  { margin: 0 10px 0 10px; font-size: 16px; }
.questionred  { margin: 0 10px 0 10px; color: red;  font-size: 16px; }
.info p { margin: 0 5px; font-weight: bold;}
.info  { margin: 0 5px; white-space :normal;}
.info1  { margin: 0 0px; white-space :normal;}
.redinfo  { margin: 0 5px; color: red;  }
.optional { margin: 0 5px 0 10px; white-space :normal }
.optionalmark {position: absolute; color: red;}
.terms  { margin: 10px 10px 10px 10px;  min-height : 50px; max-height:70%;}
.termsfooter  { bottom: 3px; position: absolute; width:100%; font-size: 16px; border-bottom:0px none ;}
.termsfooterlbl  { bottom: 80px; border: 0px none;  padding-left:5px; }
.termsfooterbtn {  bottom: 3px; min-height: 80px; font-size:16px; border-bottom:0px none ; }
.error { margin-left: 15px; color: red; text-align: center; font-size: 16px; }
.login-select {
    padding: 5px 5px 5px 5px !important;
    margin-right: 10px;
    border: 1px solid #ccc;
    min-width: 45%;
    width: 35%;
    background-color: rgb(250, 255, 189);
}
.input-label { min-width:35%;}
input[type=number] {
        background-color: rgb(250, 255, 189);
        margin-right: 15px;
        border: 1px solid #ccc;
        min-width: 50px;
        text-align: right;
    }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number].short-input-field {
        width: 150px;
        display: inline-block;
}
.password-rules {
    padding: 10px 5px 5px 5px !important;
    font-size: small;
    font-weight: bold;
    min-width: 400px;
    max-width: 600px;
    margin: auto;
    width: 60%;
}
    .password-rules ul {
        padding-left: 45px !important;
        font-size: small;
        font-weight: normal;
    }
    .password-rules ul li {
        font-size: small;
        list-style: disc;
    }
/* Default theme */
.master-header-bar, .master-bar-subheader, .bar-header, .bar-subheader {
    border-color: #01528c !important;
    background-color: #01528c !important;
    background-image: none !important;
    color: #fff;
    text-align: center;
    width: 100%;
    z-index: 10;
}

.client-logo {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    background: url('../img/mbm-sample.jpg') no-repeat center center;
    background-size: contain;
}

.master-header-bar, .bar-header, .bar-subheader { border-width: 0; background-color: #01528c!important; background-image: none!important; color: #fff;}
.side-menu-bar { background: rgb(249,169,60)!important; background: linear-gradient(to bottom, rgba(249,169,60,1) 1%,rgba(254,124,2,1) 100%)!important; }
.accordion-header { background-color: #7693AB!important; color: #fff!important }
.accordion-subheader { background-color: #87a0b5!important; color: #fff!important }
.master-header-bar .button .bar-subheader .button {
    min-height: 35px;
}
.bar-subheader .button.activated, .bar-positive .button.active {
    border-color: transparent !important;
    background: #002744;
    color: #fff;
}
.button.button-positive { border-color: transparent!important; background: #176aa3!important; color: #fff; }
.button.button-positive.activated, .button.button-positive.active { border-color: transparent!important; background: #145a89!important; color: #fff; }
.bar-subheader {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 44px;
    padding-top: 5px;
    z-index: 10;
}.button {
    border-color: #b2b2b2;
}
.list .button.active { border-color: #002744; background-color: #387ef5; color: #fff!important; }
.link { position: absolute; right: 10px; z-index: 99999; color: Blue; cursor: pointer; }
/* Slides */
.scroll, .slider {
    height: 100%;

}
.slider-pager-wrapper { z-index: 10; right: 5px; top: 13px; padding: 0 1px; position: absolute; z-index: 10; }
.slider-pager { text-align: left; top: 0; visibility: hidden }
.slider-pager .slider-pager-page, .slider-pager-placeholder .slider-pager-page { margin: 0; width: 13px!important; opacity: 1!important; font-size: 12px!important; }
.slider-pager-placeholder .slider-pager-page { opacity: .3!important; margin-right: 3px; }
.slider-pager .slider-pager-page.active { color: #fff!important; }

#open-calendar {    position: absolute;    right: 7px;    font-size: small; padding: 0px 10px 0px 10px; min-height:30px; max-height:30px; line-height: 30px;}

#shopping-cart-button { position: absolute; right:7px; top:-1px;font-size: xx-large;}

    #shopping-cart-button i.counter {
        min-width:15px;
        display: block;
        position: absolute;
        top: 7px;
        right: 0px;
        background: red;
        border-radius: 50%;
        color: #fff;
        font-weight: bold;
        font-size: 10px;
        line-height: normal;
        padding: 1px 1px 1px 1px;
        overflow: hidden;
        text-align: center;
        z-index: 100;
    }
    #shopping-cart-button i.counter-plus {
        width: 15px;
        height: 15px;
        display: block;
        position: absolute;
        top: 7px;
        right: -5px;
        color: #fff;
        font-size: 10px;
        line-height: normal;
        overflow: hidden;
        text-align: center;
        background: red;
        z-index: 90;
        border-radius: 50%;
    }
.list .item .item-name { overflow: visible; text-overflow: clip; white-space: normal; }
.list .item .item-price { line-height: normal!important; }
.list .item .item-info { line-height: normal!important; margin: 5px 0 0 0; }
.right-div { top: 8px; right : 10px;  position: absolute;}
.button-div { right : 0px; float:right; display: inline-block; position: absolute; text-align:right;}

.item-text-div { top: 42px; line-height: normal!important;  right : 0px; text-align:right; display: inline-block; position: absolute; font-size: 14px; color: #666;}

.item-status 
{   position:absolute;
    z-index: 5;
    left: -10px; 
    top: 0px;
}
.no-colour-code { left:0px;  }
.no-colour-border { margin-left: 10px;  }
.min-height-product { min-height:70px; }
.has-thumbnail { top: 10px; margin-left: 120px; float:left; position:absolute;}
.has-no-thumbnail { margin-left: 30px;}
.item-backorder { top:-3px; right:5px; position:absolute; color :Blue; padding:0px 5px 0px 5px; font-weight:bold;}
.icon-button      
{
    cursor: pointer;
    border-radius: 24px; 
    top: 8px;
    font-size: 14px;
    border : 1px solid #ccc;
    padding: 8px 13px 8px 13px;
    text-align:center;
}
.icon-text
{ 
    cursor: pointer;
    border-radius: 12px; 
    top: 8px;
    font-size: 14px;
    line-height: 32px;  
    border : 1px solid #ccc;
    padding: 8px 3px 8px 3px;
}

writing-mode: lr-tb;
.item.item-accordion.item {padding : 10px;}
.list .item.item-accordion { line-height: 38px; padding: 0; transition: 0.09s all linear; }
.list .item.item-accordion.ng-hide { line-height: 0; }
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove { display: block !important; }
.button-edit-item { right: 58px!important; }
.button-add-to-cart:before, .button-edit-item:before { font-size: 14px!important; line-height: 14px!important; }
.colour-code- { border-left: 1px solid #ccc; padding: 5px 5px 9px 5px;} /* No colour Min height to display button & Stock/Qty */
.colour-code-green { border-left: 10px solid green; padding: 5px 5px 5px 5px; }
.colour-code-orange { border-left: 10px solid orange; padding: 5px 5px 5px 5px; }
.colour-code-red { border-left: 10px solid red; padding: 5px 5px 5px 5px; }

.list .item-button-right { overflow: visible!important }
.list .item-button-right.has-edit-button { padding-right: 105px; }
.cart-item-qty { display: block; position: absolute; right: 17px; top: 60px; font-size: 12px; }
.cart-item-stock { display: block; position: absolute; right: 17px; top: 40px; font-size: 12px; }
.cart-message {
    margin-top: 10px;
    font-size: 12px;
    color: red;
    white-space: normal;
}
.advanced-status-label, .advanced-status-label .item {
    border-bottom: 0;
    text-align: center;
    padding-top: 0;
}
.advanced-status-label .item-name { display: none; }
.advanced-status-label .item-notes { border: 3px solid #ccc; min-width: 50%; max-width: 100%; display: inline-block; margin: 0 auto; border-top: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding: 10px; }
.advanced-status-label .item-notes p { font-size: 14px!important; font-weight: bold; color: #f00; }
.advanced-status-label .item-notes p span { color: #000; }
.tutorial { font-family: 'shadows_into_lightregular', cursive; font-size: 28px; margin:20px 20px 0 20px; }

/* Calendar */
i.calendar-icon-unpaid { display:none; color:green; }
.calendar-day-unpaid i.calendar-icon-unpaid { display:inline-block; position: absolute; left: 20px; top: 0; }
i.calendar-icon-paid { display:none; color:orange; }
.calendar-day-paid i.calendar-icon-paid { display:inline-block; position: absolute; left: 40px; top: 0; }
.calendar-day-today { border-color: red!important; margin-bottom: 0!important; border-width: 2px; }
.calendar-icon-today { color: red; }
.calendar-spacer, .calendar-footer, .calendar-footer .title { height: 30px; }
.calendar-footer .title { line-height: 22px!important; padding: 5px 0; text-align: left; }
.calendar-footer .title p { margin: 0; text-align:center;font-size:13px; }
.calendar-footer .title p i { display: inline-block; margin: 0 3px 0 10px; }
.calendar-footer .title p i:first-child { display: inline-block; margin-left:0; }
.today-unavailable { padding: 10px; font-size: 15px; text-align: center; color: red; font-weight: bold; border: 0; }

/* Shopping Cart */
.item.accordion-header { font-weight: bold; }
.side-menu-close { display: block; position: absolute; top: 0; z-index: 20; height: 100%; width: 100%; background-color: #fff; background-color:rgba(255,255,255,0.7); border:0; padding:0; margin:0; }
.side-menu-close .ion-icon { font-size: 40px; padding: 10px; background: #176aa3; color: #fff; }
.side-menu-close-left { left: 0; text-align: left; }
.side-menu-close-left .ion-icon { border-radius: 0 90px 90px 0; -moz-border-radius: 0 90px 90px 0; -webkit-border-radius: 0 90px 90px 0; }
.side-menu-close-right { right: 0; text-align: right; }
.side-menu-close-right .ion-icon { border-radius: 90px 0 0 90px; -moz-border-radius: 90px 0 0 90px; -webkit-border-radius: 90px 0 0 90px; }

.shopping-cart-item {	padding: 0; }
.shopping-cart-item .shopping-cart-item-buttons { margin-top: 5px; width: 140px; margin-bottom: -10px !important; overflow: visible; }
form[name=shopping-cart-package] .shopping-cart-item .shopping-cart-item-buttons { margin-bottom: 0!important; text-align: left!important; }
.shopping-cart-item .shopping-cart-item-buttons .button-change-cart {	min-height: 32px; min-width: 32px; height: 32px; width: 32px;padding:1px 11px 0px 11px;}
.shopping-cart-item .shopping-cart-item-buttons .button-change-cart:before { font-size: 14px!important; line-height: 32px!important;  vertical-align:top; margin: -1px 0 0 -1px;}
.shopping-cart-item .shopping-cart-item-buttons .button-change-cart-trash { margin-right: 10px; }
.shopping-cart-item .shopping-cart-item-buttons .item-quantity { display: inline-block; height: 32px; line-height: 32px; min-width: 20px; text-align: center; }
.shopping-cart-item .shopping-cart-item-buttons .item-quantity-input { display: inline-block; height: 32px; line-height: 32px; width: 60px; text-align: right; margin-top: -10px; background-color: White; margin-right: 0px;}
.shopping-cart-item .item-notes p  { line-height: normal; font-size: 12px; }
.shopping-cart-item .item-linked p { line-height: normal; font-size: 12px; }
.shopping-cart-item .item-linked p .item-linked-price { position: absolute; right: 15px; }
.shopping-cart-summary { padding: 15px; text-align: right; }
.shopping-cart-summary .day-total,
.shopping-cart-summary .grand-total,
.shopping-cart-summary .total-items { font-size: 16px; font-weight: bold; }

.shopping-cart-item.disabled { -ms-opacity: 0.5; opacity: 0.5; }
.shopping-cart-item.disabled .shopping-cart-item-buttons .button { display: none; }
.shopping-cart-pickup-delivery .item-select { padding-left: 0; } 
.shopping-cart-pickup-delivery .item-divider { border: 0!important; }
.shopping-cart-list .meal-cart-item { padding: 5px 16px; }
.shopping-cart-list .item-select.no-label { margin: 10px 0!important; } 
.shopping-cart-item .item-price { text-align: right; }
.shopping-cart-item .item-qty { float:right; }

.no-color  { left: 10px;  margin-right : 10px; min-height: 50px; }
.special-right-div { top: 25px; right : 10px; float:right; position: absolute;}
.min-height-special { min-height: 70px;}
.package-colour-code- { border-left: 1px solid #ccc; padding: 5px 5px 5px 100px; min-height: 40px;} /* No colour */
.package-colour-code-green { border-left: 10px solid green; padding: 5px 5px 5px 90px; min-height: 40px;}
.package-colour-code-orange { border-left: 10px solid orange; padding: 5px 5px 5px 90px;  min-height: 40px;}
.package-colour-code-red { border-left: 10px solid red; padding: 5px 5px 5px 90px;  min-height: 40px;}
.package-checkbox  { top: -30px;}
.min-height-package { min-height: 50px;}
/* Popover */
.platform-ios .popover { border-radius: 2px; }
.popover-backdrop.active { background-color: rgba(0,0,0,.3)!important; }
ion-popover-view.fit { height: auto !important; }
ion-popover-view.fit ion-content { position: relative !important; }
.platform-android ion-popover-view.fit { margin-top: 10px !important; }
.platform-android .popover-arrow { position: absolute; display: block; top: -17px; width: 30px; height: 19px; overflow: hidden; }
.platform-android .popover-arrow:after { position: absolute; top: 12px; left: 5px; width: 20px; height: 20px; background-color: #fff; border-radius: 3px; content: ''; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.instructions-popover ion-content { text-align: center; }
.instructions-popover p { margin: 0 5px; }
.instructions-popover img { width: 130px; margin: 15px 0;}
.instructions-popover .button { width: 200px; margin: 10px; display: inline-block; }

/* Shopping Cart Form */
.shopping-cart-form .nutritional-informations { display: block; line-height: normal; padding-bottom: 10px; font-size: 14px; }
/*.shopping-cart-form .item-with-radio { padding-left:90px }
.shopping-cart-form .item-with-radio .no-color { padding-left:100px }*/
.question-checkbox {
    margin-left: -40px;
}

.shopping-cart-form .checkbox {
    position: absolute;
    top: 30px;
    left: 60px;
}

.item-checkbox {
    padding-left: 60px;
    cursor: pointer;
    white-space: initial;
}

.shopping-cart-form .special-item-button.item-thumbnail-left { padding-top: 0; padding-left: 79px; min-height:0; }
.shopping-cart-form .special-item-button { position: relative; padding-top: 0; padding-bottom: 0; padding-left: 0;}
.shopping-cart-form .special-item-button .special-item-img { position: absolute; top: 0; left: 0; height: 100%; border-right: 0; border-left: 0; background: #fff; text-align: center; min-height:80px; }
.shopping-cart-form .special-item-button.item-thumbnail-left .special-item-img { display: block; }
.shopping-cart-form .special-item-button .special-item-img img { position: relative; top: 0; left: 0; max-height: none; max-width: none; height: 100%; width: auto; }
.shopping-cart-form .special-item-button .button { text-align: left; border-left: 0; }
.question {
    padding-left: 0px;
}
/* Checkout */
.checkout-child {
    padding: 0;
}
.checkout-shop {
    font-size: 16px;
    font-weight: bold;
    padding-left: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
    margin-bottom: 1px;
}

.checkout-day {
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 10px;
    border-width: 0px;
}


.checkout-cart {
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 5px;
    border-width: 0px;
}


.checkout-price-title {
    position: absolute;
    right: 15px;
}
.checkout-list .meal-cart-item {
    padding: 0 33px;

}
.clear-cart-confirm { font-size: 14px; }
.keep-shopping-confirm { font-size: 12px; }
.backorder-prompt { font-size: 14px; padding: 10px; }
.backorder-prompt input { margin-left: 10px; margin-right: 10px; }

/* Copy Child */
.copy-child-item { padding: 0; }
    .copy-child-item label.item-checkbox {
        position: absolute;
        left: 0;
        z-index: 3;
        margin-top: -20px;
        padding-left: 42px;
        background: transparent; padding-top: 25px;
    }
.copy-child-day { font-size: 14px; padding-left: 55px; cursor: pointer; }
.copy-child-price-title { position: absolute; right: 10px; }
.copy-child-to { border-bottom: 0; }
.copy-child-to-address { padding-top: 0; }

/* Package Details modal  */
.package-total p { font-size: 16px; font-weight: bold; text-align: right; }
.package-item-qty {  display: block; font-size: 12px; float: left; }

/* Nutritional info */
.nutritional-info .colour-key { font-size: 16px; padding: 10px 0 10px 10px; }
.nutritional-info .abbreviation { float: left; padding: 4px; }

/* Image modal */
.transparent { background: transparent !important; }
.image-modal { width: 100% !important; height: 100%; top: 0 !important; left: 0 !important; }
.fullscreen-image { max-width: 90%; max-height: 90%; bottom: 0; left: 0; margin: auto; overflow: auto; position: fixed; right: 0; top: 0; } 

.version { position: fixed; bottom: 5px; right: 32px; z-index: 99999; color: #eee; font-size: 11px; text-shadow: 1px 1px 0px #000; }

@media (max-width: 679px) { 
	.active .modal-backdrop-bg { -ms-opacity: .5; opacity: .5; }
	.modal-backdrop-bg { -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; background-color: #000; -ms-opacity: 0; opacity: 0; }
}

/* Customer Nutritional Infomation */
.customerInfo { margin : 40px 0px 40px 0px;  text-align:center; font-size:large; line-height:150%; max-height:100%; overflow-y:auto;}
.customerName { font-size:x-large; margin-bottom: 10px;}
.customerNumber { color:Blue}
.customerPhoto { margin : 5px 10px 10px 10px; font-size:x-large; }
.customerInvalid p {    color: Red; font-size: xx-large;}
.customerProhibited { color :Red; }
.customerProhibited p { font-size:x-large; }
.customerWarnings {    color: orange;}
.customerWarnings p { font-size:x-large;}
.customerLogs { color :Blue; }
.customerLogs p { font-weight:bold; }
.customerFooter { bottom: 0; position:fixed; width:100%; line-height: 48px!important; padding: 0px 0; margin:0 0 0 0; font-size:x-large; }


.changeShop {
    background-color: #01528c !important;
    color: white;
    font-weight: bold;
}
    .changeShop:hover {
        color: white;
    }
.currentShop {
    color: #444;
    font-weight: bold;
    text-align: center;
    font-size: large;
    margin : 0 0 0 0;
    padding-top:10px;
}

/* to all shopping cart to have two line - if only one it is at the top - Paul said that is fine */
.shopping-cart-header.bar .title {
    white-space: normal;
    line-height: unset;
    overflow: unset;
}

/* cart-summary-table, cart-summary-header, cart-summary-total, cart-summary-shop, cart-summary-item */
.cart-summary-table {
    min-width:90%;
}

.cart-summary-table tr {
    padding: 4px 8px 4px 8px;
}

.cart-summary-shop {
    min-width: 40px;
    text-align: right;
    padding-left: 15px;
}

.cart-summary-price {
    min-width: 40px;
    text-align: right;
    padding-left: 15px;
}

.cart-summary-item {
    padding-right: 20px;
}

.cart-summary-header {
    padding-bottom: 10px;
    font-weight: bold;
} 

.cart-summary-total {
        padding-left: 10px;
        font-weight: bold;

}

.cart-summary-total-item {
    padding-right: 20px;
}

.checkout-nextshop {
    font-size: 14px;
    padding: 10px;
}


.checkout-removeCutoff {
    font-size: 14px;
    padding: 10px;
}

.loginAddToCart {
    font-size: 14px;
    padding: 10px;
    font-weight: bold;
}

.keyboard-up
{
    height:100%!important;
}

.fingerheight {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* setting */
.setting {
    display: block !important;
    position: fixed;
    bottom: 5px;
    left: 33%;
    z-index: 99999;
    color: #444;
    font-size: 11px;
}

.NoPermissionToCurrentShop {
    font-size: 14px;
    padding: 10px;
    font-weight: bold;
}

.NoPermissionForMOO {
    font-size: 14px;
    padding: 10px;
    font-weight: bold;
}


.customer-none {
    margin-left: 10px;
    padding: 5px 5px 5px 5px;
}

.customer-warning {
    border-left: 10px solid orange;
    padding: 5px 5px 5px 5px;
}

.customer-allergy {
    border-left: 10px solid red;
    padding: 5px 5px 5px 5px;
}

.customer-open {
    background-color: rgb(250, 255, 189);
}

.customer-hide {
    background-color: rgb(224, 224, 235);
}


.customer-new {
    float: right;
}

.staff-showall {
    float: right;
    font-size: 16px;
    color: blue;
    padding: 16px 8px 8px 8px;
}

.staffTime {
    padding: 8px 8px 8px 8px;
}


.staff-icon {
    line-height: 34px !important;
    float: right;
    display: inline-flex;
    font-size: 30px;
    background-color: transparent;
    border-width: 0px;
    color:blue;
    width:30px;
    padding-left:10px;
}

.staff-text {
    padding: 5px 5px 5px 5px !important;
    margin-right: 10px;
    border: 1px solid #ccc;
    min-width: 35%;
    width: 45%;
    background-color: rgb(250, 255, 189);
    line-height: 34px !important;
}


.staff-terminal {
    padding: 5px;
    height: 100%;
    border: none;
    margin-top: 5px;
    margin-bottom: 5px;
}

.staff-info {
    overflow:scroll;
}

.customerLogInfo {
    width: 100%;
    vertical-align: top;
    padding-left: 10px;
    line-height: 120%;
    font-size: 18px;
}
.staff-filter {
    font-size: 32px;
    font-weight: bolder;
    padding-top: 5px;
    padding-right: 10px;
    display: inline-flex;
    float: right;
}

.chk-allergy {
    color: red;
    border-style: none;
}

.chk-warning {
    color: orange;
    border-style: none;
}

.chk-other {
    color: green;
    border-style: none;
    padding-right: 0px;
}

.with-icon {
    display: inline-flex;
    border:none;
}

.staff-icon-left {
    line-height: 34px !important;
    float: left;
    display: inline-flex;
    font-size: 30px;
    background-color: transparent;
    border-width: 0px;
    color: blue;
    width: 30px;
}

.staff-icon1 {
padding: 15px 40px;

}

#swipelog-list {
    width: 100%;
    display: inline-block;
}

.staff-profile {
    padding:5px;
    
}
.staff-grid-half {
    width: 40%;
    display: inline-flex !important;
}

.staff-grid-half-long {
    display: inline-flex !important;
}


.staff-search {
    font-size: 32px;
    font-weight: 200;
    padding-right: 10px;
    display: inline-flex;
}

.logSearch {
    min-width: 60px;
    max-width: 100px;
}

.search-icon {
    line-height: 34px !important;
    display: inline-flex;
    font-size: 30px;
    background-color: transparent;
    border-width: 0px;
    width: 30px;
}

.staff-site {
    width: 85%;
    border-width: 0px;
}

.staff-top-icon {
    top: 15px;
    right:18px;
    position:fixed;
}

.staff-plus-icon {
    display: inline-flex;
    font-size: 18px;
    color: green;
    background-color: transparent;
    border-width: 0px;
    margin-top:8px;
}

.staff-delete-icon {
    display: inline-flex;
    font-size: 12px;
    color: red;
    background-color: transparent;
    border-width: 0px;
    margin-left: -10px;
}

.staff-setup-row
{
    width:100%;
}

.staff-select {
    width: 100%;
}

.staff-fullimage {
    max-width: 60%;
    max-height: 60%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;

}

.login-general {
    text-align:center;
}

.account-left {
    float: left;
    line-height: 34px !important;
    display: inline-grid;
    width: 35%;
    padding-left: 10px;
}

.account-right {
    float: right;
    display: inline-grid;
    min-width: 50%;
    width: 65%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.account-checkbox {
    padding: 7px 0px 0px 5px;
    top: 32px !important;
}

.sub-checkbox {
    top: 8px;
    display: inline-grid;
    padding: 0px 0px 0px 0px !important;
    margin-bottom: 18px;
}

.sub-checkbox-text {
    left: 50px;
    display: inline-grid;
    max-width: 80%;
    font-size: 16px;
}

.sub-option {
    line-height:normal;
}

.checkbox-input {
    z-index:9;
}

.manageParent {
    margin-bottom: 100px;
}

.maxWidth {
    width: 99%;
}

.meal-not-found {
    font-size: 96px;
    color:red;
    margin:10px;
}

.list-not-found {
    font-size: 48px;
    color: red;
    margin: 10px;
}

.meal-count {
    font-size: 32px;
    color: red;
    margin: 10px;
}

.list-meal-count {
    color: red;
}

.initloading {
    text-align: center;
    background-color: #444;
    width: 50px;
    margin-left: 45%;
    margin-top: 20%;
}

.staff-station {
    padding: 5px 20px 5px 16px;
    border: 0px;
}

.staff-button {
    padding: 5px 10px 5px 10px;
    margin: 0px 10px 0px 10px;
    display: inline-flex;
}

.staff-button-icon {
    font-size: 14px;
    color: #444444;
    border: 0px;
    background-color: transparent;
    display: inline-flex;
}

.seatPlan {
    margin: 50px 10px 90px 10px;
}

.seatDialog {
    min-width: 1000px !important;
    min-height: 80% !important;
}


.seatDialog_mobile {
    min-width: 98% !important;
    min-height: 98% !important;
    top: 5px;
    left: 5px;
}

.ticket-item {
    display: table-row;
    min-width: 98% !important;
    padding: 10px;
    vertical-align: middle;
    border-color: #ddd;
    border-width: 1px;
    border-style: solid;
}

.ticket-type {
    display: table-cell;
    font-size: 16px;
    font-weight: 400;
    padding-left: 10px;
}

.ticket-area {
    display: table-cell;
    font-weight: 400;
}

.ticket-price {
    font-weight: 600;
    float: left;
    width: 70px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: right;
    overflow: visible !important;
}

.ticket-sold {
    background: url('../img/sold out small.png') no-repeat top left;
}

.ticket-type-buttons {
    font-size: 14px;
    min-width: 180px;
    min-height: 40px !important;
}

.button.icon.button-ticket-type {
    border-radius: 50% !important;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    padding: 0px;
    top: -8px;
    min-width: 36px;
    min-height: 36px;
}

    .button.icon.button-ticket-type:before {
        font-size: 14px;
        margin-top: -2px;
    }

    .ticket-quantity {
        font-size: 18px;
        font-weight: 600;
    }
.ticket-area-m {
    display: table-cell;
    padding: 5px 10px 5px 10px;
}

.ticket-type-m {
    display: table-cell;
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;
    vertical-align: top;
    padding-top: 5px;
    width: 45%;
}

.item-quantity-seat {
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
}

.seatPlan-selection {
    padding-top: 60px;
    padding-left: 10px;
}
.mandatory {
    color: red;
}

.money-range {
    color: gray;
    font-style: italic;
}

.promotion-area {
    background-color: #fff;
    width: 100%;
    line-height: 30px;
    color: #444;
    padding: 10px 6px 10px 4px;
    font-size: 16px;
}
.promotion-label {
    display: inline-grid;
    margin-left: 10px !important;
}
.promotion-input {
    border: 1px solid #ccc;
    margin-left: 10px !important;
    padding: 2px 2px 2px 2px;
    width: 100px;
    display: inline-grid !important;
}

.promo-summary-table {
    padding: 15px;
    width:100%;
}

.promo-summary-name {
    font-size: 16px;
    width: %;
}
.promo-summary-code {
    font-size: 16px;
    font-weight: bold;
    padding-right: 20px !important;
    width:35%;
}

.promo-summary-description {
    width: 80%;
    font-size: 14px;
    padding-left: 10px;
}

.promo-summary-discount {
    width:20%;
    font-size: 14px;
    padding-left: 20px !important;
    text-align: right;
}

.promo-summary-notes {
    font-size: 12px;
    padding-left: 10px;
}

.promo-summary-message {
    font-size: 12px;
    padding-left: 10px;
    color: red;
}
.promo-nocancel {
    font-size: 13px;
    padding-left: 10px;
    color: red;
    font-weight:bold;
}
.promo-summary-shop {
    font-size: 16px;
    font-weight: bold;
}

.promo-summary-shop-total {
    font-size: 16px;
    font-weight: bold;
    padding-left: 20px !important;
    text-align: right;
}
.promo-summary-lastcol {
    text-align: right;
}

a.promo-delete.icon {
    min-height: 32px;
    min-width: 32px;
    height: 32px;
    width: 32px;
    font-size: 14px !important;
    padding: 1px 11px 0px 11px;
}

    a.promo-delete.icon:before {
        font-size: 14px !important;
        top: -5px;
        left: 11px;
        position: absolute;
    }


#desktop-shop-group-information {
    left:10px;
    font-size: 32px;
    color: #387ef5;
    line-height: 60px;
}

    #desktop-shop-group-information.tutorials-visible {
        position:absolute;  
    }

    #desktop-shop-group-information:hover {
        cursor: pointer;
    }

#mobile-shop-group-information {
    font-size: 24px;
    float: left;
    margin: -10px 0 0 5px;
}

.repaymentDeadline {
    font-weight: bold;
    text-align: center;
    margin: 0px 10px 10px 10px;
}

.repaymentInfo {
    margin: 0px 20px 10px 20px;
    padding: 5px 5px 5px 5px;
    font-size: 16px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

    .repaymentMsg, .repaymentUntil {

    }

.repaymentDateHeader {
    font-weight: bold;
    line-height: 32px;
}

.repaymentDate {
    display: inline-grid;
    width: 33%;
}
    .item-repayment {
        padding-left: 30px;
        white-space: initial;
        font-size: 14px !important;
        line-height: normal;
    }

.calendar-button {
    padding: 5px 10px 5px 10px;
    margin: 0px 10px 0px 10px;
    display:inline-flex;
    width: 80px;
}

.display-inline {
    display: inline-flex;
}
.calendar-button-icon {
    margin: 5px 5px 0px 5px;
    font-size: 24px;
}
.question-rating {
    display: inline-flex;
    font-size: 24px;
}
.star-checkbox {
    line-height: 20px;
    top:15px!important;
}

.web-product {
    vertical-align: middle;
}
.product-icon {
    width: 18px;
    margin-right: 3px;
    vertical-align: middle;
}

@-webkit-keyframes slideInSmooth {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
    }

    50% {
        -webkit-transform: translate3d(50%,0,0);
    }

    100% {
        -webkit-transform: translate3d(0,0,0);
    }
}

.slide-in {
    -webkit-animation: slideInSmooth ease-in 1;
    animation: slideInSmooth ease-in 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 750ms;
    animation-duration: 750ms;
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translate3d(0,0,0);
    }

    25% {
        -webkit-transform: translate3d(0,-30%,0);
    }

    50% {
        -webkit-transform: translate3d(0,0,0);
    }

    75% {
        -webkit-transform: translate3d(0,-30%,0);
    }

    100% {
        -webkit-transform: translate3d(0,0,0);
    }
}

.bounce-animation {
    -webkit-animation: bounce ease-in 1;
    animation: bounce ease-in 1;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
}

@-webkit-keyframes listGrow {
    0% {
        -webkit-transform: scale3d(1, 0, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 0);
    }
}

.list-grow-animation {
    -webkit-animation: listGrow ease-in 1;
    animation: listGrow ease-in 1;
    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;
}
.fullwidth {
    width:100%;
}

.inline {
    display: inline-flex;
}
.event-header-right {
    right: 50px !important;
    position: absolute;
    top: 12px;
}

.event-icon-right {
    right: 5px !important;
    position: absolute;
}

.event-top {
    width: 100%;
    white-space: normal !important;
    min-height: 180px;
}

.event-left {
    float: left;
    line-height: 34px !important;
    display: inline-flex;
    margin: 10px !important;
}

.event-right {
    float: right;
    padding: 6px;
    width: 100%;
}

.event-right-full {
    float: right;
    padding: 6px;
    width: 100%;
}

.event-image {
    width: 100px;
    height: 100px;
    top: 30px;

}

.event-image-desktop {
    width: 240px;
    height: 240px;
    top: 30px;
}

.event-box-desktop-text {
    top: 30px;
}

.event-right-flag {
    margin-left: 80px;
}

.event-box {
    border: 2px solid gray;
    padding: 2px 2px 2px 2px;
    margin: 10px 10px 0px 10px;
}

.event-box-desktop {
    height: 300px !important;
    min-width: 500px;
    max-width: 500px;
    display: inline-flex;
}

.event-box-mobile {
    max-width: 100%;
}


.event-content {
    width: 94%;
    white-space: normal !important;
    text-justify:distribute;
    max-height: 80%;
}

.event-content-box {
    width: 94%;
    white-space: normal !important;
    text-justify: distribute;
    overflow: hidden;
    max-height: 150px;
    text-align:left;
}

.event-list {
    border-width: 0px;
    padding: 2px 2px 2px 2px;

}

.event-date {
    font-weight: bold;
    white-space: normal !important;
}

.event-time {
    font-weight: bold;
    white-space: normal !important;
}

.event-item .event-flag {
    text-align: center;
    background-color: red;
    color: #f5f9fa;
    transform: rotate( 315deg );
    width: 8rem;
    transform-origin: bottom left;
    padding-top: 3rem;
    position: absolute;
    left: -1rem;
    font-size: small;
}

.event-box .event-flag {
    text-align: center;
    background-color: red;
    color: #f5f9fa;
    font-weight: 700;
    transform: rotate( 315deg );
    width: 15rem;
    transform-origin: bottom left;
    padding-top: 7rem;
    padding-bottom: 5px;
    position: absolute;
    left: -2rem;
}

.event-title {
    border-bottom-style: solid;
    border-block-width: 2px;
    font-weight: bold !important;
    font-size: larger !important;
    margin: 5px 5px 5px 5px !important;
    line-height: 30px;
    white-space: normal !important;
}

.event-icon {
    line-height: 34px !important;
    float: right;
    display: inline-flex;
    font-size: 30px;
    background-color: transparent;
    border-width: 0px;
    color: blue;
    width: 30px;
}


.event-calendar-mobile {
    width: 100%;
    padding: 5px 5px 5px 5px;
}

.event-calendar-desktop {
    height: 180px;
    width: 220px;
    float: right;
    margin-right: 10px;
}

.event-selected-date {
    text-align: center;
    color: gray;
    font-size:large;
}

.event-top {
    border-width: 0px;
    text-align: left;
    padding-left:10px;
}
.event-top-desktop {
    border-width: 0px;
    height: 220px;
    text-align: left;
    padding-left: 100px;
}
.event-filters {
    margin: 5px 5px 5px 5px;
}

.event-select {
    padding-top: 5px;
    padding-right: 10px;
    background-color: transparent;
    font-weight:bold;
}

.watermark {
    color: gray;
    font-style: italic;
}
.event-option {
    color: black!important;
    font-style: normal!important;
}

.event-button {
    cursor: pointer;
    border-radius: 12px;
    top: 8px;
    font-size: 14px;
    line-height: 32px;
    border: 1px solid #01528c;
    padding: 3px 15px 3px 15px;
    background-color: #01528c;
    color: white;
    bottom: 40px;
    position: relative;
}

.event-book-button {
    margin: 0px 3px 5px auto;
}

.event-remind-button {
    margin: 0px 3px 5px auto;
    background-color: #03a1fc;
    border: 1px solid #03a1fc;
}


.event-info-button {
    border: 1px solid #29d05e;
    background-color: #29d05e;
    margin: 0px auto 5px 3px;
}

.event-dilaog-button
{

}


.event-dilaog-remind-button {
    background-color: #03a1fc;
    border: 1px solid #03a1fc;
}
.eventInfo {
}


.event-right-info {
    float: right;
    padding: 6px;
    width: 50%;
}

.eventInfo .event-flag {
    text-align: center;
    background-color: red;
    color: #f5f9fa;
    font-weight: 700;
    transform: rotate( 315deg );
    width: 15rem;
    transform-origin: bottom left;
    padding-top: 7rem;
    padding-bottom: 5px;
    position: absolute;
    left: -2rem;
}

.event-content-info {
    width: 94%;
    white-space:pre-wrap !important;
    text-justify: distribute;
}

.halfwidth {
    width: 245px;
    left: 250px !important;
}
.event-tags {
}

.event-bar {
    bottom: 10px !important;
    position: absolute;
    right: 1px;
    left: 1px;
}

.event-tag-desktop {
    display: -webkit-box;
    padding: 0px 10px 2px 10px !important;
    margin: 0px 5px 3px 5px !important;
    color: white;
    text-align: center;
    width: 120px;
    height: 30px;
    transform: skew(160deg);
}

    .event-tag:after {
        transform: skew(160deg);
    }

.event-tag {
    display: -webkit-box;
    padding: 5px 10px 2px 10px !important;
    margin: 0px 5px 3px 5px !important;
    color: white;
    text-align: center;
    width: 120px;
    height: 30px;
    transform: skew(160deg);
}
#selectedDate{
    color: transparent;
}
.center {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}

.pickadate-active {
    background-color: #01528c;
}

.ticket {
    margin: 10px 10px 10px 10px !important;
    font-size: large;
    text-align: center;
    max-width: 600px;
}

.ticketInformation {
    margin: 10px 10px 10px 10px !important;
    text-align: center;
    height: 110px;
}


.ticket-event-left {
    float: left;
    padding: 6px;

    max-width: 600px;
    width: 65%;
}

.ticket-event-right {
    width: 35%;
    max-width: 300px;
    text-align: right;
}

.ticket-event-list {
    border-width: 0px;
    padding: 2px 2px 2px 2px;
}

.ticket-event-date {
    font-weight: bold;
    white-space: normal !important;
}

.ticket-event-time {
    font-weight: bold;
    white-space: normal !important;
}


.ticket-event-title {
    border-bottom-style: solid;
    border-block-width: 2px;
    font-weight: bold !important;
    font-size: larger !important;
    margin: 5px 5px 5px 5px !important;
    line-height: 30px;
    white-space: normal !important;
}

.ticket-image {
    width: 150px;
    height: 150px;
    top: 30px;
}

.ticket-image-desktop {
    width: 240px;
    height: 240px;
    top: 30px;
}

.ticket-count {
    font-size: larger;
    font-weight: bolder;
    padding-top: 5px;
    padding-right: 10px;
    text-align: center;
}

.ticket-chk {
    font-weight: bold !important;
    font-size: larger !important;
    padding-top: 5px;
    display: inline-flex;
}


.ticket-message p {
    font-size: x-large;
    color: red;
}

.ticket-seat p {
    font-weight: bolder;
}

.ticket-stat-sold {
    padding: 16px;
    font-size: 16px;
}

.ticket-info {
    width: 100%;
    height: 100px;
    text-align:left;
}
.ticket-info td.circle {
    width: 110px;
}

.ticket-info td {
    vertical-align: middle;
}

.ticket-customer {
        font-weight: bolder;
    }


.ticket-summary-invalid {
    color: red;
    border-style: none;
}

.ticket-summary-warning {
    color: orange;
    border-style: none;
}

.ticket-summary-valid {
    color: green;
    border-style: none;
    padding-right: 0px;
}

.ticket-history-header {
    text-align: left;
    font-size: x-large;
}

.ticket-history {
    width: 100%;
    height: 50px;
}

    .ticket-history td {
        vertical-align: middle;
        text-align: left;
    }

    .ticket-history tr {
        border-bottom: 1px solid #ddd;

    }
.ticket-history td.circle {
    width: 60px;
}
    .ticket-history p {
        margin-top: 2px;
        margin-bottom: 2px;
    }

.ticket-history .ticket-customer {
    font-weight: bolder;

}

 p.ticket-invalid {
        color: red;
        font-weight: bolder;
    }

.ticket-setup {
    width: 400px;
    max-width: 95%;
    margin: 20px 15px 10px 15px;
}

.notification-content {
    margin: 10px 10px 10px 10px;
    min-height: 50px;
    max-height: 50%;
}

.notification-footer {
    bottom: 1px;
    position: absolute;
    width: 95%;
    font-size: 16px;
    border-bottom: 0px none;
    margin: 10px;
}

.notification-item {
    color: #444;
    position: relative;
    z-index: 2;
    border-width: 0px;
    border-style: solid;
    font-size: 16px;

}
.notification-date {
    font-weight:bold;
    text-align: center;

}
.notification-lbl {
    bottom: 80px;
    border: 0px none;
    padding: 10px 10px 10px 60px;
}
.notification-footerbtn {
    bottom: 3px;
    min-height: 50px;
    font-size: 16px;
    border-bottom: 0px none;
    margin: 10px;
}

.reminder-mobile
{
    margin-left:10px;
    text-align: left;
}

.reminder-email {
    margin-left: 10px;

}

.notification-mobile-sample {
    margin-left: 5px;
    color:darkgray;
    font-style:italic;
}

.notification-msg {
    margin-left: 20px;
}