:root {
	--drp-background: #ffffff;
	--drp-foreground: #343434;
	--drp-off-background: #ffffff;
	--drp-off-foreground: #cccccc;
	--drp-divider: #dcdcdc;
	--drp-overlay: #888;
	--drp-range-background: #0064ff;
	--drp-range-text: #ffffff;
}

:root.dark {
	--drp-background: #232324;
	--drp-foreground: #ece4e4;
	--drp-off-background: #232324;
	--drp-off-foreground: #808080;
	--drp-divider: #676767;
	--drp-overlay: #888;
}

.sdk-date-range {
	display: flex;
	flex-direction: row;
	gap: 0.25rem;
	align-items: center;
	position: relative;
}

.sdk-date-range .float-right {
	position: absolute;
	top: 8px;
	right: 7px;
}

/* 9.8 Plugin - DateRange Picker Setting */

.daterangepicker .ranges li {
	color: #30373e;
}

.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
	background: #3C454D ;
	border-color: #3C454D ;
	color: #fff;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
	background: #2184DA ;
}

.daterangepicker td.in-range {
	background: #ebeced ;
}

.daterangepicker .ranges .input-mini {
	background: #ebeced ;
	border-width: 2px ;
	border-color: #ebeced ;
}

.daterangepicker .ranges .input-mini:focus {
	border-color: #8d9aa5 ;
	-webkit-box-shadow: none ;
	box-shadow: none ;
	outline: none ;
}

.daterangepicker .calendar th,
.daterangepicker .calendar td {
	font-family: inherit ;
}

.daterangepicker .calendar {
	border: none ;
}

.daterangepicker .calendar-date,
.daterangepicker .calendar.single .calendar-date {
	border: 2px solid #ebeced ;
}

@media (max-width: 767px) {
	.daterangepicker .calendar,
	.daterangepicker .ranges {
		float: none ;
		width: auto ;
	}

	.daterangepicker .ranges {
		padding-left: 4px;
		padding-right: 4px;
	}

	.daterangepicker .ranges .range_inputs > div {
		width: 50%;
	}
}


.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
	background-color: var(--drp-off-background) !important;
	border-color: transparent !important;
	color: var(--drp-off-foreground) !important;
}

.daterangepicker td.active.start-date ,
.daterangepicker td.active.end-date ,
.daterangepicker td.active:hover {
	background-color: #357ebd;
	border-color: transparent;
	color: #fff;
}

.daterangepicker td.in-range {
	background-color: #5e9dffa8;
	border-color: transparent;
	color: #000000;
	border-radius: 0;
}

.daterangepicker td.in-range:hover {
	background-color: #0050dc;
	color: #FFFFFF;
	border-radius: 0 6px 6px 0;
}

.daterangepicker td.start-date {
	border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
	border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
	border-radius: 4px;
}