@import url(base-form.css); /* Load default styles. Do not delete this line */
@import url(//fonts.googleapis.com/css?family=Noto+Sans|Economica|PT+Sans:400,700);


/* Infield Item Labels */

div.bookingForm {
	max-width: 750px;
}

div.dialogueRadioDiv:first-child, input[type='checkbox'] {

}
.formButtons {
}

div.item div.g-recaptcha {
	margin-left: -10px;
	margin-right: -10px;
}

.payment {
 display: block;
 clear:both;
 margin:0;
}

.payment .item {
	float:none;
	width:100%;
}

.payment .itemContent {
	margin-top:12px !important;
}

.payment div.item:first-child .itemContent {
	margin-top: 2px !important;
	padding: 0px;
}

div.payment {
    left: 0px;
    padding: 15px 10px;
    max-width: 355px;
}

div.payment .item .itemContent {
	margin-top: 20px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
div.payment .item .itemContent input {
	padding: 8px 10px 8px 8px;
}

div.payment .item.expiryDate .itemContent {
	line-height: 40px;
}

div.item.required div.itemLabel p:first-child:before {
	display:none;
}

.payment div.item:first-child .itemContent input {
  /* padding: 0px; */
}

.payment div.item:first-child .itemContent:after {
  top: -30px;
  right: -7% !important;
}

#cardNumberLabel {
	font-size: 12px;
}

@media (max-width: 550px) {
	.payment, .captcha {
		display:inline-block !important;
	}
}

div.item:nth-child(2) {
	clear:both;
}

div.captcha, div.formButtons {
	display:block;
	float: none;
	clear: both;
	width: 100%;
	margin: 0px auto;
	left: -10px;
	text-align: center;
}

.item {
    position:relative;
    /* background-color:aliceblue; */
    padding-top:6px;
    display:inline-block;
    width: 48%;
    vertical-align:top;
    float:left;
    min-width: 200px;
    margin-bottom: 10px !important;
}

div.itemLabel, .kaptchaMessage {
    font-family:'PT Sans', sans-seif;
    text-transform:uppercase;
    position:absolute;
    font-size:12px;
    font-weight:700;
    top: 2px;
    left: 10px;
    width: 90% !important;
    text-align:left !important;
    margin:0 !important;
}

textarea.dialogueTextArea {
	padding: 32px 10px 8px 8px;
}

input.dialogueText, .itemContent select {

	padding: 24px 10px 8px 8px;

}

input.dialogueText, textarea.dialogueTextArea, .itemContent select {
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(194, 211, 219);
	font-size:1.2em;
	width: 96% !important;
	margin-left: -5px;
	margin-top: -15px !important;
	max-width: 400px;
}

.itemContent select {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIhJREFUeNrE0z0OgCAMgNFKPKQHcZcunlubEINaoC1/HQhl+d7Csu2nB4AD5gy6+yAAzohT24VlNAJDE1z0OArxxL+AEYhXnAP0RPziKUAPBBvPAVoikvESoAUiG5cAahDFuBRgQYjiGoAGIY5rARKEKm4B5BDquBXAIUxxmrXii/nEXTWXAAMAa5YgEKA+yuMAAAAASUVORK5CYII=) no-repeat;
	background-position: 98% 80%;
	background-size: 4%;
	max-width: 400px !important;
}

input.dialogueText:focus, textarea.dialogueTextArea:focus {
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(88, 116, 134);
}
.itemContent *:nth-child(2) {
	padding: 8px 10px 8px 8px;
	margin-top: 3px !important;
}


input.dialogueText:focus {

}

@media (max-width: 800px) {
	.item .itemLabel, .item .itemContent {
  		display: inline-block !important;

	}

	.itemContent {
		margin:10px !important;
	}
}

@media (max-width:550px) {
	div.item {
		width:100%;
	}
}

