html,
body {
    height: 100%;
    font: normal 16px/26px system-ui,Roboto,Arial,sans-serif;
}
/*.loginview
{
     background-image: url("../images/insurance.jpg");
     background-position: center;
     background-size: cover;
     /*background-color: #cccccc;*/
/*}*/

.userform
{
    background-color: #edecf2;
    border-radius: 12px;
    
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
    /** background-color:#fff; **/
    background-color: #e7e7e7 !important;
}

.wrap > .container:not(.main-container) {
    padding: 70px 15px 20px;
}

#side-menu {
    width: 15%;
    position: fixed;
    box-shadow: 2px 10px 3px #8e8e8e;
    z-index: 1001;
}

#side-menu .navbar {
    background-color: #242831;
    border-right: 1px solid transparent;
    border-radius: 0 !important;
    padding-bottom: 100px;
    padding-top: 70px;
    height: 100vh;
    overflow: auto;
}

.nav-collapse-container {
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    margin-bottom: 10px;
    background: #242835;
    padding-left: 30px;
}

.collapsed-side-menu[data-device="Desktop"] .nav-collapse-container {
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    margin-bottom: 10px;
    background: #242835;
    padding-left: 10px;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1003;
    width: 250px;
    max-height: 300px !important;
    overflow: auto;
}

.collapsed-side-menu[data-device="Desktop"] .nav-collapse-container#users-list {
    padding: 10px 0px 50px 10px;
}

#side-menu.collapsed-side-menu[data-device="Desktop"]  .navbar{
    overflow: unset;
}

.nav-collapse-container li {
    list-style: none;
}

.nav-collapse-container li:first-child {
    padding-top: 15px;
}

.nav-collapse-container li:last-child {
    padding-bottom: 15px;
}

.nav-collapse-container li a {
    padding: 5px 5px 5px 10px;
    transition: all 0.5s ease;
    font-size: 14px;
}

.nav-collapse-container li a:hover, .nav-collapse-container li a:focus {
    text-decoration: none;
    background: #65b567!important;
    color: #000000!important;
    outline: unset;
    border-radius: 5px;
}

.nav-collapse-container li.active a {
    text-decoration: none;
    background: #65b567!important;
    color: #000000!important;
    outline: unset;
    border-radius: 5px;
    font-weight: 500;
}

.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}

.main-container {
    width: 85%;
    padding: 60px 30px 80px;
}

/** Top Menu Start **/
div#top-menu {
    height: 60px;
    background: #242831;
    box-shadow: 2px 1px 4px #5b5b5b;
    position: sticky;
    top: 0;
    z-index: 1002;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: start;
    justify-content: space-between;
    align-items: center;
}

.top-menu.logo {
    padding: 5px 10px 10px 20px;
    display: inline-block;
}

.top-menu.navbar-stack-icon {
    margin: 8px 10px 10px;
    padding: 4px 8px;
    display: inline-block;
    text-align: center;
    color: #dedede;
    border: 1px solid #7e7979;
    border-radius: 5px;
    font-size: 25px;
    transition: all 0.5s ease;
}

.top-menu.navbar-stack-icon:hover {
    cursor: pointer;
    color: #ffffff;
}

.top-menu.account {
    display: inline-block;
    padding: 5px 10px 10px;
    text-align: right;
}

.top-menu.account a {
    color: #ffffff;
}
.top-menu.account .dropdown-menu {
    left: unset;
    right: 0;
}

.top-menu.account .dropdown-menu > li > a:hover {
    background-color: #65b567;
}

.top-menu-icon {
    padding-right: 8px;
}

/** Top Menu End **/

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
    text-align: center;
}

.ml-20 {
    margin-left: 20%;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: system-ui,Roboto,Arial,sans-serif,'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.grid-panel-heading, .light-panel-heading {
    border-color: #ebc3b0 !important;
    background: #f5e0d9 !important;
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
}

.grid-panel-footer {
    background-color: unset !important;
    border-top: unset;
}

.grid-view abbr {
    border: unset;
    text-decoration: none;
}


.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}
.kv-datetime-picker
{
    border: 2px solid #4A4E69;
}
.kv-datetime-remove
{
    border: 2px solid #4A4E69;
}

/* Custom Css */
.kv-grid-table{
    layout-table:inherit !important;;
}

