﻿#extPmtPageFrame,
#iFrameLoadingIndicator {
  border-width: 0px;
  height: 62rem;
  overflow-y: hidden;
  width: 100%; }
  
#extPmtPageFrame.mobileExtPmtPage,
#iFrameLoadingIndicator.mobileExtPmtPage {
	height: 500 px;
}
  
.logo {height: 9rem;}
.logo {background-position: ceneter top;}


/* ============ STEP 1 ============ */


/* Container */
div.setOfStepsContainer div.stepContainer {
    margin: 0 10px;
    width: 680px;
}

/* Form Controls Group */
div.setOfStepsContainer .stepContainer div.openingsControls {
    margin: 10px 0 24px 0;
}

/* Form Control Label */
.filterButtonContainer .filterControlsParent .dateContainerParent .filterName,
.filterButtonContainer .filterControlsParent .filterControl .filterName {
    font-size: 14px;
    color: #374D76;
}

/* Date Field Container */
.filterButtonContainer .filterControlsParent .dateContainerParent {
    width: 15rem;
}

/* Form Control */
input.date, .formcontents input.date,
.filterButtonContainer .filterControlsParent .filterControl .filterValue {
    font-size: 16px;
    color: #62676A;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #BCD1FA;
    padding: 13px 24px;
    line-height: 20px;
    max-height: none;
    box-shadow: none;
}

/* Calendar Icon */
.datePickerContainer input.date.withCalendar ~ .calendar {
    margin: 10px 0 0 5px;
}

/* Card */
.plain .card {
    box-shadow: none;
    border-bottom: 1px solid #D7D9DA;
    margin: 0;
    padding: 24px 0;
}

/* Card Inner */
.card .cardline.partial {
    color: #374D76;
}

/* Card Headline */
.stepContainer .openingsData .card > .header {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    padding: 0;
    width: 100%;
}

/* Buttons */
.stepContainer .openingsData .plain .slotslist .slotdetailaction {
    background: #374D76;
    font-size: 19px;
    padding: 8px 16px;
    width: 109px;
    height: auto;
    line-height: 16px;
    border-radius: 4px;
    margin: 0 24px 10px 0;
}

.stepContainer .openingsData .plain .slotslist .slotdetailaction:last-child {
    margin-right: 0;
}

/* Button focus & hover */
.stepContainer .openingsData .plain .slotslist .slotdetailaction:hover,
.stepContainer .openingsData .plain .slotslist .slotdetailaction:focus {
    background: #F85534;
}

/* More / less */
.stepContainer .openingsData .plain div.expandSlots {
    margin: 14px 0 0;
    padding: 0;
    color: #62676A;
    font-size: 16px;
}

/* ============ STEP 2 ============ */

