﻿.noPadding {
    padding: 0 !important;
    margin: 0 !important;
}

.topBottomPadding {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.vertical-center-div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

/*Third tab specific styles */
.other-languages .step-description {
  width: 100% !important;
}

.Schedule-appointment .col-xs-6 {
    padding-left: 35px;
}

#scb-date-selector #ui-datepicker-div {
    position: absolute !important;
    top: 34px !important;
    left: 0px !important;
}
/*end Third tab specific styles */
/*bootstrap Modal specific styles  */

#ui-datepicker-div .ui-state-active {
    color: #333 !important;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}
#res-contactus-schedule-callback.modal {
    z-index: 1111111111;
}

#res-contactus-schedule-callback.modal.fade .modal-dialog {
    top: 5%;
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.8s ease-in-out 0s;
     width: 62%;
     margin: 0 auto;
}

#res-contactus-schedule-callback.modal.fade.in .modal-dialog {
	opacity: 1;
  
}

#res-contactus-schedule-callback .modal-header {
  background-color: #d9272d;
   border-radius: 6px 6px 0px 0px;
   stroke-width: 1px;
   color: #333;
   font-style: normal;
   font-family: "Nexa"; 
   line-height: 32px;
   width: 100%;
   stroke: #000000; /* not sure what this means alpha:0.27;*/
   display: flex;
   align-items: center;
   height: 100px;
}

#res-contactus-schedule-callback .modal-title-adj {
   font-size: 36px;
   color: #fff;
   font-style: normal;
   font-family: "Nexa"; 
   line-height: inherit;
   padding-left: 10px;
   text-align: center;
}
#res-contactus-schedule-callback .modal-body .control-group {
   padding-left: 20px;
   padding-right: 5px;
}

.close,close:hover,close:focus {
     color: #fff !important;
     opacity: 1 !important;
}

.alert .close,.alert close:hover,.alert close:focus {
     color: #333 !important;
}

#res-contactus-schedule-callback .modal-close-icon {
   font-size: 20px;
   color: #fff;
}

.modal .Category-Selection .phone_number_well {
    padding-left: 5px;
}

#res-contactus-schedule-callback .modal-body {
  font-size: 16px;
}
.Schedule-appointment .loading-panel .loading-image {
    margin-bottom: 10px;
}
#res-contactus-schedule-callback.modal .modal-content {
    padding: 0px;
    width: 100%;
    stroke-width: 1px;
    background-color: #fafafa;
    border-radius: 6px;
}
/*end bootstrap Modal specific styles  */

.frmScheduleCallback .tel {
   display: inline-block;
   float: left;
   margin-right: 20px;
   margin-bottom: 30px;
  }
  .frmScheduleCallback .input-separator {
    width: 30px;
    text-align: center;
    float: left;
    display: block;
    line-height: 32px;
  }
.frmScheduleCallback .tel input {
    width: 30px;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    height: 34px;
    padding: 6px 12px;
    float: left;
}
.frmScheduleCallback .tel span {
    width: 30px;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    height: 34px;
    padding: 6px 12px;
    float: left;
}

/*** Schedule a Call - Modal Specific ***/
.Category-Selection .phone-number .phone_number_dash_after input {
    min-width: 50px;
    height: 50px;
}
.form-group.phone-number .phone_number_last input {
    width: 124%;
    min-width: 60px;
    height: 50px;
}

#headingSix-schedulecallback .vertical-center-div {
    margin-left: 0px;
}

.Category-Selection .date-time-pickers .input-group .form-control,
.Category-Selection .date-time-pickers .input-group button {
    height: 44px;
}

/* Responsive - Media */

@media screen and (max-width: 380px) {
    .step-five-other {
        padding-left: 5px !important;
    }
}

@media screen and (max-width: 408px) {
    .Category-Selection .phone-number .phone_number_dash_after,
    .Category-Selection .phone-number .phone_number_last {
        width: 33% !important;
        margin-bottom: 10px;
    }
    .Category-Selection .phone-number .phone_number_dash_after,
    .Category-Selection .phone-number .phone_number_last input {
        width: 100%;
    }
    .Category-Selection .phone-number .phone_number_dash_after input {
        padding: 6px;
    }
    .form-group.phone-number .phone_number_last input {
        padding: 6px;
    }
}

