/* Used to customize Focal Point to provide the Panasonic Dashboard experience. !Importance calls and 
    css in general will be organized and rendered differently in the final version. This is just a 
    temp solution for now.
*/


/* Main OFS template header and body styling */
/* Removing the logo as it was not in the Panasonic design and at this time the footer and logo section 
    share the same verbiage as pulled from config options. Because the footer is in the design it was chosen
    currently to use that option for the footer.
*/



/********** Login Section customization. ************/
.blue .message.toast-success {
    background-color: #0f58a8;
}


.blue .btn-success {
    background: rgb(15, 168, 56);
    border-color: rgb(15, 168, 56);
    color: #ffffff;
}

.blue .btn-primary {
    background: #0f58a8;
    border-color: #0f58a8;
    color: #ffffff;
}

.blue .btn-warning {
    background: #a85f0f;
    border-color: #a85f0f;
    color: #ffffff;
}


.blue .bg-login {
    background-color: #0f58a8 !important;
    background: #0f58a8 !important;
}

.blue #login h2, .blue #login h3 {
    color:#fff;
}
    .blue .bg-login .theme--light.v-input:not(.v-input--is-disabled) input,
    .blue .bg-login .theme--light.v-input:not(.v-input--is-disabled) textarea {
        color: #fff;
    }

    .blue .bg-login .v-text-field--outlined.v-input--has-state:not(.error--text) fieldset,
    .blue .bg-login .v-text-field--outlined.v-input--is-focused:not(.error--text) fieldset {
        border-color: #fff;
        border-width: 2px;
    }


    .blue .bg-login .v-icon:not(.error--text) {
        color: rgba(255, 255, 255, .54) !important;
    }

    .blue .bg-login .login-form {
        background: #3874b5;
    }

    .blue .bg-login .v-input .v-label:not(.error--text) {
        color: #fff !important;
        caret-color: #fff !important;
    }

    .blue .bg-login .loginButton {
        background-color: #41ed26 !important;
        border-color: #41ed26 !important;
    }

    .blue .bg-login .v-text-field--outlined:not(.error--text):hover fieldset
    .blue .bg-login .v-text-field--outlined.v-input--is-focused:not(.error--text) fieldset {
        border-color: rgba(255,255,255,.86) !important;
    }

    .blue .bg-login .v-text-field--outlined:not(.error--text):not(.v-input--is-focused) fieldset {
        border-color: rgba(255,255,255,.24) !important;
    }


/******* End of login secction customization  ********/
    .blue body {
    background-color: #eeeeee;
}





/*  blue sidebar */
.blue .sidebar-hide .nano-content i{
    font-size:50px !important;
}


.blue .v-application {
     background: none !important;
     background-color: none !important;
}

.blue .sidebar-hide .sidebar.sidebar-hide-to-small {
    width: 85px;
}

.blue .sidebar-hide .sidebar.sidebar-shrink.sidebar-hide-to-small ~ .content-wrap {
    margin-left: 85px;
}

.blue .sidebar-hide .sidebar.sidebar-hide-to-small .nano-content > ul {
    width: 85px;
}
/* end blue sidebar */

.blue .ossLogo {
    position: absolute;
    left: -37px;
    font-size: 30px;
    top: -11px;
    color: #0F58A8;
}

/* Upper outter right-hand styling for main OFS template */
.blue .header-icon {
    color: #0F58A8;
}

/* Inner template header styling */
.blue .page-header {
    background-color: #eeeeee;
}

.blue .page-header h1 {
    font-weight: bold;
    font-size: 24px;
}

/* Card styling */
.blue .card {
    margin: 0 0 10px 0;
    padding: unset;

}
.blue .card .card {
    margin: 0px;
    padding: 0px;
}
.blue .card .card .card-body {
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
}

.blue .card .card .card-header {
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
}

.blue .card-header {
    background-color: #0f58a8;
    padding: 5px 5px 5px 10px;
}
.blue .card-header h4 {
    color: #fff;
    font-size: medium;
    font-weight: bold;
}


.blue .form-group label {
    font-size:1.2em;
    font-weight:bold;
}

.blue .card-header .status-badge {
    background-color: #FF5800;
    color: #fff;
    font-weight: bold;
    float: right;
    padding: 5px;
    margin:5px;
}

.blue .card-header-empty {
    background-color: #eeeeee;
    padding: 5px 5px 5px 10px;
}

.blue .card-body {
    padding: 5px 5px 5px 10px;
    width: 100%;
}

    .blue .card-body.grey {
        background-color: #eeeeee !important;
    }

    .blue .card-body a {
        color: blue;
        text-decoration: none;
    }

