: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;
  --gray-text: #495057;
  --pink: #c90076;
  --red: #b80606;
  --orange: #f58025;
  --yellow: #ffc425;
  --green: #0b9c36;
  --teal: #15dcc2;
  --cyan: #007aff;
  --blue: #0079c1;
  --indigo: #003f5f;
  --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;
  /* primary */
  --primary: #0079c1;
  --primary-rgb: 0, 121, 193;
  --primary-100: #cce4f2;
  --primary-200: #99c9e6;
  --primary-300: #66aed9;
  --primary-400: #3293cd;
  --primary-500: #0079c1;
  --primary-600: #00609a;
  --primary-700: #004873;
  --primary-800: #00304d;
  --primary-900: #001826;
  /* secondary */
  --secondary: #003f5f;
  --secondary-rgb: 0, 63, 95;
  --secondary-100: #ccd8df;
  --secondary-200: #99b2bf;
  --secondary-300: #668b9f;
  --secondary-400: #32657e;
  --secondary-500: #003f5f;
  --secondary-600: #00324c;
  --secondary-700: #002539;
  --secondary-800: #001926;
  --secondary-900: #000c13;
  /* accent */
  --accent: #f58025;
  --accent-rgb: 245, 128, 37;
  --accent-100: #fde5d3;
  --accent-200: #fbcca7;
  --accent-300: #f9b27c;
  --accent-400: #f79950;
  --accent-500: #f58025;
  --accent-600: #c4661d;
  --accent-700: #934c13;
  --accent-800: #62330e;
  --accent-900: #311907;
  /* 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: #007aff;
  --info-rgb: 0, 122, 255;
  --info-100: #cce4ff;
  --info-200: #99c9ff;
  --info-300: #66afff;
  --info-400: #3294ff;
  --info-500: #007aff;
  --info-600: #0061cc;
  --info-700: #004999;
  --info-800: #003066;
  --info-900: #001833;
  /* 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; 
  /* 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;
}

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

body { background: var(--white); color: var(--gray-text); 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 { margin: 0; padding: 0; }

.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: 'FontAwesome'; content: '\f05a'; font-size: 1rem; font-style: normal !important; padding-right: .5rem; color: var(--info); position: relative; top: .0625rem; }

@media screen and (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: center top; 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 screen and (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 - 8.125rem); }
  .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.125rem !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: 'FontAwesome'; 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: 'FontAwesome'; display: inline-flex; justify-content: center; align-content: flex-start; font-size: 1rem; margin-right: .5rem; font-style: normal !important; }
.alert-icon-success:after, 
.icon-success:after { content: '\f058'; color: var(--success) !important; }
.alert-icon-warning:after, 
.icon-warning:after { content: '\f071'; color: var(--warning) !important; }
.alert-icon-danger:after, 
.icon-danger:after { content: '\f06a'; color: var(--danger) !important; }
.alert-icon-info:after, 
.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, 
#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 screen and (max-width: 576px) {
  .popover { width: auto; }
 }

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

a > i { color: var(--primary); }
i { font-style: normal; }
.fa,
.fas,
.far { font-family: 'FontAwesome'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; }

.fa-exclamation-circle,
.fa-trash { color: var(--danger); }
.fa-exclamation-triangle { color: var(--warning); }
.fa-check-circle,
.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-info-circle { color: var(--info); }

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

.case-icon { font-family: 'FontAwesome'; font-size: .75rem; margin-right: .5rem; font-style: normal !important; }
.icon-opened:before { content: '\f07c'; color: var(--info) !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 screen and (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 screen and (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,
select:after { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; content: "\f0d7" !important; font-family: 'FontAwesome' !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(--info-200); outline: 0; box-shadow: 0 0 0 .2rem rgba( 0, 122, 255, .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: 1px 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/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,
.was-validated select.form-select:valid,
select.form-control.is-valid,
select.form-select.is-valid { background-image: url(../img/icon-success.svg); background-size: .875rem; background-repeat: no-repeat; border-right: .0625rem solid var(--success) !important; padding-right: 1.5rem; border-right-color: var(--success) !important }
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/icon-error.svg); background-size: .875rem; border-right: .0625rem solid var(--danger) !important; border-right-color:  var(--danger) !important;}
.was-validated select.form-control:invalid,
.was-validated select.form-select:invalid,
select.form-control.is-invalid,
select.form-select.is-invalid { background-image: url(../img/icon-error.svg); background-size: .875rem; background-repeat: no-repeat; border-right: .0625rem solid var(--danger) !important; padding-right: 1.5rem; border-right-color: var(--danger) !important; }
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: .625rem .75rem .675rem !important; font-size: 1rem; border: .0625rem solid var(--gray-400); border-left: 0; border-top-right-radius: .2rem; border-bottom-right-radius: .2rem; vertical-align: middle; 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: 'FontAwesome'; 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; }
.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(--info) !important; }
a.btn-link:hover,
a.btn-link:not([href]):not([tabindex]):hover,
button.btn-link:hover { text-decoration: underline !important; color: var(--info-600) !important; }
a.btn-link:focus,
a.btn-link:not([href]):not([tabindex]):focus,
button.btn-link:focus { text-decoration: underline !important; color: var(--info-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(--info); text-decoration: underline !important; }
.btn-link:hover { color: var(--info-600); background: var(--gray-100); }
.btn-link:focus { color: var(--info-700); background: var(--gray-200); }
.btn-link.disabled, .btn-link:disabled { color: var(--info); opacity: 0.5; }

.consumer-label-link { display: block; font-size: .75rem !important; line-height: 1.5 !important; color: var(--info) !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(--info-600); background: var(--gray-100); }
.consumer-label-link:focus { color: var(--info-700); background: var(--gray-200); }
.consumer-label-link.disabled,
.consumer-label-link:disabled { color: var(--info); 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: '\f067'; font-family: FontAwesome, sans-serif; color: var(--success); font-size: 1.5rem; }
.btn-remove::after { content: '\f1f8'; font-family: FontAwesome, sans-serif; color: var(--danger); font-size: 1.5rem; }
.btn-edit::after { content: '\f040'; font-family: FontAwesome, sans-serif; color: var(--info); font-size: 1.5rem; }
.btn-download::after { content: '\f0ed'; font-family: FontAwesome, sans-serif; color: var(--info); font-size: 1.5rem; }
.btn-home::after { content: '\f015'; font-family: FontAwesome, sans-serif; color: var(--info); font-size: 1.5rem; }
.btn-save::after { content: '\f0c7'; font-family: FontAwesome, sans-serif; color: var(--info); font-size: 1.5rem; }
.btn-clear::after { content: '\f12d'; font-family: FontAwesome, sans-serif; color: var(--info); 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(0, 122, 255, 0.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(--info) !important; background-color: var(--gray-200); border-color: var(--gray-200); }
.btn-light:hover { color: var(--info) !important; background-color: var(--gray-300); border-color: var(--gray-300); }
.btn-check:focus + .btn-light,
.btn-light:focus { color: var(--info) !important; background-color: var(--gray-300); border-color: var(--gray-400); box-shadow: 0 0 0 0.25rem rgba(var(--info-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(--info) !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(--info-rgb), 0.25);; }
.btn-light.disabled,
.btn-light:disabled { color: var(--info) !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(--info-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(--info-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(--black); border-color: var(--gray-200); background: var(--white); }
.btn-outline-light:hover { color: var(--black); 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(--info-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(--black); 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(--info-rgb), 0.25); }
.btn-outline-light.disabled, 
.btn-outline-light:disabled { color: var(--gray-200); 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(--info-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(--info-rgb), 0.5); }
.btn-outline-dark.disabled, 
.btn-outline-dark:disabled { color: var(--gray-800); background-color: transparent; }

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

@media screen and (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; }

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

.table { font-size: 1rem; color: var(--gray-text); width: 100%; margin-bottom: 0; }
.table thead { border-bottom: .0625rem solid var(--gray-400); }
.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/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/icon-error.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(0, 0, 0, .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 screen and (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(0, 0, 0, .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(--white); }
.headerTextColor { color: var(--primary); }

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

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

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

.mainMenuItemBkgd:active,
.mainMenu .nav-item.dropdown.navbar-toggler:active,
.mainMenuItemBkgd.active,
.mainMenu .nav-item.dropdown.navbar-toggler.active { background: var(--primary-700) !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(--primary) !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(--white) !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(--white) !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(--white) !important; }

/* Sub Menu - Backgrounds */
.subMenuItemBkgd,
.dropdown-item.subMenuItemBkgd { background: var(--white) !important; }

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

