.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body.ltr {
   /* margin-bottom: 60px;*/
    font-family: "Poppins", sans-serif !important;
}
body.rtl {
    /*margin-bottom: 60px;*/
    font-family: "Noto Kufi Arabic", sans-serif !important;
}

.toggle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.toggle-button {
    position: relative;
    width: 204px;
    height: 36px;
    border-radius: 30px;
    overflow: hidden;
    background-color: white;
    cursor: pointer;
    border: var(--new-boder) solid 1px;
    margin: 0 0 10px 0;
    padding: 3px;
    gap:10px;
}

    .toggle-button input[type="checkbox"] {
        display: none;
    }

    .toggle-button label {
        width: 50%;
        height: 100%;
        text-align: center;
        line-height: 1.75rem;
        transition: 0.5s;
        font-size: 0.875rem;
        font-weight: 400;
        cursor: pointer;
        color: var(--bs-verylight-text);
    }

    /*.toggle-button .annual {
        left: 0;
        background-color: var(--base-color);
        color: white;
    }*/

    /*.toggle-button .monthly {
        right: 0;
        background-color: white;
        color: var(--bs-normal-text);
        background-color: #ebebeb;
    color: #666;
    }*/
    .toggle-button input[type="radio"]{
       display:none !important;
    }
        .toggle-button input[type="radio"] + label {
            background-color: white;
        }

    .toggle-button input[type="radio"]:checked + label {
        background-color: var(--base-color);
        color: white;
        border-radius:30px;
    }
.bg-body-lightsky {
    background: #E9EFFF;
}

.currency-dropdown .k-picker-solid {
    border: var(--new-boder) solid 1px;
    border-radius: 30px !important;
    color: var(--bs-light-text);
    box-shadow: none !important;
    padding: 0 20px 0 10px;
    background: url(/images/arrow-down.svg) no-repeat 94% 50% #fff !important;
    width:auto !important;
    min-width:165px;
    transition: width 0.5s linear;
    height:36px;
}
.currency-dropdown .k-input-button{display:none;}
.pricecolumns > div{
    width:20% !important;
}
    
    .pricecolumns .columns {
        background: #fff;
        padding: 20px 30px 30px;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        height: 100%;
        border: #E9E9E9 solid 1px;
    }

    .pricecolumns .columns.active {
        border: var(--base-border-color) solid 1px;
        background: var(--bs-light-base);
    }
    .pricecolumns .columns .popular-badge {
        background: var(--base-badge-color);
        font-size: 0.75rem;
        line-height: 1.5rem;
        font-weight: 700;
        color: var(--bs-lighttext-colo);
        padding: 4px 15px;
        border-radius: 8px 8px 0 0;
        text-transform: uppercase;
        width:100%;
        text-align:center;
    }
    .pricecolumns .columns .sticky-bg{
        background:#fff;
        padding-top:10px;
    }
    .pricecolumns .columns.active .sticky-bg {
        background: var(--bs-light-base);
    }
    .pricecolumns .header {
    }

.plan-details {
    list-style-type: none;
    display: block;
    padding: 0;
}

    .plan-details li {
        font-size: 0.875rem;
        color: var(--bs-normal-text);
        line-height: 1.5rem;
        border: none;
        padding:5px 0;
    }
.ltr .plan-details li {
    background: url(/images/listtick.png) no-repeat 0 9px;
    padding: 5px 0 5px 24px;
}
    .rtl .plan-details li {
        background: url(/images/listtick.png) no-repeat 100% 8px;
        padding: 5px 24px 5px 0;
    }
    

        .plan-details li span {
            display: inline-block;
            border: none;
        }

.plan-details li.feature {
    font-size: 0.875rem;
    color: Var(--base-color);
    font-weight: 700;
    padding:0;
}

.common-btn {
    background: var(--base-color);
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: 3px;
    line-height: 1rem;
}

.plan-compair {
    font-size: 1rem;
    line-height: 2rem;
    color: var(--base-color);
    font-weight: 500;
}

.pricequote {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--bs-blue-color);
    font-weight: 500;
}

