@charset "utf-8";
/* CSS Document */
html {
	height: 100%;	
}
body {
	background: url('../images/background.jpg') #8e8f91;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #898989;
	margin: 0 auto;
	height: 100%;
}
h1, h2, h3, h4 {
	font-family: 'Rokkitt', serif;
	margin: 0 0 12px 0;
}
h1 {
	color: #996872;
	font-size: 42px;
}
h2 {
	color: #996872;
	font-size: 32px;
}
h3 {
	font-size: 30px;
}
a {
	color: #996872;
	text-decoration: none;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	/* ...and now for the proper property */
	transition:.5s;
}
	a:hover {
		color: #c63276;
	}
label {
	font-weight: bold;
	color: #666;
}
.clr {
	clear: both;
}
.disclaimer {
	font-size: 11px;
}
.small {
	font-size: .8em;
}
.oddRow td {
	background: #eee;	
}
.text-input {
	height: 20px;
	width: 250px;
	border: 1px solid #999;
	border-radius: 6px;
	color: #c98a97;
	font-size: 18px;
	padding: 5px;
	margin: 0 0 6px 0;
}
	#companySetup .text-input {
		width: 400px;
	}
#pageOverlay {
	display: none;
	background: url('../images/black_overlay.png');
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9998;
}
	.loading  {
		/*background: url('../') no-repeat;*/
		display: none;
		text-align: center;
		color: #fff;
		position: fixed;
		height: 100px;
		width: 200px;
		top: 50%;
		left: 50%;
		margin-top: -50px;
		margin-left: -100px;
		z-index: 9999;
	}
.closePopup {
	background: #996872;
	width: 18px;
	float: right;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	padding: 4px;
	clear: left;
	text-align: center;
	cursor: pointer;
	border-radius: 3px;	
}
.wrapper {
	position: relative;
	width: 940px;
	height: 100%;
	margin: 0 auto;
	top: 0;
	display: block;
}
/* -- LOGIN --*/
#loginBox {
	background: url('../images/login_box.png') no-repeat;
	position: absolute;
	height: 340px;
	width: 764px;
	top: 50%;
	left: 50%;
	margin-top: -285px;
	margin-left: -397px;
	padding: 15px;
	opacity: 0;
}
	#loginBox p {
		font-size: 20px;
		margin: 5px 0 15px 0;
	}
	
	#pink-ribbon {
		width: 297px;
		float: left;
		margin: 10px 0 0 10px;	
	}
	
	#loginForm {
		width: 435px;
		float: right;
	}
	
	#loginBox h2 {
		color: #996872;
		font-size: 52px;
		margin: 20px auto 5px auto;
		text-align: center;
	}
	
	#loginForm label {
		display: block;
		width: 80px;
		float: left;
		height: 40px;
		line-height: 2.8em;
	}
	
	.login-input {
		background: url('../images/login_input.png') no-repeat;
		height: 30px;
		width: 325px;
		border: 0;
		float: left;
		color: #c98a97;
		font-size: 22px;
		padding: 5px;
		margin: 0 0 6px 0;
	}
	
	.login-button {
		background: url('../images/login_button.png') no-repeat;
		height: 45px;
		width: 410px;
		border: 0;
		margin: 0 auto 15px 0;
		font-family: 'Rokkitt', serif;
		color: #fff;
		font-size: 34px;
		text-align: center;
		cursor: pointer;
		font-weight: bold;
	}
/*-- Header --*/
#header {
	height: 80px;	
}
#logo-inner {
	position: absolute;
	height: 116px;
	width: 614px;
	top: 0;
	left: 30px;
	margin: 0 0 0 0;
	z-index: 2;
}
.clinic-name {
	width: 30%;
	float: left;	
}
	.clinic-name .company-name {		
		
		margin: 0;
	}
	
	.availDates {
		width: 95%;
		font-size: 14px;
		margin: 15px 0 0 0;
	}
.user-menuContainer {
	position: relative;
	display: block;
	width: 100%;
	top: 12px;
	left: 0;
	z-index: 100;
}
	.user-menu {
		position: relative;
		width: 40%;
		float: right;
		text-align: right;
		font-family: 'Rokkitt', serif;
		color: #996872;
		font-size: 18px;
		font-weight: normal;
		margin: -10px 0 0 0;
		
	}
	
		.user-menu a {
			position: relative;
			color: #996872;
			z-index: 3;
		}
		
		.user-menu a:hover {
			color: #c63276;
		}
	
