/*
    Stylesheet Name : Yes Store 2023
    Created on      : August    18, 2023, 09:03:10 AM
    Last edited on  : September 08, 2023, 11:58:29 PM
    Author          : YTL Digital Design [AL]
*/


/* Default CSS */

html,
body {
    height: 100%;
}

body {
    background-color: #ffffff;
    color: #000;
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 24px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0 0 12px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

h1 {
    font-weight: 700;
}

h2 {
    font-weight: 700;
}

h3 {
    font-weight: 700;
}

h4 {
    font-size: 100%;
    font-weight: 700;
}

h5 {
    font-size: 90%;
}

h6 {
    font-size: 70%;
}

p {}

hr {
    border-color: #D9D9D9;
}

label {
    cursor: pointer;
}

label[readonly] {
    cursor: default;
}

caption {
    margin: 0 0 12px;
    padding: 0;
}

a,
a:link,
a:visited,
a:active {
    color: #FF0084;
    text-decoration: none;
}

a {
    transition: all 230ms linear;
    -moz-transition: all 230ms linear;
    -o-transition: all 230ms linear;
    -webkit-transition: all 230ms linear;
}

a:hover {
    text-decoration: none;
}

dt,
dd {
    margin: 0;
}

dd {
    margin-bottom: 7px;
    margin-left: 20px;
}

a,
.btn {
    transition: all 230ms linear;
    -moz-transition: all 230ms linear;
    -o-transition: all 230ms linear;
    -webkit-transition: all 230ms linear;
}

a.btn,
.bootom-btn,
.btn-primary {
    text-transform: uppercase;
}

a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:active:focus,
.btn:hover,
.btn:focus,
.btn:active,
.btn:active:focus {
    box-shadow: 0 0 0 transparent;
    outline: 0;
}

.btn i,
a.btn i {
    margin: 0 5px;
}

.btn.disabled,
.btn:disabled,
a.btn.disabled,
a.btn:disabled {
    cursor: not-allowed;
}

button:focus:not(:focus-visible) {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

a.btn,
.btn {
    font-size: 18px;
    font-weight: 700;
    padding: 12px 20px;
}

a.btn,
a.btn:focus,
a.btn:active,
a.btn:active:focus,
.btn,
.btn:focus,
.btn:active,
.btn:active:focus {
    background-color: transparent;
    border: 1.5px solid #D9D9D9;
    border-radius: 12px;
    color: #000;
}

a.btn:hover,
.btn:hover,
a.btn.selected,
.btn.selected {
    border-color: #2F3BF5;
    font-weight: 700 !important;
    box-shadow: 0px 7.98px 15.96px 0px #0000001A;
    border-width: 2px;
}

a.btn.selected,
.btn.selected,
a.btn.selected:focus,
.btn.selected:focus {
    /* box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); */
    font-weight: 600;
}

a.btn.btn-primary,
a.btn.btn-primary:focus,
a.btn.btn-primary:active,
a.btn.btn-primary:active:focus,
.btn.btn-primary,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary:active:focus {
    background-color: #FF0084;
    color: #FFF;
}

a.btn.btn-primary:hover,
.btn.btn-primary:hover {
    background-color: #FF0084;
}

a.btn-sm,
.btn-sm {
    font-size: 16px;
    padding: 4px 10px;
}

a.btn-noBorder,
.btn-noBorder {
    border: 0;
}

a.btn-radius,
a.btn.btn-radius:focus,
a.btn.btn-radius:active,
a.btn.btn-radius:active:focus,
.btn-radius,
.btn.btn-radius:focus,
.btn.btn-radius:active,
.btn.btn-radius:active:focus {
    border-radius: 70px;
}

a.btn.btn-atc,
a.btn.btn-atc:focus,
a.btn.btn-atc:active,
.btn.btn-atc,
.btn.btn-atc:focus,
.btn.btn-atc:active {
    background-color: transparent;
    color: #888;
}

a.btn.btn-atc.added,
.btn.btn-atc.added,
a.btn.btn-atc:active:focus,
.btn.btn-atc:active:focus {
    background-color: #FF0084;
    border-color: #FF0084;
    color: #FFF;
}

a.btn.btn-atc:hover,
.btn.btn-atc:hover {
    background-color: #D00072;
    border-color: #D00072;
    color: #FFF;
}

a.btn.btn-atc i,
.btn.btn-atc i {
    margin-right: 20px;
}

@media (min-width: 567px) {

    a.btn,
    .btn {
        padding: 12px 40px;
    }
}

ul,
ol {
    margin: 0 0 15px;
    padding: 0 0 0 20px;
}

ul li,
ol li {
    margin: 0 0 5px;
    padding: 0;
}

pre {
    margin: 0 0 15px;
}

strong {
    font-weight: 600;
}

.greyed {
    color: #888;
}

.text-pink {
    color: #FF0084;
}

.text-blue {
    color: #2F3BF5;
}

p.panel-sub {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
    margin-bottom: 0;
}

.span-check {
    background-color: #38BA91;
    border-radius: 100%;
    color: #FFF;
    display: inline-block;
    height: 24px;
    text-align: center;
    width: 24px;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.mt-40 {
    margin-top: 40px !important;
}


/* Custom Styling for Yes Store 2023 Theme */


/* Layer Overlay */

.layer-overlay {
    background: rgba(0, 0, 0, 0.7);
    background-size: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 10000;
    transition: all 230ms linear;
}

.layer-overlay:after {
    background: url('https://cdn.yes.my/site/wp-content/themes/yes-twentytwentyone/assets/images/img-loading.svg') center center no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: 200px;
    width: 200px;
    z-index: 1056;
}

body.show-overlayLoad .layer-overlay {
    background: rgba(0, 0, 0, 0.7);
}

body.show-overlay,
body.show-overlayLoad {
    overflow: hidden;
}

body.show-overlay .layer-overlay,
body.show-overlayLoad .layer-overlay {
    opacity: 1;
    visibility: visible;
    z-index: 1055;
}


/* Layer Page */

.layer-page {}


/* Layer Header */

.layer-page header.layer-header {}


/* Layer Footer */

.layer-page footer.layer-footer {}


/* Layer Body */

.layer-page .layer-body {}

.layer-body main.layer-main {
    /* border-bottom: 1px solid #ffffff;
    margin: 0 0 190px;
    padding: 0 0 60px; */
    border-bottom: 1px solid #f4f2f3;
    padding: 0 0 220px;
    BACKGROUND: #f4f2f3;
}


/* Standard Form */

.standardForm {}

.standardForm .form-group,
.standardForm .form-group-inline {
    margin: 0 0 20px;
}

.standardForm .form-group label {
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin: 0 0 7px;
}

.standardForm .form-group label sup {
    color: #FF0084;
}

.standardForm .span-errMsg {
    color: #FE0003;
    display: inline-block;
    margin: 5px 0 0;
    font-weight: 500;
}


.standardForm .form-group .form-control,
.standardForm .form-group .form-select,
.standardForm .form-group-inline .form-control {
    border-color: #888;
    /* border-color: #94B0E0; */
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    padding: 12px 15px;
}

.standardForm .form-group-inline {
    display: flex;
    align-items: center;
}

.standardForm .form-group-inline label {
    margin: 0 15px 0 0;
    white-space: nowrap;
}

.standardForm .btn-submit {
    border-radius: 70px;
    color: #888;
    padding-top: 16px;
    padding-bottom: 16px;
}

.standardForm .btn-submit:hover {
    background-color: #FF0084;
    color: #FFF;
}

.standardForm .form-group .input-group {}

.standardForm .input-group .btn,
.standardForm .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    background-color: #FFF;
    border-color: #888;
    border-radius: 8px;
    color: #888;
    margin-left: -5px;
}

.standardForm .input-group .btn:hover,
.standardForm .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):hover {
    background-color: transparent;
    border-color: transparent;
    /* color: #000; */
}

.standardForm .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-right: 0;
}

.standardForm .form-group .input-group-numbers {
    display: flex;
    justify-content: space-between;
}

.input-group-numbers .form-control.number {
    max-width: 50px;
    padding: 14px 10px;
    text-align: center;
}

.standardForm .form-check {
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.standardForm .form-check input.form-check-input {}

.standardForm .form-check label.form-check-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 0;
    padding: 0 0 0 35px;
    position: relative;
}

.standardForm .form-check label.form-check-label a {
    color: #2F3BF5;
}

.standardForm .form-check label.form-check-label:before {
    border: 2px solid #2F3BF5;
    border-radius: 100%;
    color: #FFF;
    content: '';
    display: inline-block;
    height: 24px;
    line-height: 22px;
    position: absolute;
    text-align: center;
    left: 0;
    top: 0px;
    width: 24px;
    transition: all 100ms linear;
}

.standardForm .form-check input.form-check-input:checked~label.form-check-label:before {
    background-color: #2F3BF5;
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-size: 14px;
    font-weight: 900;
}

.input-feild-common {
    font-size: 20px;
    line-height: 27px;
    padding: 14px 20px;
    border: 1px solid #2F3BF5 !important;
    
    border-radius: 8px !important;
}

.input-feild-common:focus{
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
}


.input-sperator {
    padding: 8px;
    background: none !important;
    font-weight: 700;
    margin-left: 0 !important;
    font-size: 20px !important;
    font-weight: 700;
    color: #000 !important;
}


@media (min-width: 992px) {
    .standardForm .form-group label {
        font-size: 16px;
        font-weight: 600;
        line-height: 27px;
        margin: 0 0 10px;
    }

    .standardForm .form-group .form-control,
    .standardForm .form-group .form-select,
    .standardForm .form-group-inline .form-control {
        font-size: 18px;
        line-height: 27px;
        padding: 14px 20px;
    }

    .standardForm .form-check label.form-check-label {
        font-size: 16px;
        line-height: 27px;
        margin-bottom: 0;
        padding-left: 44px;
    }

    .standardForm .form-check label.form-check-label:before {
        top: 3px;
    }

    .input-group-numbers .form-control.number {
        max-width: 70px;
    }
}


/* Layer Summary Float */

.layer-summaryFloat {}

.layer-summaryFloat .layer-sfBody {
    padding: 10px;
    position: relative;
}

.layer-summaryFloat .layer-sfBody:before {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 18px;
    content: '';
    display: none;
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;
    z-index: -1;
}

.layer-summaryFloat .layer-sfDetails {
    background-color: #FFF;
    border: 1px solid #94B0E0;
    border-radius: 18px;
    /* box-shadow: 1px 2px 5px #D9D9D9; */
    box-shadow: -12px 8px 12px 0px rgba(0, 0, 0, 0.15);
    padding: 10px 25px;
}

.layer-sfDetails h4 {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 5px;
}

.layer-sfDetails p.panel-amount {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 0;
}

.layer-sfDetails p.panel-amount span.span-large {
    font-size: 28px;
    font-weight: 700;
    line-height: 42px;
}

.layer-sfDetails .greyed p.panel-amount {
    color: #888;
}

.layer-sfDetails button.btn {
    border-radius: 70px;
}

@media (min-width: 992px) {
    .layer-summaryFloat .layer-sfDetails {
        padding: 10px 40px;
    }

    .layer-sfDetails h4 {
        font-size: 24px;
        line-height: 36px;
    }

    .layer-sfDetails p.panel-amount {
        font-size: 18px;
        font-weight: 600;
        line-height: 27px;
    }

    .layer-sfDetails p.panel-amount span.span-large {
        font-size: 38px;
        font-weight: 700;
        line-height: 57px;
    }
}


/* Layer Section */

.layer-section {
    /* margin: 0 0 60px; */
    padding: 40px 0 0;
}

.section-selectPlanType {
    padding-left: 0;
}

.section-simtype {
    padding: 40px 0 0 0;
}

.layer-section:last-of-type {
    /* margin-bottom: 0; */
}

.layer-section .heading-sectionTitle {
    font-size: 16px;
    line-height: 18px;
    font-weight: 800;
    margin-bottom: 15px;
}

.layer-section p.panel-sectionSub {
    color: #888;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.panel-sectionSub a {
    color: #2F3BF5;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .layer-section .heading-sectionTitle {
        font-size: 16px;
        line-height: 16px;
        font-weight: 700;
    }

    .layer-section p.panel-sectionSub {
        font-size: 14px;
        line-height: 16px;
        color: #000;
    }
}

@media (min-width: 1200px) {
    .layer-section {
        /* margin-left: 8.33333333%;
        width: 83.33333333%; */
    }
}


/* Section Head Wizards */

.layer-section.section-headWizards {
    background-color: #FFF;
    border-bottom: 1px solid #D9D9D9;
    /* margin-bottom: 0; */
    padding-top: 0;
}

.section-headWizards .navbar {
    padding: 15px 0;
}

.section-headWizards h1.heading-deviceTitle {
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 0;
}

