body {
    background: var(--color-tercery);
    scroll-behavior: smooth;
}

.main__title {
    color: var(--color-secundary);
    font-family: var(--font-family-bold);
    font-size: 2vw;
    text-align: center;
    display: block;
    width: 80%;
    margin-inline: auto;
    position: relative;
    padding-block: 0 1.5vw;
}


.main__title:after {
    content: '';
    width: 80%;
    height: 1px;
    background: var(--color-secundary);
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    bottom: 0;
}

.main__title:before {
    content: '';
    width: 40%;
    height: 4px;
    background: var(--color-primary);
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    bottom: -3.5px;
}

/* sold */
.sold {
    display: block;
    width: 100%;
    position: relative;
    width: 100%;
    height: auto;
    z-index: 800;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sold__container {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-block: 2vw;
    position: relative;
    overflow: hidden;
}

.sold__form {
    width: 40%;
    display: flex;
    flex-direction: column;
    margin-inline: 5%;
    margin-block: 1vw .5vw;
}

.sold__titles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: .6vw;
    background: var(--color-secundary);
    border-top: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    padding-block: .7vw;
    cursor: pointer;
    position: relative;
}

.sold__titles:hover .sold__title {
    transform: scale(1.05);
}

.sold__titles:hover .sold__show {
    transform: scale(1.1);
}

.sold__titles:after {
    content: '';
    width: 50%;
    height: 3px;
    background: var(--color-primary);
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    margin-inline: auto;
}

.sold__titles:hover:after {
    width: 100%;
    transition: .3s all ease;
}

.sold__titles-active:after {
    width: 100%;
}

.sold__title {
    color: var(--color-white);
    font-family: var(--font-family-black);
    font-size: 1.7vw;
    margin-inline: 2vw 0;
    transition: .3s all cubic-bezier(0,1.5,1,1.5);
}

.main__title {
    color: var(--color-dark);
    font-family: var(--font-family-black);
    font-size: 1.7vw;
    margin-block: 2vw 0;
}

.sold__show {
    width: 1.8vw;
    margin-inline: 0 1.5vw;
    transform: rotate(90deg);
    transition: .3s all cubic-bezier(0,1.5,1,1.5);
    filter: invert(1);
}

.sold__show-active {
    transform: rotate(-90deg);
}

.sold__subtitle {
    color: var(--color-black);
    font-family: var(--font-family-bold);
    font-size: 1.1vw;
    margin-block: 1vw;
}

.sold__slider {
    display: block;
    height: 0;
    overflow: hidden;
    padding-inline: 0 2px;
    transition: .3s all cubic-bezier(0,1.5,1,1.5);
}

.sold__sliders {
    display: block;
    height: max-content;
    position: relative;
}

#showItemSlidersToId3 {
    padding-block: 0 1vw;
}

.sold__total {
    color: var(--color-black);
    font-family: var(--font-family-light);
    font-size: 1.1vw;
    text-align: end;
    margin-block: 1vw;
}

.sold__two {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sold__content {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 46%;
    margin-block: .6vw;
}

.sold__content-facture {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    margin-block: .6vw;
}

.sold__label {
    color: var(--color-black);
    font-family: var(--font-family-light);
    font-size: 1vw;
}

.sold__factures {
    display: flex;
    align-items: center;
    margin-block: .4vw;
    margin-inline: 1vw 0;
}

.sold__label-facture {
    color: var(--color-black);
    font-family: var(--font-family-light);
    font-size: 1vw;
    margin-inline: .2vw 1vw;
}

.sold__input {
    font-family: var(--font-family-light);
    font-size: 1vw;
    padding: .1vw .5vw;
    width: calc(100% - 1vw);
    border: 1px solid var(--color-black);
    outline: none;
}

.sold__input:focus {
    filter: drop-shadow(4px 6px 6px black);
}

.sold__textarea {
    font-family: var(--font-family-light);
    font-size: 1vw;
    padding: .1vw .5vw;
    width: calc(100% - 1vw);
    height: 6vw;
    border: 1px solid var(--color-black);
    outline: none;
    margin-block: 0;
}

.sold__textarea:focus {
    filter: drop-shadow(4px 6px 6px black);
}

.sold__btn {
    display: block;
    width: 70%;
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: .9vw;
    text-align: center;
    padding: .4vw 1vw;
    margin-block: .5vw 0;
    margin-inline: 10%;
    background: var(--color-primary);
    border: 1px solid var(--color-secundary);
    outline: none;
    cursor: pointer;
    transition: .3s all ease;
}

.sold__btn:hover {
    filter: drop-shadow(4px 6px 6px black);
    transform: scale(1.05);
}

.sold__btn-envio {
    width: 100%;
    border: 1px solid var(--color-secundary);
    color: var(--color-secundary);
    padding-inline: 0;
    margin-block: 1vw 0;
    margin-inline: auto;
    background: #2EB743;
}

.sold__btn-payments {
    border: 1px solid var(--color-secundary);
    color: var(--color-secundary);
    background: var(--color-white);
}

/* Sold Products */
.sold__products {
    display: block;
    width: 30%;
    margin-inline: 8% 12%;
    margin-block: 0 .5vw;
}
.sold__items {
    width: 100%;
    height: auto;
    max-height: 25vw;
    overflow: auto;
    display: block;
}

.sold__item {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-black);
    padding-block: 1vw;
}