.subMenuItemBkgd:focus,
.dropdown-item.subMenuItemBkgd:focus { background: var(--primary-600) !important; }

.subMenuItemBkgd:active,
.subMenuItemBkgd.active,
.dropdown-item.subMenuItemBkgd:active,
.dropdown-item.subMenuItemBkgd.active { background: var(--primary-700) !important; }

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

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

.subMenuItemText:focus,
.subMenuItemText:focus > i,
.dropdown-item.subMenuItemText:focus,
.dropdown-item.subMenuItemText:focus > i { color: var(--white) !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(--white) !important; }

/* Footer ------------------------------------------------------------------- */

footer { line-height: .625rem; min-height: 5.5rem; text-align: center; padding: .75rem 1rem !important; }
.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(--secondary); }
.footerTextColor { color: var(--white); }

/* Footer Menu - Backgrounds */
.footerMenuItemBackgroundColor { color: var(--secondary) !important; }
.footerMenuItemBackgroundColor:hover { color: var(--primary-600) !important; }
.footerMenuItemBackgroundColor:focus { color: var(--primary) !important; }
.footerMenuItemBackgroundColor:active,
.footerMenuItemBackgroundColor.active { color: var(--primary-400) !important; }

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

@media screen and (min-width: 992px) {
  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 1rem; }
  .footer-left { text-align: left; }
  .footer-center { order: 0; }
  .footer-right { text-align: right; }
}

