@media screen {
    html,
    body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px
    }

    #main-wrapper {
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .login {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        height: 100%;
        width: 100%;
        padding: 8% 0;
        position: fixed;
    }

    .login-box {
        width: 360px;
        min-height: 200px;
        margin: 0 auto;
        border-radius: 15px;
        box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
        /* background: #fff; */
    }

    .navbar-inverse {
        position: relative;
        z-index: 50;
        -webkit-box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
        box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
        background: #26475f !important;
        border-radius: 0;
        border: 0;
        min-height: 56px;
    }

    .navbar-nav > li > a {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    .navbar {
        min-height: 56px !important
    }

    .card {
        border-color: #d7dfe3;
        border-radius: 4px;
        -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
        background: #ffffff;
    }

    .left-sidebar {
        background: #ffffff;
        position: absolute;
        z-index: 40;
        top: 0;
        left: 0;
        bottom: 0;
        overflow-y: scroll;
        top: 56px;
        width: 300px;

        box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.3);
    }

    .right-sidebar {
        background: #ffffff;
        position: absolute;
        z-index: 40;
        top: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        padding-top: 65px;
        width: 300px;

        box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.3);
    }

    .page-wrapper {
        margin-left: 300px;
        height: calc(100% - 56px);
    }

    .vehicle-info-panel {
        background: rgba(255, 255, 255, 0.85);
        /*background: #ffffff;*/
        position: absolute;
        z-index: 40;
        top: 56px;
        right: -350px;
        bottom: 0;
        overflow-y: auto;
        padding-top: 0;
        width: 350px;
        transition: 0.5s;
        box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.3);
    }

    .vehicle-info-panel.visible {
        right: 0;
        transition: 0.5s;
    }

    .vehicle-info-panel table td {
    }

    .reports-panel {
        background: rgba(255, 255, 255, 0.98);
        position: absolute;
        z-index: 40;
        top: 56px;
        right: -750px;
        bottom: 0;
        overflow-y: auto;
        padding-top: 0;
        width: 750px;
        transition: 0.5s;
        box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.3);
        z-index: 70;
    }

    .reports-panel.visible {
        right: 0;
        transition: 0.5s;
    }

    .reports-panel table.report td {
    }

    #map {
        box-sizing: content-box;
        width: 100%;
        height: 100%;
    }

    .vehicleInfo {
        padding: 8px 10px 8px 12px;
        line-height: 1.2;
    }

    .vehicleInfo > .plate {
        font-size: 15px;
        padding: 3px 0 8px;
    }

    .vehicleInfo > .date {
        color: #666;
        padding: 2px 0;
        font-size: 12px;
    }

    .vehicleInfo > .pos {
        color: #666;
        padding: 2px 0;
        font-size: 12px;
    }

    .vehicleInfo:nth-child(odd) {
        background-color: #f0f0f0;
    }

    .vehicleInfo:hover, .vehicleInfo:nth-child(odd):hover {
        cursor: pointer;
        background-color: #d9edf7;
    }

    .vehicleInfo.selected {
        background-color: #d9edf7;
    }

    table.table-small td, table.table-small th {
    }

    .vehicle-info-panel .tab-button {
        cursor: pointer;
        position: absolute;
        width: 80px;
        top: 0;
        left: 0;
        height: 32px;
        padding-top: 8px;
        text-align: center;
        color: #fff;
        background: #666;
        font-size: 11px;
        border-right: 1px solid #777;
    }

    .vehicle-info-panel .tab-button.one {
        left: 0;
    }

    .vehicle-info-panel .tab-button.two {
        left: 80px;
    }

    .vehicle-info-panel .tab-button.three {
        left: 160px;
    }

    .vehicle-info-panel .tab-button.four {
        left: 240px;
    }

    .vehicle-info-panel .tab-button.tab-close {
        width: 30px;
        left: 320px;
        background: #428bca;
        border-right: 0;
    }

    .vehicle-info-panel .tab-button.active {
        background: #5cb85c;
    }

    .vehicle-info-panel .tabs {
        position: absolute;
        width: 340px;
        top: 32px;
        height: calc(100% - 32px);
        overflow: auto;
        /*
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        */
    }

    .vehicle-info-panel .tab.info {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .vehicle-info-panel .report-results .item {
        border-bottom: 1px solid #ddd;
        padding: 5px 10px;
        cursor: pointer;
    }
    .vehicle-info-panel .report-results .item.active {
        background: #eaeaea;
    }

    .vehicle-info-panel h4 {
        margin-bottom: 0;
        padding-bottom: 0;
        margin-top: 0;
        font-weight: 400;
    }

    .traffic-button {
        direction: ltr;
        overflow: hidden;
        text-align: center;
        position: relative;
        color: rgb(86, 86, 86);
        font-family: Roboto, Arial, sans-serif;
        user-select: none;
        font-size: 11px;
        background-color: rgb(255, 255, 255);
        padding: 8px;
        border-bottom-right-radius: 2px;
        border-top-right-radius: 2px;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
        min-width: 40px;
        margin-top: 10px;
    }

    .traffic-button:hover {
        cursor: pointer;
    }

    .traffic-button.selected {
        font-weight: bold;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    ::-webkit-scrollbar-button {
        display: none;
    }

    body {
        -ms-overflow-style: none;
    }
}

@media print {
    body * {
        visibility: hidden;
    }
    #section-to-print, #section-to-print * {
        visibility: visible;
    }
    #section-to-print {

    }

    .report-results {
        height: 0;
        display: none;
    }

    .left-sidebar {
        display: none;
    }

    .no-print {
        display: none;
    }

    .progress{
        background-color: #f5f5f5 !important;
        border-radius: 4px !important;
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
    }
    .progress-bar{
        background-color: #428bca !important;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15) !important;
    }
}
}