:root {
        --color-link: #8fa6d0;
        --color-link-grey: #a7a9b8;
        --color-link-hover: #6da1ff;
        --blue: #377dff;
        --indigo: #2d1582;
        --purple: #6f42c1;
        --pink: #e83e8c;
        --red: #ed4c78;
        --orange: #fd7e14;
        --yellow: #f5ca99;
        --green: #28a745;
        --teal: #00c9a7;
        --cyan: #09a5be;
        --white: #fff;
        --gray: #8F95A0;
        --gray-dark: #737373;
        --primary: #84B761;
        --secondary: #577CC0;
        --success: #28a745;
        --info: #007bff;
        --warning: #ffc107;
        --danger: #dc3545;
        --light: #F5F7FA;
        --dark: #1D1D1D;
        --light-2: #FBFBFB;
        --tertiary: #3E7FEA;
        --primary-master: #D0021B;
        
        --color-primary: #ff798e;
        --color-secondary: #0287ed;
        --color-gradient-start: #fe506c;
        --color-gradient-stop: #fc6a2a;
        --color-gradient-start-secondary: #0287ed;
        --color-gradient-stop-secondary: #03afe0;
        
        --color-font: #808291;
        --color-link: #a7a9b8;
        --color-link-hover: #181b31;
        --color-img-holder: #efefef;
        
        --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;

        /* Motion tokens (web-design-skill / animation.md) */
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
        --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
        --dur-press: 140ms;
        --dur-fast: 160ms;
        --dur-base: 200ms;
        --dur-modal: 320ms;
      }
      
      ::selection {
        color: #fff;
        background-color: #fc692d;
      }
      
      html, body {
          touch-action: manipulation; /* This allows panning but prevents zooming */
      }

      
      body {
        background: #f5f7fa;
        font-family: poppins,sans-serif;
        color: #737373;
        -webkit-font-smoothing: antialiased;
      }
      
      h1, h2, h3, h4, h5, h6{
        color: #1d1d1d;
        font-family: poppins,sans-serif;
      }
      
      .bx{
        margin-top:-2px;
      }
      
      .ps-6{
        padding-left: 4rem !important;
      }
      
      .ps-7{
        padding-left: 5.5rem !important;
      }
      
      .highlighed-word {
        color: #39da8a;
        font-weight: 700;
      }
      
      .btn{
            padding: 0.669rem 1.375rem;
      }
      
      #pmt-btn-options-mob:disabled {
        /*display:none;*/
      }
      .nav-tabs {
          border-bottom: 0px solid #fff;
      }
      .tabs-line.nav-tabs .nav-link{
        border-radius: 0.5rem;
        background-color: #f3f6fe;
      }
      .tabs-line.nav-tabs .nav-link:hover{
        background: #5a8dee !important;
          color: #fff !important;
          box-shadow: none;
      }
      
      .tabs-line.nav-tabs .nav-link.active, .tabs-line.nav-tabs .nav-link.active:hover, .tabs-line.nav-tabs .nav-link.active:focus, .tabs-line>.nav-tabs .nav-link.active, .tabs-line>.nav-tabs .nav-link.active:hover, .tabs-line>.nav-tabs .nav-link.active:focus {
          background: #5a8dee !important;
          color: #fff !important;
          box-shadow: none;
      }
      
      .card, .card.accordion-item {
        border-radius: 9px !important;
      }
      
      .card.accordion-item {
        overflow: hidden;
      }
      
      .btn-outline-secondary{
        color: #677788;
        border-color: #d4d8dd;
      }
      
      .badge.badge-center.w-px-20.h-px-20.rounded-pill {
        top: 3px;
        position: relative;
      }
      
      .badge.badge-center.w-px-20.h-px-20.rounded-pill  .bx.bx-check.bx-xs {
        height: 18px;
        width: 18px;
        padding: 3.28px 3px 5.28px 1px;
        margin: 0;
        top: -2px;
        position: relative;
      }
      
      .badge-left-margin {
        left: 10px;
        top: -3px;
        position: relative;
      }
      
      .dropdown-share {
        width: 450px;
      }
      
      #whats-included{
        min-height: 100px;
      }
      
      .footer-icons i {
        color: #adadad;
      }
      
      .logo-footer{
        filter: grayscale(100%);
        opacity: 0.4;
      }
      
      .payment-option{
        height: 80px;
      }
      
      .review-item-heading {
        font-weight: 500;
      }
      
      .list-group-item {
        color: inherit !important;
      }
      
      .news_network_collapse{
        background: #fff;
        margin-left: -30px;
        margin-right: -15px;
        margin-bottom: -4px;
        padding: 0 20px 6px 20px;
      }
      
      .news_network_collapse .tab-pane:last-child .badge {
        font-size: 12.75px;
      }

      .order-form-reveal-panel {
        overflow: hidden;
      }

      .order-form-reveal-panel.collapsing {
        overflow: hidden;
        transition: height var(--dur-modal) var(--ease-drawer);
      }

      .order-form-reveal-panel .order-form-reveal-panel__inner {
        opacity: 1;
        transform: translateY(0);
        transition: opacity var(--dur-fast) var(--ease-out) 40ms, transform var(--dur-fast) var(--ease-out) 30ms;
      }

      .order-form-reveal-panel.collapsing .order-form-reveal-panel__inner {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
        pointer-events: none;
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
        .accordion-collapse,
        .collapsing,
        .slides,
        .order-form-reveal-panel .order-form-reveal-panel__inner,
        #collapseNewsNetwork .tab-list-indicator {
          transition: none !important;
        }
        .btn:active {
          transform: none !important;
        }
      }

      .accordion-collapse.collapsing {
        transition: height var(--dur-modal) var(--ease-drawer);
      }

      #order-form-continue-hint .order-form-continue-link {
        color: inherit;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
      }

      #order-form-continue-hint .order-form-continue-link:hover,
      #order-form-continue-hint .order-form-continue-link:focus {
        color: #b45309;
      }

      #collapseExtraCoverage .custom-option-content,
      #collapseWritingExtras .custom-option-content {
        position: relative;
      }

      /* Drop the trailing margin on the last card so the accordion
         body padding alone controls the spacing below it. */
      #collapseExtraCoverage .row > .col-12:last-child,
      #collapseWritingExtras .row > .col-12:last-child {
        margin-bottom: 0 !important;
      }

      /* Tighten the space under the More Details fields before the
         confirmation checkbox. */
      #collapseBrandOptions .cro-acc__body {
        padding-bottom: .35rem;
      }

      /* ---------------------------------------------------------------
         Light nested sub-accordions for optional order-form fields
         (Goal, Quotes, YouTube, Images, More Outlets, Upgrades).
         Collapsed by default; tap the header to expand and fill.
      --------------------------------------------------------------- */
      .cro-acc__header {
        display: flex;
        align-items: center;
        gap: .4rem;
        width: 100%;
        padding: .7rem .9rem;
        margin-bottom: .65rem;
        border: 0;
        border-radius: .5rem;
        background: #f4f6fb;
        color: #2c3f4c;
        font-size: .95rem;
        font-weight: 500;
        line-height: 1.3;
        text-align: left;
        cursor: pointer;
        transition: color 150ms var(--ease-out, ease), background-color 150ms var(--ease-out, ease);
      }
      .cro-acc__header:hover,
      .cro-acc__header:focus-visible {
        color: #5a8dee;
        background: #eef1f9;
      }
      .cro-acc__header:focus-visible {
        outline: 2px solid rgba(90, 141, 238, 0.4);
        outline-offset: 2px;
        border-radius: .375rem;
      }
      .cro-acc__title {
        flex: 0 0 auto;
      }
      .cro-acc__title .bx-help-circle {
        font-weight: 400;
      }
      .cro-acc__hint {
        flex: 0 1 auto;
        min-width: 0;
        color: #99a1ab;
        font-weight: 400;
        font-size: .8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .cro-acc__hint::before {
        content: "\00B7";
        margin-right: .35rem;
        color: #c2c8d0;
      }
      .cro-acc__chevron {
        order: -1;
        flex: 0 0 auto;
        font-size: 1.2rem;
        color: #b6bdc6;
        transform: rotate(-90deg);
        transition: transform 220ms var(--ease-out, ease), color 150ms var(--ease-out, ease);
      }
      .cro-acc:has(> .collapse.show) > .cro-acc__header .cro-acc__chevron,
      .cro-acc:has(> .collapse.collapsing) > .cro-acc__header .cro-acc__chevron {
        transform: rotate(0deg);
        color: #5a8dee;
      }
      .cro-acc:has(> .collapse.show) > .cro-acc__header,
      .cro-acc:has(> .collapse.collapsing) > .cro-acc__header {
        color: #2c3f4c;
      }
      .cro-acc__body {
        padding: .15rem 0 1.15rem;
      }
      
      .form-h3{ 
        color: #516377;
        font-size: .9375rem;
      }
      
      .pipesep {
        display: inline-block;
        content: "|";
        margin: 0px 6px;
        padding: 0px 0px;
        color: #d4d8dc;
        border-right: 1px #d4d8dc solid;
        height: 11px;
      }
      
      .fw-500{
        font-weight: 500;
      }
      .fw-600{
        font-weight: 600;
      }
      
      #accodion-container-network .custom-option-body small:nth-of-type(2) {
        top: 4px;
        position: relative; 
      }
      
      .equal-height {
        display: flex;
        flex-wrap: wrap;
      }

      .equal-height > .col {
        display: flex;
        flex-direction: column;
      }
      
      .equal-height .col .alert{
        height:100%;
      }
      
      .float-left{
        float:left;
      }
      
      .horizontal-list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
      }
      
      .btn-faint {
        background-color: #f3f6fe;
        font-weight: 600;
        color: #516377;
        padding: 8px 16px;
        border: 0px solid #ccc;
        text-align: center;
        border-radius: 7px;
        transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
      }
      
      .btn-faint i.bx{
        margin-right: 3px;
      }
      
      .btn-faint:hover, .basic-default-password:hover, .account-container .btn-faint:hover{
        background: #5a8dee;
        color: #fff;
      }
      
      .btn-select-date{
        background-color: #f3f6fe !important;
        font-weight: 600;
        color: #516377 !important;
        padding: 8px 16px !important;
        border: 0px solid #ccc;
        text-align: center;
        border-radius: 7px !important;
        transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
        width: auto !important;
        float:left;
        font-size: .813rem;
        box-shadow: none;
        cursor: pointer;
      }
      
      .btn-select-date:hover{
        background: #5a8dee !important;
        color: #fff !important;
      }
      
      .border-radius-8 {
          border-radius: 8px !important;
      }
      
      .most-popular-tag {
        position: relative;
        left: -30px;
        margin-right: -50px;
        top: -16px;
        width: auto;
        border-radius: 0 !important;
      }
      
      .btn-select-date::placeholder {
        color: #516377; /* Replace this with your desired color */
      }
      
      .btn-select-date:hover::placeholder {
        color: #fff !important;
      }

      /* Match the Reset button height to the grey date field. */
      #btn_publish_date_reset {
        padding: 9px 16px !important;
        font-size: .813rem !important;
        line-height: 1.5 !important;
        border-radius: 7px !important;
        font-weight: 600;
        vertical-align: top;
      }

      /* Reset button inside the flatpickr calendar dropdown. */
      .flatpickr-calendar .fp-clear-btn {
        display: block;
        margin: 4px 8px 8px;
        padding: 8px 16px;
        background-color: #e1e9ff;
        color: #516377;
        font-weight: 600;
        font-size: .813rem;
        line-height: 1.5;
        text-align: center;
        border-radius: 7px;
        cursor: pointer;
        transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
      }
      .flatpickr-calendar .fp-clear-btn:hover {
        background-color: #5a8dee;
        color: #fff;
      }
      
      .modal-content {
        border-radius: 1.75rem;
      }
      
      .modal .btn-close {
        border-radius: 50%;
        padding: .65rem;
      }
      
      .account-container .btn-faint {
        background-color: #e1e9ff;
        font-weight: 600;
        color: #516377;
        padding: 8px 16px;
        border: 0px solid #ccc;
        text-align: center;
        border-radius: 7px;
        transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
      }
      
      .basic-default-password{
        background-color: #f3f6fe;
        font-weight: 600;
        color: #516377;
        padding: 8px 16px;
        text-align: center;
        border-radius: 7px;
        transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
      }

      .horizontal-list li {
        margin-right: 5px;
        white-space: nowrap; /* Prevent items from breaking onto new lines */
      }

      .horizontal-list li:not(:last-child)::after {
        content: " | ";
        color: #d4d8dc;
        margin: 0px 6px;
      }

      /* Remove the pipe separator from the last item in each line */
      .horizontal-list li:nth-child(3n)::after {
        content: none;
      }

      .account-container {
        border: 1px solid rgb(90, 141, 238) !important;
        background: rgba(90, 141, 238, 0.08);
      }
      
      /* Animations & Transitions (web-design-skill / animation.md) */

      .btn:not(:disabled):active,
      .btn-faint:not(:disabled):active,
      .btn-select-date:not(:disabled):active,
      .basic-default-password:not(:disabled):active {
        transform: scale(0.97);
      }
      
      .form-check {
        transition: border-color var(--dur-fast) linear;
      }
      
      #coupon-code-btn{
        transition: width var(--dur-base) var(--ease-out);
      }
      
      :root {
        --animate-delay: 0.05s;
      }
      
      .animate__animated.animate__delay-6s{-webkit-animation-delay:6s;animation-delay:6s;-webkit-animation-delay:calc(var(--animate-delay)*6);animation-delay:calc(var(--animate-delay)*6)}
      .animate__animated.animate__delay-7s{-webkit-animation-delay:7s;animation-delay:7s;-webkit-animation-delay:calc(var(--animate-delay)*7);animation-delay:calc(var(--animate-delay)*7)}
      
      .animate__animated.animate__shakeX {
        --animate-duration: 0.45s;
      }

      @keyframes order-form-pop-in {
        0%   { transform: scale(0.95); opacity: 0; }
        100% { transform: scale(1);    opacity: 1; }
      }

      @keyframes order-form-field-attention {
        0%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 92, 0); }
        50%      { box-shadow: 0 0 0 3px rgba(255, 91, 92, 0.35); }
      }

      .animate__flash {
        animation: order-form-field-attention var(--dur-base) var(--ease-out) 2;
      }

      .alert .fa-exclamation-circle,
      .alert .fas.fa-exclamation-circle {
        animation: order-form-pop-in var(--dur-base) var(--ease-out) both;
      }
      
      
      
      /* Estiamted Delivery Timeline */
      
      #estimated-delivery-container{
        border-left: 1px #3ada8a dashed;
        left: 24px;
        margin-top:5px;
        padding-top:0px;
        padding-bottom:0px;
        position: relative;
      }
      #estimated-delivery-container p{
        left: -23px;
        position: relative;
        margin-top: -5px;
        padding-bottom: 5px;
      }
      
      #estimated-delivery-container p i{
        background: #fff;
      }
      
      #estimated-delivery-container > p:last-of-type {
        padding-bottom: 0px;
        margin-bottom: -5px;
      }
      

      
      /* Radio Box Selector */
      .custom-option {
        border-radius: 0.5rem !important;
        overflow: hidden;
      }
      
      .btn, .alert {
        border-radius: 0.5rem;
      }
      
      .custom-option-basic .custom-option-content{
        padding-left: 1.3em;
      }
      
      .custom-option-basic .custom-option-header {
        padding-right: 30px;
      }
      
      .form-check.custom-option .form-check-input{
        float: right;
        margin-top: 2px;
        position: relative;
        /*
        background: #d4d8dc78;
        border: 0px solid #d4d8dc5e;
        */
      }
      
      #collapsePaymentMethod .custom-option-basic .custom-option-header {
        padding-right: 35px;
      }
      
      #collapsePaymentMethod .form-check.custom-option .form-check-input{
        margin-top: 15px;
      }
      
      .form-check.custom-option .form-check-input:checked + .form-check.custom-option   {
        border-color: blue;  
      }
      
      
      .form-check.custom-option.selected, .form-check:hover {
        border-color:#3595f6 !important;
      }

      .order-form-suggest-dropdown {
        display: none;
        position: fixed;
        z-index: 1060;
        background: #fff;
        border: 1px solid #ddd;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        max-height: 205px;
        overflow-y: auto;
      }
      
      .custom-option-body .fa-ul {
        margin-left: 1.5em;
      }
      
      .custom-option-basic .custom-option-header {
        padding-right: 30px;
      }
      
      #coupon_alert .bx{
        font-size: 20px;
        width: 23px;
        position: relative;
        top: -3px;
      }
      
      #coupon_alert .alert-primary {
          background-color: #dff9ec!important;
          border-color: #c4f4dc!important;
          color: #39da8a!important;
      }
      
      #coupon_alert .badge {
        font-size: 15px;
        background-color: #39da8a!important;
        color: #ffffff!important;
      }
      
      /* Dropzone - fileupload */
      .dz-message{
        font-size: 15px;
        margin: 1rem 0;
      }
      .dz-preview {
        margin: 0.75rem;
      }
      
      .dropzone{
        height: calc(100% - 23px);
      }
      
      .dz-thumbnail>img {
        width: auto !important;
      }
      
      .uploaded-image-preview{
        max-height: 200px;
        max-width: 200px;
        margin-right: 7px;
        margin-bottom: 7px;
        border-radius: 6px;
        background-color: #f3f4f5;
      }

      .review-image-thumb-btn {
        border: 0;
        background: transparent;
        padding: 0;
        margin-right: 7px;
        margin-bottom: 7px;
        cursor: zoom-in;
        border-radius: 6px;
        line-height: 0;
        vertical-align: top;
      }

      .review-image-thumb-btn .uploaded-image-preview {
        margin-right: 0;
        margin-bottom: 0;
        display: block;
        transition: box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
      }

      .review-image-thumb-btn:hover .uploaded-image-preview,
      .review-image-thumb-btn:focus-visible .uploaded-image-preview {
        box-shadow: 0 0 0 2px #5a8dee;
        transform: scale(1.02);
      }

      #modalReviewImage .modal-content {
        background: transparent;
        border: 0;
        box-shadow: none;
        position: relative;
      }

      #modalReviewImage .modal-header {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2;
        border: 0;
        padding: 0.75rem;
        pointer-events: none;
      }

      #modalReviewImage .modal-header .btn-close {
        pointer-events: auto;
        background-color: rgba(0, 0, 0, 0.55);
        opacity: 1;
        filter: invert(1);
        border-radius: 50%;
        padding: 0.75rem;
      }

      #modalReviewImage .modal-body {
        padding: 2.5rem 0.5rem 1rem;
      }

      #modalReviewImage .review-image-lightbox-img {
        max-width: 100%;
        max-height: calc(100vh - 8rem);
        width: auto;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
      }

      body.review-image-modal-open .modal-backdrop.show {
        opacity: 0.88;
      }
      
      @media (min-width: 576px) {
        .light-style .dz-thumbnail {
          width: calc(100% - 20px) !important;
        }
        .light-style .dz-preview {
            width: calc(50% - 24px) !important;
        }
      }
      
      /* Accordian */
      .accordion>.card:not(:last-of-type) {
        margin-bottom: 0.8rem;
      }
      
      .accordion-item.order-form-accordian-with-validation, #ReviewOrderAccordion, #PaymentAccordion{ 
        border: 1px solid #d4d8dc6e !important;
        border-radius: 0.5125rem;
      }
      
      
      h2 .accordion-body {
        padding: 0.78rem 1.1rem 1.5rem 1.1rem;
      }
      
      h2 .accordion-button {
      }
      
      h2 .accordion-button.collapsed{
      }
      
      .card.accordion-item .accordion-collapse {
        padding-bottom: 0.5625rem !important;
      }
      
      .accordion-blank .accordion-item .accordion-header .accordion-button {
        border-top:none !important;
        border-bottom:none !important;
        border-left:none !important;
        border-right:none !important;
      }
      
      .accordion-collapse{
      }
      
      .accordian-blank .accordion-button.collapsed {
      }
      
      .accordion-button {
        padding: 1.3rem 1.75rem;
        font-size: 1.2rem;
      }
      
      .accordion-button::after{
        transform: rotate(90deg);
        transition: transform var(--dur-base) var(--ease-out);
      }
      
      .accordion-button:not(.collapsed)::after {
          transform: rotate(270deg);
      }
      
      .bottom-accordion-button::after{
        transform: rotate(270deg);        
      }
      
      .bottom-accordion-button:not(.collapsed)::after {
        transform: rotate(90deg) !important;
      }
      
      /* Sub accordian */
      
      .accordian-blank {
        margin: 0 -15px;
      }
      
      .accordion-body {
        padding: .78rem 1.75rem 1.35rem 1.75rem;
      }
      
      .accordian-blank .accordion-body {
        padding-bottom: 0.2rem !important;
        border: none !important;
      }
          
      .accordian-blank .accordion-body, .accordian-blank .accordion-header .accordion-button{
        padding: 0.78rem 1rem 1rem 1rem;
      }
      
      .accordian-blank .accordion-item {
        border: none;
        box-shadow: none !important;
      }
      
      .accordian-blank .accordion-header .accordion-button{
        font-size: small;
        padding-top: 0;
        padding-bottom: 0;
      }
      
      .accordian-blank .accordion-header .accordion-button::after{
        background-size: 0.5rem;
        width: 0.5rem;
        height: 0.5rem;    
      }
      
      .accordion-spinner{
        scale: 0.5;
        top: -2px;
        position: relative;
        left: 3px;
      }
      
      .button-spinner{
        scale: 0.5;
        top: 11px;
        position: relative;
        left: 3px;
      }
      

      .btn-primary.disabled, .btn-primary:disabled {
          color: #737373 !important;
          background: #f3f4f5 !important;
          border: #e7e7e7 1px solid !important;
          box-shadow: none!important;
      }

      
      #account-validation, #package-validation, #network-validation, #brand-validation, #story-validation,
      .accordion-validation-message {
        position: static;
        left: auto;
        top: auto;
        font-weight: 400;
        font-size: 0.75rem;
        line-height: 1.35;
        color: rgba(38, 60, 85, 0.55);
      }

      .order-form-accordian-with-validation .accordion-button {
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.5rem;
      }

      .order-form-accordian-with-validation .accordion-title-text {
        flex: 1 1 auto;
        min-width: 0;
      }

      .order-form-accordian-with-validation .accordion-validation-message {
        flex: 1 1 100%;
        order: 2;
        margin: 0.2rem 0 0;
        padding: 0;
      }

      .order-form-accordian-with-validation .accordion-validation-message:empty {
        display: none;
        margin: 0;
      }

      .order-form-accordian-with-validation .accordion-validation-message.text-danger {
        color: #ff5b5c !important;
      }

      .order-form-accordian-with-validation .accordion-validation-message .accordion-selection-summary {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.85rem;
        row-gap: 0.25rem;
      }

      .order-form-accordian-with-validation .accordion-validation-message .accordion-selection-addon-item {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
      }

      .order-form-accordian-with-validation .accordion-validation-message .accordion-selection-separator {
        margin-right: 0.4rem;
        color: rgba(38, 60, 85, 0.45);
      }

      @media (max-width: 767px) {
        /* On mobile a long selection summary can wrap to several lines.
           Keep the check icon as a hanging marker on the left and let the
           labels wrap in a tidy column to its right instead of pushing the
           tick onto its own line. */
        .order-form-accordian-with-validation .accordion-validation-message.accordion-selection-summary-message {
          display: flex;
          align-items: flex-start;
          flex-wrap: nowrap;
        }
        .order-form-accordian-with-validation .accordion-validation-message.accordion-selection-summary-message > .bxs-check-circle {
          flex: 0 0 auto;
          margin-top: 0.1rem;
        }
        .order-form-accordian-with-validation .accordion-validation-message.accordion-selection-summary-message .accordion-selection-summary {
          flex: 1 1 auto;
          min-width: 0;
          column-gap: 0.55rem;
        }
      }

      .accordion-validation-message .accordion-avatar-wrap {
        position: relative;
        display: inline-flex;
        vertical-align: middle;
        margin-right: 0.5rem;
      }

      .accordion-validation-message .accordion-avatar-wrap .accordion-avatar {
        display: block;
      }

      .accordion-validation-message .accordion-avatar-check {
        position: absolute;
        right: -3px;
        bottom: -3px;
        font-size: 0.85rem;
        line-height: 1;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 1.5px #fff;
      }

      .accordion-validation-message .accordion-avatar-name {
        vertical-align: middle;
      }

      .order-field-english-wrap {
        position: relative;
      }

      .order-field-english-highlight {
        position: absolute;
        inset: 0;
        overflow: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        word-break: break-word;
        color: #516377;
        background: #fff;
        pointer-events: none;
        z-index: 0;
        border: 1px solid transparent;
        box-sizing: border-box;
      }

      .order-field-english-input {
        position: relative;
        z-index: 1;
        background-color: transparent !important;
      }

      .order-field-english-input.has-english-invalid-chars {
        background-color: transparent !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent;
        caret-color: #516377;
      }

      .order-field-english-highlight .english-invalid-char {
        background-color: rgba(255, 91, 92, 0.28);
        color: inherit;
        padding: 0;
        border-radius: 2px;
      }

      .order-field-english-feedback {
        margin-top: 0.35rem;
        font-size: 0.8125rem;
        line-height: 1.35;
        color: #ff5b5c;
      }
      
      
      .btn-primary {
        color: #fff;
        background: var(--color-gradient-stop);
        background-size: 99.99%;
        border: none;
        border-radius: 850px;
        padding-right: 30px;
        padding-left: 30px;
        transition: background var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
      }
      
      .btn-primary:active:not(:disabled) {
        transform: scale(0.97);
      }
      
      .btn-secondary {
        color: #fff;
        background: var(--color-secondary);
        background-size: 99.99%;
        border: none;
        border-radius: 850px;
        padding-right: 30px;
        padding-left: 30px;
      }
      
      .btn-primary:hover {
        background: #db592d !important;
      }
      
      .btn-check:focus+.btn-primary, .btn-primary:focus, .btn-primary.focus {
        background: var(--color-gradient-stop);
      }
      
      .btn-gradient {
        /* Solid fallback under the gradient image == the :hover colour. Without
           it the base background-color is transparent, so Bootstrap's
           background-color transition flashed white for a frame on hover when
           the gradient image was swapped for the solid hover colour. */
        background-color: #db592d;
        background-image: -webkit-gradient(linear,left top,right top,from(var(--color-gradient-stop)),to(var(--color-gradient-start)));
        background-image: linear-gradient(to right,var(--color-gradient-stop) 0,var(--color-gradient-start) 100%);
        border-radius: 9px !important;
      }
      
      .alert-warning {
        color: #fda32c;
      }
      
      .alert .bx {
        position: absolute;
        font-size: 32px;
        margin: 5px 0 0 -5px;
      }
      
      .alert.trust-badge h6, .alert.trust-badge span {
        left: 39px;
        display: block;
        position: relative;
      }
      
      .alert.alert-review {
        padding: 1.2rem 1.45rem;
      }
      
      .alert-outline {
        border: 1px solid #d4d8dd;
      }
      
      .included-link {
        font-size: 13px;
        float: right;
        color: var(--color-link);
        padding-top: 2px;
        cursor: pointer;
        display: none;
      }
      
      .included-link:hover {
       color: var(--color-link-hover); 
      }
      
      .list-group-item:hover .included-link {
        display: block;
      }
      
      .list-group-item {
        padding-right: 0;
      }
      
      .two-column {
        column-count: 2;
        column-gap: 0px;
      }
      
      .trust-badge-1, .trust-badge-2
        {
            display:block !important;
        }
      
      .no-wrap{
        white-space: nowrap;
      }
      
      .example-tab{
        border: 1px solid #d4d8dc !important;
        padding: 0;
        border-radius: 0.5rem;
        overflow: hidden;
        background: #fff;
      }
      .example-tab .tab-list {
        border-top:1px solid #d4d8dc;
      }
      
      @media (max-width: 977px) {
        .btn-primary, .btn-resume-order, .btn-outline-primary, .btn-block-mobile{
          width: 100% !important;
        } 
        #more-news-outlets-notice {
            text-align: center;
            display: block;
            margin-top: -9px;
        }
        .tab-list{
          flex-direction: column;
        }
        .two-column {
          column-count: 1;
        }
      }
      
      .rounded {
        border-radius: .5rem !important;
      }
      
      .modal-header{    
        padding: 2.0rem 2.5rem 0 2.5rem;
      }
      
      .modal-body{
        padding: 1.5rem 2.5rem 1rem 2.5rem;
      }
      
      #pmt-btn-options:disabled, #pmt-btn-options-mob:disabled, #btn-news-story-continue:disabled {
        background: #ffffff !important;
        border-color: #e7e9ed !important;
        border-width: 2px !important;
        border-style: dashed !important;
        color: #a8b1bb !important;
        font-weight: 500;
      }
      
      @media (min-width: 768px) {

        
        .sidebar-pd {
          padding-top: 107px !important;
        }
      }
      @media (min-width: 992px) {
        #dropzone-image-container {
          
        }
        .content-wrapper:before{
          content: '';
          background: #fff;
          left: 75%;
          width: 1000%;
          height: 100%;
          z-index: -1;
          top: 0;
          position: fixed;
        }


        .ps-lg-6{
          padding-left: 4rem !important;
        }

        .ps-lg-7{
          padding-left: 5.5rem !important;
        }
        
        html:not([dir=rtl]) .text-end-lg {
          text-align: right !important;
        }
        
      }
      
      .accordion>.card:not(:last-of-type) {
          border-radius: 9px !important;
          margin-bottom: 0.5rem;
          overflow: hidden;
      }
      
      /* Writing Guidelines */
      .writing-guidelines-list i{
        color: var(--gray-dark);
        font-size: 7px;
        top: -2px;
        position: relative;
      }
      
      /* Modals */
      .modal-backdrop.show {
          opacity: 0.3;
      }
      .modal.fade.show {
          backdrop-filter: blur(7px);  
      }
      
      /* avatars */
      .avatar-fb {
        width: 2.6rem;
        height: 2.6rem;
      }
      .avatar-group .avatar {
        margin-left: -1.4rem;
      }
      
      /* Horizontal Lists */
      .horizontal-divided-list {
          display: flex;
          list-style: none;
          justify-content: center;
          padding: 0;
          margin: 0;
      }
      .horizontal-divided-list li:first-child {
          border-left: none;
      }
      
      .horizontal-divided-list li {
          padding: 10px;
          text-align: center;
          line-height: 2;
      }
      .horizontal-divided-list li:not(:first-child)::before {
          content: "|";
          position: absolute;
          left: -4px;
          color: #ededed;
      }
      
      /* Form Validation */ 
      
      .form-control, .tagify.form-control {
        padding: .65rem 1rem;
        border-radius: .5rem;
      }

      /* 16px input text prevents iOS Safari from auto-zooming on focus */
      .form-control,
      .tagify__input,
      .select2-container--default .select2-selection--single .select2-selection__rendered,
      .select2-search__field {
        font-size: 16px;
      }
      
      .select2-selection.select2-selection--single {
          border-radius: .5rem !important;
      }
      
      .light-style .select2-container--default .select2-selection--single, .light-style .select2-container--default .select2-selection--single .select2-selection__arrow {
          height: calc(1.75em + 0.938rem + 2px);
      }
      
     .select2-container--default .select2-selection--single .select2-selection__clear {
          margin-top:1px;  
      }
      
      .select2-selection__clear:hover{
        color: rgb(251 106 42);
      }
      
      .light-style .select2-container--default .select2-selection--single .select2-selection__rendered {
          line-height: 2.5rem;
          padding-left: 1rem;
      }
      
      .select2-selection__rendered {
        padding: 0rem 1rem;
        border-radius: .5rem;
      }
      
      .tagify__tag, .tagify__input {
        margin: 0 8px 0 0 !important;
        border-radius: 0.30rem;
        overflow: hidden;
      }
      
      .was-validated .form-control:valid, .form-control.is-valid, .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
          border-color: #d4d8dd;
      }
      
      .was-validated .form-check-input:valid~.form-check-label, .form-check-input.is-valid~.form-check-label {
          color: var(--bs-body-color);
      }
      .was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
          background-color: #5a8dee;
          border-color: #5a8dee;
      }
      
      .invalid-feedback div{
        /*
        background: #ffe5e5;
        border-color: #ffcece;
        */
        top: -4px;
        position: relative;
        border-radius: 4px;
        padding: 3px 7px;
        color: #ff5b5c;
      }

      .email-suggestion-wrap {
        margin-top: 0.35rem;
      }

      .email-suggestion-btn {
        display: block;
        width: 100%;
        text-align: left;
        border: 1px solid #ffe08a;
        background: #fff9e8;
        color: #5c4a1a;
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        line-height: 1.45;
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease;
      }

      .email-suggestion-btn:hover,
      .email-suggestion-btn:focus {
        background: #fff3cd;
        border-color: #ffc107;
        color: #5c4a1a;
      }

      .email-suggestion-btn strong {
        color: #384551;
        font-weight: 600;
      }

      .email-suggestion-action {
        color: #5a8dee;
        font-weight: 600;
        white-space: nowrap;
      }
      
      /* Breadcrumbs */
      
      #carousel_navbar {
          padding: 0;
          border: 1px solid #e7e9ed;
          border-radius: 0.5rem;
          background: #fff;
          overflow: hidden;
          width: 100%
      }
      
      #carousel_navbar span .btn{
          padding: 1rem 1.5rem 1rem 1.5rem !important;
          position: relative;
          z-index: 1;
          box-shadow: none;
      }
      
      #carousel_navbar span:not(:first-of-type) .btn {
          padding-left: 3rem !important;
      }
      
      #carousel_navbar span .btn:hover{
          background:#5a8dee;
          color:#fff;
      }
      
      #carousel_navbar span .btn::after {
          content: "";
          position: absolute;
          top: 50%;
          left: calc(100% - 1.5rem);
          transform: translateY(-50%) rotate(45deg);
          width: 2.6rem;
          height: 2.6rem;
          background-color: #ffffff;
          border-right: 1px solid #e7e9ed;
          border-top: 1px solid #e7e9ed;
          z-index: -1;
          transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-base) var(--ease-out);
      }
      
      #carousel_navbar span .btn:hover::after {
          background-color: #5a8dee;
          border-right: 1px solid #e7e9ed;
          border-top: 1px solid #e7e9ed;
      }
      
      /* Carosel */ 
      
      .carousel {
        position: relative;
        width: 100%;
        overflow: hidden;
      }

      .slides {
        display: flex;
        width: calc(100% * 3);
        transition: transform var(--dur-modal) var(--ease-drawer);
      }

      .slide {
        flex: 1;
        width: 100%;
        height: 100%;
        overflow:hidden;
      }

      #slide-1:checked ~ .slides {
        transform: translateX(0%);
      }

      #slide-2:checked ~ .slides {
        transform: translateX(-33.3333%);
      }
      
      #slide-3:checked ~ .slides {
        transform: translateX(-66.6666%);
      }
      
      /* DROPZONE */
      
      .dz-thumbnail>img {
        width: 100%;
      }
      
      .light-style .dz-error-mark, .light-style .dz-success-mark {
        background-color: rgb(57 218 138);
      }
      .dz-success-mark {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-02 0 11 8'%3E%3Cpath fill='%23fff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
          background-size: 75% !important;
          /*background-position-x: 3px !important;*/
      }
      
      .dz-error-mark, .dz-success-mark {
          position: absolute;
          left: 27%;
          top: 35%;
          display: none;
          margin-left: -1.875rem;
          margin-top: -1.875rem;
          height: 1rem;
          width: 1rem;
          border-radius: 50%;
          background-position: center center;
          background-size: 1.875rem 1.875rem;
          background-repeat: no-repeat;
          box-shadow: 0 0 1.25rem rgba(0,0,0,.06);
      }
      
      .dz-success .dz-details .dz-filename::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 7px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(57, 218, 138, 1);transform: ;msFilter:;'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.999 14.413-3.713-3.705L7.7 11.292l2.299 2.295 5.294-5.294 1.414 1.414-6.706 6.706z'%3E%3C/path%3E%3C/svg%3E");
        zoom: 80%;
        top: 5px;
        position: relative;
      }
      .dz-size {
        visibility: hidden;
      }
      .dz-success .dz-success-mark{
        display:none !important;
      }
      
      #dropzone-article .dz-thumbnail img {
        opacity: 40%;
      }
      
      .light-style .dropzone {
          border-radius: 0.75rem !important;
      }
      
      .dz-message .bx {
          font-size: 50px !important;
          margin-bottom: 13px !important;
      }
      
      /* tablist */
      
      .tab-container {
        border: 0px solid #ccc;
        padding: 0;
      }

      .tab-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-evenly;
      }

      .tab-item {
        cursor: pointer;
        padding: 5px 20px;
        background-color: #fff;
        border: 0px solid #ccc;
        border-bottom: none;
        width:100%;
        text-align: center;
      }

      .tab-item.active, .tab-item:hover {
        background: #5a8dee;
        color: #fff;
      }
      
      .tab-content {
        padding: 0;
      }

      .tab-pane {
        display: none;
        padding: 15px 14px;
      }

      .tab-pane.active {
        display: block;
      }

      .break-word{ 
        word-break: break-word;
      }
      
      
      
      .light-style .tagify__tag>div::before {
          box-shadow: 0 0 0 11.1em #eeeff1 inset;
      }
      
      .edit-btn{
        transition: opacity var(--dur-base) var(--ease-out);
        z-index: 10;
        position: relative;
      }
      
      .alert:hover .btn-link {
        display:block;
        opacity: 1;
        transition: opacity var(--dur-base) var(--ease-out);
      }
      
      .btn-link {
        display: inline-block;
        position: relative;
      }
      
      .btn-link:after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 1px;
        bottom: -4px;
        left: 0;
        background-color: #5a8dee;
        transform-origin: bottom right;
        transition: transform var(--dur-fast) var(--ease-out);
      }

      .btn-link:hover:after {
        transform: scaleX(1);
        transform-origin: bottom left;
      }
      
      .btn-remove{
        position: absolute;
        top: 2px;
        right: 4px;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.2rem 0.55rem;
        border: 0;
        border-radius: 0.375rem;
        background: transparent;
        color: #99a1ab;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.2;
        cursor: pointer;
        transition: color 150ms var(--ease-out, ease), background-color 150ms var(--ease-out, ease);
      }

      .btn-remove .bx{
        font-size: 0.95rem;
        line-height: 1;
      }

      .btn-remove:hover,
      .btn-remove:focus-visible{
        color: #5a6372;
        background: #eef0f3;
      }

      /* Privacy safety net: flags when a published Representative field
         matches the customer's private Order Contact details. */
      .rep-personal-note{
        color: #99a1ab;
        line-height: 1.4;
      }
      .rep-personal-note .fa-info-circle{
        position: relative;
        font-size: 13px;
        margin: -1px 3px 0 0;
      }
      
      #headingPaymentMethod .accordion-button:after{
        display:none;
        visibility:hidden;
        opacity:0;
      }
      
      .bg-label-success {
          background-color: #39da8a!important;
          color: #ffffff!important;
      }
      
      .btn-label-info, .btn-label-primary {
          color: #fff;
          border-color: transparent;
          background: #0587ed;
      }
      .btn-primary.disabled, .btn-primary:disabled {
          color: #fff;
          background-color: #fc6a2a;
          border-color: #fc6a2a;
          box-shadow: none!important;
      }
      
      .close-icon {
        background: #fff;
        padding: 7px 8px 6px 8px;
        margin: -9px -8px 0 0;
      }
      
      .close-icon:hover {
        color: #474747 !important;
      }
      
      .progress-top-label {
        font-size: 14px;
        margin-left: 9px;
        margin-right: 0.35rem;
        margin-bottom: 10px;
      }
      .progress-top-label:before { 
        content: "";
        border-left: solid #dbdbdb 1px;
        height: 48px;
        margin-top: 4px;
        margin-left: -9px;
        position: absolute;
        display: inline-block;
      }
      
      .progress-stacked{
        height: 15px;
      }
      
      #estimated-delivery-container .bx{
        color: #39da8a;
      }
      
      .fw-500 {
        font-weight: 500; 
      }
      .fw-600 {
        font-weight: 600; 
      }
      .fw-700 {
        font-weight: 700; 
      }
      .fw-800 {
        font-weight: 800; 
      }
      
      .text-box-button{
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        background: #f4f6fe;
      }
      
      .text-box-button:hover {
        background: #5a8dee;
        color: #fff;
      }
      
      .youtube-video {
        aspect-ratio: 16 / 9;
        width: 100%;
        max-width: 400px;
        border-radius: 0.5rem;
      }
      
      @supports not (aspect-ratio: 1) {
        .youtube-video {
          width: 300px;
          height: 168.75px
        }
      }
      
      
      .centered-with-lines {
          display: flex; /* Establishes a flex container */
          justify-content: center; /* Centers the flex items horizontally */
          align-items: center; /* Centers the flex items vertically */
          text-align: center; /* Center the text */
          margin: 11px 0 28px 0;
          color: #919191;
          font-weight: 500;
      }

      .centered-with-lines::before,
      .centered-with-lines::after {
          content: ''; /* Creates a pseudo-element for the line */
          flex: 1; /* Allows the lines to grow and take up available space */
          height: 1px; /* Thickness of the line */
          background: #d4d8dd; /* Color of the line */
          margin: 0 10px; /* Adds space between the text and the lines */
      }
      
      
      
      
      
        #collapseNewsStoryOptionsImages .dz-started:not(.dz-max-files-reached):not(.single-image-allowed)::after {
          display: block;
          /* Additional styling for the notice */
          padding: 10px;
          background-color: #fafafb;
          border: 2px dashed #dcdcdc;
          font-size: 14px;
          text-align: center;
          border-radius: 0.5rem;
      }
      
      @media (min-width: 992px) {
        #collapseNewsStoryOptionsImages .dz-started:not(.dz-max-files-reached):not(.single-image-allowed)::after {
          content: "Drop more images here, or click to upload";
          margin-top: 15px;
        }
      }
      
      @media (max-width: 991px) {
        #collapseNewsStoryOptionsImages .dz-started:not(.dz-max-files-reached):not(.single-image-allowed)::after {
          content: "Tap to add more images";
          margin-top: 28px;
        }
      }
      
      /* Youtube Embed */
      
      #article_embed_wrapper {
          position: relative;
          display: block;
          overflow: hidden;
      }

      #article_embed_wrapper.valid_youtube_url::before {
          content: '';
          position: absolute;
          left: 0px; /* Adjust as needed */
          top: 50%;
          transform: translateY(-50%);
          background-image: var(--youtube-thumbnail-url);
          background-size: cover;
          width: 71px; /* Adjust as per your image size */
          height: 41px;
          pointer-events: none;
          border-top: 1px #ffffff00 solid;
          border-left: 1px #ffffff00 solid;
          border-bottom: 1px #ffffff00 solid;
          border-radius: 0.5rem;
          overflow: hidden;
          pointer-events: none; /* To prevent the image from blocking cursor events */
      }

      #article_embed_wrapper.valid_youtube_url #article_embed {
          padding-left: 87px; /* Add padding to prevent text from overlaying the image */
      }

      .review_youtube_thumbnail {
          border-radius: 6px;
          max-height: 110px;
      }
      
      /* News Network Tablist */
      
      #collapseNewsNetwork .tab-list {
        position: relative;
        align-items: stretch;
        gap: 2px;
      }

      #collapseNewsNetwork .tab-list-indicator {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #f3f6fe;
        border-radius: 5px;
        z-index: 0;
        pointer-events: none;
        transform: translateX(0);
        width: 0;
        transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
      }

      #collapseNewsNetwork .tab-item.active{
        background-color: transparent;
        font-weight: 600;
        color: #516377;
      }
      
      #collapseNewsNetwork .tab-item {
          position: relative;
          z-index: 1;
          padding: 8px 4px;
          background-color: transparent;
          border: 0px solid #ccc;
          width: 100%;
          text-align: center;
          border-radius: 5px;
          color: #5a8dee;
          transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
      }
      
      #collapseNewsNetwork .tab-item:not(.active):hover {
        background-color: rgba(90, 141, 238, 0.1);
        color: #3d6fd4;
      }

      @media (prefers-reduced-motion: reduce) {
        #collapseNewsNetwork .tab-list-indicator {
          transition: none;
        }
      }
      
      #collapseNewsNetwork .tab-pane .col-md-6{
        padding-left:0;
      }
      
      /* Style for the mobile banner */
      .mobile-banner {
        display: none; /* Initially hidden */
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        /*background-color: #f0f0f0;*/
        /* border-top: 1px solid #ccc; */
        
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        z-index: 99; /* Ensure it's above other content */
        padding: 20px;
        background-color: rgba(255, 255, 255, 1); /* Adjust the alpha value for transparency */
        
    }
    .icon-circle-containter{
      border:none !imporant;
      float:left;
      padding:0;
    }
      
      .icon-circle-containter:has(input[type="radio"]:checked) .icon-circle {
        border: 4px solid #0587ed;
      }
      
    .icon-circle{
      width: 40px;
      height: 40px;
      background-color: #f5f7fa;
      background-size: 80%;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 50%;
      padding: 10px;
      border: 4px solid #fff;
      
    }
    .icon-circle-containter + .icon-circle-containter{
      margin-left: -10px;
    }
      
    .icon-circle-containter input{
      display:none;
    }
    .mobile-banner-icon{
      width:20px;
      height:20px;
      float:left;
      margin-right:6px;
    }
      
      .nowrap {
        white-space: nowrap;
      }
      
      .disabled-background {
          background-color: gray;
      }
      
      #client-profile-image{
        background: #f3f4f6;
      }

      #resume-alert{
        margin-left: auto;
        margin-right: auto;
      }
      
      .alert-success {
        border-width: 1px;
      }
      
      .icon-inline{
        margin-top: -5px;
      }
      
      .tagify{
        overflow: hidden;  
      }
      
      .tagify__input, .tagify__tag > div > * {
        word-break: break-all !important;
      }
      
      .tagify {
            --tag-inset-shadow-size: 9999em;
      }
      
      .form-label, .col-form-label{
          font-size: 0.90rem;
          text-transform: none;
          letter-spacing: inherit;
          /*font-weight: 500;*/
      }
      
      /* -------------------------------- 

      Triangle breadcrumb

      -------------------------------- */
      .cd-breadcrumb, .cd-multi-steps {
        width: 100%;
        padding: 0.5em 1em;
        margin: 1em auto;
        background-color: #edeff0;
        border-radius: .5rem;
      }
      .cd-breadcrumb::after, .cd-multi-steps::after {
        clear: both;
        content: "";
        display: table;
      }
      .cd-breadcrumb li, .cd-multi-steps li {
        display: inline-block;
        float: left;
        margin: 0.5em 0;
      }
      .cd-breadcrumb li:not(:nth-last-child(-n+2))::after, .cd-multi-steps li:not(:nth-last-child(-n+2))::after {
        /* this is the separator between items */
        display: inline-block;
        content: '\00bb';
        margin: 0 .6em;
        color: #959fa5;
      }
      .cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {
        /* hide separator after the last item */
        display: none;
      }
      .cd-breadcrumb li > *, .cd-multi-steps li > * {
        /* single step */
        display: inline-block;
        font-size: 15px;
        color: #2c3f4c;
      }
      .cd-breadcrumb li button:disabled {
        color: #a8b1bb;
      }
      
      .cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {
        /* selected step */
        color: #5a8dee;
      }
      .no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {
        /* steps already visited */
        color: #5a8dee;
      }
      .cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after {
        /* replace the default separator with a custom icon */
        content: '';
        height: 16px;
        width: 16px;
        background: url(https://codyhouse.co/demo/breadcrumbs-multi-steps-indicator/img/cd-custom-separator.svg) no-repeat center center;
        vertical-align: middle;
      }
      .cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before {
        /* add a custom icon before each item */
        content: '';
        display: inline-block;
        height: 20px;
        width: 20px;
        margin-right: .4em;
        margin-top: -2px;
        background: url(https://codyhouse.co/demo/breadcrumbs-multi-steps-indicator/img/cd-custom-icons-01.svg) no-repeat 0 0;
        vertical-align: middle;
      }
      .cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
        /* change custom icon using image sprites */
        background-position: -20px 0;
      }
      .cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
        background-position: -40px 0;
      }
      .cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
        background-position: -60px 0;
      }
      .cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before {
        /* change custom icon for the current item */
        background-position: 0 -20px;
      }
      .cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
        background-position: -20px -20px;
      }
      .cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
        background-position: -40px -20px;
      }
      .cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
        background-position: -60px -20px;
      }
      @media only screen and (max-width: 767px) {
        .cd-breadcrumb li button {
          background: none;
          border: none;
          padding: 0.75rem 0.75rem 0.75rem 1.25rem;
        }
        .centered-with-lines{
          text-wrap: balance;
        }

        /* Mobile: evenly distribute the three step labels across the pill */
        #carousel_navbar.cd-breadcrumb {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        #carousel_navbar.cd-breadcrumb li {
          float: none;
          margin: 0.25em 0;
        }
        #carousel_navbar.cd-breadcrumb li::after {
          /* drop the » separators when the steps are evenly spaced */
          display: none;
        }
        #carousel_navbar.cd-breadcrumb li:empty {
          /* hide the trailing spacer <li> so spacing stays even */
          display: none;
        }
        #carousel_navbar.cd-breadcrumb li button {
          padding: 0.6rem 0.5rem;
        }
      }
      @media only screen and (min-width: 768px) {
        .cd-breadcrumb, .cd-multi-steps {
          padding: 0 1.2em;
        }
        .cd-breadcrumb li, .cd-multi-steps li {
          margin: 1.2em 0;
        }
        .cd-breadcrumb li::after, .cd-multi-steps li::after {
          margin: 0 1em;
        }
        .cd-breadcrumb li > *, .cd-multi-steps li > * {
          font-size: 15px;
        }
      }
      
      @media only screen and (min-width: 768px) {
        .cd-breadcrumb.triangle {
          /* reset basic style */
          background-color: white;
          border: 1px solid #e7e9ed;
          padding: 0;
          overflow: hidden;
        }
        .cd-breadcrumb.triangle li {
          position: relative;
          padding: 0;
          margin: 0;
        }
        .cd-breadcrumb.triangle li:last-of-type {
          margin-right: 0;
        }
        .cd-breadcrumb.triangle li > * {
          position: relative;
          padding: 1em 2em 1em 3.5em;
          color: #2c3f4c;
          background-color: #fff;
          /* the border color is used to style its ::after pseudo-element */
          border-color: #fff;
          border-bottom: 0px;
          border-top: 0px;
          border-right: 0px;
        }
        .cd-breadcrumb.triangle li.current > * {
          /* selected step */
          color: #ffffff;
          background-color: #5a8dee;
          border-color: #5a8dee;
        }
        .cd-breadcrumb.triangle li:first-of-type > * {
          padding-left: 1.6em;
          border-radius: .5em 0 0 .5em;
        }
        .cd-breadcrumb.triangle li:last-of-type > * {
          padding-right: 1.6em;
          border-radius: 0 .5em .5em 0;
        }
        .no-touch .cd-breadcrumb.triangle a:hover {
          /* steps already visited */
          color: #ffffff;
          background-color: #2c3f4c;
          border-color: #2c3f4c;
        }
        /* Hover states for the step buttons — only when the step is enabled.
           border-color is updated too because the ::after triangle inherits it. */
        .cd-breadcrumb.triangle li > button:not(:disabled) {
          cursor: pointer;
          /* Only the button transitions. The ::after triangle uses
             border-left-color: inherit, so it follows the button's animated
             border-color frame-by-frame; giving it its own transition stacked a
             second ease and made the triangle lag behind the button. */
          transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
        }
        .cd-breadcrumb.triangle li:not(.current) > button:not(:disabled):hover {
          color: #ffffff;
          background-color: #4a7fe0;
          border-color: #4a7fe0;
        }
        .cd-breadcrumb.triangle li.current > button:not(:disabled):hover {
          background-color: #4a7fe0;
          border-color: #4a7fe0;
        }
        /* While hovering a later enabled step, preview the path by filling the
           preceding enabled steps with the active-step blue. :has() lets an
           earlier step react to a hovered later sibling (e.g. hovering Payment
           turns Review blue), and it reverts as soon as the hover ends. */
        .cd-breadcrumb.triangle li:has(~ li > button:not(:disabled):hover) > button:not(:disabled) {
          color: #ffffff;
          background-color: #5a8dee;
          border-color: #5a8dee;
        }
        .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
          /* 
            li > *::after is the colored triangle after each item
            li::after is the white separator between two items
          */
          content: '';
          position: absolute;
          top: -5px;
          left: 100%;
          content: '';
          height: 0;
          width: 0;
          /* 48px is the height of the <a> element */
          border: 31px solid transparent;
          border-right-width: 0;
          border-left-width: 20px;
        }
        .cd-breadcrumb.triangle li::after {
          /* this is the white separator between two items */
          z-index: 1;
          -webkit-transform: translateX(4px);
          -moz-transform: translateX(4px);
          -ms-transform: translateX(4px);
          -o-transform: translateX(4px);
          transform: translateX(4px);
          border-left-color: #e7e9ed;
          /* reset style */
          margin: 0;
        }
        .cd-breadcrumb.triangle li > *::after {
          /* this is the colored triangle after each element */
          z-index: 2;
          border-left-color: inherit;
        }
        .cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after {
          /* hide the triangle after the last step */
          display: none;
        }
        .cd-breadcrumb.triangle.custom-separator li::after {
          /* reset style */
          background-image: none;
        }
        .cd-breadcrumb.triangle.custom-icons li::after, .cd-breadcrumb.triangle.custom-icons li > *::after {
          /* 50px is the height of the <a> element */
          border-top-width: 25px;
          border-bottom-width: 25px;
        }

        @-moz-document url-prefix() {
          .cd-breadcrumb.triangle li::after,
          .cd-breadcrumb.triangle li > *::after {
            /* fix a bug on Firefix - tooth edge on css triangle */
            border-left-style: dashed;
          }
        }
      }
      
      
    @media (max-width: 991px) {
      .mobile-banner {
          display: block; /* Show the banner on mobile */
      }
      #news_story_next_container, #review-continue-to-payment-container, #submit_form_button{
        display:none !important;
      }
      .carousel{ 
        margin-bottom: 140px;
      }
      
      #intercom-container, .intercom-lightweight-app{
        display:none !important;
      }
      .btn-resume-order{
        width: 100%;
      }
      
      .flex-evenly {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
      }
      .flex-evenly * {
        width: 100% !important;
      }
    }
      
    @media screen and (min-width: 992px) and (max-width: 1254px) {
      .hide-mid {
        display: none !important;
      }
    }
      
    @media screen and (max-width: 800px) {      
      #cookieNoticePro.display-bottom {
        bottom: 68px;
      }
    }