/* Responsive Grid */
@media(min-width: 550px) {
    div.team, div.service {
        background:;
        display: inline-block;
        width: 50%;
        vertical-align: top;
        margin: 0px -2px;
        padding: 3%;
	}
}

@media(min-width: 768px) {
    div.team, div.service {
      width: 33%;
    }
}

/* fixed serviceSubmit
div.serviceSubmit {
	width:100%;
	position:fixed;
	bottom:0px;
	background-color: #C6F6DF;
	padding: 1em;
	text-align: right;
	height: 60px;
}*/

/*div.serviceSubmit::before {
	 content:"Select one or more Services then click";
	display:inline-block;
	color: rgb(44, 44, 44);
	margin-right:20px;
}

@media (max-width:550px) {
	div.serviceSubmit {
		text-align:center;
	}

	div.serviceSubmit::before {
		display:none;
	}
}*/

/**************/
/* Whole page */
/*************/
body {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    background: no-repeat top left;
    background-color: #E1E7EA;
    color: rgb(44, 44, 44);
    /* padding-bottom: 60px; */
}
div.content {
    background-color: #ffffff;
 } /* Contains everything on the page */


/************/
/* Headings */
/************/
h1 { }

/*********/
/* Links */
/*********/
a:link {
	padding: 0px;
	color: rgb(103, 163, 202);
    box-sizing: border-box;
    text-decoration: none;
    font-weight: normal;
}
a:visited { color: rgb(41, 108, 152);}
a:hover { }

/* Button Styles */

h2.teamName a,
h2.serviceName a,
button#submitButton,
div.serviceSubmit input[type='submit'],
button#cancelButton {
    border: 1px solid rgba(0, 0, 0, 0.32);
    border-radius:1em;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0);
    font-weight: normal;
    transition: ease all .1s;
    -webkit-transition: ease all .1s;
    -moz-transition: ease all .1s;
    font-size: 15px;
    margin: 0px auto;
    display: block;
}

div.periodButtons button {
	color: rgb(22, 44, 58);
	background-color:transparent;
	border: none;
	border-radius: 4px;
	padding: 3px 10px;
	margin: 0 5px;
	position: relative;
	/* left: -10px; */
}

div.periodButtons button:hover {
	/* background-color: #A4DBFF; */
	box-shadow: 0px 0px 6px -1px rgb(88, 116, 134);
	border-color: rgb(41, 108, 152);
}

div.periodButtons button.showing {
	background-color: #587486;
	outline: none;
	border-color: rgb(31, 71, 97);
	font-weight:normal;
	color: white;
}


button.ui-datepicker-trigger {
	border:none;
	background-color:transparent;
}

button#submitButton,
button#cancelButton {
    display: inline-block;
    margin: 5px 5px 15px 0;
}

h2.teamName a:visited {
}
h2.teamName a:hover,
h2.serviceName a:hover,
button#submitButton:hover,
button#cancelButton:hover {
    background-color: rgb(103, 163, 202);
    color: white;
    border-color: rgb(103, 163, 202);
}

h2.teamName a:focus,
h2.serviceName a:focus,
button#submitButton:focus,
div.serviceSubmit input:focus,
button#cancelButton:focus {
    /* background-color: #93C3E2; */
    /* color: rgb(255, 255, 255); */
    border-color: rgb(41, 108, 152);
    outline: none;
    box-shadow: rgb(147, 195, 226) 0px 0px 7px 2px;
}

/***************/
/* Page header */
/***************/
div.header {
    background-color: #587486;
    text-align: left;
    /* white-space: nowrap; */
    padding: 16px 0 8px;
    margin: 0 0 30px;
} /* Could contain a logo, text, or both */

div.header.noImage {
    margin-top: 0px;
 } /* The 'noImage' class gets applied if no logo image is present. Use to override layouts that break/look odd when no image is present */
