/* // These are the Bootstrap 4 Breakpoints per the Docs */

/* // Extra small devices (portrait phones, less than 576px) */
/* // No media query since this is the default in Bootstrap */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 


}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 


}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 


}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 


}








/**
 * Bootstrap 4 all media queries #wMQ
 * up       >     sm, md, lg, xl
 * down     <     sm, md, lg
 * only     =     xs, sm, lg, xl
 * between  <>    sm-lg, sm-xl, md-xl
 */

 /* .xs = | Extra Small devices only (portrait phones) less than 576px */
@media (max-width: 320px) {
    .col-4 {
        width: 100%;
        margin: 5px 0px;
    }
}

 

/* .xs = | Extra Small devices only (portrait phones) less than 576px */
@media (max-width: 575.98px) {
    .container .login-row {
        min-height: calc(100vh - 24px);
    }
    .container {
        padding: 0 0px 24px 0px !important;
        margin-bottom: 0px !important;
    }

    .card {
        border: none !important;
        border-radius: 0 !important;
    }

    .card-header:first-child {
        border-radius: 0 !important;
    }

    .login-card {
        min-height: calc(100vh - 24px);
        margin: 0 !important;
    }

    #login-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .seatbook-copyright {
        display: none;
    }
    .footer {
        padding: 2px 5px; 
        font-size: 13.5px !important;
    }

    /* Datatable css */
    div.dataTables_filter label {
        display: flex !important;
        flex-direction: column !important;
    }

    div.dataTables_wrapper div.dataTables_filter label {
        text-align: center !important;
        font-weight: bold !important;
    }

    div.dataTables_filter label input {
        margin: 0 !important;
    }

    .dataTables_wrapper .row div {
        padding: 0 !important;
    }

    .dataTables_wrapper .row {
        overflow: scroll;
    }

    .dataTables_paginate ul.pagination {
        justify-content: center !important;
    }

    div.dt-buttons {
        justify-content: center;
        margin-top: 0.5em
    }
    /* Datatable css end */
    
    .modal-dialog {
        margin: 0 !important;
    }

    .modal-content {
        background-clip: border-box;
        border-radius: 0;
    }

    .p-2.shadow.p-3 {
        box-shadow: none !important;
        padding: 0 !important;
    }

    form#generateDraft .col-4.col-md-2 label, form#generateSummary .col-4.col-md-2 label{
        display: none !important;
    }
     
    form#generateSummary .col-4.col-md-2{
        margin-top: 1rem!important;
    }

    .jc-bs3-container {
        padding: 15px !important;
    }

    .page-link {
        padding: 0.09rem 0.4rem !important;
    }

    .paginate_button {
        font-size: 85%;
    }

    form .btn span {
        display: none !important;
    }

    .dt-buttons {
        flex-direction: column;
        gap: 5px
    }

    .dt-btn-split-wrapper.btn-group {
        flex-direction: column;
        gap: 5px
    }

    button.btn.btn-secondary.dt-btn-split-drop.dropdown-toggle.dropdown-toggle-split.dt-button {
        border-radius: 0 !important;
    }

    button.btn.btn-secondary.buttons-collection.dropdown-toggle.buttons-page-length {
        border-radius: 0 !important;
    }

    .btn-group .btn {
        font-size: 1rem !important;
        padding: .375rem .75rem !important;
    }

    .paper-name,
    .full-screen {
        display: none;
    }
}


/* .sm > | Small devices and up (landscape, phones) 576px and up */
@media (min-width: 576px) {
    div.dataTables_info {
        float: left;
    } 

}
/* .sm < | Small devices and down (landscape, phones) less than 768px */
@media (max-width: 767.98px) {
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .btn-xs {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* padding: 5px; */
        width: 100%;
        gap: 0px !important;
    }
    .btn-light{
        display: inline;
        padding: 3px 10px;
        width: auto;
    }

    #changePasswordModal .modal-footer {
        flex-direction: column-reverse;
    }

    .modal-footer .change-password-btn {
        margin-bottom: 10px;
    }
}
/* .sm = | Small devices only (landscape, phones) upper 576px and less than 768px */
@media (min-width: 576px) and (max-width: 767.98px) {

}



/* .md > | Medium devices and up (tablets) 768px and up */
@media (min-width: 768px) {

}
/* .md < | Medium devices and down (tablets) less than 992px */
@media (max-width: 991.98px) {

}
/* .md = | Medium devices only (tablets) upper 768px and less than 992px */
@media (min-width: 768px) and (max-width: 991.98px) {

}



/* .lg > | Large devices and up (desktops) 992px and up */
@media (min-width: 992px) {

}
/* .lg < | Large devices and down (desktops) less than 1200px */
@media (min-width: 1199.98px) {

}
/* .lg = | Large devices only (desktops) upper 992px and less than 1200px */
@media (min-width: 992px) and (max-width: 1199.98px) {

}




/* .xl = | Large devices only (desktops, TV) 1200px and up */
@media (min-width: 1200px) {

}


/* Between <> .sm-lg, .sm-xl, .md-xl */
/* .sm <> .lg | From Small to Large devices only (landscape, phones, tablet, desktops) upper 576px and less than 1200px */
@media (min-width: 576px) and (max-width: 991.98px) {

}
/* .sm <> .xl | From Small to Extra Large devices only (landscape, phones, tablet, desktops, TV) upper 576px and less than 1200px */
@media (min-width: 576px) and (max-width: 1199.98px) {

}
/* .md <> .xl | From Medium to Extra Large devices only (tablet, desktops, TV) upper 768px and less than 1200px */
@media (min-width: 768px) and (max-width: 1398px) {
    .container {
        max-width: 95% !important;
        padding: 0 !important;
    }
    .card-header:first-child {
        border-radius: 0 !important;
    }
}