@font-face{font-family:'InterVariable';src:url(/assets/fonts/inter/variable/inter_variable.ttf) format("truetype")}

*,::before,::after{box-sizing:border-box}
html,body{height:100%;overflow:auto}

body{background:#fff;line-height:1.5;font-family:'InterVariable',sans-serif;font-variation-settings:'wght' 400,'slnt' 0;display:flex;flex-direction:column;color:#111}
.titlebox{padding:8px;display:flex;flex-direction:column;align-items:center;background:#2d394e}
.title{color:#a6a6a6;text-transform:uppercase}
.place{color:#eee}
.place i{margin-right:2px;color:#4394c6}
.menu{display:flex;padding:8px;background:#2d394e;justify-content:center;margin:0}
.menu li{list-style:none;border-right:1px solid #666}
.menu li:last-child{border-right:none}
.menu li a{color:#bebebe;padding:4px 12px;text-decoration:none}
.menu li a.active,.menu li a.active:hover{color:#eee}
.menu li a i{margin-right:4px;color:#4394c6}

.tabs{display:flex;gap:4px;margin-bottom:16px;width:100%;max-width:450px}
.tab{flex:1;text-align:center;padding:6px;cursor:pointer;background-color:#f8f9fa;border:1px solid #ddd;transition:background-color .5s ease;border-radius:4px}
.tab.active{color:#fff;background-color:#445262;border-color:#445262;font-variation-settings:'wght' 500}