.homeaddons .card {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
    .homeaddons .card .border-bottom {
        border-color: #DDE4F7 !important;
    }
.ltr .bulletpoint .plan-details {
    font-family: "Poppins-Medium", sans-serif !important;
}
.rtl .bulletpoint .plan-details {
    font-family: "Noto Kufi Arabic", sans-serif !important;
}

/*
.addoncard-1 {
    background: #D0EBFF;
}

.addoncard-2 {
    background: #FFF5E0;
}

.addoncard-3 {
    background: #F3ECFC;
}

.addoncard-4 {
    background: #E8F0FF;
}
*/
.homeaddons .card-title {
    font-size: 1.5rem;
    color: var(--bs-normal-text);
    line-height: 1.5rem;
}
.ltr .homeaddons .card-title {
    font-family: "Poppins-Bold", sans-serif !important;
}
.rtl .homeaddons .card-title {
    font-family: "Noto Kufi Arabic", sans-serif !important;
}

.homeaddons .addon-details {
    list-style-type: none;
    display: block;
    padding: 0;
}

    .homeaddons .addon-details li {
        font-size: 0.875rem;
        color: var(--bs-normal-text);
        line-height: 1.5rem;
        width: 49%;
        display: inline-flex;
    }
.ltr .homeaddons .addon-details li {
    background: url(/images/listtick.png) no-repeat 0 12px;
    padding: 6px 15px 6px 20px;
}
.rtl .homeaddons .addon-details li {
    background: url(/images/listtick.png) no-repeat 100% 12px;
    padding: 6px 20px 6px 15px;
}
.homeaddons .card-price {
    border-radius: 4px;
    background: #DDE4F7;
    padding: 8px 16px;
    color: #000 !important;
    font-size: 0.875rem;
    line-height: 1.5rem;
}
    .homeaddons .card-price span {
        font-size: 1.5rem;
        font-weight: 700;
    }
    .steps-area .step {
        text-align: center;
        position: relative;
    }

        .steps-area .step .circle {
            width: 50px;
            height: 50px;
            padding: 6px;
            border-radius: 50%;
            background: #E9EFFF;
            display: inline-block;
            z-index: 1;
            position: relative;
        }

            .steps-area .step .circle .innercercle {
                width: 38px;
                height: 38px;
                line-height: 34px;
                border-radius: 50%;
                background: #FFF;
                border: #D8E0F4 solid 2px;
                display: inline-block;
                color: var(--bs-normal-text);
                font-size: 1rem;
                font-weight: 700;
            }

        .steps-area .step.active .circle {
            background: var(--bs-light-base);
        }

        .steps-area .step.active .circle .innercercle {
            border: var(--base-color) solid 2px;
            color: var(--base-color);
        }


    .steps-area .step .label {
        margin-top: 10px;
        font-size: 1rem;
        line-height:1.5rem;
        color: var(--bs-normal-text);
    }

    .steps-area .step.active .label {
        color: var(--bs-normal-text);
    }

        .steps-area .step::after {
            content: '';
            position: absolute;
            top: 24px;
            height: 1px;
            width: 100%;
            background: #C8D6E8;
            z-index: 0;
        }
.ltr .steps-area .step::after {
    left: -50%;
}

.rtl .steps-area .step::after {
    right: -50%;
}

.steps-area .step:first-child::after {
    content: none;
}



    .steps-area .step.active::after {
        background: var(--base-color);
    }

.credit-card {
    background: #FAFAFA;
    border: #CBCBCB solid 1px;
}
.card-type img {
    opacity:0.7;
    filter:grayscale(0.7);
}

    .card-type img.active {
        opacity: 1;
        border: #888888 solid 1px;
        filter: grayscale(0);
    }
.is-invalid + .invalid-feedback {
    display: block;
    color:var(--bs-error-color);
}
.image-container {
    align-items: center;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}
.signup-disabled input {
    background: #EEEEEE !important;
    border: none !important;
    border-bottom: #e5e5e5 solid 1px !important;
    color: #999999 !important;
}
#editemail {
    position: absolute;
    top: 5px;
    height: 25px;
    width: 25px;
    cursor: pointer;
    background: #fff;
    padding: 5px;
}
.ltr #editemail {
    right: 5px;
}
.rtl #editemail {
    left: 5px;
}

