body {
    background-color: #f1f2f4;
    overflow: hidden;
}

main {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 0 0 80px;
}

.brand-logo {
    width: calc(100% - 135px);
    height: 100%;
    overflow: hidden;
}

body.no-menu {
    padding-left: 0 !important;
}


    body.no-menu .navbar-fixed nav.navbar {
        left: 0 !important;
        width: 100%;
    }

    body.no-menu .brand-logo {
        width: 100%;
    }

    body.no-menu .card {
        margin-bottom: 10px;
        margin-top: 10px;
    }

.navbar-fixed {
    display: inline-flex;
    display: inline;
    display: inline-block;
}

@media only screen and (min-width: 993px) {
    body.has-fixed-sidenav {
        padding-left: 275px;
    }

    .has-fixed-sidenav main {
        width: calc(100% - 275px);
        left: 275px;
    }

    .has-fixed-sidenav .navbar-fixed nav.navbar {
        width: calc(100% - 275px);
        left: 275px;
    }

    .brand-logo {
        width: calc(100% - 520px); /*min 516 or so*/
        line-height: 72px;
    }
}

.dropdown-content .setting .material-icons {
    vertical-align: middle;
}

.name-box {
    padding: 10px 10px 10px 0;
    width: 300px;
}

.company-name, .user-name {
    font-size: 14px;
    line-height: 22px;
    color: rgba(0,0,0,0.87);
    text-align: right;
    width: 100%;
    float: left;
}

/*  SIDENAV STYLES */
.sidenav {
    position: fixed;
    width: 275px;
}

    .sidenav .logo-container {
        padding: 0 12px;
        height: 64px;
        line-height: 24px;
        font-size: 22px;
        text-align: center;
        display: flex;
        font-weight: 500;
        opacity: 0.93;
    }

        .sidenav .logo-container img {
            float: left;
            height: 54px;
            margin: 0 -17px 0 10px;
        }

        .sidenav .logo-container span {
            margin: 0 0 2px 0;
            width: 100%;
        }

            .sidenav .logo-container span:hover {
                color: black;
            }

    .sidenav .collapsible .collapsible-header {
        color: black;
       
        text-transform: none;
        font-size: 15px;
        height: 58px;
        line-height: 58px;
        font-weight: 500;
    }

    .sidenav .collapsible .active .collapsible-header {
        color: black;
    }

    .sidenav.sidenav-fixed {
        background-color: white;
    }

    .sidenav .collapsible .collapsible-body {

        padding-bottom: 12px;
    }

    .sidenav .active .collapsible-header i.material-icons {
        color: black;
        background-color: white;
    }

    .sidenav .collapsible-header i.material-icons {
        color: black;
    }

    .sidenav li > a {
        color: black;
        font-size: 12.5px;
        height: 44px;
        line-height: 44px;
        /* font-size: 13px; */
        /* font-size: 12px; */
    }

        .sidenav li > a > i.material-icons {
            color: black;
            margin: -1px 10px 0px -3px;
            height: 44px;
            font-size: 22px;
            /*line-height: 44px;*/
        }


    .sidenav .collapsible .collapsible-body li > a:hover
    /*, 
.sidenav .collapsible .collapsible-body li > a.active*/ {
        color: black;
    }

    .sidenav .collapsible .collapsible-header:hover {
        color: black;
    }

    .sidenav .collapsible li.active,
    .sidenav .collapsible.collapsible-accordion > li:hover {
        color:black;
        background-color: white;
    }

    .sidenav .collapsible .collapsible-body li > a:hover,
    .sidenav .collapsible .collapsible-body li > a.active {
        color: black;
        background-color: #85bce6;
    }

/* BUTTON STYLES */

span.badge.new {
    background-color: #CC9F26;
    background-color: #46B3EA;
    color: #f0fafa; /* White is too "loud" */
    color: white;
}

.new-color {
    background-color: #5DcDc6;
    color: #f0fafa; /* White is too "loud" */
}

