@charset "utf-8";

:root {
  /* core */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --pink: #c90076;
  --red: #b80606;
  --orange: #f58025;
  --yellow: #ffc425;
  --green: #0b9c36;
  --teal: #15dcc2;
  --cyan: #81b4e1;
  --blue: #0079c1;
  --indigo: #143d66;
  --purple: #6a329f;
  --beige: #e2d0bd;
  --white: #ffffff;
  --white-rgb: 255, 255, 255;
  --light: #e9ecef;
  --light-rgb: 233, 236, 239;
  --dark: #343a40;
  --dark-rgb: 52, 58, 64;
  --dark-gray: #212529;
  --dark-gray-rgb: 33, 37, 41;
  --black: #000000;
  --black-rgb: 0, 0, 0;
  /* gray */
  --gray: #adb5bd;
  --gray-rgb: 173, 181, 189;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef; /*light*/
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd; /*gray*/
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40; /*dark*/
  --gray-900: #212529;
  /* success */
  --success: #0b9c36;
  --success-rgb: 11, 156, 54;
  --success-100: #ceebd6;
  --success-200: #9dd7ae;
  --success-300: #6cc386;
  --success-400: #3baf5e;
  --success-500: #0b9c35;
  --success-600: #087c2b;
  --success-700: #065d20;
  --success-800: #043e15;
  --success-900: #021f0a;
  /* info */
  --info: #81b4e1;
  --info-rgb: 129, 180, 225;
  --info-100: #e5f0f9;
  --info-200: #cce1f3;
  --info-300: #b3d2ed;
  --info-400: #9ac3e7;
  --info-500: #81b4e1;
  --info-600: #6790b4;
  --info-700: #4d6c87;
  --info-800: #33485a;
  --info-900: #19242d;
  /* warning */
  --warning: #ffc425;
  --warning-rgb: 255, 196, 37;
  --warning-100: #fff3d3;
  --warning-200: #ffe7a7;
  --warning-300: #ffdb7c;
  --warning-400: #ffcf50;
  --warning-500: #ffc425;
  --warning-600: #cc9c1d;
  --warning-700: #997516;
  --warning-800: #664e0e;
  --warning-900: #332707;
  /* danger */
  --danger: #b80606;
  --danger-rgb: 184, 6, 6;
  --danger-100: #f0cdcd;
  --danger-200: #e29b9b;
  --danger-300: #d46969;
  --danger-400: #c63737;
  --danger-500: #b80606; 
  --danger-600: #930404; 
  --danger-700: #6e0303;
  --danger-800: #490202; 
  --danger-900: #240101;
  /* primary */
  --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 */
  --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 */
  --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 */
  --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 */
  --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 */
  --body-bkgd-color: #ffffff;
  --body-text-color: #495057;
  --gray-text: #495057;
  /* background image */
  --bkgd-image-position: center top;
  /* carousel */
  --carousel-bkgd-color: #ffffff;
  --carousel-border-color: #ffffff;
  --carousel-heading-color: #f58025;
  --carousel-caption-color: #ffffff;
  /* header */
  --header-bkgd-color: #ffffff;
  --header-text-color: #003A5C;
  /* mainmenu */
  --mainmenu-bkgd-color: #ffffff;
  --mainmenu-bkgd-color-hover: #003A5C;
  --mainmenu-bkgd-color-focus: #006199;
  --mainmenu-bkgd-color-active: #003A5C;
  --mainmenu-text-color: #003A5C;
  --mainmenu-text-color-hover: #ffffff;
  --mainmenu-text-color-focus: #ffffff;
  --mainmenu-text-color-active: #ffffff;
  /* submenu */
  --submenu-bkgd-color: #ffffff;
  --submenu-bkgd-color-hover: #003A5C;
  --submenu-bkgd-color-focus: #006199;
  --submenu-bkgd-color-active: #003A5C;
  --submenu-text-color: #003A5C;
  --submenu-text-color-hover: #ffffff;
  --submenu-text-color-focus: #ffffff;
  --submenu-text-color-active: #ffffff;
  /* footer */
  --footer-bkgd-color: #003A5C;
  --footer-text-color: #ffffff;
  /* footmenu */
  --footmenu-bkgd-color: #003A5C;
  --footmenu-bkgd-color-hover: #0091E6;
  --footmenu-bkgd-color-focus: #006199;
  --footmenu-bkgd-color-active: #003A5C;
  --footmenu-text-color: #ffffff;
  --footmenu-text-color-hover: #ffffff;
  --footmenu-text-color-focus: #ffffff;
  --footmenu-text-color-active: #ffffff;
}

/* Global ------------------------------------------------------------------- */

html, body { background: var(--body-bkgd-color); color: var(--body-text-color); font-family: 'Roboto', sans-serif; font-size: .875rem; letter-spacing: .0375rem !important; font-style: normal !important; font-stretch: normal !important; line-height: 1.5; }

.container-fluid { width: 100%; padding-right: 1rem; padding-left: 1rem; margin-right: auto; margin-left: auto; }

.row { padding: 0; margin-left: 0px !important; margin-right: 0px !important; margin-top: 0px; margin-bottom: 0px; }

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { padding: 0 .75rem; }

.content-panel { margin-bottom: 1rem; }

h1, h2, h3, h4, h5, h6, p { font-weight: 400; font-family: 'Roboto', sans-serif !important; color: var(--gray-text); }
h1, h2, h3 { margin: 0; line-height: 1.5; }
h4, h5, h6, p { margin-bottom: 1rem; line-height: 1.25; }

mark, .mark { background: var(--danger-300) !important; }
b, strong, .bold, .strong { font-weight: 700 !important; }
em, .italic { font-style: italic !important; }

.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-uppercase { text-transform: uppercase !important; }

.section-title { font-size: 1.125rem; border-bottom: .125rem solid var(--accent); padding-bottom: .5rem; color: var(--gray-text) !important; }

.section-intro::before { font-family: 'Font Awesome 6 Pro Solid'; content: '\f05a'; font-size: 1rem; font-style: normal !important; padding-right: .5rem; color: var(--primary); position: relative; top: .0625rem; }

@media (min-width: 768px) {
  .section-title { font-size: 1.5rem; }
}

.modal-title { font-weight: bold !important; text-align: center; margin-bottom: .5rem; }
.card-title { font-size: 1.75rem; font-weight: bold; margin-bottom: .75rem; text-align: center; }
.section-subtitle { color: var(--gray-text) !important; }
.product-subtitle { padding: .325rem 1rem .25rem; font-weight: bold; text-transform: uppercase; border-radius: .25rem; }
.example { min-height: 4.5rem; }
.subtext { color: var(--gray-600); text-transform: none; }
.noData { text-align: center; color: var(--gray-600); font-size: 1rem; margin: 1rem; font-style: oblique; }
.pointer { cursor: pointer; }
.highlight { background: var(--warning-300) !important; }
.disabled { cursor: none; opacity: .5 !important; }
.required::after { content: '*'; font-family: inherit; font-size: inherit; color: var(--danger); padding-left: .25rem; }
  
/* Images ------------------------------------------------------------------- */

.paymentMethodAid { max-width: 100%; max-height: 9rem; }
.paymentMethodImage { width: 2.375rem; height: 1.4375rem; border-radius: .25rem; }

/* Base Components ---------------------------------------------------------- */

.base-component-wrapper.identity-server-wrapper { min-height: calc(100vh - 8.5rem); background-size: cover; background-position: var(--bkgd-image-position); overflow: hidden; }
.base-component-wrapper.unauth-customer-portal-wrapper { min-height: calc(100vh - 8.5rem); padding:0; overflow: hidden; }
.base-component-wrapper.auth-customer-portal-wrapper { min-height: calc(100vh - 11.6125rem); padding: 0; overflow: hidden; }

@media (min-width: 992px) {
  .base-component-wrapper.identity-server-wrapper { min-height: calc(100vh - 8rem); }
  .base-component-wrapper.unauth-customer-portal-wrapper { min-height: calc(100vh - 8rem); }
  .base-component-wrapper.auth-customer-portal-wrapper { min-height: calc(100vh - 12.25rem); }
}

.base-component-wrapper.unauth-customer-portal-wrapper .steps-wrapper { padding-top: 1.25rem !important; }

/* PortalSTS ---------------------------------------------------------------- */

#private-policy-view { padding-left: 0; }
#terms-conditions-text.message-scrollable { height: calc(100vh - 22.1875rem) !important; }

/* Message Modals ----------------------------------------------------------- */

.message { text-align: center; margin: 0 0 .75rem 0; font-size: .875rem !important; line-height: 1.5; }
.message-icon { font-family: 'Font Awesome 6 Pro Solid'; display: block; align-self: center; font-size: 4rem; opacity: .5; margin: -.5rem auto; font-style: normal !important; }
.message-icon-danger::after { content: '\f06a'; color: var(--danger) !important; }
.message-icon-success::after { content: '\f058'; color: var(--success) !important; }
.message-icon-info::after { content: '\f05a'; color: var(--info) !important; }
.message-icon-warning::after { content: '\f071'; color: var(--warning) !important; }
.message-scrollable { overflow-y: auto; height: calc(100vh - 18.75rem) !important; text-align: left; margin-bottom: 1rem; font-size: .875rem !important; }

/* Horizontal Rules --------------------------------------------------------- */

hr,
.separator { height: .0625rem !important; background: var(--gray-400) !important; border: 0 !important; margin: 1rem 0 !important; }

/* Alert Banners ------------------------------------------------------------ */

.alert { padding: .325rem .75rem .375rem; font-size: .875rem; margin-bottom: .5rem; }
.alert-success { background: var(--success-100); border: .0625rem solid var(--success-200); color: var(--success-800); }
.alert-warning { background: var(--warning-100); border: .0625rem solid var(--warning-200); color: var(--warning-800); }
.alert-danger { background: var(--danger-100); border: .0625rem solid var(--danger-200); color: var(--danger-800); }
.alert-info { background: var(--info-100); border: .0625rem solid var(--info-200); color: var(--info-800); }
.alert-icon { font-family: 'Font Awesome 6 Pro Solid'; display: inline-flex; justify-content: center; align-content: flex-start; font-size: 1rem; margin-right: .5rem; font-style: normal !important; position: relative; top: .075rem; }
.icon-success::after { content: '\f058'; color: var(--success) !important; }
.icon-warning::after { content: '\f071'; color: var(--warning) !important; }
.icon-danger::after { content: '\f06a'; color: var(--danger) !important; }
.icon-info::after { content: '\f05a'; color: var(--info) !important; }
.alert ul { padding-left: 20px; margin: 0; }
.alert ul li { list-style-type: disc; margin-left: 20px; }

/* Special Unordered Lists -------------------------------------------------- */

#modal-terms-text ul, 
#terms-conditions-text ul, 
#termsOfServiceText ul, 
#modal-privacypolicy-text ul, 
#privacy-policy-text ul, 
#collapsePrivacyPolicy ul { list-style-type: disc !important; padding: 1rem !important; }

/* Special Heading & Paragraph Tags ----------------------------------------- */

#modal-terms-text h1,
#modal-terms-text h2,
#modal-terms-text h3,
#modal-terms-text h4,
#modal-terms-text h5,
#modal-terms-text h6,
#modal-terms-text p,
#terms-conditions-text h1,
#terms-conditions-text h2,
#terms-conditions-text h3,
#terms-conditions-text h4,
#terms-conditions-text h5,
#terms-conditions-text h6,
#terms-conditions-text p,
#termsOfServiceText h1,
#termsOfServiceText h2,
#termsOfServiceText h3,
#termsOfServiceText h4,
#termsOfServiceText h5,
#termsOfServiceText h6,
#termsOfServiceText p,
#termsOfServiceTextStep2 h1,
#termsOfServiceTextStep2 h2,
#termsOfServiceTextStep2 h3,
#termsOfServiceTextStep2 h4,
#termsOfServiceTextStep2 h5,
#termsOfServiceTextStep2 h6,
#termsOfServiceTextStep2 p,
#modal-privacypolicy-text h1,
#modal-privacypolicy-text h2,
#modal-privacypolicy-text h3,
#modal-privacypolicy-text h4,
#modal-privacypolicy-text h5,
#modal-privacypolicy-text h6,
#modal-privacypolicy-text p,
#privacy-policy-text h1,
#privacy-policy-text h2,
#privacy-policy-text h3,
#privacy-policy-text h4,
#privacy-policy-text h5,
#privacy-policy-text h6,
#privacy-policy-text p,
#collapsePrivacyPolicy h1,
#collapsePrivacyPolicy h2,
#collapsePrivacyPolicy h3,
#collapsePrivacyPolicy h4,
#collapsePrivacyPolicy h5,
#collapsePrivacyPolicy h6,
#collapsePrivacyPolicy p {
  width: 100% !important;
}

/* Tooltips ----------------------------------------------------------------- */

.tooltip { text-align: center; font-size: .75rem; }
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--dark-gray); }
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--dark-gray); }
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--dark-gray); }
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--dark-gray); }
.tooltip-inner { background-color: var(--dark-gray); }

/* Popovers ----------------------------------------------------------------- */

.popover { font-family: 'Roboto', sans-serif !important; font-size: .75rem !important; z-index: 1080 !important; max-width: 100%; }
.popover-body { padding: .125rem .75rem !important; }

@media (max-width: 576px) {
  .popover { width: auto; }
 }

/* Icons -------------------------------------------------------------------- */

a > i { color: var(--primary); }
i { font-style: normal; }

.fa-circle-exclamation,
.fa-trash { color: var(--danger); }
.fa-triangle-exclamation { color: var(--warning); }
.fa-circle-check,
.fa-plus { color: var(--success); }
.fa-pencil,
.fa-chevron-down,
.fa-chevron-up { color: var(--primary); }
.fa-home,
.fa-star,
.fa-credit-card-alt { color: var(--accent); }
.fa-circle-info { color: var(--primary); }

/* Case Statuses ------------------------------------------------------------ */

.case-icon { font-family: 'Font Awesome 6 Pro Solid'; font-size: .75rem; margin-right: .5rem; font-style: normal !important; }
.icon-opened::before { content: '\f07c'; color: var(--primary) !important; }
.icon-pending::before { content: '\f021'; color: var(--warning) !important; }
.icon-resolved::before { content: '\f058'; color: var(--success) !important; }

/* Loading Spinner ---------------------------------------------------------- */

.spinner-wrapper { background-image: url(../img/chr-loading-overlay.jpg); background-repeat: repeat; position: relative !important; border-radius: .25rem; z-index: 998; min-height: 3rem; height: 100%; min-width: 3rem; width: 100%; }
.spinner-border { z-index: 999; margin: 1rem; top: calc(50% - 1rem); }
.spinner-border-sm { margin: 0; top: 0 !important; margin-left: 0.5rem; color: var(--white); }
.btnSpinner { width: .875rem !important; height: .875rem !important; margin: 0 .25rem 0 .5rem !important; }

#confirm-delete-modal .spinner-wrapper { height: 6rem; }

/* UI Modals ---------------------------------------------------------------- */

#modalPopup,
.modal-open { padding: 0 !important; }
.modal-dialog { margin-left: .5rem !important; margin-right: .5rem !important; }
.modal-content { border-radius: .25rem !important; }
.modal-body { padding: 1rem; }
.modal-full { max-width: calc(100% - 3.625rem); }

.modal .close { position: absolute; top: -1.5rem !important; right: -1.5rem !important; min-height: 2.625rem; min-width: 2.625rem; text-align: center; z-index: 9999 !important; outline: 0; border: 0; }

@media (min-width: 576px) {
  .modal-dialog { margin-left: auto !important; margin-right: auto !important; }
  .modal-body { padding: 1.5rem; }
  .modal-sm { min-width: 18.75rem !important; }
  .modal-xl { width: calc(100% - 3.625rem); max-width: calc(75rem - 3.625rem) !important; }
}

@media (min-width: 992px) {
  .modal-dialog { top: 3rem; }
}

/* Form Groups -------------------------------------------------------------- */

.form-group { margin-bottom: .25rem; padding-left: .25rem; padding-right: .25rem; }

/* Form Labels -------------------------------------------------------------- */

label { font-size: .75rem; margin-bottom: 0.125rem !important; }

/* Form Controls ------------------------------------------------------------ */

input,
textarea { font-size: 1rem; }

.form-control { min-height: 2.625rem; min-width: 2.625rem; padding: .625rem .75rem .675rem; font-size: 1rem; border: .0625rem solid var(--gray-400); }
.form-control:disabled,
.form-control.disabled,
.form-control[readonly] { background-color: var(--gray-100); opacity: 1; cursor: none; }

/* Form Selects ------------------------------------------------------------- */

select { color: var(--gray-text); font-size: 1rem; font-family: 'Roboto', sans-serif !important; }
select::after { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; content: "\f0d7" !important; font-family: 'Font Awesome 6 Pro Solid' !important; }

select option { color: var(--gray-text); font-style: normal; font-size: 1rem; padding: .625rem .5rem .675rem; font-family: 'Roboto', sans-serif !important; }
select option:first-child { color: var(--gray); font-style: italic; font-family: 'Roboto', sans-serif !important; }
select option[disabled]:first-child { display: none; }

.form-select { display: inline-block; width: 100%; min-height: 2.625rem; background: var(--white); padding: .375rem 1.75rem .375rem .5rem; font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--gray-text); vertical-align: middle; border: .0625rem solid var(--gray-400); border-radius: .25rem; font-family: 'Roboto', sans-serif !important; }
.form-select:focus { background: var(--white); border: .0625rem solid var(--primary-200); outline: 0; box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .20); font-family: 'Roboto', sans-serif !important; }

/* Form Checks -------------------------------------------------------------- */

.form-check { min-height: 2.625rem; min-width: 2.625rem; padding: .625rem .75rem .675rem 1.5rem; }
.form-check.custom-control { padding: .25rem .75rem .25rem 2.125rem; background: var(--white) !important; border: .0625rem solid var(--gray-200) !important; border-radius: .25rem; color: var(--gray-text) !important; min-height: 2.625rem !important; height: auto !important; margin-bottom: .25rem !important; line-height: 1.4rem; }
.form-check label,
.form-check-label,
.custom-control-label { font-size: 1rem; padding-top: .325rem; padding-left: .5rem; }
.form-check input,
.form-check-input,
.custom-control-input { width: 1.5rem; height: 1.5rem; margin-top: .25rem; margin-left: -1.5rem; font-size: 1rem; position: absolute; }

/* Valid Feedback */
.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label { color: var(--success) !important; }

/* Invalid Feedback */
.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label { color: var(--danger) !important; }

/* Form Text ---------------------------------------------------------------- */

.form-text { font-size: .75rem !important; margin-top: .125rem !important; line-height: 1rem !important; color: var(--gray-500); }
a.form-text,
.form-text-link { float: right; text-align: right; text-decoration: underline !important; color: var(--primary) !important; font-size: .75rem !important; }
a.form-text:hover,
.form-text-link:hover { color: var(--primary-600) !important; }
a.form-text:focus,
.form-text-link:focus { color: var(--primary-700) !important; }
.select-feedback { padding-right: 1.5rem }

/* Valid Feedback */
.was-validated .form-control:valid,
.form-control.is-valid { background-image: url(../img/svg/icon-success.svg); background-size: .875rem; border-right: .0625rem solid var(--success) !important; border-right-color: var(--success) !important; }
.was-validated select.form-control:valid,
select.form-control.is-valid { background-image: url(../img/svg/icon-success.svg); background-size: .875rem; background-repeat: no-repeat; border-right: .0625rem solid var(--success) !important; padding-right: 1.5rem; }
.was-validated select.form-select:valid,
select.form-select.is-valid { background-image: url(../img/svg/icon-success.svg); background-size: .875rem; background-repeat: no-repeat; border: .0625rem solid var(--success) !important; padding-right: 1.5rem; }
select.form-control.is-valid,
select.form-select.is-valid { background-position: right calc(.375em + .875rem) center; }
.input-group .form-control.is-valid { border-right: .0625rem solid var(--success) !important; }
.valid-feedback { font-size: .75rem !important; margin-top: .0625rem; color: var(--success); padding: 0; }

/* Invalid Feedback */
.was-validated .form-control:invalid,
.form-control.is-invalid { background-image: url(../img/svg/icon-danger.svg); background-size: .875rem; border-right: .0625rem solid var(--danger) !important; border-right-color:  var(--danger) !important;}
.was-validated select.form-control:invalid,
select.form-control.is-invalid { background-image: url(../img/svg/icon-danger.svg); background-size: .875rem; background-repeat: no-repeat; border-right: .0625rem solid var(--danger) !important; padding-right: 1.5rem; }
.was-validated select.form-select:invalid,
select.form-select.is-invalid { background-image: url(../img/svg/icon-danger.svg); background-size: .875rem; background-repeat: no-repeat; border: .0625rem solid var(--danger) !important; padding-right: 1.5rem; }
select.form-control.is-invalid,
select.form-select.is-invalid { background-position: right calc(.375em + .875rem) center; }
.input-group .form-control.is-invalid { border-right: .0625rem solid var(--danger) !important; }
.invalid-feedback { font-size: .75rem !important; margin-top: .0625rem; color: var(--danger); padding: 0; }

/* Input Groups ------------------------------------------------------------- */

.input-group > .custom-select:not(:last-child),
.input-group > .form-control:not(:last-child) { height: 2.625rem; padding: .625rem .75rem .675rem; border-right: .0625rem solid transparent !important; }
.input-group > .custom-select:not(:first-child),
.input-group > .form-control:not(:first-child) { border-top-left-radius: .2rem; border-bottom-left-radius: .2rem; height: 2.625rem; padding: .625rem .75rem .675rem; }
.input-group > .input-group-append:not(:last-child) > .input-group-text { border-top-right-radius: .2rem; border-bottom-right-radius: .2rem; height: 2.625rem; padding: .625rem .75rem .675rem; }
.input-group-append { height: 2.625rem; width: 2.625rem; padding: .5rem .75rem !important; font-size: 1rem; border: .0625rem solid var(--gray-400); border-left: 0; border-top-right-radius: .2rem; border-bottom-right-radius: .2rem; align-items: center; justify-content: center; }
.input-group-append i { font-size: 1rem !important; color: var(--gray-text); margin: 0 !important; padding: 0 !important; }
:disabled .input-group-append,
.disabled .input-group-append { background: var(--gray-100); cursor: none; }
:disabled .input-group-append i,
.disabled .input-group-append i { color: var(--gray-text); opacity: .5; }
.input-group input { border-right: 0 !important; }
.input-group-text { display: block; font-family: 'Font Awesome 6 Pro Solid'; font-size: 1rem; background: var(--white); border: 0 !important; padding: .2rem 0; vertical-align: middle; text-align: center; }
.input-group-text i { font-size: 1rem !important; color: var(--gray); margin: 0 !important; padding: 0 !important; }
:disabled .input-group-text,
.disabled .input-group-text { background: var(--gray-100); cursor: none; }
:disabled .input-group-text i,
.disabled .input-group-text i { background: var(--gray); }

/* Date Picker -------------------------------------------------------------- */

.input-datepicker { max-width: 12.5rem; border-top-left-radius: .2rem; border-bottom-left-radius: .2rem; }
.input-datepicker .pricingDateWidth { width: 7rem !important; }
.input-datepicker .dropdown-menu.show { transform: translate(0px, 42px) !important; }
.input-datepicker > .input-group-append { border-top-right-radius: .2rem; border-bottom-right-radius: .2rem; border: 1px solid var(--gray-400); background: var(--white); line-height: 1.2; }
.input-datepicker > .input-group-append > .input-group-text { border: 0; }

.ui-datepicker-trigger { height: 1rem; cursor: pointer !important; }
.ngb-dp-arrow { width: 2.625rem !important; height: 2.625rem !important; }
.ngb-dp-arrow-btn { padding: 0 !important; margin: 0 !important; }
.ngb-dp-navigation-select > .custom-select { height: 2.625rem; font-size: 1rem; font-family: 'Roboto', sans-serif !important; }
.ngb-dp-weekday { color: var(--dark) !important; font-style: normal !important; font-weight: bold !important; text-transform: uppercase; width: 2.375rem !important; height: 2.375rem !important; padding: .25rem 0 !important; }
.ngb-dp-month:first-child .ngb-dp-week { padding-left: .125rem !important; }
.ngb-dp-month:last-child .ngb-dp-week { padding-right: .125rem !important; }
.ngb-dp-month .ngb-dp-week .ngb-dp-day { width: 2.375rem !important; height: 2.375rem !important; }
.ngb-dp-month .ngb-dp-week .ngb-dp-day .btn-light { width: 90%; height: 90%; margin: .125rem auto; color: var(--primary) !important; }
.ngb-dp-month .ngb-dp-week .ngb-dp-day .btn-light.bg-primary { background: var(--primary) !important; color: var(--white) !important; }

