/*Theme Color Setting*/
:root {
    --bg-primary-1: #fff;
    --bg-secondary-1: #eee;
    --bg-secondary-2: #d8e7ff;
    --bg-secondary-3: #acb1ff;
    --bg-secondary-4: #cac9fb;
    --bg-secondary-5: #eef3ff;
    --bg-darker: #0000000d;
    --bg-success: #28a745;
    --bg-darker-blue: #1e70db;
    --text-body: #343a40;
    --text-body-reverse: #EFEFEF;
    --text-primary: #3400a6;
    --text-secondary: #949494;
    --text-danger: #f9001d;
    --text-success: #1FB55A;
    --text-darker-success: #05a600;
    --text-info: #01a1d3;
    /* car stat */
    --gpsNotValid-car: #ea8e3d;
    --moving-car: #1FB55A;
    --engineOn-car: #3ea8ec;
    --engineOff-car: #FF4D3B;
    --offline-car: #8f8f8f;
    /* outlines */
    --outline-primary: #3400a6;
    /* hover bg */
    --hover--bg-primary: #acb1ff;
    /* placeholder col */
    --place-holder: #919191;
    /* border col */
	--border-secondary: #9393936b;
}

:root [data-dark-mode='true'] {
    --bg-primary-1: #31303e;
    --bg-secondary-1: #403f4d;
    --bg-secondary-2: #676774;
    --bg-secondary-3: #7f7fb3;
    --bg-secondary-4: #52525e;
    --bg-secondary-5: #3b3b53;
    --bg-darker: #0003;
    --bg-success: #28a745;
    --bg-darker-blue: #1e70db;
    --text-body: #EFEFEF;
    --text-body-reverse: #343a40;
    --text-primary: #bfa4fb;
    --text-secondary: #b8b8ba;
    --text-danger: #ff5d6f;
    --text-success: #88ff5d;
    --text-darker-success: #2eaa00;
    --text-info: #21bcec;
    /* car stat */
    --gpsNotValid-car: #ffa351;
    --moving-car: #47FFBF;
    --engineOn-car: #5cbdfd;
    --engineOff-car: #FF5847;
    --offline-car: #cecece;
    /* outlines */
    --outline-primary: #bfa4fb;
    /* hover bg */
    --hover--bg-primary: #7f7fb3;
    /* placeholder col */
    --place-holder: #bdbdbd;
    /* border col */
	--border-secondary: #dbdbdb6b;
}

.bg-primary {
    background-color: var(--bg-primary-1) !important;
}
.bg-primary-2 {
    background-color: var(--text-primary) !important;
}
.bg-secondary {
    background-color: var(--bg-secondary-1) !important;
}
.bg-secondary-2 {
    background-color: var(--bg-secondary-2) !important;
}
.bg-secondary-3 {
    background-color: var(--bg-secondary-3) !important;
}
.bg-secondary-4 {
    background-color: var(--bg-secondary-4) !important;
}
.bg-secondary-5 {
    background-color: var(--bg-secondary-5) !important;
}
.bg-darker {
    background-color: var(--bg-darker) !important;
}
.bg-success {
    background-color: var(--bg-success) !important;
}
.bg-danger-2 {
    background-color: #a86868 !important;
}
.bg-dark-1 {
    background-color: var(--bg-secondary-1) !important;
}
.bg-dark-2 {
    background-color: var(--bg-secondary-2) !important;
}
.bg-secondary-3 {
    background-color: var(--bg-secondary-3) !important;
}
.bg-dark-3 {
    background-color: var(--bg-secondary-3) !important;
}
.bg-dark-4 {
    background-color: var(--bg-primary-1) !important;
}
.bg-dark-5 {
    background-color: var(--bg-secondary-4) !important;
}
.bg-blue {
    background-color: var(--bg-darker-blue) !important;
}

.text-body {
    color: var(--text-body) !important;
}
.text-body-reverse {
    color: var(--text-body-reverse) !important;
}
.text-primary {
    color: var(--text-primary) !important;
}
.text-secondary {
    color: var(--text-secondary) !important;
}
.text-danger {
    color: var(--text-danger) !important;
}
.text-success {
    color: var(--text-success) !important;
}
.text-darker-success {
    color: var(--text-darker-success) !important;
}
.text-info {
    color: var(--text-info) !important
}
.text-muted {
    color: var(--place-holder) !important
}
.text-gray {
    color: var(--gray) !important;
}
/*carrier stats text col*/
.text-gpsNotValid-car {
    color: var(--gpsNotValid-car) !important;
}
.text-moving-car {
    color: var(--moving-car) !important;
}
.text-engineOn-car {
    color: var(--engineOn-car) !important;
}
.text-engineOff-car {
    color: var(--engineOff-car) !important;
}
.text-offline-car {
    color: var(--offline-car) !important;
}

/*borders*/
.border-body {
    border-color: var(--text-body) !important;
}
.border-primary {
    border-color: var(--text-primary) !important;
}

/*bootstrap edit*/
a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus {
    background-color: var(--hover--bg-primary) !important;
}