.VCBody {
    float: left;
    width: calc(100% - 10px);
    height: calc(100% - 60px);
    background: whitesmoke;
    color: #333;
 /*   padding: 5px;*/
}

textarea {
    font-family: Roboto, Arial, sans-serif;
}
.VCList {
    float: left;
    width: 100%;
    height: calc(100% - 40px);
    line-height: 40px;
    border-right: 1px solid var(--MainColor);
    overflow-y: scroll;
}

.VCCommentClass {
    width: 100%;
    word-wrap: break-word;
}

.VCCheck {
    float: right;
    width: calc(100% - 301px);
    height: 100%;
}

.VCButton {
    width: 110px;
    height: 32px;
}

.VCListItem {
    width: 100%;
    height: 40px;
   /* background: var(--ToolbarTop);*/
    border-bottom: 1px dashed #AFAFAF;
}

    .VCListItem:hover {
        background: var(--MainColor);
        color:white;
    }

.VCActiveListItem {
    background: var(--MainColor);
    color: white;
}
.VCListItemRow {
    float: left;
    width: 100%;
    height: 20px;
    line-height: 20px;
}
.VCLabel {
    padding-left: 10px;
}

.VCTabBar {
    width: 100%;
    height: 32px;
    margin-top: 0px;
    list-style-type: none;
    padding: 0px 0px 0px 0px;
    margin-bottom: 0px;
    line-height: 32px;
    text-align: center;
    color: var(--text);
}

.DMTabBar {
    width: 100%;
    height: 32px;
    margin-top: 20px;
    list-style-type: none;
    padding: 0px 0px 0px 0px;
    margin-bottom: 3px;
    line-height: 32px;
    text-align: center;
    color: var(--text);
}

.DMTabBarItem {
    float: left;
    width: 200px;
    height: 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: var(--ToolbarTop);
    border: 1px solid var(--GTDialogBorder);
    margin-top: 2px;
}

.DMActiveTabBarItem {
    height: 32px !important;
    background: var(--MainColor) !important;
    margin-top: 0px !important;
}

.VCTabBarItem {
    float: left;
    width: 200px;
    height: 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
   /* background: var(--ToolbarTop);*/
    border: 1px solid var(--GTDialogBorder);
    margin-top: 2px;
    color:#333;
}

.VCActiveTabBarItem {
    height: 32px !important;
    background: var(--MainColor) !important;
    margin-top: 0px !important;
    color: white;
}

.VCTabContent {
    width: calc(100% - 10px);
    height: calc(100% - 35px);
    float:left;
 /*   background: var(--GTDialogBackground);*/
  /*  padding: 5px;*/
}

.GTNew {
    float: right;
    height: 24px;
    margin: 8px 8px 0px 0px;
}
.GTNewTemplate {
    float: right;
    margin: 8px 8px 0px 0px;
    font-size:32px;
}
.GTNewPage {
    height: 20px !important;
}
.VCCTRadio {
    float: left;
    width: 50%;
    height: 32px;
}

.VCTemplatePages {
    float: right;
    width: calc(100% - 300px);
    height: 100%;
}

.VCPageTabs {
    width: calc(100% - 42px);
    height: 32px;
    list-style-type: none;
    padding: 0px 0px 0px 20px;
    margin-bottom: 0px;
    line-height: 32px;
    text-align: center;
}

.VCPageTab {
    float: left;
    width: 100px;
    height: 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /*background: var(--ToolbarTop);*/
    border: 1px solid var(--GTDialogBorder);
    margin-top: 2px;
}

.VCActivePageTab {
    background: var(--MainColor);
    height: 32px !important;
    margin-top: 0px !important;
    font-weight: 700;
    color: white;
}

.VCPageContent {
    width: calc(100% - 12px);
    height: calc(100% - 64px);
    padding: 5px;
    border: solid var(--GTDialogBorder) 1px;
   /* background: var(--GTDialogBackground);*/
}

.VCPageBody {
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: auto;
}

.VCPageFooter {
    width: 100%;
    height: 40px;
}

.VCSectionBody {
    width: 100%;
    height: auto;
}