/* Dropdowns ---------------------------------------------------------------- */

.dropdown-toggle { height: 1.875rem; font-size: .875rem; line-height: 1.5; font-weight: 400; cursor: pointer; border-radius: .25rem !important; }
.dropdown-toggle::after { margin-left: .75rem; }
.dropdown-item { font-size: .875rem; text-transform: none !important; }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--gray-100); }
.dropdown-item.active,
.dropdown-item:active { background: var(--primary); color: var(--white) !important; }

/* Badges ------------------------------------------------------------------- */

.badge { font-weight: 700 !important; font-size: .75rem !important; }

/* Tabs --------------------------------------------------------------------- */

.nav-tabs .nav-link { color: var(--primary); border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin: 0 !important; font-size: 1rem; padding: .625rem .75rem .675rem; }
.nav-tabs .nav-link:hover { color: var(--primary-600); }
.nav-tabs .nav-link:focus { color: var(--primary-700); }
.nav-tabs .nav-link:active,
.nav-tabs .nav-link.active { color: var(--gray-text); border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin: 0 !important; }
.tab-pane { padding: 0; }

/* Anchors & Buttons -------------------------------------------------------- */

a { cursor: pointer; text-decoration: underline; color: var(--primary); }
a:hover { color: var(--primary-600); }
a:focus { color: var(--primary-700); }

a.btn-link,
a.btn-link:not([href]):not([tabindex]),
button.btn-link { text-decoration: underline !important; color: var(--primary) !important; }
a.btn-link:hover,
a.btn-link:not([href]):not([tabindex]):hover,
button.btn-link:hover { text-decoration: underline !important; color: var(--primary-600) !important; }
a.btn-link:focus,
a.btn-link:not([href]):not([tabindex]):focus,
button.btn-link:focus { text-decoration: underline !important; color: var(--primary-700) !important; }

button, .btn { letter-spacing: .0625rem; text-transform: uppercase !important; font-weight: 500; cursor: pointer; line-height: 1.5; font-size: .875rem; border-radius: .25rem; border: .125rem solid transparent; text-align: center; vertical-align: middle; align-content: center; min-height: 2.625rem; min-width: 2.625rem; padding: .375rem .75rem; display: inline-block; color: var(--gray-text); text-decoration: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: transparent; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; box-sizing: border-box; }

button > i, .btn > i { font-size: .875rem; color: var(--white); box-sizing: border-box; }

/* links */
a.btn.btn-link { text-decoration: none !important; }

.btn-link { font-weight: 400; color: var(--primary); text-decoration: underline !important; }
.btn-link:hover { color: var(--primary-600); background: var(--gray-100); }
.btn-link:focus { color: var(--primary-700); background: var(--gray-200); }
.btn-link.disabled, .btn-link:disabled { color: var(--primary); opacity: 0.5; }

.btn.btn-cancel { font-weight: 400; color: var(--primary); text-decoration: none !important;}
.btn.btn-cancel:hover { color: var(--primary-600); background: var(--gray-100); }
.btn.btn-cancel:focus { color: var(--primary-700); background: var(--gray-200); }
.btn.btn-cancel.disabled, .btn-link:disabled { color: var(--primary); opacity: 0.5; }

.consumer-label-link { display: block; font-size: .75rem !important; line-height: 1.5 !important; color: var(--primary) !important; text-decoration: underline !important; text-transform: uppercase !important; font-weight: 400 !important; width: 6.5rem; text-align: center; }
.consumer-label-link:hover { color: var(--primary-600); background: var(--gray-100); }
.consumer-label-link:focus { color: var(--primary-700); background: var(--gray-200); }
.consumer-label-link.disabled,
.consumer-label-link:disabled { color: var(--primary); opacity: 0.5; }

.collapse-link, .collapse-link > i { font-size: 0.875em !important; text-transform: uppercase !important; }

/* action buttons */
.btn-add,
.btn-remove,
.btn-edit,
.btn-download,
.btn-home,
.btn-save,
.btn-clear { padding: .125rem .25rem; text-align: center; vertical-align: middle; }

/* action button icons */
.btn-add::after { content: '\e59e'; font-family: 'Font Awesome 6 Pro Solid'; color: var(--success); font-size: 1.5rem; }
.btn-remove::after { content: '\f2ed'; font-family: 'Font Awesome 6 Pro Solid'; color: var(--danger); font-size: 1.5rem; }
.btn-edit::after { content: '\f303'; font-family: 'Font Awesome 6 Pro Solid'; color: var(--primary); font-size: 1.5rem; }
.btn-download::after { content: '\f0ed'; font-family: 'Font Awesome 6 Pro Solid'; color: var(--primary); font-size: 1.5rem; }
.btn-home::after { content: '\f015'; font-family: 'Font Awesome 6 Pro Solid'; color: var(--primary); font-size: 1.5rem; }
.btn-save::after { content: '\f0c7'; font-family: 'Font Awesome 6 Pro Solid'; color: var(--primary); font-size: 1.5rem; }
.btn-clear::after { content: '\f12d'; font-family: 'Font Awesome 6 Pro Solid'; color: var(--primary); font-size: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

.btn:hover { color: var(--gray-text); }
.btn-check:focus + .btn,
.btn:focus { outline: 0; box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), .25); }
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn,
fieldset.disabled .btn { pointer-events: none; opacity: 0.5; cursor: none; }

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

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

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

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

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

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

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

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

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

/* primary outline */
.btn-outline-primary { color: var(--primary); border-color: var(--primary); background: var(--white); }
.btn-outline-primary:hover { color: var(--white); background-color: var(--primary-600); border-color: var(--primary-600); }
.btn-check:focus + .btn-outline-primary, 
.btn-outline-primary:focus { box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5); }
.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 { color: var(--white); background-color: var(--primary-600); border-color: var(--primary-700); }
.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); }
.btn-outline-primary.disabled, 
.btn-outline-primary:disabled { color: var(--primary); background-color: transparent; }

/* secondary outline */
.btn-outline-secondary { color: var(--secondary); border-color: var(--secondary); background: var(--white); }
.btn-outline-secondary:hover { color: var(--white); background-color: var(--secondary-600); border-color: var(--secondary-600); }
.btn-check:focus + .btn-outline-secondary, 
.btn-outline-secondary:focus { box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgb), 0.5); }
.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 { color: var(--white); background-color: var(--secondary-600); border-color: var(--secondary-700); }
.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); }
.btn-outline-secondary.disabled, 
.btn-outline-secondary:disabled { color: var(--secondary); background-color: transparent; }

/* accent outline */
.btn-outline-accent { color: var(--accent); border-color: var(--accent); background: var(--white); }
.btn-outline-accent:hover { color: var(--white); background-color: var(--accent-600); border-color: var(--accent-600); }
.btn-check:focus + .btn-outline-accent, 
.btn-outline-accent:focus { box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.5); }
.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 { color: var(--white); background-color: var(--accent-600); border-color: var(--accent-700); }
.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); }
.btn-outline-accent.disabled, 
.btn-outline-accent:disabled { color: var(--accent); background-color: transparent; }

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

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

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

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

/* light outline */
.btn-outline-light { color: var(--gray); border-color: var(--gray-200); background: var(--white); }
.btn-outline-light:hover { color: var(--gray); background-color: var(--gray-300); border-color: var(--gray-300); }
.btn-check:focus + .btn-outline-light,
.btn-outline-light:focus { box-shadow: 0 0 0 0.25rem rgba(var(--gray-rgb), 0.25); }
.btn-check:active + .btn-outline-light,
.btn-check:checked + .btn-outline-light,
.btn-outline-light.active,
.btn-outline-light.dropdown-toggle.show,
.btn-outline-light:active { color: var(--gray); background-color: var(--gray-300); border-color: var(--gray-400); }
.btn-check:active + .btn-outline-light:focus,
.btn-check:checked + .btn-outline-light:focus,
.btn-outline-light.active:focus,
.btn-outline-light.dropdown-toggle.show:focus,
.btn-outline-light:active:focus { box-shadow: 0 0 0 0.25rem rgba(var(--gray-rgb), 0.25); }
.btn-outline-light.disabled,
.btn-outline-light:disabled { color: var(--gray); background-color: transparent; }

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

/* Narrow Button ------------------------------------------------------------- */

@media (min-width: 992px) {
  .btn-narrow { font-weight: 400 !important; line-height: 1.25 !important; font-size: .75rem !important; border-radius: .125rem !important; min-height: 2rem !important; padding: .325rem .75rem !important; }
}

/* Toggles ------------------------------------------------------------------ */

.btn-group-toggle .btn:first-child { border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; }
.btn-group-toggle .btn:last-child { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; }

/* Cards -------------------------------------------------------------------- */

.card { padding: 1rem; width: 100%; border-radius: .25rem; border: .0625rem solid var(--gray-400); }
.card-gray { background: var(--gray-100); }
.card-centered { max-width: 26.25rem }
.card-wide { width: calc(100% - 2rem) !important; margin: auto; }
.card-fullscreen { margin: -1.5rem; box-shadow: 0; border-radius: 0; }

@media (min-width: 576px) {
  .card-wide { width: 34rem !important }
}

@media (min-width: 768px) {
  #signin-terms-and-privacy .form-check { height: 1.9375rem; }
  .card-wide { width: 46rem !important; }
}

@media (min-width: 992px) {
  .card-wide { width: 60rem !important; }
}

@media (min-width: 1200px) {
  .card-wide { width: 60rem !important; }
}

/* Tables ------------------------------------------------------------------- */

.table { font-size: 1rem; color: var(--gray-text); width: 100%; margin-bottom: 0; }
.table thead { border-bottom: .125rem solid var(--gray-400) !important; }
.table tbody,
.table tbody td,
.tbody thead th { border: 0 !important; padding: 0; vertical-align: middle; line-height: 1.25; }
.table thead th { padding: 0.875rem 0.5rem; border: 0 !important; min-height: 2.625rem !important; vertical-align: middle; }
.table tbody td { padding: 0.1875rem 0.5rem; border-bottom: .0625rem solid var(--gray-400); min-height: 3rem !important; }
.table tbody td a { font-size: 1rem; }
.tableNoData { text-align: center; width: 100%; }
.tableNoData td { padding: 1rem 0 !important; }

/* Placeholder -------------------------------------------------------------- */

input::placeholder,
textarea::placeholder { color: var(--gray) !important; font-style: italic !important; font-weight: 300 !important; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder /* IE10+ */ { color: var(--gray) !important; font-style: italic !important; font-weight: 300 !important; }
input:-moz-placeholder,
textarea:-moz-placeholder /* FF18 */ { color: var(--gray) !important; font-style: italic !important; font-weight: 300 !important; }
input::-moz-placeholder,
textarea::-moz-placeholder /* FF19+ */ { color: var(--gray) !important; font-style: italic !important; font-weight: 300 !important; }
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder /* Chrome, Safari, Opera */ { color: var(--gray) !important; font-style: italic !important; font-weight: 300 !important; }

/* Hide on Focus */
input:focus::placeholder,
textarea:focus::placeholder { color: transparent !important; opacity: 0 !important; }
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder /* IE10+ */ { color: transparent !important; opacity: 0 !important; }
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder /* FF18 */ { color: transparent !important; opacity: 0 !important; }
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder /* FF19+ */ { color: transparent !important; opacity: 0 !important; }
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder /* Chrome, Safari, Opera */ { color: transparent !important; opacity: 0 !important; }

/* Ng Bootstrap */
.ng-select .ng-select-container .ng-value-container .ng-placeholder { color: var(--gray) !important; font-style: italic !important; font-weight: 300 !important; }

/* ng-select on Request Support */
#serviceRequestService.ng-select { height: 2.625rem; border: 0; padding: 0; }
#serviceRequestService.ng-select.ng-select-single .ng-select-container { height: 2.625rem; border: 0.0625rem solid var(--gray-400); }
#serviceRequestService.ng-select.ng-select-opened.ng-select-bottom > .ng-select-container { height: 2.625rem; border: 0.0625rem solid var(--gray-400); }

#serviceRequestService.form-control.ng-select.ng-select-single.is-valid { background: no-repeat; background-size: .875rem; border: none !important; padding-right: 0 !important; }
#serviceRequestService.form-control.ng-select.ng-select-single.is-valid .ng-select-container { background: url(../img/svg/icon-success.svg) no-repeat; background-position: calc(100% - .625rem) center; background-size: .875rem; border: .0625rem solid var(--success) !important; padding-right: 1.5rem; }

#serviceRequestService.form-control.ng-select.ng-select-single.is-invalid { background: no-repeat; background-size: .875rem; border: none !important; padding-right: 0 !important; }
#serviceRequestService.form-control.ng-select.ng-select-single.is-invalid .ng-select-container { background: url(../img/svg/icon-danger.svg) no-repeat; background-position: calc(100% - .625rem) center; background-size: .875rem; border: .0625rem solid var(--danger) !important; padding-right: 1.5rem; }

#serviceRequestService.form-control.ng-select.ng-select-single.is-invalid { border-color: var(--danger) !important }
#serviceRequestService.form-control.ng-select.ng-select-single.is-invalid .ng-select-container { border-color: var(--danger) !important }

/* Header & Navbar ---------------------------------------------------------- */

header,
.navbar { height: 3rem; padding: .0625rem .5rem .0625rem 1rem; }

#header-nav .wrapper { display: flex; align-items: stretch; }
#header-nav .mainMenu { width: 100%; }
#header-nav .subMenu { margin-block: .5rem; }
#header-nav .dropdown-menu { margin: 0 .75rem .25rem .25rem; }
#header-nav .dropdown:hover .dropdown-menu:not(.singleMenu) { display: block; }

.navbar { border-bottom: 1px solid var(--gray-400) !important; box-shadow: none; }
.navbar-brand { display: flex; width: 9.25rem; height: 2.875rem; padding: 0; font-size: 1rem; }
.navbar-brand img { width: auto; height: auto; align-self: center; justify-content: flex-start; max-height: 2.875rem; max-width: 9.25rem; }
.navbar-collapse { margin: 0 -1rem; border-top: 1px solid var(--gray-400); box-shadow: 0 .125rem .125rem .125rem rgba(var(--black-rgb), .2); background: var(--white); }
.navbar-main { margin-right: 0 !important; }

.navbar-nav .nav-link,
.navbar-nav .dropdown-item { text-decoration: none !important; }

.navbar-toggler.mainMenuItemText { padding: .375rem .25rem !important; border: 0; line-height: 1.5; height: 2.625rem; width: 2.625rem; text-align: center; }
.navbar-toggler.mainMenuItemText i { font-size: 1.75rem; }

#main-navigation > .nav-item.dropdown.navbar-toggle > .nav-link { margin-bottom: .75rem; font-weight: bold; text-transform: uppercase; }
#main-navigation > .nav-item.dropdown.navbar-toggle > .nav-link:first-child { margin: .25rem .75rem .25rem .25rem !important; padding: .625rem .75rem .675rem !important; height: 2.625rem; font-size: 1rem; }

#profile-menu { margin: .25rem .75rem .25rem .25rem !important; padding: .625rem .75rem .675rem !important; height: 2.625rem; font-size: 1rem; border-top: .0625rem solid var(--gray-300); border-radius: 0; }
#profile-menu i { padding-top: .1625rem !important; }
#profile-menu .mobile-only { font-weight: 700; padding-left: .5rem; text-transform: uppercase; }

#link_dropdown .nav-link { padding: 0; width: calc(100% - 1.5rem); }
#link_dropdown .nav-link .dropdown-item,
.mainMenu .nav-item .nav-link.subMenuItemText { padding: .625rem 1rem .675rem; border-radius: .25rem; margin: .25rem .75rem; max-width: 100%; }
.mainMenu .nav-link,
.subMenu .nav-link { border-radius: .25rem; }
.mainMenuItemText,
.drodown-item.mainMenuItemText,
.subMenuItemText,
.dropdown-item.subMenuItemText { font-size: 1rem; }

@media (min-width: 992px) {
  header,
  .navbar { height: 4rem; }

  #header-nav .mainMenu { width: auto; }
  #header-nav .dropdown-menu { margin: 0; top: 2.375rem; left: .125rem; }
  #header-nav .dropdown-menu.dropdown-menu-right { margin: 0; top: 2.375rem; left: unset; right: .125rem !important; }

  .navbar { padding: 0 1rem !important; }
  .navbar-brand { width: 12.75rem; height: 4.875rem; padding: 0; }
  .navbar-brand img { max-height: 4.875rem; max-width: 12.75rem; }
  .navbar-collapse { margin: 0; border-top: 0; background: none; box-shadow: none; }
  .navbar-nav .nav-link .icon-label { padding-left: .5rem; position: relative; }
  .navbar-nav .dropdown-menu { width: 13.75rem; padding: .5rem; border: none; box-shadow: 0 .125rem .1875rem .125rem rgba(var(--black-rgb), .2) !important; border-radius: .125rem; }
  .navbar-nav .dropdown-menu-left { left: -.5rem; }
  .navbar-nav .dropdown-menu-right { right: -.5rem !important; }
  .navbar-nav .mobile-only { display: none; }

  #main-navigation > .nav-item.dropdown.navbar-toggle > .nav-link:first-child { margin: .125rem !important; padding: .425rem .75rem .475rem !important; height: 2.125rem; font-size: .875rem; }

  #profile-menu { margin: .25rem 0 !important; padding: .625rem .75rem .675rem !important; height: 2.625rem; min-width: 2.625rem; font-size: 1rem; text-align: center; border-top: 0; border-radius: .25rem; }
  #profile-menu i { padding-top: .1625rem !important; font-size: 1.25rem; }
  #link_dropdown.dropdown-menu-right { top: 3.25rem !important; left: -11rem !important; } 
  #link_dropdown .nav-link { padding: 0; width: calc(100% - .5rem); }
  #link_dropdown .nav-link .dropdown-item,
  .mainMenu .nav-item .nav-link.subMenuItemText { padding: .625rem 1rem .675rem; border-radius: .25rem; margin: .25rem; max-width: 100%; }
}

/* Header Colors */
.headerBkgdColor { background: var(--header-bkgd-color); }
.headerTextColor { color: var(--header-text-color); }

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

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

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

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

/* Main Menu - Text & Icons */
.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; }

.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; }

.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; }

.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 - Backgrounds */
.subMenuItemBkgd,
.dropdown-item.subMenuItemBkgd { background: var(--submenu-bkgd-color) !important; }

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

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

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

/* Sub Menu - Text & Icons */
.subMenuItemText,
.subMenuItemText > i,
.dropdown-item.subMenuItemText,
.dropdown-item.subMenuItemText > i { color: var(--submenu-text-color) !important; }

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

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

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

footer { line-height: .625rem; min-height: 12rem; text-align: center; padding: .75rem 1rem !important; position: absolute; }
.footer-brand img { max-height: 1.75rem; max-width: 8rem; margin-bottom: .5rem; }
#footer-brand-logo-link { cursor: default; }
.footer-left,
.footer-right { font-size: .75rem !important; text-align: center; line-height: 1rem; padding: 0 1rem; }
.footer-left { cursor: default; }
.footer-center { order: -1; }
.footer-right { display: inline !important; list-style: none !important; margin-bottom: 0; }
.footer-right > li { display: inline !important; list-style: none !important; }
.footer-right > li::before { content: ' | '; }
.footer-right > li:first-child::before { content: '' !important; }

/* Footer Colors */
.footerBkgdColor { background-color: var(--footer-bkgd-color); }
.footerTextColor { color: var(--footer-text-color); }

/* Footer Menu - Backgrounds */
.footerMenuItemBackgroundColor { color: var(--footmenu-bkgd-color) !important; }
.footerMenuItemBackgroundColor:hover { color: var(--footmenu-bkgd-color-hover) !important; }
.footerMenuItemBackgroundColor:focus { color: var(--footmenu-bkgd-color-focus) !important; }
.footerMenuItemBackgroundColor:active,
.footerMenuItemBackgroundColor.active { color: var(--footmenu-bkgd-color-active) !important; }

/* Footer Menu - Text & Icons */
.footerMenuItemTextColor { color: var(--footmenu-text-color) !important; }
.footerMenuItemTextColor:hover { color: var(--footmenu-text-color-hover) !important; }
.footerMenuItemTextColor:focus { color: var(--footmenu-text-color-focus) !important; }
.footerMenuItemTextColor:active,
.footerMenuItemTextColor.active { color: var(--footmenu-text-color-active) !important; }

@media (min-width: 576px) {
  footer { min-height: 4rem; padding: .75rem 1.5rem !important; }
  .footer-brand img { max-height: 2.5rem; max-width: 11.4375rem; }
  .footer-left,
  .footer-right { padding: .75rem 4rem; }
  .footer-left { text-align: left;}
  .footer-center { order: 0; }
  .footer-right { text-align: right; }
}

/* Accounts Navshelf -------------------------------------------------------- */

.switchAccountsRow { background: var(--gray-100); vertical-align: middle; height: fit-content; padding: 0.2rem 0; border-bottom: .0625rem solid var(--gray-200); margin-bottom: 1rem; }
.switchAccountsRow .btn-group { width: calc(100% - 6.9375rem); }
.switchAccountsRowButtonLink { font-size: .875rem !important; text-align: left; width: 100%; padding: .625rem .75rem .675rem; background: var(--white); border: .0625rem solid var(--gray-400); }
.switchAccountsRowButtonLink .selectedAccountName { width: calc(100% - 1.75rem); }
.switchAccountsRow .dropdown-menu { min-width: 200px; padding: .25rem; background-clip: inherit; margin-top: 0; top: 0 !important; }
.switchAccountsRow .dropdown-menu.accounts-dropdown { top: 0 !important; max-height: 75vh; width: 100%; overflow-y: auto; text-overflow: ellipsis; overflow-x: hidden; box-shadow: 0 .125rem .125rem .125rem rgba(var(--black-rgb), .2); }
.switchAccountsRow .dropdown-toggle::after { right: .5rem; vertical-align: text-top; }
.switchAccountsRow .dropdown-item { cursor: pointer; padding: .675rem .75rem; font-size: .875rem; border-bottom: .0625rem solid var(--gray-400); min-height: 2.625rem; min-width: 2.625rem; }
.switchAccountsRow .dropdown-item i { font-size: 1rem; }

@media (min-width: 576px) {
  .switchAccountsRow .btn-group { width: 22rem; }
  .switchAccountsRow .dropdown-menu.accounts-dropdown { width: 22rem; }
}

/* Account Summary ---------------------------------------------------------- */

.tableWrapper,
.cardsWrapper { padding: 0 !important; }
.toolsRow { min-height: 2.625rem; margin-bottom: .75rem; }

.toggleView > .btn { padding: .675rem .5rem .25rem; min-height: 2.625rem; min-width: 2.625rem; }
.toggleView > .btn > i { font-size: 1.25rem; position: relative; top: -.125rem; }

.addProduct { width: 100% !important; }
.expandAll.show,
.collapse.show { padding: 0 !important; }
.scrollIndicator { font-size: .75rem; color: var(--gray); text-align: right; text-transform: uppercase; }

.tableToggle { display: inline-block; min-height: 2.625rem; min-width: 2.625rem; vertical-align: middle; padding: .425rem .5rem .375rem; text-align: center; border-radius: .25rem; background: transparent; }
.tableToggle:hover { background: var(--white); border: .0625rem solid var(--gray-300); }
.tableToggle:focus { background: var(--gray-100); border: .0625rem solid var(--gray-300); }
.tableToggle > i { font-size: 1.125rem; color: var(--primary); }

.serviceLocation { background: var(--light); min-height: 2.625rem; border-bottom: .125rem solid var(--gray-400)!important; }
.productOffering, 
.productCardTitle { border-bottom: .0625rem solid var(--gray-400) !important; }

