/* BEGIN EPIC DELIVERED THEME CSS */
/* BEGIN: SPECIAL HIDING PROPERTIES */
/* If you only want certain HTML content to display on mobile, tag it with an "OnlyMobile" class*/
.onlymobile, 
.onlyMobile, 
.Onlymobile, 
.OnlyMobile {
    display: none !important;
}  

/* If you want to only show content on a certain affiliate site, tag it with an Affiliate class, and then another class to unhide just for that affiliate. Use URL Rewrite an affiliate-specific override css file to do the unhiding.*/
.affiliate,
.Affiliate {
    display: none !important;
}

/* If you want to show something only when looking at your own chart, not in proxy mode, tag it with a "selfmode" class. If you want something to only show when looking at someone else's chart, use "proxymode" class. */
.proxyMode,
.proxymode,
.ProxyMode,
.Proxymode {
    display: none !important;
}
/* END: SPECIAL HIDING PROPERTIES */


/* BEGIN: WAIT LIST, FAST PASS */
.loginalert .body .offertitle {
    background: #8CE7D5 none repeat scroll 0 0;
}
/* END: WAIT LIST, FAST PASS */


/* BEGIN: OPEN SCHEDULING CSS */
/* Titles on days */
.stepContainer .openingsData .card > .header {
    background-color: #8CE7D5;
}

/* Remove Embedded scheduling background color/image */
body.embedded,
body.embedded #content::after {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

/* Background color of drop down slots */
/* non-selected slot, morning */
.stepContainer .openingsData .subslotslist .slotdetailaction, 
.stepContainer .openingsData .slotdetailaction {
    background-color: #003358;
}
/* non-selected slot, afternoon */
.stepContainer .openingsData .subslotslist.pm .slotdetailaction, 
.stepContainer .openingsData .slotdetailaction.pm {
    background-color: #001C31;
}

/* selected slot */
.stepContainer .openingsData .slotslist .slotdetailaction.selected {
    background-color: #949445;
}

/* Back Button */
body.embedded .button:not(.disabled) {
    background-color: #004982;
}

/* Schedule Button */
body.embedded .nextstep:not(.disabled), 
body.embedded .completeworkflow:not(.disabled) {
    background-color: #8EC73F;
}

/* Open Scheduling signup step indicators */
.signupContainer .navigation .stepindicator.current {
	background-color: #00A09C;
}
.signupContainer .navigation .stepindicator {
    border: 2px solid #00A09C;
    background-color: #1DFEF7;
}

/* Open Scheduling Signup Container */
.signupContainer .card.loginContainer {
    background: #fff linear-gradient(to bottom, rgb(249,255,226) 0%, rgba(239,246,210,0.65) 100%) repeat scroll 0 0;
}
/* END: OPEN SCHEDULING CSS */


/* BEGIN: BACK OUT COMMON PRE-2016 BUTTON WORKAROUNDS */
/* This section is to back out some custom CSS many customers have written directly in their custom form XML files using internal style sheets. Without this, these customizations will not look good with the new UI. */

/* Turn off custom checkbox workarounds */
body.md_showform span.radiocontainer label.radiolabel::before,
body.md_showform input.radio + label::before,
body.md_showform input.clearradio + label::before,
body.md_showform td.prob label::before,
body.md_saveform span.radiocontainer label.radiolabel::before,
body.md_saveform input.radio + label::before,
body.md_saveform input.clearradio + label::before,
body.md_saveform td.prob label::before {
    display: none !important;
}

/* Remove custom icons applied to page title */
body.md_showform div#main div.title::before,
body.md_saveform div#main div.title::before,
body.md_showform div.title h1::before,
body.md_saveform div.title h1::before {
    display: none !important;
}

/* END: BACK OUT COMMON PRE-2016 BUTTON WORKAROUNDS */

/* BEGIN: FIX ECHECK-IN PAYMENT STEP TITLE DISPLAY ON IPHONE 5 AND SIMILAR SMALL SCREENS - QAN: 3912090  */
body.md_echeckin div.StepTitle {
    clear: both;
}
/* END: FIX ECHECK-IN PAYMENT STEP TITLE DISPLAY ON IPHONE 5 AND SIMILAR SMALL SCREENS - QAN: 3912090  */