div.header.noTitle { } /* The 'noTitle' class gets applied if no <h1 class='title'> is present. Use to override layouts that break/look odd when no <h1> is present */
div.header.noText { } /* The 'noText' class gets applied if there is no custom header text, and therefore div.headerText is not included in the markup. Use to override layouts that break/look odd when no custom header text is present */

div.headerStart { } /* Empty div. Default = display: none */

div.header img.logo {
}

div.header img.largeImage {
	display:block;
	max-height:260px;
	margin:8px auto;
}

div.header img.smallImage {
    display: inline-block;
    margin: 0px 16px;

    background-color: #587486;
    max-height: 130px;
}

 /* Some users will upload a logo. This image will not appear if users do not upload a logo */
	div.header img.logo.landscape { } /* Applied to landscape images */
	div.header img.logo.portrait { } /* Applied to portrait images */
	div.header img.logo.square { } /* Applied to square images */

div.header h1.title {

    display: inline-block;
    color: white;
    font-size: 1.7em;
    font-weight: normal;
    line-height: 1.5;
    margin: 0 20px;
} /* By default, all users have their name / their company name as an h1 */

div.header div.headerText {
    display: inline-block;

    border-left: 2px solid rgba(255, 255, 255, 0.75);
    position: relative;
    left: -2px;
} /* Users can add a block of content to the header. This div will be empty if users do not add any content. */

div.header div.headerText p {
	color: #ffffff;
	font-size: 1.2em;
	margin: 0 20px;
	line-height: 2;
}

div.headerEnd {
    display: block;

    clear: both;
} /* Empty div. Default = display: none */



/***********/
/* Content */
/***********/
div.main {

} /* Contains all the content that isn't part of the header or footer */

div.mainStart { } /* Empty div. Default = display: none */

div.instructions {
    padding: 12px;
    color: rgba(0, 0, 0, 0.8);
    text-align: left;
    background: #E1E7EA no-repeat 0px -80px;
    margin: -30px 0 30px;
} /* Users can add a block of content here, e.g. an introduction to their company or a description of their services */

div.instructions a:link {
	color: rgb(0, 114, 171);
}

div.instructions a:visited {
	color: black;
}

div.instructions a:hover {
	border-bottom: 1px solid #2994da;
}

div.instructions p {
	padding: 0 10px;
}

div.instructions p:nth-child(2) {
	color: black;
	font-size:1.3em;
}

div.serviceSubmit {
	/* position:absolute; */
	/* top: -70px; */
	/* background-color: #C6F6DF; */
	/* display: block; */
	/* padding: 10px 1em; */
	/* border-radius: 6px; */
	/* width: 400px; */
	/* left: 50%; */
	margin: 30px;
}

div.timeZone, div.jumpDate button.ui-datepicker-trigger {
	background-color: #E1E7EA;
	display: inline-block;
	padding: 10px 1em;
	border-radius: 6px;
	color: rgb(34, 49, 58);
	vertical-align: middle;
	position:relative;
	/* left: -50px; */
}

#timeZoneForm select {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIhJREFUeNrE0z0OgCAMgNFKPKQHcZcunlubEINaoC1/HQhl+d7Csu2nB4AD5gy6+yAAzohT24VlNAJDE1z0OArxxL+AEYhXnAP0RPziKUAPBBvPAVoikvESoAUiG5cAahDFuBRgQYjiGoAGIY5rARKEKm4B5BDquBXAIUxxmrXii/nEXTWXAAMAa5YgEKA+yuMAAAAASUVORK5CYII=) no-repeat;
	background-position: 95% 60%;
	background-size: 12px;
	background-color: white;
	max-width: 400px !important;
	border: 1px solid rgb(88, 116, 134);
	border-radius: 4px;
}

div.periodButtons {
	background-color: #E1E7EA;
	display: inline-flex;
	padding: 10px 1em;
	border-radius: 6px;
	color: rgb(34, 49, 58);
	vertical-align: middle;
	position:relative;
	/* left:-50px; */
}

button.ui-datepicker-trigger span {
}

