/* ===============================
   Responsive overrides
   One @media block per breakpoint (no duplicate max-width sections)
================================ */

/* Centered fluid wrapper: full width on small screens, capped on large */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.tableForm.responsive {
    width: 1000px !important;
}
/* Large desktops */
@media (max-width: 1399px) {
    .tableForm.responsive {
        width: 900px !important;
    }
}

@media (max-width: 1280px) {
    #bg {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .wrap {
        margin-left: 16px;
        margin-right: 16px;
    }

    .container {
        max-width: 1140px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 1199px) {
    .tableForm.responsive {
        width: 800px !important;
    }

    .container {
        max-width: 960px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Tablets and down */
@media (max-width: 991px) {
    .tableForm.responsive {
        width: 750px !important;
    }

    .container {
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    .frontbanner {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    #loginPanel {
        float: none;
        width: auto;
        max-width: 420px;
        margin: 16px auto 24px;
    }
}

@media (max-width: 767px) {
    .tableForm.responsive {
        width: 100% !important;
        overflow-x: auto;
        display: block;
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tableForm.responsive input,
    .tableForm input.datepicker,
    .tableForm input.datetimepicker,
    .tableForm.responsive textarea {
        width: auto !important;
    }

    .tableForm.responsive select {
        width: stretch;
        margin-right: 26px;
    }

    .frontbanner {
        width: 100%;
        max-width: 100%;
        margin-top: 24px;
        background-size: contain;
        background-position: center top;
        min-height: 70px;
    }

    #loginPanel {
        max-width: 100%;
        margin-left: 16px;
        margin-right: 16px;
    }
}

/* Small phones */
@media (max-width: 575px) {
    .tableForm.responsive {
        width: 100% !important;
        overflow-x: auto;
        display: block;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tableForm.responsive input,
    .tableForm input.datepicker,
    .tableForm input.datetimepicker,
    .tableForm.responsive textarea {
        width: stretch !important;
    }

    .tableForm.responsive select {
        margin-right: 0;
    }

    .frontbanner {
        margin: 12px 0;
        min-height: 56px;
    }

    #loginPanel {
        margin: 8px 12px 20px;
        padding: 16px;
        box-sizing: border-box;
    }

    #loginPanel .tableForm {
        width: 100%;
    }

    #loginPanel input.text,
    #loginPanel input[type="password"],
    #loginPanel input[type="submit"] {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    #loginPanel td[style*="display: flex"],
    #loginPanel td[style*="display:flex"] {
        flex-wrap: wrap;
    }
}