.btn:focus {
    outline: 2px solid rgb(77, 144, 254);
    outline-offset: 2px;
    transition: none;
}

.btn, .btn-large, .btn-small {
    /* background-color: #4983bC; */
    background-color: #397a9C;
    /* background-color: #559FB3; */
}

    .btn:hover, .btn-large:hover, .btn-small:hover,
    .btn:focus, .btn-large:focus, .btn-small:focus {
        /* background-color: #3973aC; */
        background-color: #296a8C;
        background-color: #428DB2;
        /* background-color: #65aFc3; */
    }

    .btn.action-btn {
        text-transform: none;
        font-size: 16px;
        background-color: #4983bC;
        color: #eaf0f0;
    }

        .btn.action-btn:hover,
        .btn.action-btn:focus {
            background-color: #3973aC;
            color: #B6EFFA;
        }

    .btn.contact-btn {
        text-transform: none;
        font-size: 16px;
        background-color: #85bce6;
        color: #f0f8f8;
    }

        .btn.contact-btn:hover,
        .btn.contact-btn:focus {
            background-color: #78AFD9;
            color: #C6F8FF;
        }


    .btn.file-area-btn {
        text-transform: none;
        font-size: 16px;
        background-color: #85bce6;
        color: #f0f8f8;
    }

        .btn.file-area-btn:hover,
        .btn.file-area-btn:focus {
            background-color: #95ccf6;
            color: #f8ffff;
        }

        .btn.file-area-btn input[type="file"]:focus {
            background-color: #fff;
            opacity: 0.3;
            border: 3px solid #95ccf6;
        }

    .btn.cancel-btn {
        /*background-color: #859ca6;
    color: #f0f8f8;*/
        background-color: #e4e4e8;
        color: #656565;
    }

        .btn.cancel-btn:hover,
        .btn.cancel-btn:focus {
            /*background-color: #758c96;
        color: #dfF8FF;*/
            background-color: #f0f0f4;
            color: #757575;
        }

    .btn.delete-btn {
        /*background-color: #EF5350;
    color: #f8f0f0;*/
        /*background-color: #80888a;*/
        background-color: #a44430;
        color: #f8f0f0;
        background-color: #c45450;
    }

        .btn.delete-btn:hover,
        .btn.delete-btn:focus {
            /*background-color: #dF4340;
        color: #ffe0d0;*/
            /*background-color: #90989a;*/
            background-color: #b45440;
            background-color: #d46460;
            color: #fff;
        }

.modal .btn.delete-btn {
    background-color: #EF5350;
    /*color: #f8f0f0;*/
    color: #fff;
}

    .modal .btn.delete-btn:hover,
    .modal .btn.delete-btn:focus {
        background-color: #fF6360;
        color: #fff0f0;
    }

.btn, .btn-large, .btn-small, .btn-flat {
    text-transform: none;
    font-size: 16px;
}

.btn-large {
    font-size: 17px;
}

/* TAB STYLES, MOSTLY USED ON DASHBOARDS */

.tab .tabs {
    text-transform: none;
}

.tab h6, .tabs h6 {
    text-transform: capitalize;
    font-size: 18px;
}
/*.sidenav .collapsible > li { 
    background-color: #00000010;
}*/

.sidenav > li > ul > li.active {
    background-color: lightgrey;
}

.tabs .tab a:hover, .tabs .tab a.active {
    background-color: transparent;
    color: black;
}

.tabs .tab a {
    color: rgba(38,108,255,0.7);
}

.modal h4 {
    /* modal titles felt too big, but h5 was tiny... */
    font-size: 2.05rem;
}

.modal .modal-content{
    word-break: break-word; /* IN CASE WORDS GET TOO LONG IN THE MODAL */
}

.container.dash, .container.edit {
    padding: 20px 10px;
    max-width: 100%;
    width: 100%;
}