/* Media Queries ------------------------------------------------------------ */

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

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

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

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

@media screen {
  .d-print-block { display: none !important; }
}

@media print {
  .d-print-none { display: none !important; }
}

/* 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(0, 0, 0, .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 screen and (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; }

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

/* 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 screen and (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 screen and (min-width: 992px) {
  .billedProductsTableWrapper { width: 100%; }
  .billedProductsTable { width: 100%; }
  .billedProductsTable .colDescription { width: calc(100% - 39rem - 5.125rem); }
  .billedProductsTable .colServiceID { width: 12rem; }
}

@media screen and (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; }

@media screen and (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: .675rem .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 Selection Filters ------------------------------------------------ */

.btn-group-toggle .btn-filter .filterImage { font-size: 1rem; font-weight: 700 !important; height: 2rem; display: flex; }
.btn-group-toggle .btn-filter .filterImage img { max-height: 2rem; max-width: 2rem; z-index: 10; display: block; }
.btn-group-toggle .btn-filter .filterText { font-size: .75rem !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none; }

.btn-group-toggle .btn-filter,
.btn-group-toggle .btn-filter:first-child,
.btn-group-toggle .btn-filter:last-child { border-radius: .25rem !important; }

.btn-group-toggle .btn-filter.disabled:active,
.btn-group-toggle .btn-filter:first-child.disabled:active,
.btn-group-toggle .btn-filter:last-child.disabled:active,
.btn-group-toggle .btn-filter.disabled.active,
.btn-group-toggle .btn-filter:first-child.disabled.active,
.btn-group-toggle .btn-filter:last-child.disabled.active { opacity: 1 !important; }

.btn-group-toggle .btn-filter { width: 25%; min-width: 4.25rem; padding: .25rem .125rem; vertical-align: text-bottom; text-align: center; border: .0625rem solid var(--gray-400); color: var(--primary); }
.btn-group-toggle .btn-filter:hover { border-color: var(--primary); color: var(--primary); background: var(--white); }
.btn-group-toggle .btn-filter:focus { border-color: var(--secondary); color: var(--primary); background: var(--white); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important; }
.btn-group-toggle .btn-filter:active,
.btn-group-toggle .btn-filter.active { border-color: var(--secondary); color: var(--secondary); background: var(--gray-100); }

/* Product Types */
#productTypes .btn-filter { margin-left: 0 !important; margin-right: .125rem !important; }
#productTypes .btn-filter:last-child { margin-right: 0 !important; }
#productTypes .btn-group-toggle .btn-filter .filterText,
#productTypes .btn-group-toggle .btn-filter:active .filterText,
#productTypes .btn-group-toggle .btn-filter.active .filterText { color: #0079c1; }

/* Collection Methods */
#collectionMethods .btn-filter { margin-left: .125rem !important; margin-right: 0 !important; }
#collectionMethods .btn-filter:first-child { margin-left: 0 !important; }
#collectionMethods .btn-group-toggle .btn-filter .filterText,
#collectionMethods .btn-group-toggle .btn-filter:active .filterText,
#collectionMethods .btn-group-toggle .btn-filter.active .filterText { color: #0079c1; }

@media screen and (min-width: 992px) {
  .btn-group-toggle .btn-filter { min-width: 5rem; }
}

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

/* Prepaid */
.prepaidBkgdColor { background: var(--prepaid-100); }
.prepaidTextColor { color: var(--prepaid); }

/* Billed */
.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) !important; }

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

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

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

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

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

/* 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 { font-size: .875rem; }
.location-notfound { display: block; font-size: .75rem !important; margin-top: 0.0625rem; color: var(--danger); padding: 0; }

/* 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: 'FontAwesome'; 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(0, 123, 255, 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; }
.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(--info) !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: 1.875rem !important; font-weight: 900 !important; line-height: .875 !important; letter-spacing: -.0625rem !important; }
.consumerLabel h3 { font-size: .875rem !important; font-weight: 700 !important; line-height: 1.25 !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(--info) !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; }

@media screen and (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; }



/* -----------------------------------------------------------------------------
   BILLED UPGRADE/DOWNGRADE (UGDG 2024)
----------------------------------------------------------------------------- */

/* Change Order (U/D): Change Types ----------------------------------------- */

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

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

#changeOrderFlow .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; }
#changeOrderFlow .change-btn:hover { outline: .25rem solid var(--primary); background: var(--white); cursor: pointer; }
#changeOrderFlow .change-btn:focus { outline: .25rem solid var(--secondary); background: var(--white); cursor: pointer; box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); }
#changeOrderFlow .change-btn:active,
#changeOrderFlow .change-btn.active { outline: .25rem solid var(--secondary); background: var(--gray-300); box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); }

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

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

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

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

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

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

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

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

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