/* -- CONTENT --*/
#content-top {
	background: url('../images/content_top.png') no-repeat;
	position: relative;
	display: block;
	height: 33px;
	width: 918px;
	margin: 0 auto 0 auto;
	z-index: 1;
}
#content {
	background: url('../images/content_bg.png') repeat-y;
	position: relative;
	min-height: 300px;
	width: 818px;
	margin: 0 auto;
	padding: 0 55px 30px 45px;
}
#content-bottom {
	background: url('../images/content_bottom.png') no-repeat;
	position: relative;
	display: block;
	height: 34px;
	width: 918px;
	margin: 0 auto;
	z-index: 1;
}
#footer {
	font-size: 11px;
	padding: 8px 32px;
	text-align: center;
	color: #fff;
}
/*-- CALENDAR --*/
#calendar {
	width: 92%;
	margin: 0 auto;
}
#calHeader {
	height: 45px;
	width: 100%;
}
#calPreviousLink {
	width: 20%;
	text-align: left;
	float: left;
	font-size: 11px;
	line-height: 3.0em;
}
#calMonthTitle {
	width: 60%;
	text-align: center;
	float: left;
}
#calNextLink {
	width: 20%;
	text-align: right;
	float: right;
	font-size: 11px;
	line-height: 3.0em;
}
h3.calTitle {
	color: #996872;
	font-size: 26px;
}
.calTable {
	width: 100%;
}
.calRowHeader {
	background: #996872;
	color: #fff;
	font-weight: bold;
	text-align: center;
	/*width: 13%;
	width: 20%;*/
	width: 16.6%;
}
	.calTable tr .calTimeRow{
		background: #fff;
		-o-transition:.5s;
		-ms-transition:.5s;
		-moz-transition:.5s;
		-webkit-transition:.5s;
		/* ...and now for the proper property */
		transition:.5s;
	}
	
	.calTable tr:hover td.calTimeRow {
		background: #eee;		
	}
	
	.calTable tr:hover td.calAvailable{
		background: #ffebf4;
	}
		
		.calTable tr:hover td.calAvailable:hover{
			background: #ffe0ef;
		}
		
	.calRowHeader.greyHeader {
		background: #666;
	}
	
	.calRowHeaderSingle {
		background: #996872;
		color: #fff;
		font-weight: bold;
		text-align: center;
		width: 100%;
	}
		.calRowHeaderSingle #calHeader {
			color: #fff;
			height: 30px;
		}
		
			.calRowHeaderSingle #calHeader h3.calTitle {
				color: #fff;
				margin: 0;
				padding: 0;
			}
			
			.calRowHeaderSingle #calHeader a {
				color: #fff;
			}
		
.calRowEvent, .calRowEventLocked {
	position: relative;
	height: 80px;
	border: 1px solid #CCC;
}
	.calRowEventLocked {
		background-color: #f9f9f9;
	}
	.calRowEvent h3 {
		color: #996872;
		font-size: 22px;
		text-align: center;
		margin: 3px 0;
	}
	
	.calRowEventLocked h3 {
		color: #999;
		font-size: 22px;
		text-align: center;
		margin: 3px 0;
	}
	
	.calRowEvent p, .calRowEventLocked p {
		text-align: center;
		font-size: 12px;
		margin: 3px 0 15px 0;
	}
	.calRowEvent ul {
		margin: 0 0 0 -40px;
		list-style: none;
	}
		.calRowEvent ul li {
			font-size: 13px;
			z-index: 3;	
		}
		
		.admin-edit-event, .admin-click-event {
			position: relative;
			-o-transition:.5s;
			-ms-transition:.5s;
			-moz-transition:.5s;
			-webkit-transition:.5s;
			/* ...and now for the proper property */
			transition:.5s;
			text-align: center;
			cursor: pointer;
		}
		
			.calRowEvent ul li.admin-edit-event a {
				color: #fff;
			}
			
			.calRowEvent ul li.admin-edit-event:hover {
				background: #825861;
			}
			
	 .scheduleselectTime {
		 width: 330px; 
		 float: left; 
		 margin: 0 0 10px 0;
	 }
	 
	 	.scheduleselectTimeRow {
			 margin: 0 0 10px 0;
		}
		
			.scheduleselectTimeRow select {
				font-size: 18px;
			}
	