/* Billed Products & Services */
.billedProductsTableWrapper { overflow: hidden; overflow-x: auto; }
.billedProductsTable { display: block; width: 42.75rem; }
.billedProductsCardWrapper { width: 100%; overflow: hidden; overflow-x: auto; }
.billedProductsCard { display: block; }

.billedProductsTable .colLocation { display: inline-block; width: calc(100% - 2.625rem); white-space: normal; word-break: break-word; vertical-align: middle; font-weight: 600; }
.billedProductsTable .colDescription { display: inline-block; width: calc(100% - 23.25rem - 5.125rem); vertical-align: middle; }
.billedProductsTable .colServiceID { display: inline-block; width: 8rem; vertical-align: middle; padding: 0.875rem 0.5rem; }
.billedProductsTable .colStatus { display: none; }
.billedProductsTable .colUpdated { display: none; }
.billedProductsTable .colQuantity { display: inline-block; width: 2.5rem; text-align: center; vertical-align: middle; padding: 0.875rem 0.5rem; }
.billedProductsTable .colPrice { display: inline-block; width: 6.5rem; text-align: right; vertical-align: middle; padding: 0.875rem 0.5rem; }
.billedProductsTable .colAction { display: inline-block; width: 10rem; text-align: center; vertical-align: middle; float: right; }

@media (min-width: 576px) {
  .billedProductsTable { width: 59.75rem; }
  .billedProductsTable .colDescription { width: calc(100% - 35rem - 5.125rem); }
  .billedProductsTable .colStatus { display: inline-block; width: 6.5rem; vertical-align: middle; padding: 0.875rem 0.5rem; }
  .billedProductsTable .colUpdated { display: inline-block; width: 6.5rem; text-align: right; vertical-align: middle; padding: 0.875rem 0.5rem; }
}
@media (min-width: 768px) {
  .billedProductsTable { width: 67.75rem; }
}

@media (min-width: 992px) {
  .billedProductsTableWrapper { width: 100%; }
  .billedProductsTable { width: 100%; }
  .billedProductsTable .colDescription { width: calc(100% - 39rem - 5.125rem); }
  .billedProductsTable .colServiceID { width: 12rem; }
}

@media (min-width: 1200px) {
  .billedProductsTable .colDescription { width: calc(100% - 45rem - 5.125rem); }
  .billedProductsTable .colServiceID { width: 18rem; }
}

/* Prepaid Subscriptions */

.prepaidProductsCardWrapper { width: 100%; overflow: hidden; overflow-x: auto; }
.prepaidProductsCard { display: block; }
.prepaidParentWrapper > .card { display: block; width: 100%; }
.prepaidSubscriptionTableWrapper { overflow: hidden; overflow-x: auto; width: 100%; margin-top: .25rem; }
.prepaidSubscriptionTable { display: block; width: 100%; min-width: 39.5rem; max-width: 39.5rem; }

.prepaidProductOffering,
.prepaidComponentRow { border-bottom: .0625rem solid var(--gray-400) !important; }

@media (min-width: 576px) {
  .prepaidSubscriptionTableWrapper { width: 100%; }
  .prepaidSubscriptionTable { min-width: inherit; max-width: inherit; width: 100%; }
}

/* Make a Payment ----------------------------------------------------------- */

#datepicker-icon-append { border: 0; }
#datepicker-icon-append i { color: var(--primary) !important; }

/* Quick Links -------------------------------------------------------------- */

.quickLinks { min-width: 2.75rem; color: var(--white) !important; vertical-align: middle; }
.quickLinks .btn { padding: .5rem .75rem; height: 2.625rem; margin: .125rem 0; }

.quickLinksBtn { text-align: center; background: var(--accent); color: var(--white); }
.quickLinksBtn > i { width: 1.5rem; text-align: center; margin-right: .5rem; color: var(--white); color: var(--white); }

.quickLinksLink { background: transparent; text-align: left; color: var(--primary); }
.quickLinksLink:hover { background: var(--gray-300); }
.quickLinksLink:focus { background: var(--gray-400); }
.quickLinksLink:active,
.quickLinksLink.active { background: var(--gray-500); }
.quickLinksLink > i { width: 1.5rem; text-align: center; margin-right: .5rem; color: var(--white); color: var(--primary); }

/* Product Card Banners ----------------------------------------------------- */

/* Prepaid */
.prepaidBanner i { font-size: 1rem; }
.prepaidBkgdColor { background: var(--prepaid-100); }
.prepaidTextColor { color: var(--prepaid); }

/* Billed */
.billedBanner i { font-size: 1rem; }
.billedBkgdColor { background: var(--billed-100); }
.billedTextColor { color: var(--billed) }

/* Account Summary Toggle --------------------------------------------------- */

.btn.billedToggleBkgdColor,
.btn.prepaidToggleBkgdColor { display: flex; justify-content: center; align-items: center; min-height: 2.625rem; min-width: 2.625rem; border-width: 1px; border-style: solid; font-weight: 600; font-size: .875rem; line-height: 1; padding: .675rem .75rem .675rem; }

.btn.billedToggleBkgdColor img,
.btn.prepaidToggleBkgdColor img { margin-right: .5rem; height: 1.25rem; }

.btn.billedToggleBkgdColor.active,
.btn.billedToggleBkgdColor:active,
.btn.prepaidToggleBkgdColor.active,
.btn.prepaidToggleBkgdColor:active { border-width: .25rem; }

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

.btn.prepaidToggleBkgdColor { background: var(--white); }
.btn.prepaidToggleBkgdColor:hover { background: var(--prepaid-100); }
.btn.prepaidToggleBkgdColor:focus { background: var(--prepaid-200); }
.btn.prepaidToggleBkgdColor.active,
.btn.prepaidToggleBkgdColor:active { border-width: .125rem !important; background: var(--prepaid-200); }

.btn.prepaidToggleTextColor { color: var(--prepaid); }
.btn.prepaidToggleTextColor:hover { color: var(--prepaid); }
.btn.prepaidToggleTextColor:focus { color: var(--prepaid); }
.btn.prepaidToggleTextColor.active,
.btn.prepaidToggleTextColor:active { color: var(--prepaid); }

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

.btn.billedToggleBkgdColor { background: var(--white); }
.btn.billedToggleBkgdColor:hover { background: var(--billed-100); }
.btn.billedToggleBkgdColor:focus { background: var(--billed-200); }
.btn.billedToggleBkgdColor.active,
.btn.billedToggleBkgdColor:active { border-width: .125rem !important; background: var(--billed-200); }

.btn.billedToggleTextColor { color: var(--billed); }
.btn.billedToggleTextColor:hover { color: var(--billed); }
.btn.billedToggleTextColor:focus { color: var(--billed); }
.btn.billedToggleTextColor.active,
.btn.billedToggleTextColor:active { color: var(--billed); }

/* Order Capture - Cart ----------------------------------------------------- */

.cartButton { width: 36px; height: 36px; border: 1px solid transparent; border-radius: .25rem; box-sizing: border-box; padding: .25rem; position: relative; top: .325rem; }
.cartButton:hover,
.cartButton:focus,
.cartButton:active,
.cartButton.active { border-color: var(--gray-400); }
.cartButton i { position: relative; left: .25rem; }
.cartButton .badge { border-radius: .5rem; padding: .125rem; font-size: .5rem; min-width: .75rem; height: .75rem; position: relative; top: -.625rem; }

/* Order Capture - Service Location ----------------------------------------- */

.selected-location,
.changeLocationAndAgent { font-size: .875rem; text-align: center; }

.location-notfound { display: block; font-size: .75rem !important; margin-top: 0.0625rem; color: var(--danger); padding: 0; }

@media (min-width: 768px) {
  .selected-location { text-align: left; }
  .changeLocationAndAgent { text-align: right; }
}

/* Order Capture - Stepper -------------------------------------------------- */

.mat-vertical-stepper-header { margin: 0 0 .25rem 0 !important; padding: .25rem 0 .25rem .5rem !important; height: 2rem !important; }
.mat-vertical-content-container { margin-left: 1.25rem !important; }
.mat-vertical-content { padding: 0 0 0 1.5rem !important; }
.mat-step-icon-selected { background-color: var(--primary); color: var(--white) !important; }

/* Product Cards - Billed / Prepaid Banner ---------------------------------- */

.productCardBanner { height: auto; }
.productCardBanner img { height: 1rem; vertical-align: text-top; }

/* Product Cards - Suggestive Selling --------------------------------------- */

/* Wrapper */
.productCardMarketing { font-size: .875rem; line-height: 1.5; height: auto; max-height: 7.25rem; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow-x: hidden; overflow-y: auto; }

/* Scrollbar */
.productCardMarketing::-webkit-scrollbar /* width */ { background: var(--gray-100); width: .25rem; }
.productCardMarketing::-webkit-scrollbar-button /* arrow buttons */ { display: none; }
.productCardMarketing::-webkit-scrollbar-thumb /* handle */ { background: var(--gray-400); border-radius: .25rem; }
.productCardMarketing::-webkit-scrollbar-thumb:hover /* handle hover */ { background: var(--gray-600); }
.productCardMarketing::-webkit-scrollbar-track /* track */ { box-shadow: inset 0 0 .2rem var(--gray-400); border-radius: .25rem; }
.productCardMarketing::-webkit-scrollbar-track-piece /* track distance */ { background: var(--gray-200); border-radius: .25rem; }
.productCardMarketing::-webkit-scrollbar-corner /* track corners */ { background: var(--gray-200); border-radius: .25rem; }
.productCardMarketing::-webkit-resizer /* resizer handle */ { display: none; }

/* List */
.productCardMarketing ul { margin: 0 .75rem; padding: 0; }
.productCardMarketing li::before { content: "\f111"; font-family: 'Font Awesome 6 Pro Solid'; font-size: .125rem; position: relative; top: -.125rem; left: -.75rem; margin-right: -.25rem; }
.productCardMarketing li { margin-left: .5rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; margin-bottom: .125rem; }

/* Configure Product - Combobox --------------------------------------------- */

::ng-deep .autocomplete-container { box-shadow: none !important; }
::ng-deep .autocomplete-container .input-container input { color: var(--gray-text) !important; border-radius: .25rem !important; border: 1px solid var(--gray-400) !important; box-shadow: none !important; }
::ng-deep .autocomplete-container .input-container .x { display: none !important; }
::ng-deep .autocomplete-container .suggestions-container { overflow-y: inherit !important; }
::ng-deep .autocomplete-container .suggestions-container ul li a { padding: .5rem 1rem !important; }
::ng-deep .autocomplete-container .suggestions-container ul li a[_ngcontent-yom-c10]:not([href]):not([tabindex]):hover { background: var(--gray-100); color: var(--white) !important; }
::ng-deep .autocomplete-container .suggestions-container ul li a[_ngcontent-yom-c10]:not([href]):not([tabindex]):focus { background: var(--gray-100); color: var(--white) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important; }

/* Scrollbar for Typeahead Dropdowns ---------------------------------------- */

ngb-typeahead-window.dropdown-menu { width: 100%; max-height: 360px !important; overflow: hidden !important; overflow-y: scroll !important; }

/* Consumer Label in Product Cards ------------------------------------------ */

/* label wrapper */
.consumerLabelWrapper { overflow: hidden !important; width: 100%; height: auto; display: block; text-align: left; }
.consumerLabelWrapper.collapse { height: auto !important; display: block !important; }
.consumerLabelWrapper.collapse.show { display: none !important; }

/* label toggle */
.btn.btn-link.consumerLabelToggle { font-size: .75rem !important; min-height: 1rem !important; padding-top: .125rem !important; text-transform: uppercase !important; text-decoration: underline !important; text-align: center !important; color: var(--primary) !important; }
.btn.btn-link.consumerLableToggle:hover,
.btn.btn-link.consumerLableToggle:focus,
.btn.btn-link.consumerLableToggle:active,
.btn.btn-link.consumerLableToggle.active { background: var(--white) !important; }

/* label content */
.consumerLabel { font-size: .75rem !important; background: var(--white) !important; border: .25rem solid var(--black) !important; width: 100%; max-width: 482px; height: auto; margin: 0 auto; padding: .5rem .5rem 0 .5rem !important; line-height: 1.25 !important; font-family: "Arial", "Helvetica", sans-serif !important; display: flex !important; flex-flow: column !important; }

.consumerLabel h2,
.consumerLabel h3,
.consumerLabel h4,
.consumerLabel h5,
.consumerLabel p { margin: 0 !important; padding: .0625rem 0 .375rem !important; color: var(--black) !important; font-family: "Arial", "Helvetica", sans-serif !important; }
.consumerLabel h2 { font-size: .8125rem !important; font-weight: 900 !important; line-height: .8125 !important; letter-spacing: -.0625rem !important; }
.consumerLabel h3 { font-size: .75rem !important; font-weight: 700 !important; line-height: .75 !important; letter-spacing: -.0125rem !important; }
.consumerLabel h4 { font-size: .8125rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -.0125rem !important;}
.consumerLabel h4.pb-0 { padding-bottom: 0 !important; }
.consumerLabel h5 { font-size: .75rem !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -.0125rem !important; }

.consumerLabel p { font-size: .75rem !important; font-weight: 500 !important; line-height: 1.25 !important; display: block !important; }
.consumerLabel p.indent { padding-left: 1rem !important; padding-bottom: 0 !important; margin-bottom: .25rem !important; }
.consumerLabel p.indent.bold { padding-top: .25rem !important; }

.consumerLabel a { font-size: .75rem !important; color: var(--primary) !important; line-height: 2 !important; }
.consumerLabel .normal { font-weight: 500 !important; }
.consumerLabel .bold { font-weight: 700 !important; }
.consumerLabel .heavy { font-weight: 900 !important; }
.consumerLabel .text-right { text-align: right !important; margin-left: auto !important; float: right !important; }

.consumerLabel hr { background: var(--black) !important; margin: .0625rem 0 .25rem !important; border: 0 !important; color: var(--black) !important; }
.consumerLabel hr.light { height: .0625rem !important; }
.consumerLabel hr.medium { height: .125rem !important; }
.consumerLabel hr.bold { height: .25rem !important; }
.consumerLabel hr.heavy { height: .375rem !important; }

/* "Plan Details" in Product Grids ----------------------------------- */

/* Account Summary */
#billedGridCard .productCardName .btn-link,
#prepaidGridCard .productCardName .btn-link, 
#billedGridRow .colDescription .btn-link,
#prepaidGridRow .colDescription .btn-link { display: block; padding: 0; font-size: .6125rem !important; text-transform: uppercase; }

/* Configure Service */
#optionsListView .colDescription .descriptionText { width: calc(100% - 2rem); }
#optionsListView .colDescription .descriptionText .btn-link { display: block; padding: 0; font-size: .6125rem !important; text-transform: uppercase; height: auto; }
#optionsCardView .optionDescription .descriptionText .btn-link { display: block !important; padding: 0 0 0 2rem; font-size: .6125rem !important; text-transform: uppercase; height: auto; }

/* Order Summary */
#summaryListView .colDescription,
#summaryListView .onChange .colDescription,
#summaryListView .colDescription .btn-link,
#summaryListView .onChange .colDescription .btn-link,
#summaryListView .colQuantity,
#summaryListView .onChange .colQuantity,
#summaryListView .colPrice,
#summaryListView .onChange .colPrice,
#summaryListView .colFrequency,
#summaryListView .onChange .colFrequency { vertical-align: middle; }
#summaryListView .colDescription .btn-link,
#summaryListView .onChange .colDescription .btn-link { display: block; padding: 0; font-size: .6125rem !important; text-transform: uppercase; height: auto; }
#summaryCardView .optionDescription,
#summaryCardView .onChange .optionDescription { display: block; }
#summaryCardView .optionDescription .btn-link,
#summaryCardView .onChange .optionDescription .btn-link { display: block; padding: 0; font-size: .6125rem !important; text-transform: uppercase; height: auto; }

.orderNotesHead { width: 100%; }
.orderNotesHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
.orderNotesHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
.orderNotesCard { border: .0625rem solid var(--gray-300); background: var(--gray-100); border-radius: .25rem; margin-bottom: 1rem !important; }


@media (min-width: 768px) {
  #optionsCardView .optionDescription .descriptionText { display: inline-block !important; margin-left: .25rem; width: calc(100% - 2.25rem); }
  #optionsCardView .optionDescription .descriptionText .btn-link { display: inline-block !important; float: right; padding-top: .325rem; }
  #summaryCardView .optionDescription,
  #summaryCardView .onChange .optionDescription { display: inline-block; }
  #summaryCardView .optionDescription .btn-link,
  #summaryCardView .onChange .optionDescription .btn-link { display: inline-block; float: right; padding-top: .425rem; }
}

/* Search Highlight --------------------------------------------------------- */

.searchHighlight { background: var(--danger-300) !important; }
#billedGridRow mark,
#billedGridCard mark,
tr.serviceLocation mark { padding: 0; background: var(--danger-300); }

/* Privacy Preferences ------------------------------------------------------ */

#privacyPreferencesSetup .input-datepicker > .input-group-append { border: 1px solid var(--gray-400); background: transparent; }
#privacyPreferencesSetup .input-datepicker { width: 8.25rem; }

#cpniDefinitionWrapper.collapse.show { max-height: 20rem; overflow-y: auto; }
#collapsePrivacyPolicy.collapse.show > .card > #collapsePrivacyPolicyContent { display: block; width: 100%; padding: 1rem !important; max-height: 20rem; overflow-y: auto; }

#smsCarrierChargeWarning { padding-left: .5rem }

#privacyPreferencesSetup .custom-select { min-height: 2.625rem !important; }

/* Modal Close Button ------------------------------------------------------- */

.modal-body .close { top: 0 !important; right: 0 !important; }
.details-modal.modal-body .close { top: -1.5rem !important; right: -1.5rem !important; }


/* -----------------------------------------------------------------------------
    UGDG: Upgrade / Downgrade - Change Order (2024)
----------------------------------------------------------------------------- */

/* UGDG: Make-a-Change Wizard ----------------------------------------------- */

#makeChangeWizard .cartButton { border: 0; }
#makeChangeWizard .cartButton i { font-size: 1.5rem; padding-left: .25rem; }
#makeChangeWizard .cartButton .badge-accent { background: var(--accent); border-radius: 50%; position: absolute; top: .25rem; right: -0.25rem; height: .625rem; width: .625rem; }

#makeChangeWizard .lg-btn-row,
#makeChangeWizard .sm-btn-row { display: block; width: 100%; }
#makeChangeWizard .lg-btn-row img,
#makeChangeWizard .sm-btn-row img { width: auto; max-width: 8rem; height: auto; max-height: 3.5rem; }

#makeChangeWizard .change-btn { border-radius: .25rem; border: none; outline: .125rem solid var(--gray-300); color: var(--gray-text); background: var(--white); transition: outline 0.1s; flex: 1; letter-spacing: .0375rem; }
#makeChangeWizard .change-btn:hover { outline: .25rem solid var(--primary); background: var(--white); cursor: pointer; }
#makeChangeWizard .change-btn:focus { outline: .25rem solid var(--secondary); background: var(--white); cursor: pointer; box-shadow: .25rem .5rem .25rem rgba(var(--black-rgb), .2); }
#makeChangeWizard .change-btn:active,
#makeChangeWizard .change-btn.active { outline: .25rem solid var(--secondary); background: var(--gray-300); box-shadow: .25rem .5rem .25rem rgba(var(--black-rgb), .2); }

#makeChangeWizard .input-datepicker { width: 100%; max-width: 100%; }
#makeChangeWizard .input-datepicker > .form-control:not(:first-child) { border-right: 0 !important; }
#makeChangeWizard .input-datepicker > .input-group-append { background: var(--white) !important; }

#makeChangeWizard .input-typeahead { width: 100%; max-width: 100%; }
#makeChangeWizard .input-typeahead > .form-control:not(:last-child) { border-right: 0 !important; }
#makeChangeWizard .input-typeahead > .input-group-append { background: var(--white) !important; }

#makeChangeWizard .form-check.custom-control { padding: .5rem .75rem .5rem .75rem; }
#makeChangeWizard .form-check-label { padding: .125rem .75rem .125rem 1.875rem; margin-bottom: 0 !important; }

#makeChangeWizard .form-group .dropdown-menu { width: 100% !important; }

#makeChangeWizard select.form-select:after { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; content: '\f0d7' !important; font-family: 'FontAwesome' !important; }

@media (min-width: 576px) {
  #makeChangeWizard .lg-btn-row,
  #makeChangeWizard .sm-btn-row { display: flex; flex-direction: row; justify-content: space-between; }
}

#makeChangeWizard #effectiveDatePicker { width: 100% !important; }
#makeChangeWizard #effectiveDatePicker > .input-datepicker > .dropdown-menu { width: 17rem !important; }

#makeChangeWizard #disconnectReason .form-select { width: 100% !important; }

@media (min-width: 576px) {
  #makeChangeWizard #effectiveDatePicker { width: 17rem !important; }
  #makeChangeWizard #disconnectReason .form-select { width: 17rem !important; }
}

/* UGDG: Select Services ---------------------------------------------------- */

#ugdgSelectServices .serviceCardsWrapper { display: flex; flex-flow: row wrap; align-items: stretch; gap: 1.125rem; height: auto; width: 100%; }

#ugdgSelectServices .serviceCard { justify-content: stretch; height: fit-content; text-align: center; align-items: center; transition: outline 0.1s; background: var(--white); color: var(--gray-text); border-radius: .5rem; border: none; outline: none; max-width: 18rem; }

#ugdgSelectServices .serviceCard:hover { outline: .25rem solid var(--primary); background: var(--white); cursor: pointer; }
#ugdgSelectServices .serviceCard:focus { outline: .25rem solid var(--secondary); background: var(--white); cursor: pointer; }
#ugdgSelectServices .serviceCard:active,
#ugdgSelectServices .serviceCard.active { outline: .25rem solid var(--secondary); background: var(--secondary); }

#ugdgSelectServices .serviceCard.current { outline: .125rem solid var(--gray-300); background: var(--white); cursor: pointer; }
#ugdgSelectServices .serviceCard.current:hover { outline: .25rem solid var(--primary); background: var(--white); cursor: pointer; }
#ugdgSelectServices .serviceCard.current:focus { outline: .25rem solid var(--secondary); background: var(--white); cursor: pointer; }
#ugdgSelectServices .serviceCard.current:active,
#ugdgSelectServices .serviceCard.current.active { outline: .25rem solid var(--secondary); background: var(--secondary); }

#ugdgSelectServices .serviceCard.current.upgradeOnly,
#ugdgSelectServices .serviceCard.current.upgradeOnly:hover,
#ugdgSelectServices .serviceCard.current.upgradeOnly:focus,
#ugdgSelectServices .serviceCard.current.upgradeOnly:active,
#ugdgSelectServices .serviceCard.current.upgradeOnly.active { outline: .25rem solid var(--secondary); background: var(--secondary); }

#ugdgSelectServices .serviceCard.default,
#ugdgSelectServices .serviceCard.default:hover,
#ugdgSelectServices .serviceCard.default:focus,
#ugdgSelectServices .serviceCard.default:active,
#ugdgSelectServices .serviceCard.default.active { outline: .25rem solid var(--secondary); background: var(--secondary); }

#ugdgSelectServices .serviceCard.default.upgradeOnly,
#ugdgSelectServices .serviceCard.default.upgradeOnly:hover,
#ugdgSelectServices .serviceCard.default.upgradeOnly:focus,
#ugdgSelectServices .serviceCard.default.upgradeOnly:active,
#ugdgSelectServices .serviceCard.default.upgradeOnly.active { outline: .25rem solid var(--secondary); background: var(--secondary); }

/* banners */
#ugdgSelectServices .serviceCard .banner-wrapper { height: 3.5rem; border-top-left-radius: .5rem; border-top-right-radius: .5rem; padding: 0; text-transform: uppercase; color: var(--white); font-size: .75rem; font-weight: 700; width: 100%; }
#ugdgSelectServices .serviceCard .banner { height: 1.5rem; border-radius: inherit; width: 100%; padding: .25rem 1rem; text-align: center; }
#ugdgSelectServices .serviceCard .banner:nth-child(2) { border-radius: 0; }
#ugdgSelectServices .serviceCard .defaultBanner { background: var(--accent); }
#ugdgSelectServices .serviceCard .currentBanner { background: var(--primary); }