div.jumpDate button.ui-datepicker-trigger:hover {
	background-color: #587486;
	color: white;
}

div.mainEnd {
    display: block;

    height: 2px;
    clear: both;
} /* Empty div. Default = display: none */



/**********************/
/* Password protected */
/**********************/
/* Users can choose to password protect their booking profiles. Example: https://template-protected.youcanbook.me [Password = test] */
div.dialogue.password { }
div.passwordForm { }



/************/
/* Services */
/************/
div.services {
    clear: both;
	position:relative;

} /* All services are contained in this div */

div.services.chooseMany {
	margin-top: 120px;
}

div.servicesStart { } /* Empty div. Default = display: none */

button.ui-datepicker-trigger {
    display: inline-block;
    color: white;
} /* Some templates show one overall submit button rather than individual links to choose a service. Example: http://template-beauty.youcanbook.me */

div.serviceSubmit input[type='submit'] {
	background-color: #FFFFFF;
	vertical-align: baseline;
}

div.serviceSubmit input[type='submit']:hover {
	background-color:#4484AE;
	color: white;
	border-color: rgb(68, 132, 174);
}

div.servicesEnd { } /* Empty div. Default = display: none */

	/***********/
	/* Service */
	/***********/
	div.service {

} /* Each individual service is wrapped in it's own .service div */

	div.service.noImage { } /* The 'noImage' class is applied if no image is present. You can use this to override layouts that break/look odd when no image is present, e.g. floated designs */

	div.serviceStart { } /* Empty div. Default = display: none */


	div.servicePic, div.teamPic {
    height: 200px;
    width: 200px;
    border-radius: 100%;
    margin: 0px auto;
    overflow: hidden;
    position: relative;
} /* Users can upload an image of their service. If they do not upload an image, this div will not appear */
	div.servicePic img, div.teamPic img {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	max-width: 110%;
 	margin: 0px auto;
}
.ie8 div.servicePic img, .ie8 div.teamPic img {
 	position: relative;
 	top: 0%;
 	left: 0%;
}
 /* As above */
		div.servicePic img.landscape, div.teamPic img.landscape {
    transform: translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    max-width: 150%;
    min-height: 100%;
} /* Applied to landscape images */
		div.servicePic img.portrait, div.teamPic img.portrait {
    transform: translate(-50%, -33%);
    -webkit-transform:translate(-50%, -33%);
    max-width: 110%;
} /* Applied to portrait images */
		div.servicePic img.square, div.teamPic img.square {
    width: 100%;
    transform: translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
} /* Applied to square images */

	h2.serviceName, h2.teamName {
    margin: 1em 2em;
 } /* Name of the service. Contains a link. */
	h2.serviceName  a { }
	h2.serviceName  a:visited { }
	h2.serviceName  a:hover { }

	div.serviceDescription { } /* Users can add a block of content hereto describe the service */

	div.serviceDuration { } /* e.g. (15 minutes) */

	div.servicePrice  { } /* e.g. $10.00 */

	div.serviceSelect { } /* Contains a link for users to choose this service */
	div.serviceSelect a { }
	div.serviceSelect a:visited { }
	div.serviceSelect a:hover { }

	div.serviceSelect input[type='checkbox'] { } /* Some templates allow for multiple service selections, e.g. http://template-beauty.youcanbook.me */

	div.serviceEnd { } /* Empty div. Default = display: none */

	div.serviceGroup {
		border:1px solid #999;
		border-radius:12px;
	}

/**********/
/* Teams */
/*********/
div.teams {
    clear: both;
 } /* All teams are contained in this div */

div.teamsStart { } /* Empty div. Default = display: none */

div.teamSubmit input[type='submit'] { } /* Some templates show one overall submit button rather than individual links to choose a team. Example: http://template-beauty.youcanbook.me */

