/* MAIN */


.calendar {
	background: var(--bg-primary);
	min-width: var(--width-min);
	max-width: var(--width-max);
	font-size: var(--size-primary);
	font-family: inherit;
	color: var(--theme-color);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

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

.calendar__button {
	cursor: pointer;
	font-size: 1.2em;
	fill: #3a3838;
}

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

.calendar__content {
}

.calendar__week {
	display: grid;
	grid-template-columns: repeat(7,1fr);
	grid-gap: 2px;
	margin: 0 0 5px;
	font-size: .9em;
}

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

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

.calendar__day {
	text-align: center;
	cursor: pointer;
	font-size: 0.66em;
	padding: 5px 0;
	border-radius: 2px;
}

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

	.calendar__day--active:hover::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.30);
	}

.calendar__disabled {
	background: #efefef;
	cursor: not-allowed;
}

.calendar__previusMonth {
	color: #dbdbdb;
}

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

.calendar__today {
	/* background: var(--bg-today); */
	background: white;
	color: black;
	border: 1px solid rgb(28 93 51) !important;
	display: flex;
	flex-direction: column;
}

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

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