.body {
    background-color: white !important;
    font: 400 0.7rem "Plus Jakarta Sans" !important;
    font-family: Plus Jakarta Sans !important;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
}

.content {
    background: none !important;
}

.text {
    font: 400 0.8rem "Plus Jakarta Sans" !important;
}


#pay-button {
    font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
    line-height: 1.5rem !important;
}

.form-control:focus {
    box-shadow: none !important;
}

.pbr-custom {
    position: relative !important;
}

.col-md-12.mb-5.extended-div {
    min-height: 50% !important;
}

input {
    font: 400 0.7rem "Plus Jakarta Sans" !important;
    /* font-size: 10px !important; */
}

.label {
    font-family: Plus Jakarta Sans;
    font-size: 0.8rem !important;
}

.title {
    font-family: inherit !important;
    font-family: Plus Jakarta Sans !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 19px !important;
    line-height: 33px !important;
    display: flex !important;
    align-items: center !important;
    color: black !important;
}


@font-face {
font-family:Plus Jakarta Sans;
src:url(../fonts/PlusJakartaSans-VariableFont_wght.ttf) format("truetype")
}

.extended-div {
    min-height: 50% !important;
}

.checkout-scan-button {
    position: relative !important;
    font-size: 1.2rem !important;
    text-align: center;
}

.form-label-group {
  position: relative;
  margin-bottom: 0.2rem;
}

.form-label-group input,
.form-label-group label,
.form-label-group select{
  height: 2.5rem !important;
  padding: .625rem;
  padding-left: .625rem;
  padding-right: .625rem;
}

input.form-control {
    height: 2.5rem !important;
}

.form-label-group select {
    border-radius: 5px !important;
    border: 1px solid #D0D0D0 !important;
    appearance: none; /* Removes default dropdown arrow in some browsers */
    background: transparent; /* Ensures background is clear for label to be visible */
}

input.form-control {
    border-radius: 6px !important;
}

.selected-flag {
    max-width: 70px !important;
}

/*input.form-control.phoneNumber {
    padding-left: 65px !important;
}*/


select.form-control{
    border-radius: 6px !important;
}

.form-label-group select:not(:placeholder-shown) ~ label,
.form-label-group select:valid ~ label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 10px !important;
  color: #777;
}

.form-label-group select::-ms-expand {
  display: none; /* Hides the default dropdown arrow in IE and Edge */
}

.form-label-group input {
    border-radius: 6px !important;
    border: 1px solid #D0D0D0 !important;
}

.form-label-group input.no-border {
    border: none !important;
}

label#amount-error {
    font-size: 0.7rem !important;
    top: 1.7rem !important;
    padding-top: 0.75rem !important;
}

label#customer\.contact\.email-error {
    font-size: 0.7rem !important;
    padding-top: 0rem !important;
}

.form-label-group label {
  font-size: 0.8rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  pointer-events: none;
  cursor: text; /* Match the input under the label */
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input:not(.hidden-input)::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:not(.hidden-input)::-moz-placeholder {
  color: transparent;
}

.form-label-group input:not(.hidden-input):-ms-input-placeholder {
  color: transparent;
}

.form-label-group input:not(.hidden-input)::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input:not(.hidden-input)::placeholder {
  color: transparent;
}

.form-label-group input:not(.hidden-input):not(:-moz-placeholder-shown) {
  padding-top: 1.1rem;
  padding-bottom: .2rem;
}

.form-label-group input:not(.hidden-input):not(:-ms-input-placeholder) {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}

.form-label-group input:not(.hidden-input):not(:placeholder-shown) {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}

.form-label-group input:not(.hidden-input):not(:-moz-placeholder-shown) ~ label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

.form-label-group input:not(.hidden-input):not(:-ms-input-placeholder) ~ label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

.form-label-group input:not(.hidden-input):not(:placeholder-shown) ~ label {
  font-size: 10px !important;
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

.form-label-group input:not(.hidden-input):-webkit-autofill ~ label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

.form-label-group input[readonly] ~ label {
  padding-top: .2rem;
  padding-bottom: .2rem;
  color: #777;
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .form-label-group label {
    position: static;
  }

  .form-label-group input::-ms-input-placeholder {
    color: #777;
  }
}



/* additional CSS for accordion payment option */
.payment-card {
    border: 1px solid gray;
    border-radius: 10px;
}

.payment-card .card-header {
    border-bottom: none;
}

.payment-card .collapse.show {
    text-decoration: none !important;
    /*border-top: 1px solid gray;*/
}

.payment-option-item {
    display: flex;
    align-items: center;
    border: none;
    background-color: transparent;
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
}

.payment-option-radio {
    opacity: 0;
    position: absolute;
}

.payment-option-radio + .payment-option-item::before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #fff;
}

.payment-option-radio:checked + .payment-option-item::before {
    background-color: #000;
}

.payment-option-image {
    height: auto !important;
    width: 2rem !important;
    height: auto;
}


.payment-option-name {
    font-weight: bold;
}

/* Hide the default radio button */
.payment-option-radio {
    opacity: 0;
    position: absolute;
}

/* Create a custom radiobutton */
.payment-option-radio + .payment-option-item::before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #fff;
}

