@charset "utf-8";

/* -------------------------------------------------------------------------

   IMPORTANT WARNING:

   Do Not Use Admin Portal for client color customization until TFS #65913
   is complete and merged to 15.20. Publishing color changes from Admin
   Portal will overwrite this file and color customizations will be lost.
   
   As Part of TFS #65913...
   Uncomment the :root variables container (:root {}) and delete all the
   workarounds and over-rides below the :root variables container.

------------------------------------------------------------------------- */

/*
:root {

  --primary: #003A5C;
  --primary-rgb: 0, 58, 92;
  --primary-100: #E6F6FF;
  --primary-200: #BDE7FF;
  --primary-300: #80D0FF;
  --primary-400: #33B4FF;
  --primary-500: #0091E6;
  --primary-600: #006199;
  --primary-700: #003A5C;
  --primary-800: #002033;
  --primary-900: #00101A;

  --secondary: #003A5C;
  --secondary-rgb: 0, 58, 92;
  --secondary-100: #E6F6FF;
  --secondary-200: #BDE7FF;
  --secondary-300: #80D0FF;
  --secondary-400: #33B4FF;
  --secondary-500: #0091E6;
  --secondary-600: #006199;
  --secondary-700: #003A5C;
  --secondary-800: #002033;
  --secondary-900: #00101A;

  --accent: #8EBD1E;
  --accent-rgb: 142, 189, 30;
  --accent-100: #F6FCE9;
  --accent-200: #E8F6C6;
  --accent-300: #D2EE91;
  --accent-400: #B7E34F;
  --accent-500: #8EBD1E;
  --accent-600: #638415;
  --accent-700: #42580E;
  --accent-800: #283508;
  --accent-900: #141A04;

  --billed: #6c757d;
  --billed-rgb: 108, 117, 125;
  --billed-100: #e1e3e5;
  --billed-200: #c4c7cb;
  --billed-300: #a6acb1;
  --billed-400: #899097;
  --billed-500: #6c757d;
  --billed-600: #565d64;
  --billed-700: #40464b;
  --billed-800: #2b2e32;
  --billed-900: #151719;

  --prepaid: #0b9c35;
  --prepaid-rgb: 11, 156, 53;
  --prepaid-100: #ceebd6;
  --prepaid-200: #9dd7ae;
  --prepaid-300: #6cc385;
  --prepaid-400: #3baf5d;
  --prepaid-500: #0b9c35;
  --prepaid-600: #087c2a;
  --prepaid-700: #065d1f;
  --prepaid-800: #043e15;
  --prepaid-900: #021f0a;

  --body-bkgd-color: #ffffff;
  --body-text-color: #495057;
  --gray-text: #495057;

  --header-bkgd-color: #ffffff;
  --header-text-color: #003A5C;

  --mainmenu-bkgd-color: #ffffff;
  --mainmenu-bkgd-color-hover: #003A5C;
  --mainmenu-bkgd-color-focus: #00609a;
  --mainmenu-bkgd-color-active: #004873;

  --mainmenu-text-color: #003A5C;
  --mainmenu-text-color-hover: #ffffff;
  --mainmenu-text-color-focus: #ffffff;
  --mainmenu-text-color-active: #ffffff;

  --submenu-bkgd-color: #ffffff;
  --submenu-bkgd-color-hover: #003A5C;
  --submenu-bkgd-color-focus: #00609a;
  --submenu-bkgd-color-active: #004873;

  --submenu-text-color: #003A5C;
  --submenu-text-color-hover: #ffffff;
  --submenu-text-color-focus: #ffffff;
  --submenu-text-color-active: #ffffff;

  --footer-bkgd-color: #003A5C;
  --footer-text-color: #ffffff;

  --footmenu-bkgd-color: #003A5C;
  --footmenu-bkgd-color-hover: #003A5C;
  --footmenu-bkgd-color-focus: #00609a;
  --footmenu-bkgd-color-active: #003A5C;

  --footmenu-text-color: #ffffff;
  --footmenu-text-color-hover: #ffffff;
  --footmenu-text-color-focus: #ffffff;
  --footmenu-text-color-active: #ffffff;
    
  --bkgd-image-position: center top;

  --carousel-bkgd-color: #003A5C;
  --carousel-border-color: #003A5C;
  --carousel-heading-color: #8EBD1E;
  --carousel-caption-color: #ffffff;
}
*/

