:root {
    --palette-white: #fff;
    --palette-black: #000;
    --palette-green: #5cb85c;
    --palette-green-dark: #3c8f3c;
    --palette-red: #ed4023;
    --palette-red-dark: #c72509;
    --palette-muted: #bbaeae;
    --palette-muted-dark: #333;
    --palette-red-outline: #eb4124;
    --btn-primary-bg: var(--palette-green);
    --btn-primary-bg-hover: var(--btn-primary-bg);
    --btn-primary-text: var(--palette-white);
    --btn-negative-bg: var(--palette-red);
    --btn-negative-bg-hover: var(--palette-red-dark);
    --btn-negative-text: var(--palette-white);
    --btn-muted-bg: var(--palette-muted);
    --btn-muted-bg-hover: var(--palette-muted-dark);
    --btn-muted-text: var(--palette-white);
    --btn-outlined-border: var(--palette-green);
    --btn-outlined-negative-border: var(--palette-red-outline);
    --btn-outlined-text: #000;


    /* Error colors */
    --alert-error-text: #721c24;
    --alert-error-bg: #f8d7da;
    --alert-error-border: #f5c6cb;
    
    /* Success colors */
    --alert-success-text: #155724;
    --alert-success-bg: #d4edda;
    --alert-success-border: #c3e6cb;
}


* {
    outline: none !important;
}

htp {
    margin: 0px;
}

body {
    font-family: 'Open Sans', sans-serif;    
    background-color: #dcdcdc;
    font-size: 16px;
    margin: 0px;
    color: #000;
}
/* Buttons */
.button,
.buttonEx,
.button-negative,
.buttonEx-negative,
.button-back,
.buttonEx-outlined,
.buttonEx-outlined-new,
.buttonEx-outlined-negative {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 10px 19px;
    text-decoration: none;
    line-height: unset;
}

    .button:hover,
    .button:focus,
    .button:active,
    .buttonEx:hover,
    .buttonEx:focus,
    .buttonEx:active,
    .button-negative:hover,
    .button-negative:focus,
    .button-negative:active,
    .buttonEx-negative:hover,
    .buttonEx-negative:focus,
    .buttonEx-negative:active,
    .button-back:hover,
    .button-back:focus,
    .button-back:active,
    .buttonEx-outlined:hover,
    .buttonEx-outlined:focus,
    .buttonEx-outlined-new:hover,
    .buttonEx-outlined-new:focus,
    .buttonEx-outlined-negative:hover,
    .buttonEx-outlined-negative:focus {
        text-decoration: none;
    }

.button, .buttonEx {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

    .button:hover, .buttonEx:hover,
    .button:focus, .buttonEx:focus {
        background: var(--palette-green-dark);
        color: var(--btn-primary-text);
    }

.button-negative, .buttonEx-negative {
    background: var(--btn-negative-bg);
    color: var(--btn-negative-text);
}

    .button-negative:hover,
    .buttonEx-negative:hover,
    .button-negative:focus,
    .buttonEx-negative:focus {
        background: var(--btn-negative-bg-hover);
        color: var(--btn-negative-text);
    }

.button-back {
    background: var(--btn-muted-bg);
    color: var(--btn-muted-text);
}

    .button-back:hover,
    .button-back:focus,
    .button-back:active {
        background: var(--btn-muted-bg-hover);
        color: var(--btn-muted-text);
    }

.buttonEx-outlined,
.buttonEx-outlined-new,
.buttonEx-outlined-negative {
    padding: 10px;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
    background: transparent;
}

.buttonEx-outlined {
    color: var(--btn-outlined-text);
    border: 1px solid var(--btn-outlined-border);
    font-size: 13px;
}

.buttonEx-outlined-new {
    color: var(--btn-primary-bg);
    border: 1px solid var(--btn-primary-bg);
    font-size: 14px;
    margin: 0 10px 15px 0;
    text-align: center;
}

.buttonEx-outlined-negative {
    color: var(--btn-outlined-negative-border);
    border: 1px solid var(--btn-outlined-negative-border);
    font-size: 14px;
    margin: 0 10px 15px 0;
}

.buttonEx-outlined:hover,
.buttonEx-outlined:focus,
.buttonEx-outlined.active,
.buttonEx-outlined-new:hover,
.buttonEx-outlined-new:focus,
.buttonEx-outlined-new.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    text-decoration: none;
}

.buttonEx-outlined-negative:hover,
.buttonEx-outlined-negative:focus,
.buttonEx-outlined-negative.active {
    background: var(--btn-negative-bg);
    color: var(--btn-negative-text);
}
 
.buttonEx-outlined-new i,
.buttonEx-outlined-negative i {
    font-size: 18px;
    vertical-align: text-bottom;
    margin-right: 5px;
}
a {
    color: #E94E1B;
    text-decoration: none;
}

.body-container {
    text-align: center;
    position: relative;
}

.container {
    display: inline-block;
    width: 960px;
    padding: 10px;
}

.container-main {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background: #fafafa;
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 380px;
    width: 1140px;
}

.container-main.no-bg {
    background: none;
    text-align: center;
    position: relative;
    min-height: 0px;
    background-color: #ffffff;
}