.VCSectionHeader {
    width: 100%;
    height: auto;
    line-height: 40px;
    background: var(--MainColor);
    text-align: center;
    border-radius: 5px;
    margin: 5px 0px 0px 0px;
    color: white;
}

.VCSectionFooter {
    width: 100%;
    height: 32px;
}

.VCSectionTitle {
    background: transparent;
    border: none;
    color: var(--text);
    text-align: center;
    margin-left: 16px;
    width: 200px;
}

.VCRemoveSection {
    float: right;
    width: 16px;
    margin: 12px 6px 0px 0px;
}

.VCQNo {
    color: var(--textcolor);
    font-weight: 700;
    height: 32px;
    font-size:16px;
}

.VCQText {
    margin-bottom: 10px;
}

.VCLockLabel {
    font-size: 12px;
    line-height: 20px;
    height: 60px;
    width: 100%;
    float: left;
}

.VCQuestion {
 /*   background: var(--MainColor);*/
    margin-top: 5px;
    line-height: 24px;
    padding: 5px;
    border: 1px solid transparent;
    color: #333;
}

.VCActiveQuestion {
    border: 1px dashed #CCCCCC;
}

.VCInsertQ {
    border-top: 1px dashed #EFEFEF;
}
.VCSectionFooter {
    width: 100%;
    height: 32px;
    padding-top: 5px;
}

.VCExpand {
    float: left;
    width: 100%;
    height: calc(100% - 25px);
}

.VCCollapse {
    width: calc(100% - 405px) !important;
}

.VCQDetails {
    float: right;
    padding-left: 5px;
    text-align: center;
    width: 400px;
    height: 100%;
}

.VCQuestionBody {
    width: 100%;
    height: calc(100% - 120px);
    margin-top: 52px;
}

.VCRadioPanel {
    text-align: center;
    line-height: 24px;
    height:42px;
    line-height:14px;
}
.VCRadioAlign {
    margin-top:0px;
}
.VCRadioLabel {
    font-size: 12px;
    vertical-align: middle;
}
.VCRadioLabelOff {
    color:#BFBFBF !important;
}
.VCThumbnail {
    width: 100px;
}
.VehicleCheckViewer{
    height:calc(100% - 50px);
}
.VideoEventViewer {
    height: calc(100% - 50px);
}
.VCLeftPanel {
    float: left;
    width: 300px;
    height: 100%;
    /*  background: var(--ToolbarTop);*/
    overflow-y: hidden;
    overflow-x: hidden;
    border-right: 1px solid #333;
    padding-right: 3px;
}
.VCChecksHeader {
    float: left;
    width: 100%;
    
   /* background: var(--ToolbarTop);*/
}
.VCIssuesTab {
    float: left;
    width: 50px;
    height: calc(100% - 50px);
    padding: 50px 0px 0px 0px;
    margin: 0px;
    list-style-type: none;
   /* background: var(--GTDialogBackground);*/
    text-align: center;
}
.VCIssuesTabItem {
    width: 36px;
    line-height: 36px;
    height: 120px;
    writing-mode: vertical-rl;
   /* background: var(--ToolbarTop);*/
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #555555;
    border-left: none;
}
.VCActiveIssuesTabItem {
    width: 38px;
    line-height: 38px;
    background: var(--MainColor);
    /*color:white;*/
}
.VCIssuesContent {
    float:left;
    width: 100%;
    height: calc(100% - 110px);
}
.VCChecks {
    float: left;
    width: 100%;
    border-right: 1px solid #7F7F7F;
    height: 100%;
    overflow-y:scroll;
}
.VCChecksItem {
    float: left;
    width: 100%;
    
    line-height: 25px;
    
    border-bottom: 1px dashed #AFAFAF;
}
    .VCChecksItem:hover {
        background: var(--MainColor);
        color: white;
    }
.VCActiveChecksItem {
    background: var(--MainColor) !important;
    color: white;
}
.VCVehicleFilesItem {
    float: left;
    width: 100%;
    height: 50px;
    line-height: 25px;
    
    border-bottom: 1px dashed #AFAFAF;
}
.VCVehicleFilesItem:hover {
    background: var(--MainColor);
}
.VCActiveFilesItem {
    background: var(--MainColor);
}
.VCVehicleFile {
    height:40px;
    float:left;
}
.VCVehicleImage {
    height: calc(100% - 32px);
    float: left;
}