/* Style for when the radiobutton is checked */
.payment-option-radio:checked + .payment-option-item::before {
    background-color: #000;
}

.custom-card-header {
    height: 2.5rem !important;
    padding: 0.25rem .4rem !important;
    background-color: transparent !important;
    border-bottom: none !important;
}

.custom-card-header:hover {
    text-decoration: none !important;
}


.btn-accordion-option {
    height: 3rem;
    background: transparent;
    border-radius: 15px;
    cursor: pointer;
    border: none !important;
}

.btn-accordion-option:hover {
    filter:brightness(95%) contrast(105%)
}

.btn-accordion-option img {
    height:50%;
    max-width:100%
}

.custom-card {
    border-radius: 6px !important;
    /*transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;*/
    overflow: hidden;
    /*opacity: 0;*/
    display: none;
}

.custom-button-header {
    background-color: transparent !important;
    color: inherit !important;
    font: 400 12px "Plus Jakarta Sans" !important;
}

.custom-button-header:focus {
    box-shadow: none !important;
}

.custom-button-header:hover{
    text-decoration: none !important;
    cursor: pointer;
}

.chevron-toggle {
    transition: transform 0.3s ease;
}

.collapsible-card {
    border: none !important;
}

@media (max-width: 767px) {
  .collapsible-card {
    padding: 0 !important;
  }

  .mt-mobile-custom {
    margin-top: 1rem !important;
  }

  .container-mobile {
    padding: 0 !important;
  }

  .title-container-cylinder {
      padding-left: .5rem !important;
   }

}

.collapse-button-container {
    text-align: center;
    padding: 0.5rem 0;
}

.collapse-button-container button {
    position: relative;
    bottom: -1px; /* Align button with the bottom border */
}

.collapse-button-container::before,
.collapse-button-container::after {
    content: "";
    display: inline-block;
    width: 25%;
    height: 2px;
    background: #D0D0D0;
    margin: 0 10px;
    vertical-align: middle;
}

.error-message {
    margin-top: 0.5rem;
    color: #dc3545;
    font-size: 0.875em;
}

.list-group-item.active {
    z-index: 0 !important;
}

.title-margin-alignment {
  margin-left: 15px;
}

@media (min-width: 1200px) { /* on bigger screens */

    .collapse-button-container {
        display: none !important;
    }

/*    .form-group.no-mb {
        margin-bottom: 0rem !important;
    }*/

/*    .container-mobile-compressed {
        padding-left: 3rem !important;
    }*/

    .payment-image-padding {
        padding-left: 1.5rem;
    }
}

@media (max-width: 1200px) {
    .payment-image-padding {
        padding-left: 3rem;
        margin-left: -1.5rem;
    }
}

.form-group.no-mb {
    margin-bottom: 0.75rem !important;
}

label#customer\.contact\.mobile-error {
    margin-bottom: 0rem !important;
    font-size: 0.7rem !important;
    margin-left: 12px !important;
}

label#customer\.billingAddress\.zip-error {
    font-size: 0.7rem !important;
}

label#customer\.billingAddress\.cityMunicipality-error {
    font-size: 0.7rem !important;
}

label#customer\.billingAddress\.zip-error,
label#customer\.billingAddress\.cityMunicipality-error {
    top: 40px !important;
}

label#customer\.firstName-error {
    font-size: 0.7rem !important;
    top: 35px !important;
}

label#customer\.lastName-error {
    font-size: 0.7rem !important;
    top: 35px !important;
}

label#customer\.firstName-error.long-error,
label#customer\.lastName-error.long-error {
    top: 40px !important;
}

input.form-control.error {

}

.intl-tel-input .selected-flag {
    height: 2.5rem !important;
}

.custom-collapse-button .chevron-toggle {
    width: 2rem;
    height: auto;
}

.pay-opt-icon {
    width: 2rem;
    height: auto;
}

.payment-option-header {
    font-size: 0.8rem !important;
    margin-bottom: 0rem !important;
    margin-left: 1.25rem;
}

.custom-collapse-button:focus ,
.chevron-toggle:focus {
    box-shadow: none !important;
}

.row.no-gutters {
  margin-right: 5px !important;
  margin-left: 5px !important;
}

