@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
:root {
  /* GENERAL START */
  --pay-body-bg-color: #ECEFF1;
  --pay-body-font-color: #212529;
  --pay-body-font-family: 'Manrope', sans-serif;
  --pay-link-font-color: #224B9A; /* this covers other text links but not specific ones, e.g. terms link, print link */
  --pay-focus-outline-color: #101010!important;
  /* GENERAL END */

  /* TYPOGRAPHY START */
  --pay-h1-font-weight: 700;
  --pay-h2-font-weight: 700;
  --pay-h3-font-weight: 500;
  --pay-h4-font-weight: 500;
  /* TYPOGRAPHY END */

  /* TOP HEADER BAR START */
  --pay-header-bg-color: #fff;
  --pay-header-font-color: #585858;
  --pay-header-border-bottom: 1px solid #d9d9d9;
  --pay-header-line-split-color-top: rgba(217, 217, 217, 0); /* this always has to be an RGBA value for gradients with opacity*/
  --pay-header-line-split-color-bottom: #D9D9D9; /* this can be an RGBA value as well if opacity is needed */
  --pay-header-line-split-bg: linear-gradient(180deg, var(--pay-header-line-split-color-top) 0%, var(--pay-header-line-split-color-bottom) 100%);
  --pay-header-nav-menu-toggle-icon: url("../../img/ui-v2-icons/menu-bars.svg");
  --pay-header-language-link-color: #212529;
  --pay-header-language-current-link-color: #224b9a;
  /* TOP HEADER BAR END */

  /* MAIN NAV START */
  --pay-main-nav-bg-color: #fff;
  --pay-main-nav-border-color: #d9d9d9;
  --pay-main-nav-border-right: 1px solid var(--pay-main-nav-border-color);
  --pay-main-nav-link-color: #224b9a;
  --pay-main-nav-link-padding: 0.875rem 1rem 0.875rem 3.375rem;
  --pay-main-nav-link-margin: 0;
  --pay-main-nav-link-bg-color: transparent;
  --pay-main-nav-link-background-position: 1.125rem center;

  --pay-main-nav-hover-link-color: #224b9a;
  --pay-main-nav-hover-bg-color: #f6fafd;

  --pay-main-nav-is-active-link-color: #224b9a;
  --pay-main-nav-is-active-bg-color: #efefef;
  --pay-main-nav-is-active-hover-link-color: #224b9a;
  --pay-main-nav-is-active-hover-bg-color: transparent;

  --pay-main-nav-item-bg-accounts: url("../../img/ui-v2-icons/accounts.svg");
  --pay-main-nav-item-bg-make-payment: url("../../img/ui-v2-icons/pay-bill.svg");
  --pay-main-nav-item-bg-schedules: url("../../img/ui-v2-icons/calendar.svg");
  --pay-main-nav-item-bg-bills: url("../../img/ui-v2-icons/bill-history.svg");
  --pay-main-nav-item-bg-payments: url("../../img/ui-v2-icons/pay-history.svg");
  --pay-main-nav-item-bg-ext-payments: url("../../img/ui-v2-icons/pay-history.svg");
  --pay-main-nav-item-bg-my-wallet: url("../../img/ui-v2-icons/wallet.svg");
  --pay-main-nav-item-bg-nav-item-preferences: url("../../img/ui-v2-icons/settings.svg");
  --pay-main-nav-item-bg-logout: url("../../img/ui-v2-icons/logout.svg");
  --pay-main-nav-item-bg-outage: url("../../img/ui-v2-icons/report-outage.svg");

  /* MAIN NAV END */

  /* CARDS START */
  /* cards -- main -- start  */
  --pay-card-header-font-family: inherit;
  --pay-card-header-font-size: 1.125rem;
  --pay-card-header-font-color: #212529;
  --pay-card-header-bg-color: transparent;
  --pay-card-header-border-bottom: none;

  --pay-card-bg-color: #fff;
  --pay-card-border-radius: 10px 10px 10px 10px;
  --pay-card-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
  --pay-card-border-color: #e6e6e6;
  --pay-card-border: 1px solid var(--pay-card-border-color);

  --pay-card-sub-header-font-family: inherit;
  --pay-card-sub-header-font-size: 1rem;
  --pay-card-sub-header-font-color: #212529;
  --pay-card-sub-header-bg-color: #fff;

  --pay-card-content-border-radius: 0px 0px 10px 10px;

  --pay-card-footer-display: flex;
  --pay-card-footer-justify-content: flex-end;
  --pay-card-footer-gap: 8px;
  /* cards -- main -- end  */

  /* cards -- side -- start  */
  --pay-side-widget-header-font-family: inherit;
  --pay-side-widget-header-font-size: 1.125rem;
  --pay-side-widget-header-font-color: #212529;
  --pay-side-widget-header-bg-color: transparent;
  --pay-side-widget-header-title-padding: 0 0 0 24px;

  --pay-side-widget-border-bottom: none;
  --pay-side-widget-bg-color: #fff;
  /* cards -- side -- end  */

  /* BUTTONS START */
  /* buttons -- primary -- start */
  --pay-btn-primary-font-color: #fff;
  --pay-btn-primary-font-family: inherit;
  --pay-btn-primary-font-size: 1rem;
  --pay-btn-primary-bg-color: #224B9A;
  --pay-btn-primary-text-transform: uppercase;
  --pay-btn-primary-text-decoration: none;
  --pay-btn-primary-min-width: 160px;
  --pay-btn-primary-padding: 12px 12px 12px 12px;
  --pay-btn-primary-font-weight: 500;
  --pay-btn-primary-border-color: #224B9A;
  --pay-btn-primary-border: 1px solid var(--pay-btn-primary-border-color);
  --pay-btn-primary-border-radius: 24px;
  --pay-btn-primary-box-shadow: none;
  
  --pay-btn-primary-hover-font-color: #fff;
  --pay-btn-primary-hover-bg-color: #2C65D3;
  --pay-btn-primary-hover-text-decoration: none;
  --pay-btn-primary-hover-border-color: #2C65D3;
  --pay-btn-primary-hover-border: 1px solid var(--pay-btn-primary-hover-border-color);
  --pay-btn-primary-hover-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(32, 126, 177, 0.6);
  /* buttons -- end */

  /* buttons -- back/secondary -- start */
  --pay-btn-secondary-font-color: #224B9A;
  --pay-btn-secondary-bg-color: #fff;
  --pay-btn-secondary-box-shadow: none;
  --pay-btn-secondary-text-transform: var(--pay-btn-primary-text-transform);
  --pay-btn-secondary-text-decoration: none;
  --pay-btn-secondary-border-color: #224B9A;
  --pay-btn-secondary-border: 1px solid var(--pay-btn-secondary-border-color);

  --pay-btn-secondary-hover-font-color: #224B9A;
  --pay-btn-secondary-hover-bg-color: #f6fafd;
  --pay-btn-secondary-hover-border-color: #1a5798;
  --pay-btn-secondary-hover-border: 1px solid var(--pay-btn-secondary-hover-border-color);
  --pay-btn-secondary-hover-box-shadow: none;
  --pay-btn-secondary-hover-text-decoration: none;
  /* buttons -- back/secondary -- end */

  /* buttons -- text link / receipt print button / duplicate cancel btn -- start */
  --pay-btn-tertiary-font-color: #224B9A;
  --pay-btn-tertiary-font-size: 1rem;
  --pay-btn-tertiary-font-weight: 500;
  --pay-btn-tertiary-text-decoration: none;
  --pay-btn-tertiary-text-transform: uppercase;
  --pay-btn-tertiary-bg-color: #fff;
  --pay-btn-tertiary-box-shadow: none;
  --pay-btn-tertiary-padding: 12px 12px 12px 12px;
  --pay-btn-tertiary-border: 1px solid #224B9A;

  --pay-btn-tertiary-hover-font-color: #224B9A;
  --pay-btn-tertiary-hover-font-weight: 500;
  --pay-btn-tertiary-hover-text-decoration: none;
  --pay-btn-tertiary-hover-bg-color: #f6fafd;
  --pay-btn-tertiary-hover-box-shadow: none;
  --pay-btn-tertiary-hover-border: 1px solid #1a5798;

  /* buttons -- text link / receipt print button -- end */

  /* buttons -- text link / terms -- start */
  --pay-btn-terms-font-color: #224B9A;
  --pay-btn-terms-font-size: 0.875rem;
  --pay-btn-terms-bg-color: #fff;
  --pay-btn-terms-text-decoration: underline;
  --pay-btn-terms-padding: 0px;

  --pay-btn-terms-hover-font-color: #224B9A;
  --pay-btn-terms-hover-bg-color: #fff;
  --pay-btn-terms-hover-text-decoration: none;
  /* buttons -- text link / terms -- end */

  /* button remove -- autopay, wallet, accounts -- start */
  --pay-btn-remove-font-color: #eb001b;
  --pay-btn-remove-font-size: 1rem;
  --pay-btn-remove-font-weight: 500;
  --pay-btn-remove-text-decoration: none;
  --pay-btn-remove-text-transform: uppercase;
  --pay-btn-remove-bg-color: #fff;
  --pay-btn-remove-box-shadow: none;
  --pay-btn-remove-border-color: #eb001b;
  --pay-btn-remove-border: 1px solid var(--pay-btn-remove-border-color);

  --pay-btn-remove-hover-font-color: #eb001b;
  --pay-btn-remove-hover-text-decoration: none;
  --pay-btn-remove-hover-bg-color: #fdf7f7;
  --pay-btn-remove-hover-box-shadow: none;
  --pay-btn-remove-hover-border-color: #eb001b;
  --pay-btn-remove-hover-border: 1px solid var(--pay-btn-remove-hover-border-color);
  /* button remove -- autopay, wallet, accounts -- start */

  /* BUTTONS END */

  /* INPUTS START */
  /* input -- text field -- start */
  --pay-input-label-font-size: 0.875rem;
  --pay-input-label-font-color: #212529;
  --pay-input-label-font-family: inherit;
  --pay-input-label-font-weight: 500;
  --pay-input-field-font-color: inherit;
  --pay-input-field-placeholder-font-color: #757575;
  --pay-input-field-padding: 8px 8px 8px 8px;
  --pay-input-field-border: 1px solid #E6E6E6;
  --pay-input-field-border-radius: 6px 6px 6px 6px;
  --pay-input-field-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

  --pay-input-field-focus-border-color: #224B9A;
  --pay-input-field-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 3px rgba(35, 116, 204, 0.6);

  --pay-input-label-error-font-color: inherit;
  --pay-input-label-error-border-color: #ff0000;
  /* input -- text field -- end */

  /* input -- radio and checkbox -- start */
  --pay-radio-checkbox-border-color: #AEAEAE;
  --pay-radio-checkbox-checked-color: #224B9A;
  /* input -- radio and checkbox -- end */

  /* input -- bootstrap dropdown menu for payment types -- start */
  /* note some styling is already re-used from input field styling */
  --pay-bootstrap-select-active-font-color: #fff;
  --pay-bootstrap-select-active-bg-color: #224b9a;
  --pay-bootstrap-select-active-pt-icon-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
  /* input -- bootstrap dropdown menu for payment types -- end */
  /* INPUTS END */

  /* FOOTER START */
  --pay-footer-font-size: 0.813rem;
  --pay-footer-font-family: inherit;
  --pay-footer-font-color: #1e3543;
  --pay-footer-text-align: center;
  --pay-footer-margin: 24px 24px 0px 0px;
  --pay-footer-padding: 3em 4em 1em 4em;
  --pay-footer-border-top: 1px solid #d9dfe1;

  --pay-footer-link-color: #1e3543;
  --pay-footer-link-text-decoration: underline;

  --pay-footer-link-hover-color: #1e3543;
  --pay-footer-link-hover-text-decoration: underline;
  /* FOOTER END */

  /* MODALS START */
  --pay-modal-header-font-color: #212529;
  --pay-modal-header-font-size: 1.125rem;
  --pay-modal-header-bg-color: #fff;
  --pay-modal-bg-color: #fff;
  --pay-modal-close-icon-color: #212529;
  --pay-modal-border-radius: 8px;
  /* MODALS END */

  /* ERROR CONTAINER START */
  --pay-error-content-font-color: #752e2d;
  --pay-error-content-font-size: 0.813rem;
  --pay-error-content-bg-color: #FFEDED;
  --pay-error-content-border: 1px solid #ebccd1;
  --pay-error-content-padding: 16px 16px 16px 16px;
  --pay-error-content-border-radius: 8px 8px 8px 8px;
  /* ERROR CONTAINER END */

  /* TABLES START */
  --pay-table-heading-font-color: #212529;
  --pay-table-heading-font-size: 0.813rem;
  --pay-table-heading-font-weight: 500;
  --pay-table-heading-bg-color: #dee4f0;
  --pay-table-heading-border-split-color: #f8f8f8;
  --pay-table-heading-border-split: 1px solid var(--pay-table-heading-border-split-color);
  --pay-table-border-color: #E6E6E6;

  --pay-table-multipay-plus-icon-color: #585858;
  --pay-table-multipay-minus-icon-color: #585858;

  /* payment history table styling -- start */
  --pay-table-widget-btn-font-size: 0.875rem;
  --pay-table-widget-btn-height: 36px;
  --pay-table-widget-btn-width: 36px;
  --pay-table-widget-btn-line-height: 36px;
  --pay-table-widget-btn-padding: 0px 12px 0px 12px;
  --pay-table-pagination-border-color: #E6E6E6;
  --pay-table-pagination-border: 1px solid var(--pay-table-pagination-border-color);
  --pay-table-pagination-btn-font-size: 0.875rem;

  /* these variables use a fallback, give value to these variables to overwrite the fallback */
  /*
    --pay-table-widget-btn-bg-color, fallback is --pay-btn-secondary-bg-color
    --pay-table-widget-btn-hover-bg-color, fallback is --pay-btn-secondary-hover-bg-color
    --pay-table-widget-btn-border-radius, fallback is --pay-btn-primary-border-radius
  */
  
  /* payment history table styling -- end */
  /* TABLES END*/

  /* RIBBONS -- START */
  --pay-ribbon-font-size: 0.75rem;
  --pay-ribbon-bg-color: #0dcaf0;
  --pay-ribbon-font-weight: 400;

  /* accepted, paid, resolved */
  --pay-ribbon-accepted-font-color: #fff;
  --pay-ribbon-accepted-bg-color: #198754;

  /* declined, failed, overdue, refund */
  --pay-ribbon-declined-font-color: #fff;
  --pay-ribbon-declined-bg-color: #dc3545;

  /* returned, void */
  --pay-ribbon-returned-font-color: #fff;
  --pay-ribbon-returned-bg-color: #4e7187;

  /* new */
  --pay-ribbon-new-font-color: #fff;
  --pay-ribbon-new-bg-color: #26800;
  --pay-ribbon-new-font-weight: 700;

  /* pending, scheduled, queued */
  --pay-ribbon-pending-font-color: #fff;
  --pay-ribbon-pending-bg-color: #dc582a;

  /* canceled */
  --pay-ribbon-canceled-font-color: #212529;
  --pay-ribbon-canceled-bg-color: #6c757d;
  /* RIBBONS -- END */

  /* CALC BOX START */
  --pay-calc-box-heading-font-color: #212529;
  --pay-calc-box-heading-font-weight: 400;
  --pay-calc-box-heading-font-size: 1rem;
  --pay-calc-box-font-size: 1rem;
  --pay-calc-box-font-color: inherit;
  --pay-calc-box-background: #F4F4F4;
  --pay-calc-box-border: none;
  --pay-calc-box-border-radius: 6px 6px 6px 6px;
  --pay-calc-box-icon-color: #585858;
  /* CALC BOX END */

  /* RECEIPT START */
  --pay-receipt-review-msg-success-color: #224B9A;
  --pay-receipt-review-msg-fail-color: #d44d50;
  --pay-receipt-review-msg-font-size: 1.25rem;
  --pay-receipt-review-msg-text-align: center;
  --pay-receipt-review-msg-success-icon-url: url("../../img/ui-v2-icons/success.svg");
  --pay-receipt-review-msg-fail-icon-url: url("../../img/ui-v2-icons/failed.svg");
  --pay-receipt-border-color: #E6E6E6;
  /* RECEIPT END */

  /* MISC -- START */
  /* paperless icons -- start */
  --pay-icon-paperless-on-font-color: #0abf53;
  /*--pay-icon-paperless-off-font-color */ /* fallback is --pay-body-font-color */
  --pay-icon-paperless-on: url("../../img/ui-v2-icons/paperless.svg");
  --pay-icon-paperless-off: url("../../img/ui-v2-icons/paper.svg");
  /* paperless icons -- end */

  /* calendar icon */
  --pay-icon-calendar: url("../../img/ui-v2-icons/icon-calendar.svg");
  /* MISC -- END */
}