@media only screen and (max-width: 560px) {

    .modal .modal-content .modal-body span.step {
        clear: right;
    }

    .modal .modal-content .modal-body span.step-description {
        clear: left;
    }
    
    #res-contactus-schedule-callback.modal {
        padding-left: 0px !important;
    }

    #res-contactus-schedule-callback .modal-title-adj {
        padding-left: 0px !important;
        font-size: 24px !important;
    }

    #headingOne-schedulecallback .panel-title span.step-description,
    .Category-Selection .panel-title.collapsed span.step-description,
    .Category-Selection .panel-title .step-selected span.step-description {
        margin-left: 7px;
        margin-top: 1.5px !important;
        line-height: 25px;
    }

    .Category-Selection .panel-title span.step,
    .Category-Selection .panel-title span.step-description {
        font-size: .75em !important;
        clear: both !important;
    }

    .Category-Selection .panel-title .step-selected span.step-description {
        margin-left: 20px !important;
    }

    .Category-Selection .panel-title span.step-description {
        margin-left: 28px;
        line-height: 100%;
    }

    .div-plus-minus {
        right: 8.5% !important;
    }

    .Category-Selection .panel-title .step-selected {
        margin-left: -8px;
    }

    .Category-Selection .panel-heading i.checkicon {
        margin-right: 9px !important;
        margin-left: -5px !important;
    }

    .Category-Selection #headingOne-schedulecallback.panel-heading i.checkicon,
    .Category-Selection #headingTwo-schedulecallback.panel-heading i.checkicon,
    .Category-Selection #headingThree-schedulecallback.panel-heading i.checkicon,
    .Category-Selection #headingFour-schedulecallback.panel-heading i.checkicon {
        margin-right: 5px !important;
    }
    
    .callback-success-failure-panel,
    .callback-success-failure-panel.row {
        width: 100% !important;
    }

}

@media screen and (max-height:728px) {
   #res-contactus-schedule-callback.modal.fade .modal-dialog {
       top: 0%;
    }
}

@media only screen and (max-width: 767px) {
   .Category-Selection .step {
     float: left !important;
    }
   .Category-Selection .step-description {
        float:left !important;
   }
    #res-contactus-schedule-callback .modal-title-adj {
        font-size: 30px;
        color: #fff;
        font-style: normal;
        font-family: "Nexa Bold"; 
        line-height: inherit;
        padding-left: 0%;
    }
    #res-contactus-schedule-callback.modal.fade .modal-dialog {
        width: 100%;
        margin: 0px;
        top: 0px;
        padding: 0px;
    }
    #res-contactus-schedule-callback .modal-header {
        height: auto;
        max-height: 100px;
    }
    #res-contactus-schedule-callback .modal-body .control-group     {
        padding-left: 25px;
        padding-right: 25px;
    }

    .modal .Category-Selection .step-description {
        line-height: 27px;
    }

   .modal #res-contactus-schedule-callback .modal-close-icon {
        font-size: 26px;
        color: #fff;
        padding-bottom: 7%;
        margin-right: -12px;
   }

   .modal .Schedule-appointment .call-me-back-box .wait-time-div {
        min-height: auto !important;
        padding-bottom: 14px;
   }

   .modal .Schedule-appointment .or span {
        left: 100%;
        margin-left: -62.35% !important;
   }

   .modal .horizontal-Row-wrap {
       margin-top: -40px;
   }

   #ui-datepicker-div {
       left: 73px !important;
   }
    .modal .Category-Selection .panel-body-schedulecallback .controls {
        padding-left: 5px;
    }
}

@media screen and (min-width: 768px) and (max-width:1024px) {
   #res-contactus-schedule-callback.modal.fade .modal-dialog {
       width: 85%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1230px) {
    .Schedule-appointment #schedule-appointment-panel .or {
        margin-left: 24px;
    }
}

.CallmeBack-Service-Unavailable .call-me-back-box {
    font-family: "nexa bold", Arial bold, sans-serif;
    text-align: center;
    line-height: 110%;
    color: #d9272d;
}

@media only screen and (max-width: 919px) {

   #headingFive-schedulecallback .panel-title span.step i {
        margin-right: 5px;
    }

    #headingSix-schedulecallback .panel-title span.step {
        padding-left: 2px !important;
    }

    .Category-Selection .panel-title span.step,
    .Category-Selection .panel-title span.step-description {
        font-size: .95em;
    }
}