/* ----------------------------------------------------------------------------------------------------------------------
    Primary Brand Color Workaround (Default: #003A5C)
---------------------------------------------------------------------------------------------------------------------- */

/* primary */
.primary,
.text-primary { color: var(--primary) !important; }
.bg-primary,
.badge-primary { background-color: var(--primary) !important; }

/* btn-primary */
.btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover { background-color: var(--primary-600) !important; border-color: var(--primary-600) !important; }
.btn-check:focus + .btn-primary,
.btn-primary:focus { background-color: var(--primary-600) !important; border-color: var(--primary-700) !important; box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5) !important; }
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle { background-color: var(--primary-600) !important; border-color: var(--primary-700) !important; }
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5) !important; }
.btn-primary.disabled,
.btn-primary:disabled { background-color: var(--primary) !important; border-color: var(--primary) !important; }

/* btn-outline-primary */
.btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-outline-primary:hover { background-color: var(--primary-600) !important; border-color: var(--primary-600) !important; }
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus { box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5) !important; }
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active { background-color: var(--primary-600) !important; border-color: var(--primary-700) !important; }
.btn-check:active + .btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus,
.btn-outline-primary:active:focus { box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5) !important; }
.btn-outline-primary.disabled,
.btn-outline-primary:disabled { color: var(--primary) !important; }

/* misc primary elements */
.fa-chevron-down,
.fa-chevron-up { color: var(--primary) !important; }
.ngb-dp-month .ngb-dp-week .ngb-dp-day .btn-light.bg-primary { background: var(--primary) !important; }
.dropdown-item.active,
.dropdown-item:active { background: var(--primary) !important; }
.nav-tabs .nav-link { color: var(--primary) !important; }
.nav-tabs .nav-link:hover { color: var(--primary-600) !important; }
.nav-tabs .nav-link:focus { color: var(--primary-700) !important; }
.tableToggle > i { color: var(--primary) !important; }
#datepicker-icon-append i { color: var(--primary) !important; }
.quickLinksLink { color: var(--primary) !important; }
.quickLinksLink > i { color: var(--primary) !important; }
.btn-group-toggle .btn-filter { color: var(--primary) !important; }
.btn-group-toggle .btn-filter:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.btn-group-toggle .btn-filter:focus { color: var(--primary) !important; }
.mat-step-icon-selected { background-color: var(--primary) !important; }
#changeOrderFlow .change-btn:hover { outline-color: var(--primary) !important; }
.serviceCard:hover { outline-color: var(--primary) !important; }
.serviceCard.current:hover { outline-color: var(--primary) !important; }
.serviceCard .currentBanner { background: var(--primary) !important; }
.serviceCard .body h3 { color: var(--primary) !important; }
.serviceCard:hover .body h3 { color: var(--primary) !important; }
.serviceCard.current .body h3 { color: var(--primary) !important; }
.serviceCard.current:hover .body h3 { color: var(--primary) !important; }
.serviceCard .btn-retainedService { color: var(--primary); border-color: var(--primary) !important; }
.planCard:hover { outline-color: var(--primary) !important; }
.configPlanHead { background: var(--primary) !important; }
.configPlanBody .compLevelTwo .panelContent .colDesc { background: var(--primary-100); color: var(--primary) !important; }
.configPlanBody .compSubtotal .colDesc { color: var(--primary) !important; }
.configPlanBody .main-name { color: var(--primary) !important; }
.quantityWidget .btn-quantity:active,
.quantityWidget .btn-quantity.active { background: var(--primary) !important; }
.quantityWidget .btn-quantity > i { color: var(--primary) !important; }
.quantityWidget .btn-quantity:hover > i { color: var(--primary-600) !important; }
.quantityWidget .btn-quantity:focus > i { color: var(--primary-700) !important; }
#configureServicesCart .shoppingCardBody .main-name { color: var(--primary) !important; }
.reviewPlanHead { background: var(--primary) !important; }
.reviewPlanBody .compLevelTwo .panelContent .colDesc { background: var(--primary-100) !important; color: var(--primary) !important; }
.reviewPlanBody .compSubtotal .colDesc { color: var(--primary) !important; }
.reviewPlanBody .main-name { color: var(--primary) !important; }
.summaryChargesFoot { color: var(--primary) !important; }
#nanoSearchLocations .dropdown-menu .dropdown-item.active { background: var(--primary) !important; }
#selectSpeedContent .serviceCard.active .btn-secondary { border-color: var(--primary) !important; background: var(--primary) !important; }
#selectServiceContent .serviceCard.active .btn-secondary { background-color: var(--primary-600) !important; border-color: var(--primary-700) !important; }
#selectServiceContent .serviceCard .selected .btn-secondary { color: var(--primary) !important; border-color: var(--primary) !important; background-color: var(--white) !important; }
#selectServiceContent .serviceCard:hover .selected .btn-secondary { background-color: var(--primary-600) !important; border-color: var(--primary-600) !important; color: var(--white) !important; }
#selectServiceContent .serviceCard:focus .selected .btn-secondary { background-color: var(--primary-600) !important; border-color: var(--primary-600) !important; box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5) !important; }
#selectServiceContent .serviceCard:active .selected .btn-secondary,
#selectServiceContent .serviceCard.active .selected .btn-secondary { background-color: var(--primary-600) !important; border-color: var(--primary-700) !important; }
#nanoConfigureServices .configPlanHead { background-color: var(--primary) !important; }
#nanoConfigureServices .compSubtotal .colDesc { color: var(--primary) !important; }
#nanoSetUpAccount .accountStepper .mat-step-icon-selected { background: var(--primary) !important; }
#nanoReviewOrder .configPlanHead { background-color: var(--primary) !important; }
#nanoReviewOrder .compSubtotal .colDesc { color: var(--primary) !important; }
#nanoOrderConfirmation .configPlanHead { background-color: var(--primary) !important; }