.kv-grid-table td {
    border: 2px solid #000 !important;
}

.kv-grid-table td i.fa, .kv-grid-table td i.far, .kv-grid-table td i.fas {
    font-size: 20px !important;
}

.kv-merged-header {
    border-bottom: 2px solid #000 !important;
}

.kv-grid-table tbody {
    color: #000000
}

#w0-filters td {
    border: 2px solid #000 !important;
}

.kv-align-middle {
     border: 2px solid #000 !important;
}

.kv-grid-table a{
   color:#fff;
}

.kv-grid-table button{
   color:#000;
}

.kv-grid-table button:hover{
   color:#000;
   font-weight:bold;
}

.kv-panel-pager {
    text-align: center;
}

.kv-panel-before .btn[title="Export"] {
    color: #ffffff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.kv-grid-loading {
    overflow: unset !important;
}

.kv-panel-after {
    display: none;
}

.navbar-nav > li {
    float: none !important;
}

.navbar-brand {
    color: #fff !important;
    float: none !important;
}

.navbar a{
    color: #ffffff !important;
    font-weight: 400;
    display: block;
}

.nav > li > a {
    font-size: 14px;
    transition: background-color 0.5s ease;
}

.nav > li > a:hover, .nav > li > a:active, .nav > li > a:focus, .nav > li.active > a {
    text-decoration: none;
    background-color: #65b567;
    outline: unset;
}

.nav .nav-icon {
    padding-right: 15px;
}

.panel-primary {
    border-color: #000;
}

.navbar-inverse .container {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar-header {
    float: none !important;
    padding: 15px 5px;
}

.form-row1
{
   float:left;
   width:250px; 
}

.form-row-other{
    float:left;
    width:250px;
    margin-left:20px;
}

.clear{
    clear: both;
}

.select2-container--krajee .select2-selection--multiple .select2-selection__clear{
    margin-right:1px;
    margin-top:0px;
    margin-bottom:0px;
    opacity:100;
    font-size:14px;
    position:static;
    line-height: 0.8;
}

.dropdown-menu > li > a {
    color: #000 !important;
}

.dropdown-menu > li > a:active {
    color: #fff !important;
    background-color: #397d0e;
    border: none;
}
.dropdown-menu > li > a:hover {
    /*color: #fff !important;*/
    background-color: #397d0e;
}
.botitle
{
    color: blue;
    font-weight: bold;
    font-size: 20px;
    font-family: system-ui,Roboto,Arial,sans-serif,sans-serif;
}

li.active > a {
color: #fff !important;
}

.form-prerow1
{
   float:left;
   width:175px; 
}

.form-prerow-other{
    float:left;
    width:175px;
    margin-left:20px;
}

.form-prerow-image{
    /*float:left;
    width:250px;
    margin-left:20px;*/
    margin: 20px auto;
}

#AxionPreinspection .preinspection-box
{

    padding-left: 15px;
    padding-top: 10px;
    background-color: #d4c9c9;
    border: 3px solid #72ce3ff7;
    border-radius: 9px;

}

.preinspection-box-title{
    color: blue;
    text-align: left;
    font-weight: bold;
}

.preinspection-box-hr{
    margin: 0px;
    padding: 0px;
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 3px;
}

.retail-box
{
    padding-left:15px;
    padding-top: 10px;
}

.retail-box-title{
    color: blue;
}

.retail-box-hr{
    margin: 0px;
    padding: 0px;
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 3px;
}
.table th:not(.data-view-table .table th)
{
    border:none !important;
    position: sticky;
    top: 0;
}

.innertable
{
    background-color:#ececec !important;
    border-radius: 30px;
    font-family: system-ui,Roboto,Arial,sans-serif,"Serif",Times New Roman, Times;
    font-size: 12px;


}
.title
{
    background-color:#ffffff;
    border-radius: 12px;
    font-family: system-ui,Roboto,Arial,sans-serif,"Serif",Times New Roman, Times;
    padding: 17px;
    font-size:18px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #2371af;
}
.form-control
{
    border: 2px solid #4A4E69;
}
.form-control .control-label
{
    font-size: 17px;
}

.msize {
    font-size: 25px;
}

.logo-image{
    width: 140px;
    height: 50px;
}

.logo-image:hover {
    cursor: pointer;
}

/*.site-login .field-loginform-email
{
    border: 3px solid black;
    margin: auto;
    width: 100%;
}
.site-login .field-loginform-password
{
    border: 3px solid black;
    margin: auto;
    width: 100%;
}*/
.site-login .field-loginform-rememberme
{
    color:#fff;
    font-weight: bold;
}
.site-login .col-lg-3
{
    width: 100%;
    margin: auto;
    /*border:2px solid black;*/
}
.site-login .form-group
{
    /*border: 3px solid black;*/
    margin: auto;
    width: 100%;
    color:#fff;
    font-weight: bold;
    /*font-size: 20px;*/
}
/*.site-login .btn
{
    margin: auto 101px;
    border: none;

    font-weight: bold;
    font-size: 20px;
    background-color:#00b36b;
}*/
#logintitle
{
    color:#fff;
    font-weight:bold;
    text-align: center;
}
.site-login .control-label
{
    color:#fff;
    font-size: 17px;
    font-weight:bold;
    font-family: system-ui,Roboto,Arial,sans-serif,sans-serif;
}
.has-error .help-block
{
    color: #ff0000;
    font-size: 14px;
    font-weight: bold;
}
.has-error .form-control
{
   
    border: 2px solid #ff0000;
}
.form-subheading {
    background-color: unset !important;
    color: #0030b3;
    margin-bottom: 10px;
}
.sample-image-container, .actual-image-container{
    margin: 3rem 0 10px;
}
.sample-image-label, .actual-image-label {
    text-align: center;
    margin-bottom: 10px;
    text-decoration: underline;
}
.sample-image-frame, .actual-image-frame {
    max-width: 100%;
    max-height: 230px;
    min-height: 230px;
    overflow: hidden;
    position: relative;
}
.sample-image-frame .sample-img, .actual-image-frame .actual-img.lightboxed {
    position: absolute;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    display: inline-block;
    object-fit: cover;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #dddddd;
    border: 1px solid #dddddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.actual-image-frame .actual-img.lightboxed {
    background-color: #e5fd08;
    border: 1px solid #e5fd08;
}
.actual-img-parent-container {
    padding-bottom: 15px;
    border-left: 2px solid #ffffff;
}
.border-bottom {
    border-bottom: 3px solid #d81212;
}

.guest-navbar .navbar-toggle {
    display: none;
}
.alert-dismissable .close {
    position: relative;
    top: -6px;
    right: 4px;
}
.flash-message {
    width: 50%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: -20%;
    opacity: 0;
    transform: translateX(-50%);
    padding: 5px 10px;
    z-index: 1000;
    box-shadow: 2px 2px 4px #000000;
}
.flash-message .flash-msg {
    color: #1a1a1a;
    font-size: 18px;
}
div#lightboxed--content .lightboxed--frame .lightboxed--caption {
    background: rgb(232 22 22 / 90%) !important;
}