div.teamsEnd { } /* Empty div. Default = display: none */

	/*********/
	/* Team  */
	/*********/
	div.team { } /* Each individual team is wrapped in it's own .team div */

	div.team.noImage { } /* The 'noImage' class is applied if no image is present. You can use this to override layouts that break/look odd when no image is present, e.g. floated designs */

	div.teamStart { } /* Empty div. Default = display: none */

	div.teamPic { } /* Users can upload an image of their team. If they do not upload an image, this div will not appear */
	div.teamPic img { } /* As above */
		div.teamPic img.landscape { } /* Applied to landscape images */
		div.teamPic img.portrait { } /* Applied to portrait images */
		div.teamPic img.square { } /* Applied to square images */

	h2.teamName { } /* Name of the team. Contains a link. */
	h2.teamName  a { }
	h2.teamName  a:visited { }
	h2.teamName  a:hover { }

	div.teamDescription { } /* Users can add a block of content hereto describe the team */

	div.teamSelect {display:none;
 } /* Contains a link for users to choose this team */
	div.teamSelect a { }
	div.teamSelect a:visited { }
	div.teamSelect a:hover { }

	div.teamEnd { } /* Empty div. Default = display: none */

	div.team.teamsAnyLink { } /* The "no preference" option */



/*******************/
/* Calendar / Grid */
/******************/
div#spinner { } /* Animated gif that appears whilst grid is loading */

div#gridPage {
    /* text-align: left; */

    clear: both;
} /* Contains the grid, plus any extra content such as buttons */
/* Various classes are added to div#gridPage based on what elements the profile has included */
/* .yesFree or .noFree = whether there are any free times on the grid (one of these will be present on all profiles) */
/* .yesTimezone or .noTimezone = whether the timezone select dropdowns are included, e.g. https://template-photography.youcanbook.me */
/* .yesJumpDate or .noJumpDate = whether the "jump to date" feature is included, e.g. https://template-photography.youcanbook.me */
/* .yesPeriodButtons or .noPeriodButtons = whether the period buttons are included, e.g. https://designdemo.youcanbook.me */

div.periodButtons { margin-top:15px } /* Buttons to select morning/afternoon/evening. Not present on all templates. Example: http://designdemo.youcanbook.me */
	div.periodButtons button {
    transition: ease all .1s;    -webkit-transition: ease all .1s;    -moz-transition: ease all .1s;
 }
	div.periodButtons:hover button { }

div.jumpDate {
    display: block;
    margin: 15px 0 0 0;
    margin-bottom: 0px;
} /* Allows user to choose a specific date. Produces jQuery UI date picker when clicked. Not present on all templates. Example: http://template-driving.youcanbook.me */
	div.jumpDate button {
    transition: ease all .1s;    -webkit-transition: ease all .1s;    -moz-transition: ease all .1s;
 }
	div.jumpDate button:hover { }

div.timeZone { margin:0;}	/* Dropdowns to allow users to choose a timezone/country. Example: https://template-interviews.youcanbook.me */
	div.timeZone.aboveGrid {

} /* If dropdown is positioned above grid */
	div.timeZone.belowGrid { } /* If dropdown is positioned below grid */

div.grid {
    text-align: center;

    clear: both;
    font-size: 1.2em;
} /* Contains the grid */

div.paging.wideCol {
	position:relative;
	top:2em;
	height:3em;
}

div.paging.wideCol a {
	background-color:blue;
	display:block;
	width:100%;
	position:relative;
	z-index:2;
}

div.paging.wideCol.pagingNext {


}

div.paging.wideCol.pagingNext:after {
	content:">";
	font-family:'Economica', sans-serif;
	position:absolute;
	top:-20px;
	left:50%;
	display:block;
	color: rgb(88, 116, 134);
	font-size:4em;
}

div.paging.wideCol.pagingPrevious:after {
	content:"<";
	font-family:'Economica', sans-serif;
	position:absolute;
	top:-20px;
	right:50%;
	display:block;
	color: rgb(88, 116, 134);
	font-size:4em;
}