.loginbox {
    background: #FFFFFF;
    box-shadow: rgba(0,0,0,0.1) 0px 0px 10px;
    width: 96%;
    max-width: 800px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.signupbox,
.whitebox-design{
    background: #FFFFFF;
    box-shadow: rgba(0,0,0,0.1) 0px 0px 10px;
}
    .paylite-login {
    position: sticky;
    width: 100%;
    top: 0;
    right: 0;
    padding: 10px 0;
    background: #fff;
    border-bottom: #EAEAEA solid 1px;
    z-index:9;
}

.sign-in-box {
    padding-top: 50px;
    padding-inline-end: 15px;
}


.passwordicon {
    float: right;
    margin-top: -30px;
    width: 20px;
    cursor: pointer;
    position: absolute;
}  
.ltr .passwordicon {
    right: 10px;
}
.rtl .passwordicon {
    left: 10px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var( --bs-light-text) !important; /* Optional: To set the text color */
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important; /* Change 'white' to your desired background color */
}
.activeplanname {
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: #FFF;
    background:var( --base-color);
    border-radius:15px;
    padding:0 10px;
}
.yourplan tr td {
    font-size: 1rem;
    line-height: 2rem;
    color: var( --bs-normal-text);
    padding-right:15px;
}
.yourplan tr td ~ td{
    font-size: 0.875rem;
    line-height: 2rem;
    color: var( --bs-light-text);
}
.yourplan tr td ~ td span.small{
    font-size:0.75rem;
    color:#838383;
}
.planinvoice tr td {
    font-size: 0.875rem;
    line-height: 2rem;
    color: var( --bs-light-text);
    padding-right: 15px;
}

.planinvoice tr td ~ td {
    font-size: 0.875rem;
    line-height: 2rem;
    color: var(--bs-normal-text);
}

.planinvoice tr td ~ td span.small {
    font-size: 0.75rem;
    color: #838383;
}
.invoicepage{
    width:98%;
    min-width:780px;
}
.company-details {
    background: url(../images/invoiceBg.png) no-repeat 100% 70%;
    border-bottom: #D4D4D4 solid 1px;
}
.billdetails tr td{
    font-size:0.875rem;
    line-height:1.5rem;
    color:var(--bs-normal-text);
    padding-right:10px;
}
    .billdetails tr td ~ td {
        color: var(--bs-light-text);
    }

.invoicedetails tr td {
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var(--bs-light-text);
    text-align:right;
}

    .invoicedetails tr td ~ td {
        color: var(--bs-normal-text);
        padding-left: 10px;
        text-align:left;
    }
.details-list tr th{
    font-weight:400 !important;
    color:var(--bs-light-text);
    line-height:1.5rem;

}
.details-list tr td {
    font-weight: 400 !important;
    color: var(--bs-normal-text);
    line-height: 1.5rem;
}
.cc-card-details {
    background: #C7C7C7;
    border-radius: 5px;
    overflow: hidden;
    color:var(--bs-light-text);
}
    .cc-card-details .card-header {
        background: #B7B7B7;
        padding: 10px 30px;
    }
    .cc-card-details .card-body {
        padding: 10px 30px;
    }
    .cc-card-details .card-box {
        border: #ACACAC solid 1px;
        background: #CCCCCC;
        padding:10px 20px;
        border-radius:3px;
    }
    .cc-card-details span.light-text{
        color:var(--bs-verylight-text);
        font-size:0.75rem;
    }
.upgrade-addon .form-check {
    padding-left: 70px;
}
.upgrade-addon input[type=checkbox] ~ label {
    font-size: 1rem;
    line-height: 1.125rem;
    color: var(--bs-light-text);
}
.upgrade-addon input[type=checkbox] ~ label span {
    font-size: 0.875rem;
    display:block;
}
    .upgrade-addon input[type=checkbox]:checked ~ label{
color:var(--bs-normal-text);
    }
#upgradeOrdersummary{
    font-size:0.875rem;
    line-height:2rem;
    color:var(--bs-light-text);
}
    #upgradeOrdersummary tfoot {
        font-size: 1rem;
        line-height: 2rem;
        color: var(--bs-normal-text);
        font-weight: 500;
        border-top: #888888 solid 1px;
    }