.container.dash {
    padding: 20px 20px;
}


.static-label {
    line-height: 1.3;
}

.input-field label.static-label {
    position: relative;
    text-align: left;
    line-height: 1.3;
}

.input-field.col label.static-label {
    left: 0rem;
}

.vspace-15 {
    height: 15px;
}

td, th {
    padding: 10px 5px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    border-radius: 2px;
}

    td.data, .data {
        color: #111;
        font-size: 13.56px;
    }

    td.label, .label {
        text-transform: uppercase;
        font-size: 11px;
        font-family: 'Open Sans', sans-serif;
        color: #777;
    }

    td.label {
        padding-bottom: 5px;
    }

.remarks { 
    white-space: pre-wrap;
}

@media only screen and (min-width: 1500px) {
    .row .col {
        margin-left: auto;
        left: auto;
        right: auto;
    }

        .row .col.xxl1 {
            width: 8.3333333333%;
        }

        .row .col.xxl2 {
            width: 16.6666666667%;
        }

        .row .col.xxl3 {
            width: 25%;
        }

        .row .col.xxl4 {
            width: 33.3333333333%;
        }

        .row .col.xxl5 {
            width: 41.6666666667%;
        }

        .row .col.xxl6 {
            width: 50%;
        }

        .row .col.xxl7 {
            width: 58.3333333333%;
        }

        .row .col.xxl8 {
            width: 66.6666666667%;
        }

        .row .col.xxl9 {
            width: 75%;
        }

        .row .col.xxl10 {
            width: 83.3333333333%;
        }

        .row .col.xxl11 {
            width: 91.6666666667%;
        }

        .row .col.xxl12 {
            width: 100%;
        }
}

@media only screen and (min-width: 1800px) {
    .row .col {
        margin-left: auto;
        left: auto;
        right: auto;
    }

        .row .col.xxxl1 {
            width: 8.3333333333%;
        }

        .row .col.xxxl2 {
            width: 16.6666666667%;
        }

        .row .col.xxxl3 {
            width: 25%;
        }

        .row .col.xxxl4 {
            width: 33.3333333333%;
        }

        .row .col.xxxl5 {
            width: 41.6666666667%;
        }

        .row .col.xxxl6 {
            width: 50%;
        }

        .row .col.xxxl7 {
            width: 58.3333333333%;
        }

        .row .col.xxxl8 {
            width: 66.6666666667%;
        }

        .row .col.xxxl9 {
            width: 75%;
        }

        .row .col.xxxl10 {
            width: 83.3333333333%;
        }

        .row .col.xxxl11 {
            width: 91.6666666667%;
        }

        .row .col.xxxl12 {
            width: 100%;
        }
}

/* RESPONSIVE DATATABLES OVERRIDE */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
    top: 15px !important;
    background-color: #31b181 !important;
}

/* fixes a bug where the "dislay: flex" on .dataTables_paginate is 
    overridden by a user-agent stylesheet "display: block" */
.dataTables_wrapper div.dataTables_paginate {
    display: flex;
}

.dataTables_filter label {
    color: #333;
}

    .dataTables_filter label::before {
        content: "Filter "
    }

/* makes the data tables "search" box label show inline instead of above */
[id$='table_wrapper'] [id$='table_filter'] {
    width: 300px !important;
}

    [id$='table_wrapper'] [id$='table_filter'] input {
        width: 180px;
        margin-left: 8px;
    }

/* INPUT STYLES */

.material-icons.search-icon, .search-icon {
    position: absolute;
    right: 14px;
    top: 13px;
    cursor: pointer;
}

    .search-icon .material-icons {
        vertical-align: bottom;
    }


.vin {
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.splash {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.8);
    z-index: 1000;
}

    .splash .splash-content {
        width: 100%;
    }

    .splash h5, .splash h6 {
        color: white;
        width: 100%;
    }

.claim-buyout-icon {
    width: 22px;
    border-radius: 3px;
}