body{
    height: 100vh;
}


.statementContainer{
    padding: 0;
    max-width: 100%;
}

.cardStatement{
    padding: 0 0.874rem;
}


.accountTitle{
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 2.813rem 0;
}

.accountTitle svg{
    display: flex;
}

.accountTitle h1{
    color: var(--TES-dark);
    font-size: 1.2rem;
    letter-spacing: 0.188rem;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    width: 100%;
}


.cardStatement p{
    color: var(--TES-dark);
    text-align: center;
    margin: 0;
}

.statementMenu{
    display: flex;
    justify-content: center !important;
    margin: 1.563rem 0;
}

.menuWidth{
    flex: 0 0 260px;
    max-width: 100%;
    padding: 0;
}


.menuDropdown {
    position: relative;
    width: 100%;
    font-family: 'Poppins', serif;
    z-index: 999;
    font-weight: 500;
    font-size: 1rem;
}

.menuDropdown:hover{
    color: var(--TES-dark);
}

.selected {
    align-items: center;
    background: var(--TES-white);
    border: 0.063rem solid var(--TES-gray-light);
    border-radius: 0.5rem;
    color: var(--TES-gray-dark);
    cursor: pointer;
    display: flex;
    font-weight: 500;
    justify-content: space-between;
    padding: 0.625rem 0.813rem;
    transition: background 0.2s ease;
}

.selected:hover{
    border-color: var(--TES-primary-color);
    color: var(--TES-dark);
}

.options {
    background-color: var(--TES-white);
    border: 0.063rem solid var(--TES-primary-color);
    border-radius: 0.75rem;
    display: none;
    font-weight: 300;
    left: 0;
    right: 0;
    margin-top: 0.438rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0 0.625rem;
    position: absolute;
    top: 100%;
}


.option {
    border-bottom: 0.063rem solid var(--TES-gray-soft);
    cursor: pointer;
    padding: 0.625rem;
    transition: background 0.2s ease;
}

.option:hover {
    background-color: var(--TES-primary-color);
    color: var(--TES-white);
}

.cardAnnouncement{
    background: var(--TES-third-color);
    display: flex;
    gap: 1rem;
    padding: 1rem 1.2rem 1rem 1.2rem;
}

.announcementImageContainer{
    background-color: var(--TES-white);
    border-radius: 0.75rem;
    height: 80px;
    padding: 0.75rem;
}

.announcementImage{
    background-image: url("https://s3-bucket-todoensubastas.s3.ca-central-1.amazonaws.com/images/subasta_azulfuerte.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 55.52px;
    width: 60px;
}

.cardAnnouncement h2{
    color: var(--TES-white);
    font-size: 1.16rem;
}

.cardAnnouncement h3{
    color: var(--TES-primary-color);
    font-size: 0.90rem;
}


.btnPayment{
    align-items: center;
    align-self: stretch;
    border: 1px solid var(--TES-orange);
    background: var(--TES-white);
    color: var(--TES-orange);
    display: flex;
    gap: 10px;
    height: 80px;
    justify-content: center;
    letter-spacing: 3px;
    padding: 10px;
    text-transform: uppercase;
}

.btnPayment:hover{
    background-color: var(--TES-orange);
    color: var(--TES-white);
    border-color: var(--TES-orange);
}




                      /*  SET DE LOTES  */

.cardTable{
    padding: 0 0.93rem;
}

.setLots{
    flex-direction: column;
    gap:1.3rem;
    margin-top: 1.3rem;
    padding: 0 0.93rem;
}

.lotsGrid{
    border-bottom: 0.063rem solid var(--TES-gray-soft);
    max-width: 100%;
    padding: 0;
}

.lotsGap{
    display: flex;
    flex-direction: column;
    height: fit-content;
    justify-content: center;
}


#lotsGeneralCard{
    background-color: transparent;
    border: none !important;
    box-shadow: none !important;
    height: fit-content;
    -webkit-box-shadow: none !important;
}


