/*
Theme Name:  Hello Elementor Child
Theme URL:   https://elementor.com
Description: Write here theme description.
Author:      Oded Talmon
Author URL:  https://odedta.com
Template:    hello-elementor
Text-domain: ib
Version:     1.0.0
*/

/* Alerts */
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

pre {
    direction: ltr;
    text-align: left;
    display: block;
    padding: 10px;
    overflow: auto;
    background-color: #eeeeee;
    font-size: 0.875em;
    unicode-bidi: bidi-override;
}

.m-l-5 {
    margin-left: 5px;
}

.m-t-5 {
    margin-top: 5px;
}

.m-t-10 {
    margin-top: 10px;
}

.m-t-15 {
    margin-top: 15px;
}

.m-t-20 {
    margin-top: 20px;
}

.m-t-25 {
    margin-top: 25px;
}

.m-t-30 {
    margin-top: 30px;
}

.m-t-35 {
    margin-top: 35px;
}

.m-t-40 {
    margin-top: 40px;
}

.m-t-45 {
    margin-top: 45px;
}

.m-t-50 {
    margin-top: 50px;
}

.m-b-5 {
    margin-bottom: 5px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.m-b-15 {
    margin-bottom: 15px;
}

.m-b-20 {
    margin-bottom: 20px;
}

.m-b-25 {
    margin-bottom: 25px;
}

.m-b-30 {
    margin-bottom: 30px;
}

.m-b-35 {
    margin-bottom: 35px;
}

.m-b-40 {
    margin-bottom: 40px;
}

.m-b-45 {
    margin-bottom: 45px;
}

.m-b-50 {
    margin-bottom: 50px;
}

.bold {
    font-weight: bold;
}

.btn {
    position: relative;
    cursor: pointer;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[aria-labelledby="my-subscriptions"] input[type="text"],
[aria-labelledby="my-subscriptions"] input[type="date"],
[aria-labelledby="my-subscriptions"] input[type="email"],
[aria-labelledby="my-subscriptions"] input[type="number"],
[aria-labelledby="my-subscriptions"] input[type="password"],
[aria-labelledby="my-subscriptions"] input[type="search"],
[aria-labelledby="my-subscriptions"] input[type="tel"],
[aria-labelledby="my-subscriptions"] input[type="url"],
[aria-labelledby="my-subscriptions"] select,
[aria-labelledby="my-subscriptions"] textarea,
#myaccount_details input[type="text"],
#myaccount_details input[type="date"],
#myaccount_details input[type="email"],
#myaccount_details input[type="number"],
#myaccount_details input[type="password"],
#myaccount_details input[type="search"],
#myaccount_details input[type="tel"],
#myaccount_details input[type="url"],
#myaccount_details select,
#myaccount_details textarea {
    width: 100%;
    min-height: 53px;
    padding: 0 !important;
    border-bottom: 1px solid #a8a8a8;
    background-color: white;
    font-family: "Polin", serif;
    font-size: 22px;
    font-weight: 400;
}

.form-group {
    position: relative;
    width: 100%;
}

.form-group:not(:last-child) {
    margin-bottom: 20px;
}

.form-group.flex {
    display: flex;
}

.form-group.flex.justify-content-start {
    justify-content: flex-start;
}

.form-group.flex.justify-content-center {
    justify-content: center;
}

.form-group.flex.justify-content-end {
    justify-content: flex-end;
}

.form-update-invoice-details {
    max-width: 600px;
}

.form-update-invoice-details .flex {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

[aria-labelledby="my-subscriptions"] .form-group label,
.form-update-invoice-details .form-group label {
    display: block;
    color: #616976;
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

[aria-labelledby="my-subscriptions"] .form-group input[type="text"],
[aria-labelledby="my-subscriptions"] .form-group input[type="email"],
[aria-labelledby="my-subscriptions"] .form-group input[type="password"],
.form-update-invoice-details .form-group input[type="text"],
.form-update-invoice-details .form-group input[type="email"] {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #a8a8a8;
    border-radius: 0;
    background-color: white;
    color: black;
    font-family: "Polin", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

[aria-labelledby="my-subscriptions"] .form-group label[for="last_name"],
[aria-labelledby="my-subscriptions"] .form-group input[name="last_name"] {
    display: none;
}

.form-update-invoice-details.form-group button[type="submit"] {
    padding: 10px 50px !important;
    font-size: 21px;
    font-weight: 700;
}

#add_payment_method button[type="submit"] {
    font-size: 21px;
    font-weight: 700;
}

form.elementor-form button[type="submit"] svg {
    position: relative;
}

#myaccount_contact button[type="submit"] svg {
    top: 1px;
}

#myaccount_details button[type="submit"] svg {
    top: 3px;
}

.woocommerce-account .e-n-tabs-heading {
    display: inline-flex;
    justify-content: center;
    margin: 0 auto;
    padding: 10px 30px;
    border: 2px solid #0648ac;
    border-radius: 0;
    background-color: white;
}

.woocommerce-account .e-n-tabs-heading[aria-selected="true"] {
    font-weight: 700 !important;
}

.woocommerce-account .e-n-tabs-content div[aria-labelledby="my-subscriptions"] .e-con-inner {
    max-width: 100%;
}

#my-payments-wrapper .order-panel,
#my-subscriptions-wrapper .order-panel {
    padding: 40px;
    box-shadow: 1px 2px 20px 0 rgba(6, 72, 170, 0.35);
    background-color: white;
}