/* ----------------------------------------------------------------------------------------------------------------------
    Secondary Brand Color Workaround (Default: #003A5C)
---------------------------------------------------------------------------------------------------------------------- */

/* secondary */
.secondary,
.text-secondary { color: var(--secondary) !important; }
.bg-secondary,
.badge-secondary { background-color: var(--secondary) !important; }

/* btn-secondary */
.btn-secondary { background-color: var(--secondary) !important; border-color: var(--secondary) !important; }
.btn-secondary:hover { background-color: var(--secondary-600) !important; border-color: var(--secondary-600) !important; }
.btn-check:focus + .btn-secondary,
.btn-secondary:focus { background-color: var(--secondary-600) !important; border-color: var(--secondary-700) !important; box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgb), 0.5) !important; }
.btn-check:active + .btn-secondary,
.btn-check:checked + .btn-secondary,
.btn-secondary.active,
.btn-secondary:active,
.show > .btn-secondary.dropdown-toggle { background-color: var(--secondary-600) !important; border-color: var(--secondary-700) !important; }
.btn-check:active + .btn-secondary:focus,
.btn-check:checked + .btn-secondary:focus,
.btn-secondary.active:focus,
.btn-secondary:active:focus,
.show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgb), 0.5) !important; }
.btn-secondary.disabled,
.btn-secondary:disabled { background-color: var(--secondary) !important; border-color: var(--secondary) !important; }

/* btn-secondary outline */
.btn-outline-secondary { color: var(--secondary) !important; border-color: var(--secondary) !important; }
.btn-outline-secondary:hover { background-color: var(--secondary-600) !important; border-color: var(--secondary-600) !important; }
.btn-check:focus + .btn-outline-secondary,
.btn-outline-secondary:focus { box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgb), 0.5) !important; }
.btn-check:active + .btn-outline-secondary,
.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary:active { background-color: var(--secondary-600) !important; border-color: var(--secondary-700) !important; }
.btn-check:active + .btn-outline-secondary:focus,
.btn-check:checked + .btn-outline-secondary:focus,
.btn-outline-secondary.active:focus,
.btn-outline-secondary.dropdown-toggle.show:focus,
.btn-outline-secondary:active:focus { box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgb), 0.5) !important; }
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled { color: var(--secondary) !important; }

