/* ====================================================================
 *   Import Open Sans fonts
 * ====================================================================
 */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v10/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v10/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxl2umOyRU7PgRiv8DXcgJjk.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxn5HxGBcBvicCpTp6spHfNo.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v10/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(http://fonts.gstatic.com/s/opensans/v10/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

/* ====================================================================
 *   Standard settings
 * ====================================================================
 */

html, body {
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-size: 120%;
  background: #ffffff;
  cursor: default;
}

.Title {
	font-size: 1.1em;
	font-weight: 700;
	vertical-align: top;
	margin-left: 0.2em;
	color: #d82125;
}

.TitleImage {
	width: 1.4em;
	height: 1.6em;
	background-image: url(img/arrowdown.png);
	background-size: 1.4em 1.6em;
	background-color: #d82125;
}

.TitleText {
	display: block;
	color: #d82125;
	font-size: 0.92em;
	font-weight: 600;
	padding-top: 0.1em;
}

.Text {
	color: #515048;
	font-size: 0.92em;
	font-weight: 600;
	border: none;
}

.TextHighlight {
	color: #d82125;
}

.DescriptionBox {
	font-size: 0.9em;
	font-weight: 400;
	width: 90%;
	border: none;
    border-top:  dotted 1px #515048;
	border-left:  dotted 1px #515048;
	border-right:  dotted 1px #515048;
	border-bottom: solid 1px #515048;
	overflow: hidden;
	-webkit-transition: height 0.2s;
	-moz-transition: height 0.2s;
	transition: height 0.0s;
	outline: none;
}

/* ====================================================================
 *   Pager
 * ====================================================================
 */

.Pager {
    position: fixed;
	font-size: 1em;
	display: block;
	right: 0.1em; 
	left: 0.1em;
	bottom: 0.2em;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	z-index: -1;
}

.Pager .Item {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	background-color: #d6d6d6;
	border-radius: 2em;
	color: #fff;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	padding-left: 0.7em;
	padding-right: 0.7em;
	margin-left: 0.2em;
	margin-right: 0.2em;
}

.Pager .Selected {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	background-color: #d82125;
	border-radius: 2em;
	color: #fff;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	padding-left: 0.7em;
	padding-right: 0.7em;
	margin-left: 0.2em;
	margin-right: 0.2em;
}

/* ====================================================================
 *   Error and Info message
 * ====================================================================
 */

/* Styles that apply to both the error and info messages */
.ErrorMessage, .InformationalMessage 
{
	border: 2px solid #515048;
	color: #515048;
	margin: 1px 1px;
	padding: 4px;
	right: 5px;
	z-index: 200;
	position: absolute;
	background-color: #fff;
}

.MessageContainer {
	border: solid 1px #515048;
	padding: 5px;
    overflow: hidden;
}

.InfoImage {
    width: 3.2em;
    height: 3em;
    float: left;
    background: url(img/icon-05.png) no-repeat;
    background-size: 3em 3em;
	background-color: #d82125;
}

/* ====================================================================
 *   Buttons
 * ====================================================================
 */

.ButtonPreviousStyle {
	-webkit-appearance: none;
	position: fixed;
	display: inline-block;
	left: 0.3em;
	bottom: 0.1em;
	border:none;
	height: 2.2em;
	width: 11em;	
	font-weight: 600;
	color: #ffffff;
	background-color: #515048;
	cursor: pointer;
	float: left;
    z-index: 999;
}

.ButtonNextStyle {
	-webkit-appearance: none;
	position: fixed;
	display: inline-block;
	right: 0.3em;
	bottom: 0.1em;
	border:none;
	height: 2.2em;
	width: 11em;	
	font-weight: 600;
	color: #ffffff;
	background-color: #515048;
	cursor: pointer;
}

.ButtonConfirmStyle {
	-webkit-appearance: none;
	position: fixed;
	display: inline-block;
	right: 0.3em;
	bottom: 0.1em;
	height: 2.2em;
	width: 11em;	
	border: none;
	font-weight: bold;
	color: #ffffff;
	background-color: #515048;
	cursor: pointer;
	background-image: url(img/icon-06.png);
	background-repeat: no-repeat;
	background-size: 20px 20px;
    background-position-y: 40%;
    background-position-x: 13%;
}

.ButtonPreviousStyle:hover {
	color: #f29107;
}

.ButtonNextStyle:hover {
	color: #f29107;
}

.ButtonConfirmStyle:hover {
	color: #f29107;
}

/* ====================================================================
 *   Appointment selection page
 * ====================================================================
 */

.AppointmentSelection {
	text-align: center;
}

.AppointmentSelection td {
	border: none;
	padding-bottom: 0.5em;
}

.AppointmentScrollBox {
	position: fixed;
	top: 2.4em; 
	bottom: 2.1em;
    left: 5px;
    right: 5px;
    overflow: hidden;
}

.AppointmentLink {
	font-size: 1.1em;
	text-decoration: none;
	color: #515048;
}

.AppointmentLink:active {
	color: #d82125;
}

.AppointmentLink:hover {
	color: #d82125;
}

/* ====================================================================
 *   Employee selection page
 * ====================================================================
 */

.EmployeeScrollBox {
	position: fixed;
	top: 2.4em;
	bottom: 2.1em;
    left: 5px;
    right: 5px;
    text-align: center;
    overflow-x: hidden;
}

.EmployeeSelection {
	border: none;
}

.EmployeeSelection tr {
	border: none;
}

.EmployeeSelection .Hoover {
	background-color: #f29107;
	cursor: pointer;
}

.EmployeeSelection td {
	text-align: left;
	padding-top: 6px;
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 1px solid #e6e6e6;
}

.EmployeeImage {
	width: 60px;
	border: solid 2px #d6d6d6;
}

.EmployeeText {
	color: #929292;
	font-size: 1.0em;
	font-weight: 400;
	border: none;
}

/* ====================================================================
 *   Day selection page
 * ====================================================================
 */

.DaySelection {
	border: solid 8px #515048;
	background-color: #d82125;
	border-spacing: 4px;
	font-size: 0.9em;
	font-weight: 600;
	width: 100%;
}

.DaySelectionTitle {
	vertical-align: top;
	font-size: 1.1em;
	font-weight: 600;
	color: #515048;
	margin-bottom: 0.2em;
}

.NextDay {
	margin-right: 1em;
	float: right;
	width: 1.3em;
	height: 1.9em;
	background-image: url(img/icons_right_scroll_s1.png);
	background-size: 1.3em 1.9em;
	cursor: pointer;
}

.NextDayDisabled {
	margin-right: 1em;
	float: right;
	width: 1.3em;
	height: 1.9em;
	background-image: url(img/icons_right_scroll_s1.png);
	background-size: 1.3em 1.9em;
	cursor: not-allowed;
}

.PrevDay {
	margin-left: 1em;
	float: left;
	width: 1.3em;
	height: 1.9em;
	background-image: url(img/icons_left_scroll_s1.png);
	background-size: 1.3em 1.9em;
	cursor: pointer;
}

.PrevDayDisabled {
	margin-left: 1em;
	float: left;
	width: 1.3em;
	height: 1.9em;
	background-image: url(img/icons_left_scroll_s1.png);
	background-size: 1.3em 1.9em;
	cursor: not-allowed;
}

.DaySelectionHeader {
	border: none;
	background-color: #d82125;
	color: #fff;
	text-align: center;
}

.BlockedDay {
	font-size: 1.2em;
	text-decoration: line-through;
	background-color: #e6e6e6;
	border: solid 1px #e6e6e6;
	color: #515048;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 30px;
	padding-top: 30px;
}

.AvailableDay {
	font-size: 1.2em;
	text-decoration: none;
	background-color: #fff;
	color: #d82125;
	border: solid 1px #fff;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 30px;
	padding-top: 30px;
}

.AvailableDay:Hover {
	background-color: #515048;
	color: #fff;
	cursor: pointer;
}

/* ====================================================================
 *   Time selection page
 * ====================================================================
 */

.TimeSelection {
	border: solid 8px #515048;
	background-color: #d82125;
	border-spacing: 8px;
	width:100%;
	margin-top: 2px;
}

.BlockedTime {
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: line-through;
	text-align: center;
	border: none;
	background-color: #e6e6e6;
	border: solid 1px #e6e6e6;
	color: #515048;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.AvailableTime {
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	border: solid 1px #fff;
	background-color: #fff;
	color: #d82125;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.AvailableTime:hover {
	background-color: #d82125;
	color: #fff;
	cursor: pointer;
}

/* ====================================================================
 *   Customer info page
 * ====================================================================
 */

.UserScrollBox {
	padding-left: 4px;
	padding-right: 8px;
	position: fixed;
	top: 2.4em;
	bottom: 2.1em;
    left: 5px;
    right: 5px;
    overflow: hidden;
}

.UserLabel {
	width: 25%;
	float: left;
	padding-right: 10px;
  	color: #222222;
	font-size: 0.92em;
	font-weight: 400;
	border: none;
	display: block;
}

.UserText {
	color: #515048;
	font-size: 0.92em;
	font-weight: 600;
	border: none;
}

input[type=tel]::-webkit-inner-spin-button, 
input[type=tel]::-webkit-outer-spin-button
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none; 
	-moz-appearance: none; 
	margin: 0; 
}