/* BEGIN: HELP TEXT DISPLAY ISSUE IN CUSTOM FORMS - QAN: 3737878 */
/* The paragraph with the help text class is empty and is followed by the actual paragaph with the help text (with no class) */
body.md_showform .section .content p.helptext + p:not([class]),
body.md_saveform .section .content p.helptext + p:not([class]) {
    margin-left: 27%;
    margin-top: 0;
    width: 73%;
    color: #606060;
    font-size: 0.8em;
    line-height: 1em;
    display: block;
}

/* Hide empty paragraph after the true help text paragraph */
body.md_showform .section .content p.helptext + p:not([class]) + p,
body.md_saveform .section .content p.helptext + p:not([class]) + p {
    display: none;
}
/* END: HELP TEXT DISPLAY ISSUE IN CUSTOM FORMS - QAN: 3737878 */

/* BEGIN: TEXTAREA MESSAGE TEXT COUNTER IS NOT ALIGNED PROPERLY - QAN: 3814674 */
body.md_showform .section textarea + .messagedisplay {
    margin-left: 27%;
    margin-top: 0;
    width: 73%;
}
/* END: TEXTAREA MESSAGE TEXT COUNTER IS NOT ALIGNED PROPERLY - QAN: 3814674 */

/* BEGIN: Fix missing legends on fields without prompts cause overlapping buttons - QAN 3815147 */
body.md_showform .section .question > legend,
body.md_saveform .section .question > legend {
	min-height: 1rem;
} 
/* END: Fix missing legends on fields without prompts cause overlapping buttons - QAN 3815147 */

/* BEGIN: Restore account icon to banner - QAN 3803812 */
#account .menuicon::before {
    margin: 0 0 -1.5rem -0.25rem;
}

#account .menuicon {
    text-indent: 1.5rem;
}
/* END: Restore account icon to banner - QAN 3803812 */

/* BEGIN: Restore hidden patient name in more proxy menu on hover - QAN 3881926 */
.compact #proxies > li > p .grow .iconlabel {
	position: static;	
}
/* END: Restore hidden patient name in more proxy menu on hover - QAN 3881926 */

/* BEGIN: Fix cropped bottom of low hanging letters in proxy drop down menu - QAN 4082981 */
#proxies #moretabs .iconlabel {
    overflow: visible;
}
/* END: Fix cropped bottom of low hanging letters in proxy drop down menu - QAN 4082981 */

/* BEGIN: ENABLE CHANGING TRANSPARENCY LEVELS */

/* Side bar */
#sidebar {
    background-color: rgba(255,255,255,0.7);
}


/* Main Body */
#main, 
.BeforeList input.SearchList {
    background-color: rgba(255,255,255,0.88);
}

/* Banner */
.isInside #header:not(:empty) {
    background: rgba(255,255,255,0) linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.98) 12%, rgba(255,255,255,1) 12.5%) repeat scroll 0 0;
}

/* Menus */
#header .submenu {
    background: rgba(255,255,255,0.98) none repeat scroll 0 0;
}

/* END: ENABLE CHANGING TRANSPARENCY LEVELS */

/* BEGIN: PROXY COLORS */
/* Proxy Switcher Colors 
 * These colors impact the proxy icons, menus, and header.
 * They are used to provide the context of which proxy record is being accessed.
 * They do not impact the background image or colors of the main content of the page (except for hovers).
*/
/* Color 1 - Sky */
img.photo.color1,
.colorpreview.color1,
#proxies .color1:after,
body.color1 #header .menugroup.selected .menuicon:after {
	background-color: #4998D3;
}

#proxies .color1 .proxyicon,
#proxies a.color1 .proxyicon {
	background-color: #4998D3;
	border-color: #4998D3;
}

body.color1 #header .menugroup li a:not(.button):focus,
body.color1 #header .menugroup li a:not(.button):hover,
body.color1 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #D3E9FA;
}

/* Color 2 - Lavender */
img.photo.color2,
.colorpreview.color2,
#proxies .color2:after,
body.color2 #header .menugroup.selected .menuicon:after {
	background-color: #4B4FA2;
}

#proxies .color2 .proxyicon,
#proxies a.color2 .proxyicon {
	background-color: #4B4FA2;
	border-color: #4B4FA2;
}

body.color2 #header .menugroup li a:not(.button):focus,
body.color2 #header .menugroup li a:not(.button):hover,
body.color2 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #D1D2F1;
}