.calRowEvent-small {
	height: 20px;
	border: 1px solid #CCC;
}
	.calRowEvent.rowToday {
		border: 1px solid #996872;	
	}
	
	.calRowEvent:hover {
		background: #ffeef6;
		-o-transition:.5s;
		-ms-transition:.5s;
		-moz-transition:.5s;
		-webkit-transition:.5s;
		/* ...and now for the proper property */
		transition:.5s;
	}
	
		.userCal .calRowEvent:hover {
			cursor: pointer;
		}
	
	.rowSunday {
		background: #fff6fa;
	}
	
	.calDate {
		font-size: 11px;
		text-align: right;
		padding: 2px;
	}
	
	.calStatus {
		position: relative;
		font-size: 16px;
		text-align: center;
		padding: 2px 2px 4px 2px;
	}
	
	.calTimeRow {
		font-size: 22px;
		color: #333;
		font-family: 'Rokkitt', serif;
		white-space: nowrap;
	}
	
	.calEdit {
		font-size: 11px;
		/*position: absolute;
		margin: -20px 0 0 0;
		top: 0;
		left: 0;*/
	}
	
		.calEdit a {
			color: #fff;
		}
	
	.calAvailable {
		background: #fff6fa;
		cursor: pointer;
		color: #996872;
		-o-transition:.5s;
		-ms-transition:.5s;
		-moz-transition:.5s;
		-webkit-transition:.5s;
		/* ...and now for the proper property */
		transition:.5s;
	}
		
		.calAvailable:hover {
			background: #ffeef6;
			
		}
		
			.popup {
				display: none;
				background: #fff;
				position: fixed;
				min-height: 250px;
				width: 700px;
				top: 50%;
				left: 50%;
				margin-top: -205px;
				margin-left: -380px;
				padding: 20px;
				z-index: 9999;
				border-radius: 12px;
				border: 10px solid #996872;
			}
			
				.popup h2 {
					font-size: 42px;
					border-bottom: 1px dotted #996872;
				}
				
				.apptForm {
					width: 90%;
					max-width: 650px;
					margin: 0 auto;
				}
				
				.popup label {
					display: block;
					width: 100px;
					float: left;
					height: 40px;
					line-height: 2.8em;
				}

				.popup .apptForm label {
					width: 220px;
					height: auto;
					line-height: inherit;
					top: 12px;
					position: relative;
				}
				
				#appt-scheduleDisplayTime {
					
				}
					#appt-scheduleMultiple {
						display: none;
						margin: 0 0 10px 0;
					}
					
					.scheduleDisplayTime strong {
						font-weight: bold;
						color: #666;
						width: 220px;
						display: inline-block;
						margin: 0 0 10px 0;
					}
					
				.appt-input {
					/*
					background: url('../images/login_input.png') no-repeat;
					*/
					height: 26px;
					width: 334px;
					border: 0;
					float: left;
					color: #c98a97;
					font-size: 18px;
					padding: 7px 10px;
					margin: 0 0 6px 0;
					background: rgb(228,228,228);
					background: linear-gradient(0deg, rgba(228,228,228,1) 0%, rgba(253,253,253,1) 100%);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					-webkit-box-shadow: inset 0px 0px 5px 1px rgba(248,161,199,1);
					-moz-box-shadow: inset 0px 0px 5px 1px rgba(248,161,199,1);
					box-shadow: inset 0px 0px 5px 1px rgba(248,161,199,1);
				}
				
				.appt-button {
					background: url('../images/login_button.png') no-repeat;
					height: 45px;
					width: 410px;
					border: 0;
					margin: 0 auto 15px auto;
					font-family: 'Rokkitt', serif;
					color: #fff;
					font-size: 34px;
					text-align: center;
					cursor: pointer;
					font-weight: bold;
					opacity: 1;
					-o-transition:.5s;
					-ms-transition:.5s;
					-moz-transition:.5s;
					-webkit-transition:.5s;
					/* ...and now for the proper property */
					transition:.5s;
				}
				
				.appt-button:hover {
					opacity: .9;	
				}
				
				.checkbox {
					display: inline-block;
					margin-right: 12px;
					
				}

				.checkbox input[type="checkbox"], .checkbox input[type="radio"] {
					opacity: 0;
				}

				.checkbox label {
					position: relative;
					display: inline-block;
					cursor:  pointer;
					/*16px width of fake checkbox + 6px distance between fake checkbox and text*/
					padding-left: 22px;
					width: -moz-fit-content !important;
					width: min-content !important;
					top: 20px !important;
				}

				.checkbox label::before,
				.checkbox label::after {
					position: absolute;
					content: "";

					/*Needed for the line-height to take effect*/
					display: inline-block;
				}

				/*Outer box of the fake checkbox*/
				.checkbox label::before{
					height: 16px;
					width: 16px;

					border: 1px solid;
					left: 0px;

					/*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
					 *to vertically center it.
					 */
					top: 0px;
				}

				/*Checkmark of the fake checkbox*/
				.checkbox label::after {
					height: 5px;
					width: 9px;
					border-left: 2px solid;
					border-bottom: 2px solid;

					transform: rotate(-45deg);

					left: 4px;
					top: 4px;
				}

				/*Hide the checkmark by default*/
				.checkbox input[type="checkbox"] + label::after, .checkbox input[type="radio"] + label::after {
					content: none;
				}

				/*Unhide on the checked state*/
				.checkbox input[type="checkbox"]:checked + label::after, .checkbox input[type="radio"]:checked + label::after  {
					content: "";
				}

				/*Adding focus styles on the outer-box of the fake checkbox*/
				.checkbox input[type="checkbox"]:focus + label::before, .checkbox input[type="radio"]:focus + label::before {
					outline: rgb(59, 153, 252) auto 5px;
				}

			
	.calunAvailable {
		background: #e4e4e4;
	}
	
	.calBooked {
		background: #FFC;
		color: #b48801;
	}
	