.sold__item:nth-of-type(1) {
    border-top: 1px solid var(--color-black);
}

.sold__images {
    display: flex;
    width: 20%;
    aspect-ratio: 1;
    height: auto;
    margin-inline: 5%;
}

.sold__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sold__texts {
    width: 65%;
    margin-inline: 0 5%;
    display: flex;
    flex-direction: column;
}

.sold__name {
    color: var(--color-black);
    font-family: var(--font-family-bold);
    font-size: 1vw;
    text-decoration: none;
}

.sold__price {
    color: var(--color-black);
    font-family: var(--font-family-light);
    font-size: .9vw;
    margin-block: .6vw;
}

.sold__btns {
    display: flex;
    align-items: center;
}

.sold__cards {
    width: max-content;
    text-decoration: none;
    padding: .2vw 1vw;
    background: var(--color-white);
    margin-inline: 1vw 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: .4s all ease;
    outline: none;
    border: 1px solid var(--color-black);
}

.sold__cards:hover {
    filter: drop-shadow(4px 6px 6px black);
}

.sold__cards:hover .sold_card {
    transform: scale(1.2);
}

.sold__card {
    width: 1vw;
    margin-inline: 0 .7vw;
    filter: invert(0);
    transition: .3s all ease;
}

.sold__delete {
    color: var(--color-black);
    font-family: var(--font-family-bold);
    font-size: .7vw;
}

.sold__flechas {
    display: block;
    width: 1.2vw;
    cursor: pointer;
    outline: none;
    background: none;
    border: none;
}

.sold__flechas:hover .sold__flecha {
    transform: scale(1.1);
}

.sold__flecha {
    width: 100%;
    transition: .3s all ease;
}

.sold__flechas:nth-of-type(1){
    transform: rotate(90deg);
}

.sold__flechas:nth-of-type(2){
    transform: rotate(-90deg);
}

.sold__qty {
    color: var(--color-black);
    font-family: var(--font-family-light);
    font-size: .7vw;
    width: 1vw;
    height: 1.6vw;
    padding: 0 .5vw;
    outline: none;
    border: 1px solid var(--color-black);
    margin-inline: .3vw;
}


.sold__buys {
    width: max-content;
    text-decoration: none;
    padding: .2vw 1vw;
    background: var(--color-primary);
    margin-inline: 1vw 0;
    margin-block: 1vw 0;
    cursor: pointer;
    display: flex;
    border-radius: .3vw;
    align-items: center;
    transition: .4s all ease;
    outline: none;
    border: 1px solid var(--color-white);
}

.sold__buys:hover {
    filter: drop-shadow(4px 6px 6px black);
}

.sold__buys:hover .sold_buy {
    transform: scale(1.2);
}

.sold__buy {
    width: 1.7vw;
    margin-inline: 0 .7vw;
    filter: invert(1);
    transition: .3s all ease;
}

.sold__label-buy {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: 1.1vw;
}

.sold__accounts {
    display: flex;
    width: max-content;
    padding: .2vw 1vw .2vw .5vw;
    border-radius: 1vw;
    margin-block: 0;
    margin-inline: 1vw 0;
    align-items: center;
    border: 1px solid var(--color-secundary);
    transition: .3s all ease;
    cursor: pointer;
}

