#wunschtermin {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOutRight {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(100%);
		opacity: 0;
	}
}

.modal.slide .modal-dialog {
	animation-duration: 0.5s !important;
}

.modal.slide.show .modal-dialog {
	animation: slideInRight 0.5s forwards !important;
}

.modal.slide.hide .modal-dialog {
	animation: slideOutRight 0.5s forwards !important;
}

#wunschtermin .modal-header {
	border-bottom: none !important;
	padding: 2% !important;
}

#wunschtermin .modal-title {
	font-size: 22px !important;
	text-align: center !important;
}

#wunschtermin .modal-footer {
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
	padding: 1% !important;
}
#wunschtermin .modal-footer button {
	border: none !important;
	padding: 12px 20px !important;
	display: flex !important;
	opacity: 1 !important;
}

#wunschtermin .btn-close {
	background-color: #f4f6f9 !important;
	font-size: 12px !important;
	padding: 15px !important;
	opacity: 1 !important;
}

#wunschtermin .btn-primary,
#wunschtermin .btn-primary:after {
	background-color: #60b4e7 !important;
	align-items: center !important;
}

#wunschtermin .btn-primary:hover {
	background-color: #7ec2eb !important;
	align-items: center !important;
}

#wunschtermin .btn-secondary {
	background-color: #e8e9eb !important;
	color: #616161 !important;
}

#wunschtermin .ui-datepicker .ui-datepicker-prev,
#wunschtermin .ui-datepicker .ui-datepicker-next {
	display: none !important;
}

#wunschtermin .datepicker {
	align-items: center !important;
	padding-bottom: 12px !important;
	border: none !important;
	text-align: center !important;
	display: flex;
}
#wunschtermin .ui-datepicker .ui-datepicker-header {
	border: none !important;
	background: inherit !important;
}

#wunschtermin .ui-datepicker .ui-datepicker-title {
	font-weight: bold !important;
	/* margin: 0 0.6em; */
	text-align: left !important;
}

#wunschtermin th[scope="col"] span {
	color: #616161 !important;
	font-weight: 500 !important;
}

#wunschtermin .ui-widget.ui-widget-content {
	border: none !important;
}

#wunschtermin .ui-state-default,
#wunschtermin .ui-widget-content .ui-state-default {
	text-align: center !important;
	border: none !important;
	font-weight: 600 !important;
	color: inherit !important;
	background-color: inherit !important;
	text-decoration: none !important;
}

#wunschtermin .ui-state-active,
#wunschtermin .ui-widget-content .ui-state-active,
#wunschtermin .ui-widget-header .ui-state-active,
#wunschtermin a.ui-button:active,
#wunschtermin .ui-button:active,
#wunschtermin.ui-button.ui-state-active:hover,
td.hover-date {
	border: 1px solid inherit !important;
	border-radius: 2px !important;
	background: inherit !important;
	font-weight: normal !important;
	color: inherit !important;
	font-weight: 600 !important;
	text-align: center !important;
}

#wunschtermin .ui-state-highlight,
#wunschtermin .ui-widget-content .ui-state-highlight,
#wunschtermin .ui-widget-header .ui-state-highlight {
	border: 1px solid red !important;
	border-radius: 50% !important;
	background: red !important;
	color: white !important;
	text-align: center !important;
	font-weight: 600 !important;
	padding: 10% !important;
}

#wunschtermin .ui-datepicker .past-date {
	color: inherit !important;
	text-decoration: line-through !important;
	position: relative !important;
	text-align: center !important;
	font-weight: 600 !important;
}

.other-month {
	color: lightgray !important;
}

#wunschtermin .ui-datepicker-calendar td.hover-date {
	background-color: black !important;
	color: white !important;
	border: 1px solid inherit !important;
	/* border-radius: 2px; */
	text-align: center !important;
	font-weight: 600 !important;
}

.square {
	width: 40px;
	height: 40px;
	border-radius: 5px;
}
.small-text {
	font-size: 12px;
	color: gray;
}

.small-text .lh-sm {
	background-color: #c5d8e4 !important;
	padding: 2% !important;
	border-radius: 5px !important;
	color: black !important;
}

.other-info {
	background-color: #e8f5fe;
	padding: 6%;
	border-radius: 16px;
}

#wunschtermin p {
	font-size: 14px;
}

/* the week and day toggle */
#wunschtermin .toggle-button-group {
	display: inline-flex;
	overflow: hidden;
	padding: 4px;
	border-radius: 10px;
	background-color: #e8e9eb;
}
#wunschtermin .toggle-button {
	padding: 10px 20px;
	cursor: pointer;
	background-color: inherit;
	border: none;
	outline: none;
	/* font-size: 16px; */
	padding: 16px;
	border-radius: 10px;
	color: #303030;
	border: none;
	transition: background-color 0.3s, color 0.3s;
}
#wunschtermin .toggle-button.active {
	background-color: white;
	color: #7ec2eb;
	font-weight: bold;
}