.blue .card-body-white {
    background-color: #fff;
    padding: 5px 5px 5px 10px;
    width: 100%;
}

.blue .card-body-centered {
    text-align: left;
}

    .blue .card-body-centered img {
        height: auto;
        width: auto;
        margin: 10px 10px 10px 0px;
        max-width:50%;
    }

.blue .master-card {
    margin: unset;
    padding: unset;
    margin-bottom: 20px;
}

.blue .master-card-header {
    background-color: #0f58a8;
    padding: 5px 5px 5px 10px;
}

    .blue .master-card-header a {
        color: #fff;
        font-size: medium;
        font-weight: bold;
    }

.blue .card-header h4 {
    color: #fff;
    font-size: medium;
    font-weight: bold;
}

.blue .master-card-body {
    background-color: #ffffff;
    padding: 0px 5px 0px 10px;
}


.blue .v-progress-linear .v-progress-linear__background,
.blue .v-progress-linear .v-progress-linear__indeterminate {
    background-color: #FCD21D !important;
    border-color: #FCD21D !important;
}


.blue .card-sub-header {
    font-size: medium;
    margin: 10px 0px 10px 0px;
    display: block;
}

    .blue .card-sub-header span {
        font-weight: bolder;
    }

.blue .banner-navigation {
    background-color: #0f58a8;
    color: #ffffff;
    font-weight:400;
    font-size: 1.5em;
}

    .blue .banner-navigation a {
        color: #ffffff;
        border-color: transparent;
        border-style: solid;
    }

.blue .stat-widget-eight {
    padding: 15px;
}

.blue .card-group {
    margin-bottom: 10px;
    line-height: 20px;
}
    .blue .card-group > div {
        display: block;
        font-size: 1.1em;
        line-height: 1.3em;
    }
            .blue .card-group > div > span {
                font-weight: bolder;
                margin-right: 5px;
            }

.blue .form-group {
    font-weight: bold;
    font-size: 12px;
    vertical-align: middle;
}

    .blue .form-group input {
        font-weight: normal;
        border: 1px solid #878787;
        margin: 0px 0px 0px 0px;
        height: 29px;
        box-shadow: none;
    }

/* Alert styling */
.blue .blue-alert-icon {
    display: inline-block;
    background-color: #FFD800;
    width: 45px;
    height: 40px;
    float: left;
    margin-right: 10px;
    text-align: center;
    font-size: 38px;
}




.blue .blue-alert {
    display: inline-block;
    font-weight: bold;
    background-color: #FFF4BA;
    width: 100%;
    margin: 15px 0px 5px 0px;
}
    .blue .blue-alert p {
        vertical-align: middle;
    }

    .blue .blue-alert ul {
        list-style-type: none;
    }

        .blue .blue-alert ul li {
            float: left;
        }

            .blue .blue-alert ul li:not(:last-child):after {
                content: " |";
                margin-right: 5px;
            }


.blue .sub-card {
    float: left;
    display: inline-block;
    padding: 20px;
    margin: 10px;
    width: 48%;
    height: auto;
    background-color: #eeeeee;
}

    .blue .sub-card img {
        height: 160px;
        float: left;
        margin-right: 40px;
    }


.blue .panel-button {
    width: 225px;
    text-align: center;
}

/* System Status Widget */
.blue #sourceStatus {
    /*all: unset;*/
}
.blue #sourceStatus .card {
        /*padding: 0px;
        margin: 0px;*/
        background-color: #fff;
    }
.blue #sourceStatus .card-header {
        display:block;
        background-color: #0f58a8;
    }


.blue #vehicleSearchWidgetCard .card {
    /*padding: 0px;
        margin: 0px;*/
    background-color: #fff;
    /*width:400px; */
}
/* Styling for left hand navigation. 
    TODO: Clean up  up later */
.blue .sidebar {
    background: #0f58a8;
}
    .blue .sidebar .nano-content > ul li > a {
        font-size: 16px;
        text-transform: uppercase;
        color: #fff;
    }
    .blue .sidebar .nano-content > ul li:hover > a,
    .blue .sidebar .nano-content > ul li.active > a,
    .blue .sidebar .nano-content > ul li.open > a {
        color: #fff;
    }
    .blue .sidebar .nano-content > ul > li.active > a,
    .blue .sidebar .nano-content > ul > li.open > a,
    .blue .sidebar .nano-content > ul > li > ul {
        background: #0b4686;
    }
        .blue .sidebar .nano-content > ul > li > ul > li > a,
        .blue .sidebar .nano-content > ul > li > ul > li > ul {
            background: #0d4c8e;
            font-size: 14px;
            text-transform: capitalize;
        }
        .blue .sidebar .nano-content > ul > li > ul > li.active > a,
        .blue .sidebar .nano-content > ul > li > ul > li.open > ul {
            text-decoration: underline;
            font-weight: bold;
        }
        .blue .sidebar .nano-content > ul > li > ul > li > a:hover {
            text-decoration: underline !important;
        }