/* Change Order (U/D): Stepper & Step Intros -------------------------------- */

.steps-wrapper { padding: .125rem 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; }

/* circle style */
.steps-wrapper .step { height: 1.5rem; width: 1.5rem; line-height: 1.6rem; border-radius: 50%; text-align: center; cursor: pointer; font-weight: 700; vertical-align: middle; border: .1625rem solid transparent; }
.steps-wrapper .step-done { color: var(--white); border-color: var(--secondary); background: var(--secondary); }
.steps-wrapper .step-current { color: var(--primary); border-color: var(--white); background: var(--white); outline: .1625rem solid var(--primary); }
.steps-wrapper .step-future { color: var(--white); border-color: transparent; background: var(--gray-300); }
.steps-wrapper .step-disabled { cursor: not-allowed; }
.steps-wrapper .step-number { position: relative; bottom: .1875rem; font-size: 1rem; font-weight: 700; vertical-align: middle; }

/* line style */
.steps-wrapper .line { display: block; position: relative; bottom: 1.1625rem; z-index: -1; }
.steps-wrapper .line-done { background: var(--secondary); height: .25rem; }
.steps-wrapper .line-current { background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); height: .25rem; }
.steps-wrapper .line-future { background: var(--gray-300); height: .1625rem; bottom: 1.0625rem; }
.steps-wrapper .line-none { display: none; }

/* text */
.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 screen and (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; }
}

/* Change Order (U/D): Select Services -------------------------------------- */

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

.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; }
.speedOptions button, .speedOptions i { font-size: 1rem; }

.serviceCard:hover { outline: .25rem solid var(--primary); background: var(--white); cursor: pointer; }
.serviceCard:focus { outline: .25rem solid var(--secondary); background: var(--white); cursor: pointer; box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); }
.serviceCard:active,
.serviceCard.active { outline: .25rem solid var(--secondary); background: var(--secondary); box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); }

.serviceCard.current { outline: .125rem solid var(--gray-300); background: var(--white); cursor: pointer; }
.serviceCard.current:hover { outline: .25rem solid var(--primary); background: var(--white); cursor: pointer; }
.serviceCard.current:focus { outline: .25rem solid var(--secondary); background: var(--white); cursor: pointer; box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); }
.serviceCard.current:active,
.serviceCard.current.active { outline: .25rem solid var(--secondary); background: var(--secondary); box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); }

.serviceCard.current.upgradeOnly,
.serviceCard.current.upgradeOnly:hover,
.serviceCard.current.upgradeOnly:focus,
.serviceCard.current.upgradeOnly:active,
.serviceCard.current.upgradeOnly.active { outline: .25rem solid var(--secondary); background: var(--secondary); box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); cursor: none; }

.serviceCard.default,
.serviceCard.default:hover,
.serviceCard.default:focus,
.serviceCard.default:active,
.serviceCard.default.active { outline: .25rem solid var(--secondary); background: var(--secondary); box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); cursor: none; }

.serviceCard.default.upgradeOnly,
.serviceCard.default.upgradeOnly:hover,
.serviceCard.default.upgradeOnly:focus,
.serviceCard.default.upgradeOnly:active,
.serviceCard.default.upgradeOnly.active { outline: .25rem solid var(--secondary); background: var(--secondary); box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); cursor: none; }

/* banners */
.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%; }
.serviceCard .banner { height: 1.5rem; border-radius: inherit; width: 100%; padding: .25rem 1rem; text-align: center; }
.serviceCard .banner:nth-child(2) { border-radius: 0; }
.serviceCard .defaultBanner { background: var(--accent); }
.serviceCard .currentBanner { background: var(--primary); }

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

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

/* body h3 */
.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; }
.serviceCard:hover .body h3 { color: var(--primary); }
.serviceCard:focus .body h3 { color: var(--secondary); }
.serviceCard:active .body h3,
.serviceCard.active .body h3 { color: var(--white); }

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

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

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

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

/* body p */
.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; }

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

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

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

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

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

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

/* Change Order (U/D): Select Service Plan ---------------------------------- */

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

.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: 18rem; }

.planCard:hover { outline: .25rem solid var(--primary); background: var(--white); cursor: pointer; }
.planCard:focus { outline: .25rem solid var(--secondary); background: var(--white); cursor: pointer; box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); }
.planCard:active,
.planCard.active { outline: .25rem solid var(--secondary); background: var(--gray-300); box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%); }

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

/* product images */
#productCardIcons { width: 100%; height: 6rem; }
#productCardIcons img { max-width: 4.5rem; max-height: 4.5rem; margin: 1.25rem auto auto; }
#productCardPhotos { width: auto; max-width: 100%; height: auto; }
  #productCardPhotos img { width: 100%; height: auto; min-height: 6.25rem; margin: 0 auto; }