#my-payments-wrapper .order-panel:not(:last-child),
#my-subscriptions-wrapper .order-panel:not(:last-child) {
    margin-bottom: 40px;
}

#my-payments-wrapper .order-panel .order-header,
#my-subscriptions-wrapper .order-panel .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#my-payments-wrapper .order-panel .order-header h3,
#my-subscriptions-wrapper .order-panel .order-header h3 {
    margin: 0;
    font-family: "Polin", sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

#my-payments-wrapper .order-panel .order-header .order-date,
#my-subscriptions-wrapper .order-panel .order-header .order-date {
    cursor: pointer;
}

#my-payments-wrapper .order-panel .order-header .order-date .date,
#my-subscriptions-wrapper .order-panel .order-header .order-date .date {
    font-family: "Polin", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

#my-payments-wrapper .order-panel .order-header .order-date i,
#my-subscriptions-wrapper .order-panel .order-header .order-date i {
    margin-right: 10px;
}

#my-payments-wrapper .order-panel .order-item,
#my-subscriptions-wrapper .order-panel .order-item {
    display: none;
    margin-top: 40px;
}

#my-payments-wrapper .order-panel .order-item.active,
#my-subscriptions-wrapper .order-panel .order-item.active {
    display: block;
}

#my-payments-wrapper .order-panel .order-item ul,
#my-payments-wrapper .order-panel .order-item ol,
#my-subscriptions-wrapper .order-panel .order-item ul,
#my-subscriptions-wrapper .order-panel .order-item ol {
    margin: 20px 0;
    padding: 0 30px 0 0;
}

#my-subscriptions-wrapper .order-panel .companies-order-number {
    font-family: "Polin", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

#my-subscriptions-wrapper .order-panel .boxes {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
}

#my-subscriptions-wrapper .order-panel .boxes .order-item-box {
    position: relative;
    min-width: 384px;
    min-height: 212px;
    padding: 20px;
    border: 2px solid #3c5bff;
    border-radius: 0;
}

#my-subscriptions-wrapper .order-panel .boxes .order-item-box .product-communications-companies-logo {
    position: absolute;
    top: 10px;
    right: 10px;
    max-width: 30px;
    width: 100%;
    max-height: 30px;
}

#my-subscriptions-wrapper .order-panel .boxes .order-item-box .icon {
    max-width: 50px;
    width: 100%;
    height: 50px;
}