.section-headWizards ul.listing-headWizards {
    font-size: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.listing-headWizards li {
    font-size: 16px;
    margin: 0;
}

ul.listing-headWizards li:last-child {
    padding-right: 0;
}

ul.listing-headWizards li a {
    color: #000;
    display: block;
    padding: 15px 0;
    position: relative;
}

ul.listing-headWizards li a:after {
    background-color: #FF0084;
    bottom: 0px;
    content: '';
    display: block;
    height: 3px;
    position: absolute;
    width: 0;
    transition: all 230ms linear;
}

ul.listing-headWizards li a:hover::after,
ul.listing-headWizards li a.active:after {
    width: 100%;
}

@media (min-width: 768px) {
    .section-headWizards .navbar {
        padding-top: 0;
        padding-bottom: 0;
    }

    ul.listing-headWizards li {
        display: inline-block;
        padding-right: 70px;
    }

    .layer-deviceConfig .layer-dcRRP {
        width: 70%;
    }
}


/* Section Device Config */

.layer-section.section-deviceConfig {
    background-color: #FFF;
    margin-bottom: 0;
    padding: 40px 0;
}

.section-deviceConfig .layer-dcSelectedColor .slick-slide {
    height: auto;
    margin: 0 auto;
}

.layer-dcSelectedColor .layer-deviceImages {
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: calc(100vh - 280px);
    display: block;
    align-items: center;
    justify-content: center;
}

/* Prevent Slick slider styles from interfering with Alpine.js slider */
.layer-deviceImages.alpine-slider {
    display: flex !important;
}

.layer-deviceImages.alpine-slider .slick-track,
.layer-deviceImages.alpine-slider .slick-list,
.layer-deviceImages.alpine-slider .slick-slide {
    display: none !important;
}

/* Ensure Alpine.js slider wrapper is visible */
.layer-deviceImages.alpine-slider .slider-wrapper {
    display: flex !important;
    width: 100%;
}

.layer-deviceImages.alpine-slider .slider-slide {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.layer-deviceImages.alpine-slider .slider-slide img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.layer-deviceImages .slider-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    will-change: transform;
    position: relative;
    align-items: stretch;
}

.layer-deviceImages .slider-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
    min-height: 300px;
    overflow: visible;
}

.layer-deviceImages .slider-slide img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    position: relative;
    visibility: visible;
    opacity: 1;
}

/* Ensure images are visible even if parent has display issues */
.layer-deviceImages .slider-slide img.img-fluid {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    min-height: 300px;
    max-height: calc(100vh - 280px);
}

.layer-deviceImages .slick-track {
    width: unset;
}

.layer-deviceImages .layer-deviceImage {
    /* width: 200px !important; */
}

.layer-deviceImages-plan .layer-deviceImage{
    width: 100% !important;
    height: auto !important;
    max-width: 275px !important;
    object-fit: contain;
    min-width: auto !important;
    display: block;
    margin: auto;
}

.layer-deviceImages-plan .layer-deviceImage img {
    width: 100% !important;
    height: auto !important;
    max-width: 300px !important;
    object-fit: contain;
    min-width: auto !important;
    display: block;
    margin: auto;
    border-radius: 16px;
}

.layer-deviceImage img {
    margin: auto;
    /* height: 300px; */
}

.device-img-block {
    position: sticky;
    top: 100px;
    z-index: 0;
    width: 100%;
}

/* Adjust top offset based on navigation bar height */
@media screen and (max-width: 991px) {
    .device-img-block {
        top: 90px;
    }
}

@media screen and (max-width: 768px) {
    .device-img-block {
        top: 80px;
    }
}

@media screen and (max-width: 480px) {
    .device-img-block {
        top: 70px;
    }
}

/* Desktop sizing - ensure images scale properly */
@media screen and (min-width: 1141px) {
    .layer-deviceImages {
        min-height: 400px;
        max-height: calc(100vh - 280px);
    }

    .layer-deviceImages .slider-slide {
        min-height: 400px;
        padding: 30px;
    }

    .layer-deviceImages .slider-slide img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

.section-deviceConfig .layer-deviceConfig {
    font-size: 18px;
}

.layer-deviceConfig p.panel-sub {
    color: #888;
    font-size: 18px;
}

.layer-deviceConfig h3.heading-deviceTitle {
    font-size: 22px;
    line-height: 33px;
    margin-bottom: 0;
    font-weight: 800;
}

.layer-deviceConfig .layer-dcRRP {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 18px;
    /* margin: 0 0 20px; */
    margin: 5px 0 5px;
}

.layer-dcRRP p {
    margin-bottom: 0;
}

.layer-dcRRP p.panel-pricePerMonth {
    font-size: 20px;
    font-weight: 500;
}

.layer-dcRRP p.panel-pricePerMonth strong {
    font-weight: 700;
}

.layer-dcRRP p.panel-rrp {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #888;
    font-weight: 400;
    margin-right: 0px;
}

.layer-dcRRP .panel-stocks {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #888;
    font-weight: 400;
    /* margin: 0 0 20px; */
    margin: 0 0 0px;
    margin-left: auto;
}

.layer-dcRRP .panel-stocks.oos {
    color: #FF0084;
}

/*hn*/
.l-more-link {
    margin: 0 0 40px;
    padding: 0;
}

.l-more-link a {
    text-decoration: underline;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: #2F3BF5;
    text-transform: uppercase;
}
/*hn*/

.layer-deviceConfig .layer-dcColors {
    margin: 0 0 40px;
}

.layer-dcColors p {
    margin-bottom: 0;
}

p.panel-dcTitle {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 15px;
}

p.panel-dcTitle span {
    font-weight: 700;
}

.layer-dcColors p.panel-dcTitle span.span-new {}

.layer-dcColors ul.listing-dcColorsSelect {
    border: 0;
    display: flex;
    justify-content: space-evenly;
    font-size: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.listing-dcColorsSelect li {
    display: inline-block;
    font-size: 16px;
    margin: 0;
}

ul.listing-dcColorsSelect li button.nav-link {
    /* border: 1px solid transparent; */
    border: 2px solid #C9D7EF;
    border-radius: 100%;
    display: block;
    height: 40px;
    padding: 5px;
    width: 40px;
}

ul.listing-dcColorsSelect li button.nav-link:hover,
ul.listing-dcColorsSelect li button.nav-link.active {
    border-color: #2F3BF5;
}

ul.listing-dcColorsSelect li button.nav-link span {
    background-color: #FFF;
    border-radius: 100%;
    display: block;
    height: 28px;
    width: 28px;
}

.layer-deviceConfig .layer-dcStorages {
    margin: 0 0 40px;
}

.info-note {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 19.8px;
    letter-spacing: 0%;
    color: #2B2B2B;
}

.layer-deviceConfig .layer-subscription {
    margin: 0 0 30px;
}

.layer-deviceConfig .layer-pref-plan {
    margin: 0 0 30px;
}

.layer-deviceConfig .layer-cont-period {
    margin: 40px 0 40px 0;
}


/* hn 24/10/24*/
.layer-action-sec {
    background-color: #F7F8F9;
    /* margin: 0 0 40px; */
    padding: 25px 20px 10px;
    margin-left: -20px;
    /* border:1px solid #000; */
}

.layer-action-inner-m {
    width: 75%;
}

.layer-action-inner {
    position: relative;
    display: flex !important;
    align-items: center;
    border: 2px solid #C9D7EF;
    background-color: #fff;
    padding: 15px;
    border-radius: 15px;
    margin: 0 0 15px;
}

/* .action-slider .layer-action-inner:nth-child(3){
    margin-left: 0px;
} */
.layer-action-inner .image-section {
    margin: 0 15px 0 0;
    padding: 0;
}

.layer-action-inner .image-section img {
    height: 40px;
}

.layer-action-inner .action-content-section {
    display: flex;
    flex-direction: column;
}

.layer-action-inner .action-content-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 22.36px;
    letter-spacing: -0.019em;
    text-align: left;
    margin: 0;
}

.layer-action-inner .action-content-section p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    margin: 0;
}

.action-slider .slick-prev {
    left: unset;
    right: 50px;
}

.action-slider .slick-next {
    right: 20px;
}

.action-slider .slick-next,
.slick-prev {
    top: -30%;
}

.action-slider .prev-arrow svg,
.next-arrow svg {
    width: 30px;
    height: 30px;
    color: #888888;
    background-color: #fff;
    border-radius: 50px;
}

.action-slider .slick-prev:before,
.slick-next:before {
    color: #888888;
    /* background-color: #fff;
    border: 1px solid #E8E9ED; */
}

.info-link-sec {
    margin: 20px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.019em;
    text-align: left;
}

.info-link-sec a {
    text-decoration: underline;
    color: #2F3BF5;
}

.user-details-sec {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 15px;
    margin: 20px 0;
    width: 75%;
}

.left-detail-sec h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.011em;
    text-align: left;
    color: #000;
    margin: 0 0 10px;
}

.left-detail-sec h3 span {
    color: #2F3BF5;
}

.left-detail-sec p {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.019em;
    text-align: left;
    color: #000;
    margin: 0;
}

.info-content-sec {
    position: relative;
    background-color: #fff;
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #CBCBCB;
    border-radius: 15px;
}

.info-content-sec .info-head-sec {
    display: flex;
    align-items: center;
}

.info-content-sec .info-head-sec h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    color: #2F3BF5;
    width: 80%;
}

.info-content-sec .info-icon-sec {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.info-content-sec .info-icon-sec img {
    margin-right: 5px;
}

.info-content-sec .info-icon-sec a {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0%;
    vertical-align: middle;
    text-decoration: none;
    color: #000;
}


.info-content-sec ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.info-content-sec ul li {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    display: flex;
    align-items: center;
    margin: 5px 0;
    padding: 5px 0;
}

.info-content-sec ul li span {
    background-color: #2F3BF5;
    border-radius: 100%;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    width: 25px;
    min-width: 25px;
    height: 25px;
    line-height: 26px;
    margin-right: 10px;
}

.info-content-sec .close-sec {
    margin: 20px 0 0;
    padding: 0px;
    text-align: center;
}

.info-content-sec .close-sec a {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    color: #000;
}

.section-simtype .layer-selectionButtons .btn {
    background-color: #fff;

}

.section-simtype .layer-selectionButtons .btn.selected,
.section-simtype .layer-selectionButtons .btn:hover {
    border-color: #2F3BF5;
}

.layer-action-payment-plan-sec {
    background-color: #fff;
    margin: 0 0 40px;
    padding: 15px;
}


.layer-action-payment-plan-inner-m {
    width: 100%;
}

.layer-action-payment-plan-inner {
    position: relative;
    /* display: flex !important;
    align-items: center; */
    border: 2px solid #C9D7EF;
    background-color: #fff;
    padding: 15px 30px;
    border-radius: 15px;
    margin: 0 0 15px;
}

.layer-action-payment-plan-inner .image-section {
    margin: 0 0 0px 0;
    padding: 0 15px 0 0;
    min-width: 35%;
}

.layer-action-payment-plan-inner .image-section img {
    display: block;
    width: auto;
    height: 40px;
}

.layer-action-payment-plan-inner .action-content-section {
    display: flex;
    flex-direction: column;
}

.layer-action-payment-plan-inner .action-content-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 22.36px;
    letter-spacing: -0.019em;
    text-align: left;
    margin: 0 0 5px;
}

.layer-action-payment-plan-inner .action-content-section p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    margin: 0;
}


/* end hn*/

.layer-dcStorages p.panel-dcTitle {}

.layer-dcStorages .layer-selectionButtons {
    gap: 0px 15px;
}

.layer-selectionButtons button.btn {
    font-size: 16px;
    line-height: 24px;
    margin: 0 20px 0 0;
    font-weight: 400;
}

.layer-dcStorages .layer-selectionButtons button.btn {
    font-size: 20px;
    line-height: 30px;
    margin: 0 15px 15px 0;
}

.layer-dcStorages .layer-selectionButtons button.btn.selected,
.layer-dcStorages .layer-selectionButtons button.btn:hover {
    border-color: #2F3BF5 !important;
}

.mobile-container .yes_toggle {
    padding: 0 !important;
    z-index: 100000 !important;
    border: none;
}

.layer-selectionButtons button.btn:last-child {
    margin-right: 0;
}

@media (min-width: 768px) {
    .section-deviceConfig .layer-dcSelectedColor {
        margin-bottom: 0;
    }

    .layer-deviceConfig h3.heading-deviceTitle {
        font-size: 22px;
        line-height: 33px;
        font-weight: 800;
    }

    .layer-deviceConfig .layer-dcRRP {
        font-size: 16px;
        line-height: 24px;
    }

    p.panel-dcTitle {
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: 0%;

    }

    .layer-dcColors ul.listing-dcColorsSelect {
        justify-content: space-between;
    }

    ul.listing-dcColorsSelect li button.nav-link {
        /* height: 52px;
        width: 52px; */
        height: 47.86943817138672px;
        width: 47.86943817138672px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    ul.listing-dcColorsSelect li button.nav-link span {
        height: 38px;
        width: 38px;
        min-width: 38px;
    }

    .layer-dcStorages .layer-selectionButtons button.btn {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
    }


}


/* Layer Slider Control */

.layer-sliderControl {
    display: flex;
    align-items: center;
    justify-content: center;
}

.layer-sliderControl button.btn {
    background-color: transparent;
    border: 0;
    color: #292D32;
    padding: 5px 10px;
}

.layer-sliderControl button.btn:hover,
.layer-sliderControl button.btn:focus,
.layer-sliderControl button.btn:active,
.layer-sliderControl button.btn:active:focus {
    border: 0;
}

.layer-sliderControl button.btn-previous {}

.layer-sliderControl button.btn-next {}

.layer-sliderControl .layer-sliderDots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 15px;
}