/* product filters */
.btn-group-toggle .btn-filter:focus { border-color: var(--secondary) !important; }
.btn-group-toggle .btn-filter:active,
.btn-group-toggle .btn-filter.active { border-color: var(--secondary) !important; color: var(--secondary) !important; }

/* toggle list or card view */
.btn-group-toggle .btn-outline-secondary > i { color: var(--secondary); }
.btn-group-toggle .btn-outline-secondary:hover > i { color: var(--secondary) !important; }
.btn-group-toggle .btn-outline-secondary:hover { background: rgba(var(--secondary-rgb), 0.25) !important; }
.btn-group-toggle .btn-outline-secondary:focus > i { color: var(--secondary) !important; }
.btn-group-toggle .btn-outline-secondary:focus { box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgb), 0.5) !important; }
.btn-group-toggle .btn-outline-secondary.active > i,
.btn-group-toggle .btn-outline-secondary:active > i { color: var(--white) !important; }

/* misc secondary elements */
#changeOrderFlow .change-btn:focus,
#changeOrderFlow .change-btn:active,
#changeOrderFlow .change-btn.active,
.serviceCard:focus,
.serviceCard.current:focus,
.planCard:focus { outline-color: var(--secondary) !important; }
.serviceCard:active,
.serviceCard.active,
.serviceCard.current:active,
.serviceCard.current.active,
.serviceCard.current.upgradeOnly,
.serviceCard.current.upgradeOnly:hover,
.serviceCard.current.upgradeOnly:focus,
.serviceCard.current.upgradeOnly:active,
.serviceCard.current.upgradeOnly.active,
.serviceCard.default,
.serviceCard.default:hover,
.serviceCard.default:focus,
.serviceCard.default:active,
.serviceCard.default.active,
.serviceCard.default.upgradeOnly,
.serviceCard.default.upgradeOnly:hover,
.serviceCard.default.upgradeOnly:focus,
.serviceCard.default.upgradeOnly:active,
.serviceCard.default.upgradeOnly.active { outline-color: var(--secondary) !important; background: var(--secondary) !important; }
.stepInstructions h5,
.serviceCard:focus
.body h3,
.serviceCard.current:focus .body h3,
#planCardPromo p,
#planCardPromo .popover li,
#configureServicesCart .shoppingCartHead h5,
#nanoDetailedCart .detailedCartHead h5,
#nanoSetUpAccount .accountStepper .mat-step-label-selected,
.summaryChargesHead h5,
.scheduleInstallHead h5,
.promoCodeHead h5,
.setUpAutoPayHead h5,
#nanoReviewOrder .summaryCharges h5,
#nanoReviewOrder .billedPaymentHead h5,
#nanoReviewOrder .prepaidPaymentHead h5 { color: var(--secondary) !important; }
.configPlanBody .compLevelOne .panelContent .colDesc,
.reviewPlanBody .compLevelOne .panelContent .colDesc { background: var(--secondary-100) !important; color: var(--secondary) !important; }
#selectServiceContent .serviceCard .selected { outline-color: var(--secondary) !important; background: var(--secondary) !important; }

/* ----------------------------------------------------------------------------------------------------------------------
    Accent Brand Color Workaround (Default: #8EBD1E)
---------------------------------------------------------------------------------------------------------------------- */

/* account */
.accent,
.text-accent { color: var(--accent) !important; }
.bg-accent,
.badge-accent { background-color: var(--accent) !important; }