.sold__icon {
    width: 1.3vw;
    margin-inline: 0 .6vw;
    transition: .4s all ease;
}

.sold__account {
    color: var(--color-secundary);
    font-family: var(--font-family-light);
    font-size: .9vw;
    text-decoration: underline;
    transition: .3s all ease;
}

.sold__accounts:hover {
    background: var(--color-secundary);
    transform: scale(1.05);
    filter: drop-shadow(4px 6px 6px black);
    border: 1px solid var(--color-white);
}

.sold__accounts:hover .sold__account {
    color: var(--color-white);
}

.sold__accounts:hover .sold__icon {
    filter: invert(1);
}

.sold__adv {
    color: var(--color-primary);
    font-family: var(--font-family-bold);
    font-size: 1vw;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 70%;
    padding-inline: 1vw;
    margin-inline: 10%;
    margin-block: 0;
}

/* Envios */
.envios {
    display: flex;
    align-items: center;
    padding-block: 1.4vw;
    width: 100%;
    border-top: 1px solid var(--color-secundary);
    border-bottom: 1px solid var(--color-secundary);
    cursor: pointer;
}

.envios:nth-of-type(1) { border-top: none; }
.envios:nth-last-of-type(1) { border-bottom: 2px solid var(--color-secundary); }

.envios__radio {
    width: 1vw;
    height: 1vw;
}

.envios__logo {
    height: 2vw;
    margin-inline: auto;
}

.envios__logo-yapur {
    height: 3vw;
}

.envios__texts {
    display: flex;
    flex-direction: column;
}

.envios__title {
    font-size: 1.5vw;
    font-weight: 600;
    text-align: end;
}

.envios__text {
    font-family: var(--font-family-light);
    font-size: 1vw;
    text-align: end;
}

.envios__adv {
    color: var(--color-secundary);
    font-size: 1vw;
    text-align: center;
    margin-block: .5vw;
}

.envios__disabled {
    color: var(--color-primary);
    font-size: 1vw;
    text-align: center;
    margin-block: .5vw 1.2vw;
    visibility: hidden;
}

/* Pago */
.pagos {
    display: flex;
    align-items: center;
    padding-block: 1.4vw;
    width: 100%;
    border-top: 1px solid var(--color-secundary);
    border-bottom: 1px solid var(--color-secundary);
    cursor: pointer;
}

.pagos:nth-of-type(1) { border-top: none; }
.pagos:nth-last-of-type(1) { border-bottom: 2px solid var(--color-secundary); }

.pagos__radio {
    width: 1vw;
    height: 1vw;
}

.pagos__logo {
    height: 2vw;
    margin-inline: auto;
}

.pagos__logo-yapur {
    height: 3vw;
}

.pagos__texts {
    display: flex;
    flex-direction: column;
}

.pagos__title {
    font-size: 1.5vw;
    font-weight: 600;
    text-align: end;
}

.pagos__text {
    font-family: var(--font-family-light);
    font-size: 1vw;
    text-align: end;
}

.pagos__adv {
    color: var(--color-secundary);
    font-size: 1vw;
    text-align: center;
    margin-block: .5vw 1.2vw;
}

/* Envios */
.card {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60000;
    transform: scale(0);
    transition: .3s all ease;
}

.card__container {
    width: max-content;
    height: auto;
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-secundary);
    position: relative;
}

.card__container:after {
    content: '';
    width: 3vw;
    height: 70%;
    background: var(--color-primary);
    border-top-right-radius: 1vw;
    border-bottom-right-radius: 1vw;
    position: absolute;
    right: -3vw;
    top: 0;
    bottom: 0;
    display: block;
    margin-block: auto; 
}

.card__returns {
    display: block;
    width: calc(100% - 2vw);
    max-height: 80vh;;
    overflow: auto;
    margin-inline: 1vw;
}

.card__titles {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: .5vw;
    background: var(--color-secundary);
    border-block: 1px solid var(--color-secundary);
    width: 90%;
    margin-inline: auto;
    margin-block: 1vw;
}

.card__progress {
    display: flex;
    width: 30vw;
    margin-inline: 4vw;
    height: 20px;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    overflow: hidden;
    margin-block: 1vw;
}

.card__load {
    display: flex;
    height: 100%;
    background: var(--color-primary);
    animation: loading 3s infinite linear;
}