#my-subscriptions-wrapper .order-panel .boxes .order-item-box .title {
    margin: 0;
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

#my-subscriptions-wrapper .order-panel .boxes .order-item-box .value {
    margin: 0 0 10px 0;
    font-family: "Polin", sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
}

#my-subscriptions-wrapper .order-panel .boxes .order-item-box > a {
    margin: 0;
    color: #3c5bff;
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-decoration: underline;
}

#my-subscriptions-wrapper .order-panel .internet-usage-check p {
    margin: 0 0 5px 0;
    font-family: "Polin", sans-serif;
    font-size: 24px;
    line-height: 1.2;
}

#my-subscriptions-wrapper .order-panel .internet-usage-check a.btn {
    display: inline-flex;
    gap: 10px;
    margin-top: 15px;
    padding: 10px 20px;
    border: 2px solid #0648ab;
    background-color: white;
    color: #0648ab;
    font-size: 21px;
    font-weight: 700;
}

.order-panel hr {
    height: 4px;
    margin: 50px 0;
    border: none;
    background-color: #ffb800;
}

#my-payments-wrapper .order-panel .order-item .direct-debit a {
    color: #0648ab;
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-decoration: underline;
}

#my-payments-wrapper .order-panel li {
    margin: 0 0 10px 0;
}

#my-payments-wrapper .order-panel .payment-method {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 30px 0 50px 0;
}

#my-payments-wrapper .order-panel .payment-method i {
    font-size: 36px;
}

#my-payments-wrapper .order-panel .payment-method p.label {
    color: #616976;
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

#my-payments-wrapper .order-panel .payment-method .credit-card-number p.value {
    direction: ltr;
}

#my-payments-wrapper .order-panel .payment-method p.value {
    margin-bottom: 0;
    font-family: "Polin", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
}

#my-payments-wrapper .order-panel .invoices-table {
    max-width: 500px;
    margin-top: 80px;
}

#my-payments-wrapper .order-panel .invoices-table .thead {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 10px 0;
    color: #616976;
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: right;
}

#my-payments-wrapper .order-panel .invoices-table .tbody {
    color: black;
    font-family: "Polin", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    text-align: right;
}

#my-payments-wrapper .order-panel .invoices-table .tbody .row {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 10px 0;
}

#my-payments-wrapper .order-panel .invoices-table .tbody .row .document-number {
    direction: ltr;
}

#my-payments-wrapper .order-panel .invoices-table .tbody .row:not(:last-child) {
    border-bottom: 1px solid #a8a8a8;
}

#my-payments-wrapper .order-panel .invoices-table .document-number {
    min-width: 120px;
}

#my-payments-wrapper .order-panel .invoices-table .date {
    min-width: 120px;
}

#my-payments-wrapper .order-panel .invoices-table .amount {
    min-width: 120px;
}

#my-payments-wrapper .order-panel .invoices-table .actions {
    min-width: 140px;
}

#my-payments-wrapper .order-panel .invoices-table .actions a,
#my-payments-wrapper .order-panel .invoices-table .actions a i {
    color: black;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00193e33;
    z-index: 100;
}

.popup.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup .close-popup {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 23px;
    height: 23px;
    cursor: pointer;
}

.popup .popup-wrapper {
    position: relative;
}

.popup .popup-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 730px;
    margin: 0 auto;
    padding: 70px;
    border-radius: 15px;
    box-shadow: 1px 2px 20px 0 rgba(6, 72, 170, 0.35);
    background-color: white;
}

.popup .popup-content h2 {
    margin: 0;
    font-size: 32px;
    line-height: 47px;
}

#upload-asmachta .popup-content [name="asmachta_file"] {
    display: none;
}

#upload-asmachta .popup-content .upload-asmachta-file {
    cursor: pointer;
}

#upload-asmachta .popup-content p.before-upload-description {
    margin-bottom: 25px;
    text-align: center;
}

