#smallLoadingGraphic {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -75px;
    z-index: 2000;
    -khtml-opacity: .75;
    -moz-opacity: .75;
    -ms-filter: "alpha(opacity=75)";
    filter: alpha(opacity=75);
    opacity: .75;
}

img.serviceMap {
    width: 100%;
    max-width: 500px;
    height: auto;
}

/* ---------- APPOINTMENT CALENDAR STYLES ---------- */

fieldset .appointmentCalendar .DES_CalControl,
.appointmentCalendar .DES_CalControl .DES_CalWeekRowsTable {
    border-width: 0;
    padding: 0;
    width: auto !important;
    max-width: 350px;
}

.appointmentCalendar {
    margin: 10px 0 20px;
}

.appointmentCalendar .DES_CalHeader {
    margin: 0;
    padding: 0;
}

.appointmentCalendar .DES_CalControl,
.appointmentCalendar .DES_CalControl .DES_CalDayHeader,
.appointmentCalendar .DES_CalControl .DES_CalDayHeader th {
    background-color: #fff;
}

.appointmentCalendar .DES_CalHeaderRows div {
    height: auto;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.appointmentCalendar .DES_CalHeaderRowsLeft2 span,
.appointmentCalendar .DES_CalHeaderRowsRight2 span {
    display: block;
    margin: 0 15px;
    padding: 10px;
    color: #005b9c;
    font-size: 1.25em;
    font-weight: 900;
}

    .appointmentCalendar .DES_CalHeaderRowsLeft2 span:hover,
    .appointmentCalendar .DES_CalHeaderRowsRight2 span:hover {
        cursor: pointer;
    }

.appointmentCalendar .DES_CalMonthYearContainer {
    font-family: "Roboto", Arial, Helvetica, Sans-Serif;
    font-weight: 500;
    font-size: 1.125em;
    padding: 10px 0;
}

.appointmentCalendar .DES_CalControl .DES_CalDayHeader th {
    font-family: "Roboto", Arial, Helvetica, Sans-Serif;
    font-weight: 500;
}

.appointmentCalendar .DES_CalWeekRowsTable {
}

/* Styles for each calendar's day cell */
.appointmentCalendar .DES_CalControl .DES_CalDay,
.appointmentCalendar .DES_CalControl .DES_CalOutsideRangeDay,
.appointmentCalendar .DES_CalControl .DES_CalOtherMonthDay,
.appointmentCalendar .DES_CalControl .SSS_SelectedPreferredDate,
.appointmentCalendar .DES_CalControl .SSS_SelectedBackupDate,
.appointmentCalendar .DES_CalControl .DES_SDSelectable1,
.appointmentCalendar .DES_CalControl .DES_SDSelectableOM1,
.appointmentCalendar .DES_CalControl .DES_SDUnselectableOM1,
.appointmentCalendar .DES_CalControl .DES_SDUnselectable1 {
    font-family: "Roboto", Arial, Helvetica, Sans-Serif;
    text-align: center;
    padding: 10px 5px 20px;
    border-width: 0 !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    transition: all 1s ease;
    position: relative;
    font-weight: normal; /* un-bold 'today' */
}

    .appointmentCalendar .DES_CalControl .DES_CalDay:hover {
        background-color: #f2f2f2;
    }

.appointmentCalendar .DES_CalControl .DES_CalOutsideRangeDay,
.appointmentCalendar .DES_CalControl .DES_CalOtherMonthDay,
.appointmentCalendar .DES_CalControl .DES_SDSelectableOM1,
.appointmentCalendar .DES_CalControl .DES_SDUnselectableOM1,
.appointmentCalendar .DES_CalControl .DES_SDUnselectable1 {
    color: #ccc;
    background-color: #fff;
}

.appointmentCalendar .DES_CalControl .SSS_SelectedPreferredDate {
    background-color: #999 !important;
    color: #fff;
}

.appointmentCalendar .DES_CalControl .SSS_SelectedBackupDate,
.appointmentCalendar .DES_CalControl .DES_CalSelected {
    background-color: #005b9c !important;
    color: #fff;
}

.appointmentCalendar .DES_CalControl .dateDescription {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    font-size: .75em;
}
.appointmentCalendar-container p {
    line-height: 1.3125em;
}

.appointmentCalendar-container .optionGroup {
    border-top: 1px solid #ccc;
    padding: 0;
    margin-bottom: 20px;
    max-height: 315px;
    overflow-y: scroll;
}

.appointmentCalendar-container .accessInstructionsCheckbox {
    overflow-y: auto;
    border-width: 0;
}

.appointmentCalendar-container .optionGroup input[type="radio"] {
    margin-top: 13px;
    left: 5px;
}

.appointmentCalendar-container .optionGroup label {
    border-bottom: 1px solid #ccc;
    display: block;
    padding: 10px 20px 10px 30px;
    transition: all 1s ease;
}

.appointmentCalendar-container .accessInstructionsCheckbox label {
    border-width: 0;
    padding-top: 0;
}

.appointmentCalendar-container .optionGroup label:hover {
    background-color: #f2f2f2;
    cursor: pointer;
}

.appointmentCalendar-container .accessInstructionsCheckbox label:hover {
    background-color: initial;
}

.appointmentCalendar-container .optionGroup br {
display: none;
}

.appointmentCalendar-container .optionGroup label br {
display: inline;
}

.appointmentCalendar-container .radioButtons input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.radioButtons label {
    display: inline-block;
    text-align: center;
    font-weight: 500;
    padding: 10px 20px;
    border: 1px solid #aaa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
    transition: all 1s ease;
}

    .radioButtons label:hover {
        background-color: #f2f2f2;
    }

#siteContent .radioButtons input[type="radio"]:checked + label {
    background-color: #005b9c;
    color: #fff !important; /* !important hack to override #siteContent .DESVALCheckBoxWithError's color !important */
}

.radioButtons input[type="radio"]:hover + label {
    cursor: pointer;
}

.serviceAreaKey {
    position: relative;
    margin-top: 8px;
}

.serviceAreaKey dt {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    position: absolute;
    height: 15px;
    width: 35px;
    margin: 4px 0 0 0;
    padding: 0;
}

.serviceAreaKey dt span {
    display: none;
}

.serviceAreaKey dt.gasServiceAreaColor {
    background-color: #cdcfce;
}

.serviceAreaKey dt.electricServiceAreaColor {
    background-color: #fe5f00;
}

.serviceAreaKey dd {
    margin: 0 0 4px 45px;
    padding: 0;
}

/* for 400px or greater */
@media screen and (min-width: 400px) {
    .appointmentCalendar .DES_CalControl .DES_CalWeekRowsTable th,
    .appointmentCalendar .DES_CalControl .DES_CalWeekRowsTable td {
        width: 45px !important;
    }

}


/* for 900px or greater */
@media screen and (min-width: 900px) {
    .appointmentCalendar-container {
        display: flex;
        align-items: center;
        /*align-items: flex-start;*/
    }
    .appointmentCalendar-container .appointmentCalendar-panel {
        flex: 1;
    }
    .appointmentCalendar-container .appointmentCalendar-panel.panelOne {
        padding: 0 10px 0 0;
    }
    .appointmentCalendar-container .appointmentCalendar-panel.panelTwo {
        /*padding: 20px 0 0 10px;*/
        padding: 0px 0 0 10px;
    }
}