html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}



/* Extra small devices (portrait phones, <576px) */
@media (max-width: 575.98px) {
    .responsive-img {
        width: 100%;
    }
}

/* Small devices (landscape phones, ≥576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .responsive-img {
        width: 80%;
    }
}

/* Medium devices (tablets, ≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .responsive-img {
        width: 60%;
    }
}

/* Large devices (desktops, ≥992px) */
@media (min-width: 992px) {
    .responsive-img {
        width: 40%;
    }
}

/* Small screen spacing */
@media (max-width: 575.98px) {
    #FilterBar .row > [class*="col-"] {
        margin-bottom: .5rem;
    }
}

/* ensure modal iframe takes full modal body */
.video-lightbox .modal-body {
    padding: 0;
}

.video-lightbox .ratio {
    height: calc(100vh - 170px);
}
/* make video large but leave room for header/footer */
@media (max-width: 575.98px) {
    .video-lightbox .ratio {
        height: calc(56.25vw);
    }
}

/* Force consistent FAB / Back-to-top dimensions across all devices.
   Width/height are fixed so the button size does not change on responsive breakpoints.
   Keep position/left adjustments separate if you want different placement on small screens. */

#backToTopBtn {
    right: 8px;
    bottom: 8px;
    width: 48px;
    height: 48px;
    padding: 0; /* icon-centered, consistent */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    box-sizing: border-box;
}

/* Keep left offset slightly smaller on very small screens but preserve size */
@media (max-width: 575.98px) {


    #backToTopBtn {
        right: 8px;
        bottom: 8px;
        /* width/height intentionally unchanged to remain consistent across devices */
    }
}



/* Small devices (landscape phones, ≥576px) */
@media (min-width: 485px) and (max-width: 767.98px) {
    #PageSize, #DDLPageSize {
        margin-bottom: 10px;
    }

    #apply {
        padding-top: 0px;
    }
}