.plan-card {
    border: 1px solid var(--bs-lightgrey-bg);
    border-radius: 3px;
    text-align: center;
    padding: 10px;
}

    .plan-card:hover,
    .plan-card.selected {
        border: 1px solid var(--base-color);
    }
    .plan-card.active {
        border: 1px solid var(--bs-light-text);
    }
    .plan-card h5 {
        font-size: 0.875rem;
        line-height:2rem;
        color:var(--bs-light-text);
    }
    .plan-card .plan-price {
        font-size: 2rem;
        line-height: 2rem;
        color: var(--bs-normal-text);
    }
    .plan-card .billing-heading {
        font-size: 1.5rem;
        line-height: 2rem;
        color: var(--bs-normal-text);
        line-break: anywhere;
    }
    .plan-card.address-box p {
        line-break: anywhere;
    }
.plan-card .plan-price small {
    font-size: 1rem;
    line-height: 2rem;
    color: var(--bs-normal-text);
}
    .plan-card .btn-plan{
        font-size:0.75rem;
        margin:0 auto;
        padding:5px 10px;
       
    }
    .plan-card.selected .btn-plan {
        background: var(--bs-primary);
    }
    /*    ----------------media-------------   */
    @media only screen and (min-width:992px) {
        .form-left-box {
            width: 98%;
            background: #fff;
            border-radius: 4px;
            border: #E9E9E9 solid 1px;
            padding:35px;
        }
        
    }
.invoicePayTotal .row:last-child {
    border-top: #D4D4D4 solid 1px;
}
.notetextarea {
    background: #F4F4F4;
    border: none !important;
    padding: 5px 10px;
    color: #565656;
    resize: none;
}
.thanksPage {
    border: #fff solid 2px;
    border-radius: 10px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%);
}
.discount-coupon {
    width: auto;
    border: #f1f1f1 solid 1px;
    border-radius: 5px;
    padding: 16px;
    margin-top: 16px;
    display: inline-block;
}

.wallet-section {
    width: auto;
    border: #f1f1f1 solid 1px;
    border-radius: 5px;
    padding: 16px;
    margin-top: 16px;
    display: inline-block;
}
.address-box {
    padding: 16px;
    position: relative;
    height: 100%;
}
.current-address {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: none;
}
.selected .current-address {
    display: block;
}
.edit-address {
    position: absolute;
    right: 15px;
    top: 5px;
    z-index: 999;
}
.address-box.selected {
    border: 1px solid var(--base-color);
    background: #f9f9f9;
}
.form-switch .form-check-input:not(:checked) {
    background-image: url(../images/rediowhite.svg);
    border: #7BB2ED solid 1px;
    width: 40px;
    height: 20px;
    
}
.ltr .form-switch .form-check-input:not(:checked) {
    margin-right: 10px;
}
.rtl .form-switch .form-check-input:not(:checked) {
    margin-left: 10px;
}

.form-switch .form-check-input:checked {
    width: 40px;
    height: 20px;
    
}
.ltr .form-switch .form-check-input:checked {
    margin-right: 10px;
}
.rtl .form-switch .form-check-input:checked {
    margin-left: 10px;
}
.form-switch .form-check-input ~ label {
    display: inline;
}
.form-switch .form-check-input:not(:checked) ~ .textbox {
    height: 0;
    transition: all .5s ease;
    display: block !important;
    opacity: 0;
    width: 100px;
}
.form-switch .form-check-input:checked ~ .textbox {
    height: 40px;
    transition: all .5s ease;
    display: block;
    opacity: 1;
    width: 100px;
}
.form-control:disabled {
    background: #E9EFFF;
}
.nav-item a.nav-link {
    padding: 1rem;
}
.discount-bg {
    background: #FFCF25;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    color: #222;
    margin-bottom: 5px;
    display: inline-block;
}
.form-switch {
    padding-left: 3.5em;
}

@media only screen and (min-width:768px) {
    .thanks-img {
        background: url(../images/roket.png) no-repeat 100% 0;
    }
    .emailThanks {
        background: url(../images/email-pic.png) no-repeat 0 50%;
        padding-inline-start: 100px;
    }
    .rtl .plan-heading{
        min-height:48px;
    }
    
}

#discountCouponDiv {
    display: none;
}