.lotsCard{
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.lotWarning{
    height: 47vh;
}

.lotsImage{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 0.75rem;
    cursor: pointer;
    height: 88px;
    position: relative;
    width: 110px;
}

.lotsInfo{
    background-color: transparent !important;
    padding: 0.25rem 0 0.25rem 0.6rem !important;
    width: 69%;
}

.infoStatus{
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: space-between;
}

.infoStatus h2{
    color:var(--TES-dark);
    font-size: 0.7rem;
    margin: 0;
}

.statusBadge{
    align-items: center;
    display: flex;
    height: 47px;
    justify-content: center;
    width: 14px;
}

.badgeCheck, .badgeWarning{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 14px;
}

.badgeCheck{
    background-image: url("https://s3-bucket-todoensubastas.s3.ca-central-1.amazonaws.com/images/check_estado_cuenta.svg");
}

.badgeWarning{
    background-image: url("https://s3-bucket-todoensubastas.s3.ca-central-1.amazonaws.com/images/warning_estado_cuenta.svg");
}

.lotsInfo p{
    color: var(--TES-gray-dark);
    cursor: pointer;
    font-size: 0.58rem;
    margin-top: 0.1rem;
    margin-bottom: 0;

}


.infoLot{
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    width: 100%;
}


.lotSeries{
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.lotContainer{
    border: 0.063rem solid var(--TES-dark);
    border-radius: 0.35rem;
    display: inline-flex;
    padding: 0.125rem 0.625rem;
}

.lotContainer p {
    color: var(--TES-dark);
    font-size: 0.58rem;
}


.lotSeries h2{
    font-size: 0.5rem;
    color: var(--TES-gray-dark);
    margin: 0;
}


.lotPrice{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.price{
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    width: 100%;
}

.price p{
    color: var(--TES-primary-color);
    font-size: 0.906rem;
    margin: 0;
}

.price i{
    color: var(--TES-dark);
    font-size: 1.6rem;
   }


.rotateArrow {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.priceArrow {
    transition: transform 0.3s ease;
    cursor: pointer;
}


.lotPrice h3{
    color: var(--TES-gray-dark);
    font-size: 0.5rem;
    margin: 0;
}


.lotsDetails {
    display: none;
}


.detailsPaid, .detailsUnpaid{
    background: var(--TES-white);
    border-radius: 0.563rem;
    padding: 0.625rem 1rem 1rem 1rem;
}

.detailsPaid h1{
    color: var(--TES-dark);
    font-family: "Poppins", serif;
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 600;
    margin: 0.5rem 0;
}

.detailsPaid h3{
    color: var(--TES-dark);
    font-size: 0.58rem;
    font-weight: 400;
}

.paidContent{
    align-items: center;
    border-bottom: 0.063rem solid  var(--TES-gray-soft);
    display: flex;
    justify-content: space-between;
    margin-top: 0.125rem;
}


.paidContent h1, .paidContent h2, .paidContent p{
    color: var(--TES-dark);
    margin: 0;
}

.paidContent h1{
    font-size: 0.58rem;
}

.paidContent h2, .paidContent p{
    font-size: 0.58rem;
}

.paidContent h1, .paidContent p{
    font-family: "Poppins", serif;
    font-style: normal;
    font-weight: 600;
}

.paidContent h2{
    font-family: "Poppins", serif;
    font-style: normal;
    font-weight: 400;
}

.contentTotalPrice{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.paidContent .contentTotalPrice p{
    color: var(--TES-primary-color);
    font-size: 1.219rem;
}

.paidTotal .paidContent{
    border: none;
}

.paidTotal{
    margin-top: 0.600rem;
}

.totalPrice{
    align-items: baseline;
    margin-top: 0;
}

.totalReference{
    margin-top: 0.400rem;
}

.contentReference{
    align-items: center;
    border: 0.094rem solid var(--TES-gray-soft);
    border-radius: 0.350rem;
    display: flex;
    justify-content: space-between;
    padding: 0.125rem 0.625rem 0.125rem 0.125rem;
    width: fit-content;
    gap: 0.375rem;
}

.referenceImageContainer{
    align-items: center;
    background-color: var(--TES-gray-soft);
    border-radius: 0.188rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 0.25rem 0.125rem;
    width: 20px;
}

.referenceImage{
    background-image: url("https://s3-bucket-todoensubastas.s3.ca-central-1.amazonaws.com/images/estados_de_cuenta/copy_edc.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 10px;
    height: 10px;
}

.contentReference p{
    font-weight: 400;
}

.totalDate{
    align-items: center;
    color: var(--TES-dark);
    display: inline-flex;
    font-size: 0.58rem;
    gap: 0.313rem;
    justify-content: flex-start;
    margin-top: 1rem;
    width: fit-content;
}

.totalDate p{
    margin: 0;
    font-weight: 400;
}

.totalDate span{
    font-weight: 600;
}

.totalButton{
    align-items: center;
    display: flex;
    gap: 0.625rem;
    justify-content: flex-start;
    margin-top: 1rem;
}

.buttonReceipt{
    align-items: center;
    background-color: var(--TES-gray-medium);
    border: none;
    display: flex;
    gap: 0.375rem;
    justify-content: center;
    padding: 0.438rem;
    width: 87%;

}

.receiptImage{
    background-image: url("https://s3-bucket-todoensubastas.s3.ca-central-1.amazonaws.com/images/check_icon_white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 9px;
    height: 7px;
}

.buttonReceipt h1, .detailsUnpaid button{
    color: var(--TES-white);
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

.buttonEye{
    background-color: var(--TES-dark);
    border: none;
    height: 25px;
    padding: 0.438rem;
}

.buttonEyeImage{
    background-image: url("https://s3-bucket-todoensubastas.s3.ca-central-1.amazonaws.com/images/estados_de_cuenta/eye_edc.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 12px;
    height: 9px;
}

.totalPdf{
    align-items: center;
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
}

.PdfButton{
    align-items: center;
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    gap: 0.350rem;
}

.PdfImage{
    background-image: url("https://s3-bucket-todoensubastas.s3.ca-central-1.amazonaws.com/images/download_icon.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 10px;
    height: 10px;
}

.PdfButton p{
    color: var(--TES-blue-dark);
    font-size: 0.58rem;
    font-weight: 400;
    margin: 0;
}

.detailsUnpaid{
    margin-top: 1rem;
    padding: 0;
}

.detailsUnpaid button{
    background-color: var(--TES-dark);
    border: none;
    padding: 0.438rem;
    width: 100%;
}

#subfooter{
    height: 36vh;
    position: relative;
    width: 100%;
}


                /*  RESPONSIVIDAD   */



@media(min-width: 330px){
    .infoStatus h2{
        font-size: 0.75rem
    }

    .lotsInfo p, .lotContainer p{
        font-size: 0.62rem;
    }

    .lotSeries h2, .lotPrice h3{
        font-size: 0.55rem;
    }

    .price p {
        font-size: 1.031rem;
    }

    .paidContent h2, .paidContent p, .detailsPaid h1, .paidContent h1, .detailsPaid h3, .totalDate, .buttonReceipt h1, .PdfButton p, .detailsUnpaid button{
        font-size: 0.62rem;
    }

    .buttonEye{
        height: 26px;
    }

    .PdfImage{
        width: 11px;
        height: 11px;
    }
}

@media(min-width: 340px){
    .setLots{
     padding: 0 1.125rem;
    }

    .lotsInfo{
        padding: 0.25rem 0 0.25rem 0.7rem !important;
    }
}


@media(min-width: 350px){
   .statusBadge{
        width: 17px;
    }

    .badgeCheck, .badgeWarning{
        height: 17px;
    }

    .lotsInfo p, .lotContainer p {
        font-size: 0.65rem;
    }

    .lotSeries h2, .lotPrice h3{
        font-size: 0.6rem;
    }

    .price p{
        font-size: 1.150rem;
    }

    .paidContent h2, .paidContent p, .detailsPaid h1, .paidContent h1, .detailsPaid h3, .totalDate, .buttonReceipt h1, .PdfButton p, .detailsUnpaid button{
        font-size: 0.65rem;
    }

    .paidContent .contentTotalPrice p{
        font-size: 1.300rem;
    }

    .receiptImage{
        width: 9px;
        height: 7px;
    }

    .buttonEyeImage{
        width: 14px;
        height: 10px;
    }

}

@media(min-width: 353px){
    .menuWidth{
        flex: 0 0 329px;
    }
}


@media(min-width: 375px){

    .accountTitle h1{
        font-size: 1.4rem;
    }

    .menuWidth{
        flex: 0 0 330px;
    }

    .lotsImage{
        height: 87px;
        width: 122px;
    }

    .infoStatus h2{
        font-size: 0.82rem;
    }

    .lotsInfo p, .lotContainer p{
        font-size: 0.67rem;
    }

    .lotSeries h2, .lotPrice h3{
        font-size: 0.67rem;
    }

    .price p{
        font-size: 1.300rem;
    }

    .paidContent h2, .paidContent p, .detailsPaid h1, .paidContent h1, .detailsPaid h3, .totalDate, .buttonReceipt h1, .PdfButton p, .detailsUnpaid button{
        font-size: 0.67rem;
    }

    .paidContent .contentTotalPrice p{
        font-size: 1.400rem;
    }

    .receiptImage{
        width: 10px;
    }

    .price i {
        font-size: 1.85rem;
    }

    .buttonEye{
        height: 27px;
    }

}

@media(min-width: 387px){
    .menuWidth{
        flex: 0 0 328px;
    }
}


@media(min-width: 390px){
    .lotsGrid{
        max-width: 95%;
    }
}

@media(min-width: 400px){

    .lotsImage{
        height: 100px;
        width: 133px;
    }

    .infoStatus h2{
        font-size: 0.86rem;
    }

    .lotsInfo p, .lotContainer p{
        font-size: 0.70rem;
    }

    .price p{
        font-size: 1.200rem;
    }

    .paidContent h2, .paidContent p, .detailsPaid h1, .paidContent h1, .detailsPaid h3, .totalDate, .buttonReceipt h1, .PdfButton p, .detailsUnpaid button{
        font-size: 0.70rem;
    }

    .receiptImage{
        height: 8px;
        width: 11px;
    }

    .buttonEye{
        height: 27.5px;
    }

}

@media(min-width: 425px){

    .cardStatement{
    padding: 0 2.5rem;
    }

    .price i {
        font-size: 2rem;
    }
}


@media(min-width: 430px){

    .infoStatus h2{
        font-size: 0.93rem;
    }

    .statusBadge {
        width: 20px;
    }

    .badgeCheck, .badgeWarning{
        height: 20px;
    }

    .infoLot{
        margin-top: 0.438rem;
    }


    .lotsInfo p, .lotContainer p{
        font-size: 0.75rem;
    }

    .lotSeries h2{
        font-size: 0.65rem;
    }

    .price p{
        font-size: 1.400rem;
    }

    .paidContent h2, .paidContent p, .detailsPaid h1, .paidContent h1, .detailsPaid h3, .totalDate, .buttonReceipt h1, .PdfButton p, .detailsUnpaid button{
        font-size: 0.75rem;
    }

    .paidContent .contentTotalPrice p{
        font-size: 1.500rem;
    }

    .PdfImage{
        width: 12px;
        height: 12px;
    }
}


@media(min-width: 460px){

    .cardTable{
        padding: 0 1.375rem;
    }

    .lotsGrid{
        max-width: 400px;
    }

    .lotsInfo{
        padding: 0.25rem 0 0.25rem 1rem !important;
    }

    .infoStatus h2 {
        font-size: 1rem;
    }

    .lotsInfo p, .lotContainer p{
        font-size: 0.85rem;
    }

    .lotSeries h2, .lotPrice h3{
        font-size: 0.80rem;
    }

    .price p{
        font-size: 1.6rem;
    }

    .paidContent h2, .paidContent p, .detailsPaid h1, .paidContent h1, .detailsPaid h3, .totalDate, .buttonReceipt h1, .PdfButton p, .detailsUnpaid button{
        font-size: 0.85rem;
    }

    .paidContent .contentTotalPrice p{
        font-size: 1.700rem;
    }

    .referenceImage{
        width: 12px;
        height: 12px;
    }

    .receiptImage{
        height: 9px;
        width: 12px;
    }

    .buttonEye{
        height: 30px;
    }

    .buttonEyeImage{
        width: 17px;
        height: 12px;
    }

    .PdfImage {
        width: 13px;
        height: 13px;
    }


}

@media(min-width: 530px){
    .lotsGrid{
        max-width: 430px;
    }

    .PdfImage {
        width: 14px;
        height: 14px;
    }
}


@media(min-width: 768px){

    .accountTitle h1{
        font-size: 1.6rem;
    }

    .cardStatement p{
    font-size: 1rem;
    }

    .accountTitle svg {
        display: none;
    }

    .menuWidth{
        flex: 0 0 365px;
    }

    .cardAnnouncement h2{
        font-size: 1.3rem;
    }

    .cardAnnouncement h3{
        font-size: 1rem;
    }

    .setLots{
    margin-top: 1.875rem;
    }

    .lotsGrid{
        margin-top: 0;
        max-width: 535px;
    }

    .lotsImage{
        height: 127px;
        width: 184px;
    }

    .lotsInfo{
        padding: 0.25rem 0 0.25rem 1.3rem !important;
        width: 69%;
    }

    .infoStatus{
    height: 25px;
    }

    .infoStatus h2{
        font-size: 1.13rem;
    }

    .statusBadge{
        width: 22px;
    }

    .badgeCheck, .badgeWarning{
        height: 22px;
    }


    .lotsInfo p{
        font-size: 0.96rem;
        margin-top: 0.688rem;
    }

    .infoLot{
        margin-top: 0.625rem;
    }

    .lotSeries{
        gap: 0.600rem;
        margin-top: 0;
    }

    .lotContainer{
        font-size: 0.92rem;
        padding: 0.188rem 1.125rem;
    }

    .lotContainer p {
        font-size: 0.92rem
    }

    .lotSeries h2, .lotPrice h3{
        font-size: 0.90rem;
    }

    .price p{
        font-size: 1.781rem;
        margin: 0;
    }

    .price i {
        font-size: 2.5rem;
    }

    .paidContent h2, .paidContent p, .detailsPaid h1, .paidContent h1, .detailsPaid h3, .totalDate, .buttonReceipt h1, .PdfButton p, .detailsUnpaid button{
        font-size: 0.96rem;
    }

    .paidContent .contentTotalPrice p{
        font-size: 1.900rem;
    }

    .referenceImage{
        width: 13px;
        height: 13px;
    }

    .receiptImage{
        height: 10px;
        width: 13px;
    }

    .buttonEye{
        height: 32px;
    }

    .buttonEyeImage{
        width: 21px;
        height: 15px;
    }

    .PdfButton{
        gap: 0.500rem;
    }

    .PdfImage {
        width: 15px;
        height: 15px;
    }

    .btnPayment{
        width: 535px;
    }

}


@media(min-width: 1024px) {

    .lotsGrid{
        max-width: 570px;
    }

    .lotsInfo{
        width: 67%;
    }

    .price i{
        font-size: 2.8rem;
    }

    .referenceImage{
        width: 14px;
        height: 14px;
    }

    .PdfImage {
        width: 16px;
        height: 16px;
    }

}

@media(min-width: 1440px){

    .lotsGrid{
    max-width: 700px;
    }


    .lotsImage{
        height: 140px;
        width: 211px;
    }

    .lotsInfo{
        width: 72%;
    }

    .infoStatus h2{
        font-size: 1.3rem;
    }

    .statusBadge{
        width: 23px;
    }
    .badgeCheck, .badgeWarning{
        height: 23px;
    }

    .lotsInfo p{
        font-size: 1rem;
    }

    .lotContainer p{
        font-size: 1rem;
    }

    .price p{
        font-size: 2rem;
    }

    .lotSeries h2, .lotPrice h3{
        font-size: 1rem;
    }

    .paidContent h2, .paidContent p, .detailsPaid h1, .paidContent h1, .detailsPaid h3, .totalDate, .buttonReceipt h1, .PdfButton p, .detailsUnpaid button{
        font-size: 1rem;
    }

    .paidContent .contentTotalPrice p {
        font-size: 2rem;
    }

    .referenceImage {
        width: 15px;
        height: 15px;
    }

    .receiptImage {
        height: 11px;
        width: 14px;
    }

    .buttonEyeImage {
        width: 23px;
        height: 17px;
    }

    .PdfImage {
        width: 17px;
        height: 17px;
    }

    .btnPayment{
        width: 700px;
    }

}