/* product title */
#planCardTitle 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 */
#planCardPrice { color: var(--gray-text); font-weight: 700; text-align: center; }
#planCardPrice .planCardPriceCaption { font-size: .75rem; text-transform: uppercase; font-weight: 500; margin: 0; }
#planCardPrice .planCardPriceDollars { position: relative; top: -.375rem; color: var(--gray-text); font-weight: 700; }

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

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

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

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

/* consumer label accordion */
#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: 'FontAwesome'; color: var(--info); font-size: .75rem; font-weight: 900; float: right; }
#offeringCardInternalConsumerLbl .btn-light.collapsed:after,
#offeringCardExternalConsumerLbl .btn-light.collapsed:after { content: '\f078'; }

/* Change Order (U/D): Configure Services ----------------------------------- */

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

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

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

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

.configPlanBody .panelHeaders { display: none; }

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

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

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

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

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

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

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

/* Offering Level */
.configPlanBody .compLevelOne .panelContent { border-bottom: .0625rem solid var(--gray-700); align-content: center; }
.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 */
.configPlanBody .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-600); align-content: center; }
.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 */
.configPlanBody .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-500); }
.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 */
.configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
.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 */
.configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
.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 */
.configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
.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 */
.configPlanBody .compSubtotal { padding-bottom: .75rem; align-content: center; }
.configPlanBody .compSubtotal .colDesc { padding-left: 0; font-size: .875rem; color: var(--primary); }
.configPlanBody .compSubtotal .colPrice { padding-left: 0; padding-right: 0; }
.configPlanBody .compSubtotal .colFrequency { padding-left: 0; padding-right: 0; }

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

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

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

.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; }
.quantityWidget .btn-quantity:hover { background: var(--gray-200); }
.quantityWidget .btn-quantity:focus { background: var(--gray-300); }
.quantityWidget .btn-quantity:active,
.quantityWidget .btn-quantity.active { background: var(--primary); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Component Level 3 */
  .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
  .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 */
  .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
  .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 */
  .configPlanBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
  .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 */
  .configPlanBody .compSubtotal { padding-bottom: .75rem; align-content: center; }
  .configPlanBody .compSubtotal .colDesc { font-size: 1rem; }
  .configPlanBody .compSubtotal .colPrice { font-size: 1rem; padding-right: .25rem; }

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

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

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

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

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

/* remove button */
#configureServicesCart .shoppingCardBody .btn-remove { color: var(--white); background-color: var(--danger); border-color: var(--danger); }
#configureServicesCart .shoppingCardBody .btn-remove:hover { color: var(--white); background-color: var(--danger-600); border-color: var(--danger-600); }
#configureServicesCart .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); }
#configureServicesCart .shoppingCardBody .btn-remove:active,
.shoppingCardBody .btn-remove.active { color: var(--white); background-color: var(--danger-600); border-color: var(--danger-700); }
#configureServicesCart .shoppingCardBody .btn-remove:disabled,
.shoppingCardBody .btn-remove.disabled { opacity: .5; cursor: none; }
#configureServicesCart .shoppingCardBody .btn-remove > i { color: var(--white); cursor: none; }

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

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

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

#configureServicesOptions #configResidentialPhone .ng-autocomplete.input-group { align-self: flex-start; top: .125rem; }
#configureServicesOptions #configResidentialPhone .ng-autocomplete.input-group .ng-autocomplete { width: calc(100% - 2.625rem); z-index: 9998; align-content: flex-start; }
#configureServicesOptions #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; }
#configureServicesOptions #configResidentialPhone .ng-autocomplete.input-group .autocomplete-container .suggestions-container { width: calc(100% + 2.625rem); z-index: 9999; max-height: 5rem; }
#configureServicesOptions #configResidentialPhone .ng-autocomplete.input-group-append { width: 2.625rem; }

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

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

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

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

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

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

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

/* Change Order (U/D): Review Order ----------------------------------------- */

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

.reviewOrderLogo { width: 2rem; height: 2rem; margin-right: .5rem; align-content: center; text-align: center; }
.reviewOrderLogo img { max-width: 100%; height: auto; text-align: center; vertical-align: middle; }

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

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

.reviewOrderBody .panelHeaders { display: none; }

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

.reviewOrderBody .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; }
.reviewOrderBody .panelFooters .colSubtotal { width: calc(100% - 13rem); display: inline-block; }
.reviewOrderBody .panelFooters .colPrice { width: 13rem; display: inline-block; }
.reviewOrderBody .panelFooters .colPrice::before { display: none; }
.reviewOrderBody .panelFooters .colFrequency { display: none; }

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

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

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

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

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

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

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

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