/* btn-accent */
.btn-accent { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.btn-accent:hover { background-color: var(--accent-600) !important; border-color: var(--accent-600) !important; }
.btn-check:focus + .btn-accent,
.btn-accent:focus { background-color: var(--accent-600) !important; border-color: var(--accent-700) !important; box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.5) !important; }
.btn-check:active + .btn-accent,
.btn-check:checked + .btn-accent,
.btn-accent.active,
.btn-accent:active,
.show > .btn-accent.dropdown-toggle { background-color: var(--accent-600) !important; border-color: var(--accent-700) !important; }
.btn-check:active + .btn-accent:focus,
.btn-check:checked + .btn-accent:focus,
.btn-accent.active:focus,
.btn-accent:active:focus,
.show > .btn-accent.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.5) !important; }
.btn-accent.disabled,
.btn-accent:disabled { background-color: var(--accent) !important; border-color: var(--accent) !important; }

/* btn-accent outline */
.btn-outline-accent { color: var(--accent) !important; border-color: var(--accent) !important; }
.btn-outline-accent:hover { background-color: var(--accent-600) !important; border-color: var(--accent-600) !important; }
.btn-check:focus + .btn-outline-accent,
.btn-outline-accent:focus { box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.5) !important; }
.btn-check:active + .btn-outline-accent,
.btn-check:checked + .btn-outline-accent,
.btn-outline-accent.active,
.btn-outline-accent.dropdown-toggle.show,
.btn-outline-accent:active { background-color: var(--accent-600) !important; border-color: var(--accent-700) !important; }
.btn-check:active + .btn-outline-accent:focus,
.btn-check:checked + .btn-outline-accent:focus,
.btn-outline-accent.active:focus,
.btn-outline-accent.dropdown-toggle.show:focus,
.btn-outline-accent:active:focus { box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.5) !important; }
.btn-outline-accent.disabled,
.btn-outline-accent:disabled { color: var(--accent) !important; }

/* misc accent elements */
.section-title { border-color: var(--accent) !important; }
.fa-home,
.fa-star,
.fa-credit-card-alt { color: var(--accent) !important; }
.quickLinksBtn,
#changeOrderFlow .cartButton .badge-accent, .serviceCard .defaultBanner { background: var(--accent) !important; }
.planCard:active,
.planCard.active { outline-color: var(--accent) !important; }
.configPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc,
.reviewPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--accent-100) !important; color: var(--accent) !important; }
.configPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc,
.reviewPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { color: var(--accent) !important; }

/* ----------------------------------------------------------------------------------------------------------------------
    Configure Service Tiers Workaround
---------------------------------------------------------------------------------------------------------------------- */

.configPlanBody .compLevelOne .panelContent .colDesc { background: var(--secondary-100) !important; color: var(--secondary) !important; }
.configPlanBody .compLevelTwo .panelContent .colDesc { background: var(--primary-100) !important; color: var(--primary) !important; }
.configPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--accent-100) !important; color: var(--accent) !important; }
.configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-300) !important; color: var(--gray-700) !important; }
.configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-200) !important; color: var(--gray-600) !important; }
.configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-100) !important; color: var(--gray-500) !important; }

@media (min-width: 768px) {
  .configPlanBody .compLevelOne .panelContent .colDesc { background: transparent !important; color: var(--secondary) !important; }
  .configPlanBody .compLevelTwo .panelContent .colDesc { background: transparent !important; color: var(--primary) !important; }
  .configPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent !important; color: var(--accent) !important; }
  .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent !important; color: var(--gray-700) !important; }
  .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent !important; color: var(--gray-600) !important; }
  .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent !important; color: var(--gray-500) !important; }
}

/* ----------------------------------------------------------------------------------------------------------------------
    Review Order Tiers Workaround
---------------------------------------------------------------------------------------------------------------------- */

.reviewPlanBody .compLevelOne .panelContent .colDesc { background: var(--secondary-100) !important; color: var(--secondary) !important; }
.reviewPlanBody .compLevelTwo .panelContent .colDesc { background: var(--primary-100) !important; color: var(--primary) !important; }
.reviewPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--accent-100) !important; color: var(--accent) !important; }
.reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-300) !important; color: var(--gray-700) !important; }
.reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-200) !important; color: var(--gray-600) !important; }
.reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-100) !important; color: var(--gray-500) !important; }

