.card-table-header{
    background-color: var(--secondary-color-alt4);
    color:var(--secondary-color-alt3);
    font-size: 1.167rem;
    font-weight: var(--font-weight-sizeOne);
}

.card-text-color{
    color:var(--secondary-color-alt3);
    font-size: 1.333rem;
    font-weight: var(--font-weight-sizeOne);
}

.card-price{
    color:var(--primary-color);
    font-size: 1.333rem;
    font-weight: var(--font-weight-sizeOne);
}

.card-rate-comment{
    margin-right: 10px;
}

.card-mobile-title{
    color:var(--secondary-color-alt3);
    font-size: 1.167rem;
    font-weight: var(--font-weight-sizeOne);
}

.shipping-currency{
    color:var(--primary-color)
}

#mobile-profileCard{
    display:none;
    margin-right: 0px;
}

.payment-method-card {
    width: 82px;
    height: 82px;
    margin: 0 15px 30px 15px;
    border: 1px #cccccc solid;
    border-radius: 3px;
    padding: 20px;
}

.payment-method-card img {
    width: 100%;
    height: auto;
}

.card-body-shipping{
    flex: 1 1 auto;
    padding: 2rem 3rem;
    margin: 0;
}
.card-body-mada{
    flex: 1 1 auto;
    padding: 2rem;
    margin: auto;
}

.card-title-shipping{
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: var(--font-wieght-sizeTwo);
}
.payment-icon{
    font-size: 82px;
    margin-top: 5px;
    color:var(--sucess-color)
}

.card-body-mada{
    flex: 1 1 auto;
    padding: 2rem;
    margin: auto;
}

.shipping-payment-card {
    width: 75%;
    min-height: 180px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    height: auto;
}

.card-title-shipping{
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: var(--font-wieght-sizeTwo);
}
.payment-icon{
    font-size: 82px;
    margin-top: 5px;
    color:var(--sucess-color)
}

.shipping-text{
    margin: 0px;
}
.shipping-text p{
    font-size: 1.133rem;
    color:var(--secondary-color-alt12);
    font-weight: var(--font-wieght-sizeOne);
    width: 100px;
}

.card-account-details {
    margin-left: 20px;
}

.rtl .card-account-details {
    margin-left: 0px;
    margin-right: 20px;
}

.account-content-lg {
    margin-right: 0px;
    margin-left: 0px;
}

.s-row .s-content{
    margin-left: 10px;
}

.rtl .s-row .s-content{
    margin-left: 0px;
    margin-right: 10px;
}

.tab-content-shipping .card-table {
    margin-bottom: 10px;
}

.tab-content-shipping .card-table {
    margin-bottom: 10px;
}

.tab-content-shipping .options-table .col {
    flex-basis: 1;
}

.color-success{
    color: #007bff;
}

.cursor-pointer {
    cursor: pointer;
}

.text-decoration-underline {
    text-decoration: underline;
}

.shipping-cities-modal .icon-search {
    position: absolute;
    right: 15px;
    top: 12px;
    font-size: 18px;
}

.rtl .shipping-cities-modal .icon-search {
    right: unset;
    left: 15px;
}

@media only screen and (max-width: 768px) {
    #desktop-profile-card{
        display: none;
    }
    #mobile-profileCard{
        display:block;
    }

    .tab-content-shipping .options-table .col {
        flex-basis: unset;
    }

    .account-content-sm {
        margin-right: 0px;
        margin-left: 0px;
    }

    .variant-name-sm{
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .card-body-shipping {
        padding: 1rem;
    }

    .shipping-payment-card {
        width: 100%;
    }

    .card-account-details {
        margin-right: 0px !important;
        margin-left: 0px !important;
        margin-top: 10px;
    }

    .bank-image {
        margin-top: 10px;
    }

}