@keyframes loading {
    0% { width: 0; }
    100% { width: 100%; }
}

.card__icon {
    width: 3vw;
    margin-inline: 0 1vw;
    border-radius: 50%;
    border: 1px solid var(--color-secundary);
}

.card__title {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: 1.4vw;
}

.card__code {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid var(--color-secundary);
    margin-block: 0 1vw;
}

.card__sees {
    display: flex;
    width: 100%;
    justify-content: start;
    align-items: center;
    margin-block: .5vw 0;
}

.card__check {
    width: 1vw;
    height: 1vw;
    border: 1px solid var(--color-secundary);
    outline: none;
    margin-inline: 0 .5vw;
}

.card__lbl {
    color: var(--color-secundary);
    font-family: var(--font-family-bold);
    font-size: 1vw;
    text-align: center;
}

.card__input {
    color: var(--color-secundary);
    font-family: var(--font-family-bold);
    font-size: 1vw;
    padding: .2vw 1vw;
    width: 13vw;
    border: 1px solid var(--color-secundary);
    outline: none;
    margin-block: 0 .5vw;
}

.card__input-user {
    width: 20vw;
}

.card__codeNone {
    color: var(--color-secundary);
    font-family: var(--font-family-light);
    font-size: .9vw;
    text-align: center;
}

.card__send {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: 1vw;
    padding: .2vw 1vw;
    width: 10vw;
    text-align: center;
    background: var(--color-primary);
    margin-block: .5vw;
    border: 1px solid var(--color-secundary);
    outline: none;
    cursor: pointer;
    transition: .3s all ease;
}

.card__send:hover {
    transform: scale(1.05);
}

.card__cancel {
    color: var(--color-secundary);
    font-family: var(--font-family-bold);
    font-size: 1vw;
    padding: .2vw 1vw;
    width: 10vw;
    text-align: center;
    background: var(--color-white);
    margin-block: 0 1.5vw;
    border: 1px solid var(--color-secundary);
    outline: none;
    cursor: pointer;
    transition: .3s all ease;
}

.card__cancel:hover {
    transform: scale(1.05);
}

.card__items {
    display: block;
    width: max-content;
    margin-block: .2vw;
}

.card__radios {
    display: flex;
    width: max-content;
    align-items: center;
}

.card__radio {
    display: block;
    outline: none;
    margin-inline: 0 1vw;
}

.card__content {
    display: flex;
    align-items: center;
    padding-inline: 1vw;
    padding-block: .3vw;
    justify-content: space-between;
    width: 30vw;
    transition: .3s all ease;
    cursor: pointer;
}

.card__content:nth-of-type(odd) {
    background: var(--color-tercery);
}

.card__item {
    display: flex;
    flex-direction: column;
}

.card__coute {
    font-family: var(--font-family-bold);
    font-size: 1vw;
}

.card__adv {
    font-family: var(--font-family-bold);
    font-size: 1vw;
    margin-block: 3vw 0;
}

#userAdv {
    margin-block: .5vw 0;
}

.card__restore {
    color: var(--color-secundary);
    font-family: var(--font-family-bold);
    font-size: 1vw;
    display: flex;
    width: max-content;
    margin-block: 0 1vw;
    margin-inline: auto;
    transition: .3s all ease;
}

.card__restore:hover {
    transform: scale(1.05);
}

.card__detail {
    font-family: var(--font-family-light);
    font-size: .8vw;
}

.card__price {
    font-family: var(--font-family-bold);
    font-size: 1.2vw;
}

.card__btns {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-block: 1.5vw;
}

.card__closed {
    color: var(--color-secundary);
    font-family: var(--font-family-bold);
    font-size: 1.2vw;
    width: max-content;
    padding: .3vw 1vw;
    border: 1px solid var(--color-secundary);
    transition: .3s all ease;
    cursor: pointer;
}

.card__closed:hover {
    color: var(--color-white);
    background: var(--color-secundary);
}



#userAdv {
    display: none;
}

@media screen and (max-width:810px) {
    .main { height: 65vh; }
}

.pay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60000;
    transform: scale(0);
    transition: .3s all ease;
}

.pay__container {
    display: block;
    width: auto;
    height: auto;
    max-width: 44vw;
    max-height: 85vh;
    padding-block: 2vw;
    background: var(--color-tercery);
    border: 1px solid var(--color-secundary);
    overflow: hidden;
}

