:root {
	--width-max: auto;
	--width-min: auto;
	--bg-primary: white;
	--size-primary: 18px;
	--box-title-shadow: none;
	--padding-container: 10px;
	--bg-select-day: rgb(16, 152, 161);
	--bg-disabled-day:rgba(255, 87, 87, 0.25);
	--bg-today: rgb(7, 97, 68);
	--bg-day-active: #60CB83;
	--theme-color: #666;
}

/* MAIN */

.calendar-relative{
	position: relative;
}
.calendar {
	font-size: 19px;
	font-family: inherit;
	padding: 28px;
	background:#F0F9FD;
	border-radius: 10px;
	user-select: none;
	width: 100%;
	max-width: 502px;
	margin: auto;
}

.calendar__title-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.1em;
	font-weight: bold;
	color: #21B9CA;
	box-shadow: var(--box-title-shadow);
	text-transform: capitalize;
}

.calendar__button {
	cursor: initial;
	font-size: 1.2em;
	fill: #21B9CA;
	display: flex;
	align-items: center;
}

.calendar__button--disabled {
	fill: #d2c6c6 !important;
	cursor: initial;
}


.calendar__week {
	display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-gap: 2px;
    margin: 15px 0 15px;
    font-size: .9em;
	font-family: inherit;
	color: #6B6B6B;
}

.calendar__week-name {
	text-align: center;
}

.calendar__content-days {
	display: grid;
	grid-gap: 7px;
	grid-template-columns: repeat(7,1fr);
}

.calendar__day {
	text-align: center;
	cursor: initial;
	font-size: 0.66em;
	padding: 17% 28%;
	border-radius: 2px;
}

.calendar__day--active {
	background: var(--bg-day-active);
	color: white;
	position: relative;
}

.calendar__disabled {
	background: var(--bg-disabled-day);
	cursor: not-allowed;
}

.calendar__previusMonth {
	color: #dbdbdb;
}

.calendar__disabled:hover::before {
	content: none;
}

.calendar__today {
	display: flex;
	flex-direction: column;
	background: var(--bg-day-active);
}

.calendar__today::before {
	content: "*";
	position: absolute;
	right: 5px;
	top: 0;
}

.calendar__day-select {
	background: var(--bg-select-day)
}