.layer-sliderDots .slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: #C0B6B9;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.layer-sliderDots .slider-dot:hover {
    background-color: #999;
    transform: scale(1.2);
}

.layer-sliderDots .slider-dot.active {
    background-color: #000;
    width: 12px;
    height: 12px;
}

.layer-sliderControl button.btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.layer-sliderDots ul.slick-dots {
    bottom: auto;
    font-size: 0;
    margin: 0;
    padding: 0;
    position: relative;
}

.layer-sliderDots ul.slick-dots li {
    display: inline-block;
    font-size: 16px;
    height: 15px;
    list-style-type: none;
    margin: 0 10px;
    padding: 0;
    width: 15px;
}

.layer-sliderDots ul.slick-dots li button {
    background-color: #C0B6B9;
    border-radius: 100%;
    height: 100%;
    width: 100%;
}

.layer-sliderDots ul.slick-dots li button:before {
    display: none;
}

.layer-sliderDots ul.slick-dots li.slick-active button {
    background-color: #000;
}

@media (min-width: 992px) {
    .layer-dcColors ul.listing-dcColorsSelect {
        display: block;
    }

    ul.listing-dcColorsSelect li {
        margin-right: 15px;
    }

    ul.listing-dcColorsSelect li:last-child {
        margin-right: 0;
    }

    .layer-action-payment-plan-inner {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr 2fr;
        align-items: center;
    }
}

@media (min-width: 1200px) {
    .layer-dcStorages .layer-selectionButtons button.btn {
        margin: 0;
    }
}


/* Section Preference */

.layer-section.section-preference {
    /* margin-bottom: 0; */
    padding-top: 0;
}

.section-preference .layer-prefSelect {
    background: url('../images/bg-section-preference.png') center center no-repeat;
    background-size: cover;
    padding: 60px 0;
}

.layer-prefSelect .heading-sectionTitle {
    color: #FFF;
}

.layer-prefSelect .layer-selectionButtons {
    /* border: 1px solid #FFF; */
    border-radius: 8px;
    display: inline-block;
    font-size: 0;
}

.layer-prefSelect .layer-selectionButtons button.btn {
    background-color: #FFF;
    border-color: #FFF;
    border-radius: 8px;
    color: #000;
    font-size: 15px;
    line-height: 24px;
    margin-right: 0;
    padding: 12px;
}

.layer-prefSelect .layer-selectionButtons button.btn:hover,
.layer-prefSelect .layer-selectionButtons button.btn.deselect:hover,
.layer-prefSelect .layer-selectionButtons button.btn.selected {
    background-color: #FFF;
    /* box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); */
    color: #000;
}

.layer-prefSelect .layer-selectionButtons button.btn.deselect {
    background-color: transparent;
    color: #FFF;
}

.section-preference .layer-prefSelected {
    background-color: #FFF;
    padding: 40px 0;
}


@media (min-width: 768px) {
    .layer-prefSelect .layer-selectionButtons button.btn {
        font-size: 18px;
        line-height: 27px;
        margin-right: 10px;
    }

    .layer-prefSelect .layer-selectionButtons button.btn:last-child {
        margin-right: 0;
    }
}


/* Section Select Contracts */

.layer-section.section-selectContracts {
    padding-top: 40px;
}

.section-selectContracts .layer-contractTypes {
    margin-bottom: 60px;
}

.layer-contractTypes .layer-contractCard {
    background-color: #FFF;
    border: 1px solid #94B0E0;
    border-radius: 18px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    /* padding: 15px 30px; */
    text-align: center;
    transition: all 230ms linear;
}

.layer-contractCard .card-header {
    background-color: transparent;
    border: 0;
    padding: 30px 15px 20px;
}

.layer-contractCard .card-body {
    padding: 0 50px;
}

.layer-contractCard .card-footer {
    background-color: transparent;
    border: 0;
    padding: 20px 15px;
}

.layer-contractCard .heading-contractCard {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 0;
}

.layer-contractCard .panel-contractSub {
    font-size: 20px;
    line-height: 30px;
    margin: 10px 0 0;
}

.layer-contractCard .layer-contractHighlight {
    background-color: #F4F2F3;
    margin: 0 -50px 20px;
    padding: 10px 50px;
}

.layer-contractCard .layer-contractHighlight.highlighted {
    background: linear-gradient(80.92deg, #FF0084 14.97%, #4B0128 93.11%);
    color: #FFF;
}

.layer-contractHighlight p {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 8px;
}

.layer-contractHighlight p:last-of-type {
    margin-bottom: 0;
}

.layer-contractHighlight .span-lg {
    font-size: 22px;
    line-height: 33px;
}

.layer-contractHighlight .span-lg span {
    font-size: 25px;
}

.layer-contractCard p.panel-contractLight {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
}

.layer-contractCard .btn {
    border-color: #CBCBCB;
    border-radius: 70px;
    color: #CBCBCB;
    font-size: 18px;
    font-weight: 600;
    padding: 6px 40px;
}

.layer-contractCard .btn:hover,
.layer-contractCard .btn.selected {
    background-color: #FF0084;
    border-color: #FF0084;
    color: #FFF;
}


/* .layer-contractTypes .layer-contractCard:hover, */

.layer-contractTypes .layer-contractCard.selected {
    border-color: #FF0084;
    border-width: 2px;
    /* box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); */
}

.layer-contractTypes .layer-contractCard.selected {}


/* .layer-contractCard .heading-contractCard {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 4px;
    text-align: center;
}

.layer-contractCard .panel-recommended {
    font-size: 20px;
    font-weight: 500;
    line-height: 43px;
    margin-bottom: 18px;
    text-align: center;
}

.layer-contractCard ul.listing-contractCard {}

ul.listing-contractCard li {
    font-size: 20px;
    line-height: 43px;
} */

.section-selectContracts .layer-contractPeriod {}

.layer-contractPeriod .heading-sectionTitle {}

.layer-contractPeriod .layer-selectionButtons {}


/* Section Plan Selection */

.layer-section.section-planSelection {
    background-color: #fff;
    padding: 0 15px 0 0;
    min-height: 330px;
    max-height: 450px;
}

.plans-block .col-md-3 {
    width: 100%;
    max-width:320px;
}

/* .section-planSelection .layer-planSelection {
    overflow: hidden !important;
}
.section-planSelection .layer-planSelection:hover{
    overflow-x: scroll !important;
} */

.layer-planSelection .nav-tabs {
    border: 0;
    display: block;
    margin: 0 0 20px;
    /* overflow-x: auto; */
    /* overflow-x: auto; */
}

.layer-planSelection .nav-tabs button.nav-plan {
    background-color: #fff;
    border: 1px solid #CBCBCB;
    border-radius: 12px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.15);
    padding: 20px 20px 0;
    text-align: center;
    min-width: 170px;
    width: 100%;
    transition: all 230ms linear;
}

.layer-planSelection .nav-tabs button.nav-plan:hover,
.layer-planSelection .nav-tabs button.nav-plan.active {
    background-color: #FFF;
    border-color: #2F3BF5;
    border-width: 2px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
    color: #000;
}

.layer-planSelection .nav-tabs button.nav-plan span {
    display: block;
    font-weight: 600;
}

.layer-planSelection .nav-tabs button.nav-plan span.span-planName {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 5px;
}

.layer-planSelection .nav-tabs button.nav-plan span.span-planPrice {
    font-size: 42px;
    line-height: 63px;
    margin-bottom: 10px;
}

.layer-planSelection .nav-tabs button.nav-plan span.span-planCycle {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

.layer-planSelection .nav-tabs button.nav-plan .span-planName {
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
    letter-spacing: -0.019em;
    text-align: left;
    margin-bottom: 10px;
    color: #FF0084;
}

.layer-planSelection .nav-tabs button.nav-plan .span-planPrice {
    font-size: 40px;
    line-height: 30px;
    font-weight: 800;
    margin-bottom: 10px;
    text-align: left;
    display: flex;
}

.layer-planSelection .nav-tabs button.nav-plan .span-planPrice sup {
    font-size: 14px;
    font-weight: 800;
    line-height: 30px;
    vertical-align: top;
    padding-right: 4px;
}

.layer-planSelection .nav-tabs button.nav-plan .span-planCycle {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 30px !important;
    display: unset;
    margin-left: 5px;
}

.layer-planSelection .nav-tabs button.nav-plan .span-planCycle sub {
    font-size: 14px;
    font-weight: 800;
    line-height: 30px;
    vertical-align: top;
}

.layer-planSelection .tab-content {
    background-color: #FFF;
    border-radius: 18px;
    padding: 30px;
}

.layer-planSelection .tab-content .tab-pane {}

.layer-planSelection ul.listing-planDetails {
    margin: 0;
    padding: 0;
}

ul.listing-planDetails li {
    font-size: 16px;
    line-height: 35px;
    list-style-type: none;
    padding: 0 0 0 35px;
    position: relative;
}

ul.listing-planDetails li:before {
    border: 2px solid #2F3BF5;
    border-radius: 100%;
    color: #2F3BF5;
    content: "\f00c";
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-size: 14px;
    font-weight: 900;
    height: 24px;
    left: 0px;
    line-height: 22px;
    position: absolute;
    text-align: center;
    top: 5px;
    width: 24px;
}

/*hn*/
.plan-detail-section ul.listing-planDetails li {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    list-style-type: none;
    padding: 0 0 0 20px;
    position: relative;
    text-align: left;
}

.plan-detail-section ul.listing-planDetails li:before {
    border: 0px solid #2F3BF5;
    border-radius: 100%;
    color: #2F3BF5;
    content: "\2022";
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 5px;
    height: 5px;
    line-height: 26px;
}

.contract-period-section {
    margin: 30px 0 0;
    padding: 0;
}

.contract-period-section h3 {
    font-size: 17.36px;
    font-weight: 700;
    line-height: 21.16px;
    letter-spacing: -0.35835182666778564px;
    text-align: left;
    color: #000;
    margin: 0;
    padding: 0;
}

.contract-period-option.d-flex {
    gap: 0 15px;
}

.contract-period-option .form-check label {
    font-size: 16px;
    font-weight: 400;
    line-height: 19.5px;
    letter-spacing: -0.35835182666778564px;
    text-align: left;
    margin: 0 0 0px;
}

.contract-period-option .form-check input[type=checkbox] {
    position: relative;
    border: 2px solid #656565;
    border-radius: 50px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0px 8px 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 24px;
    width: 24px;
    -webkit-appearance: none;
}

.contract-period-option .form-check input[type=checkbox]:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    border: solid #fff;
    border-width: 5px;
    margin: 0px 0px 0 0px;
    transform: rotate(90deg) translate(-50%, -50%);
    z-index: 2;
    border-radius: 50px;
    background: #fff;
}

.contract-period-option .form-check input[type=checkbox]:checked {
    background-color: #2F3BF5;
    border-color: #2F3BF5;
    opacity: 1;
    padding: 5px;
}


/* new css start */
.bottom-section {
    bottom: 0;
    position: fixed;
    text-align: center;
    z-index: 10;
    left: 0;
    right: 0;
}

.bottom-cart {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 7px 44px 6px rgba(0, 0, 0, .1);
    margin: 0 0 10px;
    padding: 20px;
    gap: 20px;
}

.left_detail {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 30px;
}

