/*-------------------------------------Common CSS between Spa and Class-------------------------------------------*/
body 
{
	font-family: "Segoe UI",Helvetica,Tahoma,Arial,Verdana,sans-serif;
	background-color: #fff;
}

.clearAfter:after
{ 
    clear: both;
    content: ""; 
    display: block; 
}

a{
    cursor: pointer;
}

.link:hover{
    cursor: pointer;
    text-decoration: underline;
}

#LoginArea{
    display: inline-block;
    float: left;
}

#loginBar
{
	margin-top: 10px;
	margin-bottom: 10px;
}

#loginControls{
    color: #333333;
}

#loginButton
{
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

#BookingLinks{
    display: inline-block;
    position: relative;
}

.showGalleryIcon {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 32px;
    pointer-events: none;
}

/*To Undo the above when user is not logged in*/
#loginlink{
    position: relative;
    float: left;
}

#BookingLinksText{
    list-style-type: none;
    list-style-image: none;
    padding-left: 0px;
}

#BookingLinksText li{
    display: inline;
    margin-left:5px;
}   
#loginXtraMsg {
    padding-left: 5px;
}
#guestWelcomeLabel
{
    float:left;
}

#logoutlink{
    padding-left: 20px;
}

.coursesBookedTxt
{
    margin-right: 10px;
	margin-top:4px;
}

#bookBtn, #mainNextBtn{ /*is mainNextBtn on Class, bookBtn on Spa*/
    /*margin-right: 0px;*/
    position: relative;
    top: -3px;
}

#mainNextBtn, #mainBackBtn, #classSearchBtn{ /*is mainNextBtn on Class, bookBtn on Spa*/
    width: 75px;
}

input[type=date]
{
    height: 25px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
}

input[type=date]::-webkit-inner-spin-button
{
    /* http://stackoverflow.com/a/17955112/1202659 */
    -webkit-appearance: none;
    display: none;
}

.headertext label
{
	vertical-align:sub;
}
.headertext label:hover
{
	text-decoration:underline;
	cursor:pointer;
}

.headerRight
{
	float:right;
}
.headerLeft
{
	/*margin-left:10px;*/
}
.Hidden
{
	display:none;
}

#confirmGuest,  #confirmGuestBack
{
	margin-top:10px;
}

.guestCheckboxLabel
{
	vertical-align:middle;
	margin-left:10px;
}

.guestAvailabilityText
{
	margin-left:15px;
	font-size:smaller;
}
.guestCheckboxNameLabel
{
	margin-bottom:0px;
}
.error > .GuestEntryLabel
{
	color:red;
}
.error .GuestEntryMediumBox
{
	border-color:red;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(245,245,245,0.2);
}

#UserDetailsInsert select, #bookingPageThreePaymentDetails select{
    width: 185px;
}

#SaveDetailsInnerArea
{
    margin-bottom: 5px;
}

#CardDetailsSurround .row{
    padding-top: 5px;
}

#goPayment{
    float: right; 
    padding-top: 30px;
}

#conflictingGuests-modal ul{
    list-style: none;
    padding: 0px;
}

#TextAreaNotes, #InputFieldNotes {
    width: 100%;
    margin-left: 0%;
}

/*#UserDetailsInsert
{
    text-align: center;
}

#UserDetailsInsert .GuestEntryLabel
{
    text-align: initial;
}
*/
#UserDetailsInsert #formInputDiv > div:not(.Hidden)
{
   padding-top: 5px;
}

#SaveDetailsInnerArea > div:not(.Hidden)
{
   padding-top: 5px;
}

#CardDetailsSurround{
    padding-bottom:10px;
}

.link:hover @(medai max-width < )
{
	cursor:pointer; 
	text-decoration:underline;
}

.orderBySurround
{	
	float:right;
	display:inline-flex;
	margin-right:2px;
}