@media (min-width: 768px), print {
  .reviewPlanBody .compLevelOne .panelContent .colDesc { background: transparent !important; color: var(--secondary) !important; }
  .reviewPlanBody .compLevelTwo .panelContent .colDesc { background: transparent !important; color: var(--primary) !important; }
  .reviewPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent !important; color: var(--accent) !important; }
  .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent !important; color: var(--gray-700) !important; }
  .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent !important; color: var(--gray-600) !important; }
  .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent !important; color: var(--gray-500) !important; }
}

/* ----------------------------------------------------------------------------------------------------------------------
    Billed Product Color Workaround
---------------------------------------------------------------------------------------------------------------------- */

/* Default: Billed-200 */
.billedBkgdColor { background: var(--billed-200) !important; }

/* Default: Billed */
.billedTextColor { color: var(--billed) !important; }

/* ------------ */

/* Default: Billed */
.btn.billedToggleBkgdColor,
.btn.billedToggleBkgdColor:hover,
.btn.billedToggleBkgdColor:focus,
.btn.billedToggleBkgdColor.active,
.btn.billedToggleBkgdColor:active { border-color: var(--billed) !important; }

/* ------------ */

/* Default: White */
.btn.billedToggleBkgdColor { background: var(--white) !important; }

/* Default: Billed-100 */
.btn.billedToggleBkgdColor:hover { background: var(--billed-100) !important; }

/* Default: Billed-200 */
.btn.billedToggleBkgdColor:focus { background: var(--billed-200) !important; }

/* Default: Billed */
.btn.billedToggleBkgdColor.active,
.btn.billedToggleBkgdColor:active { background: var(--billed-200) !important; }

/* ------------ */

/* Default: Billed */
.btn.billedToggleTextColor { color: var(--billed) !important; }

/* Default: Billed */
.btn.billedToggleTextColor:hover { color: var(--billed) !important; }

/* Default: Billed */
.btn.billedToggleTextColor:focus { color: var(--billed) !important; }

/* Default: White */
.btn.billedToggleTextColor.active,
.btn.billedToggleTextColor:active { color: var(--billed) !important; }


/* ----------------------------------------------------------------------------------------------------------------------
    Prepaid Product Color Workaround
---------------------------------------------------------------------------------------------------------------------- */

/* Default: Prepaid-200 */
.prepaidBkgdColor { background: var(--prepaid-200) !important; }

/* Default: Prepaid */
.prepaidTextColor { color: var(--prepaid) !important; }

/* ------------ */

/* Default: Prepaid */
.btn.prepaidToggleBkgdColor,
.btn.prepaidToggleBkgdColor:hover,
.btn.prepaidToggleBkgdColor:focus,
.btn.prepaidToggleBkgdColor:active,
.btn.prepaidToggleBkgdColor.active { border-color: var(--prepaid) !important; }

/* ------------ */

/* Default: White */
.btn.prepaidToggleBkgdColor { background: var(--white) !important; }

/* Default: Prepaid-100 */
.btn.prepaidToggleBkgdColor:hover { background: var(--prepaid-100) !important; }

/* Default: Prepaid-200 */
.btn.prepaidToggleBkgdColor:focus { background: var(--prepaid-200) !important; }

/* Default: Prepaid */
.btn.prepaidToggleBkgdColor.active,
.btn.prepaidToggleBkgdColor:active { background: var(--prepaid-200) !important; }

/* ------------ */

/* Default: Prepaid */
.btn.prepaidToggleTextColor { color: var(--prepaid) !important; }

/* Default: Prepaid */
.btn.prepaidToggleTextColor:hover { color: var(--prepaid) !important; }

/* Default: Prepaid */
.btn.prepaidToggleTextColor:focus { color: var(--prepaid) !important; }

/* Default: White */
.btn.prepaidToggleTextColor.active,
.btn.prepaidToggleTextColor:active { color: var(--prepaid) !important; }

/* ----------------------------------------------------------------------------------------------------------------------
    Header Over-rides
---------------------------------------------------------------------------------------------------------------------- */

/* Default: White */
.headerBkgdColor { background-color: var(--header-bkgd-color) !important; }