/* Remove box shadow */
.slotDetailsContainer .card {
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Alert */
.slotDetailsContainer .standardBanner.informationalType {
    font-size: 16px;
    color: #62676A;
    background: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 15C9.45 15 9 14.55 9 14V10C9 9.45 9.45 9 10 9C10.55 9 11 9.45 11 10V14C11 14.55 10.55 15 10 15ZM11 7H9V5H11V7Z' fill='%23D83F2B'/%3E%3C/svg%3E%0A") no-repeat left 20px center, #FFEEEB;
    border: 0;
    border-radius: 10px;
    padding: 24px 24px 24px 50px;
}
div.setOfStepsContainer .slotDetailsContainer div.standardBanner.informationalType {
    margin-bottom: 50px;
}

/* Doctor Name */
.slotDetailsContainer .header {
    color: #374D76;
    font-size: 20px;
    font-weight: 700;
}
.slotDetailsContainer .providerName {
    line-height: 2em;
}

/* Details and photo width */
.slotDetailsContainer .departmentPhoto {
    width: 45%;
    margin-top: 15px;
}
.slotDetailsContainer .hasDepartmentPhoto {
    width: 55%;
}

/* Details bottom spacing */
.slotDetailsContainer .dateTime {
    padding-bottom: 24px;
}

/* Details Title */
.hasDepartmentPhoto .dateTime .date,
.hasDepartmentPhoto .dateTime .time,
.hasDepartmentPhoto .address .departmentName {
    color: #374D76;
    font-size: 20px;
    font-weight: 700;
}

.hasDepartmentPhoto .dateTime .time,
.hasDepartmentPhoto .address .departmentName {
    margin-bottom: 10px;
}

.statusClosed, .subtle {
    font-size: 16px;
    line-height: 1.3;
    color: #62676A;
}

/* Icon Spacing */
.slotDetailsContainer .dateTime, .slotDetailsContainer .address, .slotDetailsContainer .instructions {
    padding-left: 60px;
}

.slotDetailsContainer .dateTime:before, .slotDetailsContainer .address:before, .slotDetailsContainer .instructions:before {
    margin-left: -60px;
}

/* Comments - reason for visit */
.slotDetailsContainer .comments {
    margin-top: 30px;
    width: 100%;
}

.comments textarea {
    font-size: 16px;
    color: #62676A;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #BCD1FA;
    padding: 13px 24px;
    line-height: 20px;
    max-height: none;
    box-shadow: none;
}

/* Prev, Next Buttons Alignment */
div.setOfStepsContainer .slotDetailsContainer .apptDetailsControlsContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

/* Both buttons style */
div.setOfStepsContainer .slotDetailsContainer .apptDetailsControlsContainer .button {
    background: #F85534;
    line-height: 24px;
    font-size: 19px;
    font-weight: 700;
    padding: 12px 30px;
    text-transform: none;
}

/* Prev Button Style */
div.setOfStepsContainer .slotDetailsContainer .apptDetailsControlsContainer .button.prevMainStep {
    background: #fff;
    padding: 12px 30px;
    color: #304569;
}




/* ============ STEP 3 ============ */

/* Container Spacing */
div.setOfStepsContainer .signupContainer .signupStepsContainer div.signupStep {
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 680px;
}


.signupStepsContainer .cardlist {
    margin: 0;
}


/* titles */
div.setOfStepsContainer .signupContainer .signupStep.landing h2 {
    color: #374D76;
    font-size: 20px;
    font-weight: 700;
}

/* Text */
div.setOfStepsContainer .signupContainer .signupStep.landing .content .pretext {
    font-size: 16px;
    color: #62676A;
    line-height: 1.2;
}

/* Login Button */
.div.setOfStepsContainer .signupContainer .signupStep.landing .loginContainer .button {
    background: #F85534;
    line-height: 24px;
    font-size: 19px;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 0;
    width: auto;
    text-transform: none;
}

/* Prev & Next Button */
div.setOfStepsContainer .signupContainer .signupStep.landing .continueAsGuestContainer .button {
    background: #F85534;
    line-height: 24px;
    font-size: 19px;
    font-weight: 700;
    padding: 12px 30px;
    text-transform: none;
}

div.setOfStepsContainer .signupContainer .signupStep.landing .continueAsGuestContainer .button.prevMainStep {
    background: #fff;
    padding: 12px 30px;
    color: #304569;
}


/* ============ STEP 4 ============ */



/* Inputs */
.signupContainer .signupStepsContainer .signupStep .ghostInput input, .signupContainer .signupStepsContainer .signupStep .ghostInput select {
    height: 48px;
    padding: 12px 20px;
}
.ghostInput label + input, .ghostInput label + select {
    margin-bottom: 20px;
}
.ghostInput.compact label + input {
    margin-bottom: 0;
}
.ghostInput.compact + .ghostInput input {
    border-width: 1px;
    border-style: solid;
}

/* Spacing */
div.setOfStepsContainer .signupContainer div.signupStep.landing .content > div {
    padding-top: 100px;
}

/* Buttons */
.signupStep div.navigation {
    margin-top: 20px;
    height: 48px;
    bottom: 0;
}

div.setOfStepsContainer .signupContainer .signupStep.landing .loginContainer .button,
div.setOfStepsContainer .signupContainer .signupStep.landing .loginContainer .button.nextstep,
div.setOfStepsContainer .signupContainer .signupStep.landing .loginContainer .button.nextstep:focus,
div.setOfStepsContainer .signupContainer .signupStep.landing .loginContainer .button.nextstep:hover,
div.slotDetailsContainer .button.nextstep,
.signupStep .navigation .button {
    background: #F85534;
    line-height: 24px;
    font-size: 19px;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 0;
    width: auto;
    text-transform: initial;
}



/* ============ STEP 5 : patient information ============ */



.signupsection {
    padding: 30px 10px;
    width: 700px;
    margin: 0 -10px;
}

.signupStep .navigation .button.prevstep {
    background: #fff;
    padding: 12px 30px;
    color: #304569;
}

/* ============ STEP 6 : confirmation ============ */

div.slotDetailsContainer div.signup {
    color: #62676A;
    text-align: center;
    margin: 30px auto 0;
    border: 0;
    width: 75%;
    font-size: 16px;
}

.instructionContent span {
    color: #62676A;
}

.slotDetailsContainer .instructions {
    margin-top: 20px;
}

div.setOfStepsContainer div.stepContainer > h2 {
    color: #374D76;
    margin: 30px 0 30px;
    text-align: center;
    font-weight: 700;
}
