@charset "utf-8";
/* CSS Document */

@media (min-width: 1200px) {
  
}

@media (max-width: 1200px) {
  
  .admin-header .navbar-collapse{position:absolute; right:0; top:80px; width:100%; max-width:270px; background:#fff; box-shadow:0px 6px 3px rgba(0,0,0,0.4); z-index:999;}
  .menu-collapse-slot{display:block;}
  .left-menu-collapse .left-menu{width:300px;}
  .left-menu-collapse .left-menu ul{overflow:hidden;}
  .admin-header .navbar-brand{margin-left:50px; height:60px;}
  .admin-header .navbar-brand img{height:60px;}
  .left-menu{width:0;  position:absolute; z-index:999; top:80px; left:0; height:calc(100vh - 80px)}
  .page-data-container{width:100%; height:calc(100vh - 100px);}
  .admin-header .navbar-form{margin-left:0;}

.admin-header .navbar .navbar-nav li a{font-size:18px; font-weight:600;}
.admin-header .navbar .navbar-nav .creat-new{margin-left:0;  background:url("../Images/web-images/create-new-ico.png") no-repeat left 10px top 4px; padding:8px 10px 8px 50px;}
.admin-header .navbar .navbar-nav .creat-new:hover, .admin-header .navbar .nav .creat-new.active{background:url("../Images/web-images/create-new-ico-hover.png") no-repeat left 10px top 4px; color:#1d7fae;}
.admin-header .navbar .navbar-nav .createnew-drop .dropdown-menu{display:block; background:#f6f6f6; border:0; box-shadow:none; border-radius:0; padding:0; width:100%; float:left;}
.admin-header .navbar .navbar-nav .createnew-drop .dropdown-menu li{width:100%; float:left; padding-left:16px;}
.admin-header .navbar .navbar-nav .createnew-drop .dropdown-menu li a{padding-left:0;}

.admin-header .navbar .navbar-nav .notification{margin-left:0; position:relative;  background:url("../Images/web-images/notification-ico.png") no-repeat left 14px top 9px; padding:8px 10px 8px 50px;;}
.admin-header .navbar .navbar-nav .notification:hover, .admin-header .navbar .nav .notification.active{background:url("../Images/web-images/notification-ico-hover.png") no-repeat left 14px top 9px; color:#1d7fae;}


.admin-header .navbar .navbar-nav .my-account-menu{background:#00294A; border-radius:6px;}
.purpule .admin-header .navbar .navbar-nav .my-account-menu{background:#766cd0; border-radius:6px;}
.admin-header .navbar .navbar-nav .user-drop-block{margin-left:0; margin-top:0; padding:10px;}
.admin-header .navbar .navbar-nav .user-drop-block .user-info{width:calc(100% - 50px); float:right; white-space:nowrap; text-align:left; margin-top:0;}
.admin-header .navbar .navbar-nav .user-drop-block .user-info .name{font-weight:600; color:#fff; font-size:16px; line-height:25px; float:left;}
.admin-header .navbar .navbar-nav .user-drop-block .user-info .role{font-weight:500; color:#fff; font-size:13px; line-height:15px; float:left;}
.admin-header .navbar .navbar-nav .user-drop-block .user-pic{width:40px; height:40px; float:left; margin:0;}
.admin-header .navbar .navbar-nav .user-drop-block .user-pic img{width:40px; height:40px;}
.admin-header .navbar .navbar-nav .user-drop-block .carot{margin-top:10px; float:left; display:none;}
.admin-header .navbar .navbar-nav .dropdown a:after{display:none;}
.admin-header .navbar .navbar-nav .my-account-menu .dropdown-menu{ background:#00294A; border:0; box-shadow:none; width:100%; border-radius:0; float:left; padding:0 15px; display:block;}
.purpule .admin-header .navbar .navbar-nav .my-account-menu .dropdown-menu{ background:#766cd0; }
.admin-header .navbar .navbar-nav .my-account-menu .dropdown-menu li a{width:100%; float:left; padding:8px 15px; border-bottom:0; font-size:16px; font-weight:600; color:#fff;}
.admin-header .navbar .navbar-nav .my-account-menu .dropdown-menu a.dropdown-item{padding:8px 15px; border-top:2px solid rgba(255,255,255,0.3); border-bottom:0; font-size:16px; font-weight:600; color:#fff;}
.purule .admin-header .navbar .navbar-nav .my-account-menu .dropdown-menu a.dropdown-item{border-top:2px solid #8d84d8;}
.admin-header .navbar .navbar-nav .my-account-menu .dropdown-menu a.dropdown-item:hover{background:none;}

.page-data-container{padding:15px;}
.content-header{padding-bottom:10px;}
.content-header h2{font-size:26px; line-height:40px;}
.controls-panel{margin:15px 0 0;}
h3.section-heading{font-size:22px; line-height:32px;}

}

@media (max-width: 992px) {
    .details-card ul.pushup{margin-top:10px;}
    .notification{text-indent:-5000px; width:30px; height:30px; margin:12px 10px 0;}
    .creat-new{text-indent:-5000px; width:30px; height:30px; margin:12px 10px 0;}
    .admin-header .navbar-form{width:350px;}
    
}

@media screen and (min-device-width: 768px) and (max-device-width: 992px) {
   
}

@media (max-width: 768px) {
    .top-nav{float:right; width:auto;}
    .notification{margin:6px 10px 0;}
    .creat-new{margin:6px 10px 0;}
    .search-handle .trigger{margin:8px 10px 0;  background:url("../Images/web-images/search-ico.png") no-repeat center center; background-size:20px 20px; display:block; width:30px; height:30px; border:0; cursor:pointer;}

    .search-handle.open .search-close{background:url("../Images/web-images/black-close.png") no-repeat center center; background-size:16px 16px; display:block; width:16px; height:16px; margin-top:14px; margin-right:7px; float:right; border:0; cursor:pointer;}
    .admin-header .navbar-form{display:none;}
    .search-handle.open .navbar-form{display:block; position:absolute; z-index:999; top:75px; left:-15px; right:-15px; width:calc(100% + 30px); padding:10px; background:#fff; height:auto; }
    .search-handle.open .navbar-form .form-control{width:calc(100% - 40px);}
    .details-card ul.bor-right{border:none;}
    .popup-jumbo .modal-dialog {width:calc(100% - 20px); margin:10px;}
    .popup-big .modal-dialog {width:calc(100% - 20px); margin:10px;}
    .btn-control-box{margin-bottom:60px;}
    .data-table-custom .dataTables_wrapper .dataTables_paginate .paginate_button.previous a,
    .data-table-custom .dataTables_wrapper .dataTables_paginate .paginate_button.next a{text-indent:-5000px;}
    .vehicle-photo-block .vp-steps ul.white-box-list label { font-size: 16px; line-height: 24px; }
    .vehicle-photo-block .vp-steps ul.small{text-align:left}
    .vehicle-photo-block .vp-steps .mid-body-controls .action-btn { min-width: 150px;}
    
    
}
@media (min-width: 768px) {
    .signed-on-text-font{font-size: 8px;}
    .vehicle-photo-block .vp-steps .camera-box video, .vehicle-photo-block .vp-steps .camera-box canvas{
        width: 480px; 
        height: 480px;max-width:100%; }
}

@media (min-height: 1024px) {
    .vehicle-photo-block .vp-steps .mid-body-controls{position:inherit;padding:5px;}
}

    @media (max-width: 576px) {
        .switch-card li .label-data {
            width: 100%;
        }

        .tp-setting-card .thirdparty-logo {
            width: 100%;
            margin-bottom: 5px;
            float: left;
        }

        .admin-header .navbar-brand img {
            height: 50px;
            margin-top: 5px;
        }

        .popup-mid .modal-dialog {
            width: calc(100% - 20px);
            margin: 10px;
        }

        .notification-drop .notification-panel {
            right: -20px;
            min-width: 360px;
        }

        .search-result-list li .search-details {
            width: 100%;
            float: left;
            margin-bottom: 10px;
        }

        .search-result-list li .btn-control {
            width: 100%;
            float: left;
            text-align: center;
            margin-top: 0;
        }

        .vehicle-photo-block .vp-steps .mid-body-controls .action-btn {
            min-width: 150px;
            /*float: right;*/
        }

        .footer-sticky-block .powered img {
            height: 35px;
        }

        .footer-sticky-block .powered {
            line-height: 35px;
            height: 35px;
        }

        .vehicle-photo-block .vp-steps .mid-body-controls.btm-100 {
            bottom: 100px;
        }
        .help-tip span {
            bottom: auto;
            top: 100%;
            transform: translate(-40%, 5px);
            width:125px !important;
            font-size:14px !important;
            padding:15px;
        }
        .help-tip .auto {
            left: auto !important;
            transform: none;
        }
    }

    @media (max-width: 400px) {
        .data-table-custom .dataTables_wrapper .dataTables_paginate .paginate_button {
            margin: 0 1px;
        }

        .notification, .notification:hover, .notification.active {
            margin: 6px 6px 0;
            width: 24px;
            height: 24px;
            background-position: 2px;
        }

        .creat-new, .creat-new:hover, .creat-new.active {
            margin: 6px 6px 0;
            width: 24px;
            height: 24px;
            background-size: contain;
        }

        .search-handle .trigger {
            margin: 8px 6px 0;
            width: 24px;
            height: 24px;
        }

        .notification-drop .notification-panel {
            right: -20px;
            min-width: 300px;
        }
    }