:root {
	--aht-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	--aht-font-weight: 400 !important;
	--aht-font-size: 18px !important;
	--aht-line-height: 1em !important;
	--aht-letter-spacing: .05em !important;
}

.accessibility-options {
	position: fixed;
	display: none;
	width: auto;
	height: auto;
	z-index: 9999;
	border: 4px solid #fff;
	background-color: #000;
	color: #fff;
	padding: 0;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .5);
	& .accessibility-options-title {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-gap: 10px;
		flex-shrink: 0;
		padding: 10px;
		border-bottom: 1px solid #fff;
		& > div:first-child {
			justify-self: left;
			align-self: center;
			font-family: var(--aht-font-family);
			font-weight: bold;
			font-size: var(--aht-font-size);
			line-height: var(--aht-line-height);
			letter-spacing: var(--aht-letter-spacing);
		}
		& .accessibility-options-close {
			justify-self: right;
			align-self: center;
			cursor: pointer;
			background: url(close.svg) center center no-repeat;
			background-size: contain;
			width: 20px;
			height: 20px;
			display: block;
		}
	}
	& .accessibility-options-container {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		max-height: 90vh;
		& .accessibility-options-buttons {
			overflow-y: auto;
			flex-shrink: 1;
			flex-grow: 1;
			& > div {
				display: grid;
				grid-template-columns: auto 1fr;
				grid-gap: 10px;
				padding: 10px;
				border-bottom: 1px solid #aaa;
				& button {
					all: unset;
					box-sizing: border-box;
					align-self: center;
					justify-self: left;
					background-color: transparent;
					border: none;
					outline: none;
					appearance: none;
					user-select: none;
					font-family: var(--aht-font-family);
					font-weight: var(--aht-font-weight);
					font-size: var(--aht-font-size);
					line-height: var(--aht-line-height);
					letter-spacing: var(--aht-letter-spacing);
				}
				& button + div {
					align-self: center;
					justify-self: right;
					width: 30px;
					height: 20px;
					border: 1px solid #fff;
					background-color: #888;
				}
				& button.effect-active + div {
					background-color: #0f0 !important;
				}
				&:last-child {
					border-bottom: none;
					border-radius: 0 0 10px 10px;
				}
				&:hover {
					background-color: #555;
					cursor: pointer;
				}
				& button:focus {
					outline: 3px solid #ff0;
					outline-offset: 2px;
				}
				&.accessibility-info-link a {
					display: block;
					color: #fff !important;
					text-decoration: underline !important;
					text-align: center;
					font-family: var(--aht-font-family);
					font-weight: var(--aht-font-weight);
					font-size: var(--aht-font-size);
					line-height: var(--aht-line-height);
					letter-spacing: var(--aht-letter-spacing);
					grid-column: 1 / span 2;
				}
			}
		}
	}
}
.accessibility-options-marker {
	position: fixed;
	display: block;
	width: 80px;
	height: 80px;
	z-index: 9998;
	border: 4px solid #fff;
	background: url(icon.svg) center center no-repeat #4b95ff;
	background-size: calc(100% - 20px);
	border-radius: 50%;
	box-shadow: 0 0 0 4px #000;
	&:hover {
		cursor: pointer;
	}
}
@media (max-width: 768px) {
	.accessibility-options-marker {
		width: 40px;
		height: 40px;
		border: 2px solid #fff;
		box-shadow: 0 0 0 2px #000;
	}
}

/* high contrast */
body.accessibility-effect-highContrast {
	background-color: #000 !important;
	color: #fff !important;
}
.accessibility-effect-highContrast {
	& *:not(.accessibility-image-text-replacement, .accessibility-bg-text-replacement, .accessibility-options) {
		box-shadow: none !important;
		color: inherit !important;
		background-color: inherit !important;
	}
	& a {
		color: #0ff !important;
		text-decoration: underline !important;
	}
	& .accessibility-image-target {
		background-image: none !important;
	}
	& :focus {
		outline: 3px solid #ff0 !important;
		outline-offset: 2px;
	}
	& *:not(.accessibility-options *):is(button, input, select, textarea) {
		background-color: #000 !important;
		color: #fff !important;
		border: 2px solid #fff !important;
	}
}
body .accessibility-auto-dark {
	background-color: #000 !important;
	color: #fff !important;
}

/* font styles */
.accessibility-font-min {
	font-size: 20px !important;
	line-height: 1.5em !important;
}
.accessibility-font-max {
	font-size: 28px !important;
	line-height: 1.5em !important;
}
body.accessibility-effect-readableFont,
body.accessibility-effect-readableFont * {
	font-family: var(--aht-font-family);
	font-weight: var(--aht-font-weight);
	letter-spacing: var(--aht-letter-spacing);
}
body.accessibility-effect-markTitles {
	&.accessibility-effect-highContrast {
		& h1, & h2, & h3, & h4, & h5, & h6 {
			background-color: #ff0 !important;
			color: #000 !important;
		}
	}
	& h1, & h2, & h3, & h4, & h5, & h6 {
		background-color: #ff0 !important;
		color: #000 !important;
	}
}
.accessibility-link-target,
body.accessibility-effect-highlightLinks .jquery-click-effect {
	outline: 3px solid #0ff !important;
	outline-offset: 2px;
	&:focus {
		outline-color: #ff0 !important;
	}
}

/* disable animations */
.accessibility-effect-disableAnimation * {
	animation: none !important;
	transition: none !important;
	animation-duration: 0s !important;
	transition-duration: 0s !important;
}

/* images */
.accessibility-image-text-replacement,
.accessibility-bg-text-replacement {
	font-size: 16px;
	line-height: 1.5em;
	text-align: center;
	background-color: #fff !important;
	color: #000 !important;
	padding: 4px;
	border: 1px dashed #000;
	overflow: hidden;
	display: inline-block;
}
.accessibility-effect-hideImages .bg-image-hidden {
	background-image: none !important;
}

/* text to speech */
.accessibility-read-text-helper {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	bottom: 20px;
	transform: translateX(calc(50vw - 50%));
	border: 4px solid #fff;
	background-color: #000;
	color: #fff;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .5);
	z-index: 9999;
	& .aht-btn-play, & .aht-btn-stop {
		margin: 10px;
		display: block;
		cursor: pointer;
	}
	& .aht-btn-play {
		width: 0;
		height: 0;
		border-left: 20px solid #fff;
		border-top: 12px solid transparent;
		border-bottom: 12px solid transparent;
	}
	& .aht-btn-stop {
		width: 20px;
		height: 20px;
		background-color: #fff;
	}
}