.left_detail-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.left_detail-col {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.right_detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.panel-amount {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

.rm_p_large {
    font-size: 32px;
    font-weight: 700;
}

.border_right {
    border-right: 2px solid #FF0084;
}

.bootom-btn {
    border-radius: 30px !important;
    min-width: 250px;
}

.pay_mth {
    font-weight: normal;
    margin-bottom: 0;
    white-space: nowrap;
    font-weight: 500;
}

.sv_m {
    font-size: 14px;
}

.ph_n {
    font-size: 14px;
}

.rm_mt {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.rm_mt small {

    font-weight: normal !important;
}

/* .rm_mt .rm_pr{
    font-size: 18px;
} */

.detail-box.text-left {
    text-align: left;
    max-width: 300px;
    width: 300px;
    margin-right: 15px;

}

.detail-box.text-right {
    text-align: right;
}

.add__data {
    width: 300px;
}

.add__data p {
    text-align: left;
}

.pr-30 {
    padding-right: 30px;
}

.detail-box b {
    white-space: nowrap;
}

.custom-container {
    max-width: 1320px !important;
}

.loop_data {
    display: flex;
    /*
    justify-content: space-between; */
    gap: 0px;
    width: 100%;
}

@media screen and (max-width:1140px) {
    .layer-deviceImages {
        min-height: 320px;
        max-height: calc(100vh - 330px);
    }

    .layer-deviceImages .slider-slide {
        min-height: 320px;
        padding: 15px;
    }

    .layer-deviceImages .slider-slide img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .flex_layout .left_detail-inner,
    .flex_layout .right_detail_inner {
        width: 50%;
        padding: 0 10px;
    }
    .flex_layout .right_detail_inner {
        text-align: end;
    }

    .bootom-btn {
        /* min-width: 100%; */
        min-width: fit-content;
        padding-right: 2.5rem;
        padding-left: 2.5rem;
        border-radius: 0;
    }

    .right_button {
        width: 100%;
    }

    .bottom-cart {
        padding: 0;
        flex-direction: column;
    }

    .left_detail {

        flex-direction: column;
    }

    .mobile-none {
        display: none;
    }

    .right_detail {

        flex-direction: column;
    }

    .m_rt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        width: 100%;
    }

    .bottom-cart {
        margin-bottom: 0;
        margin-left: -10px;
        margin-right: -10px;
        gap: 0;
        padding: 8px 16px;
    }


    .mobile-d-none {
        display: none;
    }

    .bottom-cart .left_detail {
        padding: 10px 20px;
        background: #CBCBCB;
        border-radius: 10px;
        margin: 5px;
    }

    .bottom-cart .right_detail {
        padding: 10px;
        box-shadow: none;
        /* box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .2); */
    }

    .loop_data {
        flex-direction: column;
        padding: 10px;
    }

    .detail-box .rm_subtitle {
        color: #000 !important;
        font-weight: 400 !important;
    }

    .detail-box p {
        font-weight: 400 !important;
    }

    .detail-box.text-right {
        text-align: left;
    }

    .left_detail-inner {
        align-items: unset;
        text-align: left;
    }

    .bottom-cart .flex_layout {
        display: flex;
        width: 100%;
        margin-bottom: 20px;
        justify-content: space-between;
        align-items: center;
        padding: 10px 5px 0;
    }

    .bottom-cart .left_detail-inner .pay_mth {
        font-size: 12px;
    }

    .bottom-cart .right_detail_inner .pay_mth {
        font-size: 12px;
    }

    .bottom-cart .left_detail-inner .panel-amount {
        font-size: 13px;
        margin-bottom: 0;
    }

    .bottom-cart .rm_p_large {
        font-size: 23px;
    }

    .bottom-cart .right_detail_inner .panel-amount {
        font-size: 13px !important;
        margin-bottom: 0;
    }

    .bottom-cart .right_detail_inner .rm_p_large {
        font-size: 23px;
    }
}

#left_detail_section {
    margin-top: -25px;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height .25s ease-in;
}

.show_detail_section {
    max-height: 100% !important;
    overflow: visible !important;
    transition: max-height .25s ease-in !important;
}

@media screen and (min-width:1141px) {
    .desktop-none {
        display: none;
    }

    #left_detail_section {
        margin-top: 0px !important;
        max-height: none !important;
    }

}

@media screen and (max-width:1141px) {
    .data_accessorie {
        display: block;
        transition: .25s ease-in !important;
    }
}

/* ----------------------------- */

.show_sf_accessorie_details {
    display: block !important;
}

.data_accessorie {
    display: none;
}

.data_accessorie {
    width: 100%;
}

.loop_data_accessorie {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    gap: 60px;
    width: 100%;
}


.detail-box .plus_icon {
    font-weight: 900;
    color: #FF0084;
    margin-right: 4px;
    font-size: 20px;
}

.detail-box .rm_subtitle {
    color: #888888;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.detail-box p {
    font-weight: 700;
}


.collpase__btn {
    position: absolute;
    right: 48%;
    top: -28px;
    padding: 2px 20px;
    background: #fff;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
}


.openSfDeatis img {
    transform: rotate(180deg);
}


/*hn*/

@media (min-width: 768px) {

    /* .layer-planSelection .nav-tabs
    {
        overflow-x: auto;
    } */

    .layer-planSelection .nav-tabs button.nav-plan {
        min-width: initial;
    }

    .layer-planSelection .tab-content {
        padding-left: 60px;
        padding-right: 60px;
    }
}



/* Layer Float Cart */

.layer-floatCart {
    padding: 20px;
}

.layer-floatCart:before {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 18px;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;
    z-index: -1;
}

.layer-floatCart .layer-floatCartItem {
    width: 450px;
}

.layer-floatCartItem .toast-body {
    padding: 20px 10px 0 20px;
}

.layer-floatCartItem .toast-body img.img-cartItem {}

.layer-floatCartItem .toast-body .layer-cartItemDetails {}

.layer-cartItemDetails h4 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 12px;
}

.layer-cartItemDetails p {
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 0;
}

.layer-floatCartItem .toast-body button.btn-cartRemoveItem {
    border: 0;
    padding: 0;
}


/* .layer-floatCart .layer-cartItems {}

.layer-cartItems .layer-cartItem {}

.layer-cartItem .layer-cartItemDetails {}

.layer-cartItem .layer-cartItemDetails img.img-cartItem {}

.layer-cartItem .layer-cartItemDetails h4 {}

.layer-cartItem .layer-cartItemDetails p {}

.layer-cartItem .layer-cartItemDetails .btn-cartRemoveItem {} */


/* Section Header */

.section-header {
    position: sticky;
    top: 119px;
    z-index: 1;
}

.layer-section.section-header {
    background-color: #FFF;
    border-bottom: 1.5px solid #D9D9D9;
    margin-bottom: 40px;
    padding: 16px 0;
}

.section-header .navbar-header {
    font-size: 14px;
    line-height: 21px;
    padding: 0;
}

.navbar-header .layer-back {}

.navbar-header .layer-back a {
    color: #292D32;
    display: flex;
    align-items: center;
}

.navbar-header .layer-back a i {
    font-size: 20px;
    margin-right: 10px;
}

.navbar-header .layer-myCart {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
}

.navbar-header .layer-myCart span.span-totalItems {
    background-color: #FF0084;
    border-radius: 42px;
    color: #FFF;
    display: inline-block;
    ;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 0 15px;
    padding: 0 15px;
}


/* Section Verify Info */

.layer-section.section.verifyInfo {}

/*hn verificTION*/
.choose-pre-line {
    margin-bottom: 0 !important;
}

/* 
 .choose-preferred-line {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
} */
/*
.choose-preferred-line .img-maskBanner {
    background-position: center center;
    background-size: cover;
    border: 0px solid #D9D9D9;
    border-radius: 0px;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 0 0;
    height: 100%;
    justify-content: start;
    margin-bottom: 0;
    min-height: auto;
    padding: 40px 40px 40px 60px;
} */

.choose-preferred-line .img-maskBanner img {
    border-radius: 12px;
    width: 100%;
}

.form-sec-ch-pre-l {
    margin: 0;
}

.form-sec-ch-pre-l .form-title {
    margin: 60px 0 50px;
}

.form-sec-ch-pre-l .form-title h2 {
    font-size: 30px;
    font-weight: 800;
    line-height: 30px;
    text-align: left;
}

.form-sec-ch-pre-l .form-title p {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
}

.standardForm .form-group .form-control,
.standardForm .form-group .form-select {
    border: 1px solid #E8E9ED;
    color: #000;
    font-size: 16px;
    box-shadow: 0px 2px 0 #C9D7EF;
    background-color: #fff;
    padding: 10px 15px;
}

.id-verification h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -2%;
    color: #000;
}

.id-verification p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #000;
}

.id-verification img {
    margin: 15px 0 0 10%;
    width: 50%;
}

.tac-btn-sec {
    margin: 0;
    padding: 0;
    text-align: right;
}

.tac-btn-sec a {
    font-size: 18px;
    font-weight: 700;
    line-height: 21.6px;
    letter-spacing: 0.1em;
    text-align: left;
    color: #2F3BF5 !important;
    text-decoration: underline;
    text-transform: uppercase;
}

.form-group.btn-sec {
    text-align: right;
}

.form-group.btn-sec .btn {
    font-size: 18px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0.1em;
    border-radius: 50px;
    text-transform: uppercase;
}

.form-sec-ch-pre-l .user-details {
    position: relative
}

/*
.form-sec-ch-pre-l #choose-preferred-line-content {
    position: relative
}

.form-sec-ch-pre-l .nav-tabs .nav-link {
    border: none;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2F3BF5;
    background-color: unset;
    padding: 0.5rem 1.0rem;
    border-radius: 100px;
}

.form-sec-ch-pre-l .nav {
    justify-content: space-between;
    margin: 0px 0 40px 0px;
    border: 2px solid #2F3BF5;
    width: fit-content;
    border-radius: 100px;
    align-items: center;
    padding: 5px 5px 6px;
}

.form-sec-ch-pre-l .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #2F3BF5;
}

.form-sec-ch-pre-l .nav-tabs .nav-item.show .nav-link {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 19px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FF0084;
}

.form-sec-ch-pre-l .nav .nav-item {
    margin: 0 0px
}

#choose-preferred-line-content .tab-pane .card-body {
    min-height: 390px;
} */


.form-sec-ch-pre-l #delivery-section {
    position: relative
}

.form-sec-ch-pre-l .nav-tabs .nav-link {
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: none;
    color: #000;
    background-color: unset;
    padding: 0.5rem 1.0rem;
    border-radius: 12px;
    border: 1px solid #D9D9D9;
}

.form-sec-ch-pre-l .nav {
    justify-content: space-between;
    margin: 0px 0 25px 0px;
    border: 0px solid #2F3BF5;
    width: fit-content;
    border-radius: 12px;
    align-items: center;
    padding: 5px 5px 6px;
}

.form-sec-ch-pre-l .nav-tabs .nav-link.active {
    font-weight: 700;
    color: #000;
    border: 1px solid #2F3BF5;
    /* background-color: #2F3BF5; */
}

/* .form-sec-ch-pre-l .nav-tabs .nav-item.show .nav-link {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 19px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FF0084;
} */

.form-sec-ch-pre-l .nav .nav-item {
    margin: 0 10px 0 0;
}

.form-sec-ch-pre-l .nav .nav-item:last-child {
    margin: 0 0px;
}

#choose-preferred-line-content .tab-pane .card-body {
    min-height: 390px;
}

.form-group.ext-btn {
    margin-top: 60px;
}

.p-process-section {
    padding: 0px 0 0;
    width: auto;
}

.p-process-section .nav {
    justify-content: space-between;
    margin: 0px 0 0px 0px;
    border: 0px solid #2F3BF5;
    width: fit-content;
    border-radius: 100px;
    align-items: center;
    padding: 5px 5px 6px;
}

.p-process-section .nav-tabs .nav-item {
    margin: 0 15px;
}

.p-process-section .nav-tabs .nav-link {
    border: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2F3BF5;
    background-color: #D9D9D9;
    padding: 0;
    border-radius: 100px;
    width: 100px;
    height: 6px;
}

.p-process-section .nav-tabs .nav-link.process {
    color: #fff;
    background-color: #FF0084;
}

.p-process-section .nav-tabs .nav-link.completed {
    background-color: #7f0042;
}

.p-process-section .nav-tabs .nav-item.show .nav-link {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 19px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FF0084;
}

.form-text-section {
    margin: 0px 0;
    padding: 20px 0 20px;
    border-top: 1px solid #D9D9D9;
}

.form-text-section h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 34px;
    letter-spacing: -0.02em;
    text-align: left;
    margin: 0 0 10px;
}

.form-text-section p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #1d1b1c;
    margin: 0;
}

.form-text-section .plan p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    margin: 0;
}

.info-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    color: #888888;
    margin: 0 0 15px;
}

/* #login {
    position: relative;
} */

#login .modal-content {
    overflow: unset;
}

#login .modal-body {
    padding: 20px 40px;
}

#login .btn-close {
    position: absolute;
    right: 15px;
    top: -15px;
    z-index: 99;
    background: #000 url('../images/close-icon-w.svg') center / 1em auto no-repeat;
    padding: 8px;
    opacity: 9;
    color: #fff;
    border-radius: 100%;


}

#login .model-content-sec {
    position: relative;
}

#login .model-content-sec h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 42px;
    text-align: center;
    margin: 30px 0 30px;
}

#login .model-content-sec .form-group {
    position: relative;
}

#login .model-content-sec .form-control {
    border: 1px solid #E8E9ED;
    box-shadow: 0px 4px 0px #2F3BF5;
    -webkit-box-shadow: 0px 4px 0px #2F3BF5;
    -moz-box-shadow: 0px 4px 0px #2F3BF5;
}

