.wcag-navigation {
    position: relative;
    z-index: 3;
    top: 9rem;
    padding-left: 8rem;
}
.explanation-modal.rightoriented {
	left: auto;
    right: 0;
    transform: translateX(0);
}
.explanation-modal.leftoriented {
    left: 0;
    transform: translateX(0);
}
.explanation-modal.leftoriented:before {
    left: 11%;
}
.explanation-modal.rightoriented:before {
    left: 89%;
}
.explanation-modal.centered {
    left: 50%;
    transform: translateX(-50%);
}
.explanation-modal.centered:before {
    left: 50%;
    transform: translateX(-50%);
}
.found-in-explanation{
	position: relative;
}
.highlight-btn{
	position: relative;
	display: inline-block;

}
.highlight-checkbox .checkbox-block {
    margin-top: 0;
    order: 2;
    margin-left: 1.5rem;
    display: none;
    align-items: center;
}

.highlight-checkbox .checkbox-block input{
    opacity: 1;
    position: relative;
}
.found-in-explanation--inner.highlighted {
	cursor: pointer;
	color: #FFF !important;
	background-color: var(--clr1) !important;
}
#totalexplainedline {
	float: left;
	width: 100%;
	margin: 1rem 0 0;
    white-space: nowrap;
}
.tippy-content .explanation-word,
.explanation-modal .explanation-word{
    color: #FFF !important;
    font-size: calc(var(--fontsize_p) * var(--text-scaler)) !important;
    line-height: calc(var(--lineh_p) * var(--text-scaler)) !important;
    font-weight:bold;
    padding-bottom: 0.9rem;
	font-family: aktiv-grotesk, sans-serif;
    letter-spacing: 0.42px;
}
.tippy-content .explanation-desc,
.explanation-modal .explanation-desc{
	font-family: aktiv-grotesk, sans-serif;
    width: 100%;
    hyphens: auto;
    color: #FFF !important;
    font-size: calc(var(--fontsize_p) * var(--text-scaler)) !important;
    line-height: calc(var(--lineh_p) * var(--text-scaler)) !important;
    letter-spacing: 0.42px;
	font-weight: 400;
}
.highlight-checkbox.modal-window {
	color: #FFF;
    line-height: 1.2;
}
.highlight-checkbox.modal-window.hidden {
	display: none;
}
.modal-window.highlight-checkbox {
    position: absolute;
    background-color: var(--clr2);
    z-index: 10;
    width: auto;
    padding: 1rem 1.7rem;
    display: flex;
    flex-wrap: wrap;
    top: calc(100% + 1.6rem);
    left: 0;
    border-radius: 1.2rem;
    padding-bottom: 0.7rem;
}
.modal-window:not(.highlight-checkbox)::before{
    content: " ";
    left: 50%;
    border-bottom: 16px solid var(--clr1);
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    position: absolute;
    top: -1.2rem;
    transform: translateX(-50%);

}
.tippy-box {
    background-color: black!important;
    width: 31.675rem;
    padding: 1.3rem 1rem 1rem 1.5rem;
    border-radius: 1.2rem;
}
.tippy-arrow:before {
    color: black!important;
}
.tippy-box .tippy-content {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.modal-window:not(.highlight-checkbox),
.modal-window-above{
    position: absolute;
    background-color: var(--clr1) !important;
    z-index: 10;
    width: 31.675rem;
    padding: 1.7rem 1.3rem 2.5rem 1.7rem;
    bottom: 3.7rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}
.modal-window-above::before{
	content: " ";
    left: 50%;
    border-top: 16px solid var(--clr1);
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    position: absolute;
    bottom: -1.2rem;
    transform: translateX(-50%);
}
.modal-window:not(.highlight-checkbox) {
    bottom: auto;
}
#wcag-control .highlight-btn {
	display: inline-block;

}
.highlight-checkbox.modal-window label {
    line-height: 1.2;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-family: var(--Typeface-Family-Miscellaneous, 'DJH');
    letter-spacing: 0.088rem;
    font-weight: 700;
}
#totalexplainedline {
    margin-bottom: 0;
    width: 100%;
    float: left;
    order: 3;
	margin-top: 0.3rem;
    font-size: var(--fontsize_s);
}
#wcag-control .highlight-btn .button {
	background-color: transparent;
	border-radius: 0;
	padding: 1.2rem 1rem;
}
#wcag-control .highlight-btn .button {
	color: #FFF;
	font-weight: 600 !important;
}
@media (max-width: 1000px){
    .modal-window.highlight-checkbox {
        top: auto;
        bottom: calc(100% + 1.6rem);
    }
}
@media (max-width: 400px){
    .tippy-box {
        width: 30rem;
    }
	.modal-window,
	.modal-window-above {
		width: 18rem;
	}
}