nav.accessNav{position:fixed;z-index:310;bottom:0;left:0;width:auto!important;height:auto;touch-action:none;-webkit-transition:all .4s;transition:all .4s}
nav.accessNav:hover{padding-bottom:10px}
nav.accessNav.act{z-index:304;overflow-y:auto;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}
#page.accessAct::before{content:'';position:fixed;z-index:303;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6)}
.navExpd nav.accessNav,.iframePage nav.accessNav{display:none}

nav.accessNav *{font-size:var(--font-size-s)}

.accessNav #accessHandler{padding:20px;width:auto;height:auto;text-align:center;line-height:1.35;color:#fff;background-color:transparent;border:none;cursor:pointer;-webkit-transition:all .4s;transition:all .4s}
.accessNav #accessHandler::before{display:block;line-height:50px;font-size:50px;font-family:awesome;text-align:center;background-color:var(--main-color);-webkit-border-radius:100%;border-radius:100%;-webkit-transform-origin:top right;transform-origin:top right;filter:drop-shadow(0 0 15px rgba(0,0,0,.4));}
.accessNav #accessHandler:hover,.accessNav #accessHandler:hover::before{-webkit-transform:scale(1)!important;transform:scale(1)!important}

.accessNav #accessHandler.act{display:block;position:fixed;z-index:21;top:80px;right:calc(25% + 20px);padding:5px;width:40px;text-align:center;color:#fff;background-color:var(--main-color);-webkit-border-radius:50%;border-radius:50%}
.accessNav #accessHandler.act:hover{background-color:var(--main-color-dark);-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:transform .6s;transition:transform .6s}
.accessNav #accessHandler.act::before{line-height:30px;font-size:30px;background-color:transparent;-webkit-box-shadow:none!important;box-shadow:none!important}
.accessNav #accessHandler.act:hover::before{-webkit-transform:scale(1)!important;transform:scale(1)!important}


/* --- ACCESS MENU --- */

.accessNav ul#accessMenu{display:none;position:fixed;z-index:20;top:60px;left:25%;padding:40px;width:50%;background-color:rgba(255,255,255,1);-webkit-border-radius:8px;border-radius:8px;will-change:transform;transform:none!important}
.accessNav.act ul#accessMenu{display:-moz-box!important;display:-webkit-box!important;display:-webkit-flex!important;display:-ms-flexbox!important;display:flex!important}