#upload-asmachta .popup-content .upload-asmachta-form {
    width: 100%;
    padding: 30px;
    border: 1px dotted;
    border-radius: 15px;
    text-align: center;
}

#upload-asmachta .popup-content p.upload-description {
    margin: 0;
    color: #606060;
    font-weight: 500;
    font-size: 15px;
}

#upload-asmachta .popup-content .errors .alert {
    margin-top: 20px;
}

#check-internet-usage .popup-content select[name="check_subscription"] {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: auto;
    margin-top: 10px;
    padding: 0 15px 0 50px !important;
    border: 1px solid black;
    border-radius: 7px;
    background-image: url("data:image/svg+xml;utf8,<svg width=\"15\" height=\"9\" viewBox=\"0 0 15 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.12109 1.45508L7.62109 7.95508L14.1211 1.45508\" stroke=\"black\" stroke-width=\"1.36842\"/></svg>");
    background-repeat: no-repeat;
    background-position: left 20px center;
    background-color: #ffffff;
    background-size: 16px;
    font-size: 20px;
    cursor: pointer;
}

#check-internet-usage .popup-content .styled-select {
    position: relative;
}

#check-internet-usage .popup-content .styled-select.loading::before {
    top: 35px;
    left: 30px;
}

#check-internet-usage .popup-content .errors {
    margin-top: 30px;
}

#check-internet-usage .popup-content .errors .alert {
    margin-bottom: 0;
}

.internet-usage-display {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.internet-usage-display .progress {
    position: relative;
    margin: 30px 0;
    text-align: center;
}

.internet-usage-display .bar-overflow {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 250px;
    margin-bottom: -185px;
}

.internet-usage-display .bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 15px solid #b9b9b9;
    border-bottom-color: #3c5bff;
}

.internet-usage-display .percentage-symbol {
    display: inline-block;
    color: #3c5bff;
    font-family: "Polin", sans-serif;
    font-size: 92px;
    font-weight: 400;
    line-height: 1.2;
}

.internet-usage-display .percentage {
    display: inline-block;
    margin-bottom: 20px;
    color: #3c5bff;
    font-family: "Polin", sans-serif;
    font-size: 92px;
    font-weight: 400;
    line-height: 1.2;
}

.internet-usage-display .data p:first-child {
    margin: 0;
    font-family: "Polin", sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

.internet-usage-display .data p:last-child {
    margin: 0;
    font-family: "Polin", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
}

.internet-usage-display .progress-reading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 50px;
    font-family: "Polin", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.internet-usage-display .progress-reading .box {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 5px;
}

.internet-usage-display .progress-reading .box.grey {
    background-color: #b9b9b9;
}

.internet-usage-display .progress-reading .box.blue {
    background-color: #3c5bff;
}

.circle {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: black;
}

.circle.green {
    background-color: #03a727;
}

.circle.red {
    background-color: #ff0000;
}

#my-subscriptions-wrapper .circle {
    margin-bottom: 2px;
}

.step1,
.step2 {
    cursor: pointer;
}

.step2.active i.far {
    position: relative;
    border-radius: 50%;
    box-shadow: 1px 2px 8px 0 #3c5bff73;
}

.step2.active i.far::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3c5bff;
    border-radius: 50%;
}

.step2.col2 .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    z-index: 100;
}

.step2.col2:hover .dropdown {
    display: flex;
}

.step2.col2 .dropdown li.elementor-icon-list-item.active > span {
    padding-right: 10px;
    color: #0648ac;
}

.step1.active {
    outline: 2px solid #3c5bff;
    box-shadow: 1px 2px 17px 0 #0648ab59;
}

.step1.active.col1 {
    border-radius: 0 18px 18px 0;
}

.step1.active.col2 {
    border-radius: 0;
}

.step1.active.col3 {
    border-radius: 18px 0 0 18px;
}