div.paging.wideCol.mediumCol:after {
	font-size:2.6em;
	top:-14px;
}

div.paging {
    background-color: transparent;
 } /* Previous / next navigation */
/* NOTE: On large/medium screens, the previous/next links show as arrow images. On small screens, these are replaced with the words "previous" and "next" */
div.paging.pagingBefore { } /* Previous */
div.paging.pagingBefore { } /* Next */

	/* To change the default arrows, use the following: */
	/* The .rtl is for languages that read from right-to-left, so the arrows need to show the other way around */
	div.paging.pagingNext.wideCol h4 a, html.rtl div.paging.pagePrevious.wideCol h4 a {
		background: url('') center center no-repeat !important;
	}

	div.paging.pagingPrevious.wideCol h4 a, html.rtl div.paging.pageNext.wideCol  h4 a  {
		background: url('') center center no-repeat !important;
	}

div.gridDays { } /* Each column in the grid is contained in a .gridDays div */

div.gridDay {
 } /* A column in the grid */
	div.gridDay.wideCol {
    margin: 20px 0;
 } /* Width class added with JavaScript based on screen size. Updates as screen is resized. */
	div.gridDay.mediumCol { } /* Width class added with JavaScript based on screen size. Updates as screen is resized. */
	div.gridDay.narrowCol { } /* Width class added with JavaScript based on screen size. Updates as screen is resized. */

div.gridHeader {
    border-bottom: 2px solid rgb(255, 255, 255);

    padding: 1em 0;
} /* Column heading. Shows the day & date */
	div.gridHeader h4 { }
	div.gridHeader h4 span.gridHeaderDayName { } /* Example content: Mon */
	div.gridHeader h4 span.gridHeaderDate { } /* Example content: 21/10/2013 */
	div.gridHeader h4 span.gridHeaderFull { } /* Hidden by default. Example content: Monday, 21 October 2013 */

div.gridSlot  {
    margin: 0;

    border-bottom: 1px solid #d6dce0;
} /* An individual time on the grid */

div.main .gridPage .grid .gridBusy, div.main .gridPage .grid .gridNoFree {
    text-decoration: none;
    color: rgba(155, 155, 155, 0.33);
} /* Time not available */

div.main .gridPage .grid .gridFree, .gridNoFree, div.showTechnicallyFree div.gridTechnicallyFree {
    background-color: transparent;
 } /* Time is available */
	/* Available times contain a link. You might need to use !important to see your changes */
	div.gridFree a {
    color: rgb(90, 90, 90);

}
	div.gridFree a:visited { }
	div.gridFree a:hover { text-decoration:none; }

div.main .gridPage .grid .gridHighlight, div.main .gridPage .grid .gridHighlight:hover {
	background-color: rgb(41, 108, 152);

	color: white;
	cursor: pointer;
	border-color: rgb(103, 163, 202);
} /* When user hovers over an available time in the grid */
	div.main .gridPage .grid .gridHighlight a:link { color:white }
	div.main .gridPage .grid .gridHighlight a:visited { }
	div.main .gridPage .grid .gridHighlight a:hover { text-decoration:none; }

div.noFreeMessage { } /* This appears over the grid if there are no available timeslots for the whole week */