.pay__slider {
    display: flex;
    align-items: center;
    width: 176vw;
    transition: .3s all linear;
}

.pay__content {
    display: flex;
    flex-direction: column;
    width: 40vw;
    margin-inline: 2vw;
    height: 33vw;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pay__title {
    font-size: 1.2vw;
    margin-block: 1vw;
    text-align: center;
}

.pay__content-options {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    margin-block: 0 1vw;
}

.pay__content-radio {
    display: none;
}

.pay__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1px solid var(--color-secundary);
    border-radius: 1vw;
    padding: 1vw;
    margin: .5vw;
    cursor: pointer;
    transition: .3s all ease;
}

.pay__item:hover {
    transform: scale(1.05);
}

.pay__icon {
    height: 2.3vw;
    width: auto;
}

.pay__content-title {
    font-size: 1.1vw;
    margin-block: 1vw 0;
}

.pay__item-active {
    background: var(--color-primary);
}

.pay__item-active .pay__content-title {
    color: var(--color-white);
}

.pay__item-active .pay__content-description {
    color: var(--color-white);
}

.pay__content-column {
    flex-direction: column;
    align-items: center;
}

.pay__content-column .pay__item {
    width: max-content;
}

.pay__content-column .pay__content-title {
    margin-block: 0;
}

.pay__content-description {
    font-family: var(--font-family-light);
    font-size: 1.1vw;
    text-align: center;
    margin-block: .5vw 0;
}

.pay__btns {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
}

.pay__btn {
    display: none;
    width: max-content;
    margin-inline: auto;
    color: var(--color-white);
    font-size: 1.1vw;
    text-decoration: none;
    padding: .3vw 1.5vw;
    border-radius: 1vw;
    margin-inline: .5vw;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    transition: .3s all ease;
    cursor: pointer;
}

.pay__close {
    display: none;
    width: max-content;
    margin-inline: auto;
    color: var(--color-secundary);
    font-size: 1.1vw;
    text-decoration: none;
    padding: .3vw 1.5vw;
    border-radius: 1vw;
    margin-inline: .5vw;
    background: var(--color-white);
    border: 1px solid var(--color-secundary);
    transition: .3s all ease;
    cursor: pointer;
}

.pay__btn-send {
    margin-block: 1vw 0;
}

.pay__btn:hover {
    transform: scale(1.05);
}

.pay__close:hover {
    transform: scale(1.05);
}

.pay__wallet {
    display: block;
    width: 22vw;
    height: 12vw;
    margin-inline: auto;
    border-radius: 1.5vw;
    background: var(--color-white);
    border: 1px solid var(--color-secundary);
    margin-block: .5vw;
    position: relative;
}

.pay__wallet:nth-of-type(1):after {
    content: '';
    display: block;
    width: 100%;
    height: 2vw;
    border-top-left-radius: 1.5vw;
    border-top-right-radius: 1.5vw;
    background: var(--color-secundary);
    position: absolute;
    top: 0;
    left: 0;
}

.pay__wallet:nth-of-type(2):after {
    content: '';
    display: block;
    width: 100%;
    height: 2.5vw;
    background: var(--color-tercery);
    position: absolute;
    top: 1.5vw;
    left: 0;
}

.pay__wallet-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin-inline: auto;
    margin-block: 3vw 1vw;
}

.pay__wallet-input {
    font-size: 1.1vw;
    width: 3.5vw;
    text-align: center;
    border: 1px solid var(--color-secundary);
    margin-inline: .5vw;
    outline: none;
}

.pay__wallet-lbl {
    font-family: var(--font-family-bold);
    font-size: .8vw;
    margin-inline: 0 .5vw;
    text-align: center;
}

.pay__wallet-vtos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin-inline: auto;
    margin-block: 1.5vw;
}

.pay__wallet-vto {
    font-size: 1.1vw;
    width: 2.5vw;
    text-align: center;
    border: 1px solid var(--color-secundary);
    margin-inline: .25vw;
    outline: none;
}

.pay__wallet-names {
    display: flex;
    width: 80%;
    margin-inline: auto;
}

.pay__wallet-dnis {
    display: flex;
    width: 80%;
    margin-inline: auto;
    margin-block: 5.5vw 0;
}