/* Bootstrap Classes */
.alert-success {
    background-color: #d4edda !important;
}
.alert-warning {
    background-color: #ffeeba !important;
}
.alert-danger {
    background-color: #f5c6cb !important;
}

/* Video Capturing */
#video, #videoview, #videosensor, #videooutput, .video-record-effect, .videoTimerContainer{
    position: fixed;
    height: 100%;
    width: 95%;
    object-fit: cover;
}

#videoStartBtn{
    width: 100px;
    background-color: black;
    color: white;
    font-size: 16px;
    border-radius: 30px;
    border: none;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    position: fixed;
    bottom: 30px;
    left: calc(25% - 50px);
}

#videoStopBtn {
    width: 100px;
    background-color: black;
    color: white;
    font-size: 16px;
    border-radius: 30px;
    border: none;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    position: fixed;
    bottom: 30px;
    left: calc(25% - 50px);
}
 
#videoupload{
    width: 100px;
    background-color: black;
    color: white;
    font-size: 16px;
    border-radius: 30px;
    border: none;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    position: fixed;
    bottom: 30px;
    right: calc(25% - 50px);
}
.videotaken{
    height: 150px!important;
    width: 150px!important;
    transition: all 0.5s ease-in;
    border: solid 3px white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    top: 40px;
    right: 20px;
    z-index: 2;
}
#videoTimer {
    color: #ffffff;
    position: relative;
    top: 5px;
    padding-left: 2px;
}
.videoTimerContainer .black-circle{
    border: 1px solid #1c1c1c;
    border-radius: 50%;
    padding: 2px 9px;
    background: #f10606;
    position: relative;
    top: 5px;
}

