#control {position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; z-index: 999999; opacity: 0;transition: opacity 0.2s ease-out; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out;}
#control.hide {display:none;}
#control.show {opacity: 1;transition: opacity 0.2s ease-out;-webkit-transition: opacity 0.2s ease-out;-moz-transition: opacity 0.2s ease-out;-o-transition: opacity 0.2s ease-out;}
#control .baffle {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: #0000002e; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}

#control .wrap {position: absolute;width: 690px;height: 450px;background-color: #315049;color:#fff;border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding:32px;overflow: hidden;z-index: 2;}
#control .title{font-family: 'e-UkraineHead-Regular';font-size: 20px;text-align:left;width:100%;}
#control .title span {border-bottom: 1px solid #ffffffb3;width: 160px;padding-bottom: 12px;}
#control .wrap .tab {display: none;width: 100%;height: 100%;flex-direction: column;justify-content: flex-start;align-items: center;text-align: center;margin-top: 42px;}
#control .wrap .tab span {font-family: 'e-Ukraine-Light';font-size: 16px;line-height: 1.6;margin-top: 36px;max-width: 480px;}
#control .wrap .tab.active {display: flex;}
#control .img {height: 160px;width: 160px;}
#control .img.circle {border: 4px solid #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
#control .img img {height: 100%;display: block;}
#control .img.circle img {opacity: 0.95;height: 96px;}
#control .img.circle.edit img {margin-top: -15px;}

#control .nav-btn {background-image: url(resources/icon/chevron/left-white-normal.svg);background-size: 40px;background-position: 50%;background-repeat: no-repeat;width: 60px;height: 60px;border-radius: 50%;position: absolute;top: 50%;transform: translateY(-50%);border: none;cursor: pointer;user-select: none;margin-top: -12px;}
#control .nav-btn.left {left: 18px;}
#control .nav-btn.right {right: 18px;transform: scaleX(-1) translateY(-50%);}
#control .nav-btn:hover {background-color: #395c54;}

#control .dots {display: flex;gap: 12px;}
#control .dot {width: 14px;height: 14px;border-radius: 50%;border:1px solid #fff;}
#control .dot.active {background: #fff;}
#control .dot:hover {cursor: pointer;background: #fff;}

#control .close-btn {background-image: url(resources/icon/menu/close-menu.svg);background-size: 42px;background-position: 50%;background-repeat: no-repeat;width: 50px;height: 50px;position: absolute;top: 16px;right: 18px;border-radius: 50%;}
#control .close-btn:hover {background-color: #436c63;cursor:pointer;}

.touchevents #control .wrap .tab .desktop {display:none;}
.no-touchevents #control .wrap .tab .mobile {display:none;}
.touchevents #control .wrap .tab .mobile {display:block;}


/* 1030px */
@media screen and (max-width: 1030px) {
#control .nav-btn:hover, #control .close-btn:hover {background-color:transparent;}
}

/* 760px */
@media screen and (max-width: 760px) {
#control .wrap {width: calc(100% - 64px);}
}

/* 540px */
@media screen and (max-width: 540px) {
#control .wrap {width: calc(100% - 44px);padding: 24px 24px 26px 24px;height: 430px;}
#control .close-btn {top: 9px;right: 9px;}
#control .nav-btn.left {left: 5px;}
#control .nav-btn.right {right: 5px;}
#control .wrap .tab span {max-width: 310px;}
#control .img {height: 140px;width: 140px;}
#control .img.circle img {height: 72px;}
#control .dots {gap: 16px;}
#control .dot {width: 12px;height: 12px;}
}

/* 440px */
@media screen and (max-width: 440px) {
#control .wrap .tab span {max-width: none;width: calc(100% - 66px);margin-top: 30px;}
#control .img {height: 120px;width: 120px;}
#control .img.circle img {height: 60px;}
#control .img.circle.edit img {margin-top: -7px;}
#control .img .mobile {margin-left: -6px;}
}

/* 360px */
@media screen and (max-width: 360px) {
#control .title {font-size: 16px;}
#control .wrap {height: 380px;}
#control .close-btn {}
#control .nav-btn.left {}
#control .nav-btn.right {}
#control .wrap .tab span {font-size: 14px;margin-top: 36px;}
#control .img {height: 90px;width: 90px;}
#control .img.circle img {height: 46px;}
#control .img.circle {border: 3px solid #fff;}
#control .nav-btn {width: 50px; height: 50px; background-size: 34px;}
}

/* 340px */
@media screen and (max-width: 340px) {
#control .wrap {padding: 22px 24px 26px 24px;}
#control .close-btn {top: 4px;right: 4px;}
#control .wrap .tab span {width: calc(100% - 46px);}
}