.VCCheckIssuesItem {
    float: left;
    width: 100%;
    height: 50px;
    line-height: 25px;
    
    border-bottom: 1px dashed #AFAFAF;
}

    .VCCheckIssuesItem:hover {
        background: var(--MainColor);
        color: white;
    }

.VCActiveCheckIssuesItem {
    background: var(--MainColor);
    color: white;
}

.VCIssuesHeader {
    width:100%;
    height:75px;
    text-align:center;
    padding-top:10px;
}
.VCIssuesRadio{
    float:left;
    width:33.3%;
    height:48px;
}
.VCIssuesLabel {
    width: 100%;
    float: left;
    font-size: 12px;
    vertical-align: middle;
}
.VCIssuesList {
    float: left;
    width: 100%;
    border-right: 1px solid #7F7F7F;
    height: 100%;
    overflow-y: scroll;
}
.VCIssuesItem {
    float: left;
    width: 100%;
    height: 50px;
    line-height: 25px;
    background: #5F5F5F;
    border-bottom: 1px dashed #AFAFAF;
}

    .VCIssuesItem:hover {
        background: #4F4F4F;
    }

.VCActiveIssuesItem {
    background: #404040;
}
.VCIssueState {
    width: 16px;
    height: 16px;
    float: right;
    border: 1px solid #999999;
    margin: 4px 4px 0px 0px;
}
.VCResolve {
    width:130px;
    height:38px;
    margin:10px 0px 10px 0px;
    border:3px solid transparent;
    border-radius:10px;
    color:#333333;
}
.VCGreen {
    background: #2d921a;
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
}
.VCAmber {
    background: #FFD050;
    color: #000000;
    border: 3px solid #FFFFFF;
}
.VCRed {
    background: #FF0000;
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
}
.VCChecklistBody {
    float:right;
    width:calc(100% - 360px);
    height:100%;
    overflow-x:auto;
}
.VCAttachmentsBody {
    float: right;
    width: calc(100% - 350px);
    height: 100%;
    overflow-x: auto;
}
.VCVehicles {
    float: left;
    width: 100%;
    border-right: 1px solid var(--MainColor);
    height: 100%;
    overflow-y: auto;
}

.VCVehicle {
    float: left;
    width: 100%;
    height: 50px;
    line-height: 25px;
  /*  background: var(--ToolbarTop);*/
    border-bottom: 1px dashed #AFAFAF;
}

    .VCVehicle:hover {
        background: var(--MainColor);
        color:white;
    }

.VCActiveVehicle {
    background: var(--MainColor);
    color: white;
}