.loading.block {
    position: relative;
    display: block;
    height: 30px;
}

.loading::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
    border: 1px solid #cccccc;
    border-top-color: #0648ab;
    animation: spinner .6s linear infinite;
}

.animation-spinner {
    animation: spinner 1.5s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

#homepage-which-internet-wrapper {
    display: none;
}

#homepage-which-internet-wrapper.active {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

#homepage-which-internet-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
}

#homepage-which-internet-wrapper > div,
#homepage-which-internet-wrapper > div > div,
#homepage-which-internet-wrapper > div > div > div,
#homepage-which-internet-wrapper > div > div > div > div {
    width: inherit;
    height: inherit;
}

.elementor-field-type-radio.elementor-field-group-counter_type {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

#form_bezeq_energy label[for="form-field-counter_type-0"],
#form_bezeq_energy label[for="form-field-counter_type-1"] {
    display: inline-flex;
    align-items: center;
}

#form_bezeq_energy .elementor-field-group-methods_of_payment .elementor-field-option:not(:last-child),
#form_bezeq_energy .elementor-field-group-counter_type .elementor-field-option:not(:last-child) {
    margin-bottom: 10px;
}

#form_bezeq_energy label[for="form-field-counter_type"],
#form_bezeq_energy label[for="form-field-methods_of_payment"] {
    margin-top: 5px;
    margin-bottom: 10px;
    font-weight: bold;
}

#form_bezeq_energy label[for="form-field-counter_type-0"]::before {
    content: "";
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    width: 70px;
    height: 70px;
    background-image: url("https://i-b.co.il/wp-content/uploads/2024/05/bezeq_smart_counter.jpg");
    background-size: cover;
}

#form_bezeq_energy label[for="form-field-counter_type-1"]::before {
    content: "";
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    width: 70px;
    height: 70px;
    background-image: url("https://i-b.co.il/wp-content/uploads/2024/05/bezeq_regular_counter.jpg");
    background-size: cover;
}

.register-login-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 80px;
    margin: 0 auto;
    max-width: 1320px;
    padding: 70px;
    box-shadow: 1px 2px 20px 0 rgba(5, 72, 170, 0.35);
    background-color: white;
}

.register-login-wrapper h2 {
    margin: 0 0 20px 0;
}

.register-login-wrapper .col {
    flex: 1;
}

.register-login-wrapper .form-group {
    margin-bottom: 20px;
}

.register-login-wrapper label {
    display: block;
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 700;
}

.register-login-wrapper input[type="email"],
.register-login-wrapper input[type="password"] {
    width: 100%;
    padding: 10px;
}

.register-login-wrapper input[type="checkbox"] {
    position: relative;
    top: 4px;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 17px;
    height: 17px;
    margin: 0 0 0 5px;
    line-height: 1;
}

.register-login-wrapper .form-group label[for="login_rememberme"] {
    display: inline-block;
    margin: 0;
    line-height: 1;
}

.register-login-wrapper button,
.register-login-wrapper button:hover,
.register-login-wrapper button:active,
.register-login-wrapper button:focus {
    position: relative;
    padding: 10px 15px;
    border: none;
    border-radius: 0;
    background-color: #0648ab;
    color: white;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
}

.register-login-wrapper button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.register-login-wrapper .form-errors {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 400;
}

.register-login-wrapper .form-errors.success {
    color: green;
}

.register-login-wrapper .form-errors.danger {
    color: red;
}

.register-login-wrapper p {
    margin: 0 0 10px 0;
}

.register-login-wrapper p,
.register-login-wrapper a {
    font-size: 18px;
    font-weight: 400;
}

.register-login-wrapper a,
.register-login-wrapper a:hover {
    color: #ffb800;
    text-decoration: underline;
}

.register-login-wrapper #form-retrieve-password {
    display: none;
}

#form-retrieve-password {
    margin-top: 40px;
}

#login_last_name,
#register_last_name,
#retrieve_password_last_name,
#reset_password_last_name {
    display: none;
}