.margin-padding-added {
    margin-right: 1.25rem !important;
    margin-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.row.no-gutters > [class*='col-'] {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

.pbr-custom-no-bottom {
    bottom: auto !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
}

.custom-collapse {
    width: 1rem;
    height: auto;
}

.payment-type-img {
    width: 1.5rem !important;
    height: auto !important;
    margin-top: -5px !important;
}

.custom-collapse-button {
    border: none;
    background: none;
    cursor: pointer;
}

.custom-collapse-button .chevron-toggle {
    color: blue;
    font-size: 1.5em;
}

.custom-collapse-button:hover .chevron-toggle {
    color: darkblue;
}

.title-container-cylinder {
    display: flex;
    align-items: flex-start;
    padding-left: 2.5rem;
}

.title-container-cylinder::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 35px;
    /*background-color: rgb(0, 123, 255);*/
    background-color: var(--primary-color, rgb(0, 123, 255));
    /*margin-right: 8px;*/
    border-radius: 10px;
}

.list-group-item.active {
    background-color: var(--primary-color, rgb(0, 123, 255)) !important;
}

.custom-nav-container {
    max-width: 500px !important;
    text-align: center !important;
    margin: 0 auto;
    margin-top: 3rem !important;
}

.custom-nav-pills {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    margin-top: 3rem;
    flex-wrap: nowrap !important;
}

.custom-nav-pills .custom-nav-link {
    position: relative;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.custom-nav-pills .custom-nav-link::before {
    content: '';
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: #646464;
    z-index: 1;
}

.custom-nav-pills .custom-nav-link.active::before {
    background-color: var(--primary-color, rgb(0, 123, 255)) !important;
}

.custom-nav-link.active {
    color: var(--primary-color, rgb(0, 123, 255)) !important;
}

.custom-colored-label {
    color: var(--secondary-color, rgb(0, 123, 255)) !important;
}

/* Apply ::after only to the second and third <li> elements */
.custom-nav-pills li:nth-child(2)::after,
.custom-nav-pills li:nth-child(3)::after {
    content: '';
    position: absolute;
    top: -1.25rem;
    transform: translateX(-100%);
    width: 42%;
    height: 2px;
    background-color: #646464;
    z-index: 0;
}

.light-gray-label {
    color: #646464 !important;
}

.a-no-hover:hover {
    text-decoration: none !important;
}

/* New class to double the width of ::after */
.custom-nav-pills.double-width li:nth-child(2)::after,
.custom-nav-pills.double-width li:nth-child(3)::after {
    width: 84%; /* Double the original width */
}

/* Change line color to blue when the link is active */
.custom-nav-pills li:nth-child(2).active::after,
.custom-nav-pills li:nth-child(3).active::after {
    background-color: var(--primary-color, rgb(0, 123, 255)) !important;
}


.li-no-hover {
    font: 600 10px "Plus Jakarta Sans" !important;
    color: inherit !important;
    text-wrap: nowrap !important;
}

.li-no-hover:hover {
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .li-no-hover {
        font: 600 10px "Plus Jakarta Sans" !important;
        text-wrap: wrap !important;
    }

    .custom-nav-pills .custom-nav-link::before {
        top: -1.5rem;
        width: 1.2rem;
        height: 1.2rem;
    }

    .custom-nav-container{
        max-width: 300px;
    }

    input.form-control.error {
        margin-bottom: 1rem !important;
    }

/*    input.form-control.phoneNumber.error {
        margin-bottom: 0rem !important;
    }*/

    .payment-image-padding {
        padding-left: 1.75rem;
        margin-left: -1.5rem;
    }
}

/*::after lengths*/
@media (max-width: 768px) {
    .custom-nav-pills li:nth-child(2)::after,
    .custom-nav-pills li:nth-child(3)::after {
        top: -1rem;
        width: 40%;
    }

    /* New class to double the width of ::after */
    .custom-nav-pills.double-width li:nth-child(2)::after,
    .custom-nav-pills.double-width li:nth-child(3)::after {
        width: 82%; /* Double the original width */
    }
}


@media (max-width: 500px) {
    /* New class to double the width of ::after */
    .custom-nav-pills.double-width li:nth-child(2)::after,
    .custom-nav-pills.double-width li:nth-child(3)::after {
        width: 78%; /* Double the original width */
    }
}

@media (max-width: 450px) {
    .custom-nav-pills li:nth-child(2)::after,
    .custom-nav-pills li:nth-child(3)::after {
        width: 38%;
    }

    /* New class to double the width of ::after */
    .custom-nav-pills.double-width li:nth-child(2)::after,
    .custom-nav-pills.double-width li:nth-child(3)::after {
        width: 76%; /* Double the original width */
    }

}

@media (max-width: 400px) {
    /* New class to double the width of ::after */
    .custom-nav-pills.double-width li:nth-child(2)::after,
    .custom-nav-pills.double-width li:nth-child(3)::after {
        width: 72%; /* Double the original width */
    }

}

@media (max-width: 385px){
    .custom-nav-pills li:nth-child(2)::after, .custom-nav-pills li:nth-child(3)::after {
        top: -1rem;
        width: 38%;
    }

    /* New class to double the width of ::after */
    .custom-nav-pills.double-width li:nth-child(2)::after,
    .custom-nav-pills.double-width li:nth-child(3)::after {
        top: -1rem;
        width: 68%; /* Double the original width */
    }

}

@media (max-width: 330px){
    /* New class to double the width of ::after */
    .custom-nav-pills.double-width li:nth-child(2)::after,
    .custom-nav-pills.double-width li:nth-child(3)::after {
        top: -1rem;
        width: 62%; /* Double the original width */
    }

}

@media (max-width: 300px){
    /* New class to double the width of ::after */
    .custom-nav-pills.double-width li:nth-child(2)::after,
    .custom-nav-pills.double-width li:nth-child(3)::after {
        top: -1rem;
        width: 56%; /* Double the original width */
    }

}

.form-label-group .form-control.is-invalid ~ .invalid-feedback {
    /*position: absolute !important;*/
    top: 100% !important;
}

.form-group-error {
    display: block;
    margin-bottom: 0.75rem !important;
}

.bold-text {
    /*font-weight: bolder !important;*/
    text-shadow: 0px 0px 0.1px;
}

.custom-span {
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

span#exchangeRatePart1 {
    text-wrap: nowrap;
}

span.label.label-bold.mb-2 {
    display: flex;
}

.intl-tel-input.separate-dial-code .selected-dial-code {
    padding-left: 2px !important;
    font-size: 12px !important;
}

.select2-container {
    height: 2.5rem !important;
}

span.error {
    font-size: 0.72rem !important;
}


.footer-note {
font:400 0.7rem "Plus Jakarta Sans" !important;
}


/*input.form-control.phoneNumber {
    padding-left: 75px !important;
}*/


h6#additional-fees-label {
    font-size: 0.8rem !important;
}

@media (min-width: 1200px) {
    .zip-error-message {
        padding-left: 0rem !important;
    }

    label#customer\.firstName-error.long-error,
    label#customer\.lastName-error.long-error {
        top: 37px !important;
    }
}