.VCVehicleBody {
    float: right;
    width: calc(100% - 310px);
    height: 100%;
    overflow-x: auto;
    display:flex;
    align-items:center;
}
.VCVehicleDetails {
    width:500px;
    height:500px;
    margin:0 auto;
    text-align:center;
}
.VCRow {
    float: left;
    width: 100%;
    height: 75px;
    line-height: 25px;
}
.VCSubRow {
    width: 380px;
    height: 100%;
    margin: 0 auto
}
.VCTemplateList {
    width: 200px;
    height: 28px;
}
.VCLeft {
    float: left;
}
.VCVehiclePanel {
float:left;
margin-top:3px;
margin-right:10px;
}
.VCCell {
    float: left;
    width: calc(50% - 5px);
    height: 100%;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.VCRightCell {
    float: right;
    text-align: right;
    padding-right: 5px;
    padding-left: 0px;
}
.VCFlag {
    float: right;
    width: 16px;
    margin-top: 7px;
}
.VCDate {
    width:80px;
}
.VCDate~.ui-datepicker-trigger {
    float: right;
    width:24px;
    margin-top: 0px;
    margin-left: 3px;
}
.VCHeader {
    width:100%;
    height:50px;
    line-height:50px;
    font-weight:bold;
    text-align:center;
    font-size:x-large;
}
.VCChecklistPanel {
    width: auto;
    height: calc(100% - 85px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    text-align: center;
}
.VCChecklistPage {
    float:left;
    width:100%;
    
    margin-left:5px;
    margin-right:5px;
}
.VCQ {
    width: 100%;
    height: auto;
    float: left;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    padding-top: 5px;
}
.VCLevelAnswer {
    border: 3px solid #333333;
    border-radius: 5px;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    float: left;
}

.VCLevelRed {
    background: #FF0000;
}

.VCLevelAmber {
    background: #FFD050;
}

.VCLevelGreen {
    background: #00FF00;
}
.VCFlagRed {
    color: #FF0000;
}

.VCFlagAmber {
    color: #FFD050;
}

.VCFlagGreen {
    color: #00FF00;
}
.VCEvidence {
    width: 220px;
}
.VCQPrompt {
 /*   background: var(--ToolbarTop);*/
    margin-top: 0px;
    width: 49%;
    line-height: 30px;
    border-radius: 10px;
    float:left;
}
.VCComments {
  /*  background: #606060;*/
    margin: 10px 0px 10px 0px;
    width: 100%;
    height: auto;
    line-height: 24px;
    border-radius: 10px;
}
@media print {
    #main {
        position: relative;
        padding: 0;
        height: 1px;
        overflow: visible;
    }

    #printarea {
        position: absolute;
        width: 100%;
        top: 0;
        padding: 0;
        margin: -1px;
    }
}
.VCQAnswer {
    width: 100%;
    height: auto;
    text-align: left;
    line-height: 24px;
    margin-top: 0px;
    float: left;
}
.vehicle-wrapper {
    position: relative;
    width: 350px; /* same as your VCImage width */
    float: left;
    display: inline-block;
}

.VCImage {
    width: 100%;
}

.VCX {
    position: absolute; /* key: NOT fixed */
    width: 16px;
    z-index: 10;
    transform: translate(-50%, -50%); /* optional: center on point */
}
.VCActiveX {
    border-radius: 15px;
    border: 2px outset #FF0000;
}
.VCDefects {
    float: left;
    width: 150px;
    margin-top:5px;
    overflow-y: auto;
    overflow-x: hidden;
}
.VCDefect {
    width: calc(100% - 2px);
    
    
    float: left;
    margin-bottom: 1px;
    border: 1px solid transparent;
}

    .VCDefect:hover {
        /*background: #8A8A8A;*/
    }

.VCActiveDefect {
    /*border: 1px dashed #AFAFAF;*/
}
.VCSigHeader {
    width: 171px;
    height: 20px;
    margin-top: 10px;
    margin:0 auto;
    background: #2d921a;
}
.VCSep {
    border: 1px dashed #DFDFDF;
}
.VCDefectLabel {
    float: left;
    
    margin-left: 10%;
}
.VCDefectPhoto {
    float:right;
    width:24px;
    
}
.VCDefectThumbnail {
    margin:0 auto;
    height:0px;
}
.VCDefectPhotoComment {
    width: 100%;
    text-align: left;
    float: left;
}
.VCGen {
    width:50%;
    margin-top:5px;
}
.VCIssueLog {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--MainColor);
    padding-bottom: 8px;
    color: #333;
}
.VCIssueCell {
    float: left;
    text-align: left;
  /*  color:var(--text);*/
}
.DMBody {
    float: left;
    width: calc(100% - 10px);
    height: calc(100% - 42px);
    background: var(--ToolbarTop);
    color: var(--text);
    padding: 5px;
}
.DMTabContent {
    width: calc(100% - 10px);
    height: calc(100% - 45px);
    background: var(--GTDialogBackground);
    padding: 5px;
}

.DMList {
    float: left;
    width: 100%;
    height: 100%;
    line-height: 40px;
    border-right: 1px solid #7F7F7F;
    overflow-y:auto;
}

.DMMessage {
    float: right;
    width: 100%;
    height: calc(100% - 70px);
    width: calc(100% - 311px);
}
.DMListItem {
    width: 100%;
    height: 50px;
    background: var(--BackGround2);
    border-bottom: 1px dashed var(--MainColor);
    font-size: smaller;
    color: var(--text);
}

    .DMListItem:hover {
        background: var(--MainColor)
    }