@media (max-width: 768px) {
	.container-fluid {
		margin-left: 0px;
		margin-right: 0px;
        padding-left:5px;
        padding-right:5px;
	}

	#LeisureItemsSubGroupsAccordion .ui-accordion-content {
		padding: 5px;
	}

	.orderBySurround {
		float: left;
		width:100%;
		display:block;
	}

	#BookingPage1 label {
		min-width: 90px;
		margin-right: 10px;
		padding-top: 4px;
	}

	#BookingPage1 input, #BookingPage1 select {
		float: right;
		height:25px;
	}
	
	#GuestEntry     
	{
		text-align: center;
	}

	.GuestEntryMediumBox, .GuestEntrySmallBox, .GuestEntryControl input
	{
		width:100%;
	}
	#TextAreaNotes, #InputFieldNotes
	{
		margin-left:0px;
		width:100%;
	}
}




/*Copied from Hotel_System.css. Makes the login dialog look correctly sized*/
/*.ui-dialog {
    font-size: 72.5%;
    margin: 0;
    padding: 0;
}*/

.cancellationPolicySurround
{
	border:1px solid transparent;
	padding:2px;
}

.cancellationPolicyActive
{
	border:1px solid red;
}

#datePickerKeyArea
{
    width: 241px;
    float: right;
    position: relative;
    left: 5px;
    padding: 5px;
    margin-bottom: 5px;
    margin-right: 6px;
    border: 1px solid grey;
}

#datePickerKeyArea .datePickerKey
{
    /*width:49%;
    display:inline-block;
    position: relative;*/
    float: right;
}

#datePickerKeyArea .datePickerKeyLabel
{
    position: relative;
    bottom: 6px;
}

#datePickerKeyAvalible, #datePickerKeyUnavalible
{
    display:inline-block;
    width: 26px;
    position: relative;
    height: 26px;
}

.datePickerKeyBackgroundArea
{
    display: inline-block;
    height: 28px;
}

#datePickerKeyArea .datePickerKeyKeylabel
{
    position: relative;
    top: 2px;
    left: 3px;
}

.calLink
{
    display: inline-block;
    display: none;
}

.disabledButton
{
	opacity:0.5;
}

#contraNote
{
	width:100%;	
}

#guestLogin #userEmail
{
    margin-bottom: 10px;
}

#amountAndDepositDueArea{
    text-align:right;
}

/*-----------------------------------------------------Spa--------------------------------------------------------*/

#spaLeisureSidebar, #spaLeisureSidebar table, #searchButton, #sideBookBtn
{
	width:180px;
	min-width:180px;

}

#spaLeisureSidebar legend
{
	font-size:18px;
}

#spaLeisureSidebar fieldset
{
	margin-bottom:15px;
}

#SearchMessage, #PressSearchMessage
	{
		width:50%;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		margin-top:50px;
	}

.fieldsetInput input
{
	width: 130px;
}
.fieldsetLabel
{
	width:50px;
}

.fieldsetLabel, .fieldsetInput
{
	padding-top:10px;
	padding-bottom:10px;
}

#priceRangeAmount
{
	margin-bottom:0px;
}

#priceRangeAmount, #totalPriceValue
{
	float:right;
}
.priceText
{
	float:right;
}
.spaDaySurround
{
	margin-bottom:20px;
	margin-top:22px;
}

.spaDayImageCol
{
	padding-left:15px;
	padding-top:15px;
	padding-bottom:15px;
}
.viewDetails
{
	clear:both;
}
input.cancellationPolicyCheckBox[type=checkbox]
{
	vertical-align:sub;
	margin-left:10px;
}

.spaDayfooter
{
	clear:both;
	/*margin-left:15px;*/
	margin-bottom:5px;
	margin-top:5px;
}

#loginBar .headertext
{
	text-align:center;
}

.cancelSpaPackageButton
{
	float:right;
}
.OccupancyRow
{
	min-height:30px;
	cursor:pointer;	
}
.OccupancyRowText
{
	vertical-align:sub;
}
#BookingDateTextbox
{
	font-size:small;
}
.upsellSurround
{
	margin-left:10px;
	padding:10px;
	clear:both;
}

