/* Global */
.h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
    text-align:center;
}

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=email], input[type=url], input[type=tel], input[type=color], textarea {
    border: 1px solid #ccc;
    background-color: rgb(250, 255, 189);
    margin-right: 10px;
    padding: 2px 10px 2px 10px;
}
.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; }
.custom-form .item { border: 0; }
.button {
    border-color: #b2b2b2;
}
#master-header-desktop-title {
    width: 80%;
    right: 10%;
    left: 10%;
    z-index: 15;
    font-size: 22px;
    position: absolute;
    top: 0;
    text-align: center;
    line-height: 44px;
}

.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); margin-left: 10px; margin-right: 10px;}
.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 { padding-left: 0; width: 100%; max-width: 100%; padding-right: 30px; direction: ltr; border: 1px solid #ccc; padding: 5px 30px 5px 5px!important; } 
.item-select select { padding: 5px 30px 5px 5px!important; border: 1px solid #ccc; }
.button-non-spaced { margin: 0 0 -1px 0!important }

.button-time { margin: -2px 0 -2px 0!important; 
    line-height: 24px; font-size: 14px;
    border-color: #0c60ee!important;
    background-color: #387ef5!important;
    color: #fff;
    padding: 0 12px 0 12px;
    min-height:30px;
}

.button-daily {
    line-height: 24px;
    font-size: 14px;
    border-color: #0c60ee !important;
    background-color: #387ef5 !important;
    color: #fff;
    padding: 2px 6px 2px 6px;
    min-height: 30px;
    border-radius: 5px;
}

.button-weekly {
    line-height: 24px;
    font-size: 14px;
    border-color: #0c60ee !important;
    background-color: #176aa3 !important;
    color: #fff;
    padding: 2px 6px 2px 6px;
    min-height: 30px;
    border-radius: 5px;
}

.button-header {
    margin-top: 10px!important; 
}
.button-mobile {  margin: 0px 10px 0px 10px!important; width: 80%; font-size: small; }
.button-mobile-text { margin-left: 10px!important; margin-top: 10px!important; margin-bottom: 1px!important; width: 80%; font-size: small;}
.button-mobile-left {  margin: 0px 0 0px 0 !important; width: 40%; font-size: small; }
.button-mobile-right { margin: 0px 10px 0px 0!important; width:40%; font-size:small; }
input[type=number] { 
    background-color: rgb(250, 255, 189);
    margin-right: 10px;
    margin-left:40px;
    padding-left:10px;
    border: 1px solid #ccc;
    width:100px;
}
textarea { 
    width:100%;
    margin-right: 10px;

}
ion-scroll {
    max-height: 86%;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}
.with2Buttons
{
    max-height: 72%;
}
.bottonfooter  { bottom: 3px; width:100%; font-size: larger;}
.bottonfooter .bar {font-size:16px;}

.center {
  text-align:center;
  margin: 10px;
}
.v-center
{
  position: relative;
  top: 15px;
  transform: translateY(-45%);
}
.item {width:101%;}
.item-input {padding-right:20px;}
.item-left { height: 54px; width:50%;  padding-right:5px;  float:left; border: 0px; border-top: 1px solid #ccc;  }
.item-right  { height: 54px; width:50%;      float:right; border: 0px; border-top: 1px solid #ccc;}
.full-width {
  width:100%;   
  margin-right: 10px;
}
.fixed-width {
  width:150px;   
  margin-right: 10px;
}
.text-padleft  { height: 20px; width:30%;      float:left; border: 0px; margin-left:20%;}
.text-padright  { height: 20px; width:30%;      float:right; border: 0px; margin-right:20%;}

/* must add to 100%*/
.mobile-left {
    height: 20px;
    width: 60%;
    float: left;
    border: 0px;
    overflow: visible;
}
.mobile-right  { height: 20px; width:35%;      float:right; border: 0px; }
.mobile { margin : 10px; width:100%;}
.title-left { text-align: center!important; left: 0px; } /* Override Android styles */
.title.title-left.header-item { text-align: center!important; left: 0px; } /* Override Android styles */

hr { border-top: 1px solid #ccc!important; }
.no-padding { padding:0!important; }
.no-margin { margin:0!important; }
.offline { font-weight: bold; color: red; text-align: center; font-size: 16px; }
.input-label { max-width: 300px; }
.label { width: 120px; }
.item-checkbox { cursor: pointer; padding-left:40px; }
.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 15px 100px 10px;
    /*height: 80%;*/
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch !important;
    background-color: #f8f8f8;
}
.termsfooter {
    bottom: 1px !important; /* IE is different with others */
    position: fixed;
    height: 80px;
    font-size: 16px;
    margin: 0px 10px 3px 10px;
    max-width: 96%;
    width: 580px;
}

.termsIE {
    height: 300px;
}

.termsfooterIE {
    bottom: 80px !important; /* IE is different with Chrome */
    margin-bottom: 30px !important;    
}

.termsfooterlbl  { bottom: 40px; border: 0px none;  }
.termsfooterbtn {  bottom: 40px; min-height: 30px; 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:20px; border: 1px solid #ccc; width:100%;}

/* Default theme */
.master-header-bar, .master-bar-subheader, .bar-header, .bar-subheader {
    border-width: 0;
    background-color: #01528c !important;
    background-image: none !important;
    color: #fff;
    text-align: center;
    width: 100%;
    z-index: 10;
}
.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 }
.bar-header .button { border-color: transparent; background: #00365D; color: #fff; }
.master-header-bar .button { border-color: transparent; background: transparent; color: #fff; }
.bar-header .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; }
.list .button.active { border-color: #002744; background-color: #387ef5; color: #fff!important; }
.link { position: absolute; right: 10px; z-index: 99999; color: Blue; cursor: pointer; }
.bar-subheader {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 44px;
    padding-top: 5px;
    z-index: 10;
    font-size: 16px;
}

/* 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; }
.list .item {padding-top : 6px;}
.list .item .item-name { overflow: visible; text-overflow: clip; white-space: normal; line-height: normal!important; margin-right: -50px;}
.list .item .item-description { line-height: normal!important; margin: 5px -50px 0 0 ; white-space: normal; font-size:small; color:black; }
.list .item .item-price { line-height: normal!important; }
.list .item .item-info { line-height: normal!important; margin: 5px -50px 0 0 ; white-space: normal; font-size:small; }
.list .item .item-thumbnail-left { padding-top: 0; padding-left: 16px;   border:none;}

.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: 10px solid transparent; } /* No colour */
.colour-code-green { border-left: 10px solid green; }
.colour-code-orange { border-left: 10px solid orange; }
.colour-code-red { border-left: 10px solid red; }
.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: 35px; font-size: 12px; }

/* 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-icon-today { color: red; }

.dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    background-color: red;
    vertical-align: middle;
    float: left;
    margin-top: 10px;
}
.calendar-day-today { border-color: red!important; margin-bottom: 0!important; border-width: 2px; }
.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; }


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

.version { position: fixed; bottom: 5px; right: 32px; z-index: 5; 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; }
}

.checkbox-square
{
    font-size: rem-calc(20);
}

table.items {
  margin: 5px auto;
  border: none;
  width: 100%;
  font-size: rem-calc(8); 
  height:100%;
}

table.items tr td input {
  margin: 0 auto;
  padding: 2 2 2 2;
  font-size: rem-calc(8);
  text-align: right; }

table.items thead tr td {
  padding: 5px;
  font-weight: bold;
  background-color: aliceblue; }

table.items tr.item {
  display: none; }

table.items tr td {
  padding: 5px;
  text-align: right; }

table.items tr td.name, table.items thead tr td.name {
  text-align: left; width:40%;}

table.items tr td.price, table.items thead tr td.price {
  text-align: left; min-width:70px;}

table.items tr td.info, table.items thead tr td.info {
  text-align: left; }

table.items tr td i {
  font-size: smaller;
  color: #555555; }

table.items tr td.category {
  font-weight: bold;
  background-color: azure;
  text-align: left; }

table.items tr td.category a {
  position: relative;
  padding-top: 15px;
  margin-left: 10px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000000;
  display: inline;
  top: 30px; }

    table.items thead tr td.name {
        font-size: 14px;
        color: #444;
        padding: 0.275rem;
        text-align: left;
    }


.text-right {text-align:right; vertical-align:middle;}

.alert {
  text-align: center;
  color: #f04124; 
}

i {
  font-size: smaller;
  color: #f04124; }



.displayfree {
  background-color: #1C5E32;
  /* IE10+ */
  /* Mozilla Firefox */
  /* Opera */
  /* Webkit (Safari/Chrome 10) */
  /* Webkit (Chrome 11+) */
  /* W3C Markup */
  background-image: radial-gradient(ellipse closest-corner at center, #4FA25F 0%, #154726 100%); }

.displaybusy {
  background-color: red;
  /* IE10+ */
  /* Mozilla Firefox */
  /* Opera */
  /* Webkit (Safari/Chrome 10) */
  /* Webkit (Chrome 11+) */
  /* W3C Markup */
  background-image: radial-gradient(ellipse closest-corner at center, #F57C7C 0%, #89131C 100%); }

.displayclosed {
    background-color: #ffe6e6;
    /* IE10+ */
    /* Mozilla Firefox */
    /* Opera */
    /* Webkit (Safari/Chrome 10) */
    /* Webkit (Chrome 11+) */
    /* W3C Markup */
    background-image: radial-gradient(ellipse closest-corner at center, white 0%, #ffe6e6 100%);
}

.stationleftwrap {
    height: 100%;
    background-color: white;
    position: fixed;
    min-width: 30%;
    max-width: 30%;
    float: left;
}
.stationleftscroll {
    max-height: 65%;
}

.stationBlock {
    padding-top: 20%;
    min-height: 30%;
    text-align: center;
    vertical-align: central;
    width: 100%;
    color: white;
}


.stationBlock_online {
    padding-top: 15%;
    max-height: 25%;
    padding-bottom: 15%;
    text-align: center;
    vertical-align: central;
    width: 100%;
    color: white;
    font-size: 36px;
    font-weight: 500;
    background-color: #1C5E32;
    background-image: radial-gradient(ellipse closest-corner at center, #4FA25F 0%, #154726 100%);
}

.stationBlock_mobile {
    padding-top: 5%;
    max-height: 15%;
    padding-bottom: 5%;
    text-align: center;
    vertical-align: central;
    width: 100%;
    color: white;
    font-size: 24px;
    background-color: #1C5E32;
    background-image: radial-gradient(ellipse closest-corner at center, #4FA25F 0%, #154726 100%);
}


.stationStatus {
    font-size: 48px;
    font-weight: 500;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
}

.stationFacility {
    font-size: 36px;
    font-weight: 500;
    text-align: center;
}

.stationFacility i {
  color : white;
}

.stationInfo {
    padding-top: 15px;
    font-size: 24px;
    text-align: center;
}


.stationTime {
  font-size: 48px;
  font-weight: 500;
  }

.stationDate {
  padding-top: 30px;
  font-size: 24px; 
  text-align:center;
}

.stationwrap {
    display: flex;
}

.stationrightwrap {
    min-width: 70%;
    max-width: 70%;
    float: right;
    margin-left: 30%;
    height: 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: white;
    line-height: normal;
}

.stationrightBlock {
  padding-top: 70px;
  padding-left: 30px;
  min-height: 70%;
  width: 100%; }
  
  .stationrightBlock-weekly {
    min-height: 30%;
    }
  

.stationrightBlockMulti {
    padding-top: 20px;
    padding-left: 30px;
    min-height: 25%;
    max-height: 35%;
    width: 100%;
}

.stationSlider {
    bottom: 10px;
    margin-bottom: 60px;
    margin-right: 60px;
    width: 100%;
    max-height: 60%;
    min-height: 30%;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

    .stationSlider .reservation_item {
        background-color: rgba(64,64,64, 0.5);
    }

    .stationSlider .reservation_name {
        color: white;
    }

    .stationSlider .reservation_date {
        color: white;
    }

    .stationSlider .reservation_slider_tickmarks {
        color: white;
    }

    .stationSlider .reservation_slider_tickmark {
        border-left: 1px solid white;
    }

.backToDaily {
    font-size: 16px;
    text-align: right;
    margin-left: 16px;
}


.stationSlider-online {
    bottom: 10px;
    margin-bottom: 10px;
    width: 100%;
    position: fixed;
    max-height: 80%;
    min-height: 30%;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}

    .stationSlider-online .reservation_item {
        background-color: rgba(64,64,64, 0.5);
        height: 110px;
    }

    .stationSlider-online .reservation_name {
        color: white;
    }

    .stationSlider-online .reservation_date {
        color: white;
    }


    .stationSlider-online .reservation_slider_tickmarks {
        color: white;
    }

    .stationSlider-online .reservation_slider_tickmark {
        border-left: 1px solid white;
    }

    .stationButton {
  width: 30%;
  height: 65px;  
  position: fixed;
  bottom: 0px;
  margin-bottom: 0px;
  background: #176aa3!important;
  color: white;
  font-size: 18px; 

}

.station-date-change {
    padding-left: 10px;
    padding-right: 10px;
    color: white;
}

table.stationitems {
    width: 100%;
}

    table.stationitems tr td {
        padding: 10px 5px 10px 5px;
        border-top: 1px solid grey;
        border-bottom: 1px solid grey;
        font-size: 18px;
    }
    table.stationitems thead {
        width: 100%;
    }


table.stationitems thead tr td {
    font-weight: bold;
    font-size: 20px;
    color: #444;
    vertical-align: middle;
}
            table.stationitems thead tr td.facilityName {
                font-weight: bold;
                font-size: 24px;
                color: #0c63cc;
                width: 100%;
                text-align: left;
            }

    table.stationitems thead tr td.facilityName_mobile {
        font-size: 16px;
        text-align: right;
        color: #0c63cc;
        width: 100%;
        text-align: left;
    }

.facilityListIcon a.facilityInfo {
    font-weight: bold;
    font-size: 36px;
    width: 20px;
    color: #444;
    padding-top: 10px;
}

.facilityListIcon_mobile a.facilityInfo {
    font-weight: bold;
    font-size: 18px;
    width: 20px;
    color: #444;
    padding-top: 10px;
}


        table.stationitems tr td.stationListHeading {
            width: 100%;
            font-weight: bold;
            background-color: aliceblue;
            font-size: 14px;
            color: #444;
        }

table.stationitems tr td.event {
    min-width: 30%;
}
    table.stationitems tr td.time {
        min-width: 20%;
    }
table.stationitems tr td.event-mobile {
    min-width: 30%;
    font-size: 14px;
}

table.stationitems tr td.time-mobile {
    min-width: 20%;
    font-size: 14px;
}

table.stationitems tr td span {
    font-size: 14px;
    color: blue;
}

table.stationitems tr td span.station-event {
        color: black;
    }

.facilityStatusBar {
    min-width: 30px;
    max-width: 30px;
}
.facilityListIcon {
    min-width: 40px;
    max-width: 40px;
    text-align:center;
}

.station-button-daily {
    font-size: 14px;
    border-color: #176aa3 !important;
    background-color: #176aa3 !important;
    color: #fff;
    padding: 0 12px 0 12px;
}

.station-button-daily-mobile {
    font-size: 12px;
    border-color: #176aa3 !important;
    background-color: #176aa3 !important;
    color: #fff;
    padding: 0 6px 0 6px;
}


table.header {
    margin: 0 auto;
    color: #FFFFFF;
    background-color: #3A7AD7;
    border: none;
    width: 100%;
}

/* 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; margin-left:10px; }
.shopping-cart-item .shopping-cart-item-buttons {	margin-top: 15px; 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: 0;}
.shopping-cart-item .shopping-cart-item-buttons .button-change-cart:before { font-size: 14px!important; line-height: 32px!important; }
.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 .item-notes p,
.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-deposit { text-align: right; margin-left:75%;margin-right:15%; }
.shopping-cart-item .item-price { text-align: right; margin-right:10px;}*/

.mobile-cart-button { position: absolute;  right:15px; margin-top:-35px; font-size:xxx-large;}
.mobile-cart-button i.counter { width: 20px;height: 20px; display: block; position: absolute; top: -2px; left: 20px; background: red; border-radius: 50%; color: #fff; font-weight: bold; font-size: 11px; line-height: normal; padding-top: 2px; overflow: hidden; text-align: center;}
.mobile-cart-button i.counter-plus { width: 20px; height: 20px; display: block; position: absolute; top: -6px; right: -10px; color: #fff; font-size: 11px; line-height: normal; overflow: hidden; text-align: center;}
.mobile-cart-button .timer { color: #fff; font-size: 14px; line-height: normal; overflow: hidden; text-align: center; display: block;}

.shopping-cart-button { position: absolute;  left:90%; line-height: 32px; font-size:xx-large;}
.shopping-cart-button i.counter { width: 15px;height: 15px; display: block; position: absolute; top: -2px; left: 10px; background: red; border-radius: 50%; color: #fff; font-weight: bold; font-size: 10px; line-height: normal; padding-top: 2px; overflow: hidden; text-align: center;}
.shopping-cart-button i.counter-plus { width: 15px; height: 15px; display: block; position: absolute; top: -6px; right: -10px; color: #fff; font-size: 10px; line-height: normal; overflow: hidden; text-align: center;}

.item-cart-button { position: absolute;  left:90%; line-height: 32px; font-size:xx-large;}
.item-cart-button i.counter { width: 15px;height: 15px; display: block; position: absolute; top: -2px; left: 10px; background: red; border-radius: 50%; color: #fff; font-weight: bold; font-size: 10px; line-height: normal; overflow: hidden; text-align: center;}
.item-cart-button i.counter-plus { width: 15px; height: 15px; display: block; position: absolute; top: -6px; right: -10px; color: #fff; font-size: 10px; line-height: normal; overflow: hidden; text-align: center;}


.items .button-change-cart {	min-height: 14px; min-width: 14px; height: 14px; width: 14px; padding: 0;}
.items .button-change-cart:before { font-size: 14px!important; line-height: 32px!important; }
.items .button-change-cart-trash { }
.items .item-quantity { display: inline-block; height: 32px; line-height: 32px; min-width: 20px; text-align: center; }
.items .qty { text-align: center; }
.items .icon { text-align: center; min-width: 32px;     padding: 0px 7px 3px 7px;    margin: -5px -9px -9px -9px;}
.items .info { text-align: center; padding: 0px; margin: 0px;}
table.item-qty { min-width:200px;}

.cartitems {width:75%; margin-left:12%;}
.cartitems .name { padding-left:15%; text-align: left; }
.mobbileitems {width:95%; text-align:center; margin-top: 20px;}
.mobbileitems .name { padding-left:5%; text-align: left; }
.mobbile-slide-content {
    height: 90%;
    top : 5%;
}

.info {
    color: red;
    text-align: center;
    font-weight: bold;
}
.desktop
{
    text-align: center; padding-left:30%;padding-right:30%; 
}
.onLeft {
    float: left;
    width: 40%;
    height: 100%;
    position: relative;
    border: 3px solid #ccc;
}

.onRight {
    float: right;
    width: 60%;

}

.time-accordion
{
    margin: 5px 5px 5px 5px;
    width: 95%;
}

.time-selection-date
{
    border: 1px solid #000;
    background-color :#f8f8f8;
    display:block; 
    

}

.hour-selection-date
{
    margin-left: 3px;
    width : 100%;
}

.time-selection
{
    display:inline-block; 
    position:relative;
    width:100%;
    border-radius: 2%!important;
    min-width:58px;
}

.time-bold
{
    font-weight : bold;
}

.time-button
{
    display:inline-block; 
    position:relative;

    width:80%;
}



.time-expand
{
    display:inline-block; 
    position:absolute;
    font-size:smaller;
    width:18%;
    border-radius: 2%!important;
    right : 5%;
}

.time-open
{
    width : 34px;
}

.time-hide
{
    display : none;

}

.hidden
{
    display : none;
}


.time-selected { border-color: red!important; margin-bottom: 0!important; border-width: 2px; font-weight : bold;}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

div.item-stable {
    border-color: #b2b2b2;
    background-color: #f8f8f8;
    color: #444;
    padding: 16px;
    font-weight: bold;
}

.overflow-scroll {overflow-y:auto;}

.reservations-list {
    margin-top: 100px;
}

table.mgeitems {
    margin-top: 100px;
    width: 100%;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}


    table.mgeitems tr td {
        padding: 0.5rem 0.5rem;
        text-align: right;
        border-top: 1px solid grey;
        border-bottom: 1px solid grey;
        font-size: 16px;
    }

        table.mgeitems tr td.name, table.items thead tr td.name {
            text-align: left;
        }

    table.mgeitems thead tr td {
        padding: 0.875rem 0.9375rem;
        font-weight: bold;
        background-color: aliceblue;
    }

.htmlcontents {
    margin: 10px 10px 10px 10px;
    /*height: 80%;*/
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch !important;
    background-color: #f8f8f8;
}

.menu-item {
    vertical-align: middle;
    padding-top: 16px !important;
}

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

.i-product-icon {
    width: 18px;
    margin-right: 10px;
    vertical-align: middle;
    color:black;
    font-size:larger;
}

.sliderLegend {
    text-align: center;
    margin: 10px auto;

}

.box {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 2px;
}

.available {
    background-color: #fff;
    border: #666666 solid 1px;
}

.booked {
    background-color: Red;
}

.closed {
    background-color: #979797;
}

.boxLegend {
    color: #666666;
    font-size: 12px;
    display: inline-block;
    margin-right: 10px;
    line-height: 32px
}

.calendar-legend {
    color: white;
    font-size: smaller;
    display: inline-block;
}

.dot-legend {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    background-color: red;
    top: 10px;
    margin-left: 20px;
    margin-right: 5px;
}

.reservation_name_large {
    font-size: 20px;
}

.calendar-button-icon {
    margin: 5px 5px 5px 5px;
    font-size: 24px;
    display: flex;
}

table.center
{
    margin-left: auto;
    margin-right: auto;
}

.dates-readonly {
    width: 95%;
    max-width: 95%;
    margin: 0 12px;
    border: 1px solid #ccc;
    padding: 3px 10px 3px 10px !important;
    display: flex !important;
    background-color: transparent !important;
}

.calendar-icon {
    vertical-align: bottom;
}

select {
    width: 95%;
    max-width: 95%;
    margin: 0 12px;
    border: 1px solid #ccc;
    padding: 5px 10px 5px 10px !important;
    display: flex;
}

.width80 {
    width: 80%;
}

.mobile-footer {
    margin-bottom: 15px;
    padding-bottom: 0px !important;
    height: fit-content;
    position: absolute;
}


.button-item-duration {
    color: #444;
    font-size: 14px !important;
    line-height: 30px !important;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 50% !important;
    padding: 3px 7px 3px 7px;
    border: 1px solid #ccc;
}

.no-border {
    border: 0px solid #ccc;
    padding: 3px;
}

.selected-name { overflow: visible; text-overflow: clip; white-space: normal; line-height: normal!important; margin-right: -50px; font-weight:500; display:inline; float:left; font-size:larger;}
.selected-description { line-height: normal!important; margin: 5px -50px 0 0 ; white-space: normal; font-size:small; color:black; }
.selected-date { line-height: normal!important; }
.selected-deposit { line-height: normal!important;  }
.selected-price { line-height: normal!important;   font-weight:500; }
.selected-info { line-height: normal!important; margin: 5px -50px 0 0 ; white-space: normal; font-size:small;}
.selected-notes { line-height: normal!important; margin: 5px -50px 0 0 ; white-space: normal; font-size:small; }

.table-buttons { line-height: 20px;}
.table-notes { line-height: normal!important; margin: 5px 5px 0 13px ; white-space: normal; background-color:transparent; width: 90%;}

td.item-label { min-width:100px; font-size:small;}

.terms-modal {    z-index:20;}
.col-photo  {   width:100px; }
.col-item  {   margin-left:10px;}
.col-photo-mobile  {   width:100px; }
.col-item-mobile  {   margin-left:10px;  left: 100px; position: absolute; width:250px;}  /* if width not set long text won't wrap*/
.col-mobile  {   margin-left:10px;  position: absolute; width:100%;}  /* if width not set long text won't wrap*/
.facility_photo-mobile {
    height: 100px;
    width: 100px;
    object-fit: contain;
    cursor: pointer;
    float: left;
}
.facility_photo {
    height: 100px;
    width: 100px;
    object-fit: contain;
    cursor: pointer;
    float: left;
}
.facility_with_photo {  }
.facility_buttons {
    position: absolute;
    bottom: 5px;
}
.facility_buttons-mobile {  width:100%;}
.category-title { width:100%; background-color:#01528c; color: #fff;     width: 100%; font-size:20px;
    background-color: #01528c;
    color: #fff;
    display: flex;
    padding: 10px;
    margin: 10px;}
.facility_button {
    font-size: 14px;
    border-color: #01528c;
    border-radius: 4px;
    background-color: #01528c;
    color: #fff;
    padding: 2px 20px 2px 20px;
    border-width: 1px;
    min-height: 30px;
    line-height:20px;
}

/*.facility_button[disabled] {
    background-color: #9C9C9C;
    border-color: #9C9C9C;
}*/

.green {
    background-color: #33cd5f;
    border-color: #33cd5f;
}

.noItme
{
    font-weight:500;
    text-align:center!important;
}

.main-footer {
    position: absolute;
    padding: 0 10px 0 10px;
    border-width: 2px;
    width: 100%;
    bottom: 0px;
    background-color: #cccccc;
}


.cart-footer {
    position: absolute;
    padding: 0px 10px 40px 10px;
    border-width: 1px;
    width: 100%;
    bottom: 0px;
    height: fit-content;
}

.dialog-footer {
    position: absolute;
    padding: 0px 10px 0px 10px;
    border-width: 1px;
    width: 100%;
    bottom: 0px;
    height: fit-content;
}

.even {
    background-color: #F1F1F1;
}
.cartdes {
    font-size: smaller;
}
.cartdate{
    font-size:smaller;
}
.cartmark {
    color:red;
}


.popup-head, .popup-title {
    background-color: #01528c;
    color: #fff;
}

.popup-body
{
    font-family:Arial;
}

.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.tdicon-right {
    float:right;
    min-width: 42px;
    padding: 0px 7px 3px 7px;
    margin: -5px -9px -9px -9px;
}

.mobile-popup .popup {
    width: 100%;
    margin: 0px;
}


.summaryitems {
    border: 1px solid #ccc;
    background-color: #F1F1F1;
    margin: 6px auto 6px auto;
    width: 96%;
}
.summaryitems td { padding: 3px; vertical-align: top;}
.summaryitems td span.name { text-align: left;  font-size:large; }
.summaryitems td span.bookingDate  { }
.summaryitems td span.description  { font-size:small; }
.summaryitems td span.alert  { color: red;}
.summaryitems td.summary   { background-color: #A5C9E1;  }

/*.scroll-content {
    overflow: hidden;
}*/
.no-scroll  {
    overflow: hidden;
}
.no-scroll .scroll-content {
    overflow: hidden;
}
.page-scroll {overflow-y:auto; max-height: 75%;}

.confirm-scroll {overflow-y:auto; max-height: 45%;}
.confirm-mobile-scroll  {overflow-y:auto; max-height: 30%;}

.desktop-dialog-scroll {overflow-y:auto!important; }
.item-dialog-scroll {overflow-y:auto!important;max-height: 400px; }
.item-duration-dialog-scroll {overflow-y:auto!important; position:absolute!important; top:50px; bottom:140px;}

.button-right {    width: 58%;     margin: 5px;}

.list-date {   font-size:small; }

.bar span.title_large {
    font-size: 25px;
    text-align: center;
    padding-top: 5px;
    width: 80%;
}

.attendee_information {
    color: #666666;
    padding: 2px 6px 2px 6px;
    vertical-align: middle;
    font-size: x-large;
    display: inline-block;
}

.document-title { padding: 3px;  font-weight:200;}
.documentitems {
    margin: 6px auto 6px auto;
    width: 96%;
    vertical-align: top;
}
.documentitems th { padding: 3px; vertical-align: top; font-weight:200;}
.documentitems th.docType { padding: 3px; vertical-align: top; width:155px; font-weight:200; text-align:left;}
.documentitems th.title { padding: 3px; vertical-align: top; text-align:left; font-weight: 700;}
.documentitems th.header { padding: 3px; vertical-align: top; background-color: #eaebfb; font-weight:bold; text-align:left;}
.documentitems td { padding: 3px; vertical-align: middle;}
.documentitems td.name { text-align: left;   }
.documentitems td.description  { }
.documentitems td.icon  { width:40px; text-align:right;}
.uploadMsg  { padding: 10px 5px 10px 5px;  font-weight:200;}
.uploadWarning  { padding: 10px 3px 10px 10px; font-weight:bold; color: red;}
.uploadRequired  { padding: 10px 3px 10px 10px; font-weight:bold; }
.upload-img-waring { padding: 10px 3px 10px 10px; width:70px; vertical-align: middle;}
.button-upload, .button-upload-remove {
    color: #444;
    font-size: 20px !important;
    line-height: 30px !important;
    border-radius: 50% !important;
    padding: 3px 10px 3px 10px;
    border: 1px solid #ccc;
}

.cart-img {
    vertical-align: text-bottom;
}

.productsBar-welcome {
    font-size: 12px;
    padding-top: 16px;
    padding-left: 5px;
}

.confirm-eventname {font-size:large ; font-weight:normal;}

.confirm-total {width:100%;  background-color:#e0edff; border: 1px solid black;  width: 98%; margin:1%; padding: 2px; font-size: medium; }
.confirm-total td { padding:5px; }
.confirm-total .name { text-align: left; max-width:30%; }
.confirm-total .text-right { min-width:100px; }
.confirm-total .spare-space { width:15%;  }

.mobile-total {width:100%;  background-color:#e0edff; border: 1px solid black;  width: 98%; margin:1%; padding: 2px; font-size: medium; }
.mobile-total td { padding:2px; }
.mobile-total .name {  text-align: left; }
.mobile-total .text-right { min-width:100px;  }
.mobile-total .spare-space { width:10%;  }