@import url('./globalModal.css');
@import url('../loaders/loaderEllipsis.css');

.modal-card {
    max-width: 450px;
    width: 100%;
    border-radius: 11px;
}

.delete:not(.tag-delete-btn) {
    position: absolute;
    right: 0;
    top: 0;
}

.payment__modal__content {
    gap: 1rem;
}

.payment__modal__item {
    gap: 2rem;
}

.payment__modal__item > h3,
.payment__modal__item > a {
    width: 35%;
    font-weight: bold;
    flex-shrink: 0
}

a.change_payment_method_btn {
    text-decoration: underline; 
}

.change_payment_method_btn:hover {
    cursor: pointer;
}

.payment__modal__payment_method_list {
    overflow: auto;
    max-height: 150px;
}

.payment__modal__payment_method_list > .payment__modal__content:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.payment__modal__payment_method_list .payment__modal__item > h3,
.payment__modal__payment_method_list .payment__modal__item > a {
    width: 30%;
}

.payment__modal__payment_method_list .payment__modal__item > div:first-of-type {
    max-width: 220px;
}

.payment__modal__payment_method_list > hr {
    margin: unset;
}

.payment__modal__payment_method_list > .payment__modal__content {
    /* height: calc(1.5rem + 67.5px);*/
    padding: 1.5rem 0;
}

.payment__check_container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}

.isSaved > i,
.isNotSaved > i{
    font-size: 5rem;
}

.close_btn_container {
    width:90%;
    gap: 1rem;
}

.close_btn_container > button {
    flex: 1 1 50%;
} 

.change_payment_header__back_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;

    background: unset;
    border: unset;
    width:10%
}

.change_payment_header {
    width: 100%;
}

.invoices_tags > div:first-child {
    width: 100%;
    flex-wrap: wrap;
    max-height: 100px;
    overflow: auto;
    gap: 1rem;
}

.invoices_tags .tag {
    font-size: 0.63rem;
    padding-right: unset;
    flex: 1 1 120px;
    max-width: 120px;
}

.surcharge_title {
    width: 200px;
}