body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
}

.login-body{
    background:#eef3f8;
}

.login-left{
    background:linear-gradient(135deg,#0d6efd,#003b8e);
    color:white;
    align-items:center;
    justify-content:center;
}

.welcome-box{
    width:70%;
}

.welcome-box h1{
    font-weight:bold;
}

.welcome-box ul{
    margin-top:25px;
    line-height:2;
    font-size:18px;
}

.login-card{
    background:white;
    width:420px;
    padding:40px;
    border-radius:15px;
}

.form-control{
    height:48px;
}

.btn{
    height:48px;
}

@media(max-width:992px){

.login-card{
width:95%;
}

}

/* ==========================================================
   VDEMS PRO v1.0.1 RESPONSIVE LAYOUT HOTFIX
   ========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.app-shell,
.main-wrapper,
.main-content,
.content-area,
.page-content,
#mainContent,
#pageContent {
    min-width: 0;
    max-width: 100%;
}

.main-content,
.content-area,
.page-content,
#mainContent,
#pageContent {
    overflow-x: hidden;
}

.table-responsive,
.reports-table-wrapper,
.user-table-card .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

img,
canvas,
svg,
video {
    max-width: 100%;
    height: auto;
}

.form-control,
.form-select,
.input-group,
.card,
.settings-page,
.reports-page,
.user-management-page,
.vehicle-document-page,
.excel-import-page {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1100px) {
    .reports-layout,
    .settings-layout {
        grid-template-columns: 1fr !important;
    }

    .reports-sidebar,
    .settings-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .main-content,
    .content-area,
    .page-content,
    #mainContent,
    #pageContent {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .row,
    .form-row,
    .filter-row,
    .reports-filter-grid,
    .user-filter-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .reports-summary-grid,
    .user-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .btn,
    button {
        max-width: 100%;
    }
}


/* ==========================================================
   VDEMS PRO v1.1 - GLOBAL APPEARANCE VARIABLES
   ========================================================== */

:root {
    --vd-primary-color: #6d28d9;
    --vd-primary-color-hover: #5b21b6;
    --vd-primary-color-soft: 109, 40, 217;
    color-scheme: light;
}

html[data-vd-theme="dark"] {
    color-scheme: dark;
}

html[data-vd-theme="dark"] body {
    color: #e5e7eb;
    background: #0f172a;
}

html[data-vd-theme="dark"] .card,
html[data-vd-theme="dark"] .modal-content,
html[data-vd-theme="dark"] .dropdown-menu,
html[data-vd-theme="dark"] .table-section {
    color: #e5e7eb;
    background-color: #111827;
    border-color: #334155;
}

html[data-vd-theme="dark"] .table {
    --bs-table-color: #e5e7eb;
    --bs-table-bg: #111827;
    --bs-table-border-color: #334155;
    --bs-table-striped-bg: #172033;
    --bs-table-hover-bg: #1e293b;
}

html[data-vd-theme="dark"] .form-control,
html[data-vd-theme="dark"] .form-select,
html[data-vd-theme="dark"] .input-group-text {
    color: #f8fafc;
    background-color: #0f172a;
    border-color: #475569;
}

html[data-vd-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

.btn-primary {
    background-color: var(--vd-primary-color);
    border-color: var(--vd-primary-color);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--vd-primary-color-hover);
    border-color: var(--vd-primary-color-hover);
}

.text-primary {
    color: var(--vd-primary-color) !important;
}

.bg-primary {
    background-color: var(--vd-primary-color) !important;
}

.border-primary {
    border-color: var(--vd-primary-color) !important;
}

.vdems-hide-dashboard-widgets .cards,
.vdems-hide-dashboard-widgets .dashboard-summary-grid,
.vdems-hide-dashboard-widgets .dashboard-cards,
.vdems-hide-dashboard-widgets [data-dashboard-summary-widgets] {
    display: none !important;
}