﻿
/*-font-sizes */
.font-12 {
    font-size: 12px;
}

.font-14 {
    font-size: 14px;
}

.font-18 {
    font-size: 18px;
}

.font-24 {
    font-size: 24px;
}

.font-32 {
    font-size: 32px;
}

.font-40 {
    font-size: 40px;
}

/*line-height */
.line-height-auto {
    line-height: auto;
}

.line-height18 {
    line-height: 18px;
}

.line-height22 {
    line-height: 22px;
}

.line-height26 {
    line-height: 26px;
}

.line-height38 {
    line-height: 38px;
}

/* Letter Spacing */
.letter-space-1 {
    letter-spacing: -1px;
}

.letter-space-0-4 {
    letter-spacing: -0.4px;
}

/* font-weight */
.fw-400 {
    font-weight: 400;
}

.fw-700 {
    font-weight: 700;
}

.fw-900 {
    font-weight: 900;
}

/* spacing and padding,  margins */
.mb-05 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-45 {
    margin-bottom: 45px !important;
}

.mx-10 {
    margin-right: 10px;
    margin-left: 10px;
}

.my {
    margin-top: 45px;
    margin-bottom: 45px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-30 {
    margin-right: 30px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.mt-60 {
    margin-top: 60px;
}

.padd-15 {
    padding: 15px;
}

.padd-20 {
    padding: 20px;
}

.padd-30 {
    padding: 30px;
}

.px-05 {
    padding-left: 5px;
    padding-right: 5px;
}

.px-16 {
    padding-left: 16px;
    padding-right: 16px;
}

.px-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.py-05 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.py-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.py-45 {
    padding-top: 45px;
    padding-bottom: 45px;
}

.pb-05 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-45 {
    padding-bottom: 45px;
}

.vr-pb-40 {
    padding-bottom: 40px !important;
}

.pt-30 {
    padding-top: 30px;
}

.pt-45 {
    padding-top: 45px;
}

.vr-pt-40 {
    padding-top: 40px !important;
}

.pt-60 {
    padding-top: 60px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-30 {
    padding-left: 30px;
}

.pr-20 {
    padding-right: 20;
}

.vr-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.vr-p-40 {
    padding: 40px !important;
}


.rounded-pill {
    border-radius: 4px !important;
}

body {
    padding-top: 0px !important;
}

ol, ul {
    padding-left: 0; 
}

.footer {
     border-top: 0 !important;
}

.Brandlogo {
    content: url('img/Logo.svg')
}

.invaliderror:not(.data) {
    color: #D71828;
}

.invaliderror label:not(.data) {
    color: #D71828;
}

.invaliderror p:not(.data) {
    color: #D71828;
}

.invalid:not([type=checkbox]):not([type=radio]) { 
    border-color: #D71828;
    border-width: 2px;
    outline:none;
}

.steps-completed {
    border-bottom: 1px solid #E1E1E1;
    padding: 45px 0px;
}

.radzenFormInput { 
    width: 280px !important; 
    border-radius: var(--spacing-spacing-75, 4px) var(--spacing-spacing-75, 4px) 0px 0px;
    border: 0px;
    border-bottom: 1px solid var(--greyscale-midnight, #131C35);
    background-color: var(--greyscale-background-dust, #F3F2F0);
    height: 44px;
    padding: 5px 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #131C35;
    font-size: 14px;
}

.d-flex.flex-row.gap-3 .bell-control-third {
    width: 82px;
}

.rz-calendar .rz-inputtext {
    background-color: var(--greyscale-background-dust, #F3F2F0);
}

.downloadIconpackage {
    content: url('img/svg/icons/Download.svg')
}

.uploadIconpackage {
    content: url('img/svg/icons/Upload.svg')
}

.unlimitedIconpackage {
    content: url('img/svg/icons/Unlimited.svg')
}

.wifiIconImage {
    content: url('img/svg/icons/modem-wifi.svg')
}

.card-virgin {
    border-radius: 16px; 
    /*min-width: 290px;
    margin: 0px 16px 24px;*/
    background-color: #F3F2F0; 
    padding: 32px 24px;
}

.selected {
    background-color: #fff;
}

.list-price {
    color: #131C35;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -1px;
    font-weight: 600;
}

.card-body-virgin {
    padding: 24px 0px 0px;
    border-top: 1px solid #CDCFD5;
}

.package-title { 
    height: 60px;
    gap: 12px;
}

.slick-dots li.slick-active button:before { 
    color: #4E4AE4 !important;    
}

.lan-prv {
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0px;
}

.vr-font-26 {
    font-size: 26px;
}

.vr-font-12 {
    font-size: 12px !important;
}

@media screen and (max-width: 768px) {
    .vr-tab-font-24 {
        font-size: 24px;
    }
}
@media screen and (max-width: 576px) {
    .vr-mob-font-22 {
        font-size: 22px;
    }
}

.vr-m-0 
{
    margin:0px !important;
}

.vr-p-0 {
    padding: 0px !important;
}
.vr-pt-0 {
    padding-top: 0px !important;
}
.vr-pb-0 {
    padding-bottom: 0px !important;
}
.vr-pr-0 {
    padding-right: 0px !important;
}
.vr-pl-0 {
    padding-left: 0px !important;
}


.vr-padd-12 {
    padding: 12px !important;
}
.vr-pt-12 {
    padding-top: 12px !important;
}
.vr-pb-12 {
    padding-bottom: 12px !important;
}



.vr-padd-32 {
    padding: 32px !important;
}
.vr-pt-32 {
    padding-top: 32px !important;
}
.vr-pb-32 {
    padding-bottom: 32px !important;
}


.vr-padd-16 {
    padding: 16px !important;
}
.vr-pt-16 {
    padding-top: 16px !important;
}
.vr-pb-16 {
    padding-bottom: 16px !important;
}

.vr-alert-img {
    width: 20px;
    height: 16px;
    padding-right: 4px;
}

.vr-alert {
    color: #D71828;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
}

.pcaitem {
    word-wrap: break-word !important;
    white-space: unset !important;
}
.edit-Icon-virgin-en {
    background-image: url('img/png/Edit.png');
    padding-left: 8px;
    background-repeat: no-repeat;
    background-position: right;
    width: 60px;
    display: inline-block;
    font-weight: 700 !important;
}

.edit-Icon-virgin-fr {
    background-image: url('img/png/Edit.png');
    padding-left: 8px;
    background-repeat: no-repeat;
    background-position: right;
    width: 90px;
    display: inline-block;
    font-weight: 700 !important;
}

.sup-price {
    font-size: 20px;
}

.top70 {
    top: 70%;
}

.flexcolumn {
    flex-direction: column !important;
    width:100%;
}

.icon-close-solid:after {
    content: url('img/svg/icons/promo_cancel.svg');
    padding-left: 8px;
}
}

.vr-padd-48 {
    padding: 48px !important;
}

.vr-pt-48 {
    padding-top: 48px !important;
}

.vr-pb-48 {
    padding-bottom: 48px !important;
}
.bell-pb-45 {
    padding-bottom: 45px;
}
.bell-pt-45 {
    padding-top: 45px;
}

.button-register {
    background-color: #F3F2F0;
    color: #131C35;
    border: 1px solid #E1E1E1;
    display: inline-block;
    -webkit-box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    width: 77px;
    padding: 15px;
}

    .button-register:hover {
        background-color: #E10A0A;
        color: #fff;
    }

.selectedActive {
    background-color: #E10A0A !important;
    color: #fff !important;
}

.listStyleNone {
    list-style-type: none;
}

.locationIcon {
    content: url('/VirginPlus/assets/img/Location.png')
}

.margin-t-09 {
    margin-top: 9px;
}

.icon-exclamation_big_stroke {
    content: url('img/svg/exclamation-mark-circle.svg');
}

.icon-i-icon {
    content: url('img/svg/icons/Vectori-icon.svg');
}

.img_bank_en {
    content: url('img/png/bankcheque.png');
    max-width: 100%;
}

.img_bank_fr {
    content: url('img/png/bankcheque.png');
    max-width: 100%;
}

.number1circle {
    content: url('img/svg/icons/number-1.svg');
}

.number2circle {
    content: url('img/svg/icons/number-2.svg');
}

.number3circle {
    content: url('img/svg/icons/number-3.svg');
}

.vr-scrollable-div { 
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: red #f1f1f1;
}

.vr-padding-t-0 {
    padding-top: 0px !important;
}

.border-invaliderror {
    border-color: #D71828 !important;
}

.padding-t-16{
    padding-top:16px;
}

.no-border {
    border:0 !important;
}

.vr-icon-error {
    color: #D71828;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 768px) {
    .footer {
        width: 100%;
    }
    .change-address {
        margin-left: 33px;
        margin-top: 5px;
    }
}

.radzenFormInput { 
    width: 280px !important; 
}

div:has(> input[type=radio]:checked) {
    font-weight: 600;
}

.pad-left-35{
    padding-left:35px;
}

@media (max-width: 320px) {
    .footer .bottom-fixed-price li.footer-price:last-child {
        border-bottom: 0px !important;
        margin-bottom: 10px;
    } 
    .d-sm-inline {
        display: block !important;
    }
    .d-none {
        display: none !important;
    } 
}

@media (max-width: 576px) and (max-width: 320px) {
    .d-sm-inline {
        display: block !important;
    }
    .d-none {
        display: none !important;
    } 
}

.flex-row {
    flex-direction: row !important;
}

@media (max-width: 576px) {
    .d-sm-inline {
        display: block !important;
    }

    .d-none {
        display: none !important;
    }
}

@media (max-width: 768px){
    .order-review .package-total .package-price {
        -webkit-box-align: start;
        align-items: flex-start !important;
    }
}

.terms-n-conditions {
    overflow-y:hidden;
}

@media only screen and (min-width: 576px) {
    .brnodisplay {
        display: none;
    } 
}

.hand-cursor {
    cursor: pointer;
}

@media (max-width: 576px) {
    .vr-sm-text-align-left {
        text-align: left !important;
    }
    .vr-sm-padd-l-0{
        padding-left:0px !important;
    }
    .card-virgin { 
        padding: 32px 22px;
    }
}

.vr-min-width-180
{
    min-width:180px;
}

.vr-span-padding-b {
    display: inline-block; 
}

.padding-x-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.vr-padding-l-0 {
    padding-left: 0px !important;
}

@media (max-width: 576px) {
    .vr-sm-padd-x-24 {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

.section-nav-dropdown {
    background-color: #E10A0A;
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    color: #fff;
    margin-top: -1px;
}


@media (max-width: 576px) {
    .savedraft-button-mobile {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 15px;
        margin-bottom: 15px;
        padding-right: 25px;
        padding-left: 25px;
    }
}

.margin-r-15 {
    margin-right: 15px;
}

.promo-code-rounded {
    border: 1px solid #858A99;
    padding: 9px 8px 9px 8px;
    border-radius: 30px;
}

.rounded-16 {
    border-radius: 16px !important;
}

@media (max-width: 320px) {
    .package-title {
        height: 70px;
    }
}
  
.step-counter.active {
    border: 5px solid #E10A0A !important;
}

.stepper-item.completed .step-counter {
    background-color: #E10A0A !important;
}

.stepper-item.completed::after {
    border-bottom: 2px solid #E10A0A !important;
} 