.payment-option-tiny-text {
    padding-top: 2px !important;
}

.custom-amount-label {
    font: 600 0.8rem "Plus Jakarta Sans" !important;
}

.custom-option-label {
    font: 600 0.8rem "Plus Jakarta Sans" !important;
    color: black !important;
}

.ref-code-link {
    word-wrap: break-word;
}


/*mle specific*/

.payment-logo {
    width: 10% !important;
    min-width: 100px !important;
    height: auto !important;
    max-width: 200px !important;
}

.add-on-fee-text-label{
    font-size: 10px !important;
    margin-bottom: 0rem !important;
}

.add-on-fee-text {
    font: 400 0.7rem "Plus Jakarta Sans" !important;
}

.add-on-fee-div {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
}

/*.payment-image-padding {
    padding-left: 2rem !important;
}*/

.chip-mt {
    margin-top: -0.5rem !important;
}

.button#nextButton{
    margin-top: 1rem !important;
}



@media (min-width: 768px) {
    .cust-padd-l5 {
        padding-left: 5px;
    }

    .cust-padd-r5 {
        padding-right: 5px;
    }

    ul.country-list {
        text-wrap: pretty !important;
        width: 50vw !important;
        max-width: 300px !important;
    }

    .container.container-mobile.container-mobile-compressed {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

}


/*col xxl*/


@media (min-width:1600px){
    .col-xxl-auto{
        flex:0 0 auto;
        width:auto
    }
    .col-xxl-1{
        flex:0 0 auto;
        width:8.33333333%;
        max-width:8.33333333%
    }
    .col-xxl-2{
        flex:0 0 auto;
        width:16.66666667%;
        max-width:16.66666667%
    }
    .col-xxl-3{
        flex:0 0 auto;
        width:25%;
        max-width:25%
    }
    .col-xxl-4{
        flex:0 0 auto;
        width:33.33333333%;
        max-width:33.33333333%
    }
    .col-xxl-5{
        flex:0 0 auto;
        width:41.66666667%;
        max-width:41.66666667%;
    }
    .col-xxl-6{
        flex:0 0 auto;
        width:50%;
        max-width:50%
    }
    .col-xxl-7{
        flex:0 0 auto;
        width:58.33333333%;
        max-width:58.33333333%;
    }
    .col-xxl-8{
        flex:0 0 auto;
        width:66.66666667%;
        max-width:66.66666667%;
    }
    .col-xxl-9{
        flex:0 0 auto;
        width:75%;
        max-width:75%
    }
    .col-xxl-10{
        flex:0 0 auto;
        width:83.33333333%;
        max-width:83.33333333%
    }
    .col-xxl-11{
        flex:0 0 auto;
        width:91.66666667%;
        max-width:91.66666667%;
    }
    .col-xxl-12{
        flex:0 0 auto;
        width:100%;
        max-width:100%;
    }
    .offset-xxl-0{
        margin-left:0
    }
    .offset-xxl-1{
        margin-left:8.33333333%
    }
    .offset-xxl-2{
        margin-left:16.66666667%
    }
    .offset-xxl-3{
        margin-left:25%
    }
    .offset-xxl-4{
        margin-left:33.33333333%
    }
    .offset-xxl-5{
        margin-left:41.66666667%
    }
    .offset-xxl-6{
        margin-left:50%
    }
    .offset-xxl-7{
        margin-left:58.33333333%
    }
    .offset-xxl-8{
        margin-left:66.66666667%
    }
    .offset-xxl-9{
        margin-left:75%
    }
    .offset-xxl-10{
        margin-left:83.33333333%
    }
    .offset-xxl-11{
        margin-left:91.66666667%
    }
    .g-xxl-0,.gx-xxl-0{
        --bs-gutter-x:0
    }
    .g-xxl-0,.gy-xxl-0{
        --bs-gutter-y:0
    }
    .g-xxl-1,.gx-xxl-1{
        --bs-gutter-x:0.25rem
    }
    .g-xxl-1,.gy-xxl-1{
        --bs-gutter-y:0.25rem
    }
    .g-xxl-2,.gx-xxl-2{
        --bs-gutter-x:0.5rem
    }
    .g-xxl-2,.gy-xxl-2{
        --bs-gutter-y:0.5rem
    }
    .g-xxl-3,.gx-xxl-3{
        --bs-gutter-x:1rem
    }
    .g-xxl-3,.gy-xxl-3{
        --bs-gutter-y:1rem
    }
    .g-xxl-4,.gx-xxl-4{
        --bs-gutter-x:1.5rem
    }
    .g-xxl-4,.gy-xxl-4{
        --bs-gutter-y:1.5rem
    }
    .g-xxl-5,.gx-xxl-5{
        --bs-gutter-x:3rem
    }
    .g-xxl-5,.gy-xxl-5{
        --bs-gutter-y:3rem
    }

    .icon-status-page {
        width: 5rem !important;
    }
}



/*col-xxxl*/

@media (min-width:1900px){
    .col-xxxl-auto{
        flex:0 0 auto;
        width:auto
    }
    .col-xxxl-1{
        flex:0 0 auto;
        width:8.33333333%;
        max-width:8.33333333%
    }
    .col-xxxl-2{
        flex:0 0 auto;
        width:16.66666667%;
        max-width:16.66666667%
    }
    .col-xxxl-3{
        flex:0 0 auto;
        width:25%;
        max-width:25%
    }
    .col-xxxl-4{
        flex:0 0 auto;
        width:33.33333333%;
        max-width:33.33333333%
    }
    .col-xxxl-5{
        flex:0 0 auto;
        width:41.66666667%;
        max-width:41.66666667%;
    }
    .col-xxxl-6{
        flex:0 0 auto;
        width:50%;
        max-width:50%
    }
    .col-xxxl-7{
        flex:0 0 auto;
        width:58.33333333%;
        max-width:58.33333333%;
    }
    .col-xxxl-8{
        flex:0 0 auto;
        width:66.66666667%;
        max-width:66.66666667%;
    }
    .col-xxxl-9{
        flex:0 0 auto;
        width:75%;
        max-width:75%
    }
    .col-xxxl-10{
        flex:0 0 auto;
        width:83.33333333%;
        max-width:83.33333333%
    }
    .col-xxxl-11{
        flex:0 0 auto;
        width:91.66666667%;
        max-width:91.66666667%;
    }
    .col-xxxl-12{
        flex:0 0 auto;
        width:100%;
        max-width:100%;
    }
    .offset-xxxl-0{
        margin-left:0
    }
    .offset-xxxl-1{
        margin-left:8.33333333%
    }
    .offset-xxxl-2{
        margin-left:16.66666667%
    }
    .offset-xxxl-3{
        margin-left:25%
    }
    .offset-xxxl-4{
        margin-left:33.33333333%
    }
    .offset-xxxl-5{
        margin-left:41.66666667%
    }
    .offset-xxxl-6{
        margin-left:50%
    }
    .offset-xxxl-7{
        margin-left:58.33333333%
    }
    .offset-xxxl-8{
        margin-left:66.66666667%
    }
    .offset-xxxl-9{
        margin-left:75%
    }
    .offset-xxxl-10{
        margin-left:83.33333333%
    }
    .offset-xxxl-11{
        margin-left:91.66666667%
    }
    .g-xxxl-0,.gx-xxxl-0{
        --bs-gutter-x:0
    }
    .g-xxxl-0,.gy-xxxl-0{
        --bs-gutter-y:0
    }
    .g-xxxl-1,.gx-xxxl-1{
        --bs-gutter-x:0.25rem
    }
    .g-xxxl-1,.gy-xxxl-1{
        --bs-gutter-y:0.25rem
    }
    .g-xxxl-2,.gx-xxxl-2{
        --bs-gutter-x:0.5rem
    }
    .g-xxxl-2,.gy-xxxl-2{
        --bs-gutter-y:0.5rem
    }
    .g-xxxl-3,.gx-xxxl-3{
        --bs-gutter-x:1rem
    }
    .g-xxxl-3,.gy-xxxl-3{
        --bs-gutter-y:1rem
    }
    .g-xxxl-4,.gx-xxxl-4{
        --bs-gutter-x:1.5rem
    }
    .g-xxxl-4,.gy-xxxl-4{
        --bs-gutter-y:1.5rem
    }
    .g-xxxl-5,.gx-xxxl-5{
        --bs-gutter-x:3rem
    }
    .g-xxxl-5,.gy-xxxl-5{
        --bs-gutter-y:3rem
    }
}

.custom-comp-note {
    font: 400 12px "Plus Jakarta Sans";
}

.cust-annotation-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 0px !important;
}