.blue .nano-content > ul > li.active > a,
.blue .nano-content > ul > li.open > a,
.blue .nano-content > ul > li > ul {
    background: #206da9;
}
    .blue .nano-content > ul > li > ul > li.active > a,
    .blue .nano-content > ul > li > ul > li.open > a,
    .blue .nano-content > ul > li > ul > li > ul {
        background: #1d6298;
    }
        .blue .nano-content > ul > li > ul > li > ul > li.active > a,
        .blue .nano-content > ul > li > ul > li > ul > li.open > a,
        .blue .nano-content > ul > li > ul > li > ul > li > ul {
            background: #195786;
        }

/* Footer Styling */
.blue .footer {
    bottom: 0;
    width: 100%;
}

/* JSGrid styling */
/* Styling for JSGrid data table specific to the Officer Safety Theme */
.blue .jsgrid-alt-row > .jsgrid-cell {
    background: #eeefff;
}

.blue .jsgrid-table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
}
    .blue .jsgrid-table a {
        color: blue;
        text-decoration: underline !important;
    }
    .blue .jsgrid-table thead {
        font-weight: normal !important;
        background-color: #fff;
        border-bottom: 1px solid #eeeeee;
        padding: 10px 10px !important;
        border-bottom: none !important;
        font-size: 16px;
    }
    .blue .jsgrid-table tbody {
        font-size: 16px;
        line-height: 16px;
        font-weight: normal;
    }
        .blue .jsgrid-table tbody tr td {
            text-align: left;
        }
    /* Rounded edges on table */
    .blue .jsgrid-table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    .blue .jsgrid-table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }

.blue .jsgrid-grid-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* Removes the scrollbar on the right-hand side of the table */
.blue .jsgrid-grid-header,
.blue .jsgrid-grid-body {
    overflow: auto;
}

/* Styling for tabs on detail pages 
    TODO: cleanup later
*/
.blue .custom-tab .nav-tabs {
    border-bottom: 0px;
}
    .blue .custom-tab .nav-tabs > li.active > a, .custom-tab .nav-tabs > li.active > a:focus, .custom-tab .nav-tabs > li.active > a:hover {
        background-color: transparent;
        color: #fff;
    }
    .blue .custom-tab .nav-tabs > li > a, .custom-tab .nav-tabs > li > a:focus, .custom-tab .nav-tabs > li > a:hover {
        background-color: transparent;
        color: #ccc;
    }
    .blue .custom-tab .nav-tabs > li.active > a:after, .custom-tab .nav-tabs > li.active > a:focus:after, .custom-tab .nav-tabs > li.active > a:hover:after {
        background: #fff;
        bottom: -1px;
        height: 4px;
    }


.blue .jsgrid-selected-row > .jsgrid-cell {
    background: #c4e2ff !important;
    border-color: #c4e2ff;
}

.blue .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    border:none;
}

#LicensePlateSearch .form-group {
    width:50%;
}


.blue .sidebar .badge {
    padding:3px;
    border-radius:2px;
    font-size: .7em;
}


.blue .v-data-table thead {
    background-color: #0f58a8;
}

.blue .v-data-table thead th {
    color: #fff !important;
    font-size: 1.2em;
    font-weight: 500;
}

/* Responsive styling */
@media screen and (max-width: 992px) {
    .blue .sub-card {
        width: 100%;
    }
}

.blue li.notification:hover > .acknotify {
    height: 28px;
    padding-top: 4px;
    opacity: 1
}

.blue li.notification > .acknotify {
    display: inline-block;
    background: #03a9f5;
    color: #ffffff;
    height: 0px;
    width: 100%;
    left: 0px;
    text-align: center;
    font-size: medium;
    cursor: pointer;
    transition: height .5s;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    opacity: 0
}

.blue .alert-card.red {
    float: unset;
    background: #e74c3c;
    font-weight: bold;
    color: white
}

    .blue .alert-card.red .stat-icon {
        background-color: #f8200b;
    }

.blue .alert-card.red .stat-icon i {
        color: unset;
    }



//* consider remvoing.. this was only done for demo purposes. */
@media (max-width: 1024px) and (min-width: 768px) {
    #panabuttons .col-lg-2 {
        flex: 0 0 33%;
        max-width: 33%;
        float: left;
    }
}