@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/open-sans-v44-latin-500.woff2') format('woff2');
}

:root {
	--aht-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	--aht-font-weight: 500 !important;
	--aht-font-size: 20px !important;
	--aht-font-size-mobile: 15px !important;
	--aht-line-height: 1em !important;
	--aht-letter-spacing: .05em !important;
	--aht-font-color: #fff !important;
	--aht-border: 3px solid #fff !important;
	--aht-border-mobile: 2px solid #fff !important;
	--aht-background-color: #000 !important;
	--aht-symbol-color: #52a6ff !important;
}

.accessibility-options {
	position: fixed;
	display: none;
	height: auto;
	width: 550px;
	max-width: 90vw;
	z-index: 9998;
	border: var(--aht-border);
	background-color: #000;
	color: var(--aht-font-color);
	padding: 0;
	border-radius: 10px;
	& .accessibility-options-title {
		position: absolute;
		top: 35px;
		right: 35px;
		display: block;
		& .accessibility-options-close {
			cursor: pointer;
			background: url(close.svg) center center no-repeat;
			background-size: 80%;
			width: 70px;
			height: 70px;
			display: block;
			border: var(--aht-border);
			border-radius: 50%;
			z-index: 100;
		}
	}
	& .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-template-areas: 'marker button';
				grid-gap: 20px;
				padding: 10px 50px;
				&:first-child {
					margin-top: 42px;
				}
				& button {
					all: unset;
					grid-area: button;
					box-sizing: border-box;
					align-self: center;
					justify-self: start;
					background-color: transparent;
					border: none;
					outline: none;
					appearance: none;
					user-select: none;
					padding: 0 !important;
					border: var(--aht-border);
					text-transform: none !important;
					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);
					&:focus, &:hover {
						& > div {
							border-color: var(--aht-symbol-color);
							border-width: 9px;
						}
					}
				}
				& div {
					grid-area: marker;
					align-self: start;
					justify-self: start;
					width: 35px;
					height: 35px;
					border: var(--aht-border);
					border-radius: 50%;
					background-color: transparent;
				}
				& button.effect-active + div {
					border-color: var(--aht-symbol-color) !important;
					background-color: var(--aht-symbol-color) !important;
				}
				&:hover, & button:focus, & button:hover {
					& button {
						color: var(--aht-symbol-color) !important;
					}
					& div {
						border-color: var(--aht-symbol-color);
						border-width: 9px;
					}
				}
				&:hover > button, & button:focus, & button:hover {
					color: var(--aht-symbol-color) !important;
					text-decoration-line: underline !important;
					text-decoration-thickness: 3px !important;
					text-underline-offset: 3px !important;
					text-decoration-color: var(--aht-symbol-color) !important;
					outline: none !important;
					& > div, & + div {
						border-color: var(--aht-symbol-color);
						border-width: 9px;
					}
				}
				&:hover {
					cursor: pointer;
				}
				&.accessibility-info-link a {
					display: inline-block;
					color: #fff !important;
					border: var(--aht-border);
					padding: 21px 55px;
					margin: 10px 0 26px 0;
					border-radius: 48px;
					width: 350px;
					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);
					text-decoration: none !important;
					&:hover {
						border-color: var(--aht-symbol-color);
						background-color: var(--aht-symbol-color);
						color: var(--aht-font-color);
						text-decoration: none !important;
					}
				}
			}
		}
	}
}
.accessibility-options-marker {
	position: fixed;
	display: block;
	width: 70px;
	height: 70px;
	z-index: 9999;
	border: var(--aht-border);
	background: url(icon.svg) center center no-repeat var(--aht-symbol-color);
	background-size: calc(100% - 20px);
	border-radius: 50%;
	&:hover {
		cursor: pointer;
	}
}
@media (max-width: 768px) {
	.accessibility-options {
		border: var(--aht-border-mobile);
		border-radius: 5px;
		width: 360px;
		& .accessibility-options-title {
			top: 18px;
			right: 18px;
			& .accessibility-options-close {
				width: 36px;
				height: 36px;
				border: var(--aht-border-mobile);
			}
		}
		& .accessibility-options-container {
			& .accessibility-options-buttons {
				& > div {
					grid-gap: 10px;
					padding: 5px 30px;
					&:first-child {
						margin-top: 22px;
					}
					& button {
						border: var(--aht-border-mobile);
						font-size: var(--aht-font-size-mobile);
						&:focus, &:hover {
							& > div {
								border-width: 4px;
							}
						}
					}
					& div {
						width: 18px;
						height: 18px;
						border: var(--aht-border-mobile);
					}
					&:hover, & button:focus, & button:hover {
						& div {
							border-width: 4px;
						}
					}
					&:hover > button, & button:focus, & button:hover {
						text-decoration-thickness: 2px !important;
						text-underline-offset: 2px !important;
						& > div, & + div {
							border-width: 4px;
						}
					}
					&.accessibility-info-link a {
						border: var(--aht-border-mobile);
						padding: 9px 36px;
						margin: 5px 0 12px 0;
						border-radius: 20px;
						width: auto;
						font-size: var(--aht-font-size-mobile);
					}
				}
			}
		}
	}
	.accessibility-options-marker {
		width: 36px;
		height: 36px;
		border: var(--aht-border-mobile);
		background-size: calc(100% - 12px);
	}
}

/* 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;
	}
}