.display-block {
    display: block !important;
}

img.confirm-payment-logo {
    height: 48px !important;
    width: auto;
}

label#payment\.merchantReferenceId-error {
    font-size: 0.7rem !important;
    margin-top: 0px !important;
    top: 35px !important;
}

.save-qr {
    border: 2px solid var(--primary-color, rgb(0, 123, 255));
    color: var(--primary-color, rgb(0, 123, 255)) !important;
    font-size: 1.2rem !important;
    line-height: 1.5rem !important;
    font-family: 'Plus Jakarta Sans' !important;
}

.status-page-text {
    font: 500 clamp(1.75rem, 2.25vw, 3.5rem) "Plus Jakarta Sans" !important;
}

.sm-status-page-text {
    font-size: clamp(.7rem, 2.25vw, 0.8rem) !important;
}

.icon-status-page {
    width: 4rem;
}

@media (max-width: 767px) {

/*    .status-page-text {
        font: 400 2rem "Plus Jakarta Sans" !important;
    }*/

    .icon-status-page {
        width: 2.5rem !important;
    }
}

.status-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.break-dance-word {
    word-break: break-word;
}

.darker-grey-color {
    color: #646464 !important;
}

.larger-status-text {
    font-size: clamp(1.1rem, 2.25vw, 1.5rem) !important;
    font-weight: 600 !important;
}