#ugdgSelectServices .serviceCard .icon { width: 100%; justify-content: center; align-content: center; }
#ugdgSelectServices .serviceCard .icon img { max-width: 4rem; max-height: 4rem; }

#ugdgSelectServices .serviceCard .body { height: auto; width: 100%; }

/* body h3 */
#ugdgSelectServices .serviceCard .body h3 { color: var(--primary); font-weight: 700; margin-bottom: .5rem; line-height: 1.125; font-size: 1.5rem; white-space: nowrap; overflow: hidden; word-break: break-word; text-align: center; text-overflow: ellipsis; }
#ugdgSelectServices .serviceCard:hover .body h3 { color: var(--primary); }
#ugdgSelectServices .serviceCard:focus .body h3 { color: var(--secondary); }
#ugdgSelectServices .serviceCard:active .body h3,
#ugdgSelectServices .serviceCard.active .body h3 { color: var(--white); }

#ugdgSelectServices .serviceCard.current .body h3 { color: var(--primary); }
#ugdgSelectServices .serviceCard.current:hover .body h3 { color: var(--primary); }
#ugdgSelectServices .serviceCard.current:focus .body h3 { color: var(--secondary); }
#ugdgSelectServices .serviceCard.current:active .body h3,
#ugdgSelectServices .serviceCard.current.active .body h3 { color: var(--white); }

#ugdgSelectServices .serviceCard.current.upgradeOnly .body h3,
#ugdgSelectServices .serviceCard.current.upgradeOnly:hover .body h3,
#ugdgSelectServices .serviceCard.current.upgradeOnly:focus .body h3,
#ugdgSelectServices .serviceCard.current.upgradeOnly:active .body h3,
#ugdgSelectServices .serviceCard.current.upgradeOnly.active .body h3 { color: var(--white); }

#ugdgSelectServices .serviceCard.default .body h3,
#ugdgSelectServices .serviceCard.default:hover .body h3,
#ugdgSelectServices .serviceCard.default:focus .body h3,
#ugdgSelectServices .serviceCard.default:active .body h3,
#ugdgSelectServices .serviceCard.default.active .body h3 { color: var(--white); }

#ugdgSelectServices .serviceCard.default.upgradeOnly .body h3,
#ugdgSelectServices .serviceCard.default.upgradeOnly:hover .body h3,
#ugdgSelectServices .serviceCard.default.upgradeOnly:focus .body h3,
#ugdgSelectServices .serviceCard.default.upgradeOnly:active .body h3,
#ugdgSelectServices .serviceCard.default.upgradeOnly.active .body h3 { color: var(--white); }

/* body p */
#ugdgSelectServices .serviceCard .body p { color: var(--gray-text); font-weight: 400; font-size: .875rem !important; line-height: 1.4; height: 2.5rem; white-space: pre-wrap; overflow: hidden; word-break: break-word; text-align: center; text-overflow: ellipsis; }

#ugdgSelectServices .serviceCard:hover .body p { color: var(--gray-text); }
#ugdgSelectServices .serviceCard:focus .body p { color: var(--gray-text); }
#ugdgSelectServices .serviceCard:active .body p,
#ugdgSelectServices .serviceCard.active .body p { color: var(--gray-200); }

#ugdgSelectServices .serviceCard.current .body p { color: var(--gray-text); }
#ugdgSelectServices .serviceCard.current:hover .body p { color: var(--gray-text); }
#ugdgSelectServices .serviceCard.current:focus .body p { color: var(--gray-text); }
#ugdgSelectServices .serviceCard.current:active .body p,
#ugdgSelectServices .serviceCard.current.active .body p { color: var(--gray-200); }

#ugdgSelectServices .serviceCard.current.upgradeOnly .body p,
#ugdgSelectServices .serviceCard.current.upgradeOnly:hover .body p,
#ugdgSelectServices .serviceCard.current.upgradeOnly:focus .body p,
#ugdgSelectServices .serviceCard.current.upgradeOnly:active .body p,
#ugdgSelectServices .serviceCard.current.upgradeOnly.active .body p { color: var(--gray-200); }

#ugdgSelectServices .serviceCard.default .body p,
#ugdgSelectServices .serviceCard.default:hover .body p,
#ugdgSelectServices .serviceCard.default:focus .body p,
#ugdgSelectServices .serviceCard.default:active .body p,
#ugdgSelectServices .serviceCard.default.active .body p { color: var(--gray-200); }

#ugdgSelectServices .serviceCard.default.upgradeOnly .body p,
#ugdgSelectServices .serviceCard.default.upgradeOnly:hover .body p,
#ugdgSelectServices .serviceCard.default.upgradeOnly:focus .body p,
#ugdgSelectServices .serviceCard.default.upgradeOnly:active .body p,
#ugdgSelectServices .serviceCard.default.upgradeOnly.active .body p { color: var(--gray-200); }

/* buttons */
#ugdgSelectServices .serviceCard .btn-retainedService { color: var(--primary); background: var(--white); border-color: var(--primary); }
#ugdgSelectServices .serviceCard .btn-removedService { color: var(--danger); background: var(--white); border-color: var(--danger); }
#ugdgSelectServices .serviceCard .btn-addedService { color: var(--success); background: var(--white); border-color: var(--success); }
#ugdgSelectServices .serviceCard .btn-addService { color: var(--white); background: var(--success); border-color: var(--success); }
#ugdgSelectServices .serviceCard .btn-retainedService:disabled,
#ugdgSelectServices .serviceCard .btn-retainedService.disabled { cursor: none; opacity: .5; }

/* UGDG: Select Plan -------------------------------------------------------- */

#ugdgSelectPlan .planCardWrapper { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 1.125rem; height: auto; width: 100%; }

#ugdgSelectPlan .planCard { justify-content: stretch; height: fit-content; text-align: center; align-items: center; transition: outline 0.1s; background: var(--white); color: var(--gray-text); border-radius: .25rem; border: none; outline: .125rem solid var(--gray-300); max-width: 20.5rem; }

#ugdgSelectPlan .planCard:hover { outline: .25rem solid var(--primary); background: var(--white); cursor: pointer; }
#ugdgSelectPlan .planCard:focus { outline: .25rem solid var(--secondary); background: var(--white); cursor: pointer; }
#ugdgSelectPlan .planCard:active,
#ugdgSelectPlan .planCard.active { outline: .25rem solid var(--secondary); background: var(--gray-300); }

/* method banners */
#ugdgPlanCardMethods .productCardBanner { width: 100%; border-top-left-radius: .2rem; border-top-right-radius: .2rem; vertical-align: middle; font-size: .875rem; text-align: left; }
#ugdgPlanCardMethods .productCardBanner img { height: 1rem; width: 1rem; }
#ugdgPlanCardMethods .prepaidBkgdColor { background: var(--prepaid-200); }
#ugdgPlanCardMethods .prepaidTextColor { color: var(--prepaid); }
#ugdgPlanCardMethods .billedBkgdColor { background: var(--billed-200); }
#ugdgPlanCardMethods .billedTextColor { color: var(--billed); }

/* plan card photos */
#ugdgPlanCardImages #productCardPhotos { width: auto; max-width: 100%; height: auto; }
#ugdgPlanCardImages #productCardPhotos img { width: 100%; height: auto; min-height: 6.25rem; margin: 0 auto; }

/* product title */
#ugdgPlanCardTitle h5 { line-height: 1.25; text-overflow: ellipsis; white-space: pre-wrap; overflow: hidden; height: 3.125rem; margin: 0; vertical-align: middle; align-content: center; text-overflow: ellipsis; }

/* product price */
#ugdgPlanCardPrice { color: var(--gray-text); font-weight: 700; text-align: center; }
#ugdgPlanCardPrice .planCardPriceCaption { font-size: .75rem; text-transform: uppercase; font-weight: 500; margin: 0; }
#ugdgPlanCardPrice .planCardPriceDollars { position: relative; top: -.375rem; color: var(--gray-text); font-weight: 700; }

/* promo code */
#ugdgPlanCardPromo p { font-size: .75rem; text-transform: uppercase; color: var(--secondary); margin: 0; }
#ugdgPlanCardPromo .popover { width: 10rem; }
#ugdgPlanCardPromo .popover li { font-size: .75rem; font-weight: 700; color: var(--secondary); text-transform: uppercase; text-align: left; padding: 0; }

/* product marketing text */
#ugdgPlanCardDetails hr { width: 100%; margin: 0 1rem 1rem !important; }

/* product consumer labels */
#ugdgPlanCardLabels .bcl_widget-container { margin: 0; font-size: .75rem; text-align: left; }

/* link to open consumer label */
#ugdgSelectPlan .configPlanName .consumer-label-link { margin-left: 0; }

/* UGUD: Configure Services ------------------------------------------------- */

/* head */
#ugdgConfigureServices .configPlanHead { display: flex; background: var(--primary); padding: .5rem !important; border-top-left-radius: .2rem; border-top-right-radius: .2rem; }
#ugdgConfigureServices .configPlanHead .btn-light.consumer-label-link { min-height: auto !important; border-radius: .125rem; border: 0; padding: .125rem; width: 7.5rem; display: inline; }

#ugdgConfigureServices .configPlanLogo { width: 2rem; height: 2rem; margin-right: .75rem; align-content: center; text-align: center; }
#ugdgConfigureServices .configPlanLogo img { max-width: 100%; height: auto; text-align: center; vertical-align: middle; }

#ugdgConfigureServices .configPlanName { width: calc(100% - 2.75rem); align-content: center; }
#ugdgConfigureServices .configPlanName h5 { display: block; color: var(--white); font-weight: bold; margin-bottom: 0; }

/* body */
#ugdgConfigureServices .configPlanBody { padding: 1rem; border: .0625rem solid var(--gray-300); border-top: 0; border-bottom-left-radius: .2rem; border-bottom-right-radius: .2rem; }

#ugdgConfigureServices .configPlanBody .panelHeaders { display: none; }

#ugdgConfigureServices .configPlanBody .panelContent { width: 100%; align-items: center; font-size: 1rem; min-height: 3.375rem; padding: 0 0 .5rem 0; }

#ugdgConfigureServices .configPlanBody .colDesc { text-align: left; width: 100%; display: inline-block; white-space: pre-line; word-break: break-word; align-content: center; line-height: normal; }
#ugdgConfigureServices .configPlanBody .colDesc .selectedIndicator > i { font-size: 1.0625rem; color: var(--gray-text); }
#ugdgConfigureServices .configPlanBody .colDesc .selectedIndicator { display: inline-block; width: 1.25rem; height: 1.0625rem; align-self: center; }

#ugdgConfigureServices .configPlanBody .colQuantity { text-align: center; padding: .25rem .5rem; width: 100%; display: inline-block; font-size: .875rem; vertical-align: middle; }

#ugdgConfigureServices .configPlanBody .colPerItem { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#ugdgConfigureServices .configPlanBody .colPerItem::before { content: 'Per Item'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; font-style: normal; }

#ugdgConfigureServices .configPlanBody .colPrice { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#ugdgConfigureServices .configPlanBody .colPrice::before { content: 'Price'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; font-style: normal; }

#ugdgConfigureServices .configPlanBody .colFrequency { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#ugdgConfigureServices .configPlanBody .colFrequency::before { content: 'Frequency'; text-align: left; font-weight: 700; float: left; margin-right: auto; font-style: normal; }

/* tiers */
#ugdgConfigureServices .configPlanBody .compLevelOne { display: block; width: 100% !important; padding: 0; margin: 0; border-top: .0625rem solid var(--gray-300) !important; }
#ugdgConfigureServices .configPlanBody .compLevelTwo { display: block; width: calc(100% - 1.5rem) !important; margin-left: 1.5rem !important; padding: 0; }
#ugdgConfigureServices .configPlanBody .row:nth-child(2) { border-top: 0 !important; }

/* Offering Level */
#ugdgConfigureServices .configPlanBody .compLevelOne .panelContent { border-bottom: .0625rem solid var(--gray-700); align-content: center; }
#ugdgConfigureServices .configPlanBody .compLevelOne .panelContent .colDesc { background: var(--secondary-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--secondary); }

/* Component Level 1 */
#ugdgConfigureServices .configPlanBody .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-600); align-content: center; }
#ugdgConfigureServices .configPlanBody .compLevelTwo .panelContent .colDesc { background: var(--primary-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--primary); }

/* Component Level 2 */
#ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-500); }
#ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--accent-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--accent); }

/* Component Level 3 */
#ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
#ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-300); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--gray-700); }

/* Component Level 4 */
#ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
#ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-200); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 400; color: var(--gray-600); }

/* Component Level 5 */
#ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
#ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 400; color: var(--gray-500); }

/* totals */
#ugdgConfigureServices .configPlanBody .compSubtotal { padding-bottom: .75rem; align-content: center; }
#ugdgConfigureServices .configPlanBody .compSubtotal .colDesc { padding-left: 0; font-size: .875rem; color: var(--primary); }
#ugdgConfigureServices .configPlanBody .compSubtotal .colPrice { padding-left: 0; padding-right: 0; }
#ugdgConfigureServices .configPlanBody .compSubtotal .colFrequency { padding-left: 0; padding-right: 0; }

#ugdgConfigureServices .configPlanBody .main-name { font-weight: 700; color: var(--primary); text-transform: uppercase; }
#ugdgConfigureServices .configPlanBody .sub-name { font-weight: 400; color: var(--gray-text); }
#ugdgConfigureServices .configPlanBody .main-price { font-weight: 700; }
#ugdgConfigureServices .configPlanBody .neg-price { color: var(--danger) !important; }

/* quantity value */
#ugdgConfigureServices .quantityValue { display: block; width: 100%; }
#ugdgConfigureServices .quantityValue .qtyLabel { display: inline-block; text-align: left; float: left; font-weight: 700; font-style: normal; }
#ugdgConfigureServices .quantityValue .qtyValue { display: inline-block; text-align: right; float: right; }

/* quantity widget */
#ugdgConfigureServices .quantityWidget { display: flex; align-items: center; border: 0; border-radius: .25rem; margin: 0; justify-content: center; }
#ugdgConfigureServices .quantityWidget .form-control { display: inline-block; text-align: center; width: 2.625rem; height: 2.625rem !important; vertical-align: middle; margin: 0; padding: .5rem .25rem; }
#ugdgConfigureServices .quantityWidget .form-control:disabled,
#ugdgConfigureServices .quantityWidget .form-control.disabled,
#ugdgConfigureServices .quantityWidget .btn-quantity:disabled,
#ugdgConfigureServices .quantityWidget .btn-quantity.disabled { opacity: .5; cursor: none; }

#ugdgConfigureServices .quantityWidget .btn-quantity { background: transparent; border: transparent; display: inline-block; text-align: center; vertical-align: middle; font-size: 1rem; padding: .25rem; height: 2.625rem !important; width: 2.625rem !important; margin: 0; }
#ugdgConfigureServices .quantityWidget .btn-quantity:hover { background: var(--gray-200); }
#ugdgConfigureServices .quantityWidget .btn-quantity:focus { background: var(--gray-300); }
#ugdgConfigureServices .quantityWidget .btn-quantity:active,
#ugdgConfigureServices .quantityWidget .btn-quantity.active { background: var(--primary); }

#ugdgConfigureServices .quantityWidget .btn-quantity > i { color: var(--primary); font-size: 1.25rem; vertical-align: middle; }
#ugdgConfigureServices .quantityWidget .btn-quantity:hover > i { color: var(--primary-600); }
#ugdgConfigureServices .quantityWidget .btn-quantity:focus > i { color: var(--primary-700); }
#ugdgConfigureServices .quantityWidget .btn-quantity:active > i,
#ugdgConfigureServices .quantityWidget .btn-quantity.active > i { color: var(--white) }

#ugdgConfigureServices .configPlanBody hr { height: .125rem !important; }

@media (min-width: 768px) {
  /* head */
  #ugdgConfigureServices .configPlanHead { padding: .75rem !important; }

  /* body */
  #ugdgConfigureServices .configPlanBody { padding: 1rem; border: .0625rem solid var(--gray-300); border-top: 0; border-bottom-left-radius: .2rem; border-bottom-right-radius: .2rem; }

  #ugdgConfigureServices .configPlanBody .panelHeaders { display: flex; width: 100%; font-weight: 700; align-items: center; font-size: 1rem; padding-bottom: .5rem; border-bottom: .125rem solid var(--gray-300); margin-bottom: 0; min-height: 2.625rem; }

  #ugdgConfigureServices .configPlanBody .panelContent { width: 100%; align-items: center; font-size: 1rem; min-height: 3.375rem; padding: 0; }

  /* columns */
  #ugdgConfigureServices .configPlanBody .colDesc { width: calc(100% - 27.625rem); }

  #ugdgConfigureServices .configPlanBody .colQuantity { text-align: center; padding: 0 .25rem; width: 8.625rem; font-size: 1rem; }

  #ugdgConfigureServices .configPlanBody .colPerItem { text-align: right; padding: 0 .25rem; width: 6rem; font-size: 1rem; }
  #ugdgConfigureServices .configPlanBody .colPerItem::before { display: none; }

  #ugdgConfigureServices .configPlanBody .colPrice { text-align: right; padding: 0 .25rem; width: 6rem; font-size: 1rem; }
  #ugdgConfigureServices .configPlanBody .colPrice::before { display: none; }

  #ugdgConfigureServices .configPlanBody .colFrequency { text-align: right; padding: 0 0 0 .25rem; width: 7rem; font-size: 1rem; border-bottom: 0; }
  #ugdgConfigureServices .configPlanBody .colFrequency::before { display: none; }

  /* tiers */
  #ugdgConfigureServices .configPlanBody .compLevelOne { display: block; width: 100% !important; padding: 0; margin: 0; border-top: .0625rem solid var(--gray-300) !important; }
  #ugdgConfigureServices .configPlanBody .compLevelTwo { display: block; width: calc(100% - 1.5rem) !important; margin-left: 1.5rem !important; padding: 0; }
  #ugdgConfigureServices .configPlanBody .row:nth-child(2) { border-top: 0 !important; }

  /* Offering Level */
  #ugdgConfigureServices .configPlanBody .compLevelOne .panelContent { border-bottom: .0625rem solid var(--gray-700); }
  #ugdgConfigureServices .configPlanBody .compLevelOne .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--secondary); }

  /* Component Level 1 */
  #ugdgConfigureServices .configPlanBody .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-600); }
  #ugdgConfigureServices .configPlanBody .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--primary); }

  /* Component Level 2 */
  #ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-500); }
  #ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--accent); }

  /* Component Level 3 */
  #ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
  #ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--gray-700); }

  /* Component Level 4 */
  #ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
  #ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 400; color: var(--gray-600); }

  /* Component Level 5 */
  #ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
  #ugdgConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 400; color: var(--gray-500); }

  /* totals */
  #ugdgConfigureServices .configPlanBody .compSubtotal { padding-bottom: .75rem; align-content: center; }
  #ugdgConfigureServices .configPlanBody .compSubtotal .colDesc { font-size: 1rem; }
  #ugdgConfigureServices .configPlanBody .compSubtotal .colPrice { font-size: 1rem; padding-right: .25rem; }

  #ugdgConfigureServices .configPlanBody .main-name { font-weight: 700; color: var(--primary); }
  #ugdgConfigureServices .configPlanBody .sub-name { font-weight: 400; color: var(--gray-text); }
  #ugdgConfigureServices .configPlanBody .main-price { font-weight: 700; }
  #ugdgConfigureServices .configPlanBody .neg-price { color: var(--danger) !important; }

  /* quantity value */
  #ugdgConfigureServices .quantityValue { display: block; width: 100%; }
  #ugdgConfigureServices .quantityValue .qtyLabel { display: none }
  #ugdgConfigureServices .quantityValue .qtyValue { display: block; text-align: center; float: none; }
}

/* shopping cart */
#ugdgConfigureServicesCart { background: var(--gray-100); border: .0625rem solid var(--gray-300); padding: 1rem; border-radius: .25rem; }

#ugdgConfigureServicesCart .shoppingCartHead { width: 100%; }
#ugdgConfigureServicesCart .shoppingCartHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#ugdgConfigureServicesCart .shoppingCartHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }

#ugdgConfigureServicesCart .shoppingCartBody { width: 100%; background: var(--white); border-radius: .25rem; border: .0625rem solid var(--gray-300); padding: 1rem; font-size: 1rem; }
#ugdgConfigureServicesCart .shoppingCardBody .col-8 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-word; }
#ugdgConfigureServicesCart .shoppingCardBody .main-name { font-weight: 700; color: var(--primary); padding-left: 0.5rem !important; }
#ugdgConfigureServicesCart .shoppingCardBody .sub-name { font-weight: 400; color: var(--gray-text); }
#ugdgConfigureServicesCart .shoppingCardBody .main-price { font-weight: 700; }
#ugdgConfigureServicesCart .neg-price { color: var(--danger) !important; }

/* remove button */
#ugdgConfigureServicesCart .shoppingCardBody .btn-remove { color: var(--white); background-color: var(--danger); border-color: var(--danger); }
#ugdgConfigureServicesCart .shoppingCardBody .btn-remove:hover { color: var(--white); background-color: var(--danger-600); border-color: var(--danger-600); }
#ugdgConfigureServicesCart .shoppingCardBody .btn-remove:focus { color: var(--white); background-color: var(--danger-600); border-color: var(--danger-700); box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgb), 0.5); }
#ugdgConfigureServicesCart .shoppingCardBody .btn-remove:active,
#ugdgConfigureServicesCart .shoppingCardBody .btn-remove.active { color: var(--white); background-color: var(--danger-600); border-color: var(--danger-700); }
#ugdgConfigureServicesCart .shoppingCardBody .btn-remove:disabled,
#ugdgConfigureServicesCart .shoppingCardBody .btn-remove.disabled { opacity: .5; cursor: none; }
#ugdgConfigureServicesCart .shoppingCardBody .btn-remove > i { color: var(--white); cursor: none; }

/* option cards */
#ugdgConfigureServicesOptions #configResidentialPhone .card,
#ugdgConfigureServicesOptions #configResidentialCallerId .card,
#ugdgConfigureServicesOptions #configResidentialDiretory .card,
#ugdgConfigureServicesOptions #configResidentialInternet .card,
#ugdgConfigureServicesOptions #configResidentialEmail .card { margin-top: 0 !important; margin-bottom: 1rem; }

/* option subtitle */
#ugdgConfigureServicesOptions #configResidentialPhone .card > .col-12 > div > .row > .section-subtitle,
#ugdgConfigureServicesOptions #configResidentialCallerId .card > .col-12 > div > .row > .section-subtitle,
#ugdgConfigureServicesOptions #configResidentialDirectory .card > .col-12 > div > .row > .section-subtitle,
#ugdgCconfigureServicesOptions #configResidentialInternet .card > .col-12 > div > .row > .section-subtitle,
#ugdgConfigureServicesOptions #configResidentialEmail .card > .col-12 > div > .row > .section-subtitle { padding: 0 !important; width: 100%; }

/* phone */
#ugdgConfigureServicesOptions #configResidentialPhone .form-check.custom-control { padding: .5rem .75rem !important; border: .0625rem solid var(--gray-200) !important; height: 2.625rem !important; }
#ugdgConfigureServicesOptions #configResidentialPhone .form-check-label { padding: .125rem .75rem .125rem 1.875rem !important; margin-bottom: 0 !important; }
#ugdgConfigureServicesOptions #configResidentialPhone .form-check-input { margin-left: -.125rem; top: .25rem !important; }

#ugdgConfigureServicesOptions #configResidentialPhone .ng-autocomplete.input-group { align-self: flex-start; top: .0625rem; }
#ugdgConfigureServicesOptions #configResidentialPhone .ng-autocomplete.input-group .ng-autocomplete { width: calc(100% - 2.625rem); z-index: 999; align-content: flex-start; margin-top: 0; }
#ugdgConfigureServicesOptions #configResidentialPhone .ng-autocomplete.input-group .autocomplete-container .input-container input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: 0 !important; }
#ugdgConfigureServicesOptions #configResidentialPhone .ng-autocomplete.input-group .autocomplete-container .suggestions-container { width: calc(100% + 2.625rem); z-index: 999; max-height: 5rem; }
#ugdgConfigureServicesOptions #configResidentialPhone .ng-autocomplete.input-group-append { width: 2.625rem; }