/* Component Level 2 */
.reviewOrderBody .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-500); }
.reviewOrderBody .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 */
.reviewOrderBody .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-400); }
.reviewOrderBody .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 */
.reviewOrderBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
.reviewOrderBody .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 */
.reviewOrderBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
.reviewOrderBody .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 */
.reviewOrderBody .compSubtotal { padding-bottom: 0; align-content: center; }
.reviewOrderBody .compSubtotal .colDesc { padding-left: 0; font-size: .875rem; color: var(--primary); }
.reviewOrderBody .compSubtotal .colPrice { padding-left: 0; padding-right: 0; }
.reviewOrderBody .compSubtotal .colFrequency { padding-left: 0; padding-right: 0; }

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

.reviewOrderBody hr { height: .125rem !important; }

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

  .reviewOrderBody .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: .5rem; min-height: 2.625rem; }

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

  .reviewOrderBody .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; }
  .reviewOrderBody .panelFooters .colSubtotal { width: calc(100% - 13rem); display: inline-block; }
  .reviewOrderBody .panelFooters .colPrice { text-align: right; padding: 0; width: 6rem; display: inline-block; font-size: .875rem; }
  .reviewOrderBody .panelFooters .colPrice::before { display: none; }
  .reviewOrderBody .panelFooters .colFrequency { display: inline-block; width: 7rem; }

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

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

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

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

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

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

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

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

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

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

  /* Component Level 4 */
  .reviewOrderBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-300); }
  .reviewOrderBody .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 */
  .reviewOrderBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent { border-bottom: .0625rem solid var(--gray-200); }
  .reviewOrderBody .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .compLevelTwo .panelContent .colDesc { background: transparent; border-bottom: 0; padding: .325rem 0 .325rem; font-weight: 400; color: var(--gray-500); }

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

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

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

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

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

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


/* -----------------------------------------------------------------------------
   NEW ACCOUNT NEW ORDER (NANO 2024)
----------------------------------------------------------------------------- */

/* NANO Marketing Carousel -------------------------------------------------- */

#marketingCarousel { justify-content: center; align-content: center; }
.carousel { background-color: var(--primary); border-bottom: .25rem solid var(--secondary); background-image: url(../img/textures/textures_waveLight25.png); background-repeat: repeat-x; background-size: cover; z-index: 1000; }

.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(0 0 0 /.5); align-content: center; }
.carousel-caption h1 { width: 100%; max-height: 6.25vh; color: var(--accent); 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(0 0 0 /.5); }

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