.calRowNoDate {
	background: #eeeeee;
	height: 80px;
	border: 1px solid #CCC;
}
/*-- Tabs --*/
.tabs { 
	margin: 10px 0 0 0; 
	position: relative;
}
.tabs ul.nav {
	padding:0 0 0 12px; 
	margin: 0;
	float:left; 
}
.tabs ul.nav li { 
	list-style:none; /*Try deleting this float*/ 
	float:left; 
}
.tabs ul.nav li a { 
	display:block; 
	background:#222; 
	color:snow; 
	padding:6px 13px; 
	font: bold 14px Arial; 
	text-decoration:none; 
	margin: 0 2px 0 0;
}
.tabs ul.nav li a.selected { 
	background:#996872; 
	color:#fff; 
}
.tabItems div.tabContent { 
	float:left;
	width: 100%; 
	margin: 0 0 0 0.5em;
	padding: 20px 0 0 0;
	border-top: 1px solid #996872;
}
.tabs ul, .idTabs a { 
	border-radius:4px; 
	-moz-border-radius:4px; 
}
/*-- Messages --*/
.mssg {
	padding: 10px;
	font-size: 16px;
	border-radius: 6px;	
	margin: 5px 0 10px 0;
}
.mssg.error {
	background: #eedbe3;
	border: 2px solid #900;
	color: #900;	
}
.mssg.success {
	background: #ddffd7;
	border: 2px solid #176804;
	color: #176804;
}
.mssg.alert {
	background: #fffcdc;
	border: 2px solid #b28202;
	color: #b28202;
	
}
.mssg.info {
	background: #d9eff4;
	border: 2px solid #0092b7;
	color: #0092b7;
}
.choose_client {
	position: relative;
	width: 320px;
	cursor: pointer;
	margin: 5px 0 15px 0;
}
.company-name {
	width: 600px;
	cursor: pointer;
	margin: 5px 0 15px 0;
}
	
	.choose_client .title {
		font-family: 'Rokkitt', serif;
		margin: 0 0 0 0;
		font-size: 30px;
		font-weight: bold;
	}
	
	.company-name .title {
		font-family: 'Rokkitt', serif;
		margin: 0 0 0 0;
		font-size: 34px;
		font-weight: bold;
	}
	
	.choose_client:hover i {
		
	}
	
	.choose_client i {
		position: relative;
		width: 30px;
		padding: 2px 6px 6px 6px;
		margin: -10px 0 0 0;
	}
	
		.choose_client i.active {
			color: #fff;
			background: #996872;
			border-top-left-radius: 2px;
			border-top-right-radius: 2px;
		}
	#client-list {
		position: absolute;
		/*opacity: .7;
		box-shadow: 10px 10px 10px #000;*/
		display: none;
		background: #996872;
		color: #fff;
		top: 0;
		left: 0;
		font-size: 14px;
		padding: 7px;
		/*margin: 50px 0 0 12px;*/
		margin: 30px 0 0 0;
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		z-index: 11;
		
		height: 500px;
		overflow-y: scroll;
	}
	
		.locationDisplay  #client-list {
			padding: 7px 10px;
		}
	
	#client-list ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
		#client-list ul li {
			padding: 5px 10px;
			border-bottom: 0px solid #fff;
			-o-transition:.5s;
			-ms-transition:.5s;
			-moz-transition:.5s;
			-webkit-transition:.5s;
			/* ...and now for the proper property */
			transition:.5s;
		}
		
	#client-list li:hover {
		cursor: pointer;
		background: #895d66;	
	}
	