/* Show the div when the checkbox is checked */
#toggleCheckbox:checked ~ #discountCouponDiv,
#toggleCheckbox:checked + #discountCouponDiv {
    display: block;
}

.txtCouponCode:focus ~ .pomo-close{

}
.pomo-close {
    display: none;
}
/*
.txtCouponCode:focus ~ .pomo-close {
    display: block;
}*/

.scrollspy-example {
    height: 450px;
    overflow: auto;
}

    .scrollspy-example::-webkit-scrollbar {
        width: 5px;
    }

    .scrollspy-example::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    .scrollspy-example::-webkit-scrollbar-thumb {
        background: #C3C6D4;
        border-radius: 10px;
    }

#profile-left-nav a {
    color: var(--bs-light-text);
    font-size: 1rem;
    line-height: 24px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 15px !important;
    margin-right: 10px;
}

    #profile-left-nav a:hover {
        color: var(--bs-light-text);
        background: #ECECEF;
        font-size: 1rem;
        line-height: 24px;
        font-weight: 500;
        text-decoration: none;
    }

    #profile-left-nav a.active {
        color: var(--bs-light-text);
        background: #CCE5FF;
    }

.emailBG {
    background: #CCE5FF;
}

.cardbox {
    border: #f1f1f1 solid 1px;
    cursor: pointer;
}

    .cardbox:hover {
        background: #f9f9f9;
    }

.card-email-box.selected > div {
    background: url(/images/star.svg) no-repeat 100% 50%;
    padding-right: 30px;
}

.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.add-ons-box {
    background: #E9EFFF;
    padding: 15px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 20px;
    border: #10468C solid 1px;
}
.add-ons-box.toggleChecked {
    background: #F9F9F9;
    border: #D1D1D1 solid 1px;
}
    .add-ons-box .check-view {
        display: flex !important;
    }
    .add-ons-box.toggleChecked .check-view {
        
        display: none !important
    }
    .add-ons-box .form-check-input {
        width: 18px;
        height: 18px;
        margin-inline-end: 0.5rem;
        border-color: #7f7f7f;
    }
    .add-ons-box .check-label{
        font-size:1rem;
        line-height:1.5rem;
        color:var(--bs-normal-text);
    }
.ActiveModuleList li{
    width:33%;
    display:inline-block;
    margin-bottom:5px;
}
.ActiveSubscriptionDate {
    background: #FFF3CD;
    border-radius:8px;
    border: #FFE69C solid 1px;
    border-inline-start: #FFE69C solid 8px;
    padding:30px;
    padding-inline-start:25px;
}
.ActiveSubscriptionDate .list-item {
    background: url(/images/listtick-round.png) no-repeat 0 0;
    padding:0 0 20px 25px;
}
.dashboad-box {
    border: #D2D2D2 solid 1px;
    background:#fff;
    border-radius:4px;
    padding:20px;
    height:100%;
}
    .dashboad-box.active {
        border: #E1DAF0 solid 1px;
        box-shadow:rgba(166,86,166,0.15) 0px 4px 15px;
    }
.dashboad-box > .row {
    min-height:60px;
    height:100%;
}
.ribbon {
    position: absolute;
    top: 0;
   
    width: 25px;
    padding:15px 0 20px;
    background-color: var(--bs--base-color);
    color: white;
    text-align: center;
    line-height: 25px;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    font-weight: 600;
    font-size: 0.75rem;
}
.ltr .ribbon {
    right: 10px;
}
.rtl .ribbon {
    left: 10px;
}

.ribbon::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 12.5px solid transparent;
    border-right: 12.5px solid transparent;
    border-bottom: 10px solid #fff;
}

.active-plan-head {
    background: #EAF1FF;
    padding: 30px;
    border-radius: 8px 8px 0 0;
    position:relative;
}
    .active-plan-head .ribbon::after {
        border-bottom: 10px solid #EAF1FF;
    }
.active-plan-body .add-on-box {
    border-top: #DDDDDD solid 1px;
    margin-top: 60px;
}
    .active-plan-body .add-on-box .add-on-text {
        border: #DDDDDD solid 1px;
        border-radius: 50px;
        text-align: center;
        background:#fff;
        padding:10px 20px;
        transform:translate(-50%, -50%);
        width: 110px;
        margin-inline-start:50%;
    }