.upsellSurroundBootstrap
{
	padding-right:0px; 
}

.packageDescription
{
	clear:both;
}

.upsellRowSurround
{
	padding-top:5px;
	padding-bottom:5px;
}

.upsellSummaryText{
  width: 60%;
  float: right;
  font-weight: normal;
}

#SpaDayLeisureItemsSummary
{
	padding-left:20px;
	padding-right:20px;
}

.spaDayGuestNameHeader{
    font-size:26px;
}

.treatmentCol, .headerCol
{
	width:50%;
}
.treatmentCol
{
	padding-left:20px !important;
}

.headerCol
{
	font-weight:bold;
}

.priceCol
{
	width:10%;
	/*text-align:right;*/
	padding-right: 55px !important;
}

#SpaDayLeisureItemsSummary .priceHeader, 
#SpaDayLeisureItemsSummary .depositHeader{
    width:10%;
}

.individualSpaDaySurround
{
	border-bottom:solid black 1px;
}
.packageElementSummaryRow
{
	font-weight:bold;
}

.addRestaurantBookingBtn, .addTreatmentBookingBtn,
 .editTreatmentBookingBtn, .deleteTreatmentBookingBtn, .deleteRestaurantBookingBtn
{
	float:right;
	font-size:8pt;
}

#LeisureItemsAccordion .therapistPrefArea
{
    padding-top: 10px;
}

#LeisureItemsAccordion .timeButtons
{
    padding-top: 10px;
}

#spaLeisureSidebar.stick {
    position: fixed;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
    padding-top: 20px;
}

#SpaAfterVoucherMessage{
    text-align:right;
}
/*--------------------------------------------Individual Leisure-------------------------------------------------*/

#OccupantsTextbox
{
	width:40px;
}

#priceSliderRow
{
    padding-top:20px;
    padding-bottom:10px;
	clear:both;
}

#leisureSliderRow
{
	margin-top:5px;
	height:20px;
	clear:both;
}
#leisurePriceRow
{
	padding-left:20px;
}
#leisureSliderRow #priceSliderMinVal
{
	float:left;
}
#priceSliderSurround
{
	display:inline-block;
	top:4px;
	margin-left:-15px;
}

#leisureSliderRow #priceSliderMaxVal
{	
	float:right;
}

#priceSliderMaxVal
{
	margin-right:1px;
}

#orderByDescriptionText
{
	margin-right:-4px;
}

.orderBy:hover
{
	cursor:pointer;
}
#orderByText
{
	margin-right:10px;
	padding-top:4px;
}

.SubGroupImgArea
{
    display: inline-block;
    padding-right: 30px;
    padding-bottom: 10px;
}

.SubGroupDescArea{
    vertical-align: top;
    padding-bottom: 10px;
    font-size: smaller;
}

.SubGroupItemsCountLabel
{
    padding: .5em .5em .5em .7em;
    float: right;
    text-align: right;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-right: 3px;
    padding-top: 3px;
}

#TreatmentBesideDateMessage{
    font-size: 21px; 
    margin-right: 20px; 
    margin-top: -2px; 
    margin-left: 10px; 
    padding-top: 0px !important;
}

#TreatmentAfterVoucherMessage{
    text-align:right;
}

/*----------------------------------------------------Class-------------------------------------------------------*/
#courseSelectArea, #classDatesArea
{
    /*border: 1px solid black;*/
}


.ui-accordion .ui-accordion-header
{
    padding: 0px;
    margin-top:5px;
}
.cancelationPolicyArea{
    padding-left:15px;
}
.timesArea{
    margin: 4px 0px;
}
.timesButtons,.timesLabel{
 padding-left:15px;
}

#accordion2 .myAccordionContent
{
    padding: 5px;
}