@media (max-width:550px) {
	div.timeZone select {
		display:block;
		margin-top:5px;
		width:200px;
		}

}
	/***************/
	/* Date picker */
	/***************/
	/*
	e.g. https://template-photography.youcanbook.me - click the "jump to date" button.
	Please customise the popup datepicker to match your theme
	You will need an !important after all of your styles, e.g. background: #fff !important;
	*/

	/* Wrapper */
	.ui-datepicker {
		font-family: 'PT Sans', sans-serif !important;
  		font-weight: normal !important;

		border: 1px solid rgb(88, 116, 134) !important;
  		border-radius: 0 !important;

		box-shadow: rgba(88, 116, 134, 0.44) 0px 2px 12px !important;
  	}

	/* Inside the wrapper - main background for the entire calendar */
	.ui-widget-content {

  		background: #E1E7EA !important;
  		color: #587486 !important;
   	}

	/* Header bar (where the month/year is displayed */
	.ui-widget-header {
		background: #587486 !important;
  		color: #ffffff !important;
  		font-weight: normal !important;
  		border:0 !important;
  	}

  	.ui-datepicker {
  		  width: inherit !important;

  		  border-radius: 4px !important;
  		  /* margin-left: 20px !important; */
}

  	.ui-datepicker th {
  		min-width:40px !important;
  	}

  	.ui-datepicker td {
  		padding:0 !important;
  	}

	/* Days of the week */
	.ui-datepicker-calendar {
	  margin: 0 0 .2em !important;

}

	/* Background of numbers */
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		background: #FFFFFF !important;
  		font-weight: normal !important;

		border: none !important;
		color: #587486 !important;

		text-align: center;
}

	/* Background of numbers when you hover */
	.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {

  		font-weight: normal !important;
  		background-color:#1c94c4 !important;

  	}

	/* Today's date */
	.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
		color: #fff !important;
		background:#7EAECD !important;
		border:none !important;
	 }

	/* Previous arrow - background */
	.ui-datepicker-prev.ui-corner-all {
 }
	.ui-datepicker-prev.ui-corner-all:hover {
  	}

  	.ui-icon {
  	}

	.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {

	}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  border: none !important;
  background: #587486 !important;
  font-weight: normal !important;
  color: white !important;
  top: 2px !important;
}

	/* Previous arrow icon */
	.ui-datepicker-prev.ui-corner-all .ui-icon.ui-icon-circle-triangle-w {
		background-image: none;
  		background-position: 0px;
  	}
	.ui-datepicker-prev.ui-corner-all .ui-icon.ui-icon-circle-triangle-w:hover {
		background-image: none;
  		background-position: 0px;
  	}

  	.ui-datepicker .ui-datepicker-prev-hover {
  		left: 0px !important;
	}

  	.ui-datepicker-prev.ui-corner-all::after {
		content: "<";
  		font-family: 'Economica', sans-serif;
  		position: absolute;
		top: -15px;
		left:4px;
  		display: block;
		color: rgb(255, 255, 255);
		font-size: 3em;
  	}

	/* Next arrow - background */
	.ui-datepicker-next.ui-corner-all { }
	.ui-datepicker-next.ui-corner-all:hover {
  		background-color: #587486 !important;
  	}


	/* Next arrow icon */
	.ui-datepicker-next.ui-corner-all .ui-icon.ui-icon-circle-triangle-e {
  		background-image: none;
  		background-position: -24px;
  	}

  	.ui-datepicker .ui-datepicker-next-hover {
  		right: 0px !important;
	}


	.ui-datepicker-next.ui-corner-all::after {
		content: ">";
  		font-family: 'Economica', sans-serif;
  		position: absolute;
		top: -15px;
		right:4px;
  		display: block;
		color: rgb(255, 255, 255);
		font-size: 3em;
  	}

	.ui-datepicker-next.ui-corner-all .ui-icon.ui-icon-circle-triangle-e:hover {
		background-image: none;
  	}

  	/*title*/
  	.ui-datepicker .ui-datepicker-title {
  	}

  	.ui-widget-header a {
  		cursor:pointer;
  		transition: ease all .1s;
  		-webkit-transition: ease all .1s;
  		-moz-transition: ease all .1s;
  	}

/****************/
/* Booking form */
/****************/
/* An example of a complex form: http://designdemo.youcanbook.me */

div.bookingForm {
    width: 84%;
    padding-top: 9px;
}

/* Contains the booking form */

div.itemLabel {

}

div.item {
	/* clear:both; */
	max-width: 355px;
}

