body {
    font-family: 'Barlow Condensed', sans-serif !important;
    background-color: #F4F3EF !important;
    padding: 10px;
    margin: 10px;
}

    body.index {
        background: #1e7ae1 url('../images/login-bg-02.jpg') no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-color: #1e7ae1 !important;
    }

.header {
    position: fixed;
}

.sub-header {
    padding: 10px 0;
    /* border-bottom: 2px solid #1e7ae1; */
    width: 100%;
}

    .sub-header .hright {
        text-align: right;
    }


    .sub-header img {
        max-width: 180px;
    }

        .sub-header img.logout {
            max-width: 24px;
            padding: 0 10px 0 0;
            display: inline;
        }

.container-fluid {
}

.login-wrapper {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    margin-top: 10%;
}

    .login-wrapper .logo {
        width: 180px;
        position: relative;
        left: 50%;
        margin: 8px 0 12px -90px;
    }

    .login-wrapper h3 {
    }

    .login-wrapper form button,
    .login-wrapper form input {
        border-radius: 0px;
        padding: 0.6rem;
    }

.table-wrapper {
    background-color: #fff;
    margin: 20px 20px 40px 5px !important;
    padding: 20 !important;
    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
    width: fit-content;
}

table {
}

    table tr td,
    table tr th {
        border-right: 1px dotted #ddd;
        white-space: nowrap;
        overflow: hidden;
    }

    table tr:hover {
        background-color: #F2B547 !important;
    }

.thead-dark th {
    background-color: #1E2350 !important;
    border-right: 1px dotted #1e7ae1 !important;
    font-size: 0.85rem;
    padding: 5px !important;
    height: 2.5rem;
}

.table th .sortable {
    cursor: pointer;
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 30px !important;
}

table th .both {
    background: url('../images/sort@2x.png') no-repeat right center;
    background-size: 8px 12px;
}

table th .sortasc {
    background: url('../images/sortasc@2x.png') no-repeat right center;
    background-size: 8px 6px;
}

table th .sortdesc {
    background: url('../images/sortdesc@2x.png') no-repeat right center;
    background-size: 8px 6px;
}

table .th-serial {
    min-width: 15px !important;
}

table .col-bookedon {
    min-width: 90px;
}

table .col-name {
    min-width: 200px;
}

table .col-pickuploc,
table .col-returnloc,
table .col-pupdate,
table .col-returndate {
    min-width: 170px;
}

table .col-notes {
    min-width: 300px;
}

table tr.filterbox th {
    /* background-color: #343C76!important; */
    background: #a5a7aa !important;
}

    table tr.filterbox th div input {
        font-size: 0.9rem !important;
        padding: 0.2rem;
        border-radius: .15rem;
        height: 2rem;
    }


    table tr.filterbox th div img {
        max-width: 16px;
    }

    table tr.filterbox th div .btn {
        padding: 2px;
        border-radius: 0.15rem;
    }


    table tr.filterbox th div .btn-info {
        background: #7d7e81;
        border-color: #7d7e81;
    }

    table tr.filterbox th div .btn-info:hover {
        background: #2b9cdc;
        border-color: #2b9cdc;
    }

    .filterbox select.form-control {
        max-height: 2rem;
    }