@media (max-width:600px)
{
    #classAcordianArea
    {
        font-size:15px;
    }
}

@media (max-width:768px)
{
    .img-responsive
    {
        width:100%;
    }
}

.classAccordionHeaderArea
{
    border-top: 0px;
    border-right: 0px;
}

.classAccordionHeaderArea:focus {
    outline: none;
}
.classAccordionHeaderTitleWrapper {
    display: inline-block;
    width: 100%;
}
.classAccordionHeaderTitle
{
    padding: .5em .5em .5em 0em;
    display: inline-block;
    margin-left:30px;
}

.classAccordionHeaderImg
{
    display:inline-block;
}

.classAccordionHeaderText
{
    display:inline-block;
}

.classAccordionHeaderPrice, .leisureAccordionHeaderPrice
{
    padding: .5em .5em .5em .7em;
    float: right;
    width: 100px;
    text-align: right;
    /*border-top-right-radius: 5px;*/
    border-top-left-radius: 5px;
    /*border-bottom-right-radius: 5px;*/
    border-bottom-left-radius: 5px;
}

 .ui-accordion-header-active .classAccordionHeaderPrice
{
    border-bottom-right-radius: 0px;
}

.classDescArea{
    padding-bottom: 30px;
}

.classImgArea
{
    /*min-width:160px;*/
}

.cancellationpolicyClick
{
    font-weight:bold;
}

.TimeButton
{
    margin: 4px 0px;
}

.TimeButton .ui-button-text{
    padding: 0.2em 0.5em;
}

#firstMonth, #placeholderDatePicker{
    /*width: 213px;
    margin: 0px auto;*/
    font-size: 13px;
    float: right;
    width: 206px;
}

#priceSliderCol
{
    position: relative;
    top: 4px;
}

@media (max-width: 767px)
{
    #priceSliderCol
    {
        margin: 20px 0px;
    }

    #classSearchBtnArea{
        margin: 20px 0px;
    }
}

#classSearchBtn
{
    position: relative;
    top: -5px;
}

#agendaTable tr{
    height: 40px;
}

#agendaTable #classNameCol{
    width: 10%;
    border-top-right-radius: 0px;
}

#agendaTable tr :last-child
{
    border-top-left-radius: 0px;
}

#agendaTable thead tr th
{
    text-align: center;
}

/*#agendaTable thead tr th{ 
    border-right: 1px solid grey;

}*/

#agendaTable tbody  tr td:nth-child(4n) { 
    border-left: 2px solid white;
}

#agendaTable thead tr :last-child
{
    border-right: 1px solid transparent;
}

#agendaTable tbody tr td{
    border-right: 1px solid grey;
}

.agendaClassColInstance{
    border-right: 0px !important;
}

.agendaClassColInstanceHover {
    opacity: 0.9;
}

/*Page Two*/
tr.summarySummaryRow
{
    font-weight: bold;
}

.contraindicationQuestionTableQuestionDescription{
    font: small-caption;
}

.contraindicationQuestionTableAnswerHeader{
    width: 10%;
    text-align:center;
}

.contraindicationQuestionTableAnswerCell{
    text-align:center;
}

.contraindicationQuestionTableAnswer{
    text-align:center;
}

#voucherInputArea{
    float: right;
    display: inline-block;
}

#voucherInputArea div:nth-child(2)
{
    text-align:right;
    font-weight:bold;
}

.voucherValueHeader, .voucherApplyHeader, .voucherValueValue, .voucherApplyValue {
    text-align:center;
}

#screenSize
{
    position: fixed;
    top:50%;
    left: 50%;
}

#confirmationBtnArea
{
    float:right;
}

/*---------------*/

#SelectionSeats
{
	float:left;
}

#DropDownRestaurantExperiences
{
	/*float:right;*/
	margin-bottom:20px;
	width:100px;
}



/*#ButtonBackJSON
{
	display:none;
}*/

