.btn-open-modal {

	background: #8e88f4;

	color: #fff;

	padding: 10px 24px;

	border: none;

	border-radius: 8px;

	font-family: inherit;

	font-size: 16px;

	font-weight: 600;

	line-height: 24px;

	cursor: pointer;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

}



.btn-open-modal:hover,

.btn-open-modal:focus { background: #6863d0; }



.modal-overlay {

	display: none;

	position: fixed;

	inset: 0;

	align-items: center;

	justify-content: center;

	padding: 16px;

	background: rgba(0, 0, 0, 0.5);

	z-index: 999;

}



.modal-overlay.open {

	display: flex;

}



.schedule-modal {

	width: min(560px, 100%);

	height: min(680px, calc(100vh - 32px));

	max-height: 100%;

	background: #fff;

	border-radius: 12px;

	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

	position: relative;

	display: flex;

	flex-direction: column;

}



/* Straddles the modal corner, so the modal itself cannot clip it. */

.modal-close-btn {

	position: absolute;

	top: -12px;

	right: -12px;

	z-index: 2;

	width: 24px;

	height: 24px;

	padding: 0;

	border: none;

	border-radius: 50%;

	background: #c8c8c8;

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);

}

.modal-close-btn i.fa {
	font-size: 16px;
}



.modal-body {

	flex: 1;

	min-height: 0;

	overflow: hidden;

	border-radius: 12px;

}



.modal-body iframe {

	display: block;

	width: 100%;

	height: 100%;

	border: none;

	background: #fff;

}