.TextInput {
	width: 60%;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	color: #4d4d4d;
	font-size: 1.0em;
	font-weight: 200;
    margin-bottom: 0.3em;
}

.TextInput:hover {
	cursor: pointer;
}

.TextInputRequired {
    width: 60%;
	border: solid 1px #515048;
	color: #4d4d4d;
	font-size: 1.0em;
	font-weight: 200;
    margin-bottom: 0.3em;
}

.TextInputRequired:hover {
	cursor: pointer;
}

.TextInput:focus {
    outline: 0;
    border-color: #f29107;
    /*box-shadow: 1px 1px 1px #f29107 inset, 0px 0px 4px #d29107;*/
}

.ChoiceInput {
    -webkit-appearance: none; 
    width: 50%;
    color: #929292;
    border:1px solid #ccc;
    font-size: 1.0em;
    font-weight: 400;
	font-style: italic;
}
f
.ChoiceInput:hover {
	cursor: pointer;
}

.ChoiceInputGroup {
    -webkit-appearance: none; 
    width: 19.7%;
    color: #929292;
    border:1px solid #ccc;
    font-size: 1.0em;
    font-weight: 400;
    margin-bottom: 0.3em; 
	font-style: italic;
}

.ChoiceInputGroup:hover {
	cursor: pointer;
}