#ugdgConfigureServicesOptions #configResidentialPhone .ng-autocomplete.input-group.searchFields .input-group-append,
#ugdgConfigureServicesOptions #configResidentialPhone .ng-autocomplete.input-group .searchFields .input-group-append { margin-top: 0 !important; }

/* right to modify */
#ugdgConfigureServicesOptions #configResidentialPhone .form-check.custom-control.productOptionAgreement { padding: 0 !important; border: 0 !important; height: 100% !important; }
#ugdgConfigureServicesOptions #configResidentialPhone .productOptionAgreement > .form-check-label.agreementText { padding: .125rem 0 .125rem 2.5rem !important; margin-bottom: 0 !important; }
#ugdgConfigureServicesOptions #configResidentialPhone .productOptionAgreement > .form-check-input { margin-left: -.125rem; top: .0625rem !important; }

/* caller id */
#ugdgConfigureServicesOptions #configCallerId .form-check.custom-control { padding: .5rem .75rem !important; border: .0625rem solid var(--gray-200) !important; height: 2.625rem !important; }
#ugdgConfigureServicesOptions #configCallerId .form-check-label { padding: .125rem .75rem .125rem 1.875rem !important; margin-bottom: 0 !important; }
#ugdgConfigureServicesOptions #configCallerId .form-check-input { margin-left: -.125rem; top: .25rem !important; }

/* custom caller id */
#ugdgConfigureServicesOptions .form-check.custom-control#customCallerID { height: auto !important; }
#ugdgConfigureServicesOptions .form-check.custom-control#customCallerID .form-check-label { padding-top: .325rem !important; }
#ugdgConfigureServicesOptions #customCallerID .form-check-input { margin-top: 0; }
#ugdgConfigureServicesOptions #customCallerID .form-control { position: relative; top: 0; left: 0; margin: 0; width: 100%; }

/* directory */
#ugdgConfigureServicesOptions #configDirectory .form-check.custom-control { padding: .5rem .75rem !important; border: .0625rem solid var(--gray-200) !important; height: 2.625rem !important; }
#ugdgConfigureServicesOptions #configDirectory .form-check-label { padding: .125rem .75rem .125rem 1.875rem !important; margin-bottom: 0 !important; }
#ugdgConfigureServicesOptions #configDirectory .form-check-input { margin-left: -.125rem; top: .25rem !important; }

/* internet */
#ugdgConfigureServicesOptions #configResidentialInternet .form-check.custom-control { padding: .5rem .75rem !important; border: .0625rem solid var(--gray-200) !important; height: 2.625rem !important; }
#ugdgConfigureServicesOptions #configResidentialInternet .form-check-label { padding: .125rem .75rem .125rem 1.875rem !important; margin-bottom: 0 !important; }
#ugdgConfigureServicesOptions #configResidentialInternet .form-check-input { margin-left: -.125rem; top: .25rem !important; }

/* email */
#ugdgConfigureServicesOptions #standardEmailConfiguration .input-group-append { padding: .5rem .75rem .5rem .75rem !important; }

#ugdgConfigureServicesOptions #configResidentialEmail .form-check.custom-control { padding: .5rem .75rem !important; border: .0625rem solid var(--gray-200) !important; height: 2.625rem !important; }
#ugdgConfigureServicesOptions #configResidentialEmail .form-check-label { padding: .125rem .75rem .125rem 1.875rem !important; margin-bottom: 0 !important; }
#ugdgConfigureServicesOptions #configResidentialEmail .form-check-input { margin-left: -.125rem; top: .25rem !important; }

/* UGDG: Review Order (Receipt View is NANO) -------------------------------- */

/* head */
#ugdgReviewOrder .reviewPlanHead { display: flex; background: var(--primary); padding: .5rem !important; border-top-left-radius: .2rem; border-top-right-radius: .2rem; }
#ugdgReviewOrder .reviewPlanHead .btn-light.consumer-label-link { min-height: auto !important; border-radius: .125rem; border: 0; padding: .125rem; width: 7.5rem; display: inline; }

#ugdgReviewOrder .reviewPlanLogo { width: 2rem; height: 2rem; margin-right: .75rem; align-content: center; text-align: center; }
#ugdgReviewOrder .reviewPlanLogo img { max-width: 100%; height: auto; text-align: center; vertical-align: middle; }

#ugdgReviewOrder .reviewPlanName { width: calc(100% - 2.75rem); align-content: center; }
#ugdgReviewOrder .reviewPlanName h5 { display: block; color: var(--white); font-weight: bold; margin-bottom: 0; }
#ugdgReviewOrder .reviewPlanName .consumer-label-link { margin-left: 0; }

/* body */
#ugdgReviewOrder .reviewPlanBody { padding: 1rem; border: .0625rem solid var(--gray-300); border-top: 0; border-bottom-left-radius: .2rem; border-bottom-right-radius: .2rem; }

#ugdgReviewOrder .reviewPlanBody .panelHeaders { display: none; }

#ugdgReviewOrder .reviewPlanBody .panelContent { width: 100%; align-items: center; font-size: 1rem; min-height: 3.375rem; padding: 0 0 .5rem 0; }

#ugdgReviewOrder .reviewPlanBody .panelFooters { width: 100%; font-weight: bold; align-items: center; font-size: 1rem; padding-top: .5rem; border-top: .125rem solid var(--gray-300); margin-top: -.5625rem; min-height: 2.625rem; }
#ugdgReviewOrder .reviewPlanBody .panelFooters .colSubtotal { width: calc(100% - 13rem); display: inline-block; }
#ugdgReviewOrder .reviewPlanBody .panelFooters .colPrice { width: 13rem; display: inline-block; }
#ugdgReviewOrder .reviewPlanBody .panelFooters .colPrice::before { display: none; }
#ugdgReviewOrder .reviewPlanBody .panelFooters .colFrequency { display: none; }

/* columns */
#ugdgReviewOrder .reviewPlanBody .colDesc { text-align: left; width: 100%; display: inline-block; white-space: pre-line; word-break: break-word; align-content: center; line-height: normal; }

#ugdgReviewOrder .reviewPlanBody .colQuantity { text-align: right; padding: 0 .5rem; width: 100%; display: inline-block; font-size: .875rem; }
#ugdgReviewOrder .reviewPlanBody .colQuantity::before { content: 'Quantity'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; font-style: normal; }

#ugdgReviewOrder .reviewPlanBody .colPerItem { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#ugdgReviewOrder .reviewPlanBody .colPerItem::before { content: 'Per Item'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; font-style: normal; }

#ugdgReviewOrder .reviewPlanBody .colPrice { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#ugdgReviewOrder .reviewPlanBody .colPrice::before { content: 'Price'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; font-style: normal; }

#ugdgReviewOrder .reviewPlanBody .colFrequency { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#ugdgReviewOrder .reviewPlanBody .colFrequency::before { content: 'Frequency'; text-align: left; font-weight: 700; float: left; margin-right: auto; font-style: normal; }

/* tiers */
#ugdgReviewOrder .reviewPlanBody .compLevelOne { display: block; width: 100% !important; padding: 0; margin: 0; border-top: .0625rem solid var(--gray-300) !important; }
#ugdgReviewOrder .reviewPlanBody .compLevelTwo { display: block; width: calc(100% - 1.5rem) !important; margin-left: 1.5rem !important; padding: 0; }
#ugdgReviewOrder .reviewPlanBody .row:nth-child(2) { border-top: 0 !important; }

/* Offering Level */
#ugdgReviewOrder .reviewPlanBody .compLevelOne .panelContent { border-bottom: .0625rem solid var(--gray-700); align-content: center; }
#ugdgReviewOrder .reviewPlanBody .compLevelOne .panelContent .colDesc { background: var(--secondary-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--secondary); }

/* Component Level 1 */
#ugdgReviewOrder .reviewPlanBody .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-600); align-content: center; }
#ugdgReviewOrder .reviewPlanBody .compLevelTwo .panelContent .colDesc { background: var(--primary-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--primary); }

/* Component Level 2 */
#ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-500); }
#ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--accent-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--accent); }

/* Component Level 3 */
#ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
#ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-300); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--gray-700); }

/* Component Level 4 */
#ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
#ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-200); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 400; color: var(--gray-600); }

/* Component Level 5 */
#ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
#ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 400; color: var(--gray-500); }

/* totals */
#ugdgReviewOrder .reviewPlanBody .compSubtotal { padding-bottom: 0; align-content: center; }
#ugdgReviewOrder .reviewPlanBody .compSubtotal .colDesc { padding-left: 0; font-size: .875rem; color: var(--primary); }
#ugdgReviewOrder .reviewPlanBody .compSubtotal .colPrice { padding-left: 0; padding-right: 0; }
#ugdgReviewOrder .reviewPlanBody .compSubtotal .colFrequency { padding-left: 0; padding-right: 0; }

#ugdgReviewOrder .reviewPlanBody .main-name { font-weight: 700; color: var(--primary); text-transform: uppercase; }
#ugdgReviewOrder .reviewPlanBody .sub-name { font-weight: 400; color: var(--gray-text); }
#ugdgReviewOrder .reviewPlanBody .main-price { font-weight: 700; }
#ugdgReviewOrder .reviewPlanBody .neg-price { color: var(--danger) !important; }

#ugdgReviewOrder .reviewPlanBody hr { height: .125rem !important; }

@media (min-width: 768px) {
  /* body */
  #ugdgReviewOrder .reviewPlanBody { padding: 1rem; border: .0625rem solid var(--gray-300); border-top: 0; border-bottom-left-radius: .2rem; border-bottom-right-radius: .2rem; }

  #ugdgReviewOrder .reviewPlanBody .panelHeaders { display: flex; width: 100%; font-weight: bold; align-items: center; font-size: 1rem; padding-bottom: .5rem; border-bottom: .125rem solid var(--gray-300); margin-bottom: 0; min-height: 2.625rem; }

  #ugdgReviewOrder .reviewPlanBody .panelContent { width: 100%; align-items: center; font-size: 1rem; min-height: 1.6875rem; padding: 0; }

  #ugdgReviewOrder .reviewPlanBody .panelFooters { width: 100%; font-weight: bold; align-items: center; font-size: 1rem; padding-top: .5rem; border-top: .125rem solid var(--gray-300); margin-top: .5rem; min-height: 2.625rem; }
  #ugdgReviewOrder .reviewPlanBody .panelFooters .colSubtotal { width: calc(100% - 13rem); display: inline-block; }
  #ugdgReviewOrder .reviewPlanBody .panelFooters .colPrice { text-align: right; padding: 0; width: 6rem; display: inline-block; font-size: .875rem; }
  #ugdgReviewOrder .reviewPlanBody .panelFooters .colPrice::before { display: none; }
  #ugdgReviewOrder .reviewPlanBody .panelFooters .colFrequency { display: inline-block; width: 7rem; }

  /* columns */
  #ugdgReviewOrder .reviewPlanBody .colDesc { padding: 0 .25rem; width: calc(100% - 28.625rem); }

  #ugdgReviewOrder .reviewPlanBody .colQuantity { text-align: center; padding: 0 .25rem; width: 9.625rem; font-size: 1rem; }
  #ugdgReviewOrder .reviewPlanBody .colQuantity::before { display: none; }

  #ugdgReviewOrder .reviewPlanBody .colPerItem { text-align: right; padding: 0 .25rem; width: 6rem; font-size: 1rem; }
  #ugdgReviewOrder .reviewPlanBody .colPerItem::before { display: none; }

  #ugdgReviewOrder .reviewPlanBody .colPrice { text-align: right; padding: 0 .25rem; width: 6rem; font-size: 1rem; }
  #ugdgReviewOrder .reviewPlanBody .colPrice::before { display: none; }

  #ugdgReviewOrder .reviewPlanBody .colFrequency { text-align: right; padding: 0 0 0 .25rem; width: 7rem; font-size: 1rem; border-bottom: 0; }
  #ugdgReviewOrder .reviewPlanBody .colFrequency::before { display: none; }

  /* tiers */
  #ugdgReviewOrder .reviewPlanBody .compLevelOne { display: block; width: 100% !important; padding: 0; margin: 0; border-top: .0625rem solid var(--gray-300) !important; }
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo { display: block; width: calc(100% - 1.5rem) !important; margin-left: 1.5rem !important; padding: 0; }
  #ugdgReviewOrder .reviewPlanBody .row:nth-child(2) { border-top: 0 !important; }

  /* Offering Level */
  #ugdgReviewOrder .reviewPlanBody .compLevelOne .panelContent { border-bottom: .0625rem solid var(--gray-700); }
  #ugdgReviewOrder .reviewPlanBody .compLevelOne .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--secondary); }

  /* Component Level 1 */
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-600); }
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--primary); }

  /* Component Level 2 */
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-500); }
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--accent); }

  /* Component Level 3 */
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--gray-700); }

  /* Component Level 4 */
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 400; color: var(--gray-600); }

  /* Component Level 5 */
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
  #ugdgReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 400; color: var(--gray-500); }

  /* totals */
  #ugdgReviewOrder .reviewPlanBody .compSubtotal { padding-bottom: 0; align-content: center; }
  #ugdgReviewOrder .reviewPlanBody .compSubtotal .colDesc { font-size: 1rem; width: calc(100% - 13rem); }
  #ugdgReviewOrder .reviewPlanBody .compSubtotal .colPrice { font-size: 1rem; padding-right: .25rem; }

  #ugdgReviewOrder .reviewPlanBody .main-name { font-weight: 700; color: var(--primary); }
  #ugdgReviewOrder .reviewPlanBody .sub-name { font-weight: 400; color: var(--gray-text); }
  #ugdgReviewOrder .reviewPlanBody .main-price { font-weight: 700; }
  #ugdgReviewOrder .reviewPlanBody .neg-price { color: var(--danger) !important; }
}

/* summary of charges */
#ugdgSummaryCharges { background: var(--gray-100); border: .0625rem solid var(--gray-300); padding: 1rem; border-radius: .25rem; }

#ugdgSummaryCharges .summaryChargesHead { width: 100%; }
#ugdgSummaryCharges .summaryChargesHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); margin-bottom: .5rem; }
#ugdgSummaryCharges .summaryChargesHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#ugdgSummaryCharges .summaryChargesBody { width: 100%; font-size: 1rem; }
#ugdgSummaryCharges .summaryChargesFoot { border-top: .125rem solid var(--gray-300); margin-top: .5rem; padding-top: .5rem; font-size: 1rem; color: var(--primary); text-transform: uppercase; font-weight: 700; }

/* schedule installation */
#ugdgScheduleInstall { background: var(--gray-100); border: .0625rem solid var(--gray-300); padding: 1rem; border-radius: .25rem; }
#ugdgScheduleInstall .scheduleInstallHead { width: 100%; }
#ugdgScheduleInstall .scheduleInstallHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#ugdgScheduleInstall .scheduleInstallHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#ugdgScheduleInstall .scheduleInstallBody { width: 100%; font-size: 1rem; }
#ugdgScheduleInstall .scheduleInstallBody .input-datepicker { width: 100%; max-width: 100%; }
#ugdgScheduleInstall .scheduleInstallBody .input-datepicker > .form-control:not(:last-child) { border-right: 0 !important; border-radius: .25rem; }
#ugdgScheduleInstall .scheduleInstallBody .form-select { border-right: 0 !important; font-size: 1rem; font-family: 'Roboto', sans-serif !important; }
#ugdgScheduleInstall .scheduleInstallBody .input-group-append { background: var(--white) !important; position: absolute; right: 0; top: 0; background: var(--white); border-left: 0; }
#ugdgScheduleInstall .scheduleInstallBody .input-group-append:not(:last-child) > .input-group-text { position: absolute; right: 0; top: 0; background: transparent; }

/* add promo code */
#ugdgPromoCode { background: var(--gray-100); border: .0625rem solid var(--gray-300); padding: 1rem; border-radius: .25rem; }
#ugdgPromoCode .promoCodeHead { width: 100%; }
#ugdgPromoCode .promoCodeHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#ugdgPromoCode .promoCodeHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#ugdgPromoCode .promoCodeBody { width: 100%; font-size: 1rem; }

/* manage autopay */
#ugdgSetUpAutoPay { background: var(--gray-100); border: .0625rem solid var(--gray-300); padding: 1rem; border-radius: .25rem; }
#ugdgSetUpAutoPay .setUpAutoPayHead { width: 100%; }
#ugdgSetUpAutoPay .setUpAutoPayHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#ugdgSetUpAutoPay .setUpAutoPayHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#ugdgSetUpAutoPay .setUpAutoPayBody { width: 100%; font-size: 1rem; }
#ugdgSetUpAutoPay .setUpAutoPayBody #payment-method-div .input-group { width: 100%; min-height:1.51rem;}
#ugdgSetUpAutoPay .setUpAutoPayBody #payment-date-div .input-group { width: auto; min-height:1.51rem;}
#ugdgSetUpAutoPay .setUpAutoPayBody .form-select { border-right: 0 !important; font-size: 1rem; font-family: 'Roboto', sans-serif !important; width: 100%; }
#ugdgSetUpAutoPay .setUpAutoPayBody .input-group-append { background: var(--white) !important; position: absolute; right: 0; top: 0; background: var(--white); border-left: 0; height: 100%; }
#ugdgSetUpAutoPay .setUpAutoPayBody .input-group-append:not(:last-child) > .input-group-text { position: absolute; right: 0; top: 0; background: transparent; }


/* -----------------------------------------------------------------------------
    NANO & UGDG: Shared Components (2024)
----------------------------------------------------------------------------- */

/* NANO & UGDG: Flow Step Wrapper ------------------------------------------- */

.steps-wrapper { position: relative; padding: .25rem 0 1.25rem; display: flex; flex-direction: row; justify-content: space-between; }
.steps-wrapper ngb-tooltip-window.bs-tooltip-bottom .arrow,
.steps-wrapper ngb-tooltip-window.bs-tooltip-top .arrow { position: relative; left: calc(50% - .75rem) !important; bottom: 15px; }

.steps-wrapper .step { position: relative; height: 1.5rem; width: 1.5rem; border-radius: 50%; z-index: 100 !important; cursor: pointer; border: .1825rem solid transparent; }
.steps-wrapper .step-disabled { cursor: not-allowed; }

.steps-wrapper .step-number { position: relative; font-size: 1rem; font-weight: 700; text-align: center; vertical-align: middle; z-index: 10 !important; height: 1.5rem; width: 1.5rem; box-sizing: content-box; border-radius: 50%; top: -.325rem; left: -.325rem; border-style: solid; border-width: .1825rem; }
.steps-wrapper .step-future .step-number { color: var(--white); background: var(--gray-300); border-color: var(--white); }
.steps-wrapper .step-current .step-number { color: var(--primary); background: var(--white); border-color: var(--primary); }
.steps-wrapper .step-done .step-number { color: var(--white); background: var(--secondary); border-color: var(--secondary); }

.steps-wrapper .line { display: block; position: relative; height: .125rem; bottom: 1.325rem; z-index: 0 !important; }
.steps-wrapper .line-future { background: var(--gray-300); }
.steps-wrapper .line-current { background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); height: .25rem; }
.steps-wrapper .line-done { background: var(--secondary); height: .25rem; }
.steps-wrapper .line-none { display: none; }

/* NANO & UGDG: Flow Step Instructions -------------------------------------- */

.stepInstructions { display: block; border-radius: .25rem; border: .125rem solid var(--gray-400); background: var(--gray-300); color: var(--gray-text); line-height: 1.4; letter-spacing: .0325rem; }

.stepInstructions h5 { display: block; text-align: left; color: var(--secondary); font-weight: 700 !important; font-size: 1rem !important; margin-bottom: .5rem; }

.stepInstructions h6 { display: block; text-align: left; color: var(--gray-text); font-weight: 400 !important; font-size: .875rem !important; margin-bottom: .5rem; }
.stepInstructions h6 .btn-link { font-weight: 400 !important; font-size: .9375rem !important; }

.stepInstructions p { display: block; text-align: left; color: var(--gray-text); font-weight: 300 !important; font-size: .875rem !important; margin-bottom: .5rem; }
.stepInstructions p .btn-link { font-weight: 300 !important; font-size: .875rem !important; }

@media (min-width: 576px) {
  .stepInstructions h5 { text-align: center; }

  .stepInstructions h6,
  .stepInstructions h6 .btn-link { text-align: center; }

  .stepInstructions p,
  .stepInstructions p .btn-link { text-align: center; }
}

/* NANO & UGDG: Scroll-to-Top Button ---------------------------------------- */

#scrollToTopButton { position: fixed; z-index: 10000; left: .5rem; bottom: .5rem; }

/* NANO & UGDG: Consumer Label Accordions ----------------------------------- */

#offeringCardInternalConsumerLbl .card,
#offeringCardExternalConsumerLbl .card { padding: 0; border: 0; }
#offeringCardInternalConsumerLbl .card-body,
#offeringCardExternalConsumerLbl .card-body { padding: 0; border: 0; }
#offeringCardInternalConsumerLbl .btn-light::after,
#offeringCardExternalConsumerLbl .btn-light::after { content: '\f077'; font-family: 'Font Awesome 6 Pro Solid'; color: var(--primary); font-size: .75rem; float: right; }
#offeringCardInternalConsumerLbl .btn-light.collapsed::after,
#offeringCardExternalConsumerLbl .btn-light.collapsed::after { content: '\f078'; }

/* NANO & UGDG: Order Confirmation Screen ----------------------------------- */

#nanoOrderConfirmationScreen .planWrapper { border: .0625rem solid var(--gray-300); border-radius: .25rem; }

#nanoOrderConfirmationScreen .configPlanHead { background-color: var(--primary); border-bottom: .0625rem solid var(--gray-300); padding: .5rem 1rem !important; }

#nanoOrderConfirmationScreen .configPlanLogo,
#nanoOrderConfirmationScreen .configPlanName { display: inline-block; min-height: 1.5rem; vertical-align: middle; }
#nanoOrderConfirmationScreen .configPlanName h5 { display: inline-block; width: 100%; }

#nanoOrderConfirmationScreen .configPlanName .consumer-label-link { margin-left: 0; }
#nanoOrderConfirmationScreen p { line-height: 1.5; }


/* -----------------------------------------------------------------------------
    NANO: New Account New Order - Install Order (2024)
----------------------------------------------------------------------------- */

/* NANO: Marketing Carousel Wrapper ----------------------------------------- */

.carousel { background-image: url(../img/branding/textures/texture-marketingCarousel.png) !important; background-repeat: repeat-x !important; background-size: cover !important; z-index: 1000; background-color: var(--carousel-bkgd-color); border-bottom: .25rem solid var(--carousel-border-color); }

.carousel-item { max-height: 40vh; }
.carousel-item img { max-height: 100%; object-fit: contain; }

.carousel-caption { right: 7%; left: 53%; text-align: left; top: 0; bottom: 0; padding: .5rem; text-shadow: 0 0 .25rem rgba(var(--black-rgb), .5); align-content: center; }
.carousel-caption h1 { width: 100%; max-height: 6.25vh; color: var(--carousel-heading-color); font-size: 1rem; font-weight: 700; margin-bottom: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; word-wrap: break-word; white-space: normal; line-height: 1.2; }

.carousel-indicators { padding: .125rem; margin: 0 auto; height: 1.25rem; }
.carousel-indicators li { border-radius: 50%; width: .25rem; height: .25rem; margin: 0 .125rem; cursor: default; text-shadow: 0 0 .25rem rgba(var(--black-rgb), .5); }

.carousel-control-prev,
.carousel-control-next { width: 2rem; text-shadow: 0 0 .25rem rgba(var(--black-rgb), .5); }
.carousel-control-next-icon,
.carousel-control-prev-icon { width: 1rem; height: 1rem; text-shadow: 0 0 .25rem rgba(var(--black-rgb), .5); }

