*:root {
	/*
		Dark/Mixed - 100: For body background color
		Dark/Mixed - 200: For cards background color
		Dark/Mixed - 300: For chips buttons, dropdowns background color
		Dark/Mixed - 400: For sidebars, navbar background color
		Dark/Mixed - 500: For modal, dialogs background color
		Dark/Mixed - 600: For on background texts color
	*/
	/** CSS DARK THEME PRIMARY COLORS */
	--color-primary-100:  #382bf0;
	--color-primary-200:  #5e43f3;
	--color-primary-300:  #7a5af5;
	--color-primary-400:  #9171f8;
	--color-primary-500:  #a688fa;
	--color-primary-600:  #ba9ffb;
	
	/** CSS DARK THEME SURFACE COLORS */
	--color-surface-100:  #121212;
	--color-surface-200:  #282828;
	--color-surface-300:  #3f3f3f;
	--color-surface-400:  #575757;
	--color-surface-500:  #717171;
	--color-surface-600:  #8b8b8b;
	
	/** CSS DARK THEME MIXED SURFACE COLORS */
	--color-surface-mixed-100:  #1a1625;
	--color-surface-mixed-200:  #2f2b3a;
	--color-surface-mixed-300:  #46424f;
	--color-surface-mixed-400:  #5e5a66;
	--color-surface-mixed-500:  #76737e;
	--color-surface-mixed-600:  #908d96;
	
}

body {
    background-color: #121212;
    color: #fff;
}

.card {
    background-color: #252525;
    border: 1px solid #555;
}

.dark .daterangepicker,
.dark .daterangepicker .calendar-table,
.modal-content {
	background-color: var(--color-surface-200) !important;
}

.daterangepicker .in-range {
    color: #fff !important;
    background-color: var( --color-primary-400 ) !important;
}

.dark .start-date, .dark .end-date, .dark .end-date.in-range,
.dark .daterangepicker td:hover,
.dark .daterangepicker .ranges li:hover {
    color: #fff;
    background-color: var( --color-primary-300 ) !important;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    color: #fff;
    background-color: var( --color-surface-300 );
}

.daterangepicker,
.daterangepicker.show-ranges.ltr .drp-calendar.left,
.daterangepicker .calendar-table,
.daterangepicker .drp-buttons {
    border-color: #555;
}

input[type=number] {
	appearance: textfield;
}