.DMActiveListItem {
    background: var(--MainColor);
    font-weight: 700;
    color: var(--text);
}
.DMProfileBox {
    float: left;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
}
.DMProfile {
    float:left;
    width:auto;
    height:auto;
    max-width:50px;
    max-height:50px;
}
.DMListItemRow {
    float: left;
    width: calc(100% - 50px);
    height: 25px;
    line-height: 25px;
}
.DMMessageHeader {
    width: 100%;
    height: 50px;
    background: var(--Back1);
    border-bottom: 1px solid #909090;
    line-height: 25px;
}
.DMMessageBody {
    width: 100%;
    height: calc(100% - 60px);
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 5px;
    overflow-y: auto;
}
.DMHeaderCell {
    float: left;
    width: 50%;
    height: 50%;
}
.DMMessageFooter {
    width: 100%;
    height: 40px;
    padding-top: 5px;
    float: right;
}
#lblMessageText {
    float:left;
    width: 100%;
    height: auto;
}
#txtMessageText {
    width: calc(100% - 130px);
    padding: 5px;
}

.DMThreadHeader {
    color: #BFBFBF;
    float: left;
    margin-top: 20px;
    margin-bottom:5px;
    width:100%;
    font-size:10px;
}
.DMThreadMessage {
    color: var(--text);
    float: left;
    background: var(--Back3);
    border: 1px solid var(--MainColor);
    border-radius: 10px;
    padding: 5px 10px 5px 10px;
    max-width: 80%;
}
.DMUnreadImage{
    display:none !important;
}
.DMUnread .DMUnreadImage {
    display: block !important;
    /* font-weight:bold;
    color:#FFFFFF !important;*/
}
.DMFromMe {
    float:right !important;
    text-align:right !important;
}
.VCAccidentBody {
    float: right;
    width: calc(100% - 300px);
    height: 100%;
    overflow-x:auto;
}
.VCFaultBody {
    float: right;
    width: calc(100% - 300px);
    height: 100%;
    overflow-x: auto;
}
.VCPDFChecklist {
    float: right;
    margin: 12px 12px 0px 12px;
}
.VCIssuesPanel {
    float: left;
    width: 100%;
    height: auto;
}
.VCIssuePanel {
    float: left;
    width: 400px;
    height: 100%;
    margin-left: 5px;
    margin-right: 5px;
}
.VCActionsPanel {
    float: right;
    width: 400px;
    height: 100%;
    margin-left: 5px;
    margin-right: 5px;
}
.VCNewDialog {
    position: absolute;
    width: 600px;
    height: 400px;
    border-radius: 10px;
    background: var(--GTDialogBackground);
    border: 5px solid var(--GTDialogBorder);
    margin-left: calc(50% - 300px);
    margin-top: 50px;
    text-align: center;
    color: var(--GTDialogText);
}
.VCExportDialog {
    position: absolute;
    width: 600px;
    height: 400px;
    border-radius: 10px;
    background: var(--GTDialogBackground);
    border: 5px solid var(--GTDialogBorder);
    margin-left: calc(50% - 300px);
    margin-top: 50px;
    text-align: center;
    color: var(--GTDialogText);
}
.VCNewTemplateTitle {
    width: 100%;
    height: 36px;
    background: var(--ToolbarTop);
    line-height: 32px;
    font-size: x-large;
}
.VCNewTemplateBody {
    float:left;
    width: 100%;
    height: calc(100% - 130px);
    overflow-y:auto;
}
.VCNewTemplateLabel {
    float: left;
    width: 100%;
    height: 50px;
    line-height: 20px;
}
.VCNewImage {
    width: 150px;
    cursor: pointer;
    border: 2px solid transparent;
}
.VCNewImage:hover{
    border:2px solid #777777;
}
.VCExportList {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 270px;
    overflow-y: auto;
    border-top: 1px solid #777777;
}
.VCExportListItem {
    width: calc(100% - 2px);
    height: 32px;
    line-height: 32px;
}
    .VCExportListItem:hover {
        background: var(--MainColor);
    }
.VCActiveExportListItem {
    background: var(--MainColor);
}