.ChoiceInputRequired {
     -webkit-appearance: none; 
	width: 19.7%;
    color: #4d4d4d;
	border:1px solid #515048;	
	font-size: 1.0em;
	font-weight: 200;
    margin-bottom: 0.3em;
}

.ChoiceInputRequired:hover {
	cursor: pointer;
}

.RadioInput {
	cursor: pointer;
	color: #000;
}

/* ====================================================================
 *   Responsive styling
 * ====================================================================
 */

@media screen and (max-width: 512px) {
	.Pager {
		display: none;
	}

    .AppointmentScrollBox {
	    bottom: 0.1em;
    }
}

@media screen and (max-width: 400px) {
	html, body {
		font-size: 100%;
	}

    .UserScrollBox {
	    bottom: 4.4em;
    }

	.ButtonPreviousStyle {
        right: 0.3em;
		width: calc(100% - 0.6em);
	}

	.ButtonNextStyle {
        left: 0.3em;
        width: calc(100% - 0.6em);
		bottom: 2.6em;
	}

	.ButtonConfirmStyle {
        left: 0.3em;
        width: calc(100% - 0.6em);
		bottom: 2.6em;
		background-color: #515048;
		background-image: none;
		background-repeat: no-repeat;
		background-size: 1.6em 1.6em;
		background-position-y: 4px;
		background-position-x: 30%;
	}

	.BlockedDay {
		padding-left: 2px;
		padding-right: 2px;
		padding-bottom: 4px;
		padding-top: 4px;
	}

	.AvailableDay {
		padding-left: 2px;
		padding-right: 2px;
		padding-bottom: 4px;
		padding-top: 4px;
	}

	.TimeSelection {
	    border: solid 4px #f29107;
	    border-spacing: 4px;
    }

	.BlockedTime {
		font-size: 1.0em;
		font-weight: 600;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.AvailableTime {
		font-size: 1.0em;
		font-weight: 600;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	#EmployeeContainer img {
		width: 100px;
	}
}

@media screen and (max-width: 240px) {
    .DaySelection {
        border: solid 1px #515048;
        border-spacing: 1px;
    }

    .TimeSelection {
	    border: solid 1px #f29107;
	    border-spacing: 1px;
    }
}

@media screen and (min-width: 401px) and (max-width: 768px) {
	html, body {
		font-size: 110%;
	}

	.Text {
		font-size: 1.0em;
		font-weight: 600;
	}

	.BlockedDay {
		font-size: 1.2em;
		padding-bottom: 8px;
		padding-top: 8px;
	}

	.AvailableDay {
		font-size: 1.2em;
		padding-bottom: 8px;
		padding-top: 8px;
	}

	.BlockedTime {
		font-size: 0.9em;
		font-weight: 600;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.AvailableTime {
		font-size: 0.9em;
		font-weight: 600;
		padding-top: 6px;
		padding-bottom: 6px;
	}
}

@media screen and (max-height: 640px) and (orientation: landscape) {
    .BlockedDay {
	    font-size: 1.2em;
	    padding-bottom: 16px;
	    padding-top: 16px;
    }

    .AvailableDay {
	    font-size: 1.2em;
	    padding-bottom: 16px;
	    padding-top: 16px;
    }

    .BlockedTime {
		font-weight: 600;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.AvailableTime {
		font-weight: 600;
		padding-top: 4px;
		padding-bottom: 4px;
	}
}

@media screen and (max-height: 500px) and (orientation: landscape) {
    .BlockedDay {
	    font-size: 1.2em;
	    padding-bottom: 8px;
	    padding-top: 8px;
    }

    .AvailableDay {
	    font-size: 1.2em;
	    padding-bottom: 8px;
	    padding-top: 8px;
    }

    .BlockedTime {
		font-weight: 400;
		padding-top: 2px;
		padding-bottom: 2px;
	}

    .AvailableTime {
        font-weight: 400;
        padding-top: 2px;
        padding-bottom: 2px;
    }
}

@media screen and (max-height: 400px) and (orientation: landscape) {
    html, body {
		font-size: 105%;
	}

    .BlockedDay {
	    font-size: 1.0em;
	    padding-bottom: 2px;
	    padding-top: 2px;
    }

    .AvailableDay {
	    font-size: 1.0em;
	    padding-bottom: 2px;
	    padding-top: 2px;
    }

    .BlockedTime {
		font-weight: 400;
		padding-top: 1px;
		padding-bottom: 1px;
	}

    .AvailableTime {
        font-weight: 400;
        padding-top: 1px;
        padding-bottom: 1px;
    }
}

@media screen and (max-height: 320px) and (orientation: landscape) {
   html, body {
		font-size: 100%;
	}

    .BlockedDay {
	    font-size: 1.0em;
	    padding-bottom: 1px;
	    padding-top: 1px;
    }

    .AvailableDay {
	    font-size: 1.0em;
	    padding-bottom: 1px;
	    padding-top: 1px;
    }

   .BlockedTime {
		font-weight: 400;
		padding-top: 1px;
		padding-bottom: 1px;
	}

    .AvailableTime {
        font-weight: 400;
        padding-top: 1px;
        padding-bottom: 1px;
    }
}

@media screen and (min-height: 480px) and (max-height: 600px) {
	.EmployeeImage {
		width: 80px;
	}
}

@media screen and (min-height: 601px) and (max-height: 800px) {
	.EmployeeImage {
		width: 100px;
	}
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
	html, body {
		font-size: 115%;
	}
}

@media screen and (min-height: 801px) {
	.EmployeeImage {
		width: 120px;
	}
}

@media (max-width: 618px) {
	.AppointmentSelection {
		text-align: left;
	}

	.AppointmentSelection td {
		padding-left: 2em;
	}

	.TextInput {
		width: 100%;
	}

	.TextInputRequired {
		width: 100%;
	}

    .ChoiceInput {
        width: 100%;
	}

    .ChoiceInputGroup {
        width: 100%;
	}

    .ChoiceInputRequired {
        width: 100%;
    }

	.UserLabel {
		width: 100%;
		float: left;
		padding-right: 10px;
	}
}

@media (min-width: 1200px) {
	.UserLabel {
		text-align: right;
	}
}