/* Color 3 - Meadow */
img.photo.color3,
.colorpreview.color3,
#proxies .color3:after,
body.color3 #header .menugroup.selected .menuicon:after {
	background-color: #5F843A;
}

#proxies .color3 .proxyicon,
#proxies a.color3 .proxyicon {
	background-color: #5F843A;
	border-color: #5F843A;
}

body.color3 #header .menugroup li a:not(.button):focus,
body.color3 #header .menugroup li a:not(.button):hover,
body.color3 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #A3E65E;
}

/* Color 4 - Rose */
img.photo.color4,
.colorpreview.color4,
#proxies .color4:after,
body.color4 #header .menugroup.selected .menuicon:after {
	background-color: #E35C88;
}

#proxies .color4 .proxyicon,
#proxies a.color4 .proxyicon {
	background-color: #E35C88;
	border-color: #E35C88;
}

body.color4 #header .menugroup li a:not(.button):focus,
body.color4 #header .menugroup li a:not(.button):hover,
body.color4 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #FFB9CF;
}

/* Color 5 - Violet */
img.photo.color5,
.colorpreview.color5,
#proxies .color5:after,
body.color5 #header .menugroup.selected .menuicon:after {
	background-color: #3F1B54;
}

#proxies .color5 .proxyicon,
#proxies a.color5 .proxyicon {
	background-color: #3F1B54;
	border-color: #3F1B54;
}

body.color5 #header .menugroup li a:not(.button):focus,
body.color5 #header .menugroup li a:not(.button):hover,
body.color5 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #C1AFCD;
}

/* Color 6 Honey */
img.photo.color6,
.colorpreview.color6,
#proxies .color6:after,
body.color6 #header .menugroup.selected .menuicon:after {
	background-color: #FABC14;
}

#proxies .color6 .proxyicon,
#proxies a.color6 .proxyicon {
	background-color: #FABC14;
	border-color: #FABC14;
}

body.color6 #header .menugroup li a:not(.button):focus,
body.color6 #header .menugroup li a:not(.button):hover,
body.color6 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #FBF9F1;
}

/* Color 7 - Cherry */
img.photo.color7,
.colorpreview.color7,
#proxies .color7:after,
body.color7 #header .menugroup.selected .menuicon:after {
	background-color: #D91D47;
}

#proxies .color7 .proxyicon,
#proxies a.color7 .proxyicon {
	background-color: #D91D47;
	border-color: #D91D47;
}

body.color7 #header .menugroup li a:not(.button):focus,
body.color7 #header .menugroup li a:not(.button):hover,
body.color7 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #FB9DB3;
}

/* END: Proxy Colors */

/* BEGIN: Locale menu */
body div#wrap #localeswitch #morelocales li a:hover:not(.button) {
    background-color: #6CB5FC;
}
/* END: LOCALE MENU */


/* BEGIN: HIGH CONTRAST OVERRIDES */
/* Force white background in the main pane */
html[data-altstylesheet="High Contrast"] #main,
html[data-altstylesheet="High Contrast"] .BeforeList input.SearchList {
    background: #fff;
}

/* Darken blue sidebar links and other links that appear on non-white backgrounds */
html[data-altstylesheet="High Contrast"]  #sidebar .recovery a, 
html[data-altstylesheet="High Contrast"]  #sidebar .component.medicationslist .pickupbanner,
html[data-altstylesheet="High Contrast"]  #sidebar .component.medicationslist .pendingupdates,
html[data-altstylesheet="High Contrast"]  .visitinformation a:not(.button),
html[data-altstylesheet="High Contrast"]  .apptDeptInstructions .section.flat a:not(.button),
html[data-altstylesheet="High Contrast"]  .medbottom .medinfocolumn a,
html[data-altstylesheet="High Contrast"]  .softwarning a:not(.button) {
	 color: #003062; 
}



/* Darken sidebar headers */
html[data-altstylesheet="High Contrast"]  #sidebar .header {
	color: #018792;
}

/* Darken datestamp */
html[data-altstylesheet="High Contrast"]  .Visits .card .date div,
html[data-altstylesheet="High Contrast"]  .previewCCD .listelement .date div {
	color: #043971;
}


html[data-altstylesheet="High Contrast"]  #sidebar {
	background-color: rgba(255, 255, 255, 0.9);
}