@media (min-width: 576px) {
  .carousel-caption { padding: .75rem; }
  .carousel-caption h1 { max-height: 12.25vh; -webkit-line-clamp: 3; font-size: 1.25rem; line-height: 1.3; }

  .carousel-indicators { padding: .25rem; margin: 0 .25rem; height: 1.5rem; }
  .carousel-indicators li { width: .25rem; height: .25rem; margin: 0 .25rem; }

  .carousel-control-prev,
  .carousel-control-next { width: 2.5rem; }
  .carousel-control-next-icon,
  .carousel-control-prev-icon { width: 1.25rem; height: 1.25rem; }
}

@media (min-width: 768px) {
  .carousel-caption { padding: 1rem; }
  .carousel-caption h1 { max-height: 8.125vh; -webkit-line-clamp: 2; margin-bottom: .5rem; font-size: 1.5rem; line-height: 1.2; }
  .carousel-caption h6 { width: 100%; max-height: 9.25vh; color: var(--carousel-caption-color); font-size: .75rem; margin-bottom: 0; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; word-break: break-word; word-wrap: break-word; white-space: normal; line-height: 1.4; text-overflow: ellipsis; }
}

@media (min-width: 1200px) {
  .carousel-caption h1 { margin-bottom: .75rem; font-size: 1.75rem; }
  .carousel-caption h6 { max-height: 12.25vh; font-size: 1rem; -webkit-line-clamp: 4; }

  .carousel-indicators { height: 2.25rem; }
  .carousel-indicators li { width: .5rem; height: .5rem; margin: 0 .25rem; }

  .carousel-control-prev,
  .carousel-control-next { width: 3rem; }
  .carousel-control-next-icon,
  .carousel-control-prev-icon { width: 1.5rem; height: 1.5rem; }
}

/* NANO: Check Availability ------------------------------------------------- */

#nanoSelectLocation .selectlocation {
  background: var(--gray-200) !important;
}
#nanoSelectLocation .form-check-label { font-size: .875rem !important; padding-left: .5rem; }

/* segment type */
#nanoSelectLocation .form-check.custom-control { border: .0625rem solid var(--gray-200) !important; width: 100%; }
#nanoSelectLocation .fa-home,
#nanoSelectLocation .fa-building { color: var(--gray-text) !important; }

/* account name */
#nanoSelectLocation .input-group .form-control { border-right: 0 !important; }
#nanoSelectLocation .input-group-append { background: var(--white); border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }
#nanoSelectLocation .input-group-append i { vertical-align: middle; }
#nanoSelectLocation .input-group .form-control.is-invalid { border-right: .0625rem solid var(--danger) !important; }
#nanoSelectLocation .form-select { width: 100%; padding: .5rem; display: block; }

/* search locations */
#nanoSearchLocations .dropdown-menu { width: 100%; max-height: calc(100vh - 38rem) !important; overflow-x: hidden; overflow-y: auto; padding-left: .5rem; padding-right: .5rem; }
#nanoSearchLocations .dropdown-menu .dropdown-item { white-space: pre-line; line-height: 1.2; word-break: break-word; padding-left: 1rem; padding-right: 1rem; }
#nanoSearchLocations .dropdown-menu .dropdown-item.active { background: var(--primary); }

/* your locations */
#nanoYourLocationsTable .form-check-label { font-size: .875rem !important; padding-left: .5rem; }
#nanoYourLocationsTable .table tbody,
#nanoYourLocationsTable .table tbody tr { border: 0; }
#nanoYourLocationsTable .table tbody tr td { padding: 0 0 .125rem !important; }
#nanoYourLocationsTable .table tbody tr td .text-truncate { font-size: .875rem; }
#nanoYourLocationsTable .table tbody tr td .form-check.custom-control { width: 100%; }
#nanoYourLocationsTable .table tbody tr td .noData { white-space: pre-line; word-break: break-word; word-wrap: break-word; }

/* buttons */
#nanoContactMeButton,
#nanoCheckAvailabilityButton,
#nanoResSubmitLead,
#nanoBusSubmitLead { width: 100% }

@media (min-width: 576px) {
  #nanoContactMeButton,
  #nanoCheckAvailabilityButton { width: 16rem !important; }
}

@media (min-width: 768px) {
  #nanoSelectLocation .form-check.custom-control { width: 13.75rem; }
}

/* NANO: Service Location Wrapper ------------------------------------------- */

#nanoServiceLocationNavshelf { font-size: .875rem; margin-bottom: .5rem; }
#nanoServiceLocationNavshelf .btn-link { width: 100%; font-size: .75rem; text-transform: uppercase; }
#nanoServiceLocationNavshelf .btn-link i { font-size: .875rem; text-decoration: none; }

@media (min-width: 768px) {
  #nanoServiceLocationNavshelf { font-size: .875rem; margin-bottom: 0; }
  #nanoServiceLocationNavshelf .btn-link { width: auto; }
}

/* NANO: Create Lead Wrapper ------------------------------------------------ */

#nanoCreateLead { width: 27rem; padding-left: .5rem !important; padding-right: .5rem !important; }
#nanoCreateLeadModal .dropdown { text-align: center; }
#nanoCreateLeadModal .dropdown-menu { width: 100%; }
#nanoCreateLead .d-inline-block { vertical-align: top; }

#nanoResSubmitLead,
#nanoBusSubmitLead { width: 100%; }

@media (max-width: 576px) {
  #nanoCreateLead { width: auto; }
}

@media (min-width: 768px) {
  #nanoCreateLeadModal .dropdown-menu { width: 28rem !important; }

  #nanoResSubmitLead,
  #nanoBusSubmitLead { width: auto !important; }
}

/* NANO: Select Speed & Services -------------------------------------------- */

#nanoSelectProducts .serviceCardsWrapper { display: flex; flex-flow: row wrap; align-items: stretch; gap: 1.125rem; height: auto; width: 100%; }

#nanoSelectProducts .serviceCard { justify-content: stretch; height: fit-content; text-align: center; align-items: center; transition: outline 0.1s; background: var(--white); color: var(--gray-text); border-radius: .5rem; border: none; outline: none; max-width: 15rem; }

#nanoSelectProducts .serviceCard:hover { outline: .25rem solid var(--primary); background: var(--white); cursor: pointer; }
#nanoSelectProducts .serviceCard:focus { outline: .25rem solid var(--secondary); background: var(--white); cursor: pointer; }
#nanoSelectProducts .serviceCard:active,
#nanoSelectProducts .serviceCard.active { outline: .25rem solid var(--secondary); background: var(--secondary); }

/* icon */
#nanoSelectProducts .serviceCard .icon { width: 100%; justify-content: center; align-content: center; }
#nanoSelectProducts .serviceCard .icon img { max-width: 4rem; max-height: 4rem; }

/* body */
#nanoSelectProducts .serviceCard .body { height: auto; width: 100%; }

/* body h3 */
#nanoSelectProducts .serviceCard .body h3 { color: var(--primary); font-weight: 700; margin-bottom: .5rem; line-height: 1.125; font-size: 1.5rem; white-space: nowrap; overflow: hidden; word-break: break-word; text-align: center; text-overflow: ellipsis; }
#nanoSelectProducts .serviceCard:hover .body h3 { color: var(--primary); }
#nanoSelectProducts .serviceCard:focus .body h3 { color: var(--secondary); }
#nanoSelectProducts .serviceCard:active .body h3,
#nanoSelectProducts .serviceCard.active .body h3 { color: var(--white); }

/* body p */
#nanoSelectProducts .serviceCard .body p { color: var(--gray-text); font-weight: 400; font-size: .875rem !important; line-height: 1.4; height: 2.5rem; white-space: pre-wrap; overflow: hidden; word-break: break-word; text-align: center; text-overflow: ellipsis; }
#nanoSelectProducts .serviceCard:hover .body p { color: var(--gray-text); }
#nanoSelectProducts .serviceCard:focus .body p { color: var(--gray-text); }
#nanoSelectProducts .serviceCard:active .body p,
#nanoSelectProducts .serviceCard.active .body p { color: var(--gray-200); }

/* buttons */
#nanoSelectProducts .serviceCard .btn-retainedService { color: var(--primary); background: var(--white); border-color: var(--primary); }
#nanoSelectProducts .serviceCard .btn-removedService { color: var(--danger); background: var(--white); border-color: var(--danger); }
#nanoSelectProducts .serviceCard .btn-addedService { color: var(--success); background: var(--white); border-color: var(--success); }
#nanoSelectProducts .serviceCard .btn-addService { color: var(--white); background: var(--success); border-color: var(--success); }
#nanoSelectProducts .serviceCard .btn-retainedService:disabled,
#nanoSelectProducts .serviceCard .btn-retainedService.disabled { cursor: none; opacity: .5; }
button, .btnChangeLocation { letter-spacing: .0625rem; text-transform: uppercase !important; font-weight: 500; cursor: pointer; line-height: .5; font-size: .875rem; border-radius: .25rem; border: .125rem solid transparent; text-align: center; vertical-align: middle; align-content: center; min-height: 1.5rem; min-width: 2.625rem; display: inline-block; color: var(--gray-text); text-decoration: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: transparent; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; box-sizing: border-box; }

/* select speed */
#nanoSelectProducts #selectSpeedContent .noData { margin: 0; }
#nanoSelectProducts #reviewOrderNoSpeeds button { width: 100%; }

#nanoSelectProducts #selectSpeedContent .serviceCard:active .btn-secondary,
#nanoSelectProducts #selectSpeedContent .serviceCard.active .btn-secondary { color: var(--white); border-color: var(--primary); background: var(--primary); }

#nanoSelectProducts #selectSpeedContent .serviceCard .icon img { max-width: 6rem; max-height: 6rem; }
#nanoSelectProducts #selectSpeedContent .serviceCard .body p { font-size: .875rem !important; line-height: 1.4; height: 2.5rem; white-space: pre-wrap; overflow: hidden; word-break: break-word; text-align: center; }

/* select services */
#nanoSelectProducts #selectServiceContent .noData { margin: 0; }

/* unselected card */
#nanoSelectProducts #selectServiceContent .serviceCard .icon img { max-width: 4rem; max-height: 4rem; }
#nanoSelectProducts #selectServiceContent .serviceCard .body p { font-size: .875rem !important; line-height: 1.4; height: 2.5rem; white-space: pre-wrap; overflow: hidden; word-break: break-word; text-align: center; }

/* selected card */
#nanoSelectProducts #selectServiceContent .serviceCard .selected { outline: .25rem solid var(--secondary); background: var(--secondary); border-radius: .5rem !important; }
#nanoSelectProducts #selectServiceContent .serviceCard .selected.body h3 { color: var(--white); }
#nanoSelectProducts #selectServiceContent .serviceCard .selected.body p { color: var(--gray-200); }

/* button when card active */
#nanoSelectProducts #selectServiceContent .serviceCard:active .btn-secondary,
#nanoSelectProducts #selectServiceContent .serviceCard.active .btn-secondary { color: var(--white); background-color: var(--primary-600); border-color: var(--primary-700); }

/* button when card selected */
#nanoSelectProducts #selectServiceContent .serviceCard .selected .btn-secondary { color: var(--primary); border-color: var(--primary); background: var(--white); }
#nanoSelectProducts #selectServiceContent .serviceCard:hover .selected .btn-secondary { color: var(--white); background-color: var(--primary-600); border-color: var(--primary-600); }
#nanoSelectProducts #selectServiceContent .serviceCard:focus .selected .btn-secondary { color: var(--white); background-color: var(--primary-600); border-color: var(--primary-600); }
#nanoSelectProducts #selectServiceContent .serviceCard:active .selected .btn-secondary,
#nanoSelectProducts #selectServiceContent .serviceCard.active .selected .btn-secondary { color: var(--white); background-color: var(--primary-600); border-color: var(--primary-700); }

@media (min-width: 768px) {
  #nanoSelectProducts #reviewOrderNoSpeeds button { max-width: 28rem; }
}

/* NANO: Select Plan -------------------------------------------------------- */

#nanoSelectPlan .planCardWrapper { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 1.125rem; height: auto; width: 100%; }

#nanoSelectPlan .planCard { justify-content: stretch; height: fit-content; text-align: center; align-items: center; transition: outline 0.1s; background: var(--white); color: var(--gray-text); border-radius: .25rem; border: none; outline: .125rem solid var(--gray-300); max-width: 20.5rem; z-index: 5; }

#nanoSelectPlan .planCard:hover { outline: .25rem solid var(--primary); background: var(--white); cursor: pointer; }
#nanoSelectPlan .planCard:focus { outline: .25rem solid var(--secondary); background: var(--white); cursor: pointer; box-shadow: .25rem .5rem .25rem rgba(var(--black-rgb), .2); }
#nanoSelectPlan .planCard:active,
#nanoSelectPlan .planCard.active { outline: .25rem solid var(--secondary); background: var(--gray-300); box-shadow: .25rem .5rem .25rem rgba(var(--black-rgb), .2); }

/* method banners */
#nanoPlanCardMethods .productCardBanner { width: 100%; border-top-left-radius: .2rem; border-top-right-radius: .2rem; vertical-align: middle; font-size: .875rem; text-align: left; }
#nanoPlanCardMethods .productCardBanner img { height: 1rem; width: 1rem; }
#nanoPlanCardMethods .prepaidBkgdColor { background: var(--prepaid-200); }
#nanoPlanCardMethods .prepaidTextColor { color: var(--prepaid); }
#nanoPlanCardMethods .billedBkgdColor { background: var(--billed-200); }
#nanoPlanCardMethods .billedTextColor { color: var(--billed); }

/* plan card photos */
#nanoPlanCardImages #productCardPhotos { width: auto; max-width: 100%; height: auto; }
#nanoPlanCardImages #productCardPhotos img { width: 100%; height: auto; min-height: 6.25rem; margin: 0 auto; }

/* product title */
#nanoPlanCardTitle h5 { line-height: 1.25; text-overflow: ellipsis; white-space: pre-wrap; overflow: hidden; height: 3.125rem; margin: 0; vertical-align: middle; align-content: center; text-overflow: ellipsis; }

/* product price */
#nanoPlanCardPrice { color: var(--gray-text); font-weight: 700; text-align: center; }
#nanoPlanCardPrice .planCardPriceCaption { font-size: .75rem; text-transform: uppercase; font-weight: 500; margin: 0; }
#nanoPlanCardPrice .planCardPriceDollars { position: relative; top: -.375rem; color: var(--gray-text); font-weight: 700; }

/* promo code */
#nanoPlanCardPromo p { font-size: .75rem; text-transform: uppercase; color: var(--secondary); margin: 0; }
#nanoPlanCardPromo .popover { width: 10rem; }
#nanoPlanCardPromo .popover li { font-size: .75rem; font-weight: 700; color: var(--secondary); text-transform: uppercase; text-align: left; padding: 0; }

/* product marketing text */
#nanoPlanCardDetails hr { width: 100%; margin: 0 1rem 1rem !important; }

/* product consumer labels */
#nanoPlanCardLabels .bcl_widget-container { margin: 0; font-size: .75rem; text-align: left; }
#nanoPlanCardLabels .collapse.show .card { padding: 0; border: 0; border-radius: 0; text-align: left; }

/* link to open consumer label */
#nanoSelectPlan .configPlanName .consumer-label-link { margin-left: 0; }
#nanoSelectPlan .btn.btn-link.consumerLabelToggle { padding-top: .425rem !important; margin: 0 0 .25rem; text-transform: none; }

/* plan cards */
#nanoSelectPlan .planCardPriceDollars > sup { top: -.5rem; font-size: 65%; }
#nanoSelectPlan .planCardPriceDuration { position: relative; top: -.375rem; font-size: 100%; }
#nanoSelectPlan hr { margin: 1rem 0; }
#nanoSelectPlan .collapse.show .card hr { margin: 0 0 .5rem !important; }

/* bestseller flag */
#nanoSelectPlan .bestseller-wrapper { position: relative; width: 100%; }
#nanoSelectPlan .bestseller-ribbon { position: absolute; display: flex; top: -.625rem; }
#nanoSelectPlan .bestseller-ribbon::before { --ribbon-size: 1rem; position: relative; content: 'Bestseller'; text-transform: uppercase; margin-top: -3rem; right: -.375rem; padding: .25rem .5rem; padding-inline-start: 1.5rem; background: var(--warning); color: var(--gray-text); text-align: center; font-weight: 700; clip-path: polygon(0 0, var(--ribbon-size) 50%, 0 100%, 100% 100%, 100% 0); letter-spacing: .075rem; align-content: center; height: 1.75rem; top: 2.75rem; border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }

/* promo code popover */
#nanoPlanCardPromo .popover { width: 10rem; }
#nanoPlanCardPromo .popover li { padding: 0 !important; }

/* NANO: Configure Services ------------------------------------------------- */

#nanoConfigureServices .component-label-text { display: inline-flex; }

#nanoConfigureServices .planWrapper { border: .0625rem solid var(--gray-300); border-radius: .25rem; }

/* method banners */
#nanoConfigureServices .configPlanMethods { border-top-left-radius: .25rem; border-top-right-radius: .5rem; }
#nanoConfigureServices .configPlanMethods .productBanner { width: 100%; height: auto; border-radius: 0; letter-spacing: .0875rem; }
#nanoConfigureServices .configPlanMethods .productBanner img { width: 1.25rem; height: 1.25rem; }

/* head */
#nanoConfigureServices .configPlanHead { display: flex; background: var(--primary); padding: .5rem !important; border-top-left-radius: .25rem; border-top-right-radius: .25rem; border-bottom: .0625rem solid var(--gray-300); }
#nanoConfigureServices .configPlanHead .btn-light.consumer-label-link { min-height: auto !important; border-radius: .125rem; border: 0; padding: .125rem; width: 7.5rem; display: inline; }
#nanoConfigureServices .configPlanLogo { display: inline-block; width: 2rem; height: 2rem; margin-right: .75rem; align-content: center; text-align: center; vertical-align: middle; }
#nanoConfigureServices .configPlanLogo img { max-width: 100%; height: auto; text-align: center; vertical-align: middle; }
#nanoConfigureServices .configPlanName { display: inline-block; width: calc(100% - 2.75rem); min-height: 2rem; align-content: center; vertical-align: middle; }
#nanoConfigureServices .configPlanName h5 { display: inline-block; color: var(--white); font-weight: 700; margin-bottom: 0; font-size: 1.125rem; width: calc(100% - 2rem); }
#nanoConfigureServices .configPlanName .consumer-label-link { margin-left: 0; }

/* config validation */
#nanoConfigureServices .configPlanValidation { display: inline-block; float: right; width: 1.5rem; height: 1.5rem; margin-left: .5rem; vertical-align: middle; }
#nanoConfigureServices .configPlanValidation > span > i { font-size: 1.5rem; }
#nanoConfigureServices .configPlanValidation .popover { width: 14.25rem !important; top: 1.75rem !important; max-width: unset !important;}
#nanoConfigureServices .configPlanValidation .popover .arrow { top: 1.325rem !important; }
#nanoConfigureServices .configPlanValidation .popover-body { padding: .5rem .75rem !important; }
#nanoConfigureServices .configPlanValidation .popover ul { margin-bottom: 0; }
#nanoConfigureServices .configPlanValidation .popover ul li { line-height: normal; margin-bottom: .25rem; font-style: italic; }

/* body */
#nanoConfigureServices .configPlanBody { padding: 1rem; border-top: 0; border-bottom-left-radius: .2rem; border-bottom-right-radius: .2rem; }

#nanoConfigureServices .configPlanBody .panelHeaders { display: none; }

#nanoConfigureServices .configPlanBody .panelContent { width: 100%; align-items: center; font-size: 1rem; min-height: 3.375rem; padding: 0 0 .5rem 0; }

#nanoConfigureServices .configPlanBody .colDesc { text-overflow: unset; white-space: pre-line; overflow: unset; text-align: left; width: 100%; display: inline-block; word-break: break-word; align-content: center; line-height: normal; }
#nanoConfigureServices .configPlanBody .colDesc .selectedIndicator > i { font-size: 1.0625rem; color: var(--gray-text); }
#nanoConfigureServices .configPlanBody .colDesc .selectedIndicator { display: inline-block; width: 1.25rem; height: 1.0625rem; align-self: center; }

#nanoConfigureServices .configPlanBody .colQuantity { text-align: center; padding: .25rem .5rem; width: 100%; display: inline-block; font-size: .875rem; vertical-align: middle; }

#nanoConfigureServices .configPlanBody .colPerItem { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#nanoConfigureServices .configPlanBody .colPerItem::before { content: 'Per Item'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; font-style: normal; }

#nanoConfigureServices .configPlanBody .colPrice { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#nanoConfigureServices .configPlanBody .colPrice::before { content: 'Price'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; font-style: normal; }

#nanoConfigureServices .configPlanBody .colFrequency { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#nanoConfigureServices .configPlanBody .colFrequency::before { content: 'Frequency'; text-align: left; font-weight: 700; float: left; margin-right: auto; font-style: normal; }

/* tiers */
#nanoConfigureServices .configPlanBody .compLevelOne { display: block; width: 100% !important; padding: 0; margin: 0; border-top: .0625rem solid var(--gray-300) !important; }
#nanoConfigureServices .configPlanBody .compLevelTwo { display: block; width: calc(100% - 1.5rem) !important; margin-left: 1.5rem !important; padding: 0; }
#nanoConfigureServices .configPlanBody .row:nth-child(2) { border-top: 0 !important; }

/* Offering Level */
#nanoConfigureServices .configPlanBody .compLevelOne .panelContent { border-bottom: .0625rem solid var(--gray-700); align-content: center; }
#nanoConfigureServices .configPlanBody .compLevelOne .panelContent .colDesc { background: var(--secondary-100); border-bottom: 0; padding: .325rem .5rem; font-weight: 700; color: var(--secondary); }

/* Component Level 1 */
#nanoConfigureServices .configPlanBody .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-600); align-content: center; }
#nanoConfigureServices .configPlanBody .compLevelTwo .panelContent .colDesc { background: var(--primary-100); border-bottom: 0; padding: .325rem .5rem; font-weight: 700; color: var(--primary); }

/* Component Level 2 */
#nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-500); }
#nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--accent-100); border-bottom: 0; padding: .325rem .5rem; font-weight: 700; color: var(--accent); }

/* Component Level 3 */
#nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
#nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-300); border-bottom: 0; padding: .325rem .5rem; font-weight: 700; color: var(--gray-700); }

/* Component Level 4 */
#nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
#nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-200); border-bottom: 0; padding: .325rem .5rem; font-weight: 400; color: var(--gray-600); }

/* Component Level 5 */
#nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
#nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-100); border-bottom: 0; padding: .325rem .5rem; font-weight: 400; color: var(--gray-500); }

/* totals */
#nanoConfigureServices .configPlanBody .compSubtotal { padding-bottom: .75rem; align-content: center; }
#nanoConfigureServices .configPlanBody .compSubtotal .colDesc { width: 12rem; padding-left: 0; font-size: .875rem; color: var(--primary); }
#nanoConfigureServices .configPlanBody .compSubtotal .colPrice { padding-left: 0; padding-right: 0; }
#nanoConfigureServices .configPlanBody .compSubtotal .colFrequency { padding-left: 0; padding-right: 0; }

#nanoConfigureServices .configPlanBody .main-name { font-weight: 700; color: var(--primary); text-transform: uppercase; }
#nanoConfigureServices .configPlanBody .sub-name { font-weight: 400; color: var(--gray-text); }
#nanoConfigureServices .configPlanBody .main-price { font-weight: 700; }
#nanoConfigureServices .configPlanBody .neg-price { color: var(--danger) !important; }

/* quantity value */
#nanoConfigureServices .quantityValue { display: block; width: 100%; }
#nanoConfigureServices .quantityValue .qtyLabel { display: inline-block; text-align: left; float: left; font-weight: 700; font-style: normal; }
#nanoConfigureServices .quantityValue .qtyValue { display: inline-block; text-align: right; float: right; }

/* quantity widget */
#nanoConfigureServices .quantityWidget { display: flex; align-items: center; border: 0; border-radius: .25rem; margin: 0; justify-content: center; }
#nanoConfigureServices .quantityWidget .form-control { display: inline-block; text-align: center; width: 2.625rem; height: 2.625rem !important; vertical-align: middle; margin: 0; padding: .5rem .25rem; }
#nanoConfigureServices .quantityWidget .form-control:disabled,
#nanoConfigureServices .quantityWidget .form-control.disabled,
#nanoConfigureServices .quantityWidget .btn-quantity:disabled,
#nanoConfigureServices .quantityWidget .btn-quantity.disabled { opacity: .5; cursor: none; }