.choose-location {
}
	.choose-location h2.title {
		width: 264px;
		margin: 0;
		white-space: nowrap;
		font-size: 26px;
	}
		
		.choose-location h2 i {
			font-size: 16px;
		}
.choose-location, #choose_location_small {
	cursor: pointer;
	z-index: 10;
}
	.choose-location i {
		position: relative;
		width: 15px;
		padding: 2px 5px 4px 5px;
		margin: -9px 0 0 13px;
	}
	.choose-location i.active {
		color: #fff;
		background: #996872;
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
	}
#date_rangeMenu {
	list-style: none;
	padding: 0;
	margin: 0;
}
	#date_rangeMenu li a {
		display:block; 
		background:#996872;
		color:snow; 
		padding: 10px 25px; 
		font: bold 22px Arial; 
		text-decoration:none; 
		margin: 5px 2px 12px 0;
		text-align: center;
	}
	
	#date_rangeMenu li a:hover {
		background:#895d66;
	}
	
.locationDisplay {
	/*background: #f4f4f4;*/
	position: relative;
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 12px;
	width: 97%;
	margin: 15px auto 12px auto;
	font-size: 16px;	
}
	#company-logo {
		position: absolute;
		top: 15px;
		right: 15px;
		height: 120px;
		width: 300px;
		text-align: center;
		vertical-align: middle;
	}
	
		#company-logo img {
			max-width: 300px;
			height: auto;
			
			vertical-align: middle;
		}
	
	.locationDisplay h3 {
		font-size: 24px;	
	}
	
	.locationDisplay h4 {
		color: #996872;
		font-size: 20px;
	}
	
	.locationDisplay .small {
		font-size: 11px;
	}
	
#locations-list {
	position: absolute;
	/*opacity: .7;
	box-shadow: 10px 10px 10px #000;*/
	display: none;
	background: #996872;
	color: #fff;
	
	white-space: nowrap;
	font-size: 14px;
	padding: 10px;
	margin: -1px 0 0 0;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}
	#locations-list ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#locations-list li {
		cursor: pointer;
		margin:0 0 0 10px;
		padding: 3px 6px;
		border-bottom: 0px solid #fff;
		-o-transition:.5s;
		-ms-transition:.5s;
		-moz-transition:.5s;
		-webkit-transition:.5s;
		/* ...and now for the proper property */
		transition:.5s;
	}
	
	#locations-list li:hover {
		background: #895d66;	
	}
#clientEditForm {
	display: none;
}
#locationEditForm {
	display: none;
}
#userEditForm {
	display: none;
}
#locations-table {
	width: 100%;
}
/*-- Tables --*/
thead {
	background: #996872;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
@media only screen and (max-width: 920px) {
	.wrapper {
		width: 100%;
		min-width: 560px;
		margin: 0 auto;
	}
	
	#logo-inner {
		position: relative;
		width: 95%;
		left: 0;
		margin: 10px auto;
	}
	
		#logo-inner img {
			width: 100%;
			max-width: 614px;
		}
	
	
	#loginBox {
		background: #fff;
		height: auto;
		width: 95%;
		margin: 0 auto;
		position: relative;
		height: 340px;
		width: 764px;
		top: 0;
		left: 0;
		margin-top: 0px;
		margin-left: 0px;
		opacity: 1;
	}
		
		#pink-ribbon {
			display: none;	
		}
		
		#loginForm {
			width: auto;
			float: right;
		}
	
	.clinic-name {
		width: 60%;
		float: left;	
	}
	
		.clinic-name h2 {
			font-size: 28px;
		}
	
	.user-menu {
		
	}
	
	#content-top {
		background: #fff;
		width: 95%;
		margin: 0 auto;
	}
	
	#content {
		background: #fff;
		width: 95%;
		margin: 0 auto;
		padding: 0;
	}
	
		#content-inner {
			padding: 0 10px;	
		}
		
	#content-bottom {
		background: #fff;
		width: 95%;
		margin: 0 auto;
	}
}