:root {
    --menu-backgroundColor: #218838;
    --menu-backgroundColor-hover: #28a745;
    
    --primaryColor: #28a745;
    --primaryColor-hover: #218838;
    --cartEntryHeaderColor: #218838;
    
    --applyDiscountBtnMin: 120px;
    --searchButtonMin: 220px;
    --productSelectBtnMin: 178px;
    --productBookButtonMin: 200px;
    --bookAnotherBtnMin: 200px;
    --completeOrderBtnMin: 200px;
}

/* Reservation body classes override body style in site.css. Segments Agent Path vs. Res path classes  */
.resPathBody {
  font-family: "Poppins", Sans-serif !important;
}
.resPathTipinBody {
	font-family: "Poppins", Sans-serif !important;
}

.ResPathClassTipin {
  padding-top: 10px !important;
}
.bookHeader {
  /* display: none; ??*/
  font-size: 1.2em !important;
  padding-top: 10px;
  padding-left: 10px;
  font-weight: 400;
  text-align: center !important;
}
.defaultCardHeader {
    margin-bottom: 0;
    background-color:rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.125);
    padding: 0.25rem 1.25rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.customCardBody {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.checkboxTitleClass {
  font-size: 14px !important;
}
/* Complete order Button */
.completeOrderBtn {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  min-width: var(--completeOrderBtnMin);
}
.completeOrderBtn:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}
/* Search Button */
.searchButtonClass {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  min-width: var(--searchButtonMin);
}
.searchButtonClass:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}
.searchButtonDiv {
	display: inline-block;
	width:auto !important;
}
/* Product Select Button */
.productSelectBtn {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
}
.productSelectBtn:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}
/* Check Out Button */
.checkOutBtn {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  min-width: var(--bookAnotherBtnMin);
}
.checkOutBtn:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}
/* Book Another Button */
.bookAnotherBtn {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  min-width: var(--bookAnotherBtnMin);
}
.bookAnotherBtn:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}
/* Book Return Button */
.bookReturnBtn {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  min-width: var(--bookAnotherBtnMin);
}
.bookReturnBtn:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}
/* Book Button */
.productBookButton {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  min-width: var(--productBookButtonMin);
}
.productBookButton:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}
/* Apply gratuity & discount */ 
.applyDiscountBtn {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  min-width: var(--applyDiscountBtnMin);
}

.applyDiscountBtn:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}

.applyGratuityBtn {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  min-width: var(--applyDiscountBtnMin);
}

.applyGratuityBtn:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}

.homeBookBtn {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  min-width: var(--applyDiscountBtnMin);
}
.homeBookBtn:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}

/* Change Split Button */
.changeSplitBtn {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
}
.changeSplitBtn:hover {
  background-color: var(--primaryColor-hover);
  border-color: var(--primaryColor-hover);
}

/* Menu background color */
.bg-dark{
  background-color: #218838 !important;
}
/* highlighted current product*/
.currentProduct{
    margin-bottom: 10px;
    box-shadow: 0 4px 8px 0 #218838 !important;
}
.resEditFullHeader{
    /*color: darkorange;*/
    color: #1ea0e4;
}

/* reservation table */
.endUserResTable {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    /* font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; */
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    width: 100%;
}
.endUserResTable thead th {
    /*background-color: white;*/
    background-color: #ededed;
    border: solid 1px #859CBA;
    /*border-bottom: solid 1px #DDEEEE;*/
    color: black;
    padding: 10px;
    text-align: center;
    /*text-align: left !important;*/
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 500;
    /* text-shadow: 1px 1px 1px #fff; */
}
.endUserResTable thead th a {
    color: black;
    text-decoration: underline;
    /* text-shadow: 1px 1px 1px #fff; */
}
.endUserResTable th div {
	position: absolute;
	z-index: 2;
	font-weight: 500;
	width: 100%;
	color: white;
	background-color: dimgrey;
	padding: 10px;
	border-left: 1px solid white;
    margin-left: -11px;
    margin-top: -35px;
    display: flex;
}
.endUserResTable tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}
.endUserResTable tbody tr:nth-child(odd) {
    background-color: #fff;
}
.endUserResTable tbody tr:nth-child(even) {
    background-color: #EEF7EE;
}
.endUserResTable .trHover:nth-child(odd) {
    background-color: #fff;
}
.endUserResTable .trHover:nth-child(even) {
    background-color: #f2f2f2;
}
.endUserResTable .trHover:hover {
    background-color: #ddd;
    /* text-align: center; */
}
.endUserResTable tbody td {
    border-left: none;
    border-right: none;
}
.endUserResTable tbody td img {
    max-width: 90px;
    height: auto;
    vertical-align: middle;
    padding: 1px;
    background-color: #fff;
    border: solid 1px #CCC;
}
.endUserResTable tfoot td {
    line-height: 32px;
    padding: 10px;
}
.endUserResTable button {
    margin: 0 3px 0 0;
}
.endUserResTable .r-paginate {
    float: left;
    width: 40%;
}
.endUserResTable .r-rowcount {
    float: left;
}
.endUserResTable .r-stats {
    float: right;
}


.loginPopup {
    display: flex;
    text-align: center;
    align-content: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 1rem;
    z-index: 100000;
    opacity: 1;
    animation: show .5s ease;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
 }

 .closePopup {
    color:red;
    border-radius:25px !important;
    padding: 4px 10px;
    font-size: 24px;
    float: right;
 }

 /* Allows for adjusting the width depending on the size of the view */
 .loginPopupIframe {
     background: white;
 }

@media screen and (max-width:700px)
{
    .loginPopupIframe {
        width: 100%;
    }
}
.loadingBackdropStyle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.3);
  } 
  .deleteBtn {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    font-size: 18px;
    font-weight: 500;
    border-radius: 2px;
    background-color: white;
    color: black;
    border: 2px solid #cc3d29;
    padding: 4px 14px;
    cursor: pointer;
}

.deleteBtn:hover {
        background-color: #cc3d29;
        color: white;
        /* font-size: 18px; */
        font-weight: 500;
        border-radius: 2px;
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
        /* padding: 8px 18px; */
    }

/* These below Classes should also be included in any external style sheets */
.loginPopup {
    display: flex;
    text-align: center;
    align-content: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 1rem;
    z-index: 100000;
    opacity: 1;
    animation: show .5s ease;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
 }

 .closePopup {
    color:red;
    border-radius:25px !important;
    padding: 1px 10px;
    font-size: 24px;
    float: right;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    font-size: 18px;
    font-weight: 500;
    background-color: white;
    border: 2px solid #cc3d29;
    cursor: pointer;
 }

.closePopup:hover {
        background-color: #cc3d29;
        color: white;
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.popupBackdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.3);
  } 

 /* Allows for adjusting the width depending on the size of the view */
 .loginPopupIframe {
     background: white;
 }

 .loginPopupContent {
    width: auto;
 }

@media screen and (max-width:700px)
{
    .loginPopupIframe {
        width: 100%;
    }
    .loginPopupContent {
        width: 100%;
     }
}

/* Product price */
.priceClass {
	font-size: 24px !important;
	text-align: left;
}
@media (max-width: 470px) {
	.priceClass {
	 	font-size: 18px !important;
	}
}

.resProfileShort {
  color: green;
  font-size: 14px;  
}

/* End include in external override */