.panel {
    border-radius: 15px !important; 
}

.panel-heading {
    color: maroon !important;
}
.panel label {
    font-size: 13px;
}

.full-width {
    width: 100% !important;
}

.qc-collapse-icon {
    font-size: 36px;
    padding: 10px;
}

.left-side-panel {
    border-right: 1px solid #aeaeae;
    border-bottom: 1px solid #aeaeae;
    min-height: 500px;
    max-height: 500px;
    overflow: auto;
    margin-bottom: 20px;
}

.right-side-panel {
    border-right: 1px solid #aeaeae;
    border-bottom: 1px solid #aeaeae;
    min-height: 500px;
    max-height: 500px;
    overflow: auto;
    margin-bottom: 20px;
}

.guest-right-side-panel {
    border-right: none;
    border-bottom: none;
    max-height: none;
    overflow: unset;
}

.row {
    margin-right: unset;
    margin-left: unset;
}

h4, .h4 {
    font-size: 16px;
}

.breadcrumb {
    border: 1px solid #5d5352;
    border-radius: 5px;
}

.dashboard-panel *, .dashboard-panel {
    color: white;
    transition: 0.5s all;
}

.dashboard-panel:hover {
    background-color: #111111 !important;
}

.dashboard-panel a:hover {
    color: #ffffff !important;
}

.border-box {
    border: 2px solid #ef4e1e;
    border-radius: 5px;
}

.border-with-radius {
    border: 1px solid;
    border-radius: 10px;
}

.table-grid thead, .table-grid thead a {
    color: #ffffff !important;
} 

.table-grid td i.fa, .table-grid td i.far, .table-grid td i.fas {
    font-size: 18px !important;
}

.perPage {
    margin: 0px 3px 0px 1px;
    padding: 3px 8px;
    border: 2px solid #4A4E69;
    border-radius: 5px;
    text-align: center;
}

.auto-scroll-panel {
    height: 500px;
    overflow: auto;
}

.copy-sms-btn i:active {
    color: blue;
}

/****  MagicZoomPlus Design  ****/

.MagicThumb-expanded > div:nth-child(2), .MagicThumb-expanded .MagicThumb-caption {
    height: 30px !important;
    margin: 0px !important;
    background: #f31616 !important;
    color: #ffffff !important;
    overflow: unset !important;
    text-align: center;
}

.MagicThumb-expanded > div:nth-child(1) > div:nth-child(3), .MagicThumb-expanded > div:nth-child(1) span, 
.MagicThumb-buttons + div[style^="color"], .MagicThumb-expanded span[style^="display"], 
.MagicZoomBigImageCont.MagicBoxShadow div[style^="color"], .MagicZoomBigImageCont.inner-zoom div[style^="color"],
.MagicZoomBigImageCont.inner-zoom span[style^="color"] {
    display: none !important;
}

.MagicThumb-buttons {
    background-color: #f73461 !important;
    border-radius: 5px;
    height: 30px !important;
}

.MagicThumb-buttons [title="Previous"], .MagicThumb-buttons [title="Next"], .MagicThumb-buttons [title="Close"] {
    margin: 3px 8px !important;
}

.MagicZoomPlus img {
    height: 230px !important;
}

/****  Image Upload Section Design  ****/

.fileinput-upload-button {
    background: #5cb85c;
    color: #ffffff;
    border: 1px solid #3a3a3a;
}

.fileinput-remove-button {
    background: #d9534f;
    color: #ffffff;
    border: 1px solid #3a3a3a;
}

.file-drop-zone, .file-preview {
    border: none !important;
}

.krajee-default.file-preview-frame {
    max-height: 200px !important;
    max-width: 150px;
    border-radius: 10px;
    position: relative;
    right: 40px;
}

img.file-preview-image.kv-preview-data {
    width: 80% !important;
    height: 80% !important;
    border-radius: 5px;
    border: 1px solid #383838;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.kv-zoom-body img.file-preview-image.kv-preview-data {
    width: auto !important;
    height: auto !important;
    border: none;
    position: static !important;
    transform: unset !important;
}

.file-drop-zone-title {
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
    border-radius: 10px;
    min-width: 150px;
    padding: 60px 10px;
    position: relative;
    top: 8px;
    right: 30px;
}

