/*************** This file override the css file which generated by jquery mobile theme-rolling. ************************/
#Content{
    color:#115599;
    height: 100%;
    padding: 0;
    margin: 0;
    max-width: none
}

#Content h2, h3, h4
{
    color:#115599 !important;
}

#Content h1
{
    font-size: 1.2em;
}
#Content h2
{
    font-size: 1.1em;
}
#Content h3
{
    font-size: 1.05em;
}
#Content h4
{
    font-size: 1.05em;
}

.leftPaddingOnly
{
    padding-left: 2em;
}

.leftRightPadding
{
    padding-left: 2em;
    padding-right: 2em;
}

.section
{
    /*margin-top: 2em;*/
    /*margin-bottom: 3em;*/
}

body.ui-mobile-viewport, div.ui-mobile-viewport {
  background:#b8cce2;
}

.ui-page {
    margin-left:auto;
    margin-right:auto;
    left: 0px;
    right: 0px;
    max-width:64em;
    -webkit-box-shadow: 0px 0px 28px 9px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 28px 9px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 28px 9px rgba(0,0,0,0.75);
}

.ui-header .ui-title, .ui-footer .ui-title
{
    white-space:normal
}

.ui-field-contain 
{
    border:none;
    margin: 1em 0.5em;
}

.ui-controlgroup, fieldset.ui-controlgroup
{    
    margin: 1em 0.5em;
}

@media screen and (max-width:632px)
{
    .ui-field-contain 
    {
        margin: 1em 0em;
        padding: 0.1em;
    }
    .ui-controlgroup, fieldset.ui-controlgroup
    {    
        margin: 1em 0em;
    }
}


/* Round corner for wrapper div */
.ui-corner-all {    
    border-radius: 0.4em;
}

/* Inset shadow for the wrapper div */
.ui-shadow-inset {
   box-shadow: inset 0px 0px 0.5em #9e9e9e;
}

/* Shadow for the wrapper div */
.ui-shadow {
    box-shadow: 0em 0.5em 0.8em -0.5em #5e5e5e,
}

.DialogPopupSize
{
    max-width:30em;
}

/********************************************************** Start Textbox region **********************************************************/
/* This is for textbox wrapper*/
.ui-input-text {
    background:#fff;
    border: none;
    max-width: 21em;
    min-width: 10em;
    min-height: 3em;
    box-shadow:none;
    margin: 0em;
}

/* This is for the textbox itself*/
.ui-input-text input {
    background:#fff;
    color: #444444; /* TEXT COLOR HERE*/
    border: none !important;        
    height: 3em;
    box-shadow: inset 0em 0.1em 0.35em #9e9e9e;
}

/* This is for the textbox itself when having focus*/
.ui-input-text input:focus {
    background:#fff;
    border: none !important;    
    box-shadow: inset 0em 0.1em 0.35em #9e9e9e;
}

/* This is for textbox's placeholder color*/
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #9e9e9e;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #9e9e9e;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #9e9e9e;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #9e9e9e;
}
/********************************************************** End Textbox region **********************************************************/


/********************************************************** Start Button region **********************************************************/
/* This is for button wrapper*/
.ui-page-theme-a .ui-btn, .ui-btn {
    font-size: 1.1em;    
    font-weight:normal;
    border: 0.075em solid #E0004D;
    background-color: #E0004D;
    
/*min-width: 10em;*/
    max-width: 21em;
    margin: 0.5em ;
    line-height: 1em;
    padding: 1.1em 1em;
}

#btnDontSeeWhatYouWant > div:first-child {
    margin-left: 0 !important;
}
/********************************************************** End Button region **********************************************************/


/********************************************************** Radio buttons **********************************************************/
.ui-radio .ui-page-theme-a .ui-btn, 
.ui-radio .ui-btn
{
    padding: 0.7em 1em ;
    margin: 0em;
    border: 0.1em solid #808080;
}

.ui-radio .ui-page-theme-a .ui-btn:hover, 
.ui-radio .ui-btn:hover
{
    border-color: #808080;
}

.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn.ui-last-child
{
    border-bottom-width:0.1em; /* this border width need to match the border width above*/
}


