.header-bar {position: fixed;top: 0;left: 0;right: 0;width: 100%;background: rgb(0 0 0 / 50%);padding: 14px 32px;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: space-between;z-index: 2;}

.hdrb-button-menu {display: flex;align-items: center;width: 25%;}
.hdrb-button-menu:hover {cursor:pointer;}
.hdrb-button-menu:hover.hdrb-button-menu span {text-decoration:underline;}
.hdrb-button-menu span {color: #ffffff;font-family: 'e-Ukraine-Bold';font-size: 20px;line-height: 1;display: block;margin-left: 12px;}
.hdrb-button-menu img {width: 22px;}

.hdrb-search {align-items: center;width: 25%;display: flex;justify-content: flex-end;}
.hdrb-search:hover {cursor:pointer;}
.hdrb-search:hover.hdrb-search span {text-decoration:underline;}
.hdrb-search span {color: #ffffff;font-family: 'e-Ukraine-Bold';font-size: 20px;line-height: 1;margin-right: 10px;}
.hdrb-search img {width: 26px;}

.hdrb-floor {width: 50%;display: flex;justify-content: center;}
.hdrb-floor span {color: #ffffff;font-family: 'NAMU';font-size: 22px;line-height: 22px;text-align: center;text-transform: uppercase;display: block;margin-top: -4px;font-weight: bold;}
.hdrb-floor span:hover {cursor:pointer;text-decoration:underline;}
.hdrb-floor .container {display: none;align-items: center;width: 258px;justify-content: space-between;align-items: center;}
.hdrb-floor .container.active {display: flex;/* align-items: center; */}

.hdrb-floor .prev{background-image: url(resources/icon/prev-bold-white.svg);}
.hdrb-floor .next{background-image: url(resources/icon/next-bold-white.svg);}
.hdrb-floor .prev, .hdrb-floor .next {width: 20px;height: 20px;background-position: 50%;overflow: hidden;background-repeat: no-repeat;background-size: 13px;}
.hdrb-floor .prev:hover, .hdrb-floor .next:hover {cursor:pointer;}

.hdrb-floor .prev.disbld {opacity:0.5}
.hdrb-floor .prev.disbld:hover {cursor:default;}
.hdrb-floor .next.disbld {opacity:0.5}
.hdrb-floor .next.disbld:hover {cursor:default;}


#overlay_search {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);}

.search-container {position: fixed;top: 0;z-index: 4;right: -350px;width: 290px;background: rgb(0 0 0 / 85%);height: 100%;color: #fff;padding: 22px 22px 12px 22px;/* overflow: hidden; */transition: right 0.3s ease-out;-webkit-transition: right 0.3s ease-out;-moz-transition: right 0.3s ease-out;-o-transition: right 0.3s ease-out;}
.search-container .title span {font-size: 20px;font-family: 'e-Ukraine-Bold';line-height: 1;margin-left: 6px;}
.open-search-box {right:0;transition: right 0.3s ease-out;-webkit-transition: right 0.3s ease-out;-moz-transition: right 0.3s ease-out;-o-transition: right 0.3s ease-out;}

#close-search {cursor:pointer;position: absolute;top: 0px;left: -50px;background-color: rgb(0 0 0 / 90%);width: 50px;height: 54px;display: flex;align-items: center;justify-content: center;padding: 16px;}
#close-search:hover img {transform: scale(1.1);}

#search-author {margin-top: 28px;margin-bottom: 4px;border-style: none;border: none;padding: 10px;width: 226px;background: #2a2a2a;font-family: 'e-Ukraine-Light';font-size: 12px;color: #9d9d9d;border-radius: 5px;}
#search-author::placeholder {color: #9d9d9d;font-family: 'e-Ukraine-Light';font-size: 12px;}

.author-box {border-top: 1px solid #353535;margin-top: 16px;padding-top: 20px;}
.author-box  ul {height: calc(100vh - 160px);overflow-y: scroll;list-style: none;margin: 0px 0 0px 0;padding: 0px 0 0 0;font-size: 13px;font-family: 'e-Ukraine-regular';}
.author-box  ul li {list-style: none;margin: 4px 6px 0 0;padding: 8px 10px 8px 10px;cursor:pointer;display: -webkit-box;display: -webkit-inline-box;overflow: hidden;/* -webkit-line-clamp: 2; *//* -webkit-box-orient: vertical; */display: block;line-height: 1.4;border-radius: 5px;}
.author-box  ul li:first-child {margin: 0 6px 0 0;}
.author-box  ul li:hover {cursor:pointer;background-color:#383838;}
.author-box  ul::-webkit-scrollbar {width: 3px !important;height: 5px !important;}
.author-box  ul::-webkit-scrollbar-thumb {background-color: #606060;border-radius: 5px;border: none;display:block;}

.author-box  ul li.nohover {cursor:default;background-color:transparent;}



/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* MOBILE DOWN  ------------------------------ */

/*** 1030px  (!!!! for 1024) *******************/
@media screen and (max-width: 1030px) {
.hdrb-floor span:hover {cursor: default;text-decoration: none;}
.header-bar {padding: 14px 22px;}
.hdrb-search:hover.hdrb-search span {cursor: default;text-decoration:none;}
}

/*** 770px (!!!! for 768) *******************/
@media screen and (max-width: 770px) {
}

/* 760px */
@media screen and (max-width: 760px) {
.hdrb-button-menu span, .hdrb-search span {display:none;}
}

/*** 642px (!!!! for 640) *******************/
@media screen and (max-width: 642px) {
.header-bar {/* display: flex; */}
.hdrb-floor .container {/* width: auto; */}
.hdrb-floor {
    width: auto;
}
.hdrb-button-menu {
    width: 30px;
}
.hdrb-search {
    width: 30px;
}
}

/* 520px */
@media screen and (max-width: 520px) {
}


/*** 482px (!!!! for 480) *******************/
@media screen and (max-width: 482px) {
.hdrb-floor .container {width: 234px;}
.hdrb-floor span {font-size: 20px; line-height: 20px; margin-top: -5px;}
}

/* 440px */
@media screen and (max-width: 440px) {
.hdrb-floor .container {justify-content: center;}
.hdrb-floor .prev, .hdrb-floor .next {display: none;}
}


/*** 432px (!!!! for 424/428/430) *******************/
@media screen and (max-width: 432px) {

}

/*** 390px ***********************/
@media screen and (max-width: 390px) {
.header-bar {
    padding: 14px 20px;
}
}

/*** 377px (!!!! for 375) ***********************/
@media screen and (max-width: 377px) {

}

/*** 362px (!!!! for 360) ***********************/
@media screen and (max-width: 362px) {
.header-bar {
    padding: 12px 16px;
}
.hdrb-floor span {font-size: 18px;
    line-height: 18px;
    margin-top: -3px;}
.hdrb-button-menu img {width: 20px;}
.hdrb-search img {width: 22px;}

#close-search {
    background-color: transparent;
    top: 6px;
    left: -57px;
    padding: 12px;
}
}

/*** 358px (!!!! for 358px) ***********************/
@media screen and (max-width: 358px) {
#close-search {
    background-color: transparent;
    top: 6px;
    left: -57px;
    padding: 12px;
}
}

/*** 343px (!!!! for 342) ***********************/
@media screen and (max-width: 343px) {
}


/*** 324px (!!!! for 320) ***********************/
@media screen and (max-width: 324px) {
.search-container {width: 276px;padding: 22px 18px 12px 18px;}
#search-author {width: 218px;}
#close-search {
    top: 5px;
    left: -46px;
    padding: 15px;
}
}