body {
    overflow-x: hidden;
}

#wrapper,
#content-wrapper,
#content,
.container-fluid,
.row,
.card,
.card-body {
    min-width: 0;
}

.topbar h1 {
    font-size: clamp(1.25rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    margin-bottom: 0;
}

.portal-title-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.portal-title-controls h3 {
    margin-right: 0.5rem;
}

.portal-title-controls label {
    margin-bottom: 0;
    width: auto !important;
}

.portal-title-controls select {
    max-width: 100%;
    width: min(100%, 260px) !important;
}

.portal-card-column,
.portal-stack-column {
    max-width: none !important;
    min-width: 0;
}

.portal-bg-row {
    min-height: clamp(220px, 50vw, 850px);
}

.portal-bg-panel {
    background: url("../img/EMS_BG.jpg") center / contain no-repeat, #fff;
    min-height: clamp(220px, 50vw, 850px);
    padding: 12px;
    width: 100%;
}

.table-responsive,
.table-responsive-sm,
.table-responsive-md {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollBody {
    max-width: 100% !important;
}

.dataTables_scrollBody {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto !important;
}

table.dataTable {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

table.dataTable th,
table.dataTable td {
    overflow-wrap: normal;
    word-break: normal;
}

.portal-scroll-table {
    min-width: 860px;
}

.portal-scroll-table th,
.portal-scroll-table td {
    overflow-wrap: normal;
    white-space: nowrap;
}

@media (min-width: 1400px) {
    .portal-wide-container {
        max-width: 1680px;
    }
}

@media (max-width: 767.98px) {
    .card-body form .row > .col {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .modal-confirm {
        max-width: calc(100% - 2rem);
        width: auto !important;
    }

    .topbar {
        height: auto;
        min-height: 4.375rem;
    }

    .topbar .container-fluid {
        gap: 0.25rem;
    }

    .topbar h1 {
        font-size: 1.15rem;
    }

    .topbar .topbar-divider,
    .topbar .img-profile {
        display: none;
    }

    .portal-title-controls {
        align-items: stretch;
        display: grid;
        gap: 0.5rem;
    }

    .portal-title-controls h3 {
        margin-right: 0;
    }

    .portal-title-controls select {
        width: 100% !important;
    }

    .portal-card-column,
    .portal-stack-column {
        padding: 6px !important;
    }

    .card-body {
        padding: 0.75rem;
    }

    .card-header h5,
    .card-header .h5,
    .card-header p {
        font-size: 1rem !important;
    }

    .table-responsive-sm,
    .table-responsive-md {
        height: auto !important;
        max-height: 64vh;
    }

    .portal-bg-row {
        display: none;
    }
}