html{
    overflow: auto !important;
    overscroll-behavior: auto !important;
}

.imgLogin{
    width: 100%;
    height: auto;
}

.btn-disenable-subagan{
    color:#666666;
    background-color:#cccccc;
    border-color:#999999
}

.btn-blue-subagan{
    color:#fff;
    background-color:#0571af;
    border-color:#0571af
}
.btn-blue-subagan:hover{
    color:#fff;
    background-color:#0571af;
    border-color:#0571af
}
.btn-blue-subagan:focus{
    color:#fff;
    background-color:#0571af;
    border-color:#0571af;
    outline:0;
    box-shadow:0 0 0 0 rgba(235,100,12,.5)
}

.btn-warning-subagan{
    color:#fff;
    background-color:#eb640c;
    border-color:#eb640c
}
.btn-warning-subagan:hover{
    color:#fff;
    background-color:#eb640c;
    border-color:#eb640c
}
.btn-warning-subagan:focus{
    color:#fff;
    background-color:#eb640c;
    border-color:#eb640c;
    outline:0;
    box-shadow:0 0 0 0 rgba(235,100,12,.5)
}

.fixed-height {
    height: 100%;
}

.scroll-content {
    max-height: 300px; /* Ajusta esta altura según lo que necesites */
    overflow-y: auto;  /* Activa el scroll cuando el contenido exceda */
}