#login .model-content-sec .form-control.shadow-success {
    box-shadow: 0px 4px 0px #28a745;
    -webkit-box-shadow: 0px 4px 0px #28a745;
}

#login .model-content-sec .form-control.shadow-danger {
    box-shadow: 0px 4px 0px #dc3545;
    -webkit-box-shadow: 0px 4px 0px #dc3545;
}


#login .model-content-sec .form-group .edit-btn {
    position: absolute;
    right: 10px;
    z-index: 99;
    font-family: 'Montserrat', sans-serif;
    color: #2F3BF5;
    font-weight: 500;
}

#login .model-content-sec .b-message {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #2B2B2B;
    margin: -10px 0 0 0;
}


.tac-sec .tac-sec-title .form-label {
    margin: 0;
}

.tac-sec .tac-sec-inner .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: unset;
    width: 100%;
    align-content: space-around;
}

.tac-sec .tac-sec-inner input.form-control {
    padding: 12px 10px;
    width: 100%;
    line-height: 1.5;
    border: 1px solid #CBCBCB;
    border-radius: 8px !important;
    text-align: center;
    /* margin-right: 15px;
    height: 50px;
    width: 45px !important;
    border-right: 1px solid #CBCBCB !important;
    border-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border: 1px solid #CBCBCB;
    border-color: #CBCBCB !important; */
}

.tac-sec .tac-sec-inner input.form-control:hover {
    background-color: unset !important;
}

.tac-sec .tac-sec-inner input.form-control:last-child {
    margin-right: 0px;
}

.resend-text p a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 21.6px;
    letter-spacing: 0%;
    vertical-align: middle;
    text-align: center;
    text-decoration: underline;
    color: #000;
    margin: 0;
}


#login .btn-sec-b {
    margin: 40px 0 0;
    padding: 0;
}

#login .btn-sec-b .btn-blue {
    width: 100%;
    border-radius: 100px;
    background-color: #2F3BF5;
    color: #fff;
    border: unset;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 10%;
}


/*out of stock popup*/
#stock-check .modal-content {
    overflow: unset;
}

#stock-check .modal-body {
    padding: 20px 40px;
}

#stock-check .btn-close {
    /* position: absolute; */
    right: 15px;
    top: -15px;
    z-index: 99;
    background: #000 url('../images/close-icon.svg') center / 1em auto no-repeat;
    padding: 8px;
    opacity: 0.9;
    color: #fff;
    border-radius: 100%;
    border: 4px solid #fff;
}


#stock-check .model-content-sec {
    position: relative;
}

#stock-check .model-content-sec h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
    text-align: center;
    margin: 30px 0 15px;
}

#stock-check .model-content-sec p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;
    margin: 0px 0 30px;
}

#stock-check .model-content-sec .form-group {
    position: relative;
}

#stock-check .model-content-sec .form-control {
    border: 1px solid #E8E9ED;
    box-shadow: 0px 4px 0px #2F3BF5;
    -webkit-box-shadow: 0px 4px 0px #2F3BF5;
    -moz-box-shadow: 0px 4px 0px #2F3BF5;
}

#stock-check .btn-sec-b {
    margin: 20px 0 0;
    padding: 0;
}

#stock-check .btn-sec-b .btn-primary {
    width: 100%;
    border-radius: 100px;
    color: #fff;
    border: unset;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 10%;
}

#stock-check .btn-sec-b .btn-default {
    width: 100%;
    border-radius: 100px;
    background-color: #fff;
    border: 1px solid #C9D7EF !important;
    color: #2F3BF5;
    border: unset;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 10%;
}

#stock-check .model-content-sec-message {
    text-align: center;
}

#stock-check .model-content-sec-message h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
    text-align: center;
    margin: 0px 0 15px;
}

#stock-check .model-content-sec-message p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    text-align: center;
    margin: 0px 0 0px;
}

#stock-check .model-content-sec-message img {
    margin: 0 0 20px;
    padding: 0;
}

#stock-check .model-content-sec-message .btn-sec-b {
    margin: 20px 0 0;
    padding: 0;
    text-align: right;
}

#stock-check .model-content-sec-message .btn-sec-b .btn-primary {
    width: auto;
    border-radius: 100px;
    color: #fff;
    border: unset;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 10%;
}

/*.layer-section .heading-sectionTitle {
    font-size: 36px;
    line-height: 54px;
    margin-bottom: 30px;
}*/


/*end out of stock popup*/

@media only screen and (max-width: 768px) {

    #login .modal-body,
    #stock-check .modal-body {
        padding: 20px 20px;
    }

    #login .model-content-sec h2,
    #stock-checkn .model-content-sec h2 {
        font-size: 24px;
        line-height: 30px;
    }

    #login .model-content-sec .form-group .edit-btn {
        bottom: 10px;
    }

    /* .tac-sec .tac-sec-inner input.form-control {
        margin-right: 10px;
        height: 50px;
        width: 12% !important;
    } */
    .layer-action-inner-m,
    .user-details-sec {
        width: 100%;
    }

    .device-img-block {
        position: unset;
        width: 100%;
    }

    .section-header {
        top: 80px;
    }
}

/*hn*/

/* Layer Mask Banner */

.layer-maskBanner {
    background-position: center center;
    background-size: cover;
    border: 1px solid #D9D9D9;
    border-radius: 30px;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 20px;
    /* min-height: 280px; */
    padding: 20px 40px;
}

.layer-maskBanner h4 {
    font-size: 22px;
    line-height: 33px;
    margin-bottom: 16px;
}

.layer-maskBanner p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .layer-maskBanner {
        height: 100%;
        justify-content: start;
        margin-bottom: 0;
        min-height: auto;
        padding: 60px;
    }

    .layer-maskBanner h4 {
        font-size: 28px;
        line-height: 42px;
        margin-bottom: 18px;
    }

    .layer-maskBanner p {
        font-size: 20px;
        line-height: 30px;
    }
}


/* Section Verify QR */

.layer-section.section-verifyQR {}

.section-verifyQR .layer-verifyQRCode {
    margin-bottom: 60px;
    text-align: center;
}

.layer-verifyQRCode img {
    max-height: 150px;
    max-width: 150px;
}


/* Layer Numbered Texts */

.layer-numberedTexts {}

.layer-numberedTexts .layer-numberedText {
    margin: 0 0 40px;
    padding: 0 0 0 50px;
    position: relative;
}

.layer-numberedTexts .layer-numberedText:last-child {
    margin-bottom: 0;
}

.layer-numberedText span.span-numberedTextNo {
    background-color: #FF0084;
    border-radius: 100%;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    height: 36px;
    left: 0;
    line-height: 26px;
    position: absolute;
    top: 0;
    width: 36px;
}

.layer-numberedText span.span-numberedTextNo:after {
    border-radius: 100%;
    content: "\f00c";
    display: none;
    font-family: "Font Awesome 6 Free";
    font-size: 18px;
    font-weight: 900;
    height: 36px;
    left: 0;
    line-height: 26px;
    position: absolute;
    top: 0;
    width: 36px;
    transition: all 230ms linear;
}

.layer-numberedText span.span-numberedTextNo.checked:after {
    background-color: #71D9AD;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layer-numberedText .layer-numberedTextDetails {}

.layer-numberedTextDetails h4 {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 20px;
}

.layer-numberedTextDetails p {
    color: #888;
    font-size: 18px;
    line-height: 27px;
}

.layer-numberedTextDetails p:last-child {
    margin-bottom: 0;
}

.layer-numberedTexts.columns {
    background-color: #FFF;
    border: 1px solid #94B0E0;
    border-radius: 18px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.15);
    padding: 30px;
}

.layer-numberedTexts.columns .layer-numberedText {
    margin-bottom: 20px;
    padding-left: 62px;
}

.layer-numberedTexts.columns .layer-numberedText span.span-numberedTextNo {
    background-color: #1A1E47;
    font-size: 18px;
    line-height: 30px;
    height: 42px;
    width: 42px;
}

.layer-numberedTexts.columns .layer-numberedTextDetails p {
    font-size: 16px;
    line-height: 20px;
}


/*hn add*/

.layer-feedback-sec.columns {
    background-color: #FFF;
    border: 0px solid #94B0E0;
    border-radius: 18px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.15);
    padding: 30px;
}

.layer-feedback-sec .heading-sectionTitle {
    font-family: Montserrat;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 38.89px;
    line-height: 46.87px;
    letter-spacing: -2%;

}

.layer-feedback-sec .heading-sectionsubTitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 17.95px;
    line-height: 25.13px;
    letter-spacing: 0%;
    vertical-align: middle;

}

.layer-feedback-sec.columns .layer-numberedText {
    margin-bottom: 20px;
    padding-left: 62px;
}

.layer-feedback-sec.columns .layer-numberedText span.span-numberedTextNo {
    background-color: #1A1E47;
    font-size: 18px;
    line-height: 30px;
    height: 42px;
    width: 42px;
}

.layer-feedback-sec.columns .layer-numberedTextDetails p {
    font-size: 16px;
    line-height: 20px;
}

.layer-feedback-inner-sec {
    margin: 0;
    padding: 0;
    text-align: center;
}

.layer-feedback-rating-sec {
    margin: 15px 0 20px;
    padding: 0;
}

.layer-feedback-rating-sec ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    list-style-type: none;
    justify-content: center;
}

.layer-feedback-rating-sec ul li {
    margin: 0;
    font-size: 60px !important;
    padding: 0 15px;
}

.layer-feedback-rating-sec ul li a {
    color: #2F3BF5;
}

.layer-feedback-inner-sec-box {
    margin: 0 0;
    padding: 0;
}

.layer-feedback-inner-sec-box textarea {
    border: 1px solid #E8E9ED;
    color: #000;
    font-size: 16px;
    box-shadow: 0px 2px 0 #C9D7EF;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    white-space: normal;
    width: 100%;
}

.layer-feedback-inner-sec-box .blue-btn {
    background-color: #2F3BF5;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    line-height: 19px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.estd-datetime-section {
    background-color: #2F3BF5;
    padding: 20px;
    border-radius: 10px;
    text-align: left;
}

.estd-datetime-section .estd-datetime-cont-section {
    display: flex;
    align-items: center;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0%;
    margin: 0;
}

.estd-datetime-section .estd-datetime-cont-section img {
    margin-right: 10px;
}

.layer-info-section {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #FF0084;
    text-align: left;
}

.layer-info-section .layer-info-item-sec {
    display: flex;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0%;
    text-align: left;
    margin: 0;
    padding: 0;
}

.layer-info-section .layer-info-item-sec img {
    margin-right: 15px;
}

.layer-location-result {
    position: relative;
    margin: 0;
}

.layer-location-result h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0%;
}

.layer-location-result .result-inner-section {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
}

.layer-location-result .result-inner-section .result-cont-sec ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.layer-location-result .result-inner-section .result-cont-sec ul li {
    margin: 8px 0;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #CBCBCB;
}

.layer-location-result .result-inner-section .result-cont-sec ul li:last-child {
    border-bottom: 0px solid #CBCBCB;
}

.layer-location-result .result-inner-section .result-cont-sec h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 21.6px;
    letter-spacing: 0%;
    color: #000;
}

.layer-location-result .result-inner-section .result-cont-sec p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 21.6px;
    letter-spacing: 0%;
    color: #2B2B2B;
}

.layer-location-result .result-inner-section .result-cont-sec p span {
    color: #FF0084;
}

.result-cont-sec .form-check {
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.result-cont-sec .form-check input.form-check-input {}

.result-cont-sec .form-check label.form-check-label {
    position: relative;
    padding: 0 0 0 35px;
    font-size: 16px;
    line-height: 27px;
    font-weight: 400;
    margin-bottom: 0;
}

.result-cont-sec .form-check label.form-check-label:before {
    border: 2px solid #C9D7EF;
    background-color: #F4F2F3;
    border-radius: 100%;
    color: #FFF;
    content: '';
    display: inline-block;
    height: 24px;
    line-height: 22px;
    position: absolute;
    text-align: center;
    left: 0;
    top: 0px;
    width: 24px;
    transition: all 100ms linear;
}

.result-cont-sec .form-check input.form-check-input:checked~label.form-check-label:before {
    background-color: #2F3BF5;
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-size: 14px;
    font-weight: 900;
}

.result-cont-sec .form-check label.form-check-label:before {
    top: 3px;
}


.result-cont-h {
    height: 350px;
    overflow: hidden;
    /* overflow-x: hidden; */
}

.result-cont-h:hover {
    overflow-y: scroll;
}

.item-view-sec {
    background-color: #FFE7F4;
    padding: 4px;
    border-radius: 14px 14px 0 0;
    border: 0px solid #FF0084;
    text-align: center;
    box-shadow: 0 7px 44px 6px rgba(0, 0, 0, .1);
}

.item-view-sec .item-view-inner-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0%;
    margin: 0;
    padding: 0;
}

.item-view-sec .item-view-inner-sec img {
    margin-right: 10px;
}