/* Darken edit icon (e.g. add health issue popup) */
html[data-altstylesheet="High Contrast"]  img[src*="edit.png"] {
	background-image: url('../images/edit_HC.png');
}



html[data-altstylesheet="High Contrast"]  .button:not(.buttoncheck),
html[data-altstylesheet="High Contrast"]  .button:not(.buttoncheck):focus,
html[data-altstylesheet="High Contrast"]  .button:not(.buttoncheck):hover,
html[data-altstylesheet="High Contrast"]  ul.MessageList.list.hoverable.collapsible .SingleMessage .ReplyButton a.button {
	background-color: #043971;
}

html[data-altstylesheet="High Contrast"]  .button.nextstep,
html[data-altstylesheet="High Contrast"]  .button.nextstep:focus,
html[data-altstylesheet="High Contrast"]  .button.nextstep:hover {
	background-color: #497513;
}

html[data-altstylesheet="High Contrast"]  .button.completeworkflow,
html[data-altstylesheet="High Contrast"]  .button.completeworkflow:focus,
html[data-altstylesheet="High Contrast"]  .button.completeworkflow:hover {
	background-color:  #497513;
}

html[data-altstylesheet="High Contrast"]  .button.cancelworkflow,
html[data-altstylesheet="High Contrast"]  .button.cancelworkflow:focus,
html[data-altstylesheet="High Contrast"]  .button.cancelworkflow:hover {
	background-color: #D14454;
}

html[data-altstylesheet="High Contrast"]  .button.inlinedelete,
html[data-altstylesheet="High Contrast"]  .button.inlinedelete:focus,
html[data-altstylesheet="High Contrast"]  .button.inlinedelete:hover {
	background-color: #D14454;
}

html[data-altstylesheet="High Contrast"]  .button.inlineedit,
html[data-altstylesheet="High Contrast"]  .button.inlineedit:focus,
html[data-altstylesheet="High Contrast"]  .button.inlineedit:hover {
	background-color: #043971;
}

html[data-altstylesheet="High Contrast"]  .button.inlinesave,
html[data-altstylesheet="High Contrast"]  .button.inlinesave:focus,
html[data-altstylesheet="High Contrast"]  .button.inlinesave:hover {
	background-color:  #497513;
}

html[data-altstylesheet="High Contrast"]  .button.disabled,
html[data-altstylesheet="High Contrast"]  .button.disabled:focus,
html[data-altstylesheet="High Contrast"]  .button.disabled:hover,
html[data-altstylesheet="High Contrast"]  .button[disabled],
html[data-altstylesheet="High Contrast"]  .button[disabled]:focus,
html[data-altstylesheet="High Contrast"]  .button[disabled]:hover {
	background-color: #DBDBDB;
}

html[data-altstylesheet="High Contrast"]  #main .back .button {
	color: #043971;
}

html[data-altstylesheet="High Contrast"]  body .stepContainer .openingsData .slotslist .slotdetailaction.selected,
html[data-altstylesheet="High Contrast"]  body .lookup .searchinputs:after,
html[data-altstylesheet="High Contrast"]  body .lookup .expanded #searchimg {
	background-color:  #497513;
	border-color:  #497513;
}
label.togglebutton[for] {
	margin: 0 0.25rem 0.5rem 0;
	min-width: 2.75rem;
	text-align: left;
}
/* END: HIGH CONTRAST OVERRIDES */

/* 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. */

/*a.card.custsvc{
    display:none;
}

body.md_review_index [href*="custsvc"] {
    display:none;
}

a.button[href*=msgoptions] {
    display: none;
}
*/

.component .news .newscard.devices {
  background-position-x: 20px /*rtl:calc(100% - 20px)*/;
  background-image: url("../images/billing/account_details/paperless.png");
  background-size: 3.5rem auto;
}
  
.component .news .newscard.videoVisits {
  background-position-x: 20px /*rtl:calc(100% - 20px)*/;
  background-image: url("../images/SharingHub/connectaccounts.svg"); 
  background-size: 3.5rem auto;
}

body #extPmtPageFrame {
          height: 68rem;  /* 56rem per guide */
}

body .mobileExtPmtPage#extPmtPageFrame {
          height: 70rem;  /* 56rem per guide */
}

body #guestPay-content #extPmtPageFrame {
height: 68rem;  /* 51rem per guide */
}
body #guestPay-content .formbuttons {
margin-bottom: 5rem;
}