.text-pending {
    color: #FFB628 !important;
}



/*loading page*/
:root {
    --primary-color-opacity: 0.5;
}

.loading-title {
    font: 500 clamp(1.25rem, 2.25vw, 2rem) "Plus Jakarta Sans" !important;
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    height: auto;
    width: 100%;
    margin: 0 auto;
}

.ball {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary-color, rgb(0, 123, 255));
    animation: changeIntensity 1s infinite ease-in-out;
    opacity: var(--primary-color-opacity);
}

.ball:nth-child(2) {
    animation-delay: 0.15s;
}

.ball:nth-child(3) {
    animation-delay: 0.3s;
}

.ball:nth-child(4) {
    animation-delay: 0.45s;
}

.ball:nth-child(5) {
    animation-delay: 0.6s;
}

/*big boi*/
@keyframes changeIntensity {
    0% {
        --primary-color-opacity: 0.35; /* 35% opacity */
    }
    1% {
        --primary-color-opacity: 0.36; /* 36% opacity */
    }
    2% {
        --primary-color-opacity: 0.37; /* 37% opacity */
    }
    3% {
        --primary-color-opacity: 0.38; /* 38% opacity */
    }
    4% {
        --primary-color-opacity: 0.39; /* 39% opacity */
    }
    5% {
        --primary-color-opacity: 0.4; /* 40% opacity */
    }
    6% {
        --primary-color-opacity: 0.41; /* 41% opacity */
    }
    7% {
        --primary-color-opacity: 0.42; /* 42% opacity */
    }
    8% {
        --primary-color-opacity: 0.43; /* 43% opacity */
    }
    9% {
        --primary-color-opacity: 0.44; /* 44% opacity */
    }
    10% {
        --primary-color-opacity: 0.45; /* 45% opacity */
    }
    11% {
        --primary-color-opacity: 0.46; /* 46% opacity */
    }
    12% {
        --primary-color-opacity: 0.47; /* 47% opacity */
    }
    13% {
        --primary-color-opacity: 0.48; /* 48% opacity */
    }
    14% {
        --primary-color-opacity: 0.49; /* 49% opacity */
    }
    15% {
        --primary-color-opacity: 0.5; /* 50% opacity */
    }
    16% {
        --primary-color-opacity: 0.51; /* 51% opacity */
    }
    17% {
        --primary-color-opacity: 0.52; /* 52% opacity */
    }
    18% {
        --primary-color-opacity: 0.53; /* 53% opacity */
    }
    19% {
        --primary-color-opacity: 0.54; /* 54% opacity */
    }
    20% {
        --primary-color-opacity: 0.55; /* 55% opacity */
    }
    21% {
        --primary-color-opacity: 0.56; /* 56% opacity */
    }
    22% {
        --primary-color-opacity: 0.57; /* 57% opacity */
    }
    23% {
        --primary-color-opacity: 0.58; /* 58% opacity */
    }
    24% {
        --primary-color-opacity: 0.59; /* 59% opacity */
    }
    25% {
        --primary-color-opacity: 0.6; /* 60% opacity */
    }
    26% {
        --primary-color-opacity: 0.61; /* 61% opacity */
    }
    27% {
        --primary-color-opacity: 0.62; /* 62% opacity */
    }
    28% {
        --primary-color-opacity: 0.63; /* 63% opacity */
    }
    29% {
        --primary-color-opacity: 0.64; /* 64% opacity */
    }
    30% {
        --primary-color-opacity: 0.65; /* 65% opacity */
    }
    31% {
        --primary-color-opacity: 0.66; /* 66% opacity */
    }
    32% {
        --primary-color-opacity: 0.67; /* 67% opacity */
    }
    33% {
        --primary-color-opacity: 0.68; /* 68% opacity */
    }
    34% {
        --primary-color-opacity: 0.69; /* 69% opacity */
    }
    35% {
        --primary-color-opacity: 0.7; /* 70% opacity */
    }
    36% {
        --primary-color-opacity: 0.71; /* 71% opacity */
    }
    37% {
        --primary-color-opacity: 0.72; /* 72% opacity */
    }
    38% {
        --primary-color-opacity: 0.73; /* 73% opacity */
    }
    39% {
        --primary-color-opacity: 0.74; /* 74% opacity */
    }
    40% {
        --primary-color-opacity: 0.75; /* 75% opacity */
    }
    41% {
        --primary-color-opacity: 0.76; /* 76% opacity */
    }
    42% {
        --primary-color-opacity: 0.77; /* 77% opacity */
    }
    43% {
        --primary-color-opacity: 0.78; /* 78% opacity */
    }
    44% {
        --primary-color-opacity: 0.79; /* 79% opacity */
    }
    45% {
        --primary-color-opacity: 0.8; /* 80% opacity */
    }
    46% {
        --primary-color-opacity: 0.81; /* 81% opacity */
    }
    47% {
        --primary-color-opacity: 0.82; /* 82% opacity */
    }
    48% {
        --primary-color-opacity: 0.83; /* 83% opacity */
    }
    49% {
        --primary-color-opacity: 0.84; /* 84% opacity */
    }
    50% {
        --primary-color-opacity: 0.85; /* 85% opacity */
    }
    51% {
        --primary-color-opacity: 0.84; /* 84% opacity */
    }
    52% {
        --primary-color-opacity: 0.83; /* 83% opacity */
    }
    53% {
        --primary-color-opacity: 0.82; /* 82% opacity */
    }
    54% {
        --primary-color-opacity: 0.81; /* 81% opacity */
    }
    55% {
        --primary-color-opacity: 0.8; /* 80% opacity */
    }
    56% {
        --primary-color-opacity: 0.79; /* 79% opacity */
    }
    57% {
        --primary-color-opacity: 0.78; /* 78% opacity */
    }
    58% {
        --primary-color-opacity: 0.77; /* 77% opacity */
    }
    59% {
        --primary-color-opacity: 0.76; /* 76% opacity */
    }
    60% {
        --primary-color-opacity: 0.75; /* 75% opacity */
    }
    61% {
        --primary-color-opacity: 0.74; /* 74% opacity */
    }
    62% {
        --primary-color-opacity: 0.73; /* 73% opacity */
    }
    63% {
        --primary-color-opacity: 0.72; /* 72% opacity */
    }
    64% {
        --primary-color-opacity: 0.71; /* 71% opacity */
    }
    65% {
        --primary-color-opacity: 0.7; /* 70% opacity */
    }
    66% {
        --primary-color-opacity: 0.69; /* 69% opacity */
    }
    67% {
        --primary-color-opacity: 0.68; /* 68% opacity */
    }
    68% {
        --primary-color-opacity: 0.67; /* 67% opacity */
    }
    69% {
        --primary-color-opacity: 0.66; /* 66% opacity */
    }
    70% {
        --primary-color-opacity: 0.65; /* 65% opacity */
    }
    71% {
        --primary-color-opacity: 0.64; /* 64% opacity */
    }
    72% {
        --primary-color-opacity: 0.63; /* 63% opacity */
    }
    73% {
        --primary-color-opacity: 0.62; /* 62% opacity */
    }
    74% {
        --primary-color-opacity: 0.61; /* 61% opacity */
    }
    75% {
        --primary-color-opacity: 0.6; /* 60% opacity */
    }
    76% {
        --primary-color-opacity: 0.59; /* 59% opacity */
    }
    77% {
        --primary-color-opacity: 0.58; /* 58% opacity */
    }
    78% {
        --primary-color-opacity: 0.57; /* 57% opacity */
    }
    79% {
        --primary-color-opacity: 0.56; /* 56% opacity */
    }
    80% {
        --primary-color-opacity: 0.55; /* 55% opacity */
    }
    81% {
        --primary-color-opacity: 0.54; /* 54% opacity */
    }
    82% {
        --primary-color-opacity: 0.53; /* 53% opacity */
    }
    83% {
        --primary-color-opacity: 0.52; /* 52% opacity */
    }
    84% {
        --primary-color-opacity: 0.51; /* 51% opacity */
    }
    85% {
        --primary-color-opacity: 0.5; /* 50% opacity */
    }
    86% {
        --primary-color-opacity: 0.49; /* 49% opacity */
    }
    87% {
        --primary-color-opacity: 0.48; /* 48% opacity */
    }
    88% {
        --primary-color-opacity: 0.47; /* 47% opacity */
    }
    89% {
        --primary-color-opacity: 0.46; /* 46% opacity */
    }
    90% {
        --primary-color-opacity: 0.45; /* 45% opacity */
    }
    91% {
        --primary-color-opacity: 0.44; /* 44% opacity */
    }
    92% {
        --primary-color-opacity: 0.43; /* 43% opacity */
    }
    93% {
        --primary-color-opacity: 0.42; /* 42% opacity */
    }
    94% {
        --primary-color-opacity: 0.41; /* 41% opacity */
    }
    95% {
        --primary-color-opacity: 0.4; /* 40% opacity */
    }
    96% {
        --primary-color-opacity: 0.39; /* 39% opacity */
    }
    97% {
        --primary-color-opacity: 0.38; /* 38% opacity */
    }
    98% {
        --primary-color-opacity: 0.37; /* 37% opacity */
    }
    99% {
        --primary-color-opacity: 0.36; /* 36% opacity */
    }
    100% {
        --primary-color-opacity: 0.35; /* 35% opacity */
    }
}