.bottom-cart {
    border-radius: 0 0 14px 14px;
}
.bottom-cart-plan {
    border-radius: 14px !important;
}

@media screen and (max-width:768px) {

    .layer-feedback-rating-sec ul li {
        padding: 0;
    }

    .estd-datetime-section .estd-datetime-cont-section {
        font-size: 12px;
        line-height: 16px;
    }

    .estd-datetime-section .estd-datetime-cont-section img {
        margin-right: 10px;
        width: 20px;
    }

    .layer-info-section .layer-info-item-sec img {
        width: 20px;
    }

    .layer-info-section .layer-info-item-sec {
        font-size: 14px;
        line-height: 18px;
    }

    .layer-dcSelectedColor{
        margin: 0 0 24px;
    }

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

    .custom-container .item-view-sec{
        border-radius: 0 !important;
    }

    .layer-section.section-deviceConfig{
        padding-bottom: 0 !important;
    }
    .layer-action-payment-plan-inner .image-section{
        padding: 0 0 24px !important;
    }
    .layer-action-payment-plan-inner{
        padding: 16px !important;
    }
}

/* end hn */



/*hn*/

.section-verification {
    position: relative;
    padding: 85px 0 0;
}

.section-user {
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.section-user img {
    width: 90px;
}

.section-user h2 {
    font-size: 23px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -0.019em;
    text-align: center;
    margin: 15px 0 0;
    padding: 0;
}

.verification-content-block {
    background-color: #F4F2F3;
    padding: 20px;
    border-radius: 15px;
    min-height: 340px;
}

.verification-content-block .layer-numberblock {
    margin: 0 0 40px;
    padding: 0 0 0 50px;
    position: relative;
}

.verification-content-block span.span-numberedTextNo {
    background-color: #FF0084;
    border-radius: 100%;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    height: 36px;
    left: 0;
    line-height: 26px;
    position: absolute;
    top: 0;
    width: 36px;
}

.validation-section {
    margin: 15px 0 40px;
    padding: 0 0 0 50px;
    position: relative;
}

.validation-section span.span-numberedTextNo {
    background-color: #FF0084;
    border-radius: 100%;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    height: 36px;
    left: 0;
    line-height: 26px;
    position: absolute;
    top: 0;
    width: 36px;
}

.layer-numbercontent h4 {
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 10px;
}

.layer-numbercontent p:last-child {
    margin-bottom: 0;
}

.layer-numberblock:last-child {
    margin-bottom: 0;
}

.layer-numbercontent p {
    color: #888;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.pp-section {
    margin: 20px 0;
}

.pp-section p {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.019em;
    text-align: left;

}

.btn-section {
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 20px;
}

.btn-section .btn {
    font-size: 15px;
    font-weight: 700;
    line-height: 22.5px;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
}

.recomm-text-block {
    margin: 25px 0 0;
    padding: 0;
    position: relative;
}

.recomm-text-block p {
    font-size: 14px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: -0.019em;
    text-align: left;
}

.recomm-text-block ul {
    margin: 20px 0 0 15px;
    padding: 0;
}

.recomm-text-block li {
    margin: 0;
    padding: 0 0 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: -0.019em;
    text-align: left;
}

.verif-comp-block {
    height: 75vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.verif-comp-block .verif-comp-cont {
    text-align: center;
}

.verif-comp-block .verif-comp-cont img {
    margin: 0;
    padding: 0;
}

.verif-comp-block .verif-comp-cont h3 {
    font-size: 23px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -0.019em;
    text-align: center;
    margin: 15px 0 0;
    padding: 0;
}

.verif-header {
    background-color: #fff;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
    position: fixed;
    width: 100%;
    z-index: 99;
}

.verif-header .logo-top {
    width: 42px !important;
    transition: .3s;
}

.verif-header .head-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.019em;
    text-align: right;
}

/*end hn*/


@media (min-width: 992px) {
    .layer-numberedTexts .layer-numberedText {
        padding-left: 80px;
    }

    .layer-numberedText span.span-numberedTextNo {
        font-size: 24px;
        height: 50px;
        line-height: 36px;
        width: 50px;
    }

    .layer-numberedText span.span-numberedTextNo:after {
        font-size: 24px;
        height: 50px;
        line-height: 36px;
        width: 50px;
    }
}

@media (min-width: 576px) {
    .layer-numberedTexts.columns .layer-numberedText {
        padding-left: 34px;
    }

    .layer-numberedTexts.columns .layer-numberedText span.span-numberedTextNo {
        font-size: 14px;
        line-height: 24px;
        height: 24px;
        width: 24px;
    }

    .layer-numberedTexts.columns .layer-numberedTextDetails p {
        font-size: 12px;
        line-height: 20px;
    }
}


/* Section Add-Ons */

.layer-section.section-addOns {
    background: #F4F2F3;
    padding-bottom: 40px;
}

.section-addOns .layer-addOn {
    margin: 0 0 20px;
}

.layer-addOn .layer-addOnImg {}

.layer-addOnImg img {}

.layer-addOn .layer-addOnDetails {}

.layer-addOnDetails h4 {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 15px;
}

.layer-addOnDetails h4 span.span-highlight {
    color: #FF0084;
    font-weight: 400;
}

.layer-addOnDetails p {
    color: #888;
    font-size: 18px;
    line-height: 27px;
}

.layer-addOnDetails button.btn {
    margin: 25px 0 0;
}


/* Section Accessories */

.layer-section.section-accessories {}

.section-accessories .layer-saHeader {
    margin: 0 0 30px;
}

.layer-saHeader h4 {
    margin-bottom: 0;
}

.layer-saHeader .layer-sliderDots {}

.layer-saHeader .layer-sliderDots ul.slick-dots {
    text-align: center;
}

.section-accessories .layer-accessories {}

.layer-accessories .btn-sliderArrow {
    border-radius: 100%;
    height: 48px;
    padding: 0;
    width: 48px;
}

.layer-accessories .btn-sliderArrow.slick-disabled {
    border-color: #94B0E0;
    color: #292D32;
    opacity: 25%;
}

.layer-accessories .layer-accessoriesSlider {}

.layer-accessories .layer-accessory {
    background-color: #FFF;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 7px;
    min-width: 0;
    position: relative;
}

.layer-accessory .layer-accessoryImage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 245px;
    padding: 3px 30px 0 30px;
}

.layer-accessory .layer-accessoryImage img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.layer-accessory .layer-accessoryDetails {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px;
    text-align: center;
}

.layer-accessoryDetails h4 {
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 10px;
}

.layer-accessoryDetails .layer-accessoryConfig {}

.layer-accessoryConfig p {
    color: #888;
    font-size: 18px;
    line-height: 27px;
    /* margin-bottom: 20px; */
}

.layer-accessoryConfig p.panel-sub {
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 10px;
}

.layer-accessoryDetails .panel-price,
.layer-accessoryButton .panel-price {
    color: #000;
 font-size: 24px;
 font-weight: 700;
    text-align: center;
    margin: 0 !important;
}

.layer-accessory .layer-accessoryButton button.btn{
    background-color: #FF0084 !important;
    border-color: #FF0084 !important;
    color: #FFF !important;
}

.panel-price-discount{
    font-size: 14px;
    color: #888;
}

.layer-accessory .layer-accessoryButton {
    padding: 0 20px 20px;
}

.layer-accessory .layer-accessoryButton button.btn {
    width: 100%;
}

.layer-accessoriesSlider .slick-track {
    display: flex;
}

.layer-accessoriesSlider .slick-slide {
    height: inherit;
}

ul.listing-configSelectColors {
    border: 0;
    display: flex;
    justify-content: space-evenly;
    font-size: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.listing-configSelectColors li {
    display: inline-block;
    font-size: 16px;
    margin: 0;
}

ul.listing-configSelectColors li button.nav-link {
    border: 1px solid transparent;
    border-radius: 100%;
    display: block;
    height: 52px;
    padding: 5px;
    width: 52px;
}

ul.listing-configSelectColors li button.nav-link:hover,
ul.listing-configSelectColors li button.nav-link.active {
    border-color: #FF0084;
}

ul.listing-configSelectColors li button.nav-link span {
    background-color: #FFF;
    border-radius: 100%;
    display: block;
    height: 40px;
    width: 40px;
}

.layer-accessoryConfig ul.listing-configSelectColors {
    margin-bottom: 0;
}

.layer-accessoryConfig ul.listing-configSelectColors li button.nav-link {
    height: 26px;
    padding: 2px;
    width: 26px;
}

.layer-accessoryConfig ul.listing-configSelectColors li button.nav-link span {
    height: 20px;
    width: 20px
}

@media (min-width: 768px) {
    .layer-saHeader .layer-sliderDots ul.slick-dots {
        text-align: right;
    }
}


/* Section Contract */

.layer-section.section-contract {}

.section-contract p.panel-sectionSub {
    color: #000;
    font-size: 14px;
    line-height: 17px;
}

.section-contract .layer-contractContent {
    height: 40vh;
    margin: 40px 0 0;
    overflow-y: auto;
}

.section-consent {}

.section-consent .form-group-inline {
    border-bottom: 1px solid #2F3BF5;
}

.section-consent .form-group-inline label {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
}

.section-consent .form-group-inline .form-control {
    background-color: transparent;
    border: 0;
    padding: 10px;
}


/* Section Payment */

.layer-section.section-payment {}

.section-payment .layer-paymentMethods,
.layer-paymentMethods {}

.layer-paymentMethods .layer-pmFields {
    padding: 0;
}

.layer-pmFields .layer-pmCard {}

.layer-pmFields .layer-pmFPX {}

.layer-pmFPX ul.listing-pmBanks {
    display: flex;
    justify-content: space-evenly;
    margin: 0 0 40px;
    padding: 0;
}

ul.listing-pmBanks li {
    cursor: pointer;
    list-style-type: none;
    width: 80px;
}

ul.listing-pmBanks li .layer-pmBank {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    text-align: center;
}

ul.listing-pmBanks li .layer-pmBank span {
    transition: all 150ms linear;
}

ul.listing-pmBanks li .layer-pmBank span.span-bankImage {
    background-color: #FFF;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin: 0 auto 15px;
    width: 60px;
}

ul.listing-pmBanks li .layer-pmBank span.span-bankImage img {
    border-radius: 10px;
    max-height: 100%;
    max-width: 100%;
}

ul.listing-pmBanks li .layer-pmBank span.span-bankName {}

ul.listing-pmBanks li:hover .layer-pmBank,
ul.listing-pmBanks li.selected .layer-pmBank {
    color: #000;
    font-weight: 600;
}

ul.listing-pmBanks li:hover .layer-pmBank span.span-bankImage,
ul.listing-pmBanks li.selected .layer-pmBank span.span-bankImage {
    border-color: #2F3BF5;
    border-width: 2px;
}

@media (min-width: 768px) {
    .layer-paymentMethods .layer-pmFields {
        padding-left: 44px;
    }
}


/* Layer Order Summary */

.section-payment .layer-orderSummary,
.layer-orderSummary {
    background-color: #FFF;
    border: 0px solid #94B0E0;
    border-radius: 18px;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, .1);
    margin: 0 0 20px;
    padding: 30px 20px;
}

.layer-orderSummary .layer-osImage img {
    height: 140px;
    width: auto;
    margin: auto;
    display: block;
}

.layer-orderSummary .layer-osImage p.panel-expand {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    margin-bottom: 0;
}

.layer-orderSummary .layer-osImage a {
    color: #2F3BF5;
}

.layer-orderSummary .layer-osLineItems {}

.layer-osLineItems .layer-osLineItem {
    border-top: 1px solid #CBCBCB;
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
}

.layer-osLineItems .layer-osLineItem:first-of-type {
    border-top: 0;
}

.order-summary-device .layer-orderSummary p.panel-osItem,
.layer-orderSummary p.panel-osPrice {
    font-size: 16px;
    font-weight: 700 !important;
    line-height: 22px;
    margin: 0 !important;
}

/*hn*/
.layer-osLineItem-head {
    padding: 15px 0;
    margin: 0;
}

.layer-orderSummary p.Item-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    text-align: left;
    margin-bottom: 5px;
    padding: 0;
}

.layer-orderSummary p.Item-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: left;
    vertical-align: middle;
    padding: 0;
}

.sl-link a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 10%;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    color: #2F3BF5;
    text-align: center;
}

/*hn*/

.layer-orderSummary .plan-name{
    margin: 0 15px;
    border-bottom: 1px solid #CBCBCB;
    width: 100%;
    padding: 0 0 15px;
}

.layer-orderSummary p.panel-osItem {
    padding-right: 15px;
    margin: 0px;
}

.layer-orderSummary p.panel-osPrice {
    white-space: nowrap;
}

.layer-orderSummary span.span-greyed {
    color: #888;
    font-weight: 400;
}

.layer-orderSummary p.panel-osItem span.span-greyed {
    color: #000;
    font-size: 14px;
    line-height: 21px;
}

.layer-orderSummary .layer-osDue {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 0;
    border-top: 0.8px solid #CBCBCB
}

