.loginscreen {
    padding-top: 150px;
}

/* Mobile tables: keep the page fixed, but allow wide content to be swiped sideways. */
@media (max-width: 767px) {
    .wrapper {
        padding-left: 8px;
        padding-right: 8px;
    }

    #page-wrapper {
        padding-left: 8px;
        padding-right: 8px;
    }

    .wrapper-content {
        padding-left: 0;
        padding-right: 0;
    }

    .ibox-content {
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    .ibox-content > table.table,
    .ibox-content form + table.table,
    .ibox-content .table {
        width: 100%;
        min-width: 760px;
        margin-bottom: 8px;
    }

    /* Compact cells while retaining all columns. */
    .ibox-content .table > thead > tr > th,
    .ibox-content .table > tbody > tr > th,
    .ibox-content .table > tfoot > tr > th,
    .ibox-content .table > thead > tr > td,
    .ibox-content .table > tbody > tr > td,
    .ibox-content .table > tfoot > tr > td {
        white-space: nowrap;
        padding: 8px 10px;
    }

    /* Long log messages may wrap instead of making the table enormous. */
    .ibox-content .table td:last-child {
        white-space: normal;
        min-width: 260px;
        max-width: 520px;
        overflow-wrap: anywhere;
    }

    /* Forms and toolbars remain usable on narrow screens. */
    .ibox-title,
    .ibox-content form,
    .form-inline,
    .input-group {
        max-width: 100%;
    }

    .form-inline .form-control {
        max-width: 100%;
    }
}

/* v5: global mobile horizontal scrolling for every data table. */
.mobile-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    display: block;
}

@media (max-width: 767px) {
    .mobile-table-scroll {
        margin-bottom: 10px;
        border-radius: 2px;
    }

    .mobile-table-scroll > table.table {
        width: max-content !important;
        min-width: 760px !important;
        max-width: none !important;
        margin-bottom: 0;
    }

    .mobile-table-scroll > table.table th,
    .mobile-table-scroll > table.table td {
        white-space: nowrap;
    }

    .mobile-table-scroll > table.table td.log-action,
    .mobile-table-scroll > table.table td:nth-last-child(2) {
        white-space: normal;
        min-width: 260px;
        max-width: 520px;
        overflow-wrap: anywhere;
    }

    .mobile-swipe-hint {
        display: block;
        font-size: 12px;
        color: #888;
        padding: 7px 9px;
        background: #f5f5f5;
        border-bottom: 1px solid #e7eaec;
    }

    /* Prevent Bootstrap rows/cards from clipping the inner scroller. */
    .row,
    .col-lg-12,
    .col-md-12,
    .col-sm-12,
    .ibox,
    .white-bg,
    .ibox-content {
        min-width: 0;
        max-width: 100%;
    }
}