/* Default: Primary */
.headerTextColor { color: var(--header-text-color); }

/* ----------------------------------------------------------------------------------------------------------------------
    Main Menu Over-rides
---------------------------------------------------------------------------------------------------------------------- */

/* Default: White */
.mainMenuItemBkgd,
.mainMenu .nav-item.dropdown.navbar-toggler { background-color: var(--mainmenu-bkgd-color) !important; }

/* Default: Primary */
.mainMenuItemBkgd:hover,
.mainMenu .nav-item.dropdown.navbar-toggler:hover { background-color: var(--mainmenu-bkgd-color-hover) !important; }

/* Default: Primary-600 */
.mainMenuItemBkgd:focus,
.mainMenu .nav-item.dropdown.navbar-toggler:focus { background-color: var(--mainmenu-bkgd-color-focus) !important; }

/* Default: Primary-700 */
.mainMenuItemBkgd:active,
.mainMenuItemBkgd.active,
.mainMenu .nav-item.dropdown.navbar-toggler:active,
.mainMenu .nav-item.dropdown.navbar-toggler.active { background-color: var(--mainmenu-bkgd-color-active) !important; }

/* ------------ */

/* Default: Primary */
.mainMenuItemText,
.mainMenuItemText > i,
.mainMenuItemBkgd .mainMenuItemText,
.mainMenuItemBkgd .mainMenuItemText > i,
.mainMenu .nav-item.dropdown.navbar-toggler,
.mainMenu .nav-item.dropdown.navbar-toggler > i { color: var(--mainmenu-text-color) !important; }

/* Default: White */
.mainMenuItemText:hover,
.mainMenuItemText:hover > i,
.mainMenuItemBkgd:hover .mainMenuItemText,
.mainMenuItemBkgd:hover .mainMenuItemText > i,
.mainMenu .nav-item.dropdown.navbar-toggler:hover,
.mainMenu .nav-item.dropdown.navbar-toggler:hover > i { color: var(--mainmenu-text-color-hover) !important; }

/* Default: White */
.mainMenuItemText:focus,
.mainMenuItemText:focus > i,
.mainMenuItemBkgd:focus .mainMenuItemText,
.mainMenuItemBkgd:focus .mainMenuItemText > i,
.mainMenu .nav-item.dropdown.navbar-toggler:focus,
.mainMenu .nav-item.dropdown.navbar-toggler:focus > i { color: var(--mainmenu-text-color-focus) !important; }

/* Default: White */
.mainMenuItemText:active,
.mainMenuItemText:active > i,
.mainMenuItemText.active,
.mainMenuItemText.active > i,
.mainMenuItemBkgd:active .mainMenuItemText,
.mainMenuItemBkgd:active .mainMenuItemText > i,
.mainMenuItemBkgd.active .mainMenuItemText,
.mainMenuItemBkgd.active .mainMenuItemText > i,
.mainMenu .nav-item.dropdown.navbar-toggler:active,
.mainMenu .nav-item.dropdown.navbar-toggler:active > i,
.mainMenu .nav-item.dropdown.navbar-toggler.active,
.mainMenu .nav-item.dropdown.navbar-toggler.active > i { color: var(--mainmenu-text-color-active) !important; }

/* ----------------------------------------------------------------------------------------------------------------------
    Sub Menu Over-rides
---------------------------------------------------------------------------------------------------------------------- */

/* Default: White */
.subMenuItemBkgd,
.dropdown-item.subMenuItemBkgd { background-color: var(--submenu-bkgd-color) !important; }

/* Default: Primary */
.subMenuItemBkgd:hover,
.dropdown-item.subMenuItemBkgd:hover { background-color: var(--submenu-bkgd-color-hover) !important; }

/* Default: Primary-600 */
.subMenuItemBkgd:focus,
.dropdown-item.subMenuItemBkgd:focus { background-color: var(--submenu-bkgd-color-focus) !important; }

/* Default: Primary-700 */
.subMenuItemBkgd:active,
.subMenuItemBkgd.active,
.dropdown-item.subMenuItemBkgd:active,
.dropdown-item.subMenuItemBkgd.active { background-color: var(--submenu-bkgd-color-active) !important; }