.ui-btn.ui-radio-off:after,
.ui-btn.ui-radio-on:after {
	display: none;
	width: 0px;
	height: 0px;
	margin: 0px;
}


.ui-btn.ui-radio-on, .ui-btn.ui-radio-on:hover
{
    background-color: #fff;
    color: #E0004D;
    background-image: url(~/../../../../Images/Interface/IconCheckbox.png);
    background-repeat: no-repeat;
    background-position:right;
    background-size:7%;
    background-origin:content-box
}

.ui-btn.ui-radio-off
{
    background-color: #fff;
    color: #808080
}
.ui-btn.ui-radio-off:hover
{
    background-color: #fff;
    color: #808080
}

/********************************************************** End Radio buttons **********************************************************/


/********************************************************** Select Dropdown buttons  **********************************************************/

.ui-select .ui-btn > span:not(.ui-li-count)
{
    white-space: normal;
    float: left;
}

.ui-select .ui-btn 
{
    margin: 0.5em 0em;
    padding: 1.1em 2em 1.1em 1em;    
    border-radius: 0em;
    max-width: 20em;
}

.ui-select a::after
{
    border-radius: 0em;
    background-color: #ffffff;
    background-image: url("~/../../../../Images/Interface/IconDropdown.png");
    background-size: cover;
}

.ui-select option
{
}

.ui-selectmenu.ui-popup
{
    min-width: 18em;
    max-width: 20em;
}


/********************************************************** End Select Dropdown buttons **********************************************************/


/********************************************************** Company Logo Header style **********************************************************/

.callMenuCenterSection
{
    padding-left: 2em;
}
.callMenuCenterSection a
{
    text-decoration: none;
}
.callMenuCenterTextArrowDown
{
    height: 0.7em;
    width: auto;  
	cursor: pointer;
}

.callMenuCenterLogo
{
	cursor: pointer;
    max-height: 5em;
}

.callMenuCenterTextMenuNav
{
    height: 3em;
}

@media (min-width: 35.00000001em)
{
    .callMenuCenterText
    {
    }

    .callMenuCenterLogo
    {
        display:none;
    }
}

@media (max-width: 35em)
{    
    .callMenuCenterText
    {
        display:none;
    }

    .callMenuCenterLogo
    {
    }
}

.CompanyLogoSection
{
    /*background-color: #fbfaf6;*/
    width:100%;
    height:6em;    
    padding: 0.5em 0em;
    overflow: hidden;
}
.CompanyLogoTable
{
    width:100%;
}
.CompanyLogoTable td
{
    vertical-align: middle;
}

.LogoWrapper
{
    float: right;
}
img.logo {
    padding: 0em 2.5em;
    max-height: 6em;
}

/********************************************************** End Company Logo Header style **********************************************************/


/********************************************************** Header style **********************************************************/
.pageHeaderSection
{
    width: 100%;
    margin:0em;
    padding:0em;
    vertical-align:bottom;
}
/* we use the trick here to apply the transparent login band */
/* the login wrapper band actually sits below the image */
/* but that wrapper height is 0, so you dont see it, */
/* but the actual login band is set its top to -4.1 to make it appears overlap with the image */
.pageHeaderTextOuterWrapper
{
    width:100%;
    height: 0em;
}
.pageHeaderTextInnerWrapper
{
    /*border-bottom: solid 0.1em #5e5e5e;*/
    /*border-top: solid 0.1em #5e5e5e;*/
    position: relative;
    height:4em;
    top:-4.1em;
    background-color: #ffffff;
    color: #115599;
    line-height: 4em;
    padding-left: 2em;
    padding-right: 2em;
}

.pageHeaderDivider {
    background-color:#115599;
    position: relative;
    height:0.2em;
    color: #115599;
}

@media (max-width: 35em)
{
    .pageHeaderTextInnerWrapper
    {
        padding-left: 1em;    
    }
}
.pageHeaderText
{
    font-size:1.5em;
    font-weight:bold;
    display: inline-block;
}