#change-package .package-details {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

#change-package .package-details .separator {
    font-size: 12px;
}

.tabs {
    position: relative;
    display: flex;
    flex-direction: column;
}

.tabs nav {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 5px;
    box-shadow: 1px 2px 20px 0 rgba(5, 72, 170, 0.35);
}

.tabs nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.tabs nav ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    margin: 0;
    padding: 13px 40px 10px 40px;
    color: #0648ab;
    font-family: "Polin", sans-serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.tabs nav ul li.active {
    background-color: #0648ab;
    color: white;
    font-weight: 700;
}

.tabs .tabs-content .tab {
    display: none;
}

.tabs .tabs-content .tab.active {
    display: block;
}

#change-package .tabs nav ul li {
    padding: 15px 80px 13px 80px;
}

#form-change-package {
    width: 100%;
}

#form-change-package button[type="submit"] {
    border-width: 2px;
    font-size: 21px;
    font-weight: 700;
}

#form-change-package .package-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

#form-change-package .package-options .package-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 20px 40px;
    border-top: 1px solid #828eca80;
    cursor: pointer;
}

#form-change-package .package-options .package-option.active {
    border: 2px solid #3c5bff !important;
    box-shadow: 1px 2px 17px 0 #0648ab59;
}

#form-change-package .package-options .package-option.active::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    width: 57px;
    height: 57px;
    margin-top: -26px;
    z-index: 10;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width%3D%2258%22 height%3D%2259%22 viewBox%3D%220 0 58 59%22 fill%3D%22none%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg filter%3D%22url(%23filter0_d_876_883)%22%3E%3Ccircle cx%3D%2228.4512%22 cy%3D%2228.4512%22 r%3D%2218.4512%22 fill%3D%22%233C5BFF%22/%3E%3C/g%3E%3Cpath d%3D%22M19.0742 29.2285L25.5559 35.7102L39.1674 22.0986%22 stroke%3D%22white%22 stroke-width%3D%222.59267%22/%3E%3Cdefs%3E%3Cfilter id%3D%22filter0_d_876_883%22 x%3D%220.308562%22 y%3D%220.958994%22 width%3D%2257.5861%22 height%3D%2257.5861%22 filterUnits%3D%22userSpaceOnUse%22 color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood flood-opacity%3D%220%22 result%3D%22BackgroundImageFix%22/%3E%3CfeColorMatrix in%3D%22SourceAlpha%22 type%3D%22matrix%22 values%3D%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0%22 result%3D%22hardAlpha%22/%3E%3CfeOffset dx%3D%220.650432%22 dy%3D%221.30086%22/%3E%3CfeGaussianBlur stdDeviation%3D%225.17094%22/%3E%3CfeComposite in2%3D%22hardAlpha%22 operator%3D%22out%22/%3E%3CfeColorMatrix type%3D%22matrix%22 values%3D%220 0 0 0 0.0235294 0 0 0 0 0.282353 0 0 0 0 0.670588 0 0 0 0.35 0%22/%3E%3CfeBlend mode%3D%22normal%22 in2%3D%22BackgroundImageFix%22 result%3D%22effect1_dropShadow_876_883%22/%3E%3CfeBlend mode%3D%22normal%22 in%3D%22SourceGraphic%22 in2%3D%22effect1_dropShadow_876_883%22 result%3D%22shape%22/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

#form-change-package .package-options .package-option:last-child {
    border-bottom: 1px solid #828eca80;
}

#form-change-package .package-options .package-option .thumbnail {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background-color: #d9d9d9;
}

#form-change-package .package-options .package-option .name {
    flex-grow: 2;
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
}

#form-change-package .package-options .package-option .prod-program,
#form-change-package .package-options .package-option .price {
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    flex-shrink: 0;
}

#form-change-package .no-package-options h2 {
    font-family: "Polin", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 47px;
    text-align: center;
}


