@import url(//fonts.googleapis.com/css?family=Poppins:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic);.AppointmentScrollBox,.DescriptionBox,.Pager,.UserScrollBox,body,html {
overflow: hidden
}

body,html {
font-family: 'Poppins',sans-serif;
font-style: 400;
font-size: 120%;
background: #f4eee0;
cursor: default
}

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

.Text,.TitleText {
font-size: .92em;
font-weight: 600
}

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

.TitleText {
display: block;
color: #4b8ba6;
padding-top: .1em
}

.Text {
color: #b8b8b8;
border: none
}

.TextHighlight {
color: #CA0955
}

.DescriptionBox {
font-size: .9em;
font-weight: 400;
width: 90%;
border: none;
border-top: dotted 1px #CA0955;
border-left: dotted 1px #CA0955;
border-right: dotted 1px #CA0955;
border-bottom: solid 1px #CA0955;
-webkit-transition: height .2s;
-moz-transition: height .2s;
transition: height 0ms;
outline: 0
}

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

.Pager .Item,.Pager .Selected {
display: inline-block;
font-size: .8em;
border-radius: 2em;
color: #fff;
margin-left: .2em;
margin-right: .2em;
padding: .2em .7em;
font-weight: 600
}

.Pager .Item {
background-color: #d6d6d6
}

.Pager .Selected {
background-color: #000
}

.ErrorMessage,.InformationalMessage {
border: 2px solid #CA0955;
color: #CA0955;
margin: 1px;
padding: 4px;
right: 5px;
z-index: 200;
position: absolute;
background-color: #fff
}

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

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

.ButtonConfirmStyle,.ButtonNextStyle,.ButtonPreviousStyle {
position: fixed;
display: inline-block;
bottom: .1em;
height: 2.2em;
width: 11em;
color: #fff;
background-color: #000;
border: none;
cursor: pointer;
-webkit-appearance: none
}

.ButtonPreviousStyle {
left: 1em;
font-weight: 600;
float: left;
z-index: 999
}

.ButtonNextStyle {
right: .3em;
font-weight: 600
}

.ButtonConfirmStyle {
right: .3em;
font-weight: 700;
background-image: url(/img/icon-06.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-y: 40%;
background-position-x: 13%
}

.AppointmentScrollBox,.EmployeeScrollBox,.UserScrollBox {
position: fixed;
top: 2.4em;
bottom: 2.1em;
left: 5px;
right: 5px
}

.ButtonConfirmStyle:hover,.ButtonNextStyle:hover,.ButtonPreviousStyle:hover {
color: #4b8ba6
}

.AppointmentSelection {
text-align: center
}

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

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

.AppointmentLink:active,.AppointmentLink:hover {
color: #4b8ba6
}

.EmployeeScrollBox {
text-align: center;
overflow-x: hidden
}

.EmployeeSelection,.EmployeeSelection tr {
border: none
}

.EmployeeSelection .Hoover {
background-color: #4b8ba6;
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: 2px solid #d6d6d6
}

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

.DaySelection {
border: 8px solid #f4eee0;
background-color: #f4eee0;
border-spacing: 4px;
font-size: .9em;
font-weight: 600;
width: 100%;
margin-top: .5em
}

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

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

.AvailableDay,.BlockedDay {
font-size: 1.2em;
padding: 30px 5px
}

.NextDay {
background-size: 1.3em 1.9em;
cursor: pointer
}

.NextDayDisabled {
background-size: 1.3em 1.9em;
cursor: not-allowed
}

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

.PrevDay {
cursor: pointer
}

.PrevDayDisabled {
cursor: not-allowed
}

.AvailableDay:Hover,.ChoiceInput:hover,.ChoiceInputGroup:hover,.ChoiceInputRequired:hover,.RadioInput,.TextInput:hover,.TextInputRequired:hover {
cursor: pointer
}

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

.BlockedDay {
text-decoration: line-through;
background-color: #e6e6e6;
border: 1px solid #e6e6e6;
color: #000;
text-align: center
}

.AvailableDay {
text-decoration: none;
background-color: #fff;
color: #4b8ba6;
border: 1px solid #fff
}

.AvailableTime,.BlockedTime {
font-size: .9em;
font-weight: 600;
text-align: center;
padding: 20px 0
}

.AvailableDay:Hover {
background-color: #000;
color: #fff
}

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

.BlockedTime {
text-decoration: line-through;
background-color: #e6e6e6;
border: 1px solid #e6e6e6;
color: #000
}

.AvailableTime {
text-decoration: none;
border: 1px solid #fff;
background-color: #fff;
color: #000
}

.UserLabel,.UserText {
font-size: .92em;
border: none
}

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

.UserScrollBox {
padding-left: 4px;
padding-right: 8px;
margin-left: 1em;
margin-right: 1em;
}

.UserLabel {
width: 25%;
float: left;
padding-right: 10px;
color: #222;
font-weight: 400;
display: block
}

.UserText {
color: #CA0955;
font-weight: 600
}

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

.TextInput,.TextInputRequired {
width: 60%;
color: #4d4d4d;
font-size: 1em;
font-weight: 200;
margin-bottom: .3em
}

input[type=number] {
-moz-appearance: textfield
}

.TextInput {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee
}

.TextInputRequired {
border: 1px solid #CA0955
}

.TextInput:focus {
outline: 0;
border-color: #4b8ba6
}

.ChoiceInput,.ChoiceInputGroup {
color: #929292;
border: 1px solid #ccc;
font-weight: 400;
font-style: italic
}

.ChoiceInput {
-webkit-appearance: none;
width: 50%;
font-size: 1em
}

.ChoiceInputGroup,.ChoiceInputRequired {
-webkit-appearance: none;
width: 19.7%;
font-size: 1em;
margin-bottom: .3em
}

.ChoiceInputRequired {
color: #4d4d4d;
border: 1px solid #CA0955;
font-weight: 200
}

.RadioInput {
color: #000
}

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

.AppointmentScrollBox {
bottom: .1em
}
}

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

.UserScrollBox {
bottom: 4.4em
}

.ButtonConfirmStyle,.ButtonNextStyle {
left: .3em;
width: calc(100% - .6em);
bottom: 2.6em
}

.ButtonPreviousStyle {
right: .3em;
width: calc(100% - 2em)
}

.ButtonConfirmStyle {
background-color: #CA0955;
background-image: none;
background-repeat: no-repeat;
background-size: 1.6em 1.6em;
background-position-y: 4px;
background-position-x: 30%
}

.AvailableDay,.BlockedDay {
padding: 4px 2px
}

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

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

#EmployeeContainer img {
width: 100px
}
}

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

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

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

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

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

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

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

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

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

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

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

.AvailableDay,.BlockedDay {
font-size: 1em;
padding-bottom: 2px;
padding-top: 2px
}

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

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

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

.AvailableTime,.BlockedTime {
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) {
body,html {
font-size:115%
}
}

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

@media (max-width: 618px) {
.ChoiceInput,.ChoiceInputGroup,.ChoiceInputRequired,.TextInput,.TextInputRequired,.UserLabel {
width:100%
}

.AppointmentSelection {
text-align: left
}

.AppointmentSelection td {
padding-left: 2em
}

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

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