.accessNav #accessMenu.isDragging{user-select:none}
.accessNav .accessMenuDragItem{display:none;position:absolute;z-index:20;top:20px;right:20px;order:-1}
.accessNav .accessMenuDragHandle{display:inline-flex;align-items:center;justify-content:center;width:45px;min-width:45px;height:45px;margin:0 0 0 auto;padding:0;text-align:center;-webkit-border-radius:50%;border-radius:50%;color:#a2a2a2;border:1px solid #d6d6d6;cursor:grab;touch-action:none;-webkit-transition:all .4s;transition:all .4s}
.accessNav .accessMenuDragHandle:hover{color:#565656;border-color:#565656}
.accessNav .accessMenuDragHandle::before{content:"↕";display:block;position:relative;top:-2px;right:-3px;font-size:22px;line-height:1;cursor:grab;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.accessNav #accessMenu.isDragging .accessMenuDragHandle{cursor:grabbing}
.accessNav .accessMenuDragHandle:focus-visible{outline:3px solid #ffbf00;outline-offset:3px}

.accessNav ul#accessMenu li.listHeader{width:100%}
.accessNav ul#accessMenu li.filterSelect{width:49%}
.accessNav ul#accessMenu li.langSelect{width:49%!important}

.accessNav ul#accessMenu li.listHeader{position:relative;z-index:2;padding:0 10px 20px;font-size:18px;text-align:left;color:#000}
.accessNav ul#accessMenu li.listHeader h3{font-size:var(--font-size-xl);font-family:regular,arial,helvetica,awesome,sans-serif;font-weight:bold;color:var(--main-color)}

.accessNav ul#accessMenu li.filterSelect{position:relative;z-index:2;margin-top:20px;padding:0 10px}
.accessNav ul#accessMenu li.filterSelect.set-lang,.accessNav ul#accessMenu li.filterSelect.set-fontSize{display:none}
.accessNav ul#accessMenu li.filterSelect.set-spacer{margin-top:0}
.accessNav ul#accessMenu li .btnSet{width:100%}
.accessNav ul#accessMenu li.filterSelect .btnSet{position:relative}
.accessNav ul#accessMenu li .btnSet > button::before{font-family:awesome!important}
.accessNav ul#accessMenu li.filterSelect .btnSet > button:not(.resetBtn){display:inline-block;position:relative;z-index:3;padding:10px;width:100%;font-size:18px;line-height:1;text-align:left;overflow:hidden;white-space:nowrap;color:#000;background-color:#fff;border:1px solid var(--main-color);-webkit-border-radius:4px;border-radius:4px;cursor:pointer}
.accessNav ul#accessMenu li .btnSet > button:not(.resetBtn)::before{display:inline-block;width:30px;font-size:22px}
.accessNav ul#accessMenu li .btnSet > button:not(.resetBtn)::after,.accessNav li.set-lang ul li a::after{content:'';display:block;position:absolute;z-index:-1;top:0;left:-100%;width:100%;height:100%;background-color:rgba(241,243,248,1);-webkit-border-radius:4px;border-radius:4px;-webkit-transition:all .4s;transition:all .4s}


/* reset */

.accessNav ul#accessMenu li .btnSet > .resetBtn{display:none;position:absolute;z-index:3;top:-15px;right:-12px;padding:0!important;font-size:20px;text-align:center;color:#000;border:none!important;-webkit-transition:all .4s;transition:all .4s}
.accessNav ul#accessMenu li .btnSet > .resetBtn.act{display:block}
.accessNav ul#accessMenu li .btnSet > .resetBtn:hover{color:#525252;-webkit-transform:scale(2);transform:scale(2);-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
.accessNav ul#accessMenu li .btnSet > .resetBtn::after{display:block;font-family:awesome;padding:7px;width:30px;height:30px;color:#fff;background-color:var(--main-color);-webkit-border-radius:50%;border-radius:50%;-webkit-transition:all .4s;transition:all .4s}
.accessNav ul#accessMenu li .btnSet > .resetBtn.hasLabel::after{display:none}

.accessNav ul#accessMenu li.filterSelect.set-all{margin:30px 0 0;padding:0 30%;width:100%}
.accessNav ul#accessMenu li.filterSelect.set-all .btnSet button{padding:10px;text-align:center;line-height:1;color:#fff!important;background-color:#565656;border-color:#565656;display:-moz-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
.accessNav ul#accessMenu li.filterSelect.set-all .btnSet button::before{margin-right:10px!important;width:auto!important;font-family:awesome!important}
.accessNav ul#accessMenu li.filterSelect.set-all .btnSet button::after{left:0!important;background-color:var(--main-color)}
.accessNav ul#accessMenu li.filterSelect.set-all .btnSet button:hover::after{left:-100%!important}

body .accessNav .resetBtn{opacity:.35;pointer-events:none}
body .accessNav .resetBtn.act{opacity:1;pointer-events:auto}
body .accessNav .changeBtn.act,body .accessNav .selectBtn.act{font-weight:700}


/* btn info */

.accessNav ul#accessMenu li .btnInfo{padding:5px 0 0;width:100%;font-size:var(--font-size-s);text-align:left;color:#111;-webkit-transform-origin:left center;transform-origin:left center;-webkit-transition:all .8s;transition:all .8s}
.accessNav ul#accessMenu li .btnInfo::before{display:none;margin-right:10px;font-family:awesome}
.accessNav ul#accessMenu li .btnInfo::after{display:none!important}


/* langnav */

.accessNav li.langSelect{margin:20px 1% 20px 0}
.accessNav li.langSelect .btnSet{position:relative}

.accessNav li.set-lang .langNav{display:inline-block;width:100%}
.accessNav li.set-lang ul{width:100%}
.accessNav li.set-lang ul li{display:inline-block;width:100%;overflow:hidden}
.accessNav li.set-lang ul li.act{display:none}
.accessNav li.set-lang ul li a{display:block;position:relative;padding:10px;width:100%!important;font-size:18px;text-align:left;color:#000!important;border:1px solid var(--main-color);white-space:nowrap;-webkit-border-radius:4px;border-radius:4px;-webkit-transition:all .4s;transition:all .4s}
.accessNav li.set-lang ul li a::before{display:inline-block;position:static;margin:0 10px 0 0!important;font-size:20px!important;font-family:awesome;line-height:1;color:#000}
.accessNav li.set-lang ul li a:hover::after{left:0}

.accessNav ul#accessMenu li.set-lang .standard.act ~ .btnInfo::before{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
.accessNav ul#accessMenu li.set-lang .easy.act ~ .btnInfo::before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.accessNav ul#accessMenu li.set-lang .standard.act:hover ~ .btnInfo.easy,.accessNav ul#accessMenu li.set-lang .easy.act:hover ~ .btnInfo.standard,
.accessNav ul#accessMenu li.set-lang .standard.act ~ .btnInfo.standard,.accessNav ul#accessMenu li.set-lang .easy.act ~ .btnInfo.easy{display:none}


/* multistep */

.accessNav ul#accessMenu li .btnSet.multiStep{position:static}

.accessNav ul#accessMenu li.filterSelect .label{width:100%}
.accessNav ul#accessMenu li.filterSelect .label *{display:inline-block;font-size:var(--font-size-m);font-family:regular,arial,helvetica,awesome,sans-serif;font-weight:bold}
.accessNav ul#accessMenu li.filterSelect .label *.labelIcon{margin-right:10px;font-size:var(--font-size-xl);font-family:serif}

.accessNav .rangeSet{gap:12px;width:min(100%,420px)}
.accessNav .rangeSet > *{width:auto}
.accessNav .rangeSet > label{padding:0;color:#868686}

.accessNav .accessRange{flex:1 1 auto;min-width:160px;height:20px}

.accessNav .rangeValue{flex:0 0 auto;min-width:2.5em;font-weight:700;text-align:right}
.accessNav .fontSizeRange{flex:1 1 auto;min-width:180px;height:44px;padding:0;cursor:pointer;background:transparent}
.accessNav .fontSizeRange::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:currentColor}
.accessNav .fontSizeRange::-webkit-slider-thumb{width:28px;height:28px;margin-top:-9px;border:3px solid currentColor;border-radius:50%;background:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
.accessNav .fontSizeRange::-moz-range-track{height:10px;border-radius:999px;background:currentColor}
.accessNav .fontSizeRange::-moz-range-thumb{width:28px;height:28px;border:3px solid currentColor;border-radius:50%;background:#fff;cursor:pointer}
.accessNav .fontSizeRange:focus-visible{outline:3px solid #ffbf00;outline-offset:4px}

.accessNav #resetFontSize,.accessNav #resetContentScale{position:static!important}


/* content scaling */

.accessNav .contentScaleRange{flex:1 1 auto;min-width:180px;height:44px;padding:0;cursor:pointer;background:transparent;-webkit-appearance:none;appearance:none}
.accessNav .contentScaleRange::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:currentColor}
.accessNav .contentScaleRange::-webkit-slider-thumb{width:28px;height:28px;margin-top:-9px;border:3px solid currentColor;border-radius:50%;background:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
.accessNav .contentScaleRange::-moz-range-track{height:10px;border-radius:999px;background:currentColor}
.accessNav .contentScaleRange::-moz-range-thumb{width:28px;height:28px;border:3px solid currentColor;border-radius:50%;background:#fff;cursor:pointer}
.accessNav .contentScaleRange:focus-visible{outline:3px solid #ffbf00;outline-offset:4px}


/* --- ICOFONTS --- */

.accessNav #accessHandler::before{content:'\e81e'}
.accessNav #accessHandler.act::before{content:'\e826'}

.accessNav ul#accessMenu li.filterSelect.set-all .btnSet button::before{content:'\e810'}

.accessNav li.set-lang .btnSet ul li a::before{content:'\f1ab'}

.accessNav ul#accessMenu .resetBtn::after{content:'\e810'}

.accessNav ul#accessMenu #nightfilter::before{content:'\e82a'}
.accessNav ul#accessMenu #grayfilter::before{content:'\e823'}
.accessNav ul#accessMenu #bluefilter::before{content:'\f0b0'}
.accessNav ul#accessMenu #seizure::before{content:'\e81f'}
.accessNav ul#accessMenu #letterfilter::before{content:'\e817'}
.accessNav ul#accessMenu #wordfilter::before{content:'\e822'}
.accessNav ul#accessMenu #linefilter::before{content:'\e816'}
.accessNav ul#accessMenu #cursorfilter::before{content:'\f245'}
.accessNav ul#accessMenu #imgfilter::before{content:'\e81d'}

.accessNav ul#accessMenu li .btnSet.multiStep button#resetMulti::before{content:'\e810'}
.accessNav ul#accessMenu li.set-fontSize .btnSet.multiStep > .label .labelIcon::before{content:'T'}


/* --- VIEWPORTS --- */

@media only screen and (min-width:200px) and (max-width:1399px) {
	nav.accessNav{bottom:10px;left:10px;-webkit-box-shadow:none;box-shadow:none}
	nav.accessNav.act{top:0;bottom:auto;right:0;left:auto}
	.navExpd nav.accessNav{display:none}
	
	nav.accessNav #accessHandler{padding:0}
	nav.accessNav #accessHandler.act{top:auto;bottom:20px;right:auto;left:20px}
	nav.accessNav #accessHandler::before{background-color:#3a3a3a}
	nav.accessNav #accessHandler::after{background-color:transparent;-webkit-border-radius:0;border-radius:0}
	nav.accessNav #accessHandler:hover::after{-webkit-transform:none!important;transform:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}
	nav.accessNav #accessHandler span{font-size:0}
	nav.accessNav #accessHandler:hover span,nav.accessNav #accessHandler.act span,nav.accessNav #accessHandler.act:hover span{margin:0;padding-left:0}
	nav.accessNav ul#accessMenu{padding:0 10px 40px;width:100%}
}

@media only screen and (min-width:768px) and (max-width:1200px) {
	nav.accessNav ul#accessMenu li.filterSelect .btnSet > button:not(.resetBtn){padding:25px 20px}
	nav.accessNav ul#accessMenu li.filterSelect.set-all .btnSet button,.accessNav ul#accessMenu li .btnSet.multiStep button{padding:20px!important}
	nav.accessNav ul#accessMenu li .btnSet.multiStep > label{padding-top:20px}
}

@media only screen and (min-width:200px) and (max-width:768px) {
	nav.accessNav #accessMenu .set-all{order:2}
	nav.accessNav #accessMenu .langSelect{order:1;padding:0 0 30px}
	nav.accessNav #accessMenu .langSelect ~ *{order:3}

	nav.accessNav ul#accessMenu{position:static;padding:0 20px 20px 20px;width:100%;height:auto;-webkit-border-radius:0!important;border-radius:0!important}
	nav.accessNav ul#accessMenu li,.accessNav ul#accessMenu li.langSelect > *{width:100%!important}
	nav.accessNav ul#accessMenu li{padding:0!important}
	nav.accessNav ul#accessMenu li.listHeader,.accessNav ul#accessMenu li .btnInfo{display:none}
	nav.accessNav ul#accessMenu li.langSelect > *{margin-bottom:20px}
	
	nav.accessNav ul#accessMenu li .btnSet.multiStep > label{width:100%}
	nav.accessNav li.langSelect a{padding:20px 0;text-align:center}
	nav.accessNav li.langSelect a::after{display:none}
}