.container-main .common-box {
    margin: 20px 6%;
    min-height: 80px;
    height: auto;
}

.container-main .common-box.top-gap {
    padding-top: 10px;
}

.container-main .common-box.restaurant-info {
    background: #fff;
    border: 1px solid #ebebeb;
    min-height: 125px;
}

.container-main .common-box > .div-entry-info {
    background: #fff;
    border-bottom: none;
}

.container-main .common-box.booking-info {
    border: 1px solid #ebebeb;
    background: #f5f5f5;
    padding-bottom: 20px;
    min-height: 150px;
}
.container-main .common-box.greybox {
	border: 1px solid #ebebeb;
	background: #f5f5f5;
	padding-bottom: 20px;
	min-height: 150px;
	overflow: auto !important;
}

.greybox .greybox-inner-info {
padding: 40px;
}
.booking-info .booking-inner-info {
    padding: 40px;
}

.logo {
    background-image: url('../images/logo.png');
    background-repeat: no-repeat;
    background-position-x: center;
    display: inline-block;
    width: 100%;
    height: 60px;
}

 
 
.status, .status1 {
    border-radius: 50%;
    border: 1px solid #ccb9aa;
    height: 120px;
    width: 120px;
    display: inline-block;
    color: #fff;
    text-align: center;
}

.status {
    background-color: #4e4d4d;
}

.status1 {
    background-color: #3c8f3c;    
}

.status_minute {
    font-size: 56px;
    display: block;
}

.status_msg {
    font-size: 16px;
}

.guest {
    font-size: 26px;
}



a {
    color: #E94E1B;
    text-decoration: none;
}

 

/* Inputs */
input, textarea, select, .form-control {    
    border-radius: 3px;    
    padding: 5px;
    box-sizing: border-box;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    width: 100%;    
    height: 45px;
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--palette-black);
    border: 1px solid #ced4da;
    background: #fff !important;
    box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%);
}

    input:focus, textarea:focus, select:focus {
        border-color: rgba(82,168,236,0.8);
        outline: 0;
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    }

.tandc {
    padding: 10px 0px;
    line-height: 20px;
    font-size: 14px;
    text-align: left;
    color: #606060;
}

 

.ui-loader-default {
    background: none;
    filter: Alpha(Opacity=25);
    opacity: .25;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    margin-top: -23px;
}

.ui-loader .ui-icon {
    background-color: #000;
    display: block;
    margin: 0;
    width: 44px;
    height: 44px;
    padding: 1px;
    border-radius: 36px;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
}

.ui-loader {
    display: none;
    z-index: 9999999;
    position: fixed;
    top: 50%;
    left: 50%;
    border: 0;
}

.ui-icon-loading {
    background: url(../images/ajax-loader.gif);
    background-size: 46px 46px;
}


.hide {
    display: none !important;
}

.reservation-detail-box {
    padding: 10px;
    border-radius: 4px;
    background-color: #F5F2F2;
}

.reservation-detail-box .res-heading {
    font-weight: bold;
    font-size: 18px;
}

.reservation-detail-box .res-booking {
    font-size: 18px;
}

.reservation-detail-box .res-specialrequest {
    font-size: 16px;
    padding-top: 10px;
}

.booking-change {
    display: block;
}

.booking-change div.select-date,
.booking-change .w-40 {
    display: inline-block;
    width: 40%;
    padding-bottom: 10px;
}

.booking-change div.select-shift,
.booking-change .w-25 {
    display: inline-block;
    width: 25%;
    padding-bottom: 10px;
}

.booking-change div.select-guest,
.booking-change .w-25 {
    display: inline-block;
    width: 25%;
    padding-bottom: 10px;
}

.booking-change select {
    width: 100%;
}


.booking-change .w-30 {
    width: 30% !important;
}

.booking-change .w-20 {
    width: 20% !important;
}

.booking-change .w-28 {
    width: 28% !important;
}
.booking-change .w-29 {
    width: 29% !important;
}

.blg_txtarea {
    width: 100%;
    resize: vertical;
    height: 80px;
}

.inline-container .inline-button {
    padding: 0 5px 5px 5px;
    display: inline-block;
}


.chg-booking .chg-booking-specialrequest-label,
.chg-booking .chg-booking-tandc {
    text-align: left;
}

.chg-booking .chg-booking-specialrequest-label {
    padding-bottom: 10px;
}

.chg-booking .chg-booking-specialrequest,
.chg-booking .chg-booking-tandc {
    padding-bottom: 20px;
}

.chg-cancelbooking {
    border-top: 1px solid #eee;
    margin-top: 20px;
    padding: 10px 0;
}

.chg-cancelbooking .chg-heading {
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 10px;
}

.chg-cancelbooking .chg-description {
    padding-bottom: 10px;
}


.chg-thankyou {
    font-weight: bold;
    font-size: 18px;
    margin: 10px 0;    
}


 

.availabletimeslot .found,
.availabletimeslot .notfound {
    margin-top: 14px;
}
.availabletimeslot .timeslot{
    text-align:center;
    font-size:13px;
}


