﻿/* Prevent off-canvas sidebar from extending body scrollWidth on mobile */
body, .container-offcanvas {
    max-width: 100%;
    overflow-x: hidden;
}

/* Vehicle Number input is uppercased; keep placeholder in normal case */
#VehicleNumber::placeholder {
    text-transform: none;
}

.nav-left {
    left: -100%;
}

.div-visible {
    visibility: visible;
}
.div-display-none {
    display: none;
}

.div-display-block {
    display: block !important;
}

.float-left {
    float: left;
}

.padding-zero {
    padding: 0px;
}

.padding-four {
    padding: 4px;
}

.color-4066b3 {
    color: #4066b3;
}

.color-FF0000 {
    color: #FF0000;
}

.img-WH100 {
    width: 100px;
    height: 100px;
}

.color-red {
    color:red !important;
}

.custom-style label.checkOption:before {
    left: 15px;
}

.custom-style label.checkOption {
    margin-left: 20px;
    margin-top: 2px;
}

.margin-top0 {
    margin-top: 0px !important;
}
.text-align-left {
    text-align: left;
}

.fontsize-14 {
    font-size: 14px;
}

.padding-left0 {
    padding-left: 0px;
}

.font-weight-bold {
    FONT-WEIGHT: bold;
}
/* -- ReportAccident page --------------------------------------------------- */
.fnol-page-title { text-align: center; }
.fnol-page-subtitle { color: #555; margin-bottom: 20px; text-align: center; }
.fnol-val-summary { display: none; }
.fnol-file-input { display: block; width: 100%; }
.fnol-file-hint { display: block; margin-top: 6px; color: #888; font-size: 11px; }
.fnol-pdpa-text { font-weight: normal !important; color: #4066b3 !important; font-size: 12px !important; }
.fnol-tnc-label { font-size: 12px !important; color: #4066b3 !important; font-weight: normal !important; }
.fnol-tnc-error-wrap { padding-left: 30px; margin-top: -10px; }
.fnol-tnc-error { display: none; font-size: 12px; }
.fnol-btn-reset-wrap { padding-bottom: 10px; }

/* jQuery Validate error styles */
label.error { color: #d9534f !important; font-weight: normal; display: block; margin-top: 4px; }
input.error, select.error, textarea.error { border: 1px solid #d9534f !important; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(217,83,79,.4) !important; }
input[type='checkbox'].error { outline: 2px solid #d9534f !important; outline-offset: 0; }

/* -- File list widget ------------------------------------------------------- */
#file-list .fnol-file-list { margin-top: 8px; border: 1px solid #dce6f0; border-radius: 6px; overflow: hidden; }
#file-list .fnol-file-row { display: flex !important; align-items: center !important; padding: 7px 10px !important; background: #fff !important; border-bottom: 1px solid #e8eef5 !important; }
#file-list .fnol-file-row:last-child { border-bottom: none !important; }
#file-list .fnol-file-icon-wrap { flex-shrink: 0; margin-right: 8px; }
#file-list .fnol-file-badge { display: inline-block !important; font-size: 10px !important; font-weight: 700 !important; color: #fff !important; border-radius: 3px !important; padding: 1px 5px !important; min-width: 30px !important; text-align: center !important; flex-shrink: 0; }
#file-list .fnol-file-badge-pdf { background: #d9534f !important; }
#file-list .fnol-file-badge-other { background: #007dc5 !important; }
#file-list .fnol-file-name { font-size: 12px !important; color: #333 !important; flex: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; margin-right: 8px !important; }
#file-list .fnol-file-size { font-size: 11px !important; color: #999 !important; flex-shrink: 0; white-space: nowrap !important; margin-right: 6px !important; }
#file-list .fnol-file-remove { background: none !important; border: none !important; cursor: pointer !important; color: #d9534f !important; font-size: 18px !important; font-weight: bold !important; line-height: 1 !important; padding: 4px 6px !important; flex-shrink: 0; min-width: 32px !important; min-height: 32px !important; touch-action: manipulation; }
#file-list .fnol-file-summary { padding: 5px 10px !important; background: #f5f8fc !important; font-size: 11px !important; color: #666 !important; text-align: right !important; }