div.item:first-child div.itemLabel {
    display: block;
    text-align: center;
    margin: 0px 0;
    padding: 0;
    width: 100%;
    font-size: 1.5em;
    clear: both;
    position:relative;
}

/* Form field labels */

div.item:first-child div.itemContent {
    /* color:red; */
    display: block;
    /* text-align: center; */
    margin: 0px 8px;
    width: 100%;
    font-size: 1.5em;
}
div.itemLabel p, div.kaptchaMessage {
    color: rgb(136, 175, 200);
}

div.itemContent, div.itemSimple {
    width: 90% !important;
    margin: 10px !important;
}

/* Text content that the user can't change, e.g. the booking date, price, service name, etc. */
div.itemContent p {
    margin-left: 0px !important;
    margin-bottom: 20px !important;
}

div.bookingForm input {
}

/* Input boxes */
div.bookingForm input {
}

div.bookingForm input.invalid {
	background-color: rgb(255, 255, 255);
	border-color: rgb(197, 12, 12);
}

/* Input boxes */
div.bookingForm select {
    padding: 1em 0 0;
}

/* Drop downs */
div.bookingForm input[type='radio'] {
    margin-left: 0px;
}

/* Radio buttons */
div.bookingForm input[type='checkbox'] {
    margin-left: 0px;
}

/* Checkboxes */
.item.itemCheckbox .itemLabel {
    padding-left: 30px;
    padding-top: 10px;
}

/* Textareas */
div.bookingForm textarea {
}
div.item div.itemSimple hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(49, 77, 82, 0.49), rgba(0, 0, 0, 0));

}

/* Horizontal rule */

div.itemAfter { } /* Text that appears after the form section */

div.kaptcha, div.payment {
    position: relative;

    width: initial;

    border: 1px solid rgb(182, 203, 216);
    border-radius: 6px;
    text-align:left;
    width: 100%;
}


div.kaptcha {
	padding: 20px 20px 10px;
}

div.kaptchaImage, div.kaptchaResponse {
	display:inline-block;
	width: 150px;
	vertical-align: top;
}

div.kaptchaResponse {
	margin-left: 0px !important;
}



 /* Kaptcha box */
	div.kaptcha div.kaptchaMessage {
	position:absolute;
	top: 2px;
	left: 5px;
	margin: 10px;
}
	div.kaptcha input {
	height:50px;
	font-size:20px;
	padding-left:10px;
	width: 150px;
	text-transform:uppercase;
}

input#submitButton { }
input#submitButton span { }
input#submitButton:hover { }

input#cancelButton { }
input#cancelButton span { }
input#cancelButton:hover { }

div.warning { position:relative; bottom: 18px; left: 14px; max-width: 300px;} /* If someone submits the form without all required fields filled in. Appears next to empty required fields */



/*********************/
/* Confirmation page */
/*********************/
div.dialogue.afterwards {
    clear: both;

    margin: 2em auto;
} /* User can upload a block of content here, e.g. a "thanks for booking" message */



/**********/
/* Footer */
/**********/
.footer {
    background-color: rgb(88, 116, 134);

    color: #ffffff;
    padding: 10px;
}

	.footerStart { } /* Empty div. default = display: none */

	.footerText { } /* Users can upload a block of content here. If no content, this div is not included */

	.footerEnd { } /* Empty div. default = display: none */

.footer a:link, .header a:link {
	color: rgba(255, 255, 255, 0.62);
	}

.footer a:visited, .header a:visited {
	color: rgba(255, 255, 255, 0.62);
	}

.footer a:hover, .header a:hover {
	border-bottom: 1px solid rgba(255, 255, 255, 0.76);
	color: white;
}
/*****************/
/* Credit button */
/****************/
div.poweredBy { } /* Credit button appears on free acounts. Example: http://designdemo.youcanbook.me */
	div.poweredBy a:link { }
	div.poweredBy a:visted { }
	div.poweredBy a:hover { }-box