

body{
    font-family: "Manrope", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
	
}	

.datera--calendar.theme1-light {
	--box-shadow: 0 0 0.8rem rgba(0,0,0,.25);
	--background: white;
	--on-background: rgb(228, 29, 88);
	--max-width: 300px;
	--button-hover: rgba(185,  237, 240, 0.4);
	--button-on-hover: black;
	--button-disabled-background: transparent;
	--button-on-disabled-background: rgba(0, 0, 0, 0.5);
	--button-in-range-background: rgba(228, 29, 88);
	--button-on-in-range-background: white;
	--button-active: rgba(228, 29, 88);
	--button-on-active: white
}


.datera--calendar {
	z-index: 999;
	border-radius: 8px;
	box-shadow: var(--box-shadow);
	background-color: var(--background);
	color: var(--on-background);
	position: absolute;
	left: var(--position-x);
	top: var(--position-y);
	width: 100%;
	max-width: var(--max-width);
	user-select: none;
	
	font-weight: 700 !important;
	
	position: absolute;
    left: calc(50% - 200px);
 
	
 
}

.datepicker{
	text-align: center;
	font-weight: 600;
	border: 2px solid rgb(228, 29, 88) !important;
	
}
.datepicker:focus{
	text-align: center;
	font-weight: 600;
	outline: 0 !important;
	
}

.datera--calendar.hidden {
	opacity: 0;
	pointer-events: none
}

.datera--calendar * {
	font-family: "Manrope"
}

.datera--calendar>.datera--grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding-inline: 8px;
	
}

.datera--calendar>.datera--grid.days {
	grid-template-rows: repeat(6, 1fr);
	padding-bottom: 8px;
	
}

.datera--calendar>.datera--grid>.datera--day {
	aspect-ratio: 1;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background-color: transparent;
	color: var(--on-background);
	font-weight: 600;
	color: rgba(0, 0, 0, 0.7);

}

.datera--day-of-week {
	--on-background: rgba(0, 0, 0, 0.7);
	
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--on-background)
}

.datera--calendar>.datera--grid>.datera--day.other {
	background-color: var(--button-disabled-background);
	color: var(--button-on-disabled-background);
	font-weight: 400;
	font-size: 0.9rem;
	
	
}

.datera--calendar>.datera--grid>.datera--day:disabled {
	opacity: .5;
	cursor: not-allowed
}

.datera--calendar>.datera--grid>.datera--day.selected {
	padding: 0px
}

.datera--calendar>.datera--grid>.datera--day.start-range,
.datera--calendar>.datera--grid>.datera--day.in-range,
.datera--calendar>.datera--grid>.datera--day.end-range {
	padding-block: 0px;
	padding-inline: 0
}

.datera--calendar>.datera--grid>.datera--day:not(:disabled):not(.selected):not(.start-range):not(.end-range):not(.in-range):hover>div,
.datera--calendar>.datera--grid>.datera--day:not(:disabled):not(.selected):not(.start-range):not(.end-range):not(.in-range).today>div {
	background-color: var(--button-hover);
}

.datera--calendar>.datera--grid>.datera--day.selected>div,
.datera--calendar>.datera--grid>.datera--day.start-range>div,
.datera--calendar>.datera--grid>.datera--day.end-range>div {
	background-color: var(--button-active);
	color: var(--button-on-active)
}

.datera--calendar>.datera--grid>.datera--day.start-range>div {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0
}

.datera--calendar>.datera--grid>.datera--day.end-range>div {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0
}

.datera--calendar>.datera--grid>.datera--day.in-range>div {
	background-color: var(--button-in-range-background);
	color: var(--button-on-in-range-background);
	border-radius: 0;
}

.datera--calendar>.datera--grid>.datera--day>div {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	display: grid;
	place-items: center;

}

.datera--calendar>.datera--controls {
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 8px;
	font-size: 0.9rem;
}

.datera--calendar>.datera--controls>.datera--control-selects {
	flex-grow: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr)
}

.datera--calendar>.datera--controls>.datera--control-selects>select {
	background-color: transparent;
	color: var(--on-background);
	border: 0 !important;
	padding: 0 5px;
}

.datera--calendar>.datera--controls>.datera--control-selects>select>option {
	color: initial
}

.datera--calendar>.datera--controls>button {
	aspect-ratio: 1;
	flex-shrink: 0;
	height: 24px;

	display: grid;
	place-items: center;
	border: 0;
	background-color: transparent;
	color: var(--on-background);
	border-radius: 50%;
	cursor: pointer
}

.datera--calendar>.datera--controls>button:disabled {
	opacity: .5
}

.datera--calendar>.datera--controls>button>svg {
	height: 18px
}