#nanoConfigureServices .quantityWidget .btn-quantity { background: transparent; border: transparent; display: inline-block; text-align: center; vertical-align: middle; font-size: 1rem; padding: .25rem; height: 2.625rem !important; width: 2.625rem !important; margin: 0; }
#nanoConfigureServices .quantityWidget .btn-quantity:hover { background: var(--gray-200); }
#nanoConfigureServices .quantityWidget .btn-quantity:focus { background: var(--gray-300); }
#nanoConfigureServices .quantityWidget .btn-quantity:active,
#nanoConfigureServices .quantityWidget .btn-quantity.active { background: var(--primary); }

#nanoConfigureServices .quantityWidget .btn-quantity > i { color: var(--primary); font-size: 1.25rem; vertical-align: middle; }
#nanoConfigureServices .quantityWidget .btn-quantity:hover > i { color: var(--primary-600); }
#nanoConfigureServices .quantityWidget .btn-quantity:focus > i { color: var(--primary-700); }
#nanoConfigureServices .quantityWidget .btn-quantity:active > i,
#nanoConfigureServices .quantityWidget .btn-quantity.active > i { color: var(--white) }

#nanoConfigureServices .configPlanBody hr { height: .125rem !important; margin: -.125rem 0 .75rem !important; }

@media (min-width: 576px) {
  #nanoConfigureServices .popover { width: 20rem !important; }
  #nanoConfigureServices .popover > .arrow { top: 1.325rem !important; }
}

@media (min-width: 768px) {
  /* head */
  #nanoConfigureServices .configPlanHead { padding: .75rem !important; }
  #nanoConfigureServices .configPlanName h5 { display: inline-block; width: calc(100% - 2rem); font-size: 1.125rem; }

  /* body */
  #nanoConfigureServices .configPlanBody { padding: 1rem; border-top: 0; border-bottom-left-radius: .2rem; border-bottom-right-radius: .2rem; }

  #nanoConfigureServices .configPlanBody .panelHeaders { display: flex; width: 100%; font-weight: 700; align-items: center; font-size: 1rem; padding-bottom: .5rem; border-bottom: .125rem solid var(--gray-300); margin-bottom: 0; min-height: 2.625rem; }

  #nanoConfigureServices .configPlanBody .panelContent { width: 100%; align-items: center; font-size: 1rem; min-height: 3.375rem; padding: 0; }

  /* columns */
  #nanoConfigureServices .configPlanBody .colDesc { width: calc(100% - 27.625rem); }

  #nanoConfigureServices .configPlanBody .colQuantity { text-align: center; padding: 0 .25rem; width: 8.625rem; font-size: 1rem; }

  #nanoConfigureServices .configPlanBody .colPerItem { text-align: right; padding: 0 .25rem; width: 6rem; font-size: 1rem; }
  #nanoConfigureServices .configPlanBody .colPerItem::before { display: none; }

  #nanoConfigureServices .configPlanBody .colPrice { text-align: right; padding: 0 .25rem; width: 6rem; font-size: 1rem; }
  #nanoConfigureServices .configPlanBody .colPrice::before { display: none; }

  #nanoConfigureServices .configPlanBody .colFrequency { text-align: right; padding: 0 0 0 .25rem; width: 7rem; font-size: 1rem; border-bottom: 0; }
  #nanoConfigureServices .configPlanBody .colFrequency::before { display: none; }

  /* tiers */
  #nanoConfigureServices .configPlanBody .compLevelOne { display: block; width: 100% !important; padding: 0; margin: 0; border-top: .0rem solid var(--gray-300) !important; }
  #nanoConfigureServices .configPlanBody .compLevelTwo { display: block; width: calc(100% - 1.5rem) !important; margin-left: 1.5rem !important; padding: 0; }
  #nanoConfigureServices .configPlanBody .row:nth-child(2) { border-top: 0 !important; }

  /* Offering Level */
  #nanoConfigureServices .configPlanBody .compLevelOne .panelContent { border-bottom: .0625rem solid var(--gray-700); }
  #nanoConfigureServices .configPlanBody .compLevelOne .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem .5rem; font-weight: 700; color: var(--secondary); }

  /* Component Level 1 */
  #nanoConfigureServices .configPlanBody .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-600); }
  #nanoConfigureServices .configPlanBody .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem .5rem; font-weight: 700; color: var(--primary); }

  /* Component Level 2 */
  #nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-500); }
  #nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem .5rem; font-weight: 700; color: var(--accent); }

  /* Component Level 3 */
  #nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
  #nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem .5rem; font-weight: 700; color: var(--gray-700); }

  /* Component Level 4 */
  #nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
  #nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem .5rem; font-weight: 400; color: var(--gray-600); }

  /* Component Level 5 */
  #nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
  #nanoConfigureServices .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem .5rem; font-weight: 400; color: var(--gray-500); }

  /* totals */
  #nanoConfigureServices .configPlanBody .compSubtotal { padding-bottom: .75rem; align-content: center; }
  #nanoConfigureServices .configPlanBody .compSubtotal .colDesc { width: calc(100% - 13rem); font-size: 1rem; }
  #nanoConfigureServices .configPlanBody .compSubtotal .colPrice { font-size: 1rem; padding-right: .25rem; }

  #nanoConfigureServices .configPlanBody .main-name { font-weight: 700; color: var(--primary); }
  #nanoConfigureServices .configPlanBody .sub-name { font-weight: 400; color: var(--gray-text); }
  #nanoConfigureServices .configPlanBody .main-price { font-weight: 700; }
  #nanoConfigureServices .configPlanBody .neg-price { color: var(--danger) !important; }

  /* quantity value */
  #nanoConfigureServices .quantityValue { display: block; width: 100%; }
  #nanoConfigureServices .quantityValue .qtyLabel { display: none }
  #nanoConfigureServices .quantityValue .qtyValue { display: block; text-align: center; float: none; }
}

/* option cards */
#nanoConfigureServices #configResidentialPhone .card,
#nanoConfigureServices #configResidentialCallerId .card,
#nanoConfigureServices #configResidentialDiretory .card,
#nanoConfigureServices #configResidentialInternet .card,
#nanoConfigureServices #configResidentialEmail .card { margin-top: 0 !important; margin-bottom: 1rem; }

/* option subtitle */
#nanoConfigureServices #configResidentialPhone .card > .col-12 > div > .row > .section-subtitle,
#nanoConfigureServices #configResidentialCallerId .card > .col-12 > div > .row > .section-subtitle,
#nanoConfigureServices #configResidentialDirectory .card > .col-12 > div > .row > .section-subtitle,
#nanoConfigureServices #configResidentialInternet .card > .col-12 > div > .row > .section-subtitle,
#nanoConfigureServices #configResidentialEmail .card > .col-12 > div > .row > .section-subtitle { padding: 0 !important; width: 100%; }

/* phone */
#nanoConfigureServices #configResidentialPhone .form-check.custom-control { padding: .5rem .75rem !important; border: .0625rem solid var(--gray-200) !important; height: 2.625rem !important; }
#nanoConfigureServices #configResidentialPhone .form-check-label { padding: .125rem .75rem .125rem 1.875rem !important; margin-bottom: 0 !important; }
#nanoConfigureServices #configResidentialPhone .form-check-input { margin-left: -.125rem; top: .25rem !important; }

#nanoConfigureServices #configResidentialPhone .ng-autocomplete.input-group { align-self: flex-start; top: .0625rem; }
#nanoConfigureServices #configResidentialPhone .ng-autocomplete.input-group .ng-autocomplete { width: calc(100% - 2.625rem); z-index: 999; align-content: flex-start; margin-top: 0; }
#nanoConfigureServices #configResidentialPhone .ng-autocomplete.input-group .autocomplete-container .input-container input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: 0 !important; }
#nanoConfigureServices #configResidentialPhone .ng-autocomplete.input-group .autocomplete-container .suggestions-container { width: calc(100% + 2.625rem); z-index: 999; max-height: 5rem; }
#nanoConfigureServices #configResidentialPhone .ng-autocomplete.input-group-append { width: 2.625rem; }

#nanoConfigureServices #configResidentialPhone .ng-autocomplete.input-group.searchFields .input-group-append,
#nanoConfigureServices #configResidentialPhone .ng-autocomplete.input-group .searchFields .input-group-append { margin-top: 0 !important; }

/* right to modify */
#nanoConfigureServices #configResidentialPhone .form-check.custom-control.productOptionAgreement { padding: 0 !important; border: 0 !important; height: 100% !important; }
#nanoConfigureServices #configResidentialPhone .productOptionAgreement > .form-check-label.agreementText { padding: .125rem 0 .125rem 1.5rem !important; margin-bottom: 0 !important; }
#nanoConfigureServices #configResidentialPhone .productOptionAgreement > .form-check-input { margin-left: -.125rem; top: .0625rem !important; }

/* caller id */
#nanoConfigureServices #configCallerId .form-check.custom-control { padding: .5rem .75rem !important; border: .0625rem solid var(--gray-200) !important; height: 2.625rem !important; }
#nanoConfigureServices #configCallerId .form-check-label { padding: .125rem .75rem .125rem 1.875rem !important; margin-bottom: 0 !important; }
#nanoConfigureServices #configCallerId .form-check-input { margin-left: -.125rem; top: .25rem !important; }

/* custom caller id */
#nanoConfigureServices .form-check.custom-control#customCallerID { height: auto !important; }
#nanoConfigureServices .form-check.custom-control#customCallerID .form-check-label { padding-top: .325rem !important; }
#nanoConfigureServices #customCallerID .form-check-input { margin-top: 0; }
#nanoConfigureServices #customCallerID .form-control { position: relative; top: 0; left: 0; margin: 0; width: 100%; }

/* directory */
#nanoConfigureServices #configDirectory .form-check.custom-control { padding: .5rem .75rem !important; border: .0625rem solid var(--gray-200) !important; height: 2.625rem !important; }
#nanoConfigureServices #configDirectory .form-check-label { padding: .125rem .75rem .125rem 1.875rem !important; margin-bottom: 0 !important; }
#nanoConfigureServices #configDirectory .form-check-input { margin-left: -.125rem; top: .25rem !important; }

/* internet */
#nanoConfigureServices #configResidentialInternet .form-check.custom-control { padding: .5rem .75rem !important; border: .0625rem solid var(--gray-200) !important; height: 2.625rem !important; }
#nanoConfigureServices #configResidentialInternet .form-check-label { padding: .125rem .75rem .125rem 1.875rem !important; margin-bottom: 0 !important; }
#nanoConfigureServices #configResidentialInternet .form-check-input { margin-left: -.125rem; top: .25rem !important; }

/* email */
#nanoConfigureServices #standardEmailConfiguration .input-group > .form-control { border-right: 0 !important; }
#nanoConfigureServices #standardEmailConfiguration .input-group > .form-control.is-invalid { border-right: .0625rem solid var(--danger) !important; }
#nanoConfigureServices #standardEmailConfiguration .input-group-append { padding: .5rem .75rem .5rem .75rem !important; }

#nanoConfigureServices #configResidentialEmail .form-check.custom-control { padding: .5rem .75rem !important; border: .0625rem solid var(--gray-200) !important; height: 2.625rem !important; }
#nanoConfigureServices #configResidentialEmail .form-check-label { padding: .125rem .75rem .125rem 1.875rem !important; margin-bottom: 0 !important; }
#nanoConfigureServices #configResidentialEmail .form-check-input { margin-left: -.125rem; top: .25rem !important; }

/* NANO: Set Up Account ------------------------------------------------------ */

#nanoSetUpAccount .form-check label,
#nanoSetUpAccount .form-check-label,
#nanoSetUpAccount .custom-control-label { font-size: .875rem; padding-top: .325rem; padding-left: .5rem; line-height: 1.5; }
#nanoSetUpAccount .custom-select { min-height: 2.625rem !important; }
#nanoSetUpAccount .input-group > .form-control { border-right: 0 !important; }
#nanoSetUpAccount .input-group > .form-control.is-invalid { border-right: .0625rem solid var(--danger) !important; }
#nanoSetUpAccount .password-input,
#nanoSetUpAccount .input-datepicker { max-width: unset; width: auto; }
#nanoSetUpAccount .password-input .input-group-text > i { position: relative; }

/* mat-stepper overrides */
#nanoSetUpAccount .accountStepper { margin-bottom: 0; }

#nanoSetUpAccount .accountStepper .mat-step-header { background: var(--gray-100); border-radius: .25rem; border: .125rem solid var(--gray-300); padding: .125rem .625rem !important; }

#nanoSetUpAccount .accountStepper .mat-step-icon { background: var(--gray-text); margin-right: .625rem !important; }
#nanoSetUpAccount .accountStepper .mat-step-icon-selected { background: var(--primary) !important; }
#nanoSetUpAccount .accountStepper .mat-step-icon-content { font-family: Roboto, sans-serif; font-weight: 700; color: var(--white); }

#nanoSetUpAccount .accountStepper .mat-step-label { color: var(--gray-text); font-family: Roboto, sans-serif; font-size: 1rem; }
#nanoSetUpAccount .accountStepper .mat-step-label-selected { font-size: 1.25rem; color: var(--secondary); font-family: Roboto, sans-serif; font-weight: 700; }

#nanoSetUpAccount .accountStepper .mat-vertical-content { padding: 1rem 0 .25rem 0 !important; }
#nanoSetUpAccount .accountStepper .mat-vertical-content-container { margin-left: 0 !important; }
#nanoSetUpAccount .accountStepper .mat-vertical-content-container.mat-stepper-vertical-line::before { display: none !important; }

#termsOfServiceText.message-scrollable,
#termsOfServiceTextStep2.message-scrollable { height: auto !important; max-height: calc(100vh - 20rem) !important; }

/* account profile */
#nanoSetUpAccountBillingContact select.form-select { font-family: Roboto, sans-serif !important; }
#nanoSetUpAccountBillingContact select.form-select.is-invalid { border-color: var(--danger); }

#notificationEmailWrapper,
#accountNotificationEmail { height: 4.75rem !important; }
#accountNotificationSMS { height: 7.75rem !important; }

#notificationEmailInput .form-control,
#accountNotificationEmail .form-control, 
#accountNotificationSMS .form-control { width: 100% !important; min-height: 2.1875rem !important; padding: .375rem .75rem !important; left: 2rem; position: relative; }

@media (min-width: 576px) {
  #notificationEmailWrapper,
  #accountNotificationEmail,
  #accountNotificationSMS { height: auto !important; }
  #notificationEmailInput .form-control,
  #accountNotificationEmail .form-control { width: calc(100% - 4.75rem) !important; display: inline; max-width: 33rem !important; }
  #accountNotificationSMS .form-control { width: calc(50% - 4.75rem) !important; display: inline; max-width: 11rem !important; }
}

/* NANO: Review Order / Receipt View (for NANO & UDGD) ----------------------- */

#nanoReviewOrder .reviewPlanWrapper { border: .0625rem solid var(--gray-300); border-radius: .25rem; }

/* right column */
#nanoReviewOrder .rightColumnCard { border: .0625rem solid var(--gray-300); background: var(--gray-100); border-radius: .25rem; }

/* method banners */
#nanoReviewOrder .reviewPlanMethods { border-top-left-radius: .25rem; border-top-right-radius: .5rem; }
#nanoReviewOrder .reviewPlanMethods .productBanner { width: 100%; height: auto; border-radius: 0; letter-spacing: .0875rem; }
#nanoReviewOrder .reviewPlanMethods .productBanner img { width: 1.25rem; height: 1.25rem; }

/* head */
#nanoReviewOrder .reviewPlanHead { display: flex; background: var(--primary); padding: .5rem !important; border-bottom: .0625rem solid var(--gray-300); border-top-left-radius: .25rem; border-top-right-radius: .25rem; }
#nanoReviewOrder .reviewPlanHead .btn-light.consumer-label-link { min-height: auto !important; border-radius: .125rem; border: 0; padding: .125rem; width: 7.5rem; display: inline; }

#nanoReviewOrder .reviewPlanLogo { display: inline-block; min-height: 1.5rem; vertical-align: middle; width: 2rem; height: 2rem; margin-right: .75rem; align-content: center; text-align: center; }
#nanoReviewOrder .reviewPlanLogo img { max-width: 100%; height: auto; text-align: center; vertical-align: middle; }

#nanoReviewOrder .reviewPlanName { display: inline-block; min-height: 1.5rem; vertical-align: middle; width: calc(100% - 2.75rem); align-content: center; }
#nanoReviewOrder .reviewPlanName h5 { display: inline-block; color: var(--white); font-weight: bold; margin-bottom: 0; width: 100%; }
#nanoReviewOrder .reviewPlanName .consumer-label-link { margin-left: 0; }

/* body */
#nanoReviewOrder .reviewPlanBody { padding: 1rem; border-top: 0; border-bottom-left-radius: .2rem; border-bottom-right-radius: .2rem; }

#nanoReviewOrder .reviewPlanBody .panelHeaders { display: none; }

#nanoReviewOrder .reviewPlanBody .panelContent { width: 100%; align-items: center; font-size: 1rem; min-height: 2.625rem !important; padding: 0 0 .5rem 0; }

#nanoReviewOrder .reviewPlanBody .panelFooters { width: 100%; font-weight: bold; align-items: center; font-size: 1rem; padding-top: .5rem; border-top: .125rem solid var(--gray-300); margin-top: -.5625rem; min-height: 2.625rem; }
#nanoReviewOrder .reviewPlanBody .panelFooters .colSubtotal { width: calc(100% - 13rem); display: inline-block; }
#nanoReviewOrder .reviewPlanBody .panelFooters .colPrice { width: 13rem; display: inline-block; }
#nanoReviewOrder .reviewPlanBody .panelFooters .colPrice::before { display: none; }
#nanoReviewOrder .reviewPlanBody .panelFooters .colFrequency { display: none; }

/* columns */
#nanoReviewOrder .reviewPlanBody .colDesc { text-align: left; width: 100%; display: inline-block; white-space: pre-line; word-break: break-word; align-content: center; line-height: normal; }

#nanoReviewOrder .reviewPlanBody .colQuantity { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#nanoReviewOrder .reviewPlanBody .colQuantity::before { content: 'Quantity'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; font-style: normal; }

#nanoReviewOrder .reviewPlanBody .colPerItem { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#nanoReviewOrder .reviewPlanBody .colPerItem::before { content: 'Per Item'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; font-style: normal !important; }

#nanoReviewOrder .reviewPlanBody .colPrice { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#nanoReviewOrder .reviewPlanBody .colPrice::before { content: 'Price'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; font-style: normal; }

#nanoReviewOrder .reviewPlanBody .colFrequency { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; border: none; }
#nanoReviewOrder .reviewPlanBody .colFrequency::before { content: 'Frequency'; text-align: left; font-weight: 700; float: left; margin-right: auto; font-style: normal; }

/* tiers */
#nanoReviewOrder .reviewPlanBody .compLevelOne { display: block; width: 100% !important; padding: 0; margin: 0; border-top: .0625rem solid var(--gray-300) !important; }
#nanoReviewOrder .reviewPlanBody .compLevelTwo { display: block; width: calc(100% - 1.5rem) !important; margin-left: 1.5rem !important; padding: 0; }
#nanoReviewOrder .reviewPlanBody .row:nth-child(2) { border-top: 0 !important; }

/* Offering Level */
#nanoReviewOrder .reviewPlanBody .compLevelOne .panelContent { border-bottom: .0625rem solid var(--gray-700); align-content: center; }
#nanoReviewOrder .reviewPlanBody .compLevelOne .panelContent .colDesc { background: var(--secondary-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--secondary); }

/* Component Level 1 */
#nanoReviewOrder .reviewPlanBody .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-600); align-content: center; }
#nanoReviewOrder .reviewPlanBody .compLevelTwo .panelContent .colDesc { background: var(--primary-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--primary); }

/* Component Level 2 */
#nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-500); }
#nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--accent-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--accent); }

/* Component Level 3 */
#nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
#nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-300); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 700; color: var(--gray-700); }

/* Component Level 4 */
#nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
#nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-200); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 400; color: var(--gray-600); }

/* Component Level 5 */
#nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
#nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: var(--gray-100); border-bottom: 0; padding: .325rem 0 .325rem .5rem; font-weight: 400; color: var(--gray-500); }

/* totals */
#nanoReviewOrder .reviewPlanBody .compSubtotal { padding-bottom: 0; align-content: center; }
#nanoReviewOrder .reviewPlanBody .compSubtotal .colDesc { width: 12rem; padding-left: 0; font-size: .875rem; color: var(--primary); }
#nanoReviewOrder .reviewPlanBody .compSubtotal .colPrice { padding-left: 0; padding-right: 0; }
#nanoReviewOrder .reviewPlanBody .compSubtotal .colFrequency { padding-left: 0; padding-right: 0; }
#nanoReviewOrder .reviewPlanBody .compSubtotal .colFrequency::before { display: none; }

#nanoReviewOrder .reviewPlanBody .main-name { font-weight: 700; color: var(--primary); text-transform: uppercase; }
#nanoReviewOrder .reviewPlanBody .sub-name { font-weight: 400; color: var(--gray-text); }
#nanoReviewOrder .reviewPlanBody .main-price { font-weight: 700; }
#nanoReviewOrder .reviewPlanBody .neg-price { color: var(--danger) !important; }

/* hr */
#nanoReviewOrder .reviewPlanBody hr { height: .125rem !important; }
#nanoReviewOrderSummaryCharges hr { margin: .5rem 0 !important; }
#nanoReviewOrderPlanDetails hr { margin: .25rem 0 1rem !important; }

#nanoReviewOrderPlanDetails #componentRowProductName .consumer-label-link { margin-left: -.5rem; }

#nanoReviewOrderSummaryCharges { font-size: .875rem; }

@media (min-width: 768px), print { /* body */ #nanoReviewOrder .reviewPlanBody { padding: 1rem; border-top: 0; border-bottom-left-radius: .2rem; border-bottom-right-radius: .2rem; }

  #nanoReviewOrder .reviewPlanBody .panelHeaders { display: flex; width: 100%; font-weight: bold; align-items: center; font-size: 1rem; padding-bottom: .5rem; border-bottom: .125rem solid var(--gray-300); margin-bottom: 0; min-height: 2.625rem; }

  #nanoReviewOrder .reviewPlanBody .panelContent { width: 100%; align-items: center; font-size: 1rem; min-height: 1.6875rem; padding: 0; }

  #nanoReviewOrder .reviewPlanBody .panelFooters { width: 100%; font-weight: bold; align-items: center; font-size: 1rem; padding-top: .5rem; border-top: .125rem solid var(--gray-300); margin-top: .5rem; min-height: 2.625rem; }
  #nanoReviewOrder .reviewPlanBody .panelFooters .colSubtotal { width: calc(100% - 13rem); display: inline-block; }
  #nanoReviewOrder .reviewPlanBody .panelFooters .colPrice { text-align: right; padding: 0; width: 6rem; display: inline-block; font-size: .875rem; }
  #nanoReviewOrder .reviewPlanBody .panelFooters .colPrice::before { display: none; }
  #nanoReviewOrder .reviewPlanBody .panelFooters .colFrequency { display: inline-block; width: 7rem; }

  /* columns */
  #nanoReviewOrder .reviewPlanBody .colDesc { padding: 0 .25rem; width: calc(100% - 28.625rem); }

  #nanoReviewOrder .reviewPlanBody .colQuantity { text-align: center; padding: 0 .25rem; width: 9.625rem; font-size: 1rem; }
  #nanoReviewOrder .reviewPlanBody .colQuantity::before { display: none; }

  #nanoReviewOrder .reviewPlanBody .colPerItem { text-align: right; padding: 0 .25rem; width: 6rem; font-size: 1rem; }
  #nanoReviewOrder .reviewPlanBody .colPerItem::before { display: none; }

  #nanoReviewOrder .reviewPlanBody .colPrice { text-align: right; padding: 0 .25rem; width: 6rem; font-size: 1rem; }
  #nanoReviewOrder .reviewPlanBody .colPrice::before { display: none; }

  #nanoReviewOrder .reviewPlanBody .colFrequency { text-align: right; padding: 0 0 0 .25rem; width: 7rem; font-size: 1rem; border-bottom: 0; }
  #nanoReviewOrder .reviewPlanBody .colFrequency::before { display: none; }

  /* tiers */
  #nanoReviewOrder .reviewPlanBody .compLevelOne { display: block; width: 100% !important; padding: 0; margin: 0; border-top: .0rem solid var(--gray-300) !important; }
  #nanoReviewOrder .reviewPlanBody .compLevelTwo { display: block; width: calc(100% - 1.5rem) !important; margin-left: 1.5rem !important; padding: 0; }
  #nanoReviewOrder .reviewPlanBody .row:nth-child(2) { border-top: 0 !important; }

  /* Offering Level */
  #nanoReviewOrder .reviewPlanBody .compLevelOne .panelContent { border-bottom: .0625rem solid var(--gray-700); }
  #nanoReviewOrder .reviewPlanBody .compLevelOne .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--secondary); }

  /* Component Level 1 */
  #nanoReviewOrder .reviewPlanBody .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-600); }
  #nanoReviewOrder .reviewPlanBody .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--primary); }

  /* Component Level 2 */
  #nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-500); }
  #nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--accent); }

  /* Component Level 3 */
  #nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
  #nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 700; color: var(--gray-700); }

  /* Component Level 4 */
  #nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
  #nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 400; color: var(--gray-600); }

  /* Component Level 5 */
  #nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
  #nanoReviewOrder .reviewPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 400; color: var(--gray-500); }

  /* totals */
  #nanoReviewOrder .reviewPlanBody .compSubtotal { padding-bottom: 0; align-content: center; }
  #nanoReviewOrder .reviewPlanBody .compSubtotal .colDesc { font-size: 1rem; width: calc(100% - 13rem); }
  #nanoReviewOrder .reviewPlanBody .compSubtotal .colPrice { font-size: 1rem; padding-right: .25rem; }

  #nanoReviewOrder .reviewPlanBody .main-name { font-weight: 700; color: var(--primary); }
  #nanoReviewOrder .reviewPlanBody .sub-name { font-weight: 400; color: var(--gray-text); }
  #nanoReviewOrder .reviewPlanBody .main-price { font-weight: 700; }
  #nanoReviewOrder .reviewPlanBody .neg-price { color: var(--danger) !important; }

  #nanoReviewOrderSummaryCharges { font-size: 1rem; }
}