#form-change-package .no-package-options p {
    font-family: "Polin", sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
}

#form-change-package .no-package-options p.desc {
    font-size: 32px;
    line-height: 37px;
}

#form-change-package .package-options-loader.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#change-sim-card-number .current-sim-card-number-text {
    margin: 0;
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 20px;
}

#change-sim-card-number .legend {
    width: 100%;
    margin-top: 20px;
    padding: 30px;
    border: 1px solid #3c5bff;
    border-radius: 13px;
}

#change-sim-card-number .legend .label {
    margin: 0 0 20px 0;
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
}

#change-sim-card-number .current-sim-card-number-text .focus {
    display: inline-block;
    vertical-align: middle;
}

#change-sim-card-number .current-sim-card-number-text img {
    display: inline-block;
    margin-right: 5px;
}

#change-sim-card-number .legend .sim-number-wrapper {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

#change-sim-card-number .input-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 5px;
}

#change-sim-card-number .legend .sim-number-wrapper .input-container input[type="text"].digit-input {
    width: 25px;
    height: 28px;
    min-height: initial;
    font-size: 18px;
    text-align: center;
    border: 1px solid black;
    border-radius: 3px;
    outline: none;
}

#change-sim-card-number .legend .sim-number-wrapper .input-container input[type="text"].digit-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
}

#change-sim-card-number .legend .sim-number-wrapper .sim-card-prefix {
    font-family: "Polin", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 8px;
}

#change-sim-card-number .btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 13px 40px;
    border: none;
    background-color: #0648ab;
    color: white;
    font-size: 16px;
    font-weight: 700;
}

#change-sim-card-number .btn-primary:hover,
#change-sim-card-number .btn-primary:active {
    background-color: #0648ab !important;
}

#change-sim-card-number .btn-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 13px 40px;
    border: 2px solid #0648ab;
    border-radius: 0;
    background-color: white;
    color: #0648ab;
    font-size: 16px;
    font-weight: 700;
}

#change-sim-card-number .btn-secondary:hover,
#change-sim-card-number .btn-secondary:active {
    background-color: white !important;
}

#change-sim-card-number .errors {
    width: 100%;
    margin-top: 10px;
    font-family: "Polin", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
}

#change-sim-card-number .errors .error {
    color: red;
}

#change-sim-card-number .errors .success {
    color: green;
}

#change-sim-card-number .tab {
    display: none;
}

#change-sim-card-number .tab.active {
    display: block;
}

#change-sim-card-number .tab2 {
    max-width: 210px;
    text-align: center;
}

#change-sim-card-number .tab3 {
    text-align: center;
}

#change-sim-card-number .tab3 .message {
    display: none;
}

#change-sim-card-number .tab3 .message.active {
    display: block;
}

#change-sim-card-number .tab3 input[type="text"] {
    display: inline-block;
    width: auto;
    border: none;
    font-family: "Polin", sans-serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    letter-spacing: 1px;
}

#change-sim-card-number .flex {
    display: flex;
    width: 100%;
}

#change-sim-card-number .flex.justify-content-end {
    justify-content: flex-end;
}

#change-sim-card-number .display-sim-card-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #3c5bff;
    border-radius: 11px;
    box-shadow: 0 0 5px 0 rgba(60, 91, 255, 0.1);
}