.lang-select {
    color: rgb(118, 118, 118);
}

.lang-select a:link, .lang-select a:visited {
    color: rgb(99, 99, 99);
}

.lang-select a.current-lang {
    color: #207CB1;
}

.rate-area > input:checked ~ label {
    color: #8A7500;
}

.rate-area:not(:checked) > label:hover,
.rate-area:not(:checked) > label:hover ~ label {
    color: #8A7500;

}

.rate-area > input:checked + label:hover,
.rate-area > input:checked + label:hover ~ label,
.rate-area > input:checked ~ label:hover,
.rate-area > input:checked ~ label:hover ~ label,
.rate-area > label:hover ~ input:checked ~ label {
    color: #8A7500;
}

.rate-area:not(:checked) > label {
    color: #757575;
}

.nav-tabs > li.active > a {
	color: #277CAA !important;
}

.signup > .error-row > .error-content {
	color: #C42C2A;
}

.password-strength.strength0 {
	background-color: #E20303;
}

.password-strength.strength1 {
	background-color: #d70202;
}

.password-strength.strength2 {
	background-color: #ca4b02;
}

.password-strength.strength4 {
	background-color: #328203;
}

.password-strength.strength5 {
	background-color: #2F7A02;
}

.btn-terms:hover {
	color: #037ABA !important;
}