.badge-mic{color:#fff;background-color:#ed1c24}

.border-top-primary-mic{
    border-top-color:#ed1c24!important
}

.border-bottom-primary-mic{
    border-bottom-color:#ed1c24!important
}

.border-mic{border-color:#ed1c24!important}

.text-primary-mic{
    color:#ed1c24!important
}

.btn-outline-primary-mic {
    color: #ed1c24;
    border-color: #ed1c24
}

.btn-outline-primary-mic:hover {
    color: #fff;
    background-color: #ed1c24;
    border-color: #ed1c24
}

.bg-primary-mic{
    background-color: #ed1c24!important
}

.border-primary-mic{
    border-color:#ed1c24!important
}

.btn-primary-mic{
    color:#fff;
    background-color:#ed1c24;
    border-color:#ed1c24
}
.btn-primary-mic:hover{
    color:#fff;
    background-color:#ed1c24;
    border-color:#ed1c24
}
.btn-primary-mic:focus{
    color:#fff;
    background-color:#ed1c24;
    border-color:#ed1c24;
    outline:0;
    box-shadow:0 0 0 0 rgba(206,216,224,.5)
}

.navbar-subagan{
    color:rgba(235,100,12,.9);
    background-color:#eb640c;
    border-bottom-color:rgba(255,255,255,.1)
}

.navbar-mic{
    color:rgba(237, 28, 36,.9);
    background-color:#ed1c24;
    border-bottom-color:rgba(255,255,255,.1)
}

.sidebar-light{
    background-color:#fff;
    color:#333;
    border-right:1px solid rgba(0,0,0,.125)
}
.navbar-brand2{
    display:inline-block;
    padding-top:0.825rem;
    padding-bottom:0.525rem;
    margin-right:1.25rem;
    font-size:0;
    line-height:inherit;
    white-space:nowrap
}
.navbar-brand2 img{height:1.825rem}

.bg-subagan{
    background-color:#eb640c!important
}

.bg-subagan-blue{
    background-color:#0571af!important
}

.my-float{
    margin-top:5px;
}

.float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
}

.swal-width-large{
    width: 10000px !important;
}

.btn-outline-warning-subagan{color:#eb640c;border-color:#eb640c}
.btn-outline-warning-subagan:hover{color:#fff;background-color:#eb640c;border-color:#eb640c}
.btn-outline-warning-subagan.focus,
.btn-outline-warning-subagan:focus{box-shadow:0 0 0 0 rgba(245,134,70,.5)}

.leading { line-height: 100%;}

.text-strike {
    text-decoration: line-through !important;;
}

.container-center {
    height: 200px;
    position: relative;
    border: 3px solid green;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.text-warning-subagan{color:#eb640c!important}

.badge-subagan{color:#fff;background-color:#eb640c}

.border-subagan{border-color:#eb640c!important}

text-subagan{color:#eb640c!important}

#titleRacketNumber {
    font-size: 24px;
    color: white;
}

/* Botón flotante oculto por defecto */
.floating-button-pre-bid {
    display: none; /* Oculto por defecto */
}

.value-text.highlight-change {
    background-color: #eb640c;
    color: white;
    transition: background-color 2s ease;
}

.value-text.highlight-change.fade-out {
    background-color: transparent;
    color: inherit;
}

@media screen and (max-width:1400px){

    .btn-mic-float {
        position: fixed;
        bottom: 0px;
        z-index: 99;
        left: 0;
        width: 100%;
        padding-top: 11px;
        padding-bottom: 0rem;
        border-right: solid 1px;
        border-radius: 0 10px 0 0;
        padding-left: 0px;
        padding-right: 0px;

    }

    .btn-mic-float #bidToDescription h1{
        font-size:35px
    }

}
/*CSS for showOnlineEvent*/
@media screen and (min-width:576px){
    .table-res-on{
        display:none!important;
     }
    .modo-coliseo .back-botton + div, .modo-coliseo .online-movil{
        display:none!important;
    }
}
@media screen and (max-width:844px){
    #titleRacketNumberPreBid {
        display: none; /* Oculta el h2 en móviles */
    }
    .floating-button-pre-bid {
        display: flex; /* Muestra el botón en móviles */
        position: fixed;
        top: 60px; /* Ajusta la posición más abajo */
        right: 10px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #eb640c;
        color: white;
        font-size: 18px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    .show-online .breadcrumb > a{
    font-size:2.2vw
    }
    .show-online .breadcrumb-line {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    div.movil-bread{
        text-align:center!important
    }
    .movil-bread a{
        font-size: 11px;
    }
    .show-online .back-botton{
        position: absolute;
        left: -13px;
        top: 3px;
        width: fit-content;
    }
    .show-online #buttonBidTo{
        position: fixed;
        bottom: 0px;
        z-index: 99;
        left: 0;
        width: 100%;
        padding-top: 11px;
        padding-bottom: 3px;
        border-right: solid 1px;
        border-radius: 0 10px 0 0;
        padding-left: 0px;
        padding-right: 0px;
    }
    .show-online #buttonBidTo h1{
    font-size:20px
    }
    .show-online .paleta-movil .card-header {
        /**
        position: fixed;
        bottom: 0px;
        z-index: 99;
        right: 0;
        width: 40%;
        padding-top: 8.0px;
        padding-bottom: 2px;**/
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 10px 20px;
        color: white;
        border: none;
        border-radius: 50px;
        font-size: 16px;
        cursor: pointer;
        z-index: 1000;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    }
    .show-online .paleta-movil .card-header h5, .show-online .paleta-movil .card-header h2{
        font-size:13px;
    }
    .show-online .float, .show-online  .breadcrumb-line{
        display:none!important;
    }
    .show-online .navbar{
        display:none;
    }
    .show-online .paleta-movil .card-body{
        overflow: scroll;
        position: fixed;
        width: 100%;
        left: 0;
        padding: 0;
        z-index: 9;
        background: white;
        bottom: 57px;

    }
    .show-online .paleta-movil .card{
        height:0!important;
        box-shadow: 0 0px 0px rgba(0,0,0,.05);
    }
    div#containerBidClient > span:not(.text-success) {
        display: none!important;
    }
    div#containerBidClient.active > span:not(.text-success) {
        display: block!important;
     }
    .online-movil > div > div{
        padding: 4px!important;
    }
    .paleta-movil {
    position:absolute;}
    .online-movil #onlineEvent {
        width: 100%;
        margin: auto;
        height: 144px;
    }
    .online-movil{
            width:85%;
            margin:auto;
        }
    .show-online .text-success h6{
         font-size:13px!important;
    }
    .show-online .text-success h6 br{
         display:none!important;
    }
    .show-online .text-success h6 font{
         font-size: 16px!important;
    }
    .show-online #buttonBidTo h1{
        font-size: 5.9vw;
    }
    .show-online .paleta-movil .card-header h5{
        display:none
    }
    .show-online .paleta-movil .card-header h2{
        font-size: 5.9vw;
        font-weight: 300;
     }
    .paleta-movil > div > div:nth-child(1){
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        background-color: #0571af!important;
        border-radius: 10px 0 0 0;
     }
     .show-online .text-success {
        border-top: 1px solid transparent;
     }
     .show-online .table-res-off{
        display:none!important;
     }
    .show-online .table-res-off{
        display:none!important;
    }
    .table-res-on .card-body{
        padding: 0.25rem;
    }
    .table-res-on .card-body br{
        display:none!important;
    }
    .table-res-on .card-body tr{
        font-size: 12px;
    }
    .show-online #containerBidClient .text-success:after{
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: "\f0de";
        position:absolute;
        right:30px;
        top:3px;
        font-size:30px;
        cursor:pointer
    }
    .show-online #containerBidClient.active .text-success:after{
        content: "\f0dd";
        top:1px;
    }
    #containerBidClient{
    transition: all 0.2s;
    height: 38px;
    }
    #containerBidClient.active{
        height: 290px;
        transition: all 0.2s;
    }
    .modo-coliseo #containerBidClient.active{
            height: 37vh;
            transition: all 0.2s;
     }
    .show-online #containerBidClient h6 {
        font-size: 13px!important;
        margin-bottom: 0.1rem;
    }
    .show-online #containerBidClient h6 br {
         display:none!important
    }
    .show-online #containerBidClient > span h6 font {
        font-size: 16px!important;
    }
    .modo-coliseo .back-botton + div, .modo-coliseo .online-movil{
        display:none!important;
    }
    .show-online #buttonRacket{
         position: fixed;
         bottom: 0px;
         z-index: 99;
         left: 0;
         padding-top: 12px
     }
    .show-online .content {
        padding: 1.25rem 0.7rem;
    }
    .show-online .row .col-sm-4{
        padding:0px!important
    }
    .show-online #currentInformationLotEventOnlineRes h6{
        padding: 0!important;
    }
    .show-online  .online-movil .card, .show-online .back-botton + div > .card {
       margin-bottom: 0.25rem;
    }
    .coliseo-m{
        margin-bottom: 80px;
    }
    }
    @media screen and (max-width:844px) and (min-width:576px){
       .back-botton + .col-sm-7 {
        max-width: 100%;
        flex: 0 0 100%;}
        .online-movil{
        max-width: 100%;
                flex: 0 0 100%;
        }
        div#contentInformationNewLot + .row + .row > .col-sm-2, div#contentInformationNewLot + .row + .row > .col-sm-3 {
                -ms-flex: 0 0 50%;
                flex: 0 0 50%;
                max-width: 50%;

        }
        .table-res-on{
        display:block!important;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }
    }

/* Solo móviles en horizontal (landscape) */
@media screen and (max-width: 844px) and (orientation: landscape) {

    /* Altura del botón de pujar (ajústala si cambia) */
    :root { --bid-btn-h: 57px; } /* tu botón está a 57px, lo reutilizamos */

    /* Card flotando por encima del botón */
    .show-online .paleta-movil .card-body{
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        bottom: calc(var(--bid-btn-h) + 6px); /* 6px de respiro sobre el botón */
        z-index: 1000;              /* por encima del video y del botón */
        background: #fff;
        overflow-y: auto;
        max-height: 70vh;           /* evita tapar demasiado */
        -webkit-overflow-scrolling: touch;
        padding: 0;                 /* mantén tu padding */
    }

    /* Asegura la “capa” del botón de pujar */
    .show-online #buttonBidTo{
        padding-bottom: 0px;
    },
    .show-online #buttonRacket{
        z-index: 999;               /* debajo del card */
        min-height: var(--bid-btn-h);
    }

    /* (Opcional) reserva espacio del contenido si algo salta detrás */
    .coliseo-m{
        margin-bottom: calc(var(--bid-btn-h) + 12px);
    }
}