input.txtCouponCode {
    padding-inline-end: 40px;
}
select.form-select {
    background-color: #fff !important;
    background-image: url(../images/arrow-down.svg) !important;
    background-repeat: no-repeat !important;
   
}
.ltr select.form-select {
    background-position: calc(100% - 10px) calc(50% - 0px) !important; /* left/right and top/bottom with calc */
}
.rtl select.form-select {
    background-position: calc(0% + 10px) calc(50% - 0px) !important; /* left/right and top/bottom with calc */
}
input.form-check-input {
    width: 18px;
    height: 18px;
    margin-inline-end: 0.5rem;
    border-color: #7f7f7f;
}
.ltr .culture-link {
    font-family: "Noto Kufi Arabic";
    font-weight:400;
    text-decoration:none;
    color:#565656;
    margin-top:5px;
}
.rtl .culture-link {
    font-family: "Poppins", sans-serif !important;
    font-weight: 400;
    text-decoration: none;
    color: #565656;
}
.user-top-button{
    color:#565656;
}
.custom-tabs.nav-tabs .nav-link {
    font-size: 0.875rem;
    color: #676767 !important;
    padding: 0.5rem;
    margin-inline-end:0.5rem;
}
.custom-tabs.nav-tabs .nav-link.active,
.custom-tabs.nav-tabs .nav-link:hover,
.custom-tabs.nav-tabs .nav-link:focus {
    font-size: 0.875rem;
    font-weight: 600;
    background-color: transparent !important;
    border-color: transparent !important;
    border-bottom: var(--base-color) solid 2px !important;
}
.custom-tabs.nav-tabs .nav-link:hover,
.custom-tabs.nav-tabs .nav-link:focus {
    border-bottom: none !important;
}
.statistics-heading {
    border-bottom: #E7E7E7 solid 1px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.main-box h6{
    font-size:1rem !important;
    color:#565656 !important;
    font-weight:bold;
}

.Accountbody-nav li.dropdown .dropdown-menu {
    border: none;
    position: inherit !important;
    transform: translate(0px, 0px) !important;
    padding-top: 2px;
}
    .Accountbody-nav li.dropdown .dropdown-menu li {
        margin-inline-start: 20px;
    }
   
    .TopAppUsage-box {
        background: #fff;
        border-radius: 8px;
        padding: 30px;
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
    }


.ribbonExpired {
    position: absolute;
    top: 0;
    right: 10px;
    width: 25px;
    padding: 15px 0 20px;
    background-color: red;
    color: white;
    text-align: center;
    line-height: 25px;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    font-weight: 600;
    font-size: 0.75rem;
}

    .ribbonExpired::after {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 12.5px solid transparent;
        border-right: 12.5px solid transparent;
        border-bottom: 10px solid #fff;
    }
.customer-support {
    background: url(/images/customer-support-bg.svg) no-repeat 0 0 var(--base-color);
    min-height: 250px;
    border-radius: 8px;
    color:#fff;
    padding:30px;
}
    .customer-support .support-icon {
        max-height: 32px;
        max-width: 32px;
        margin-bottom:15px;
    }
