@import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css";

.calendar-grid {
	display: flex;
	flex-wrap: wrap;
}

.calendar-grid>* {
	width: calc((100% / 7) - 9px);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.calendar-grid:has(.weekday) {
	font-family: "Archivo";
	font-weight: 300;
	gap: 10px;
	padding: 10px;
}

.calendar-grid:has(.weekday)>* {
	font-size: 22px;
	opacity: 0.6;
}

.calendar-grid:has(.day) {
	border: 1px solid #ccc;
	box-shadow: 0 3px 6px #00000029;
	border-radius: 8px;
	padding: 10px;
	gap: 10px;
	font-family: "Plus Jakarta Sans";
}

.calendar-grid:has(.day)>* {
	aspect-ratio: 1/1;
	background: #0060ab;
	border-radius: 4px;
	color: #fff;
	font-size: 16px;

	cursor: pointer;
}

.calendar-grid:has(.day)>.disabled-date,
.calendar-grid:has(.day)>.empty {
	background: #cbcbcb;
	pointer-events: none;
}

.calendar-header {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	width: max-content;
	margin: 0 auto 20px;
	padding: 0 50px;
}

.calendar-header>span {
	/* display: flex; */
	/* flex-direction: column; */
	font-family: "Archivo";
	line-height: 100%;
	font-size: 17px;
	background: #fff;
	z-index: 2;
	padding: 0 20px;
}

.calendar-header:before {
	content: "";
	height: 1px;
	width: 100%;
	position: absolute;
	top: 50%;
	background: #707070;
}

.calendar button {
	position: absolute;
	top: calc(0% - 10px);
	background: #0060ab;
	border-radius: 50%;
	width: 40px;
	aspect-ratio: 1/1;
	color: #fff;
	font-size: 24px;
}

.calendar {
	position: relative;
}

.calendar button:has(.bi-chevron-right) {
	right: 0;
}

.pway_calendar_alert {
	margin-top: 30px;
	background: #ececec;
	display: flex;
	align-items: center;
	border-radius: 10px;
	padding: 20px;
	gap: 14px;
}

.pway_calendar_alert>span {
	display: block;
	line-height: 115%;
}

.rb_selh_hour_titles {
	margin: 20px;
}

.rb_selh_hour_titles span {
	font-family: "Archivo";
	line-height: 115%;
	margin-bottom: 0;
	display: block;
	text-align: center;
	font-size: 22px;
	font-weight: 300;
	color: #0060ab;
}

.rb_selh_hour_titles b {
	font-family: "Archivo";
	line-height: 115%;
	margin-bottom: 0;
	display: block;
	text-align: center;
	font-size: 30px;
}

.rb_selh_hour_titles {
	margin: 20px;
}

.rb_selh_hour_item input {
	display: none;
}

.rb_selh_hour_item label {
	background: #fff;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 16px;
	padding: 20px 10px 20px 20px;
	color: #7e7e7e;
	cursor: pointer;
	position: relative;
}

.rb_selh_hours {
	display: flex;
	flex-direction: column;
	box-shadow: 0 3px 6px #00000029;
	border-radius: 10px;
	border: 1px solid #e3e3e3;
	overflow: auto;
	padding: 10px;
	max-height: 400px;
	max-width: 390px;
	margin: 0 auto 40px;
}

.rb_selh_hour_item:not(:last-child) label {
	border-bottom: 1px dashed #ccc;
}

.rb_selh_hour_item label:hover {
	background: #e5e5e5;
	border-radius: 10px;
}

.rb_selh_hour_item.active label {
	background: #757575;
	color: #fff;
	border-radius: 10px;
	border-color: transparent;
}

.rb_selh_hour_item.active label:before {
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	margin: auto 0;
	background-image: url(../../img/icon_checked.svg);
	background-size: 28px;
	background-repeat: no-repeat;
	background-position: center;
}

.disable_continue_btn {
	background-color: gray;
	/* Sets the background to gray */
	cursor: not-allowed;
	/* Changes the cursor to indicate it's disabled */
	pointer-events: none;
	/* Disables all interactions */
	opacity: 0.5;
	/* Makes the button semi-transparent */
}

.the_tooltips {
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: #6d6d6d;
	color: #fff;
	cursor: help;
}

.busy {
	background: #02344f;
	color: white;
	opacity: 0.5;
	pointer-events: none;
	/* Disables all click, hover, and focus events */
	cursor: not-allowed;
	/* Shows a "not allowed" cursor */
}

.busy {
	background: #02344f;
	pointer-events: none;
	/* Disables all click, hover, and focus events */
	cursor: not-allowed;
	/* Shows a "not allowed" cursor */
}

.day.available-date.active {
	background-color: #f3c1c2;
	color: white;
}

.set_disabled {
	cursor: not-allowed;
	/* Changes the cursor to indicate it's disabled */
	pointer-events: none;
	/* Disables all interactions */
	filter: blur(2px);
	/* Applies a blur effect instead of opacity */
}

.cr_disabled {
	pointer-events: none;
	/* Disables clicking */
	cursor: not-allowed;
	/* Shows a "not allowed" cursor */
	opacity: 0.5;
	/* Makes it look visually disabled */
	background-color: gray;
}

.disabled-day {
	pointer-events: none !important;
	color: #ccc !important;
	background-color: #f2f2f2 !important;
	cursor: not-allowed !important;
}

#horarios_disponibles {
	font-family: "Plus Jakarta Sans";
}