.pay__wallet-name {
    font-size: 1.1vw;
    width: 100%;
    text-align: center;
    border: 1px solid var(--color-secundary);
    margin-inline: .25vw;
    outline: none;
}

.pay__wallet-ccvs {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 80%;
    margin-inline: auto;
    margin-block: 2vw 1vw;
    position: relative;
    z-index: 200;
}

.pay__wallet-ccv {
    font-size: 1.1vw;
    width: 3vw;
    text-align: center;
    border: 1px solid var(--color-secundary);
    margin-inline: .25vw;
    outline: none;
}

.pay__content-loads {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: max-content;
}

.pay__content-progress {
    display: flex;
    width: 25vw;
    margin-inline: auto;
    height: 15px;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    overflow: hidden;
    margin-block: 1vw;
}

.pay__content-load {
    display: flex;
    height: 100%;
    background: var(--color-primary);
    animation: loading 3s infinite linear;
}

@keyframes loading {
    0% { width: 0; }
    100% { width: 100%; }
}

.pay__content-error {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pay__error {
    display: flex;
    width: 100%;
    height: max-content;
    justify-content: center;
    align-items: center;
    padding-block: 2vw 1vw;
    background: var(--color-primary);
    margin-block: 0 2vw;
}

.pay__error-img {
    width: 15vw;
    height: auto;
}

.pay__volver {
    display: flex;
    position: absolute;
    top: -1vw;
    left: -.5vw;
    transition: .3s all ease;
}

.pay__volver:hover {
    transform: scale(1.05);
}

.pay__volver-icon {
    width: 2vw;
    transform: rotate(180deg);
}

@media screen and (max-width:550px) {
    /* sold */
    .sold__container { flex-direction: column; }
    .sold__form { width: 70%; margin-inline: 15%; }
    .sold__subtitle { font-size: 3vw; }
    .sold__total { font-size: 3vw; }
    .sold__content { width: 100%; margin-block: 1vw; }
    .sold__label { font-size: 3vw; }
    .sold__input { font-size: 3vw; padding: .3vw 1vw; width: calc(100% - 2vw); }
    .sold__two { flex-direction: column; }
    .sold__textarea {  font-size: 3vw; height: 20vw; }
    .sold__btn { font-size: 3vw; padding: .6vw 2vw; margin-block: 1vw; width: calc(80% - 4vw); margin-inline: 10%; border-radius: 4vw; }
    .sold__btn-envio { width: calc(100% - 4vw); margin-block: 4vw 0; margin-inline: 0; }
    .sold__form { width: 80%; margin-inline: 10%; margin-block: 1vw 4vw; }
    .sold__titles { margin-block: 1vw; }
    .sold__title { font-size: 3.5vw; margin-inline: 4vw 0; }
    .main__title { font-size: 4vw; margin-block: 3vw 0; }
    .sold__show { width: 3.5vw; }
    .sold__titles:after { height: 2px; bottom: -4px; }
    .sold__facture { width: 2.7vw; height: 2.7vw; margin-inline: 0 1vw; }
    .sold__label-facture { font-size: 2.3vw; }
    .sold__accounts { padding: .6vw 2.5vw .6vw 1.5vw; border-radius: 2.5vw; margin-block: 3vw 0;}
    .sold__icon { width: 2.5vw; }
    .sold__account { font-size: 2.8vw; }
    /* Options */
    .envios__radio, .pagos__radio { width: 3vw; height: 3vw; }
    .envios__logo, .pagos__logo { height: 4vw; display: none; }
    .envios__texts, .pagos__texts { margin-inline: auto 0; }
    .envios__title, .pagos__title { font-size: 3vw; }
    .envios__text, .pagos__text { font-size: 2.4vw; }
    .envios__adv, .pagos__adv, .envios__disabled { font-size: 2.2vw; }
    /* Products */
    .sold__products { width: 80%; margin-inline: 10%; margin-block: 0 1vw; }
    .sold__items { max-height: none; }
    .sold__item { padding-block: 2vw; }
    .sold__name { font-size: 2.5vw; }
    .sold__price { font-size: 2.5vw; }
    .sold__flechas { width: 4vw; }
    #soldSubTotal { margin-block: 3vw 1vw; }
    .sold__qty { font-size: 2.6vw; text-align: center; height: 3.2vw; width: 3vw; padding: .1vw 1vw; margin-inline: 1.5vw; }
    .sold__cards { padding: .2vw 2vw; margin-inline: 2vw 0; }
    .sold__card { width: 2vw; }
    .sold__delete { font-size: 2vw; }
    .sold__adv { font-size: 3vw; padding-block: 1vw; }
    /* Card */
    .card__returns { width: calc(100% - 4vw); margin-inline: 2vw; margin-block: 1vw 0; }
    .card__title { font-size: 3.5vw; margin-inline: 2vw; }
    .card__lbl { font-size: 2.7vw; }
    .card__input { width: 68vw; font-size: 2.7vw; }
    .card__codeNone { font-size: 2.5vw; }
    .card__send { font-size: 2.8vw; padding: .5vw 0; margin-block: 2vw 3vw; width: 70vw; }
    .card__content { width: 66vw; padding-inline: 2vw; padding-block: .5vw; }
    .cardFormaEnvio { width: 2.5vw; height: 2.5vw; margin-inline: 0 2vw; }
    .card__items { margin-block: 2vw 0; }
    .card__progress { height: 10px; border: 1px solid var(--color-primary); border-radius: 7px; width: 75vw; margin-inline: 6vw; margin-block: 4vw; }
    .card__coute { font-size: 2.8vw; }
    .card__detail { font-size: 2.5vw; }
    .card__price { font-size: 2.5vw; }
    .card__closed { font-size: 2.8vw; padding: .5vw 2vw; margin-block: 2vw 1vw; }
    .card__check { width: 2.5vw; height: 2.5vw; margin-inline: 0 2vw; }
    .card__cancel { font-size: 2.8vw; padding: .5vw 0; width: calc(100% - 2px); margin-block: -1vw 3vw; }
    .card__restore { font-size: 2.6vw; margin-block: 0 2vw; }
    /* Pay */
    .pay__container { width: 80vw; height: auto; max-width: 80vw; max-height: 80vh; padding-block: 4vw; }
    .pay__slider { width: 320vw; }
    .pay__content { width: 72vw; height: auto; margin-inline: 4vw; }
    .pay__title { font-size: 3vw; }
    .pay__content-description { font-size: 2.5vw; }
    .pay__item { padding: 2vw; margin: 1vw; }
    .payWalletCuotesLabel { padding: 2vw 4vw; }
    .pay__icon { height: 4.5vw; }
    .pay__content-title { font-size: 2.6vw; margin-block: 1vw 0; }
    .pay__content-options { margin-block: 3vw; }
    .pay__btn { font-size: 3vw; padding: .5vw 4vw; border-radius: 4vw; margin-inline: 2vw; }
    .pay__close { font-size: 3vw; padding: .5vw 4vw; border-radius: 4vw; margin-inline: 2vw; }
    .pay__wallet { width: 50vw; height: 28vw; margin-block: 2vw; border-radius: 4vw; }
    .pay__wallet:nth-of-type(1):after { border-top-left-radius: 4vw; border-top-right-radius: 4vw; height: 6vw; }
    .pay__wallet:nth-of-type(2):after { height: 5.5vw; top: 4vw; }
    .pay__wallet-inputs { margin-block: 8vw 2vw; }
    .pay__wallet-input { font-size: 2.5vw; width: 8.5vw; margin-inline: 1vw; }
    .pay__wallet-lbl { font-size: 2vw; margin-inline: 0 1vw; }
    .pay__wallet-vtos { font-size: 4vw; margin-block: 3vw; }
    .pay__wallet-vto { font-size: 2.5vw; width: 6.5vw; margin-inline: 1vw; }
    .pay__wallet-name { font-size: 2.5vw; }
    .pay__wallet-ccvs { margin-block: 5vw 1vw; }
    .pay__wallet-ccv { font-size: 2.5vw; width: 8vw; }
    .pay__wallet-dnis { margin-block: 12vw 0; }
    .pay__error { margin-block: 2vw 4vw; padding-block: 4vw 2vw; }
    .pay__error-img { width: 30vw; }
    .pay__content-progress { width: 65vw; border: 1px solid var(--color-primary); }
    .pay__volver-icon { width: 4vw; }
    .pay__volver { top: -2.5vw; left: -2vw; }
}