.nav-btn {
	color: #767676 !important;
	opacity: 1.0 !important;
}

.btn-show-msgs {
	color: #767676 !important;
    opacity: 1.0 !important;
}

.widget-error-message {
	color: #D50202;
}

input[type="text"]::placeholder {
	color : #666666;
}

input[type="password"]::placeholder {
	color : #666666;
}

.initialModalContent, .modal-content {
	border: 1px solid #757575;
	border-radius: 6px;
}

.widget-frame-container {
	border: 1px solid #e9e7e7;
}

.tab-DD .label {
    letter-spacing: 0;
}

.tab-content.tab-CC , .tab-content.tab-DC {
	max-width: 350px !important;
}

input[type=radio].standard-radio:focus+span:before, input[type=checkbox].standard-radio:focus+span:before, .boxshadow input[readonly]:focus, .boxshadow select:focus, .boxshadow input:focus, .boxshadow textarea:focus {
    border: 2px solid #000000;
}

.month-field, .year-field {
	width: 170px !important;
}

@media (max-width: 768px) {
    .month-field, .year-field {
        width: 95% !important;
    }
}

input, input[type="text"], input[type="email"], select, textarea, input[type="date"] {
	border-color: #949494;
}

@media (prefers-contrast: more) {
	.lang-select a.current-lang {
	    color: Highlight;
	    font-weight: bold;
	}
}

