/* SecuBox CRT P31 Theme - Mobile Styles */

/* Mobile header */
header h3 a, header .brand {
    display: none !important;
}

@media screen and (max-device-width: 600px) {
    .modal {
        margin: 1.5em auto;
    }

    /* Table responsiveness */
    .table {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        border-top: 1px solid var(--p31-ghost);
        margin: 0 -3px;
        padding: 5px 0;
    }

    .table .th, .table .td, .table .tr::before {
        flex: 1 1 50%;
        align-self: flex-start;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        display: inline-block;
        border-top: none;
        box-sizing: border-box;
        padding: 3px;
    }

    /* Column sizing */
    .col-1 { flex: 1 1 30px !important; }
    .col-2 { flex: 2 2 60px !important; }
    .col-3 { flex: 3 3 90px !important; }
    .col-4 { flex: 4 4 120px !important; }
    .col-5 { flex: 5 5 150px !important; }
    .col-6 { flex: 6 6 180px !important; }

    /* Form controls */
    input, textarea, select, .cbi-dropdown > ul > li {
        font-size: 16px !important;
        height: auto;
    }

    select, input[type="text"], input[type="password"] {
        width: 100%;
        height: 30px;
    }

    /* Buttons */
    button, .btn, .cbi-button {
        font-size: 14px !important;
        padding: 0 8px;
    }

    /* Hide elements */
    .hide-sm, .hide-xs {
        display: none !important;
    }

    /* CBI values */
    .cbi-value {
        padding-bottom: .5em;
        border-bottom: 1px solid var(--p31-ghost);
        margin-bottom: .5em;
        display: block;
        align-items: baseline;
    }

    .cbi-value label.cbi-value-title {
        font-weight: 700;
    }

    .cbi-value-field, .cbi-select, .cbi-dynlist {
        width: 100%;
        margin: 0;
    }

    /* Header nav */
    header > .fill > .container {
        display: flex;
        flex-direction: row;
    }

    header .nav {
        flex: 3 3 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 2px 5px 2px 0;
    }

    header .nav a {
        padding: 2px 6px;
    }

    header .pull-right {
        flex: 0 1 20%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: .2em 5px .2em auto;
        padding: 0;
    }

    /* Table titles */
    .tr.table-titles, .cbi-section-table-titles, .cbi-section-table-descr {
        display: none;
    }
}

@media screen and (max-device-width: 375px) {
    .cbi-page-actions {
        display: flex;
        justify-content: space-between;
        margin: 0 -1px;
        padding: 0;
    }

    .cbi-page-actions button {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cbi-page-actions .cbi-button {
        flex: 1;
        line-height: 2em;
        margin: 1px !important;
    }
}