/*svg classes below*/

.cls-1-bt {
  stroke: var(--primary-color, rgb(0, 123, 255));
  stroke-width: 2px;
}

.cls-1-bt, .cls-2-bt {
  fill: none;
  stroke-miterlimit: 10;
}

.cls-2-bt {
  stroke: #0e153d;
}

.path-stroke-otc {
    stroke: var(--primary-color, rgb(0, 123, 255));
    stroke-width: 1.5;
    stroke-miterlimit: 10;
}

.cls-1-ewllt {
  fill: var(--primary-color, rgb(0, 123, 255));
}

.cls-2-ewllt  {
  stroke: #404040;
  stroke-miterlimit: 10;
  stroke-width: .5px;
}

.cls-2-ewllt, .cls-3-ewllt {
  fill: #404040;
}

.cls-1-cdc {
  fill: #fff;
}

.cls-2-cdc {
  fill: #404040;
}

.cls-3-cdc {
  fill: var(--primary-color, rgb(0, 123, 255));
}


.cls-1-otrs {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: .2px;
}

.cls-2-otrs {
  fill: var(--primary-color, rgb(0, 123, 255));
  opacity: 0.8;
}

.cls-3-otrs {
  fill: #fff;
}

.cls-4-otrs {
  fill: var(--primary-color, rgb(0, 123, 255));
}

.cls-5-otrs {
  fill: var(--primary-color, rgb(0, 123, 255));
  opacity: 0.2;
}

.cls-6-otrs {
  fill: #404040;
}

.cls-7-otrs {
  fill: var(--primary-color, rgb(0, 123, 255));
  opacity: 0.5;
}

.cls-8-otrs {
  fill: var(--primary-color, rgb(0, 123, 255));
  opacity: 0.4;
}

.cls-9-otrs {
  fill: var(--primary-color, rgb(0, 123, 255));
}

.cls-10-otrs {
  fill: var(--primary-color, rgb(0, 123, 255));
  opacity: 0.3;
}

/*svg classes end*/

/*list-group-item-fix*/

.list-group-item {
    border: none !important;
}

/*rbgi button*/

.save-qr-btn {
    font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
}

/*whitelabeled button*/
.btn-whitelabel {
    background-color: var(--primary-color, rgb(0, 123, 255)) !important;
    border-color: var(--primary-color, rgb(0, 123, 255)) !important;
}


.iti__country{
    font-size: 0.8rem !important;
}

.small-font-size {
    font-size: 0.7rem !important;
}

ul.nav.custom-nav-pills.nav-justified {
    flex-wrap: nowrap !important;
}