@media screen and (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 screen and (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(--white); 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 screen and (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-400) !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,
#resSubmitLead { width: 100% }

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

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

/* NANO Service Location ---------------------------------------------------- */

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

@media screen and (min-width: 768px) {
  #nanoServiceLocationNavshelf .btn-link { width: auto; }
}

/* NANO Create Lead --------------------------------------------------------- */

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

#resSubmitLead,
#busSubmitLead { width: 100%; }

@media screen and (max-width: 576px) {
  #createLead { width: auto; }
}

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

  #resSubmitLead,
  #busSubmitLead { width: auto !important; }
}

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

/* See 'Change Order (Upgrade/Downgrade): Select Services' section for above */

/* scroll to top */
#scrollToTopButton { position: fixed; z-index: 10000; right: .5rem; bottom: .5rem; }

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

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

#selectSpeedContent .serviceCard .icon img { max-width: 6rem; max-height: 6rem; }
#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 */
#selectServiceContent .noData { margin: 0; }

/* unselected card */
#selectServiceContent .serviceCard .icon img { max-width: 6rem; max-height: 6rem; }
#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 */
#selectServiceContent .serviceCard .selected { outline: .25rem solid var(--secondary) !important; background: var(--secondary) !important; box-shadow: .25rem .5rem .25rem rgba(0 0 0 / 25%) !important; border-radius: .5rem !important; }
#selectServiceContent .serviceCard .selected.body h3 { color: var(--white) !important; }
#selectServiceContent .serviceCard .selected.body p { color: var(--gray-200) !important; }

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

/* button when card selected */
#selectServiceContent .serviceCard .selected .btn-secondary { color: var(--primary) !important; border-color: var(--primary) !important; background: var(--white) !important; }
#selectServiceContent .serviceCard:hover .selected .btn-secondary { color: var(--white) !important; background-color: var(--primary-600) !important; border-color: var(--primary-600) !important; }
#selectServiceContent .serviceCard:focus .selected .btn-secondary { color: var(--white) !important; background-color: var(--primary-600) !important; border-color: var(--primary-600) !important; box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5) !important; }
#selectServiceContent .serviceCard:active .selected .btn-secondary,
#selectServiceContent .serviceCard.active .selected .btn-secondary { color: var(--white) !important; background-color: var(--primary-600) !important; border-color: var(--primary-700) !important; }

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

/* NANO Select Service Plan ------------------------------------------------- */

/* See 'Change Order (U/D): Select Service Plan' section for above */

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

/* bestseller flag */
#nanoSelectPlan .bestseller-wrapper { position: relative; width: 100%; }
#nanoSelectPlan .bestseller-ribbon { position: absolute; display: -webkit-box; top: -1.375rem; }
#nanoSelectPlan .bestseller-ribbon::before { --ribbon-size: 1rem; position: relative; content: 'Bestseller'; text-transform: uppercase; margin-top: -3rem; right: -.375rem; padding: .5rem; padding-inline-start: 1.5rem; background: var(--warning); color: var(--gray-text); text-align: center; font-weight: 900; clip-path: polygon(0 0, var(--ribbon-size) 50%, 0 100%, 100% 100%, 100% 0); letter-spacing: .075rem;}
#nanoSelectPlan .bestseller-ribbon::after { position: absolute; margin-top: .5rem; right: -0.125rem; content: ''; background: var(--warning-600); height: 1.75rem; width: 1.75rem; transform: rotate(45deg); z-index: -1; padding: .75rem 1.25rem; }

#nanoSelectPlan .btn.btn-link.consumerLabelToggle { padding-top: .425rem !important; margin: 0 0 .25rem; text-transform: none; }

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

/* consumer labels */
#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: 'FontAwesome'; color: var(--info); font-size: .75rem; font-weight: 900; float: right; }
#offeringCardInternalConsumerLbl .btn-light.collapsed:after,
#offeringCardExternalConsumerLbl .btn-light.collapsed:after { content: '\f078'; }


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

/* cart trigger */
.viewCartPopover { position: absolute !important; top: -.75rem !important; right: 0 !important; float: right !important; }
.viewCartPopover i { font-size: 1.25rem !important; position: relative !important; right: 0 !important; padding-top: .25rem; }
.viewCartPopover .badge { height: .5rem !important; width: .5rem !important; border-radius: .5rem !important; padding: 0 !important; position: absolute !important; left: unset !important; right: .5rem !important; top: .675rem !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 screen and (min-width: 768px) {
  .viewCartPopover { top: -.375rem !important; }
  .viewCartPopover i { font-size: 1.5rem !important; }
  .viewCartPopover .badge { right: .625rem !important; top: .75rem !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(--info); border-color: var(--gray-200); }
#nanoShoppingCart .btn-clear:hover { background: var(--gray-300); color: var(--info-600); border-color: var(--gray-400); }
#nanoShoppingCart .btn-clear:focus { background: var(--gray-300); color: var(--info-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(--info); color: var(--white); border-color: var(--info); box-shadow: 0 0 0 0.25rem rgba(var(--info-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 screen and (min-width: 1200px) {
  #nanoConfigureServices .nanoShoppingCart,
  #nanoReviewOrder .nanoShoppingCart { margin-bottom: 1.5rem !important; }
}


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

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

/* config head */
#nanoConfigureServices .configPlanHead { background-color: var(--primary); border-bottom: .0625rem solid var(--gray-300); background-image: url(../img/textures/textures_waveLight25.png); background-repeat: repeat-x; background-size: cover; border-top-left-radius: 0; border-top-right-radius: 0; }
#nanoConfigureServices .configPlanLogo, 
#nanoConfigureServices .configPlanName { display: inline-block; min-height: 1.5rem; vertical-align: middle; }
#nanoConfigureServices .configPlanName h5 { display: inline-block; width: calc(100% - 2rem); font-size: 1.0625rem; }
#nanoConfigureServices .configPlanName .consumer-label-link { margin-left: 0; }

#nanoConfigureServices .configPlanBody .colDesc { text-overflow: unset; white-space: pre-line; overflow: unset; }

/* config validation */
#nanoConfigureServices .configPlanValidation { display: inline-block; float: right; width: 1.5rem; height: 1.5rem; margin-left: .5rem; vertical-align: middle; }
#nanoConfigureServices .configPlanValidation 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; }

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

#nanoConfigureServices #configResidentialPhone .ng-autocomplete.input-group { align-self: flex-start; top: .125rem; }
#nanoConfigureServices #configResidentialPhone .ng-autocomplete.input-group .ng-autocomplete { width: calc(100% - 2.625rem); z-index: 9998; align-content: flex-start; }
#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: 9999; max-height: 5rem; }
#nanoConfigureServices #configResidentialPhone .ng-autocomplete.input-group-append { width: 2.625rem; }

/* hr */
#nanoConfigureServicesCards hr { margin: .25rem 0 .75rem !important; height: .125rem !important; }

/* subtotal */
#nanoConfigureServices .compSubtotal .colDesc { width: 12rem; color: var(--primary); }

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

@media screen and (min-width: 768px) {
  #nanoConfigureServices .configPlanName h5 { display: inline-block; width: calc(100% - 2rem); font-size: 1.25rem; }
  #nanoConfigureServices .compSubtotal .colDesc { width: calc(100% - 13rem); }
}

/* 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 1rem !important; }

#nanoSetUpAccount .accountStepper .mat-step-icon { background: var(--gray-text); }
#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 { height: auto !important; max-height: calc(100vh - 20rem) !important; }

#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 screen and (min-width: 576px) {
  #notificationEmailWrapper,
  #accountNotificationEmail,
  #accountNotificationSMS { height: auto !important; }
  #notificationEmailInput .form-control,
  #accountNotificationEmail .form-control { width: calc(100% - 4.75rem) !important; display: inline; }
  #accountNotificationSMS .form-control { width: calc(50% - 4.75rem) !important; display: inline; max-width: 9rem !important; }
}


/* NANO Review Order -------------------------------------------------------- */
#nanoReviewOrder .planWrapper { border: .0625rem solid var(--gray-300); border-radius: .25rem; }

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

/* plan head */
#nanoReviewOrder .configPlanHead { background-color: var(--primary); border-bottom: .0625rem solid var(--gray-300); background-image: url(../img/textures/textures_waveLight25.png); background-repeat: repeat-x; background-size: cover; border-top-left-radius: 0; border-top-right-radius: 0; }
#nanoReviewOrder .configPlanLogo,
#nanoReviewOrder .configPlanName { display: inline-block; min-height: 1.5rem; vertical-align: middle; }
#nanoReviewOrder .configPlanName h5 { display: inline-block; width: 100%; }
#nanoReviewOrder .configPlanName .consumer-label-link { margin-left: 0; }

/* plan rows */
#nanoReviewOrder .configPlanBody .panelContent { min-height: 2.625rem !important; }
#nanoReviewOrder .configPlanBody .colQuantity { text-align: right; padding: 0 .5rem; width: 100%; display: block; font-size: .875rem; }
#nanoReviewOrder .configPlanBody .colQuantity::before { content: 'Quantity'; text-align: left; font-weight: 700; float: left; margin-right: auto; color: var(--gray-text) !important; }
#nanoReviewOrder .configPlanBody .colFrequency { border: none; }

/* subtotal */
#nanoReviewOrder .compSubtotal { padding-bottom: 0; }
#nanoReviewOrder .compSubtotal .colDesc { width: 12rem; color: var(--primary); }
#nanoReviewOrder .compSubtotal .colFrequency::before { display: none; }

/* edit button */
#nanoReviewOrderPlanCard .btn-edit { background: var(--gray-200); color: var(--info); border-color: var(--gray-200); margin-top: .5rem; }
#nanoReviewOrderPlanCard .btn-edit:hover { background: var(--gray-300); color: var(--info-600); border-color: var(--gray-400); }
#nanoReviewOrderPlanCard .btn-edit:focus { background: var(--gray-300); color: var(--info-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(--info); color: var(--white); border-color: var(--info); box-shadow: 0 0 0 0.25rem rgba(var(--info-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; }

/* summary of charges */
#nanoReviewOrder .summaryCharges h5 { font-weight: 700; color: var(--secondary); padding-bottom: 1rem; border-bottom: .125rem solid var(--gray-300); }
#nanoReviewOrder .summaryCharges h5 > i { font-size: 1.5rem; padding-right: .75rem; }
#nanoReviewOrder .summaryCharges i { font-size: 1.5rem; padding-right: .75rem; }
#nanoReviewOrder a.btn-link { font-size: .75rem; }

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

#nanoReviewOrderSummaryCharges { font-size: 1rem; }

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

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

/* 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; }

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

  #nanoReviewOrder .configPlanBody .colQuantity { text-align: center; width: 5rem; }
  #nanoReviewOrder .configPlanBody .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; }
}

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

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

@media screen and (min-width: 576px) {
  #btnPrintReceipt { top: -.5rem; z-index: 1; }
}

@media screen and (min-width: 768px){
  #btnPrintReceipt { top: -.375rem; z-index: 1; }
}

/* hide on receipt */
@media print {
  .hideOnPrint { display: none; }
}

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

#nanoOrderConfirmation .planWrapper { border: .0625rem solid var(--gray-300); border-radius: .25rem; }
#nanoOrderConfirmation .configPlanHead { background-color: var(--primary); border-bottom: .0625rem solid var(--gray-300); background-image: url(../img/textures/textures_waveLight25.png); background-repeat: repeat-x; background-size: cover; padding: .5rem 1rem !important; }
#nanoOrderConfirmation .configPlanLogo,
#nanoOrderConfirmation .configPlanName { display: inline-block; min-height: 1.5rem; vertical-align: middle; }
#nanoOrderConfirmation .configPlanName h5 { display: inline-block; width: 100%; }
#nanoOrderConfirmation .configPlanName .consumer-label-link { margin-left: 0; }
#nanoOrderConfirmation p { line-height: 1.5; }

/* NANO Modals -------------------------------------------------------------- */
.modal-body .close { top: 0 !important; right: 0 !important; }

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