@media (max-width: 1024px) {
    [aria-labelledby="my-subscriptions"] input[type="text"],
    [aria-labelledby="my-subscriptions"] input[type="date"],
    [aria-labelledby="my-subscriptions"] input[type="email"],
    [aria-labelledby="my-subscriptions"] input[type="number"],
    [aria-labelledby="my-subscriptions"] input[type="password"],
    [aria-labelledby="my-subscriptions"] input[type="search"],
    [aria-labelledby="my-subscriptions"] input[type="tel"],
    [aria-labelledby="my-subscriptions"] input[type="url"],
    [aria-labelledby="my-subscriptions"] select,
    [aria-labelledby="my-subscriptions"] textarea,
    #myaccount_details input[type="text"],
    #myaccount_details input[type="date"],
    #myaccount_details input[type="email"],
    #myaccount_details input[type="number"],
    #myaccount_details input[type="password"],
    #myaccount_details input[type="search"],
    #myaccount_details input[type="tel"],
    #myaccount_details input[type="url"],
    #myaccount_details select,
    #myaccount_details textarea {
        min-height: 40px;
        font-size: 16px;
    }

    .woocommerce-account .e-n-tabs-heading {
        width: 100%;
        padding: 10px;
    }

    .woocommerce-account .e-n-tabs .e-n-tabs-heading button {
        padding: 7px;
    }

    .woocommerce-account .e-n-tabs .e-n-tabs-heading button .e-n-tab-title-text {
        font-size: 16px;
    }

    #my-payments-wrapper .order-panel .order-header h3,
    #my-subscriptions-wrapper .order-panel .order-header h3 {
        font-size: 16px;
    }

    #my-payments-wrapper .order-panel,
    #my-subscriptions-wrapper .order-panel {
        padding: 20px;
    }

    #my-payments-wrapper .order-panel:not(:last-child),
    #my-subscriptions-wrapper .order-panel:not(:last-child) {
        margin-bottom: 20px;
    }

    #my-payments-wrapper .order-panel .order-header .order-date,
    #my-subscriptions-wrapper .order-panel .order-header .order-date {
        font-size: 13px;
    }

    #check-internet-usage .popup-content select[name="check_subscription"],
    #my-subscriptions-wrapper .order-panel .internet-usage-check p {
        font-size: 16px;
    }

    #my-subscriptions-wrapper .order-panel .internet-usage-check a.btn {
        padding: 8px 15px 7px 15px;
        font-size: 17px;
        line-height: 1.7;
    }

    .popup .popup-wrapper {
        width: 95%;
    }

    .popup .close-popup {
        top: 20px;
        left: 20px;
        width: 14px;
        height: 14px;
    }

    .popup .popup-content {
        width: 100%;
        padding: 35px;
    }

    .popup .popup-content h2 {
        font-size: 22px;
        line-height: 34px;
    }

    #check-internet-usage .popup-content select[name="check_subscription"] {
        width: 100%;
    }

    .internet-usage-display .bar-overflow {
        height: 150px;
        margin-bottom: -105px;
    }

    .internet-usage-display .bar {
        height: 300px;
    }

    .internet-usage-display .percentage-symbol {
        font-size: 44px;
    }

    .internet-usage-display .percentage {
        margin-bottom: 10px;
        font-size: 50px;
    }

    .internet-usage-display .data p:first-child {
        font-size: 18px;
    }

    .internet-usage-display .progress-reading,
    .internet-usage-display .data p:last-child {
        font-size: 14px;
    }

    .internet-usage-display .progress-reading {
        margin-top: 30px;
    }

    .internet-usage-display .progress-reading .box {
        margin-bottom: -3px;
    }

    #my-subscriptions-wrapper .order-panel .boxes {
        position: relative;
        overflow-x: scroll;
        margin-bottom: 30px;
    }

    #my-subscriptions-wrapper .order-panel .companies-order-number {
        font-size: 16px;
    }

    #my-subscriptions-wrapper .order-panel .boxes .order-item-box .icon {
        width: 40px;
        height: 40px;
    }

    #my-subscriptions-wrapper .order-panel .boxes .order-item-box {
        min-width: 90%;
        min-height: 160px;
    }

    #form-change-package .package-options .package-option .name,
    #my-subscriptions-wrapper .order-panel .boxes .order-item-box .value
    #my-subscriptions-wrapper .order-panel .boxes .order-item-box > a,
    #my-subscriptions-wrapper .order-panel .boxes .order-item-box .title {
        font-size: 16px;
    }
}