#model {
    width: fit-content;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #9b9b9b;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #676767;
}

.btn-custom {
    background-color: #056dae;
}

.btn-custom:hover {
    background-color: #034c81;
}

/* Styles for desktop screens */
@media only screen and (min-width: 992px) {

    .banner {
        max-width: 50%;
    }

    textarea {
        height: 120px;
    }

    .label-img {
        width: 2%;
    }

    .btn-custom, #model {
        width: 10%;
    }
}

/* Styles for ipad screens */
@media only screen and (min-width: 576px) and (max-width: 992px) {

    .banner {
        max-width: 60%;
    }

    .label-img {
        width: 3%;
    }

    .label-img.url-img {
        width: 4%;
    }

    .btn-custom, #model {
        width: 20%;
    }

}

/* Styles for mobile screens */
@media only screen and (max-width: 576px) {

    .banner {
        max-width: 80%;
    }

    textarea {
        height: 180px;
    }

    .label-img {
        width: 4%;
    }

    .label-img.url-img {
        width: 5%;
    }

    .btn-custom, #model {
        width: 25%;
    }

    /* Mobile-specific optimizations for transcript loading */
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .modal-dialog {
        margin: 10px; /* Better mobile modal spacing */
    }
    
    /* Improve touch targets for mobile */
    .form-check-input {
        transform: scale(1.2);
        margin-right: 8px;
    }
    
    .btn {
        min-height: 44px; /* Apple's recommended touch target size */
        padding: 12px 16px;
    }

}