#wunschtermin .price {
	background-color: #e8f5fe;
	padding: 5px;
}

#wunschtermin .price-info {
	background-color: #c5d8e4 !important;
	padding: 5px;
}

#wunschtermin .checked {
	display: block !important;
	padding: 7px;
}

.unchecked {
	display: none !important;
}

#wunschtermin table {
	/* width: 100% !important; */
	border-collapse: separate !important;
	border-spacing: 3px;
}

#wunschtermin .sunday {
	color: darkgrey;
	font-weight: 100 !important;
}

#wunschtermin .highlight-title {
	color: #60b4e7 !important;
}

#wunschtermin .align-buttons {
	/* width: 40%; */
	padding: 0 3% !important;
}

#wunschtermin .custom-input,
#wunschtermin .custom-select {
	height: 48px !important;
	border: 1px solid #ced4da !important;
	border-radius: 8px !important;
	padding: 10px !important;
	font-size: 16px !important;
	background-color: #f4f6f9 !important;
}

#wunschtermin .custom-select {
	background-size: 16px !important;
	font-weight: bold !important;
}

#wunschtermin .custom-input:focus,
#wunschtermin .custom-select:focus {
	outline: none !important;
	border-color: #0d6efd !important;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

#wunschtermin .btn-primary {
	height: 48px !important;
	font-size: 16px !important;
	border-radius: 8px !important;
}

#wunschtermin #secondModal .modal-dialog .modal-content {
	border-radius: 10px !important;
}

#wunschtermin .new-row {
	visibility: hidden;
	background-color: #60b4e7;
	color: white;
	width: 30px;
	border-radius: 2px;
	text-align: center;
	transition: all 0.5s;
}

#wunschtermin .new-row.show {
	visibility: visible;
}

#secondModal {
	z-index: 1056;
}

#wunschtermin button {
	font-size: 16px; /* Default font size */
}

@media (max-width: 768px) {
	#wunschtermin button {
		font-size: 14px; /* Smaller font size for tablets and small screens */
	}
	
	#wunschtermin .toggle-button-group {
		flex-direction: column;
		width: 100%;
	}
	
	#wunschtermin .info__toggle {
		width: 100% !important;
	}
}

#wunschtermin .modal-fullscreen {
	width: 100vw;
	max-width: none;
	height: 100%;
	margin: 0;
}

#wunschtermin .btn-close,
secondModal .btn-close {
	background-color: #f4f6f9 !important;
	font-size: 12px !important;
	padding: 15px !important;
	opacity: 1 !important;
}

#wunschtermin .ui-datepicker td span,
#wunschtermin .ui-datepicker td a {
	display: block;
	padding: 0.2em !important;
	text-align: right;
	text-decoration: none;
	width: 30px;
}
#wunschtermin .btn-close,
#secondModal .btn-close {
	--bs-btn-close-color: #000;
	--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
	--bs-btn-close-opacity: 0.5;
	--bs-btn-close-hover-opacity: 0.75;
	--bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
	--bs-btn-close-focus-opacity: 1;
	--bs-btn-close-disabled-opacity: 0.25;
	--bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	padding: 0.25em 0.25em;
	color: var(--bs-btn-close-color);
	background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
	border: 0;
	border-radius: 0.375rem;
	opacity: var(--bs-btn-close-opacity);
}

#wunschtermin .gap-2,
#secondModal .gap-2 {
	gap: 0.5rem !important;
}

#wunschtermin .gap-3,
#secondModal .gap-3 {
	gap: 1rem !important;
}

#wunschtermin .fw-bold {
	font-weight: 700 !important;
}

#wunschtermin .ui-datepicker table {
	font-size: 0.9em !important;
	border-collapse: collapse;
	color: #000;
}

#wunschtermin .ui-state-disabled,
#wunschtermin .ui-widget-content .ui-state-disabled,
#wunschtermin .ui-widget-header .ui-state-disabled {
	opacity: 0.35;
	filter: Alpha(Opacity=35);
	background-image: none;
}

#wunschtermin .ui-datepicker .ui-datepicker-title {
	margin: 1% 10% !important;
	line-height: 1.8em !important;
	text-align: center !important;
	margin-bottom: 1rem !important;
}

#wunschtermin .order-1 {
	order: 1 !important;
}

@media (max-width: 576px) {
	#wunschtermin #dnone {
		display: none !important;
	}
	#wunschtermin .d-none {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	#wunschtermin .order-xl-2 {
		order: 2 !important;
	}
	#wunschtermin .d-xl-block {
		display: block !important;
	}
}
@media (min-width: 992px) {
	#wunschtermin .order-lg-1 {
		order: 1 !important;
	}
	#wunschtermin .d-xl-none {
		display: none !important;
	}
	#wunschtermin .d-xl-block {
		display: block !important;
	}
}

@media (min-width: 576px) {
	#wunschtermin .order-sm-1 {
		order: 1 !important;
	}
}