/* summary of charges */
#nanoSummaryCharges { background: var(--gray-100); border: .0625rem solid var(--gray-300); padding: 1rem; border-radius: .25rem; }
#nanoSummaryCharges a.btn-link { font-size: .75rem; }
#nanoSummaryCharges .summaryChargesHead { width: 100%; }
#nanoSummaryCharges .summaryChargesHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); margin-bottom: 1rem; }
#nanoSummaryCharges .summaryChargesHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#nanoSummaryCharges .summaryChargesBody { width: 100%; font-size: 1rem; }
#nanoSummaryCharges .summaryChargesFoot { border-top: .125rem solid var(--gray-300); margin-top: .5rem; padding-top: .5rem; font-size: 1rem; color: var(--primary); text-transform: uppercase; font-weight: 700; }

/* schedule installation */
#nanoReviewOrderScheduleInstall .scheduleInstallHead { width: 100%; }
#nanoReviewOrderScheduleInstall .scheduleInstallHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#nanoReviewOrderScheduleInstall .scheduleInstallHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#nanoReviewOrderScheduleInstall .scheduleInstallBody { width: 100%; font-size: 1rem; }
#nanoReviewOrderScheduleInstall .scheduleInstallBody .input-datepicker { width: 100%; max-width: 100%; }
#nanoReviewOrderScheduleInstall .scheduleInstallBody .input-datepicker > .form-control:not(:last-child) { border-right: 0 !important; border-radius: .25rem; }
#nanoReviewOrderScheduleInstall .scheduleInstallBody .form-select { border-right: 0 !important; font-size: 1rem; font-family: Roboto, sans-serif !important; }
#nanoReviewOrderScheduleInstall .scheduleInstallBody .input-group-append { background: var(--white) !important; position: absolute; right: 0; top: 0; background: var(--white); border-left: 0; height: 100%; }
#nanoReviewOrderScheduleInstall .scheduleInstallBody .input-group-append:not(:last-child) > .input-group-text { right: 0; top: 0; background: transparent; }
#orderSummaryHasPaymentMethods p { font-size: 1rem; }

/* add promo code */
#nanoReviewOrderPromoCode .promoCodeHead { width: 100%; }
#nanoReviewOrderPromoCode .promoCodeHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#nanoReviewOrderPromoCode .promoCodeHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#nanoReviewOrderPromoCode .promoCodeBody { width: 100%; font-size: 1rem; }
#nanoReviewOrderPromoCode .promoCodeBody .toastWrapper { width: 100%; }
#nanoReviewOrderPromoCode .promoCodeBody #promoCodeListAccordion #btnViewPromoCode { font-weight: 420; cursor: default;}
#nanoReviewOrderPromoCode #promoCodeToaster { opacity: 0.85; max-width: 100%; animation: toastHorizontalSlide 0.5s ease-in-out !important; }
#nanoReviewOrderPromoCode .promoCodeBody #promoCodeListAccordion #promoCodeCollapse #promoCodeNameList { font-weight: 700; }
#nanoReviewOrderPromoCode .promoCodeBody #promoCodeListAccordion #promoCodeCollapse #promoCodeBeginDateList { color: var(--accent); }
#nanoReviewOrderPromoCode .promoCodeBody .toastWrapper .confettiWrapper {overflow: hidden; pointer-events: none;}


/* make payment */
#nanoReviewOrder .setUpAutoPayBody .form-select,
#payment-method-div .form-select { border-radius: .25rem; width: 100%; padding-left: .5rem; padding-right: .5rem; }

#nanoReviewOrder .billedPaymentHead { width: 100%; }
#nanoReviewOrder .billedPaymentHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#nanoReviewOrder .billedPaymentHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#nanoReviewOrder .billedPaymentHead { width: 100%; font-size: 1rem; }

#nanoReviewOrder .prepaidPaymentHead { width: 100%; }
#nanoReviewOrder .prepaidPaymentHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#nanoReviewOrder .prepaidPaymentHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#nanoReviewOrder .prepaidPaymentHead { width: 100%; font-size: 1rem; }

/* manage autopay */
#nanoSetUpAutoPay { background: var(--gray-100); border: .0625rem solid var(--gray-300); padding: 1rem; border-radius: .25rem; }
#nanoSetUpAutoPay .setUpAutoPayHead { width: 100%; }
#nanoSetUpAutoPay .setUpAutoPayHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#nanoSetUpAutoPay .setUpAutoPayHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#nanoSetUpAutoPay .setUpAutoPayBody { width: 100%; font-size: 1rem; }
#nanoSetUpAutoPay .setUpAutoPayBody #payment-method-div .input-group { width: 100%; }
#nanoSetUpAutoPay .setUpAutoPayBody #payment-date-div .input-group { width: auto; }
#nanoSetUpAutoPay .setUpAutoPayBody .form-select { border-right: 0 !important; font-size: 1rem; font-family: Roboto, sans-serif !important; width: 100%; }
#nanoSetUpAutoPay .setUpAutoPayBody .input-group-append { background: var(--white) !important; position: absolute; right: 0; top: 0; background: var(--white); border-left: 0; }
#nanoSetUpAutoPay .setUpAutoPayBody .input-group-append:not(:last-child) > .input-group-text { position: absolute; right: 0; top: 0; background: transparent; }

/* edit button */
#nanoReviewOrderPlanCard .btn-edit { background: var(--gray-200); color: var(--primary); border-color: var(--gray-200); margin-top: .5rem; }
#nanoReviewOrderPlanCard .btn-edit:hover { background: var(--gray-300); color: var(--primary-600); border-color: var(--gray-400); }
#nanoReviewOrderPlanCard .btn-edit:focus { background: var(--gray-300); color: var(--primary-700); border-color: var(--gray-500); box-shadow: 0 0 0 0.25rem rgba(var(--gray-rgb), 0.5); }
#nanoReviewOrderPlanCard .btn-edit:active,
#nanoReviewOrderPlanCard .btn-edit.active { background: var(--primary); color: var(--white); border-color: var(--primary); box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5); }
#nanoReviewOrderPlanCard .btn-edit:active::after,
#nanoReviewOrderPlanCard .btn-edit.active::after { color: var(--white) !important; }

/* remove button */
#nanoReviewOrderPlanCard .btn-remove { background: var(--gray-200); color: var(--danger); border-color: var(--gray-200); margin-top: .5rem; }
#nanoReviewOrderPlanCard .btn-remove:hover { background: var(--gray-300); color: var(--danger-600); border-color: var(--gray-400); }
#nanoReviewOrderPlanCard .btn-remove:focus { background: var(--gray-300); color: var(--danger-700); border-color: var(--gray-500); box-shadow: 0 0 0 0.25rem rgba(var(--gray-rgb), 0.5); }
#nanoReviewOrderPlanCard .btn-remove:active,
#nanoReviewOrderPlanCard .btn-remove.active { background: var(--danger); color: var(--white); border-color: var(--danger); box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgb), 0.5); }
#nanoReviewOrderPlanCard .btn-remove:active::after,
#nanoReviewOrderPlanCard .btn-remove.active::after { color: var(--white) !important; }

/* print button */
/*#nanoPrintReceiptBtn { position: absolute; right: 0; top: .25rem; }*/

/*@media (min-width: 576px) {
  #nanoPrintReceiptBtn { top: -.5rem; z-index: 1; }
}*/

@media (min-width: 768px) {
  #nanoReviewOrder .reviewPlanBody .panelContent { min-height: 2.625rem !important; }
  #nanoReviewOrder .reviewPlanBody .colDesc { width: calc(100% - 24.125rem); }

  #nanoReviewOrder .reviewPlanBody .colQuantity { text-align: center; width: 5rem; }
  #nanoReviewOrder .reviewPlanBody .colQuantity::before { display: none; }

  #nanoReviewOrderPlanCard .btn-edit,
  #nanoReviewOrderPlanCard .btn-remove { position: relative; top: -.5rem; margin-top: 0; }

  #nanoReviewOrder .compSubtotal .colDesc { width: calc(100% - 13rem); align-content: start; }

  /*#nanoPrintReceiptBtn { top: -.375rem; z-index: 1; }*/
}

/* NANO: Shopping Cart ------------------------------------------------------- */

/* cart trigger */
#nanoSelectProducts .viewCartPopover { position: absolute !important; top: -.75rem !important; right: 0 !important; float: right !important; }
#nanoSelectProducts .viewCartPopover i { font-size: 1.25rem !important; position: relative !important; right: 0 !important; padding-top: .25rem; }
#nanoSelectProducts .viewCartPopover .badge { height: .5rem !important; width: .5rem !important; border-radius: .5rem !important; padding: 0 !important; position: absolute !important; left: unset !important; right: .625rem !important; top: .425rem !important; }

/* cart tooltip */
#nanoSelectProductPageTitle .tooltip { left: -.125rem !important; }
#nanoSelectProductPageTitle .tooltip > .arrow { left: calc(50% - .625rem) !important; }

/* cart popover */
#nanoSelectProductPageTitle .popover { width: 14.25rem !important; left: .625rem !important; top: 0 !important; max-width: unset !important; }
#nanoSelectProductPageTitle .popover > .arrow { top: 1.325rem !important; }
#nanoSelectProductPageTitle .popover > .popover-body { padding: 0 !important; }

@media (min-width: 768px) {
  #nanoSelectProducts .viewCartPopover { top: -.625rem !important; }
  #nanoSelectProducts .viewCartPopover i { font-size: 1.5rem !important; }
  #nanoSelectProducts .viewCartPopover .badge { height: .625rem !important; width: .625rem !important; border-radius: .625rem !important; right: .625rem !important; top: .425rem !important; }

  #nanoSelectProductPageTitle .tooltip { left: -.075rem !important; }

  #nanoSelectProductPageTitle .popover { width: 20rem !important; }
  #nanoSelectProductPageTitle .popover > .arrow { top: 1.325rem !important; }
}

/* cart items */
#nanoShoppingCart { font-size: .875rem; }

/* clear button */
#nanoShoppingCart .btn-clear { background: var(--gray-200); color: var(--primary); border-color: var(--gray-200); }
#nanoShoppingCart .btn-clear:hover { background: var(--gray-300); color: var(--primary-600); border-color: var(--gray-400); }
#nanoShoppingCart .btn-clear:focus { background: var(--gray-300); color: var(--primary-700); border-color: var(--gray-500); box-shadow: 0 0 0 0.25rem rgba(var(--gray-rgb), 0.5); }
#nanoShoppingCart .btn-clear:active,
#nanoShoppingCart .btn-clear.active { background: var(--primary); color: var(--white); border-color: var(--primary); box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5); }
#nanoShoppingCart .btn-clear:active::after,
#nanoShoppingCart .btn-clear.active::after { color: var(--white) !important; }

/* remove button */
#nanoShoppingCart .rightColumnCard { border: .0625rem solid var(--gray-300); background: var(--gray-100); border-radius: .25rem; }
#nanoShoppingCart .btn-remove { background: var(--gray-200); color: var(--danger); border-color: var(--gray-200); }
#nanoShoppingCart .btn-remove:hover { background: var(--gray-300); color: var(--danger-600); border-color: var(--gray-400); }
#nanoShoppingCart .btn-remove:focus { background: var(--gray-300); color: var(--danger-700); border-color: var(--gray-500); box-shadow: 0 0 0 0.25rem rgba(var(--gray-rgb), 0.5); }
#nanoShoppingCart .btn-remove:active,
#nanoShoppingCart .btn-remove.active { background: var(--danger); color: var(--white); border-color: var(--danger); box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgb), 0.5); }
#nanoShoppingCart .btn-remove:active::after,
#nanoShoppingCart .btn-remove.active::after { color: var(--white) !important; }

/* amounts */
#nanoShoppingCart .align-amounts { margin-right: calc(2.625rem + 4px); }

/* detailed cart */
#nanoDetailedCart .rightColumnCard { border: .0625rem solid var(--gray-300); background: var(--gray-100); border-radius: .25rem; }
#nanoDetailedCart .detailedCartHead h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#nanoDetailedCart .detailedCartHead h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#nanoDetailedCart .detailedCartHead i { font-size: 1.5rem; padding-right: .75rem; }
#nanoDetailedCart .neg-price { color: var(--danger) !important; }

@media (min-width: 1200px) {
  #nanoConfigureServices .nanoShoppingCart,
  #nanoReviewOrder .nanoShoppingCart { margin-bottom: 1.5rem !important; }
}

/* NANO: Order Confirmation -------------------------------------------------- */

#nanoOrderConfirmationScreen .reviewPlanWrapper { border: .0625rem solid var(--gray-300); border-radius: .25rem; }

/* head */
#nanoOrderConfirmationScreen .reviewPlanHead { display: flex; background: var(--primary); padding: .5rem !important; background-color: var(--primary); border-bottom: .0625rem solid var(--gray-300); border-top-left-radius: .25rem; border-top-right-radius: .25rem; }
#nanoOrderConfirmationScreen .reviewPlanHead .btn-light.consumer-label-link { min-height: auto !important; border-radius: .125rem; border: 0; padding: .125rem; width: 7.5rem; display: inline; }

#nanoOrderConfirmationScreen .reviewPlanLogo { display: inline-block; min-height: 1.5rem; vertical-align: middle; width: 2rem; height: 2rem; margin-right: .75rem; align-content: center; text-align: center; }
#nanoOrderConfirmationScreen .reviewPlanLogo img { max-width: 100%; height: auto; text-align: center; vertical-align: middle; }

#nanoOrderConfirmationScreen .reviewPlanName { display: inline-block; min-height: 1.5rem; vertical-align: middle; width: calc(100% - 2.75rem); align-content: center; }
#nanoOrderConfirmationScreen .reviewPlanName h5 { display: inline-block; color: var(--white); font-weight: bold; margin-bottom: 0; width: 100%; }
#nanoOrderConfirmationScreen .reviewPlanName .consumer-label-link { margin-left: 0; }

/* body */
#nanoOrderConfirmationScreen .orderPlaced { display: inline-block; float: left; width: 1.5rem; height: 1.5rem; margin-right: .5rem; vertical-align: middle; }
#nanoOrderConfirmationScreen .reviewPlanBody .colIcon { min-width: 2.5rem; text-align: center; }
#nanoOrderConfirmationScreen .reviewPlanBody .colIcon i { font-size: 1.5rem; text-align: center; }
#nanoOrderConfirmationScreen .password-toggle-btn i { color: var(--primary) !important; }
#nanoOrderConfirmationScreen .thank-you-header { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }
#nanoOrderConfirmationScreen .lottie-animation { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; }
#nanoOrderConfirmationScreen .thank-you-title { margin: 0; line-height: 1.2; display: flex; align-items: center; }

/* confetti */
.confetti {position: absolute; width: 10px; height: 20px; z-index: 1040; background-color: var(--warning); top: -10px; opacity: 0.8; animation-name: confettiFall; animation-timing-function: cubic-bezier(0.44, -0.24, 0.64, 0.96); animation-iteration-count: infinite;}
.confetti.confettiCircle { height: 0.5rem; width: 0.5rem; border-radius: 50%; }
.confetti.confettiCircleBig { height: 0.8rem; width: 0.8rem; border-radius: 50%; }
.confetti.confettiSquareSmall { width: 0.8rem; height: 0.8rem; }
.confetti.confettiSquare { width: 0.9rem; height: 0.9rem; }
.confetti.confettiRectangle { width: 0.8rem; height: 1.6rem; }
.confetti.confettiRectangleSlim { width: 0.3rem; height: 1.9rem; }
.confetti.confettiRectangleLong { width: 0.5rem; height: 3.2rem; }

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0.7;
  }
}

/* Configuration - Standard View */

#nanoConfigureServices .configStandardPlanHead { padding: .75rem !important; }
#nanoConfigureServices #configStandardPlanHead .configPlanHead { display: flex; background: var(--primary); padding: .5rem !important; border-top-left-radius: .25rem; border-top-right-radius: .25rem; border-bottom: .0625rem solid var(--gray-100); }

#nanoConfigureServices #configStandardPlanHead .configPlanName { display: inline-flex; width: calc(100% - 2.75rem); min-height: 2rem; justify-content: space-between !important; align-items: center; }
#nanoConfigureServices #configStandardPlanHead .configPlanName h5 { display: inline-block; color: var(--white); font-weight: 700; margin-bottom: 0; font-size: 1.125rem; width: auto; align-content: center; }
#nanoConfigureServices #configStandardPlanHead .configPlanName .configPlanValidation { float: unset; margin-right: auto;}
#nanoConfigureServices #configStandardPlanHead .configPlanName h5.standardViewTotalMonthlyPrice { text-align: right; font-weight: 400; font-size: 1.125rem; color: var(--white); float: right !important; }

#nanoConfigureServices #configStandardView .panelHeaders .colDesc { width: calc(100% - 10rem) !important; }
#nanoConfigureServices #configStandardView .panelHeaders .colPrice { width: 10rem !important; text-align: right !important; }

#nanoConfigureServices #configStandardView .configPlanBody .colDesc {  width: calc(100% - 31.625rem) !important;}
#nanoConfigureServices #configStandardView .configPlanBody .colPrice { width: 10rem !important; text-align: right !important; }

#nanoConfigureServices #configStandardView .configPlanBody .compLevelOne { border-top: 0; border-bottom: .0625rem solid var(--gray-100) !important; }

#nanoConfigureServices #configStandardView #nanoConfigureServicesStandardDetails .panelContent { width: 100%; }

#nanoConfigureServices #configStandardView #nanoConfigureServicesStandardDetails .panelContent .colDesc { width: 100% !important; }
#nanoConfigureServices #configStandardView #nanoConfigureServicesStandardDetails .panelContent .colPrice { width: 100%; text-align: right !important; margin-top: .5rem; }

@media (min-width: 768px) {
  #nanoConfigureServices #configStandardView #nanoConfigureServicesStandardDetails .panelContent .colDesc { width: calc(100% - 10rem) !important; }
  #nanoConfigureServices #configStandardView #nanoConfigureServicesStandardDetails .panelContent .colPrice { width: 10rem !important; text-align: right !important; }

  #nanoConfigureServices #configStandardView .configPlanBody .compLevelOne { border-bottom: .0625rem solid var(--gray-100) !important; }
  #nanoConfigureServices #configStandardView .configPlanBody .colDesc { width: calc(100% - 35.625rem) !important; }
}

#componentRowProductName .btn { min-height:.9rem; }
#componentRowProductName .consumer-label-link { margin-left: 1.5rem; }
#componentRowProductName .checkbox-container { display: flex; align-items: center; }
#componentRowProductName .form-check-input { width: 1.125rem; height: 1.125rem; margin-right: .5rem;  margin-left: 0 !important; margin-top: 0; }

.serviceWrapper #shoppingCartHeader { border-top-left-radius: .25rem; border-top-right-radius: .25rem; }
.serviceWrapper #shoppingCartHeader > img { border-top-left-radius: .25rem; border-top-right-radius: .25rem; border: .0625rem solid var(--gray-300); border-bottom: 0; }

/* Order Summary - Standard View */

#orderSummaryStandardViewContainer .colDesc { font-weight: 500 !important; padding-left: .25rem !important; }
#orderSummaryStandardViewContainer .consumer-label-link { margin-left: 0rem !important; text-align: left !important; }
#nanoReviewOrderPlanCard #nanostandardReviewOrderPlanCard .panelHeaders .colDesc { width: calc(100% - 14.125rem) !important; }
#orderSummaryStandardViewContainer .colDesc {width: calc(100% - 14.125rem) !important;}
#nanoReviewOrderPlanCard #nanostandardReviewOrderPlanCard .panelHeaders .colPrice { text-align:center !important; width:10rem !important;}
#orderSummaryStandardViewContainer .colPrice { text-align:center !important; width:10rem !important;}

/* reCAPTCHA */

.grecaptcha-badge { bottom: 80px !important; }

@media (min-width: 992px) {
	.grecaptcha-badge { bottom: 60px !important; }
}

/* Order Summary - Promotional Pricing */

.discount-pill { display: inline-block; background-color: var(--success); color: var(--white); font-size: 0.875rem; font-weight: 700; border-radius: .75rem; padding: .125rem .25rem; margin-left: .125rem; vertical-align: middle; letter-spacing: 0.03125rem; box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, .25); }
.price-discounted { text-align: right; }
.old-price { text-decoration: line-through; font-size: 1rem; }
.new-price { color: var(--success); }

/* NANO: Order Summary Print Mode (KEEP AT END OF CSS) ----------------------- */

@media (min-width: 1200px) {
  #flow-step-wrapper { max-width: 1100px; }
  #original-flow-content,
  #flow-step-content,
  #marketingCarouselSlides > div { max-width: 1200px; }
}
@media screen {
  .d-print-block { display: none !important; }
  .d-print-none { display: block !important; }
  .d-print-inline-block { display: inline-block !important; }
}
@media print {
  .d-print-block { display: block !important; }
  .d-print-none { display: none !important; }
  .d-print-inline-block { display: none !important; }
}
.stepInstructionsWhite { background-color: white !important; border: .125rem solid white !important; }

/* reCAPTCHA */
.grecaptcha-badge { position: fixed !important; left: 0rem !important; right: auto !important; bottom: .125rem !important; z-index: 9999 !important; transform: none !important; transform-origin: bottom left !important; width: 70px !important; height: 60px !important; overflow: hidden !important; border-radius: 4px !important; transition: width 0.3s ease, height 0.3s ease !important; }
.grecaptcha-badge:hover { width: 256px !important; height: 60px !important; overflow: visible !important; }

/* tablet view */
@media (min-width: 600px) and (max-width: 991px) { .grecaptcha-badge { bottom: calc(9rem + 0.75rem) !important; }}
/* bigger tablet view */
@media (min-width: 992px) and (max-width: 1187px) { .grecaptcha-badge { bottom: 5.2rem !important; }}
/* desktop view */
@media (min-width: 1188px) { .grecaptcha-badge { bottom: calc(4rem + 0.75rem) !important; }}