.layer-orderSummary .layer-osDue p.panel-osItem,
.layer-orderSummary .layer-osDue p.panel-osPrice {
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
}

.layer-orderSummary .layer-osDue p.panel-osItem {}

.layer-orderSummary .layer-osDue p.panel-osPrice {}

/* @media (min-width: 576px) {
    .layer-orderSummary .layer-osImage {
        height: 150px;
        margin-bottom: 25px;
        text-align: center;
    }
}

.layer-orderSummary .layer-osImage{
height:100px;
} */


/* Section Messages */

.layer-section.section-messages {
    padding: 40px 0 0;
}

.section-message .layer-message,
.layer-message {
    color: #000;
    margin: 0 0 30px;
    /* text-align: center;  */
}

.summary-box {
    box-shadow: 1px 2px 10px rgba(0, 0, 0, .1);
    border: 0;
    border-radius: 12px;
}

.layer-paymentMethods {
    box-shadow: 1px 2px 10px rgba(0, 0, 0, .1);
    border: 0;
    border-radius: 12px;
}

.layer-message .layer-messageHeader {
    margin: 0 0 30px;
}

.layer-message p {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.layer-message .layer-messageHeader img {}



.layer-message .layer-messageHeader p.panel-sectionSub {
    color: #1A1E47;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    margin-bottom: 10px;
}

.layer-message .layer-messageHeader p.panel-orderNumber {
    color: #E91E63;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 12px;
}

.layer-message .layer-messageHeader p.panel-orderedOn {
    color: #888;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

@media (max-width: 768px) {
    .layer-section.section-planSelection {
        background-color: #fff;
        padding: 15px 0 0;
    }

    .layer-planSelection .nav-tabs {
        /* overflow-x: auto; */
        padding-bottom: 20px;
    }

    .plans-block .col-md-3 {
        width: 85%;
    }

    .layer-planSelection .nav-tabs button.nav-plan .span-planName {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .layer-planSelection .nav-tabs button.nav-plan .span-planPrice {
        font-size: 40px;
        line-height: 25px;
        margin-bottom: 20px;
    }

    .section-simtype {
        padding: 20px 0 0;
    }

    .layer-section .heading-sectionTitle {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 15px;
    }

    .standardForm {
        background: #fff;
    }

    .form-sec-ch-pre-l {
        margin: 0;
    }
    .form-sec-ch-pre-l .form-title {
    margin: 40px 0 40px;
}

    .form-sec-ch-pre-l .form-title h2 {
        font-size: 24px;
        line-height: 34px;
    }

    .form-sec-ch-pre-l .nav-tabs .nav-link {
        font-size: 12px;
        line-height: 14px;
        padding: 0.5rem 0.8rem;
    }

    .p-process-section {
        width: 100%;
    }

    .p-process-section .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-radius: 100px;
        padding: 5px 5px 6px;
    }

    .p-process-section .nav-tabs .nav-item {
        margin: 0 15px;
    }

    .p-process-section .nav-tabs .nav-link {
        width: 12%;
        height: 6px;
        margin: 0 !important;
    }

    #choose-preferred-line-content .tab-pane .card-body {
        min-height: auto;
    }

    .form-group.ext-btn {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0%;
        right: 0%;
        margin: 0 auto;
        text-align: center;
        box-shadow: 0 7px 44px 6px rgba(0, 0, 0, .1);
        background: #fff;
        padding: 20px 20px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-group.btn-sec .btn {
        font-size: 14px;
        line-height: 16px;
        padding: 10px 40px;
    }
}

@media (min-width: 576px) {

    .section-message .layer-message,
    .layer-message {
        text-align: left;
    }

    ul.listing-dcColorsSelect.nav.nav-tabs {
        gap: 15px;
        justify-content: flex-start;
    }

}

@media screen and (max-width: 480px) {
    .layer-deviceImages {
        min-height: 280px;
        max-height: calc(100vh - 260px);
    }

    .layer-deviceImages .slider-slide {
        min-height: 280px;
        padding: 10px;
    }

    .layer-deviceImages .slider-slide img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .layer-sliderControl {
        margin-top: 10px;
    }

    .layer-sliderControl button.btn {
        padding: 8px;
        font-size: 14px;
    }

    .layer-sliderDots {
        margin: 0 10px;
        gap: 6px;
    }

    .layer-sliderDots .slider-dot {
        width: 8px;
        height: 8px;
    }

    .layer-sliderDots .slider-dot.active {
        width: 10px;
        height: 10px;
    }

    ul.listing-dcColorsSelect.nav.nav-tabs {
        gap: 15px;
        justify-content: flex-start;
    }
}

[x-cloak] {
    display: none !important;
}



/* NEW CUSTOM CSS START */
@media screen and (max-width: 768px) {
    .layer-deviceImages {
        min-height: 300px;
        max-height: calc(100vh - 280px);
    }

    .layer-deviceImages .slider-slide {
        min-height: 300px;
        padding: 12px;
    }

    .layer-deviceImages .slider-slide img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    p.panel-dcTitle {
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        font-size: 13.92px;
        line-height: 100%;
        letter-spacing: -1.1%;
    }

    .layer-dcRRP p.panel-rrp {
        font-family: Open Sans;
        font-weight: 400;
        font-size: 13.92px;
        line-height: 150%;
    }

    .layer-dcRRP .panel-stocks {
        font-family: Open Sans;
        font-weight: 400;
        font-size: 13.92px;
        line-height: 150%;
    }

    .l-more-link a {
        font-family: Montserrat;
        font-weight: 700;
        font-size: 13.92px;
        line-height: 150%;
        letter-spacing: 10%;
        text-transform: uppercase;
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-thickness: 0%;
    }

    .layer-deviceConfig h3.heading-deviceTitle {
        font-family: Montserrat;
        font-weight: 800;
        font-size: 17.9px;
        line-height: 100%;
        letter-spacing: -1.1%;
    }

    .layer-dcStorages .layer-selectionButtons button.btn {
        font-family: Montserrat;
        font-weight: 400;
        font-size: 13.92px;
        line-height: 150%;
        text-align: center;
        margin: 0 8px 8px 0;
        padding: 8px 14px;
    }

    .info-note {
        font-family: Open Sans;
        font-weight: 400;
        font-size: 13.92px;
        line-height: 17.9px;
        letter-spacing: 0%;
    }

    .layer-action-inner .action-content-section h2,
    .layer-action-inner .action-content-section p,
    .layer-action-payment-plan-inner .action-content-section h2,
    .layer-action-payment-plan-inner .action-content-section p {
        font-size: 13.92px;
    }

    .layer-action-inner {
        border-width: 1.49px;
        border-radius: 9.95px;
    }

    .layer-selectionButtons button.btn {
        font-size: 13.92px;
    }

    .layer-section .heading-sectionTitle {
        font-size: 13.92px;
        font-weight: 800;
    }

    .layer-planSelection .nav-tabs button.nav-plan .span-planName {
        font-family: Montserrat;
        font-weight: 800;
        font-size: 23.87px;
        line-height: 150%;
        margin-bottom: 0;
    }

    .plan-detail-section ul.listing-planDetails li {
        font-family: Open Sans;
        font-weight: 400;
        font-size: 13.92px;
        line-height: 21.88px;
    }

    .layer-planSelection .nav-tabs button.nav-plan {
        padding: 20px;
    }


    .modal-dialog-scrollable .modal-content .modal-title {
        font-family: Montserrat;
        font-weight: 800;
        font-size: 18px;
        line-height: 100%;
    }

    .modal-dialog-scrollable .modal-body td {
        font-family: Montserrat;
        font-weight: 400;
        font-size: 12px;
        line-height: 100%;
    }
}

/* NEW CUSTOM CSS END */
.error-input {
    box-shadow: 0px 4px 0 #EF5348 !important;
}

.status-message {
    font-weight: bold;
    color: red;
}

.form-control:disabled {
    background-color: #e9ecef !important;
    opacity: 1;
}

.layer-action-payment-plan-inner:hover,
.layer-action-payment-plan-inner.selected {
    border: 2px solid #2F3BF5;
    /* or any color */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

/* .layer-action-inner {
    border: 2px solid transparent;
    default no border
    border-radius: 10px;
    padding: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
} */

/* Hover effect */
.layer-action-inner:hover {
    border-color: #2F3BF5;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

/* Selected effect */
.layer-action-inner.selected {
    border: 2px solid #2F3BF5;
    background-color: #ffffff;
    border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

.is-disabled-section {
    opacity: 0.5;
    pointer-events: none;
}

/* accessories */
.layer-box {
    background-color: #FFF;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.layer-box .title {
    color: #000000;
    font-family: Montserrat;
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: -1.9%;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all;
}

.layer-box .description {
    font-family: Open Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    text-align: center;
    color: #888888;
    margin-bottom: 6px;
}

.layer-box .rm-title {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    color: #000000;
    margin: 12px auto 20px;
}

.addons-btn {
    border-radius: 30px !important;
    width: fit-content;
    color: #fff;
    background-color: #ff0081;
    font-size: 16px;
    border: none;
    margin: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

.addons-btn:hover,
.addons-btn:focus,
.addons-btn:active {
    background-color: #db006eff;
    color: #fff;
}

.addons-btn.btn:disabled {
    color: #fff !important;
    background-color: #ff0081 !important;
    opacity: 0.6 !important;
    pointer-events: auto;
    cursor: not-allowed !important;
}


/* rating on thanku page */

.rating-stars {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.rating-stars li {
    font-size: 40px;
    color: #d3d3d3;
    cursor: pointer;
    transition: 0.2s;
}

.rating-stars li.active,
.rating-stars li:hover {
    color: #2d38ff;
}

.img-maskBanner {
    position: sticky;
    top: 200px;
    padding: 30px;
}


.section-verifyInfo input[type=number]::-webkit-inner-spin-button,
.section-verifyInfo input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.referral-box label {
    font-family: Montserrat;
    font-weight: 600;
}

.referral-box .referral {
    position: relative;
}

.referral-box input {
    border-bottom: 1px solid #C9D7EF;
    border-radius: 10px;
    height: 48px;
    box-shadow: 1px 2px 1px rgba(201, 214, 239, .8);
}

.referral-box img {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}


.form-control:focus {
    border-color: #C9D7EF;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(255, 0, 128, 0.247);
}



ul.nav.nav-pills.listing-quickSelectBanks li {
    max-width: 75px;
    min-width: 75px;
    cursor: pointer;
}

.listing-quickSelectBanks {
    gap: 20px;
}

.listing-quickSelectBanks .img-quickSelectBank {
    width: 56px;
    margin: auto;
    height: 56px;
    display: block;
}

.img-quickSelectBank img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-width: 2px;
    border-style: solid;
    border-color: #dddddd;
    border-radius: 7.5px;
}

.listing-quickSelectBanks span {
    margin-top: 10px;
    display: block;
    font-size: 13px;
    line-height: 16px;
    font-family: 'Open Sans';
    color: #000000;
    opacity: 65%;
}

.selected .img-quickSelectBank img {
    border-color: #ff0084;
}

.selected .listing-quickSelectBanks span {
    font-weight: 600;
    opacity: 100%;
}

.popup-warning {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    border: 2px solid #ff1493;
    border-radius: 10px;
    background-color: #fff;
    max-width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    line-height: 1.5;
}

.icon-container {
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.warning-icon {
    font-size: 24px;
    font-weight: bold;
    color: #ff1493;
    border: 2px solid #ff1493;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 3px;
}

.warning-text {
    margin: 0;
    color: #000;
    font-size: 1rem !important;
}

@media (max-width: 400px) {
    .input-group .input-feild-common {
        font-size: 13px !important;
        line-height: 15px !important;
        padding: 10px 5px !important;
    }
}




.layer-planSelection .nav-tabs {
    border: 0;
    display: block;
    margin: 0 0 20px;
    /* overflow-x: auto; */
    overflow: hidden;
    padding: 0 0 10px;
}

.layer-planSelection .nav-tabs {
    overflow-x: scroll;
}
.NakedplanSelection  .nav-tabs{
    overflow-x: unset !important;
    overflow: unset !important;
}

.layer-planSelection .nav-tabs button.nav-plan {
    background-color: #fff;
    border: 2px solid #C9D7EF;
    border-radius: 12px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.15);
    color: unset;
    padding: 25px 20px;
    text-align: center;
    min-width: 170px;
    width: 100%;
    transition: all 230ms linear;
}

.layer-planSelection .nav-tabs button.nav-plan:hover,
.layer-planSelection .nav-tabs button.nav-plan.active {
    background-color: #FFF;
    border-width: px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
    color: #000;
}

.layer-planSelection .nav-tabs button.nav-plan span {
    display: block;
    font-weight: 800;
}

.layer-planSelection .nav-tabs button.nav-plan span.span-planName {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 5px;
}

.layer-planSelection .nav-tabs button.nav-plan span.span-planPrice {
    font-size: 42px;
    line-height: 63px;
    margin-bottom: 10px;
}

.layer-planSelection .nav-tabs button.nav-plan span.span-planCycle {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

.layer-planSelection .tab-content {
    background-color: #FFF;
    border-radius: 18px;
    padding: 30px;
}

.section-accessories {
    background-color: #F4F2F3;
}


/* thankyou-steps-form */


.thankyou-steps-form .feedback-steps {
    display: flex;
    justify-content: start;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.thankyou-steps-form .card {
    box-shadow: 0px 3.21px 9.64px 0px #0000001A;
    border: none;
    border-radius: 10px;
}

.thankyou-steps-form .feedback-steps .details h5 {
    font-family: Montserrat;
    font-weight: 800;
    font-size: 14px;
    line-height: 18px;
}

.thankyou-steps-form .feedback-steps .details p {
    font-family: Open Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

.congrats-section {
    background-color: #FFF;
    /* border: 1px solid #94B0E0; */
    border-radius: 10px;
    box-shadow: 0px 4px 12px 0px #0000001A;
    padding: 20px;
}


.congrats-section h4 {
    font-family: Montserrat;
    font-weight: 800;
    font-size: 18px;
    line-height: 34px;
    text-align: center;
    color: #FF0084;
    margin: 0;
}

.congrats-section p {
    font-family: Open Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 10px;
}

.congrats-section a {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    text-transform: uppercase;
    color: #2F3BF5;
    text-decoration: underline;
    margin: auto;
    display: block;
}


@media screen and (min-width:768px) {
    .thankyou-steps-form .feedback-steps .details h5 {
        font-weight: 800;
        font-size: 18px;
        line-height: 23.4px;
    }

    .thankyou-steps-form .feedback-steps .details p {
        font-weight: 400;
        font-size: 18px;
        line-height: 23.4px;
        max-width: 214px;
    }

    .thankyou-steps-form .feedback-steps {
        gap: 25px;
    }

    .congrats-section h4 {
        font-size: 24px;
        line-height: 150%;
    }

    .congrats-section p {
        font-size: 18px;
        line-height: 20.4px;
        padding: 8px 0;
    }
}

.panel-expand {
    text-align: center;
}

.panel-expand a {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    color: #2F3BF5;
}

/* .device-img-block img {
    margin: auto;
    display: block;
    width: 100%;
} */

.btn.btn-primary:hover {
    border-color: #ff0084;
}


.layer-accessories ul {
    list-style: none;
}

.layer-accessories ul li {
    display: flex;
    justify-content: space-between;
}

.layer-accessories ul li p span {
    font-weight: 700;
    max-width: 300px;
    font-size: 16px;
}

.layer-accessories ul li p {
    max-width: 280px;
}

.layer-accessories ul li .plus_icon {
    font-weight: 900;
    color: #FF0084;
    margin-right: 4px;
    font-size: 20px;
}

.layer-accessories ul li .plan-accessories {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
}


.section-payment .layer-orderSummary,
.layer-orderSummary {
    background: #ffffff !important;
    padding: 0 !important;
}

.yt-device-title {
    padding: 0 20px;
}

.layer-orderSummary .layer-osImage {
    border-radius: 18px;
    background: #ffffff;
    padding: 20px 20px 0;
    margin: 0;
    border: 0px solid #CBCBCB;
}

.layer-orderSummary .layer-osLineItems {
    border-radius: 18px 18px 0 0;
    background: #ffffff;
    padding: 0px 20px 0;
    margin: 0;
    border: 0px solid #CBCBCB;
}

.layer-orderSummary .layer-osDue {
    background: white;
    border-radius: 0;
    padding: 15px 0px 25px !important;
    border-top: 1px solid #CBCBCB;
    margin: 0 15px;
}

.layer-orderSummary .layer-details {
    background: white;
    border-radius: 0 0 18px 18px;
    padding: 20px !important;
    /* border: 1px solid #CBCBCB; */
}

.layer-orderSummary .layer-details a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15.96px;
    line-height: 150%;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    color: #2F3BF5;
}

.layer-osLineItem.monthlyCommitmentGrey p {
    color: #888888;
}

.referral-box .referral {
    margin-bottom: 10px;
}

/* .layer-osLineItem {
    margin-bottom: 30px;
} */

.esDateDetail {
    padding: 16px 16px;
    text-align: center;
    color: #fff;
    background: #2F3BF5;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px !important;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 10px;
    font-weight: 700;
}

.layer-broadband-summary .layer-osImage {
    /* border-radius: 0 !important; */
    border-bottom: 0;
}
.layer-broadband-summary .layer-osImage img {
    border-radius: 10px;
}

.layer-broadband-summary .layer-osLineItems {
    border-radius: 0 !important;
    border-top: 0;
}

.listing-quickSelectWallets li {
    max-width: 75px;
    min-width: 75px;
}


.listing-quickSelectWallets .img-quickSelectWallet {
    width: 56px;
    margin: auto;
    height: 56px;
    display: block;
    cursor: pointer;
}

.img-quickSelectWallet img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-width: 2px;
    border-style: solid;
    border-color: #dddddd;
    border-radius: 7.5px;
}

.listing-quickSelectWallets span {
    margin-top: 10px;
    display: block;
    font-size: 13px;
    text-align: center;
    line-height: 16px;
    font-family: 'Open Sans';
}

.inner-list-item {
    padding: 0;
    margin: 0;
}


.upfront-modal .modal-dialog {
    max-width: 700px;
}

.upfront-modal .btn-close {
    position: absolute;
    right: 15px;
    top: -15px;
    z-index: 99;
    background: #000 url(../images/close-icon-w.svg) center / 1em auto no-repeat;
    padding: 8px;
    opacity: 9;
    color: #fff;
    border-radius: 100%;
    border: 4px solid #fff;
}

/* .upfront-modal .modal-body {
    padding: 50px !important;
} */

.upfront-modal h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 42px;
    text-align: center;
    margin: 0 0 30px;
}

/* .upfront-modal .modal-body {
    padding: 50px 120px !important;
} */

.upfront-modal p {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0%;
    text-align: center;

}

.upfront-modal .btn-upfront-ok {
    border-radius: 100px;
    color: #fff;
    border: unset;
    text-transform: uppercase;
    font-size: 18px;
    margin: auto;
    display: block;
}

.modal-backdrop.fade.show {
    opacity: 0.9 !important;
    background-color: #e8e9ed !important;
}



.upfront-modal .modal-content {
    border: 0 !important;
}




.modal-custom .btn-close {
    position: absolute;
    right: 15px;
    top: -15px;
    z-index: 99;
    background: #000 url(../images/close-icon-w.svg) center / 1em auto no-repeat;
    padding: 8px;
    opacity: 9;
    color: #fff;
    border-radius: 100%;
    border: 4px solid #fff;
}

.modal-custom .modal-content {
    padding: 40px !important;
    border-radius: 16px;
}


.modal-custom .modal-body h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 42px;
    text-align: center;
    margin: 30px 0 30px;
}

.modal-custom .modal-body p {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0%;
    text-align: center;

}

.modal-custom .modal-body .form-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    margin: 0 0 10px;
}

.modal-custom .modal-body .form-control {
    border: 1px solid #E8E9ED;
    color: #000;
    font-size: 16px;
    box-shadow: 0px 2px 0 #C9D7EF;
    background-color: #fff;
    padding: 10px 15px;
}

#chooseAgainButton:hover {
    color: #6B4CE6 !important;
    border-color: #6B4CE6 !important;
    background-color: transparent;
}

#notifyMeButton {
    background: #E4007C;
    border: none;
    border-radius: 30px;
}

#chooseAgainButton {
    color: #6B4CE6;
    border-color: #6B4CE6;
    border-radius: 30px;
}


#deviceSpecs .btn-close {
    position: absolute;
    right: 15px;
    top: -15px;
    z-index: 99;
    background: #000 url(../images/close-icon-w.svg) center / 1em auto no-repeat;
    padding: 8px;
    opacity: 9;
    color: #fff;
    border-radius: 100%;
    border: 4px solid #fff;
}