.file-sortable .file-drag-handle {
    display: none;
}

.file-caption-main .btn-primary {
    background-color: #480155 !important;
    border-color: #480155 !important;
}

#inspection_photos .control-label {
    height: 50px;
}

button.kv-file-upload {
    background: #4cae4c;
    color: #ffffff;
    border: 1px solid #383838;
}

.field-axionpreinspectionphotos-image-others button.kv-file-upload {
    display: none;
}

button.kv-file-remove {
    background: #d9534f;
    color: #ffffff;
    border: 1px solid #383838;
}

button.kv-file-zoom {
    background: #5bc0de;
    color: #ffffff;
    border: 1px solid #383838;
}

.file-preview-frame:not(:first-child) {
    display: none;
}


/***** Colors *****/

.text-pink {
    color: #e917e2 !important;
}

.text-limegreen {
    color: limegreen !important;
}

.text-limered {
    color: #ff0000d1 !important;
}

.text-error {
    color: #ff0000 !important;
}

.text-darkYellow {
    color: #d0a91d !important;
}

.text-white {
    color: #ffffff !important;
}

.bg-limered {
    background-color: #ff0000d1 !important;
}

.bg-lightblue {
    background-color: #2978a7 !important;
}

.bg-darkOrange {
    background-color: #e76509 !important;
}

.bg-greenish {
    background-color: #24b124 !important;
}

/****************** 

             @media queries must be down here 

                        ********************************/
                        
@media (min-width:500px)
{
    .loginview
    {
         background-image: url("../images/car1.jpg");
         background-position: center;
         background-size: cover;
         /*opacity: 0.5;*/


         /*background-color: #cccccc;*/
    }
    .site-login
    {
        /*border: 2px solid black;*/
        background-color:rgb(0,0,0,0.3);

        border-radius: 12px;
        width: 420px;
        height: 400px;
        /*color:red;*/
        font-weight: bold;
        font-style: oblique;
        color:#000;
        top:50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%,-50%);
        box-sizing: border-box;
        font-family: system-ui,Roboto,Arial,sans-serif,"Serif",Times New Roman, Times;
        padding: 15px;
        
    }
    .site-login .btn
    {
        margin: auto 101px;
        border: none;

        font-weight: bold;
        font-size: 20px;
        background-color:#00b36b;
    }
}
@media (max-width:499px)
{
    .loginview
    {
         
         background-image: url("../images/bike_insurance.jpg");
         background-position: center;
         background-size: cover;
    }
    .site-login
    {
        /*border: 2px solid black;*/
        background-color:rgb(0,0,0,0.5);
        border-radius: 12px;
        width: 76%;
        height: 60%;
        /*color:red;*/
        font-weight: bold;
        font-style: oblique;
        color:#000;
        top:50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%,-50%);
        box-sizing: border-box;
        font-family: system-ui,Roboto,Arial,sans-serif,"Serif",Times New Roman, Times;
        padding: 15px;
        
    }
    .site-login .btn
    {
        margin: auto 69px;
        border: none;
        font-weight: bold;
        font-size: 20px;
        background-color:#00b36b;
    }
    .actual-image-frame.minheight-0{
        min-height: 0;
    }
    .flash-message {
        width: 90%;
    }
    div#top-menu {
        margin-left: 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .krajee-default.file-preview-frame {
        max-height: unset;
        max-width: unset;
        right: auto;
    }
}
@media (max-width: 767px) {
    .logo-image{
        width: 90px;
    }

}

@media (max-width: 992px) {
    .main-container {
        padding: 40px 10px 50px;
        width: 100%;
    }
    #side-menu {
        width: 0%;
    }
    #side-menu .navbar {
        background-color: #242831eb;
    }
    .navbar-toggle {
        display: none;
    }
    .navbar-collapse.collapse {
        display: block !important;
    }
    .nav > li > a {
        padding: 10px 35px;
    }
    .nav-collapse-container li a {
        padding: 5px 0 5px 15px;
    }
    .left-side-panel {
        border-right: none;
        border-bottom: none;
        max-height: none;
        min-height: unset;
        overflow: unset;
    }
    .right-side-panel {
        border-right: none;
        border-bottom: none;
        max-height: none;
        min-height: unset;
        overflow: unset;
    }
}