.div-error,
.div-error-msg,
.div-success-msg,
.div-finish-msg,
.div-save-msg {
    margin-top: 10px;
    font-size: 14px;
    border-radius: 4px;
}

.div-error {
    text-align: left;
    padding: 10px 20px;
    display: none;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.div-error.show {
    display: block;
}

.div-error-msg,
.div-success-msg {
    text-align: left;
    padding: 20px;
    display: block !important;
    border: 1px solid transparent;
}

.div-error-msg {
    color: var(--alert-error-text);
    background-color: var(--alert-error-bg);
    border-color: var(--alert-error-border);
}

.div-success-msg {
    color: var(--alert-success-text);
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
}

.div-finish-msg,
.div-save-msg {
    display: none;
    margin-bottom: 10px;
}

.inner-info .rest-name,
.inner-info .cust-name,
.inner-info .rest-addr,
.inner-info .reservation-text,
.inner-info .reservation-dtl {
    float: left;
    width: 100%;
}
.inner-info .rest-name {
    color: #000;
    font-weight: 600;
    font-size: 20px;
}

.inner-info .cust-name {
    color: #ea4124;
    font-size: 20px;
    margin-bottom: 20px;
}

.inner-info .rest-addr {
    font-size: 14px;
    color: #000;
    margin-top: 10px;
}

.inner-info .reservation-text {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
}

.inner-info .reservation-dtl {
    font-size: 16px;
    color: #484848;
    margin-bottom: 10px;
}
.inner-info .reservation-dtl i {
    font-size: 20px;
    margin-right: 5px;
    display: inline-block;
    color: #ea4124;
}
.inner-info .reservation-dtl .spl-req-text{
    font-style:italic;
    font-size:14px;
}
    .inner-info.rest-dtl {
        padding: 25px 0 0 40px;
        float: none;
    }
.common-box.booking-info .inner-info.rest-dtl {
    padding-right: 40px;
}
.inner-info.rest-dtl span {
    display: block;
    float: none;
}
    .inner-info.rest-dtl span.phone {
        margin-top:10px;
    }
    .inner-info.rest-dtl span.spn-ico {
        display: inline-block; 
        margin-right:7px;
    }
    .inner-info.rest-dtl span.spn-data {
        display: inline-block;
    }

.inner-info.rest-contact {
    padding-top: 0;
    float: none;
    text-align: left;
    width: auto;
    padding-bottom: 20px;
}
 

.waiting-info {
    overflow: auto !important;
}

.div-horizontal-divider {
    position: relative;    
    border-bottom: 1px solid #dcdcdc;
}
.div-horizontal-divider.top-gap-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.div-horizontal-divider.top-gap-40 {
    margin-top: 40px;
    margin-bottom: 40px;
}
.div-horizontal-divider .or-box {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    top: -20px;
    left: 44%;
    background: #fff;
    padding: 6px;
    font-weight: 600;
}
.checkbox-container{
    margin:15px 0px;
}
.checkbox-area{
    margin-bottom:15px;
}
.checkbox-area .custom-chk {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: text-bottom;
}

/*waiting*/
.waiting-status {
    border-radius: 50%;
    border: 1px solid #ccb9aa;
    height: 120px;
    width: 120px;
    display: inline-block;
    background-color: #3c8f3c;
    color: #fff;
    text-align: center;
}
.status_minute {
    font-size: 46px;
    display: block;
}

.status_msg {
    font-size: 16px;
}
.spn-wait-queue {
    padding-left: 20px;
    display:inline-block;
}

/*Common css for all application textbox, select, textarea, html elements */
.input-container-enquiry .change-date-btn {
    padding: 13px 17px 13px;
    margin-top: 30px;
    height: 45px;
}
.div-datetime-info .div-cont {
    font-size: 24px;
    margin-bottom: 15px;
    color: #000;
}
.img-alert-loader {
    height: 28px;
    vertical-align: middle;    
}
.input-container {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}
.input-container .w-25{
    width:25%;
}
.input-container .w-30 {
    width: 30%;
}
.input-container .input-icon {
    text-align: center;
    vertical-align: bottom;
    color: var(--palette-black);
    white-space: nowrap;
    padding: 8px 10px;
    min-width: 40px;
    background: var(--palette-white);
    position: absolute;
    right: 15px;
    top: 2px;
    font-size: 18px;
}
.input-icon.right-25{
    right:25px;
}
.input-icon.right-5 {
    right: 5px;
}
    .input-container input, .input-container select, .input-container textarea {
        width: 100%;
    }
.form-heading {
    font-size: 18px;
    color: var(--palette-muted-dark);
}

/*CC Card section style */
._ccBtn {
    display: block;
    background: #5CB85C;
    color: white;
    border-radius: 2px;
    border: 0;
    margin-top: 20px;
    outline: none;
    margin: 0px 5px 5px 0px;
    padding: 10px 19px;
    cursor: pointer;
}
.StripeElement, .ccname {
    border: 1px solid silver;
    border-radius: 4px;
    padding: 5px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;   
}
.StripeElement--invalid {
    border-color: #fa755a;
}