.static-links {
  position: fixed;
  right: 0;
  top: 200px;
  z-index: 22;
  width: 50px;
}
.static-links .static-link-label { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.static-links .static-link { background-color:#FF9E00; width:50px; height:50px; display:block; margin:0 0 0.5rem 0; }
#feedback-opener { background: #FF9E00 url(../images/icon-email.svg) 6px 11px no-repeat; background-size: 42px auto; }
#tutorial-opener { background: #FF9E00 url(../images/icon-play.svg) 6px 11px no-repeat; background-size: 42px auto; }
#hallplan-opener { background:#FF9E00 url(../images/icon-map.svg) 2px 0px no-repeat; background-size:50px auto; }
#ai-opener { background:#FF9E00 url(../images/Icon_AI-Stars-2.svg) 2px 0px no-repeat; background-size:50px auto; }

@media (max-width:460px) {
.static-links { width: 30px; }
.static-links .static-link { background-color:#FF9E00; width:30px; height:30px; display:block; margin:0 0 0.5rem 0; }
#feedback-opener { background: #FF9E00 url(../images/icon-email.svg)  1px 6px no-repeat; background-size: 30px auto; }
#tutorial-opener { background: #FF9E00 url(../images/icon-play.svg)  1px 6px no-repeat; background-size: 30px auto; }
#hallplan-opener { background:#FF9E00 url(../images/icon-map.svg) -2px -3px  no-repeat; background-size:35px auto; }
#ai-opener { background:#FF9E00 url(../images/Icon_AI-Stars-2.svg) -2px -3px no-repeat; background-size:35px auto; }
}

.chat-active  .static-links { width: 30px; }
.chat-active    .static-links .static-link { background-color:#FF9E00; width:30px; height:30px; display:block; margin:0 0 0.5rem 0; }
.chat-active    #feedback-opener { background: #FF9E00 url(../images/icon-email.svg)  1px 6px no-repeat; background-size: 30px auto; }
.chat-active    #tutorial-opener { background: #FF9E00 url(../images/icon-play.svg)  1px 6px no-repeat; background-size: 30px auto; }
.chat-active    #hallplan-opener { background:#FF9E00 url(../images/icon-map.svg) -2px -3px  no-repeat; background-size:35px auto; }
.chat-active    #ai-opener { background:#FF9E00 url(../images/Icon_AI-Stars-2.svg) -2px -3px  no-repeat; background-size:35px auto; }

.meta-box { position:absolute; right: 0; top:2.4rem;  font-size:1.8rem; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }

.live .meta-box { top: 4.4rem; }
.scroll-box .meta-box { top: 0.5rem; }
.countdown .meta-box { top:2.4rem; }
.metasearch {border: 1px solid #fff; border-radius: 30px; height: 45px;  padding: 0.5rem 5rem 0 1rem; color:#fff;}

.topic-navi { padding:0; position: static;}
.topic-navi .filter-box { position: absolute; display:none; }
.filter-box .form-row { width:100%; }
.filter-box .call-to-action:hover { background-color:#fff; color:#000; }
.topic-filter.active + .filter-box {
display:block;
top: 85px;
right: 0;
min-width: 160px;
background-color: #000;
padding: 2rem 1rem 1rem 1rem;
border: 0;
z-index: 2;
border:1px solid #fff;
width:200%;
height: 100vh;
max-width:calc(100vw - 6rem);
height: calc(100vh - 200px);
overflow: hidden;
}

.filter-box .field-item { width: calc(100% - 1rem); color:#fff; margin:1rem 0.5rem; min-height: 30px; }
.topic-filter { background-color: #000; color:#fff; border-radius:35px; border:1px solid #fff;}

.filter-box #topic-search-form {
  display: inline-block;
  width: 100%;
  max-height: calc(100vh - 250px);
  overflow: auto;
  margin-bottom: 5rem;
  position: static;
}
.filter-box #topic-search-form .button-box { position: absolute; bottom:2rem; right:2rem; }
.filter-box #topic-search-form .button-box .button.call-to-action {
  background-color: #FF9E00 !important;
  border-color: #FF9E00 !important;
  color: #fff !important;
}
.topic-search {
  min-width: inherit;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  border:1px solid #fff;
  position: absolute;
  top: 3px;
  padding: 0;
  right: 3px;
}
.topic-search:hover { background-color:#FF9E00; border-color:#FF9E00; }
.topic-search span { transform: rotate( 45deg);
display: block;
position: absolute;
border-width: 2px 2px 0 0;
border-color: #fff;
border-style: solid;
width: 10px;
height: 10px;
top: calc(50% - 5px);
left: calc(50% - 5px);
}

.filter-box #topic-search-form .button-box { z-index:11; }
#topic-search-form div:empty { display:none; }
@media (min-width:960px) {
.topic-filter.active + .filter-box {
height: auto;
max-height:inherit;
}
.filter-box #topic-search-form { height:calc(100% - 50px; )}

}


@media (max-width:660px) {
  .filter-box #topic-search-form .button-box { bottom: inherit; top: calc(100% - 68px);}
  .filter-box #topic-search-form { height: calc(100vh - 310px); }
  .topic-filter.active + .filter-box { height: calc(100vh - 200px); }
}

@media (max-width:790px) {
@supports (-webkit-touch-callout: none) {
  .filter-box .field-item { margin:1rem 0.5rem 0 0.5rem; }
    .filter-box #topic-search-form  { height: calc(100vh - 210px);  border:1px solid #000; padding-bottom:60px; }
    .filter-box #topic-search-form .button-box { bottom: inherit; top: calc(100% - 72px); background-color:#000; width:100%; text-align:right; }
    .filter-box label.checkbox-label { font-size:1.3rem; line-height:1; }
  }
@supports (height: -webkit-fill-available) {
  .filter-box .field-item { margin:1rem 0.5rem 0 0.5rem; }
.filter-box #topic-search-form  { height: calc(100vh - 210px); border:1px solid #000; padding-bottom:60px; }
  .filter-box #topic-search-form .button-box { bottom: inherit; top: calc(100% - 72px); background-color:#000; width:100%; text-align:right; }
.filter-box label.checkbox-label { font-size:1.3rem; line-height:1; }
}
}

.meta-box .matchmaking-navi-box { margin: 0 0 0 3rem; }

.matchmaking-navi-box .call-to-action:hover { background-color:#fff; color:#FF9E00; }
.matchmaking,
.agenda,
.chat  { background-color:transparent!important;  color:#fff; border:1px solid transparent; padding:1rem; }
.matchmaking { max-width:60px; min-width:60px; margin-right: 1rem;}
.chat  { max-width:inherit; min-width:inherit; margin:0 0 0 2rem;}
.agenda:hover,
.chat:hover { color:#FF9E00;}
.chat-label { padding-right: 1rem; }
.matchmaking:hover  svg path { fill:#FF9E00; }
.matchmaking-icon { width:35px; height:45px; position: relative; z-index:1; }
.matchmaking-icon svg { width: auto; height: 52px; margin-top:0; }
.matchmaking-counter {position: absolute; right: 0; z-index: 11; text-align: center; width: 100%;}
.agenda-counter { display:inline-block; margin: 0 0 0 1.5rem; position: relative;}
.agenda-counter::before {
  content: '';
  display: block;
  top: -11px;
  right: -12px;
  width: calc(100% + 22px);
  height: 40px;
  border: 1px solid #fff;
  border-radius: 7px;
  position: absolute;
  z-index:-1;
}
.agenda:hover .agenda-counter { color:#fff!important; }
.agenda:hover .agenda-counter::before { background-color:#FF9E00;}

.meta-box .user-box { margin: 0 0 0 3rem; display:block; position:relative; }
.meta-box .user-box button {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
width: 50px;
height: 50px;
/* border-radius: 10%; */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border: 0;
padding: 0;
/* border:1px solid #fff; */
background-color: #000;
min-width: inherit;
}

.meta-box .user-box button.active {
  background-color: #ff9300;
  border-radius: 10%
}

.user-profile-navi  {
display: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
position: absolute;
top: 85px;
right: 0;
min-width: 160px;
background-color: #000;
padding: 2rem 1rem 1rem 1rem;
border: 0;
z-index: 2;
border:1px solid #fff;
}
.user-profile-navi a { color: #fff; display: block; position: relative; margin: 0 0 0.5rem 0; text-decoration: none;}
.user-profile-navi a:hover { color: #FF9E00; }
button.user-profile.active + .user-profile-navi  { display:block; }
.scroll-box .user-profile-navi  { top:68px; }
.scroll-box .meta-box .user-box button {  }

.user-profile-navi .call-to-action,
.user-profile-navi .topic-navi { display:none; }


@media (min-width:980px) {
.meta-box .user-box button:hover {
  background-color: #ff9300;
  border-radius: 10%
}
.filter-box .field-item { width: calc(50% - 1rem); color:#fff; margin:0.5rem}
}


@media (max-width:980px) {
.meta-box,
.live .meta-box,
.scroll-box .meta-box { top: 0.5rem; }
.countdown .login-home  .meta-box { top:2.4rem; }
.meta-box .matchmaking-navi-box { margin-left:0; }
.topic-navi { margin: 0 1rem 0 0; }
.chat { margin: 0 0 0 1rem; }
}

@media (max-width:860px) {
.meta-box,
.scroll-box .meta-box {  }
.metasearch { max-width:200px; }
.meta-box .user-box { margin:0; }
.meta-box .matchmaking-navi-box { margin: 0 0 0 1.5rem; }
.user-profile-navi .call-to-action { display:block; margin:0 0 2rem 0; }
.user-profile-navi .call-to-action:hover { background-color:#fff; color:#FF9E00; }
.user-profile-navi { min-width:260px; }
#notification-opener { top: 3px; }
#notification-opener .matchmaking-counter { top: 18px;}
.meta-box .matchmaking-navi-box .matchmaking { margin-right: 2rem; }
.matchmaking-navi-box .call-to-action { font-size: 1.4rem; padding: 1rem; min-width: auto;  }
.agenda { padding: 1rem; font-size: 1.4rem;   min-width: auto; }
.meta-box .matchmaking-navi-box,
.topic-navi { margin: 0; }
/*.topic-navi { display:none;  }*/
.user-profile-navi .topic-navi { margin:0 0 1rem 0;display:block;  }

.user-profile-navi .metasearch { max-width: 100%; }
.user-box .user-profile-navi .topic-search { height: 38px; width: 38px; }

.topic-filter {
max-width: 40px;
min-width: inherit;
padding: 0;
max-height: 40px;
background-image: url('../images/icon-search-white.svg');
background-repeat: no-repeat;
background-size: 22px auto;
background-position: center center;
height: 40px;
width: 40px;
}
.topic-filter:hover { background-color:#FF9E00; }
.topic-label { display:none; }
.matchmaking-icon svg { height: 45px; }
.agenda-counter::before { height:35px; }
.meta-box .user-box { margin:0 0 0 1rem }
.meta-box .user-box button { width:40px; height:40px; }
}

@media (max-width:560px){
.agenda { display:none; }
}

@media (max-width:380px) {
.meta-box .user-box { margin: 0 0 0 1rem; }
.meta-box .user-box button { width: 32px; height: 32px; top: 2px;}
.meta-box, .live .meta-box, .scroll-box .meta-box { top: 0; }
.matchmaking-navi-box .call-to-action { font-size: 1.2rem; padding: 0.8rem;   min-width: auto; top: 0.2rem; }
.matchmaking { padding-bottom:0; }
.matchmaking-icon svg { width: auto; height: 37px; margin-top: 1px; }
#notification-opener { margin-right: 10px; padding-left: 0.5rem; top:1px;}
.matchmaking-counter { top:16px; }
.topic-filter { width:33px; height:33px; margin-top:3px; background-size: 18px auto; }
.matchmaking-navi-box .button.call-to-action:hover { background-color:#fff !important; color:#FF9E00!important;}
}


@media (max-width:330px) {
.user-profile-navi { width: calc(100vw - 4rem); min-width:inherit;}
.topic-filter.active + .filter-box { max-width:calc(100vw - 2rem)}
}

/* Chat Active */
.chat-active .topic-filter.active + .filter-box  { max-width: calc(100vw - 450px); }

@media (min-width:920px) and  (max-width:1300px) {
.chat-active .topic-filter.active + .filter-box {max-width: calc(100vw - 46rem);}
.chat-active .metasearch { max-width:200px; }
.chat-active .meta-box .user-box { margin:0; }
.chat-active .meta-box .matchmaking-navi-box { margin: 0 0 0 1.5rem; }
.chat-active .user-profile-navi .call-to-action { display:block; margin:0 0 2rem 0; }
.chat-active .user-profile-navi .call-to-action:hover { background-color:#fff; color:#FF9E00; }
.chat-active .user-profile-navi { min-width:260px; }
/*.chat-active #notification-opener { margin-right:0; }*/
.chat-active .matchmaking-navi-box .call-to-action { font-size: 1.4rem; padding: 1rem; min-width: auto;  }
.chat-active .agenda { padding: 1rem; font-size: 1.4rem;   min-width: auto; }
.chat-active .meta-box .matchmaking-navi-box,
.chat-active .topic-navi { margin: 0; }
/*.topic-navi { display:none;  }*/
.chat-active .user-profile-navi .topic-navi { margin:0 0 1rem 0;display:block;  }

.chat-active .user-profile-navi .metasearch { max-width: 100%; }
.chat-active .user-box .user-profile-navi .topic-search { height: 38px; width: 38px; }

.chat-active .topic-filter {
max-width: 40px;
min-width: inherit;
padding: 0;
max-height: 40px;
background-image: url('../images/icon-search-white.svg');
background-repeat: no-repeat;
background-size: 22px auto;
background-position: center center;
height: 40px;
width: 40px;
}
.chat-active .topic-filter:hover { background-color:#FF9E00; }
.chat-active .topic-label { display:none; }
.chat-active .meta-box .user-box { margin:0 0 0 1rem }
}