.cvv-help {
	top: 11px;
    position: absolute;
    left: 30px;
}

.close-schedules {
	    background: transparent;
   		border: none;
}

.notif-help {
	top: 0px;
    position: static;
}

.eBill-1 {
	padding-left: 0.3em;
}

.eBill-2 {
	padding-left: 0.3em;
}

.bill-summary-1 {
	padding-left: 0.3em;
}

.bill-summary-2 {
	padding-left: 0.3em;
}

/* ADA-612: Fixed high contrast issue for Toggle Button */
@media screen and (forced-colors: active) {
    .toggle, .toggle-handle {
    	border: 2px solid !important;
    } 
    
    .toggle-handle {
    	top: 2px !important;
    }
}

/* ADA-616: Fixed contrast issue for Toggle Button */
.toggle-handle {
	background: #5F5E5E !important;
}

/* ADA-613: Fixed contrast issue for Radio Button */
.standard-radio + span:before {
	border-color: #5F5E5E !important;
}

/* ADA-617: Fixed contrast issue for Check box */
input[type=checkbox].standard-radio + span:before {
	border: 1px solid #5F5E5E !important;
}

/* ADA-618: Fixed contrast issue for Form Fields */
input, input[type="text"], input[type="email"], select, textarea, input[type="date"], input[type="tel"], input[type="number"], .bootstrap-select > .dropdown-toggle {
	border: 1px solid #2a1f1f !important;
}

