/*! Last updated 2026-06-08-163625 */

@media (max-width:767px) {
   :is(.theme-att-2026.app-wrapped) {      
      html:not(.app-wrapped) .app-only {
         all: revert;
      }
      body,
      .app-wrapped-t-pad {
         padding-top: var(--nativeHeaderHeight) !important;
      }
      body.pad-t-none-native {
         padding-top: 0 !important;
      }
      .app-wrapped-1st-item {
         margin-top: calc(-1 * var(--nativeHeaderHeight));
         padding-top: var(--nativeHeaderHeight);
      }
      .pad-t-native-header {
         padding-top: var(--nativeHeaderHeight);
      }
      .mar-t-native-header {
         margin-top: var(--nativeHeaderHeight);
      }
      .mar-24-native {
         margin: 24px;
      }
      .mar-t-24-native {
         margin-top: 24px;         
      }
      .mar-r-24-native {
         margin-right: 24px;         
      }
      .mar-b-24-native {
         margin-bottom: 24px;
      }
      .mar-l-24-native {
         margin-left: 24px;
      }
      .pad-24-native {
         padding: 24px;
      }
      .pad-t-24-native {
         padding-top: 24px;
      }
      .pad-r-24-native {
         padding-right: 24px;
      }
      .pad-b-24-native {
         padding-bottom: 24px;
      }
      .pad-l-24-native {
         padding-left: 24px;
      }
      .radius-md-native {
         border-radius: 1.6rem;
      }
      .radius-t-l-32-native {
         border-top-left-radius: 32px;
      }
      .radius-b-l-32-native {
         border-top-left-radius: 32px;
      }
      .radius-t-r-32-native {
         border-top-right-radius: 32px;
      }
      .radius-b-r-32-native {
         border-bottom-right-radius: 32px;
      }
      
      /* modal sm,md,lg,xl */
      [data-comp="modal-duc"]:has(.duc-modal-content:not(.duc-modal-full-screen)),
      [aria-modal="true"][role="dialog"]:has(.duc-modal-content:not(.duc-modal-full-screen)) {
         align-items: flex-start !important;
         padding-top: calc(var(--nativeHeaderHeight) + 24px) !important;
         padding-bottom: 24px !important;         
      }
      [data-comp="modal-duc"] .duc-modal-content:not(.duc-modal-full-screen),
      [aria-modal="true"][role="dialog"] .duc-modal-content:not(.duc-modal-full-screen) {
         max-height: 100% !important;
      }
      /* modal fullscreen */
      [data-comp="modal-duc"] .duc-modal-full-screen,
      .bg-rgba-black-85 [role="dialog"] .duc-modal-content-responsive {
         padding-top: var(--nativeHeaderHeight) !important;
      }
      [data-comp="modal-duc"] .duc-modal-full-screen button:has(.icon-close) {
         top: var(--nativeHeaderHeight) !important;
      }
      .bg-rgba-black-85 [role="dialog"] .duc-modal-content-responsive button.top6:has(.icon-close) {
         top: calc(var(--nativeHeaderHeight) + 30px);
      }
      [data-comp="modal-duc"] .duc-modal-content-scrollable {
         padding-bottom: 64px !important;
      }
      
      /* Zoom-box-container */
      .zoom-box-container :is(.slick-list,.slick-track) {
         height: auto !important;
         max-height: 75vh !important;
      }
      /* HELP ME CHOOSE MODAL */
      .hmcImframBox {
         align-items: flex-start !important;
         padding-top: var(--nativeHeaderHeight) !important;
         padding-bottom: 24px !important;
         padding-left: 24px !important;
         padding-right: 24px !important;         
      }
      .hmcImframBox iframe {
         border-radius: 1.6rem !important;
         top: 32px !important;         
      }
      
      /* drawer LG */
      #drawerContainer.drawerM-lg.open,
      #drawerContainer.drawerM-full.open {
         height: calc(100vh - (var(--nativeHeaderHeight) + 64px)) !important;
         border-top-left-radius: 1.6rem;
         border-top-right-radius: 1.6rem;
      }
      /* sticky top */
      .sticky-top {
         padding-top: env(safe-area-inset-top, 0px);
      }
      
      /* TABS - CALL TO ORDER, CHAT, FEEDBACK */
      :is(.cto-link, #chatDiv, #oo_tab){
         display: none !important;
      }
      
      .ribbon-brand-bg.gradient-brand {
         --grad-start: #0079b1;
         --grad-end: #00c9ff;
         background-color: var(--grad-start);
         background-image: linear-gradient(to bottom, var(--grad-start) 0%, #009fdb 50%, var(--grad-end) 100%);         
      }
      .ribbon-brand-bg.gradient-brand:has(.absolute-fill) .absolute-fill.bgcolor {
         background-color: transparent;
      }
      .ribbon-underlay {
         margin-top: -24px;
         margin-bottom: -24px;
         position: relative;
         z-index: -1;
      }
      
      /* ribbon corners */
      [class*="ribbon-"]:before,
      [class*="ribbon-"]:after,
      [class*="ribbon-"].hero-panel .bg-art .absolute-fill[id]:after {
         content:"";
         height: 32px;
         width: 32px;
         mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M0 0H32V32H0Z M32 32A32 32 0 0 1 0 0L32 0Z' class='svg-base' fill-rule='evenodd'/></svg>");
         position: absolute;            
      }

      /* top right -  might not be needed depending on how app handles */
      .ribbon-top-right {
         border-bottom-left-radius: 3.2rem;
         &:after {
            bottom: -32px;
            right: 0;
            transform: rotate(180deg);
         }
         &:is([class*="bg-"]):after {
            background-color: inherit;
         }
         &:is([class*="gradient-"]):after {
            background-color: var(--grad-end);               
         }
         &:not([class*="gradient-"], [class*="bg-"]):after {
            background-color: var(--bgcolor);
         }
      }

      /* mid-right / odd sections */
      .ribbon-section:nth-of-type(odd),
      .ribbon-mid-right {
         border-top-left-radius: 3.2rem;
         border-bottom-left-radius: 3.2rem;
         &:before {
            top: -32px;
            right: 0;
            transform: rotate(270deg);
         }
         &:is([class*="gradient-"]):before {
            background-color: var(--grad-start);
         }
         &:is([class*="gradient-l2r"]):before {
            background-color: var(--grad-end);               
         }
         &:is([class*="bg-"]):before {
            background-color: inherit;
         }
         &:not([class*="gradient-"], [class*="bg-"]):before {
            background-color: var(--bgcolor);
         }

         &:after {
            bottom: -32px;
            right: 0;
            transform: rotate(180deg);
         }
         &:is([class*="gradient-"]):after {
            background-color: var(--grad-end);               
         }
         &:is([class*="gradient-l2r"]):after {
            background-color: var(--grad-end);               
         }
         &:is([class*="bg-"]):after {
            background-color: inherit;
         }
         &:not([class*="gradient-"], [class*="bg-"]):after {
            background-color: var(--bgcolor);
         }
      }  
      /* bottom-right */
      .ribbon-bottom-right {
         border-top-left-radius: 3.2rem;
         &:before {
            top: -32px;
            right: 0;
            transform: rotate(270deg);
         }
         &:is([class*="gradient-"]):before {
            background-color: var(--grad-start);
         }
         &:is([class*="gradient-l2r"]):before {
            background-color: var(--grad-end);
         }
         &:is([class*="bg-"]):before {
            background-color: inherit;
         }
         &:not([class*="gradient-"], [class*="bg-"]):before {
            background-color: var(--bgcolor);
         }
      }
      /* left - might not be needed depending on how app handles */
      .ribbon-top-left {
         border-bottom-right-radius: 3.2rem;
         &:after {
            bottom: -32px;
            left: 0;
            transform: rotate(90deg);
         }
         &:is([class*="gradient-"]):after {
            background-color: var(--grad-end);               
         }
         &:is([class*="gradient-l2r"]):after {
            background-color: var(--grad-start);               
         }
         &:is([class*="bg-"]):after {
            background-color: inherit;
         }
         &:not([class*="gradient-"], [class*="bg-"]):after {
            background-color: var(--bgcolor);
         }
      }
      /* mid-left / even sections */
      .ribbon-section:nth-of-type(even),
      .ribbon-mid-left {
         border-top-right-radius: 3.2rem;
         border-bottom-right-radius: 3.2rem;
         &:before {
            top: -32px;
            left: 0;
            transform: rotate(0deg);
         }
         &:is([class*="gradient-"]):before {
            background-color: var(--grad-start);               
         }
         &:is([class*="gradient-l2r"]):before {
            background-color: var(--grad-start);               
         }
         &:is([class*="bg-"]):before {
            background-color: inherit;
         }
         &:not([class*="gradient-"], [class*="bg-"]):before {
            background-color: var(--bgcolor);
         }
         &:after {
            bottom: -32px;
            left: 0;
            transform: rotate(90deg);
         }
         &:is([class*="gradient-"]):after {
            background-color: var(--grad-end);               
         }
         &:is([class*="gradient-l2r"]):after {
            background-color: var(--grad-start);               
         }
         &:is([class*="bg-"]):after {
            background-color: inherit;
         }
         &:not([class*="gradient-"], [class*="bg-"]):after {
            background-color: var(--bgcolor);
         }
      }
      /* bottom-left */
      .ribbon-bottom-left {
         border-top-right-radius: 3.2rem;
         &:before {
            top: -32px;
            left: 0;
            transform: rotate(0deg);
         }
         &:is([class*="gradient-"]):before {
            background-color: var(--grad-start);               
         }
         &:is([class*="bg-"]):before {
            background-color: inherit;
         }
         &:not([class*="gradient-"], [class*="bg-"]):before {
            background-color: var(--bgcolor);
         }
      }
      
      [data-comp="micro-banner-duc"] {
         border-radius: 16px;
      }
      [data-comp="micro-banner-duc"] + [data-comp="micro-banner-duc"] {
         margin-top: 16px;
      }
      body:has([data-comp="micro-banner-duc"] + h1) h1 {
         margin-top: 16px;
      }      
      [id*="micro-banner"]:empty {display:none}
      .app-only [data-comp="micro-banner-duc"]:before,
      .app-only [data-comp="micro-banner-duc"]:after {
         display:none;
      }
      
      /* ALERT MESSAGES */
      .container:has(.row:is(.order1,.order2,.order3,.order4) .wrap-around-close) .row:is(.order1,.order2,.order3,.order4) .border-shadow {
         margin: 12px;
         border-radius: 16px;
      }
      
      /* UTILITIES */
      .mar-l-12 {
         margin-left: 12px;
      }
      .mar-r-12 {
         margin-right: 12px;
      }      
   }   
   
   
   /* theme override */
   :is(.theme-att-2026.app-wrapped):not(.allow-dark) {
      :is(.theme-accent-bg, .ribbon-accent-bg) {
         --bgcolor: #dcf3fa;
         --tab-lr-shadow: #dcf3fa;
      }
      
      :is(.ribbon-base-bg) {
         --bgcolor: #fff;
      }

      :is(.ribbon-light-bg-img, .ribbon-neutral-bg) {
         --bgcolor: #f3f4f6;
      }

      :is(.ribbon-base-bg, .ribbon-neutral-bg, .ribbon-accent-bg, .ribbon-light-bg-img) {
         color: #1d2329;
         --white-gray700: #fff;
         --white-gray800: #fff;
         --gray800-white: #1d2329;
         --gray500-white: #878c94;
         --gray700-white: #454b52;
         --cobalt600-white: #0057b8;
         --funcBlue-white: #0072b2;
         --attCobalt-white: #00388f;
         
         --color-urgent: #c70032;
         --color-warn: #ea712f;
         --color-success: #2d7e24;
         --color-info: #0072b2;
         --color-info-hover: #007ae2;
         
         --link-text-color: #1d2329;
         --link-text3-default-color: #0072b2;
         --link-solo-text-decoration: none;
         --a-default-color: #0072b2;
         --a-default-decoration: none;
         --link-icon-color: #0072b2;
         --link-icon-span: transparent;
         
         --eyebrow-color: #1d2329;
         --heading-color: #1d2329;
         
         --bullets-text-color: #1d2329;
         --bullets-svg-icon-color: #1d2329;
         --bullets-dot-color: #1d2329;
         --rte-checkmark-default: #1d2329;
         --rte-checkmark-att-blue: #009fdb;
         --rte-checkmark-func-blue: #0072b2;
         --rte-checkmark-green: #2d7e24;
         
         --type-legal-color: #454b52;
         
         /* BTN_PRIMARY */
         --btn-primary-bgcolor: #00388f;
         --btn-border-color: #00388f;
         --btn-border-hover: #0057b8;
         --btn-hover-color: #fff;
         --btn-primary-color: #fff;
         --btn-primary-outline-color-keyfocus: #fff;
         --btn-color-keyfocus-active: #fff;
         
         /* BTN_SECONDARY */
         --btn-secondary-bgcolor: transparent;
         --btn-secondary-color: #00388f;
         --btn-secondary-border-color: #00388f;
         --btn-secondary-outline-color: #fff;
         --btn-secondary-outline-color-keyfocus: #00388f;
         --btn-secondary-outline-color-keyfocus-active: #fff;
         
         --btn-group-hover: #0057b8;
         --btn-group-color: #00388f;
         
         /* LINKS */         
         --primary-cta-color: #0072b2;
         --primary-cta-caret-color: #0072b2;
         
         /* FORM ELEMENTS */
         --is-tabbing-outline-default: #000;
         --is-tabbing-outline-default2: #fff;
         
         --is-tabbing-outline-gray600: #686e74;
         --is-tabbing-outline-gray700: #454b52;
         
         --textfield-bgcolor: #fff;
         --textfield-border: #686e74;
         --textfield-border-hover: #0072b2;
         --textfield-border-focus: #0072b2;
         --placeholder-text: #686e74;
         --textfield-color: #1d2329;
         --formfield-msg: #686e74;
         --textfield-counter: #686e74;
         --textfield-disabled-border: #bdc2c7;
         --textfield-disabled-bg: #f8fafb;
         --textfield-error-border: #c70032;
         
         --rad-chk-bg: #fff;
         --rad-chk-border: #686e74;
         --rad-checked-border: #0072b2;
         --rad-chk-hover-border: #0072b2;
         --rad-chk-error-bg: #c70032;
         --rad-chk-error-dot: var(--color-urgent);
         --rad-chk-disabled-bg: #f8fafb;
         --rad-chk-disabled-border: #bdc2c7;
         --rad-chk-checked-disabled-dot: #878c94;
         --rad-chk-checked-fill: #fff;
         --rad-chk-checked-dot: #0072b2;
         --rad-chk-selectall-border: #0072b2;
         --form-error-dot: #c70032;
         --rad-error-border: #c70032;
         
         --chk-checked-bg: #0072b2;
         --chk-checked-border: #0072b2;
         --chk-error-bg: var(--color-urgent);
         --chk-error-border: #c70032;
         --chk-error-checked-border: #c70032;
         --chk-checkmark: #fff;
         --indeterminate-mixed-color: #0072b2;
         
         /* DROPDOWN */
         --awd-select-color: #1d2329;
         --awd-select-disabled: #878c94;
         --select-skin-bgcolor: #fff;
         --select-skin-border: #686e74;
         --select-skin-color: #1d2329;
         --awd-select-placeholder: #686e74;
         --awd-select-hover: #0072b2;
         --awd-select-focus: #0072b2;
         --awd-select-color-focus: #1d2329;
         --dropdown-bg: #fff;
         --option-wrapper-border-open: #dcdfe3;
         --optionWrapper-color: #1d2329;
         --option-list-item-focus: #f8fafb;
         --option-list-item-bg-hover: #ebf4f9;
         --option-list-item-hover: #0072b2;
         --is-tabbing-option-list-item: #000;
         --dropdown-primary-button-caret-color: #fff;
         --dropdown-secondary-button-caret-color: #00388f;
         --accordion-icon-color: #1d2329;
         --dropdown-border-disabled: #bdc2c7;
         --text-clear-color: #1d2329;
         
         --toggle-msg-color: #1d2329;
         --toggle-switch-border: transparent;
         --toggle-switch-on: #0072b2;
         --toggle-switch-off: #878c94;
         --toggle-switch-disabled: #dcdfe3;
         --toggle-switch-disabled-border: transparent;
         --toggle-handle-off: #fff;
         --toggle-handle-on: #fff;
         --toggle-switch-disabled: #dcdfe3;
         --toggle-handle-disabled: #fff;
         --toggle-handle-disabled-border: tranparent;
         
         --radio-color-option-hover: #878c94;
         --radio-color-option-checked: #0057b8;
         
         /* TIMER */
         --timer-text-color: #1d2329;
         
         /* CLOSE ICON */
         --icon-close-color: #1d2329;
         
         /* CAROUSEL */
         --carousel-control-border-color: #0057b8;
         --carousel-control-color: #0057b8;
         
         /* HR */
         --hr-color: #bdc2c7;
         --hr-text-color: #1d2329;
         
         /*PRICING */
         --price-color:          #1d2329;
         --price-credit-color:   #2d7e24;
         --price-past-due-color: #c70032;
         --price-strikethrough:  #454b52;
         --price-free-desc:      #2d7e24;
         
         /* RADIO SELECTOR BAR */
         --radio-selector-bar-color: #bdc2c7;
         --radio-selector-tabbing-outline: #000;
         
         /* HEADBAND */
         --headband: #1d2329;
         
         /* STAR RATING */
         --star-rating: #1d2329;
         
         /* TAGS */
         --tag-bgcolor: #fff;
         --tag-border: #1d2329;
         --tag-color: #1d2329;
         --tag-hover-color: #0072b2;
         --tag-bgcolor-hover: #fff;
         --tag-border-hover: #0072b2;
         --tag-checked: #0072b2;
         --tag-checked-color: #fff;
         --tag-checked-hover: #0057b8;
         --tag-hover-checked-color: #fff;
         --tag-checked-border: #0072b2;
         --tag-checked-border-hover: #0057b8;
         
         /* BREADCRUMB */
         --breadcrumb-arrow: #454b52;
         
         /* TABS */
         --tabs-selected-underline: #009fdb;
         --tabs-button: #0072b2;
         --tabs-button-selected: #1d2329;
      }

      :is(.ribbon-light-bg-img) {
         color: #1d2329;
         --bullets-text-color: #1d2329;
         --bullets-svg-icon-color: #1d2329;
         --bullets-dot-color: #1d2329;
         --rte-checkmark-default: #1d2329;
         --type-legal-color: #1d2329;
         --toggle-msg-color: #1d2329;
      }

      :is(.ribbon-dark-accent-bg, .ribbon-dark-bg-img, .ribbon-brand-bg) {
/*
         --bgcolor: #002837;
         
         color: #fff;
         
         --white-gray700: #454b52;
         --white-gray800: #1d2329;
         --gray800-white: #fff;
         --gray700-white: #fff;
         --gray500-white: #fff;
         --cobalt600-white: #fff;
         --funcBlue-white: #fff;
         --attCobalt-white: #fff;
         --color-urgent: #ff605d;
         --color-warn: #ff8500;
         --color-success: #3dab3f;
         --color-info: #007ae2;
         
         --link-text-color: #fff;
         --link-text3-default-color: #fff;
         --link-solo-text-decoration: underline;
         --a-default-color: #fff;
         --a-default-color-active: #fff;
         --a-default-color-focus: #fff;
         --a-default-decoration: underline;
         --link-icon-color: #fff;
         --link-icon-span: #fff;
         
         --eyebrow-color: #fff;
         --heading-color: #fff;
         
         --type-legal-color: #fff;
         
         --svg-default-color: currentColor;
         
         --bullets-text-color: #fff;
         --bullets-svg-icon-color: #fff;
         --bullets-dot-color: #fff;
         --rte-checkmark-default: #fff;
         --rte-checkmark-att-blue: #009fdb;
         --rte-checkmark-func-blue: #007ae2;
         --rte-checkmark-green: #3dab3f;
         
         --btn-primary-bgcolor: #fff;
         --btn-border-color: #fff;
         --btn-border-hover: #dcf3fa;
         --btn-hover-color: #00388f;
         --btn-primary-color: #00388f;
         --btn-primary-outline-color-keyfocus: #00388f;
         --btn-color-keyfocus-active: #fff;
         
         --btn-secondary-bgcolor: transparent;
         --btn-secondary-color: #fff;
         --btn-secondary-border-color: #fff;
         --btn-secondary-outline-color-keyfocus: #fff;
         --btn-tabfocus-color: #fff;
         
         --btn-group-color: #fff;
         --btn-group-hover: #0057b8;
         
         --primary-cta-color: #fff;
         --primary-cta-caret-color: #fff;
         
         --timer-text-color: #fff;
         
         --carousel-control-border-color: #fff;
         --carousel-control-color: #fff;
         
         --hr-color: #454b52;
         --hr-text-color: #878c94;
         
         --is-tabbing-outline-default: #fff;
         --is-tabbing-outline-default2: #000;
         
         --is-tabbing-outline-gray600: #fff;
         --is-tabbing-outline-gray700: #fff;
         --textfield-bgcolor: #fff;
         --textfield-border: #878c94;
         --textfield-border-hover: #009fdb;
         --textfield-border-focus: #fff;
         --placeholder-text: #686e74;
         --textfield-color: #1d2329;
         --formfield-msg: #bdc2c7;
         --textfield-counter: #f3f4f6;
         --textfield-disabled-border: #686e74;
         --textfield-disabled-bg: #454b52;
         --textfield-error-border: #ff605d;
         
         --rad-chk-bg: #002837;
         --rad-chk-border: #f3f4f6;
         --rad-checked-border: #f3f4f6;
         --rad-chk-hover-border: #009fdb;
         --rad-chk-error-bg: #ff605d;
         --rad-chk-disabled-bg: #002837;
         --rad-chk-disabled-border: #878c94;
         --rad-chk-checked-disabled-dot: #878c94;
         --rad-chk-checked-fill: #002837;
         --rad-chk-checked-dot: #009fdb;
         --rad-chk-selectall-border: #009fdb;
         --form-error-dot: #ff605d;
         --rad-error-border: #ff605d;
         
         --chk-checked-bg: #009fdb;
         --chk-checked-border: #009fdb;
         --chk-checkmark: #1d2329;
         --chk-checkmark-error: #ff605d;
         --chk-error-bg: #002837;
         --chk-error-border: #ff605d;
         --chk-error-checked-border: #ff605d;
         --indeterminate-mixed-color: #009fdb;
         
         --awd-select-color: #1d2329;
         --awd-select-disabled: #686e74;
         --select-skin-bgcolor: #fff;
         --select-skin-border: transparent;
         --select-skin-color: #454b52;
         --awd-select-placeholder: #686e74;
         --awd-select-hover: #007ae2;
         --awd-select-focus: #0072b2;
         --awd-select-color-focus: #454b52;
         --dropdown-bg: #fff;
         --option-wrapper-border-open: #bdc2c7;
         --optionWrapper-color: #1d2329;
         --option-list-item-focus: #f8fafb;
         --option-list-item-bg-hover: #e5eef8;
         --option-list-item-hover: #0057b8;
         --is-tabbing-option-list-item: #000;
         --dropdown-arrow-color: #686e74;
         --dropdown-primary-button-caret-color: #00388f;
         --dropdown-secondary-button-caret-color: #fff;
         --dropdown-secondary-button-caret-hover-color: #00388f;
         --accordion-icon-color: #fff;
         --dropdown-border-disabled: #686e74;
         --text-clear-color: #1d2329;
         
         --toggle-msg-color: #f3f4f6;
         --toggle-switch-border: #bdc2c7;
         --toggle-switch-on: #0072b2;
         --toggle-switch-off: #878c94;
         --toggle-switch-disabled: #454b52;
         --toggle-switch-disabled-border: #878c94;
         --toggle-handle-off: #fff;
         --toggle-handle-on: #fff;
         --toggle-handle-disabled: #878c94;
         --toggle-handle-disabled-border: #878c94;
         
         --radio-color-option-hover: #fff;
         --radio-color-option-checked: #fff;
         
         --icon-close-color: #fff;
         
         --price-color: #fff;
         --price-credit-color: #3dab3f;
         --price-past-due-color: #ff605d;
         --price-strikethrough:  #fff;
         --price-free-desc: #3dab3f;
         --radio-selector-bar-color: #f2fafd;
         --radio-selector-tabbing-outline: #fff;
         --headband: #fff;
         --star-rating: #fff;
         --tag-bgcolor: transparent;
         --tag-border: #fff;
         --tag-color: #fff;
         --tag-hover-color: #fff;
         --tag-bgcolor-hover: #007ae2;
         --tag-border-hover: #fff;

         --tag-checked: #fff;
         --tag-checked-color: #fff;
         --tag-checked-hover: #007ae2;
         --tag-hover-checked-color: #fff;
         --tag-checked-border: #0057b8;
         --tag-checked-border-hover: #0057b8;
         
         --breadcrumb-arrow: #fff;
         
         --tabs-selected-underline: #fff;
         --tabs-button: #fff;
         --tabs-button-selected: #fff;
*/
      }

      :is(.ribbon-brand-bg, [class*="theme-dark"].bg-att-blue) {
/*
         --bgcolor: #009fdb;
         
         --btn-primary-bgcolor: #00388f; 
         --btn-border-color: #00388f; 
         --btn-border-hover: #0057b8;
         --btn-hover-color: #fff;
         --btn-primary-color: #fff;
         --btn-primary-outline-color-keyfocus: #fff;
         --btn-color-keyfocus-active: #fff;

         --btn-secondary-bgcolor: #fff;
         --btn-secondary-color: #00388f;
         --btn-secondary-border-color: #fff;
         --btn-secondary-outline-color: #fff;
         --btn-secondary-outline-color-keyfocus: #00388f;
         --btn-secondary-outline-color-keyfocus-active: #fff;
         --dropdown-secondary-button-caret-hover-color: #fff;

         --btn-secondary-disabled-bg: #dcdfe3;
         --btn-secondary-disabled-border: #dcdfe3;
         --btn-secondary-disabled-color: #989c94;

         --dropdown-primary-button-caret-color: #fff;
         --dropdown-secondary-button-caret-color: #00388f;
*/
      }
   }
}
@media (max-width: 767px) and (orientation: portrait) {
   :is(.theme-att-2026.app-wrapped) {
      .hero-panel:is(.ribbon-dark-bg-img, .ribbon-dark-accent-bg, .ribbon-light-bg-img) {
         color: revert;
         --gray800-white: revert;
         --funcBlue-white: revert;
         --eyebrow-color: revert;
         --heading-color: revert;
         --type-legal-color: revert;
         --type-legal-link-color: revert;
         --link-text3-default-color: revert;
         --primary-cta-color: revert;
         --primary-cta-caret-color: revert;
         --bullets-text-color: revert;
         --bullets-svg-icon-color: revert;
         --bullets-dot-color: revert;
         --rte-checkmark-default: revert;
         --rte-checkmark-att-blue: revert;
         --rte-checkmark-func-blue: revert;
         --rte-checkmark-green: revert;
         --btn-primary-bgcolor: revert;
         --btn-border-color: revert;
         --btn-background-hover: revert;
         --btn-border-hover: revert;
         --btn-hover-color: revert;
         --btn-primary-color: revert;
         --btn-primary-outline-color-keyfocus: revert;
         --btn-color-keyfocus-active: revert;
         --btn-primary-chevron-color: revert;
         --btn-secondary-bgcolor: revert;
         --btn-secondary-color: revert;
         --btn-secondary-outline-color-keyfocus: revert;
         --btn-tabfocus-color: revert;
         --timer-text-color: revert;
         --icon-apple-app-store-bg: revert;
         --icon-apple-app-store: revert;
         --icon-google-play-bg: revert;
         --icon-google-play: revert;
         --price-color:          revert;
         --price-credit-color:   revert;
         --price-past-due-color: revert;
         --price-strikethrough:  revert;
         --price-free-desc:      revert;
      }
      .hero-panel:is(.ribbon-light-bg-img, .ribbon-neutral-bg, .ribbon-base-bg, .ribbon-accent-bg) {
         --bullets-svg-icon-color: #009fdb;
      }
      
      /* HERO OVERRIDE */
      .hero-panel.ribbon-section {
         --btn-primary-bgcolor: #fff;
         --btn-border-color: #fff;
         --btn-border-hover: #dcf3fa;
         --btn-hover-color: #00388f;
         --btn-primary-color: #00388f;
         --btn-primary-outline-color-keyfocus: #00388f;
         --btn-color-keyfocus-active: #fff;
         --btn-secondary-bgcolor: transparent;
         --btn-secondary-color: #fff;
         --btn-secondary-outline-color-keyfocus: #fff;
         --btn-tabfocus-color: #fff;
         
         .bg-art {
            position: relative !important;
         }
         .bg-art {
            margin-top: -32px;
            margin-bottom: -32px;
            padding-top: 32px;
            padding-bottom: 32px;             
            z-index: -1;
         }
         :is(.bg-art, .bg-art .absolute-fill) {            
            height: calc(60vw + 64px); 
            background-color: transparent;
         }
         .container {
            margin-top: -32px;
            background-color: #fff;            
            z-index: 1;
         }
         &:nth-of-type(odd) {
            .bg-art .absolute-fill[id]:after {
               left: 0;
               bottom: 32px;
               background-color: #fff;               
            }
            .container {
               border-top-right-radius: 32px;
               border-bottom-right-radius: 32px;               
            }
         }
         &:nth-of-type(even) {
            .bg-art .absolute-fill[id]:after {
               right: 0;
               bottom: 32px;
               background-color: #fff;
               transform: rotate(270deg);
            }            
            .container {
               border-bottom-right-radius: 32px;
            }
         }
         .hero-panel-content > div:first-child {
            display: none !important;
         }
         .hero-panel-content > div:last-child {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            height: auto;
         }      
      }
   }
}