@font-face {
    font-family: 'TitleSQDB';
    src: url('/maps/images/Galderglynn1884SqDb-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'TitleSQLT';
    src: url('/maps/images/Galderglynn1884SqLt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'TitleSQRG';
    src: url('/maps/images/Galderglynn1884SqRg-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Corbel';
    src: url('/maps/images/CORBEL.TTF') format('truetype');
    font-weight: 400;
    font-style: normal;
}

body { margin:0; }
video { pointer-events:none; position: fixed; left: 0; top: 0; min-width: 100vw; min-height: 100vh; z-index:-1; }

#full-container { width:100%; padding-top:50px; }
#full-container > div { margin:0 auto; width:1650px; height:804px; position:relative; }

::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: none; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #7b7b7b; 
  border-radius:3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #6a6a6a; 
}

#step_list { transition:all 300ms ease; position: relative; left: -100vw; opacity:0; }
#step_list.opened { left: 0vw; opacity:1; }
#toolClosed { opacity:1; transition:all 300ms ease; position:fixed; top:0; left:0; width:100vw; height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; }
#toolClosed.opened { top:-100vh; opacity:0; }
#toolClosed img { width:25vw; }
#toolClosed p { text-align: center; font-family: Corbel; color: #ffffff; font-size: 1.7vw; font-weight: 100; margin: 0vw; }

.content-box { background:url(/maps/images/ui_mc.png); position:relative; margin:35px 10px 0 12px; }
.content-box.absolute { position:absolute; }
.content-box .tl { background:url(/maps/images/ui_tl.png); width:11px; height:36px; position:absolute; top:-35px; left:-10px; }
.content-box .tm { background:url(/maps/images/ui_tm.png); width:100%; height:36px; position:absolute; top:-35px; font-family:'TitleSQRG', sans-serif; color:#c6c6c6; font-size: 25px; line-height: 34px; text-shadow: 1px 1px 0px rgba(0,0,0,1); letter-spacing: 0.7px; }
.content-box .tr { background:url(/maps/images/ui_tr.png); width:13px; height:36px; position:absolute; top:-35px; right:-12px; }
.content-box .ml { background:url(/maps/images/ui_ml.png); width:11px; height:100%; position:absolute; top:0; left:-10px; }
.content-box .mr { background:url(/maps/images/ui_mr.png); width:13px; height:100%; position:absolute; top:0; right:-12px; }
.content-box .bl { background:url(/maps/images/ui_bl.png); width:11px; height:12px; position:absolute; bottom:-11px; left:-10px; }
.content-box .bm { background:url(/maps/images/ui_bm.png); width:100%; height:12px; position:absolute; bottom:-11px;  }
.content-box .br { background:url(/maps/images/ui_br.png); width:13px; height:12px; position:absolute; bottom:-11px; right:-12px; }
.content-box .content { line-height: 16px; padding: 0px 10px 8px 10px; position: relative; top:8px; font-family:Corbel; color:#ecddbf; text-shadow: 1px 1px 0px rgba(0,0,0,1); font-size:17px; }
.content-box .content.scrollable { overflow-y:auto; margin-right: 1px; }
.content-box .content .gray { color:#afafaf; }
.content-box .bar { background:url(/maps/images/ui_bar.png); width:100%; height:3px; margin-top:5px; margin-bottom:5px; }

#chatlog { display: flex; flex-direction: column-reverse; }
.content .msg { display:block; margin-bottom:2px; }
.content .msg.type_2105 { color:#afafaf; }
.content .msg.type_Party { color:#53c6e0; }
.content .msg.type_FreeCompany { color:#53c6e0; /*color:#87fff9;*/ }
.content .msg.type_62 { color:#e6b552; }

#gilamount { text-align:center; display:block; font-size:25px; }
#partyamount { text-align:center; display:block; font-size:25px; }
.content.flex { top:13px; display:flex; gap:10px; justify-content:center; align-items:center; }

#map { width:804px; height:804px; position: absolute; right: 0; top: 0; overflow:hidden; }
#map .marker { position:absolute; cursor:pointer; }
#map .location { width: 5px; height: 5px; border-radius: 10px; background: #418dff; border: 2px solid #0066ff; box-shadow: 0px 0px 10px rgb(7 209 255), 0px 0px 10px rgb(7 209 255); }
#map .locationContainer { width:1px; height:1px; position:absolute; top:calc(50% - 5px); left:calc(50% - 5px); background:none; }

.tmap { display:flex; justify-content:space-between; gap:0px; align-items:center; padding: 11px 0; }
.tmap > div:nth-child(2){ width:235px; }
.tmap > div:nth-child(2) .type { color:#e6b552; font-size:19px; }
.tmap > div:nth-child(2) .type.upcoming { color:#53c6e0; }
.tmap > div:nth-child(2) .name { font-size:18px; }
.tmap > div:nth-child(3){ width:200px; text-align:right; }
.tmap > div:nth-child(3) .zone { font-size:19px; }
.tmap > div:nth-child(3) .coord { font-size:20px; color:#afafaf; }
.tmap > div:nth-child(3) .coord > span { font-size:11px; position:relative; top:4px; }

#partyContent .partyMember { width:100%; margin-bottom:14px; margin-top:10px; }
#partyContent .partyMember:last-child { margin-bottom:0; }
#partyContent .partyMember > div { display:flex; gap:8px; }
#partyContent .partyMember > div img { width:28px; }
#partyContent .partyMember > div .name { display: block; margin-top: 5px; font-family: 'TitleSQRG', sans-serif; font-size: 25px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); letter-spacing: 0.7px; }
#partyContent .partyMember > div.bbar { width: 100%; height: 4px; margin-top: 5px; }
#partyContent .partyMember > div.bbar.hp { border: 1px solid #60a876; box-shadow: 0px 0px 5px #60a876; }
#partyContent .partyMember > div.bbar.hp > div { background:#60a876; }
#partyContent .partyMember > div.bbar.mp { border: 1px solid #a86088; box-shadow: 0px 0px 5px #a86088; }
#partyContent .partyMember > div.bbar.mp > div { background:#a86088; }

#map .flasher { width:27px; height:27px; position:absolute; top:-100px; left:-100px; }
#map .flasher div { position:relative; top:11px; left:13px; border-radius:200px; background:#ff2222; width:1px; height:1px; animation: zoomies 1.9s; animation-iteration-count: infinite; animation-timing-function: linear; }

@keyframes zoomies {
    0% { opacity: 1; transform:scale(0); }
    100% { opacity: 0; transform:scale(52); }
}