/* ADA-584: CSS to fix the heading */
.cp-item-header h1 {
	font-family: var(--pay-card-header-font-family);
    color: var(--pay-card-header-font-color);
    font-size: var(--pay-card-header-font-size);
    padding-left: 1.5rem;
   	margin-top: 20px;
}

.cp-item-sub-header h2 {
	color: var(--pay-card-sub-header-font-color);
    font-family: var(--pay-card-sub-header-font-family);
    font-weight: var(--pay-h3-font-weight);
    font-size: var(--pay-card-sub-header-font-size);
    line-height: normal;
}

#addAccountModal-desc {
	margin-top: 20px;
}

.selectPaymentType, .rowPt {
    margin-top: -25px;
}

@media screen and (max-width: 699px) {
    .cp-item-header h1 {
        font-size: 1rem;
        padding-left: 1rem;
    }
}

.cp-popup .cp-item-header h1 {
    color: var(--pay-modal-header-font-color);
    font-size: var(--pay-modal-header-font-size);
    padding-left: 0rem;
    margin-top: 0px;
}

.cp-item-sub-header h2 {
    color: var(--pay-card-sub-header-font-color);
    font-family: var(--pay-card-sub-header-font-family);
    font-weight: var(--pay-h3-font-weight);
    font-size: var(--pay-card-sub-header-font-size);
    line-height: normal;
}