.customer-support h6{
    line-height:24px;
}
.brands-slider .slick-slide {
    background: #F9F9F9;
    border-radius: 8px;
    min-height: 100px;
}
.brands-slider .slick-slide > div{
    height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.brands-slider .slick-slide {
    margin: 0 10px; /* 10px gap on each side */
}

.brands-slider .slick-list {
    margin: 0 -10px; /* compensate for outer gaps */
}
    .brands-slider .slick-slide > div img{
        width:auto !important;
}
.footer {
    padding: 18px 0;
    line-height: 24px !important;
    position: inherit !important;
}
.addons-icon {
    width: 46px;
    background-color: #DDE4F7;
    padding: 5px;
    border-radius: 8px;
}
.plan-details-text {
    min-height: 147px;
}
.ltr .pricecolumns > div:first-child > div,
.rtl .pricecolumns > div:last-child > div {
    border-radius: 8px 0 0 8px;
}

.ltr .pricecolumns > div:last-child > div,
.rtl .pricecolumns > div:first-child > div {
    border-radius: 0 8px 8px 0;
}


@media only screen and (max-width: 1200px) {
    .pricecolumns > div {
        width: 33% !important;
    }
    .plan-details-text {
        min-height: 100px;
    }
    .ltr .pricecolumns > div:nth-child(3) > div,
    .rtl .pricecolumns > div:nth-child(4) > div
     {
        border-radius: 0 8px 8px 0;
    }
    .ltr .pricecolumns > div:nth-child(4) > div,
    .rtl .pricecolumns > div:nth-child(3) > div {
        border-radius: 8px 0 0 8px;
    }
}
@media only screen and (max-width: 991px) {
    .pricecolumns > div {
        width: 50% !important;
    }

    .ltr .pricecolumns > div:nth-child(2) > div,
    .ltr .pricecolumns > div:nth-child(4) > div,
    .rtl .pricecolumns > div:nth-child(3) > div {
        border-radius: 0 8px 8px 0;
    }
    .ltr .pricecolumns > div:nth-child(3) > div,
    .rtl .pricecolumns > div:nth-child(2) > div,
    .rtl .pricecolumns > div:nth-child(4) > div
     {
        border-radius: 8px 0 0 8px;
    }
        
        .pricecolumns > div:last-child > div {
            border-radius: 8px;
        }
}
@media only screen and (max-width: 767px) {
    .pricecolumns > div {
        width: 100% !important;
    }
    .plan-details-text {
        min-height: auto;
    }
    .pricecolumns > div > div {
        border-radius: 8px !important;
    }
    .homeaddons .addon-details li {
        width: 100%;
    }
    .grey-container{
        padding:15px;
    }
    .plans-switch{
        padding-left:0 !important;
    }
    .brands-slider .slick-arrow{
        display:none !important;
    }
    .iti-mobile .iti--container {
        top: 50% !important;
        bottom: 50% !important;
        left: 50% !important;
        right: 50% !important;
        position: fixed;
        
        width: 92% !important;
        height: auto;
        min-height: 130px;
    }
    .ltr.iti-mobile .iti--container {
        transform: translate(-50%, -50%);
    }
    .rtl.iti-mobile .iti--container {
        transform: translate(50%, -50%);
    }
}
.mobile-drop .iti--allow-dropdown {
    width:100%
}
#VerifiedEmail {
    right: 20px !important;
}
.ltr #VerifiedEmail {
    right: 20px !important;
}
.rtl #VerifiedEmail {
    left: 20px !important;
}

/* Chrome, Safari, Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: auto; /* default appearance */
    opacity: 1; /* ensure visible */
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield; /* show spinner in Firefox (optional) */
}
.form-control.numberOfUsers::-webkit-inner-spin-button,
.form-control.numberOfUsers::-webkit-outer-spin-button {
    -webkit-appearance: auto !important;
    opacity: 1 !important;
}

input[type="number"].form-control {
    -moz-appearance: auto !important; /* Firefox */
    -webkit-appearance: auto !important; /* Reset webkit first */
    appearance: auto !important;
}

    input[type="number"].form-control::-webkit-inner-spin-button,
    input[type="number"].form-control::-webkit-outer-spin-button {
        -webkit-appearance: inner-spin-button;
        margin: 0;
        opacity: 1;
    }
.iti__country-list {
    white-space: nowrap !important;
}

.long-text-cell {
    white-space: normal !important;
    word-wrap: break-word !important;
    max-width: 200px; /* optional */
}
.whitebox-design.nobox-mob {
    background: none;
    padding: 0 !important;
    box-shadow: none !important;
}
/* ------------------------------responsive css--------------------------*/
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .plan-details-text {
        min-height: 190px;
    }
}

/* ------------------------------number filed css--------------------------*/
.mob-numFeild .btn-increase,
.mob-numFeild .btn-decrease {
    display: none;
}
@media (max-width: 991px) {
    .mob-numFeild .number-field {
        border-radius: 0 !important;
        border-inline: none !important;
    }
    .mob-numFeild .btn-increase,
    .mob-numFeild .btn-decrease {
        border: #D0D0D0 solid 1px !important;
        background: #fff !important;
        box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px !important;
        display: block;
    }
    
    
}