#overlay-menu {position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;background-color: rgb(0 0 0 / 50%);z-index: 4;display:none;backdrop-filter: blur(2px);-webkit-backdrop-filter:blur(2px);}
#close-menu {position: absolute;top: 20px;right: 20px;background-repeat: no-repeat;background-image: url(resources/icon/close-normal.svg);background-size: 100%;background-position: 50%;z-index: 2;width: 42px;height: 42px;border:1px solid transparent;border-radius: 50%;}
#close-menu:hover {border:1px solid #fff;cursor:pointer;}
.touchevents #close-menu {border:1px solid transparent;}
.menu {position: absolute; right: 0; top: 0; z-index: 5; width: 360px; height: 100%; background: #313977; color: #fff; font-family: 'Otoiwo'; transform: translateX(400px); transition: transform 0.5s ease-out;}
.menu.open {transform: translateX(0);}
.menu .wrap {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 100%; overflow-y: auto;}
.menu .header {padding: 42px 32px 32px 34px;}
.menu .header .title {width: 70%;}
.menu .header .title img {width: 100%;}
.menu .header .w_bar {display:none;}
.menu .header .sections {margin-top: 42px; font-size: 24px; font-weight: 900; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; letter-spacing: 0.01em;}
.menu .menu-item:hover { color: #FBCD10;cursor: pointer;}
.menu .menu-item.active {color: #FBCD10;}
.menu .lang {display: flex; font-size: 16px; font-weight: 800; gap: 4px; margin-top: 32px;}
.menu .lang div {border: 2px solid transparent; padding: 4px 8px;}
.menu .lang .active {border: 2px solid #fff;}
.menu .lang a {color: #fff;text-decoration: none;}
.menu .lang a:hover {color: #FBCD10;}
.menu .footer {padding: 12px 32px 32px 34px;}
.menu .footer .partner {width: 100%;}
.menu .footer .partner span {display: block; font-size: 14px; font-weight: 600;}
.menu .footer .partner a {display: block; width: 35%; margin-top: 12px;}
.menu .footer .partner img {width: 100%;}
.menu .footer .warning {font-size: 14px; font-weight: 600; margin-top: 42px;}
.menu .footer .copyright {font-size: 18px; font-weight: 900; letter-spacing: 0.01em; margin-top: 22px;}
.menu .footer .powered {font-size: 18px; font-weight: 900; letter-spacing: 0.01em; margin-top: 4px;}
.menu .footer .powered a {color: #fff;}
.menu .footer .powered a:hover {color: #FBCD10;}
#overlay-search{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;background-color:rgb(0 0 0 / 50%);z-index:4;display:none;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.search-container{position:fixed;top:0;z-index:4;right:0;width:360px;background:#313977;height:100%;color:#fff;padding:42px 32px 12px 32px;transform:translateX(400px);transition:transform 0.5s ease-out;font-family:'Otoiwo';}
.search-container.open{transform:translateX(0);}
.search-container .title span{font-size:24px;font-weight:900;line-height:1;}
#close-search{position:absolute;top:20px;right:20px;background-repeat:no-repeat;background-image:url(resources/icon/close-normal.svg);background-size:100%;background-position:50%;z-index:2;width:42px;height:42px;border:1px solid transparent;border-radius: 50%;}
#close-search:hover{border:1px solid #fff;cursor:pointer;}
.touchevents #close-search  {border:1px solid transparent;}
#search-author{margin-top:28px;margin-bottom:4px;padding:8px 10px;border-style:none;width:272px;background:#313977;font-family:'Otoiwo';font-weight:600;font-size:16px;color:#ffffff;border:2px solid #fff;}
#search-author::placeholder{color:#ffffff77;font-family:'e-Ukraine',sans-serif;font-weight:300;font-size:14px;}
input:focus{outline:none;  box-shadow:none;}
#search-author:focus{outline:none;  box-shadow:none;}
.author-box{margin-top:16px;}
.author-box  ul{height: calc(100dvh - 160px);overflow-y:scroll;list-style:none;margin:0;padding:0;font-size:18px;font-weight:600;}
.author-box  ul li{list-style:none;margin:2px 6px 0 0;padding:8px 10px 8px 12px;cursor:pointer;overflow:hidden;display:block;line-height:1.3;}
.author-box  ul li:first-child{margin:0 6px 0 0;}
.author-box  ul li:hover{cursor:pointer;background-color:#4c5491;}
.author-box  ul::-webkit-scrollbar{width:4px !important;height:5px !important;}
.author-box  ul::-webkit-scrollbar-thumb{background-color:#f1f1f1;border:none;display:block;}
.author-box  ul::-webkit-scrollbar-track{background-color:#50578b;}
.touchevents .author-box ul li:hover {background-color:transparent;}
@media screen and (max-width: 960px) {
.menu {left: 0;transform: translateX(-400px);}
.menu .header .w_bar {font-weight: 900; font-size: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; letter-spacing: 0.01em; margin-top: 52px; border-bottom: 3px solid #fff; padding-bottom: 22px;}
.menu #quiz_w .count {color: #FBCD10;margin-left: 12px;}
.menu .header .sections {margin-top: 22px;}
}
@media screen and (max-width: 540px) {
.author-box ul li {padding: 8px 10px 8px 2px;}
}
@media screen and (max-width: 375px) {
.menu, .search-container {width: 100%;}
#search-author {width: calc(100% - 23px);}
.search-container .title span {font-size: 22px;}
}
.navigation_scene {position: fixed;z-index: 1;bottom: 32px;left: 50%;transform: translateX(-50%);display: flex;align-items: center;}
.navigation_scene.center-position {left: 50%;transform: translateX(-50%);transition: all 0.5s ease-out;}
.navigation_scene .wrap {display: flex;flex-direction: row;justify-content: space-between;align-items: center;gap: 8px;}
.navigation_scene .icon {opacity: 1;border-radius: 34px;width: 52px;height: 52px;background-image: url(resources/icon/arrow-scene.svg);background-repeat: no-repeat;background-size: 34px;background-position: 8px 50%;overflow: hidden;border-radius: 50%;}
.navigation_scene .icon.disabled  {opacity: 0.5;}
.navigation_scene .icon.enabled:hover {cursor:pointer;box-shadow: 0 0 0 1px #fff;}
#button_prev {transform: scaleX(-1);}
.touchevents .navigation_scene .icon.enabled:hover {box-shadow: none;}
#tooltip-navscene {position:absolute;left: -52px;bottom: 98px;background-color: #ffffff;height: 32px;display: none;align-items: center;justify-content: center;border-radius: 0px;z-index: 3;}
#tooltip-navscene span {display:block;font-family: 'Otoiwo';font-size: 17px;color: #383838;text-align: center;margin: 0 14px;white-space: nowrap;font-weight: 800;}
#tooltip-navscene::before {content:'';display:block;position:absolute;top: 27px;left: 50%;transform: translateX(-50%);width: 10px;height: 10px;background-color: #ffffff;transform: translateX(-50%) rotate(45deg);}
.touchevents #tooltip-navscene {display:none !important;}
.logoboss {position:absolute;top: 42px;left: 32px;z-index:2;width: 210px;}
.logoboss img {width:100%;}
.attribution {position:absolute;bottom: 32px;right: 32px;z-index:2;display: flex;align-items: flex-start;justify-content: flex-start;gap: 32px;letter-spacing: 0.02em;text-shadow: 1px 1px 1px #0000001f;text-align: right;font-family: 'Otoiwo';font-size: 17px;font-weight: 600;color: #ffffff;}
.attribution span {display:block;}
.attribution .gr_c {color: #a5a8ae;}
.attribution a {display:block;color: #ffffff;    text-decoration: none;}
.attribution a:hover {color:#FBCD10;text-decoration:underline;}
.attribution .snsr {display: flex;flex-direction: column; align-items: flex-end; justify-content: center;}
.attribution img {display:block;width: 44px;margin-top: 2px;}
#control_menu {display: flex;align-items: center;gap: 6px;position:absolute;left:280px;top:34px;z-index:2;}
#control_menu .button {width: 36px;height: 36px;background: rgb(0 0 0 / 41%);border-radius: 50%;background-repeat: no-repeat;}
#control_menu .button:hover {cursor:pointer;background-color: #1e2b42;box-shadow: 0 0 0 1px #fff;}
.touchevents #control_menu  .button:hover {background-color: rgb(30 43 66 / 70%);box-shadow: none;}
#control_menu .home {background-image: url(resources/icon/home.svg);background-size: 14px;background-position: 50% 9px;}
#control_menu .faq {background-image: url(resources/icon/faq.svg);background-size: 28px;background-position: 50%;}
#control_menu .fullscreen.on {background-image: url(resources/icon/fullscreen-on.svg);background-size: 28px;background-position: 50% 3px;}
#control_menu .fullscreen.off {background-image: url(resources/icon/fullscreen-off.svg);background-size: 28px;background-position: 50% 50%;}
#tooltip-cntrl-menu {position:absolute;left:0px;top: 80px;background-color: #ffffff;height: 32px;display: none;align-items: center;justify-content: center;border-radius: 0px;z-index: 3;}
#tooltip-cntrl-menu span {display:block;font-family: 'Otoiwo';font-size: 17px;color: #383838;text-align: center;margin: 0 14px;white-space: nowrap;font-weight: 800;}
#tooltip-cntrl-menu::before {content:'';display:block;position:absolute;top: -4px;left: 50%;width: 10px;height: 10px;background-color: #ffffff;transform: translateX(-50%) rotate(45deg);}
.touchevents #tooltip-cntrl-menu {display:none !important;}
.right_bar {position: absolute;z-index: 3; top: 32px; right: 32px; display: flex;align-items: center;color: #fff; font-family: 'Otoiwo';gap: 32px;}
#about {font-weight: 900;font-size: 24px;text-shadow: 1px 1px 1px #0000000d;}
#about:hover {text-decoration:underline;cursor: pointer;}
#quiz {font-weight: 900;font-size: 24px;text-shadow: 1px 1px 1px #0000000d;}
#quiz:hover {cursor: pointer;}
#quiz:hover .role {text-decoration:underline;}
#quiz span {display:inline-block;}
#quiz .count {color: #FBCD10;margin-left: 10px;text-shadow:none;}
#search {width: 32px;height: 32px;background-image: url(resources/icon/search.svg);background-size: 28px;background-position: 50% 50%;background-repeat: no-repeat;}
#search:hover {cursor: pointer;transform:scale(1.25);}
#menu {width: 42px;height: 42px;position: relative;transition:opacity 0.1s;background-color: #FBCD10;transform: rotate(45deg);}
#menu.fade_opacity {opacity:0;}
#menu::after {content:'';position:absolute;background-image: url(resources/icon/menu.svg);background-size: 32px;background-position: 50% 50%;background-repeat: no-repeat;top: 50%;left: 50%; transform: translate(-50%, -50%) rotate(135deg); z-index: 2; width: 42px; height: 42px;}
#menu:hover{cursor:pointer;background-color: #fff;}
.touchevents #menu {background-color: #FBCD10;}
.touchevents #search {transform:none;}
#sheet-textbot {position: absolute;z-index: 3;bottom: 32px;left: 32px;transition: height 0.2s ease;overflow: hidden;opacity:1;transition:opacity 0.2s ease;}
#sheet-textbot.fade_opacity {opacity:0;}
.accordion {background-color: rgb(0 0 0 / 80%);width: 320px;color: #fff;padding: 6px 2px 6px 20px;}
.accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);padding-right: 18px;}
.accordion-content::after {content:'';display:block;width:100%;height:12px;}
.accordion-content p {margin-top:16px;font-family: 'Otoiwo';padding-bottom: 8px;font-weight: 600;font-size: 17px;line-height: 1.3;}
.accordion .arrow {display: block; width: 42px; height: 42px; background-image: url(resources/icon/arrow-drop.svg); background-size: 42px; background-position: 50% 50%; background-repeat: no-repeat; transition: transform 0.3s; transform: rotate(-90deg);}
.accordion.active .arrow {transform: rotate(0deg);}
.accordion-header {cursor: pointer; display: flex; align-items: center; justify-content: space-between;}
.accordion-header .title {font-size: 23px;display: block;font-family: 'Otoiwo';font-weight: 900;}
.accordion.active .accordion-content {max-height: calc(100vh - 190px);overflow-y: auto;}
.accordion-content::-webkit-scrollbar {width: 2px;}
.accordion-content::-webkit-scrollbar-thumb {background-color: #ffffff;border-radius: 9em;box-shadow: inset 1px 1px 10px #ffffff;}
@media screen and (max-width: 960px) {
.accordion-header .title {font-size: 20px;}
.logoboss, #control_menu, #about, #quiz, .attribution {display:none;}
#sheet-textbot {bottom: auto;top: 22px;left: 22px;}
.right_bar{top:auto;bottom: 32px;width:100%;right:0;left:0;justify-content: space-between;flex-direction:row-reverse;padding:0 42px;z-index: 1;}
#search {background-color: #FBCD10; background-image: url(resources/icon/search-blue.svg?v2); width: 52px; height: 52px; border-radius: 50%; }
}
@media screen and (max-width: 560px) {
.navigation_scene {bottom: 20px;}
.accordion {width: 100%;}
#sheet-textbot {bottom: auto;top: 0;left: 0;right: 0;}
.right_bar{bottom: 22px;width:100%;right:0;left:0;justify-content: space-between;flex-direction:row-reverse;padding: 0 22px 0 32px;z-index: 1;}
#search {background-color: #FBCD10; background-image: url(resources/icon/search-blue.svg?v2); width: 52px; height: 52px; border-radius: 50%; }
.accordion.active .accordion-content {max-height: calc(100dvh - 54px);overflow-y: auto;}
}
@media screen and (max-width: 320px) {
.navigation_scene{bottom:12px;}
.right_bar{padding:0 16px 0 16px;bottom:16px;}
#menu{border-radius:50%;width:46px;height:46px;}
#search{width:46px;height:46px;background-size:26px;}
}