/* ADA-587: CSS to hide content */
ul[aria-hidden="true"], .poweredby[aria-hidden="true"] {
    display: none; 
    visibility: hidden;
}

/* ADA-619: CSS to show credit card images on login page on zoom */
@media screen and (max-width: 1024px) {
    .payment-accepted {
        display: block;
    }
}

.picker__select--year:focus, .picker__select--month:focus {
	border: 1px solid var(--pay-input-field-focus-border-color) !important;
}

/* ADA-614: CSS to fix text spacing issues */
.paperContainer {
	min-width: 36px !important;
	min-height: 44px !important;
}

.paperIconContainer, .paperlessIconContainer {
	width: auto !important;
	height: auto !important;
}

.paperlessIconContainer p, .paperIconContainer p {
	position: relative !important;
	bottom: auto !important;
	text-overflow: initial !important;
	padding-top: 28px !important;
}

label.inline-block { 
	display: inline-block
}

/* ADA-780: CSS for check box focus */
input[type=checkbox].standard-radio:focus + span:before {
  outline: none !important; 
  box-shadow: 0 0 0 1px var(--pay-input-field-focus-border-color) !important; 
  border: 1px solid var(--pay-input-field-focus-border-color) !important;
}

input[type=checkbox].standard-radio:focus:checked + span:before {
  outline: none !important; 
  box-shadow: 0 0 0 1px var(--pay-input-field-focus-border-color) !important; 
  border: 1px solid var(--pay-input-field-focus-border-color) !important;
}  

.split-pay-payment-label-rows div.split-pay-input input.error {
	border: 1px solid red !important;
}