.header-bar {position: fixed;top: 0;left: 0;right: 0;width: 100%;padding: 8px 32px 0;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;}
.hdrb-button-menu:hover {cursor:pointer;}
.hdrb-button-menu:hover.hdrb-button-menu span {text-decoration:underline;}
.hdrb-button-menu img {width: 36px;}
.hdrb-search {align-items: center;display: flex;justify-content: flex-end;}
.hdrb-search:hover {cursor:pointer;}
.hdrb-search:hover.hdrb-search span {text-decoration:underline;}
.hdrb-search img {width: 36px;}
.hdrb-logo {width: 170px;margin-top: 8px;}
.hdrb-logo img {width:100%;}

#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: -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', sans-serif;font-weight: 700;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: 6px;left: -50px;background-color: rgb(0 0 0 / 85%);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', sans-serif;font-weight: 300;font-size: 12px;color: #9d9d9d;border-radius: 5px;}
#search-author::placeholder {color: #9d9d9d;font-family: 'e-Ukraine', sans-serif;font-weight: 300;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', sans-serif;font-weight: 400;}
.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;}


/*** 1030px  (!!!! for 1024) *******************/
@media screen and (max-width: 1030px) {
.header-bar {padding: 14px 22px;}
}

/*** 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) {}

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


/*** 482px (!!!! for 480) *******************/
@media screen and (max-width: 482px) {
.hdrb-search img {width: 32px;}
.hdrb-button-menu img {width: 32px;}
.hdrb-logo {width: 140px; margin-top: 4px;}
}

/* 440px */
@media screen and (max-width: 440px) {
#close-search {background-color: transparent;top: 26px;left: -44px;padding: 0;width: 26px;height: auto;}
}


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

}

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

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

/*** 362px (!!!! for 360) ***********************/
@media screen and (max-width: 362px) {
.header-bar {padding: 12px 16px;}
.hdrb-search img {width: 30px;}
.hdrb-logo {width: 130px;}
#close-search {top: 24px;left: -30px;width: 22px;}
.search-container {width: 270px;padding: 22px 18px 12px 18px;}
#search-author {width: 206px;}
}

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

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


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