/* ------------ */

/* Default: Primary */
.subMenuItemText,
.subMenuItemText > i,
.dropdown-item.subMenuItemText,
.dropdown-item.subMenuItemText > i { color: var(--submenu-text-color) !important; }

/* Default: White */
.subMenuItemText:hover,
.subMenuItemText:hover > i,
.dropdown-item.subMenuItemText:hover,
.dropdown-item.subMenuItemText:hover > i { color: var(--submenu-text-color-hover) !important; }

/* Default: White */
.subMenuItemText:focus,
.subMenuItemText:focus > i,
.dropdown-item.subMenuItemText:focus,
.dropdown-item.subMenuItemText:focus > i { color: var(--submenu-text-color-focus) !important; }

/* Default: White */
.subMenuItemText:active,
.subMenuItemText:active > i,
.subMenuItemText.active,
.subMenuItemText.active > i,
.dropdown-item.subMenuItemText:active,
.dropdown-item.subMenuItemText:active > i,
.dropdown-item.subMenuItemText.active,
.dropdown-item.subMenuItemText.active > i { color: var(--submenu-text-color-active) !important; }

/* ----------------------------------------------------------------------------------------------------------------------
    Footer Over-rides
---------------------------------------------------------------------------------------------------------------------- */

/* Default: Secondary */
.footerBkgdColor { background-color: var(--footer-bkgd-color) !important; }

/* Default: White */
.footerTextColor { color: var(--footer-text-color); }

/* ----------------------------------------------------------------------------------------------------------------------
    Foot Menu Over-rides
---------------------------------------------------------------------------------------------------------------------- */

/* Default: Secondary */
.footerMenuItemBackgroundColor { color: var(--footmenu-bkgd-color) !important; }

/* Default: Primary */
.footerMenuItemBackgroundColor:hover { color: var(--footmenu-bkgd-color-hover) !important; }

/* Default: Primary-600 */
.footerMenuItemBackgroundColor:focus { color: var(--footmenu-bkgd-color-focus) !important; }

/* Default: Primary-700 */
.footerMenuItemBackgroundColor:active,
.footerMenuItemBackgroundColor.active { color: var(--footmenu-bkgd-color-active) !important; }

/* ------------ */

/* Default: White */
.footerMenuItemTextColor { color: var(--footmenu-text-color) !important; }

/* Default: White */
.footerMenuItemTextColor:hover { color: var(--footmenu-text-color-hover) !important; }

/* Default: White */
.footerMenuItemTextColor:focus { color: var(--footmenu-text-color-focus) !important; }

/* Default: White */
.footerMenuItemTextColor:active,
.footerMenuItemTextColor.active { color: var(--footmenu-text-color-active) !important; }

/* ----------------------------------------------------------------------------------------------------------------------
    Sign-in Background Over-rides
---------------------------------------------------------------------------------------------------------------------- */

/* Default: Center Top */
.base-component-wrapper.identity-server-wrapper { background-position: var(--bkgd-image-position) !important; }

/* ----------------------------------------------------------------------------------------------------------------------
    Steps Wrapper Over-rides
---------------------------------------------------------------------------------------------------------------------- */

/* Defaults: Primary & Primary */
.steps-wrapper .step-current .step-number { color: var(--primary); border-color: var(--primary); }

/* Defaults: Secondary & Secondary */
.steps-wrapper .step-done .step-number { background: var(--secondary); border-color: var(--secondary); }

/* Defaults: Secondary & Primary */
.steps-wrapper .line-current { background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); }

/* ----------------------------------------------------------------------------------------------------------------------
    Marketing Carousel Over-rides
---------------------------------------------------------------------------------------------------------------------- */

/* Defaults: #003A5C & #003A5C */
.carousel { background-color: var(--carousel-bkgd-color) !important; border-color: var(--carousel-border-color) !important; }

/* Default: #8EBD1E */
.carousel-caption h1 { color: var(--carousel-heading-color) !important; }

/* Default: #FFFFFF */
.carousel-caption h6 { color: var(--carousel-caption-color) !important; }