#ButtonSubmitBookJSON,
#ButtonBackJSON
{
      /*height: 25px;*/
	  margin-left: 5%;
	  margin-right: 5%;
	  width: 90%;
	  margin-top: 5px;
}

#CalendarSelection
{
	clear:both;
}
#CalendarSelection
{
	margin-left: 12.5%;
	margin-right: 12.5%;
	width: 75%;
}

#LabelSeats,
#LabelSession,
#SelectionVenue,
#LabelVenue, 
#SelectionSeats, 
#SelectionSessions,
#LabelExperience,
#SelectionExperience,
#surround
{
	margin-left:5%;
}

#LabelSeats,
#LabelSession,
#LabelExperience
{
    padding-top:5px;
}


#surround
{
	margin-right:5%;
}

#restaurantContainer 
{
    font-size: 90%;
    font-family: "Verdana", Sans-Serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#SelectionTime
{
  height: 250px;
  overflow: auto;
}

#noAvailabilityMessage
{
	text-align:center;
}

#upsellDetailsDialog
{
  min-height: 250px;
  min-width: 300px;
}

#upsellDetailsDialog li a
{
    color: #de9f6f;
}

.leisureErrorBody
{
	width:80%;
	margin:auto;
	padding:5px;
}

.spaLeisureErrorBody
{
	width:80%;
	margin:auto;
	padding:5px;
}

.classErrorBody
{
	width:80%;
	margin:auto;
	padding:5px;
}

.removeLeisureBookingButtonSummary
{
	float:right;
}

#BookingPage3 #SummaryPageTable
{
	padding-right:2px; /*To Ensure the surround is lined up with the edge of the next button*/
}

#NumberOfTreatmentAttendeesTextbox
{
	width:50px;
}

/*----------------------------------------------------Payment Details Page-------------------------------------------------------*/
#idForm input[type=number]::-webkit-inner-spin-button, 
#idForm input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

#CountyPaymentDetails,
#CountryPaymentDetails{
    width: 100%;
}


.classAccordionHeaderTitle span
{
	margin-left:30px;
}

.classAccordionHeaderImg, .classAccordionHeaderText
{
    display:table-cell;
}

.classAccordionHeaderImg
{
    width: 100%;
    text-align: center;
}

@media (min-width: 768px) {
    .classAccordionHeaderImg
    {
        width: initial;
        text-align: initial;
    }
}

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) { 
    .classAccordionHeaderImg, .classAccordionHeaderText
    {
        display:inline-block;
    }
    .classAccordionHeaderImg img {
        width: 100%;
    }
    .classAccordionHeaderText {
        padding: 10px;
    }
}

.classAccordionHeaderText{
    width:100%;
    vertical-align: top;
}

.classAccordionHeaderImg img {
    padding: 10px;
}

.classAccordionHeaderTitle
{
    margin-left: 0px;
}

.ui-state-hover, .ui-state-focus{
    background-image:initial;
}

.ui-accordion-header-icon{
    display:none;
}

.alacerToastMessage{
	position: fixed; 
	width: 50%; 
	top: -100px; 
	margin-left: 25%; 
	padding: 7px; 
	text-align: center; 
	display: block; 
	z-index: 9000;
}

.AddAdditionalTreatmentIcon,
.AddAdditionalTreatmentText,
.AddAdditionalRestaurantIcon,
.AddAdditionalRestaurantText {
    cursor:pointer;
}

#SpaDaysBookedLabel{
	line-height: 26px;
}

.dateOrTimeCol span{
	display: block;
}

#payment-tabs-container {
}

    #payment-tabs-container .payment-tabs div {
        background-color: #fff;
        border: 1px solid #000;
        display: inline-block;
        font-weight: bold;
        padding: 6px 20px 6px 20px;
        margin-bottom: 10px;
    }

        #payment-tabs-container .payment-tabs div:hover {
            cursor: pointer;
        }

        #payment-tabs-container .payment-tabs div.selected {
            background-color: #a1e689;
            display: inline-block;
        }