/* BEGIN EPIC COMMUNITY MEMBER CUSTOM CSS */
/* Epic recommends any additional CSS be placed below this line. Avoid adding CSS above because it makes it difficult to determine which are your changes and which are Epic's. */

/* BEGIN: prelogin page images */


.isPrelogin #features li {
	display: inline-block;
	padding: 1rem 1rem 1rem 6rem;
	vertical-align: top;
	width: 50%;
}
.isPrelogin #features li:before {
	content: "";
	display: block;
	height: 4rem;
	margin: 0 0 -4rem -5rem;
	width: 4rem;
}
#features li:nth-child(3)::before{
                background: rgba(0, 0, 0, 0) url("../images/quicklinks/medical_advice.png") no-repeat center center;
}
#features li:nth-child(4)::before{
                background: rgba(0, 0, 0, 0) url("../images/quicklinks/test_results.png") no-repeat center center;
}
#features li:nth-child(5)::before{
                background: rgba(0, 0, 0, 0) url("../images/quicklinks/medications.png") no-repeat center center;
}
#features li:nth-child(6)::before{
                background: rgba(0, 0, 0, 0) url("../images/quicklinks/appointments.png") no-repeat center center;
}
#features li:nth-child(7)::before{
                background: rgba(0, 0, 0, 0) url("../images/quicklinks/phone.png") no-repeat center center;
}
#features li:nth-child(8)::before{
                background: rgba(0, 0, 0, 0) url("../images/quicklinks/medical_history.png") no-repeat center center;
}
.features .icon-phone {
  background-image: url("../images/quicklinks/phone.png");
}
.features .icon-bill {
  background-image: url("../images/quicklinks/account_summary.png");
}
.features .icon-manageaccount {
  background-image: url("../images/quicklinks/medical_history.png");
}
/* END: prelogin page images */
/* BEGIN: footer color*/
body #footer, 
body #footer a,
.datatile #wrap > .copyright a,
body.md_showform #footer, 
body.md_showform #footer a,
body.md_saveform #footer, 
body.md_saveform #footer a {
	color: rgb(0, 145, 234);
}
/* END: Footer color*/

/* BEGIN: Prelogin Logo spacing */
.logo {
  height: 7rem;
  }
/* END: Prelogin Logo Spacing */
/* BEGIN: Background Shading */
#main, .BeforeList input.SearchList {
    background-color: rgba(255, 255, 255, 1);
}

#sidebar {
    background-color: rgba(255, 255, 255, 0.9);
}
/* END: Background Shading */

/* BEGIN: Custom Logonbox*/
.embedded .button.completeworkflow, .embedded .button.completeworkflow:focus, .embedded .button.completeworkflow:hover
 {
    background-color: #0032a0;
}
  .embedded .signup {
     display: none;
     }
      .embedded #footer {
    display: none;
     }
/* END: Custom Logonbox*/

/* BEGIN: Resize OS iframe height */
#div.setOfStepsContainer .stepContainer {
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: inline-block;
    height: 720px;
    margin: 0.25rem;
    overflow: hidden;
    padding: 0;
    position: relative;
    vertical-align: top;
    width: 690px; 
	}
/* END: Resize OS iframe height */

/* BEGIN: Force correct logo */
#graphicHeader:not(:empty) #header_logo .header_logo_link {

background: transparent url("../images/logo.png") no-repeat scroll center/contain;

}
/* END: Force correct logo */

.se_image_patient {
  width: 120px;
}

/*Subtext style under the "Help us prepare for your arrival" header in the On My Way workflow which is defined in the string Scheduling.OnMyWay.AboutVisitLabel*/
.OnMyWayAboutVisitLabelOverride{
background-image: none;
padding: .75rem;
max-width: fit-content;}


/* BEGIN: Pay a Guest design code */

#extPmtPageFrame, #visitpayment-content #extPmtPageFrame, #visitpayment-content
#iFrameLoadingIndicator {
height: 40rem;
}

#guestPay-content #extPmtPageFrame, #guestPay-content #iFrameLoadingIndicator {
height: 40rem;
}
@media only screen and (max-width: 825px) {
#payment-content #extPmtPageFrame,
#payment-content #iFrameLoadingIndicator,
#guestPay-content #extPmtPageFrame,
#guestPay-content #iFrameLoadingIndicator {
height: 60rem;
}
}
/* END: Pay a Guest design code */



/* START: CLEAR button integration */

  :root{
    --w-max:328px;--w-min:236px;
    --h-max:56px;--h-min:40px;
    --pad-max:64px;--pad-min:32px;
    --gap:8px;
  }

  #clear-button{
    width:clamp(var(--w-min),100%,var(--w-max));
    min-width:var(--w-min);
    max-width:var(--w-max);
    height:var(--h-max);
    background:#081245;
    color:#ffffff;
    font:600 16px/26px "Inter",sans-serif;
    border:none;
    border-radius:32px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--gap);
    padding:0;
    box-sizing:border-box;
    transition:opacity .15s;
    white-space:nowrap;
	margin-bottom: 5px;
	font-weight: normal;
  }
  #clear-button:hover{opacity:.8}

  #clear-button .icon{flex:0 0 24px;display:flex;align-items:center}
  #clear-button .icon svg{width:24px;height:24px;flex-shrink:0;display:block} 
  #clear-button::before,
  #clear-button::after{
    content:"";
    flex:0 0 var(--pad-max);
  }

  @media(max-width:327px){
    #clear-button{
      height:var(--h-min);
    }
    #clear-button::before,
    #clear-button::after{
      flex-basis:var(--pad-min);
    }
  }

/* END: CLEAR button integration */

/* START HMH Button Redesign for CLEAR */
  .login .button {
        border-radius: 32px;
        min-width: var(--w-min);
        max-width: var(--w-max);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--gap);
        box-sizing: border-box;
        transition: opacity .15s;
        white-space: nowrap;
        margin: .5em auto;
        padding: .75em;
        background-color: #041A55;
    }
    a.button.guest, a.button.otherbutton {
        border-radius: 32px;
        min-width: var(--w-min);
        max-width: var(--w-max);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--gap);
        box-sizing: border-box;
        transition: opacity .15s;
        white-space: nowrap;
        margin: .5em auto;
        padding: .75em;
    }

.helpfeaturescontainer {display: none;}

/* END HMH Button Redesign for CLEAR */