/* === START Dys fonts ========================================================= */
@font-face {
	font-family: "OpenDyslexic-Regular";
	src: url(fonts/OpenDyslexic-Regular.otf);
}
@font-face {
	font-family: "OpenDyslexic-Bold";
	src: url(fonts/OpenDyslexic-Bold.otf);
}
@font-face {
	font-family: "OpenDyslexic-Italic";
	src: url(fonts/OpenDyslexic-Italic.otf);
}
@font-face {
	font-family: "OpenDyslexicMono-Regular";
	src: url(fonts/OpenDyslexicMono-Regular.otf);
}
@font-face {
	font-family: "OpenDyslexic-BoldItalic";
	src: url(fonts/OpenDyslexic-BoldItalic.otf);
}
/* === END Dys fonts =========================================================== */
/* === START Dys content styles ================================================ */
.dysFontActive_true {
	font-family: "OpenDyslexic-Regular";
}
.dysFontActive_true #menu ul.mnu,
.dysFontActive_true .op_txt_is_quote,
.dysFontActive_true .op_labelTxt_is_quote,
.dysFontActive_true .op_clozeTxt_is_quote {
	font-family: "OpenDyslexic-Italic";
}
.dysFontActive_true header h1{
	line-height:1em;
}
.dysFontActive_true p{
	font-size: inherit;
}
.dysFontActive_true ul#accessibility{
	font-size:6pt;
}
.dysFontActive_true #titleRoot{
	font-size:0.9em;
}
.dysAltLineColor_true .dysColor_0{
	color:#DD0000;
}
.dysAltLineColor_true .dysColor_1{
	color:#00AA00;
}
.dysAltLineColor_true .dysColor_2{
	color:#0000FF;
}
.dysMoreSpace_true #content{
	line-height:1.5;
	word-spacing:0.6em;
}
.dysMoreSpace_true.dysFontActive_true #content{
	line-height:2;
}
/* === END Dys content styles ================================================== */

/* === START Dys panel ========================================================= */
div.dysPanel {
	visibility:hidden;
	font-size: 0.9em;
	display:flex;
	word-spacing: initial;
}
div.dysPanel > span{
	flex: 1 1 auto;
	display:flex;
	justify-content: center;
	gap: 0.7em;
	color: var(--dysPanelFG);
	background-color: var(--dysPanelBG);
	border-radius:0.5em;
}
.emeraude.dysPanelActive_true .zen_true div.dysPanel,
.rubis.dysPanelActive_true .zen_true div.dysPanel,
.dysPanelActive_true div.dysPanel {
	visibility:visible;
}
.dysPanelActive_true .zen_true div.dysPanel {
	visibility:hidden;
}
.dysBtnCheck_true,
.dysBtnCheck_false {
	display: flex;
	align-items: center;
	gap: 3px;
	text-decoration: none;
	position: relative;
	color: var(--dysPanelFG);
}

.dysBtnCheck_true::before,
.dysBtnCheck_false::before {
	display: inline-block;
	content: "";
	width: 1.65em;
	height: 1em;
	border-radius: 5em;
}
.dysBtnCheck_true::before {
	background-color: var(--dysPanelColor);
}
.dysBtnCheck_false::before {
	background-color: color-mix(in oklab, var(--dysPanelFG) 30%, var(--dysPanelFG) 10%);
}

.dysBtnCheck_true::after,
.dysBtnCheck_false::after {
	display: inline-block;
	content: "";
	position: absolute;
	width: 0.8em;
	height: 0.8em;
	border-radius: 5em;
	background-color: #fff;
}
.dysBtnCheck_false::after {
	left: 0.05em;
}
.dysBtnCheck_true::after {
	left: 0.75em;
}

.dysFontSizer {
	display:flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position:relative;
	text-align: center;
}

.dysBtnFontLarger,
.dysBtnFontSmaller {
	display: inline-block;
	width:1em;
	height:1em;
}
.dysBtnFontSmaller {
	background-color: var(--dysPanelColor);
	-webkit-mask-image: url(img/fontSmaller.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}
.dysBtnFontLarger {
	background-color: var(--dysPanelColor);
	-webkit-mask-image: url(img/fontLarger.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}
.dysBtnFontLarger:hover,
.dysBtnFontSmaller:hover {
	opacity: 0.8;
}
.dysBtnFontLarger span,
.dysBtnFontSmaller span{
	display: none;
}

.dysFontSizer .dysFontSizeLbl {
	padding: 0.2em;
	background-color: color-mix(in oklab, var(--dysPanelBG), #fff 40%);
	border: 1px solid var(--dysPanelColor);
	border-radius: 3px;
}
/* === END Dys panel =========================================================== */


/* === START Dys Daylight integration ============================================ */
.dysBtnTogglePanel{
	display: inline-block;
	margin-inline-start: 20px;
}
.dysBtnTogglePanel a {
  display: flex;
  align-items: center;
  height: 45px;
  box-sizing: border-box;
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  padding-inline: 10px;
}
.dysBtnTogglePanel a:hover{
	opacity: 0.8;
}
.dysBtnTogglePanel a::before {
    content: "";
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: var(--linkColor);
    -webkit-mask-image: url(img/dys.svg);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.dysBtnTogglePanel a > span {
    position: absolute;
    left: -9999px;
}
.dysPanelActive_true .dysBtnTogglePanel a {
    background-color: var(--accentDarkBG);
}
.dysPanelActive_true .dysBtnTogglePanel a::before {
    background-color: var(--accentDarkFG);
}

div.dysPanel{
    position:fixed;
    top:53px;
    right:1em;
    z-index: 99;
	border-radius: 0.5em;
	box-shadow: 0px 3px 5px -3px rgba(0,0,0,0.3);
}
div.dysPanel > span {
    flex-direction: column;
    padding: 0.8em;
}
html[data-theme='dark'] .dysAltLineColor_true .dysColor_0 {
  color: #FF7474;
}
html[data-theme='dark'] .dysAltLineColor_true .dysColor_2 {
  color: #9595FF;
}

/* Overload Daylight */
.default #tools{
    display: flex;
    height: 45px;
}
.dysMoreSpace_true p{
  line-height: 1.8;
}
.default #navigation a.btnZen {
    padding-inline-start: 10px;
}

/* Dys Variables */
:root{
	--dysPanelBG : var(--toolboxBG);
	--dysPanelFG : var(--accentLightFG);
	--dysPanelColor : var(--linkColor);
}
/* === END Dys Daylight integration ============================================== */