/* Shipping & Payment Navigation Text Color Fix */
.shipping-payment-vertical-menu *,
.shipping-payment-vertical-menu .profile-item-title,
.shipping-payment-vertical-menu .profile-item-description p,
.shipping-payment-vertical-menu .profile-item-image,
.shipping-payment-vertical-menu a {
    color: var(--secondary-color, #dedede) !important;
}

.shipping-payment-tabs-mobile *,
.shipping-payment-tabs-mobile .dropdown-toggle,
.shipping-payment-tabs-mobile .profile-item-title,
.shipping-payment-tabs-mobile .profile-item-image,
.shipping-payment-tabs-mobile .dropdown-menu > li > a,
.shipping-payment-tabs-mobile .theme-text-secondary {
    color: var(--secondary-color, #dedede) !important;
}

/* Dark Mode Support for Shipping & Payment Cards & Modal */
body.dark .profile-title,
.dark .profile-title {
    background: #1e1e1e !important;
    color: #ffffff !important;
}

body.dark .card-table .card,
body.dark .tab-content-shipping .card,
.dark .card-table .card,
.dark .tab-content-shipping .card {
    background-color: #1a1a1a !important;
    border: 1px solid #2d2d2d !important;
    color: #ffffff !important;
}

body.dark .card-table .card-body,
body.dark .tab-content-shipping .card-body,
.dark .card-table .card-body,
.dark .tab-content-shipping .card-body {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

body.dark .card-table-header,
.dark .card-table-header {
    background-color: #262626 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #333333 !important;
}

body.dark .card-text-color,
body.dark .card-mobile-title,
.dark .card-text-color,
.dark .card-mobile-title {
    color: #d0d0d0 !important;
}

body.dark .variant-name-sm,
.dark .variant-name-sm {
    color: #b0b0b0 !important;
}

body.dark .color-success,
.dark .color-success {
    color: #5bc0de !important;
}

body.dark .icon-clear,
.dark .icon-clear {
    color: #e0e0e0 !important;
}

body.dark .shipping-payment-card,
.dark .shipping-payment-card {
    background-color: #1a1a1a !important;
    border: 1px solid #2d2d2d !important;
    color: #ffffff !important;
}

body.dark .card-body-shipping,
.dark .card-body-shipping {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

body.dark .shipping-text p,
.dark .shipping-text p {
    color: #a0a0a0 !important;
}

body.dark .shipping-text span,
.dark .shipping-text span {
    color: #ffffff !important;
}

body.dark .payment-method-card,
.dark .payment-method-card {
    background-color: #252525 !important;
    border: 1px solid #3d3d3d !important;
}

/* Modal Dark Mode */
body.dark .shipping-cities-modal .modal-content,
.dark .shipping-cities-modal .modal-content {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6) !important;
}

body.dark .shipping-cities-modal .modal-header,
.dark .shipping-cities-modal .modal-header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #2d2d2d !important;
    color: #ffffff !important;
}

body.dark .shipping-cities-modal .modal-title,
body.dark .shipping-cities-modal h4,
.dark .shipping-cities-modal .modal-title,
.dark .shipping-cities-modal h4 {
    color: #ffffff !important;
}

body.dark .shipping-cities-modal .close,
.dark .shipping-cities-modal .close {
    color: #ffffff !important;
    opacity: 0.85 !important;
    text-shadow: none !important;
}

body.dark .shipping-cities-modal .modal-body,
.dark .shipping-cities-modal .modal-body {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

body.dark .shipping-cities-modal .form-control,
body.dark .shipping-cities-modal input[type="text"],
.dark .shipping-cities-modal .form-control,
.dark .shipping-cities-modal input[type="text"] {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
}

body.dark .shipping-cities-modal .form-control::placeholder,
.dark .shipping-cities-modal .form-control::placeholder {
    color: #8e8e8e !important;
}

body.dark .shipping-cities-modal .icon-search,
.dark .shipping-cities-modal .icon-search {
    color: #b0b0b0 !important;
}

body.dark .shipping-cities-modal ul,
body.dark .shipping-cities-modal ul li,
.dark .shipping-cities-modal ul,
.dark .shipping-cities-modal ul li {
    color: #e0e0e0 !important;
    border-bottom: 1px solid #2d2d2d !important;
}

body.dark .shipping-cities-modal .modal-footer,
.dark .shipping-cities-modal .modal-footer {
    background-color: #1e1e1e !important;
    border-top: 1px solid #2d2d2d !important;
}

body.dark .shipping-cities-modal .btn-default,
.dark .shipping-cities-modal .btn-default {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
}