.login-status a, .login-status a:visited, .login-status a:hover , .login-status a:active
{
    font-weight:normal;

}
.logOutButton
{
    color: white;
    display: inline-block;
    float: right;
    margin-right: 1em;
    width: 3em;

}
.logOutButton a,
.logOutButton a:hover,
.logOutButton a:visited
{
    color: #fff;
    font-size: 0.8em;
    font-weight: normal;
}
    
/********************************************************** End Header style **********************************************************/


/********************************************************** hide/show info section**********************************************************/

.subHeaderWrapperForCheckBox
{
    margin-bottom: 0.15em;
    padding-left: 2em;    
	cursor: pointer;
}
@media (max-width: 35em)
{
    .subHeaderWrapperForCheckBox
    {
        padding-left: 1em;    
    }
}
.subHeaderImageForCheckBox
{
    margin-left: -50%;
    vertical-align: middle;
}
.subHeaderImageWrapperForCheckBox
{
    width: 2em;
}
.subHeaderDescriptionWrapperForCheckBox
{
    font-size: 1.1em;
    margin: 0.5em 0em;
}
.subHeaderBandForCheckBox
{
    min-height: 4em;
    width: 100%;
    border: none;
    background-color: #f0e8cf;
    color: #115599;

}
.subHeaderBandForCheckBox tr, .subHeaderBandForCheckBox td
{
    vertical-align:middle;
}
.subHeaderContentForCheckBox
{
    color: #000000;
    background-color: #fff;
    box-shadow: inset 0em 1em 0.6em -0.9em #000000;
}
.subHeaderContentForCheckBox .ui-page-theme-a .ui-btn, .subHeaderContentForCheckBox .ui-btn
{
    margin-left: auto;
    margin-right: auto;
}

.subHeaderWrapper
{
    margin-bottom: 0.15em;
    padding-left: 2em;    
	cursor: pointer;
}
.subHeaderImage
{
    margin-left: -50%;
    vertical-align: middle;
}
.subHeaderImageWrapper
{
    width: 2em;
}
.subHeaderDescriptionWrapper
{
    font-size: 1.1em;
    margin: 0.5em 0em;
}
.subHeaderBand
{
    min-height: 4em;
    width: 100%;
    border: none;
    background-color: #f0e8cf;
    color: #115599;

}
.subHeaderBand tr, .subHeaderBand td
{
    vertical-align:middle;
}
.subHeaderContent
{
    color: #000000;
    background-color: #ffffff;
    box-shadow: inset 0em 1em 0.6em -0.9em #E0004D;
}
.subHeaderContent .ui-page-theme-a .ui-btn, .subHeaderContent .ui-btn
{
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width:632px)
{
    .subHeaderWrapper
    {
        padding-left: 0em;
    }
    .subHeaderImage
    {
        margin-left: 0.5em;
    }
    .subHeaderDescriptionWrapper
    {
        margin: 0.5em 0.5em;
    }
    .subHeaderContent .ui-page-theme-a .ui-btn, .subHeaderContent .ui-btn
    {
        margin-left: auto;
        margin-right: auto;
        width: 75%;
    }
}


/********************************************************** End hide/show info section**********************************************************/


/********************************************************** Custom Table **********************************************************/
.customTable
{
    border:0.1em #5e5e5e solid;
}
    .customTable thead
    {
        background: #f0e8cf;
    }
    .customTable tbody
    {
        background: #8ca7c5;
        color: #ffffff;
    }

    .customTable td
    {
        vertical-align: middle;
    }
    .customTable tr
    {
        border-bottom: 0.1em #5e5e5e solid;
    }


    
@media (max-width: 35em)
{
    .customTable tr:first-child
    {
        border-top: 0.1em #5e5e5e solid
    }
}

/********************************************************** End custom table **********************************************************/


/********************************************************** Styling jquery ui Calendar **********************************************************/
.calendar
{
}

.calendar .ui-datepicker{
    width:100%;
    font-size:1.1em;
}

@media (max-width: 35em)
{
    .calendar .ui-datepicker{        
        font-size:1em;
    }
}

.calendar .ui-widget-content /* calendar wrapper */
{
    background-image: none;
    border: none;
    /*background-color: #1C78C9;*/
    padding: 0em;
}

