.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;
	/*padding-right: 1rem;*/
}
.highlight-checkbox .checkbox-block {
	margin-top: 0;
}
.highlighted {
	cursor: pointer;
	color: #FFF;
	background-color: var(--clr1);
}
span.found-in-explanation--inner.highlighted{
    background-color: #0A0A0A;
}
#totalexplainedline {
	float: left;
	width: 100%;
	margin: 1rem 0 0;
}
.explanation-modal .explanation-word{
    font-family: 'GT-Flexa-Bold';
    color: #fff;
    font-size: calc(var(--fontsize_p)* var(--text-scaler));
    line-height: calc(var(--lineh_p)* var(--text-scaler));
    width: 100%;
    display: flex;
}
.explanation-modal .explanation-desc{

    font-size: calc(var(--fontsize_xs)* var(--text-scaler));
    line-height: calc(var(--lineh_xs)* var(--text-scaler));
    color: #fff;
}
.highlight-checkbox.modal-window {
	color: #FFF;
	top: calc(100% + 0.5rem);
    font-size: calc(1.4rem * var(--text-scaler));
    line-height: calc(2.3rem * var(--text-scaler));
    font-family:"aktiv-grotesk";
    font-weight: 500;
}
.highlight-checkbox.modal-window input{
    display: none;
}
.highlight-checkbox.modal-window label,
.highlight-checkbox.modal-window span{
    font-size: calc(1.4rem * var(--text-scaler));
    line-height: calc(2.3rem * var(--text-scaler));
    font-family:"aktiv-grotesk";
    font-weight: 500;
}
.highlight-checkbox.modal-window.hidden {
	display: none;
}
.modal-window{
    position: absolute;
    background-color: #0A0A0A;
	z-index: 10;
    width: 16.5rem;
    border-radius: 12px;
    padding: 0.8rem 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    /*filter: drop-shadow(0 2px 2px var(--clr1));*/
}
/*.modal-window::before{*/
/*    content: " ";*/
/*    left: 50%;*/
/*    border-bottom: 16px solid var(--clr1);*/
/*    border-left: 16px solid transparent;*/
/*    border-right: 16px solid transparent;*/
/*    position: absolute;*/
/*    top: -15px;*/
/*    transform: translateX(-50%);*/
/*}*/
.modal-window-above{
    position: absolute;
    background-color: #0A0A0A;
    z-index: 10;
    width: 316.75px;
    padding: 1.7rem 1.3rem 2.5rem 1.7rem;
    bottom: 37px;
    left: 50%;
    transform: translateX(-50%);
}
.modal-window-above::before{
	content: " ";
    left: 50%;
    border-top: 16px solid #0A0A0A;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    position: absolute;
    bottom: -15px;
    transform: translateX(-50%);
}
#wcag-control .highlight-btn {
	display: inline-block;
	/*margin-right: 1rem;*/
}
#totalexplainedline {
    margin-bottom: 0;
    width: 100%;
    float: left;
	margin-top: 0.5rem;
}
#wcag-control .highlight-btn .button {
	background-color: transparent;
	border-radius: 0;
	padding: 1.2rem 1rem;
}
#wcag-control .highlight-btn .button {
	color: #FFF;

}
@media (max-width: 400px){
	.modal-window,
	.modal-window-above {
		width: 250px;
	}
    .explanation-modal .explanation-word{
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
}