#helper {position: fixed;left:0;bottom: 0;background-color: #ffffff;height: 34px;display: none;align-items: center;justify-content: center;border-radius: 5px;z-index: 9;}
#helper span {display:block;font-family: Helvetica;font-size: 14px;font-weight: bold;line-height: 1.6;color: #000;text-align: center;margin: 0 14px;white-space: nowrap;}
#helper:before {content:'';display:block;position:absolute;width: 10px;height: 10px;background-color:#ffffff;transform: rotate(45deg);}

#helper.top-left:before {top: auto;bottom: -5px;left: 25px;}
#helper.top-center:before {top: auto; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);}
#helper.top-right:before {top: auto; bottom: -5px; right: 22px;}
#helper.bottom-left:before {bottom: auto; top: -5px; left: 20px;}
#helper.bottom-center:before {bottom: auto; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);}
#helper.bottom-right:before {bottom: auto; top: -5px; right: 20px;}
#helper.left:before {right: -5px; top: 50%; transform: translateY(-50%) rotate(45deg);}
#helper.right:before {left: -5px; top: 50%; transform: translateY(-50%) rotate(45deg);}

.bttn_base {position:absolute;width: 50px;height: 50px;background-color:#000000b2;background-color: #ffffff33;border-radius: 50%;z-index: 1;}
.bttn_base:hover {cursor: pointer;}

#flscrn {left: 32px;bottom: 26px;background-image: url(resources/icon/flscrn/on.svg);background-size: 22px;background-position: 50%;background-repeat: no-repeat;}
#flscrn.off {background-image: url(resources/icon/flscrn/off.svg);background-size: 22px;}

#info-button {left: 152px;background-image: url(resources/icon/info/mono-white.svg);background-size: 42px;background-position: 50%;background-repeat: no-repeat;bottom: 26px;}

#faq {left: 92px;background-image: url(resources/icon/faq/faq-white-normal.svg);background-size: 36px;background-position: 50%;background-repeat: no-repeat;bottom: 26px;}

#menu-button {position:absolute;width: 60px;height: 60px;background-color:#000000b2;background-color: #ffffff47;border-radius: 50%;z-index: 1;left: 32px;top: 32px;background-image: url(resources/icon/menu/menu.svg);background-size: 30px;background-position: 50%;background-repeat: no-repeat;transform: scaleX(-1);}
#menu-button:hover {cursor: pointer;}

#overlay_leftmenu {position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;background-color: rgba(0,0,0,0.7);z-index: 4;display:none;backdrop-filter: blur(2px);-webkit-backdrop-filter:blur(2px);}
#close_left_menu {background-image: url(resources/icon/menu/close-menu.svg);background-size: 42px;background-position: 50%;background-repeat: no-repeat;width: 42px;height: 42px;position: absolute;top: 8px;right: 8px;border-radius: 50%;}
#close_left_menu:hover {background-color: #ffffff57;cursor:pointer;}
#left_menu {transform: translateX(-400px);transition: transform 0.4s ease-out;color:#fff;position:fixed;z-index:4;top: 22px;left: 22px;background-color: #315049;width: 350px;overflow: hidden;padding: 22px 8px 16px 22px;border-radius: 12px;box-shadow: 0 0 8px 0 #00000061;}
#left_menu.open {transform: translateX(0px);}
#left_menu .topside .sign {font-family: 'e-UkraineHead-Regular';font-size: 14px;display: block;}
#left_menu .topside .title {font-family: Martian Mono;font-size: 20px;line-height: 1.3;padding: 8px 0 32px;margin-top: 12px;display: block;}
#left_menu .deco {background-color: #ffffffd1;width: calc(100% - 22px);height:1px;}
#left_menu .scroll {overflow-y: auto;padding-right: 22px;}
#left_menu .scroll::-webkit-scrollbar {width: 3px;}
#left_menu .scroll::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.5);border-radius: 3px;}
#left_menu ul {font-family: 'e-Ukraine-Light';font-size: 14px;line-height: 1.5;padding-bottom: 12px;}
#left_menu ul li {border-bottom: 1px dotted #ffffff6b;padding-bottom: 17px;padding-top: 17px;display: flex;justify-content: space-between;align-items: center;}
#left_menu ul li:last-child {border-bottom: none;}
#left_menu ul li span {display:block;width: calc(100% - 42px);}
#left_menu ul li span:hover {cursor:pointer;text-decoration:underline;}
#left_menu ul li:after {content:"";display: block;width: 28px;height: 28px;background-color: #416a61;border-radius: 50%;background-image: url(resources/icon/check/white.svg);background-size: 18px;background-position: center;background-repeat: no-repeat;opacity: 0;}
#left_menu ul li.check:after {opacity: 0.6;}
#left_menu ul li.home {padding-bottom: 16px;padding-top: 16px;}
#left_menu ul li.home:after {content:"";display: block;width: 30px;height: 30px;background-color: #416a61;border-radius: 50%;background-image: url(resources/icon/home/white.svg);background-size: 20px;background-position: center;background-repeat: no-repeat;opacity: 0.6;}
#left_menu .copy {font-family: 'e-Ukraine-Light';background-color: #40685f99;height: 34px;margin-bottom: 12px;margin-top: 10px;display: flex;align-items: center;justify-content: center;color: #ffffff87;border-radius: 4px;background: linear-gradient(#40685f99, #315049);font-size: 12px;}
#left_menu .copy a {color: #fff;text-decoration: none;}
#left_menu .copy a:hover {text-decoration: underline;}

/* - !!!!!!!!!!!! - - - 1010 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1010px) {
.bttn_base:hover {box-shadow: 0 0 0 2px #fff;}
#menu-button:hover {border: 2px solid #fff;}
}

/* 540px */
@media screen and (max-width: 540px) {
#menu-button {left: 18px;top: 18px;width: 46px;height: 46px;background-size: 22px;}
#flscrn {left: 18px;bottom: 18px;}
#info-button {bottom: 18px;left: 126px;}
#faq {bottom: 18px;left: 72px;}
.bttn_base {width: 46px;height: 46px;}
}


/*** 390px *******************/
@media screen and (max-width: 390px) {
#left_menu {left: 0; top: 0; height: 100%; border-radius: 0; width: 310px; overflow: visible;}
#close_left_menu {top: 8px;right: 4px;}
#close_left_menu:hover {background-color:transparent;}
#left_menu .topside .title {font-size: 21px; line-height: 1.4; margin-top: 16px; padding: 8px 0 22px;}
}

/* 360px */
@media screen and (max-width: 360px) {
#menu-button {left: 16px;top: 16px;}
#flscrn {left: 16px;bottom: 16px;}
#info-button {bottom: 16px;left: 124px;}
#faq {bottom: 16px;left: 70px;}
}