.calendar .ui-widget-header /* calendar header */
{
    background-color: #F5F8FC;
    background-image:none;
    border-radius:0.4em 0.4em 0em 0em;
    border: none;    
    font-weight: normal;
    padding: 0.5em;
}

.calendar .ui-datepicker .ui-datepicker-title
{
    color: #115599;
    font-weight: bold;
}
.calendar table.ui-datepicker-calendar thead
{
    color: #fff;
}

.calendar .ui-datepicker .ui-datepicker-prev span
{
    background-image: url(~/../../../../Images/Interface/ToLeftArrowIcon.png);
    background-position: center;
    background-size: contain;
    left:auto;
    top:20%;
    margin:0em;
    width:60%;
    height:60%;
    position:relative;
}

.calendar .ui-datepicker .ui-datepicker-next span
{
    background-image: url(~/../../../../Images/Interface/ToRightArrowIcon.png);
    background-position: center;
    background-size: contain;
    left:auto;
    top:20%;
    margin:0em;
    width:60%;
    height:60%;
    position:relative;
}

.calendar .ui-datepicker .ui-datepicker-prev,
.calendar .ui-datepicker .ui-datepicker-next
{
    top: auto;
}

.calendar .ui-datepicker .ui-datepicker-next
{
    right: 1em;   
}

.calendar .ui-datepicker .ui-datepicker-prev
{
    left: 1em;   
}

.calendar .ui-state-hover,
.calendar .ui-widget-content .ui-state-hover,
.calendar .ui-widget-header .ui-state-hover
{
    background: none;
    border: none;
}
        
.calendar table.ui-datepicker-calendar /* calendar body */
{
    table-layout:fixed;    
    /*text-transform: uppercase;*/
}

.calendar table.ui-datepicker-calendar thead tr:first-child
{
    background: #115599;
    /*border-bottom: 0.1em solid #589AD6;*/
}

.calendar table.ui-datepicker-calendar thead tr:first-child th:first-child
{
    border-radius: 0 0 0 13px;
}
.calendar table.ui-datepicker-calendar thead tr:first-child th:last-child
{
    border-radius: 0 0 13px 0;
}

.calendar table.ui-datepicker-calendar th,
.calendar table.ui-datepicker-calendar td
{
    width:14.2%;
    text-shadow: none;    
    font-weight: normal;
    color: #fff;
    padding: 2px;
}


/* day's default state, default means selectable */
.calendar .ui-state-default, 
.calendar .ui-widget-content .ui-state-default, 
.calendar .ui-widget-header .ui-state-default
{
    text-align:center;
    background:none;
    color: #ffffff;
    border: 1px solid #115599;
    box-shadow: none;    
    font-weight: normal;
    padding: 0.5em;
    border-radius: 11px;
    color: #115599;
}

.calendar a.ui-state-default
{
    background-color: #115599 !important;
    text-decoration: none;
    border:none;
    box-shadow: none; 
    color: #fff !important;    
}

.calendar-key {
    margin: auto;
}
@media all and (min-width: 520px) {
    .calendar-key {
        width: 75%;
    }
}
@media all and (min-width: 768px) {
    .calendar-key {
        width: 50%;
    }
}

.calendar-key-dot {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #115599;
  margin: 5px;
  vertical-align: text-top;
}
.available.calendar-key-dot {
    background-color: #115599;
}
.schedule-content {
    padding: 0;
}
.dialog-schedule-appointment-content-text-wrapper {
    border-bottom: 2px solid;
    padding: 10px 10px 5px;
}
#dialog-schedule-appointment-content-text {
    text-align: center;
}
.time-grid-unit {
    width: 100px;
    padding: 12px 5px !important;
    margin: 3px !important;
    font-size: 1em !important;
}
@media all and (max-width: 768px) {
	.smallscreen-break > .ui-block-a,
	.smallscreen-break > .ui-block-b,
	.smallscreen-break > .ui-block-c,
	.smallscreen-break > .ui-block-d,
	.smallscreen-break > .ui-block-e {
		width: 100%;
		float: none;
	}
}

#locationChangeBtn:after {
    content: "";
}


/********************************************************** End Styling jquery ui Calendar **********************************************************/