#deviceSpecs h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 42px;
    text-align: center;

}

#deviceSpecs .modal-content {
    padding: 20px !important;
    border-radius: 16px;
    border: 0;
overflow: unset;
}


.etc-popup {
  position: relative;
}

.etc-popup .modal-dialog-scrollable .modal-content {
  overflow: unset;
}

.modal-content img {
  padding: 0 0 0 0px;
  margin: 0 auto;
  display: inline-block;
  width: 100%;
}

.etc-popup .model-content-sec {
  margin: 0;
  padding: 30px 30px 20px;
  text-align: center;
}

.etc-popup .model-content-sec h2 {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.02em;
  margin-bottom: 15px;
}

.etc-popup .model-content-sec p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0%;
  text-align: center;
}

.etc-popup .modal-content .btn-close {
  background-color: #000;
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  opacity: 1;
  border-radius: 50px;
  justify-content: center;
  border: 2px solid #fff;
  position: absolute;
  top: -20px;
  right: 4%;
  z-index: 99;
}

.btn-sec-b {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-sec-b .btn-cta {
  display: inline-block;
  background-color: #FF0084;
  padding: 10px 40px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #fff;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  border: 0;
  border-radius: 50px;
}

.btn-sec-b .btn-back {
  display: inline-block;
  background-color: #fff;
  padding: 10px 40px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #888888;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #E8E9ED;
  border-radius: 50px;
}
@media only screen and (min-device-width: 280px) and (max-device-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
  .etc-popup .model-content-sec h2 {
  font-size: 28px;
  line-height: 32px;
}

.etc-popup .model-content-sec p {
  font-size: 16px;
  line-height: 20px;
}
.btn-sec-b .btn-cta {
  padding: 10px 40px;
  font-size: 14px;
  line-height: 16px;
}

.btn-sec-b .btn-back {
  padding: 10px 40px;
  font-size: 14px;
  line-height: 16px;
}
}

#contract-pricing-popup .btn-close{
    position: absolute;
    right: 15px;
    top: -15px;
    z-index: 99;
    background: #000 url('https://yesshop-revamp-dev.azurewebsites.net/themes/yes-store/2025/assets/images/close-icon-w.svg') center / 1em auto no-repeat;
    padding: 8px;
    opacity: 9;
    color: #fff;
    border-radius: 100%;
}

#contract-pricing-popup .modal-dialog  {
    max-width: 660px;
}

#contract-pricing-popup .modal-dialog .modal-body{
    padding: 32px;
}

.order-summary-etc .layer-osLineItem > *{
    font-weight: 500 !important;
}

.order-summary-etc .layer-osLineItems .layer-osLineItem{
    border: none !important;
}

.layer-osLineItems .layer-osLineItem{
    padding: 12px 0 !important;
}

.order-summary-etc .layer-osLineItems .layer-osLineItem{
    padding: 1px 0 !important;
}
.layer-sliderControl > .btn {
    display: none;
}

.layer-sliderControl > .layer-sliderDots .slider-dot.active{
    width: 24px !important;
    border-radius: 100px !important;
}

.standardForm .section-verifyInfo .form-check label.form-check-label:before{
    border-radius: 4px !important;
}

.section-upfrontPlan #tab-planSelection{
    overflow: visible !important;
    border-radius: 0 !important;
}

.layer-planSelection .nav-tabs button.nav-plan.active{
    border-width: 2px !important;
}

.layer-section .heading-sectionTitle{
    font-size: 18px !important;
    
}

.section-upfrontPlan .layer-planSelection .nav-tabs button.nav-plan{
    min-width: 200px !important;
    min-height: 120px !important;
}

@media  (max-width: 480px) {
    .standardForm .form-group, .standardForm .form-group-inline{
        margin: 0 !important;
    }

    .section-upfrontPlan .layer-planSelection .tab-content{
        padding: 0 !important;
    }

    .section-upfrontPlan .layer-planSelection{
        padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    }
}
.contract-period-btn {
    font-weight: 400 !important;
}

.dob-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    pointer-events: none; /* allow input click */
}
.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper .form-control {
    padding-right: 40px; /* space for icon */
}

.dropdown-arrow-icon {
    background-image: url('../images/dropdown-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}


/* responsive for mobile */
@media screen and (max-width: 768px) {
    .upfront-modal .modal-body {
        padding: 30px !important;
    }
    .upfront-modal.show {
        display: flex !important;
        padding-right: 0px;
        padding-left: 0px;
        justify-content: center;
        align-items: center;
    }
    .upfront-modal h3 {
        font-size: 20px;
        font-weight: 800;
        line-height: normal;
        margin: 0 0 15px;
    }
    .upfront-modal p {
        font-size: 16px;
        line-height: normal;
    }
    .upfront-modal .btn-upfront-ok {
        font-size: 14px;
        line-height: normal;
        padding: 10px 20px;
    }
    .loop_data .rm_mt {
        text-align: start;
        font-weight: 400;
    }

    .left_detail-col .ph_n {
        margin-bottom: 0;
    }
}