:root{
  --page-width: 1360px;
  --left-col: 160px;
  --center-col: 1030px;
  --right-col: 170px;
  --paper: url('../images/3.png');
  --top-art: url('../images/2.png');
  --fluxo-logo: url('../images/5.png');
  --topbar-green: url('../images/topbar-green.png');
  --leftmenu-beige: url('../images/profilebg2.png');
  --rightpanel-beige: url('../images/profilebg3.png');
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }

body{
  font-family: Arial, Helvetica, sans-serif;
  background:#d9c7a1;
  color:#40281b;
  min-width:1420px;
}

a{ color:inherit; }

.page{
  width:min(var(--page-width), calc(100vw - 40px));
  min-width:var(--page-width);
  margin:0 auto;
  background:transparent;
}

.topbar{
  position:relative;
  height:85px;
  overflow:visible;
  background:#083f42;
  z-index:20;
}

.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--top-art) top center / 100% 100% no-repeat;
  z-index:0;
}


.logo{
  position:absolute;
  left:2px;
  top:8px;
  width:154px;
  height:94px;
  z-index:8;
  overflow:visible;
  pointer-events:auto;
}

.logo::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--fluxo-logo) no-repeat left top;
  background-size:100% auto;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.16));
}

.login-row{
  position:absolute;
  left:160px;
  right:180px;
  top:13px;
  z-index:3;
  color:#fff;
  font-family:Georgia, "Times New Roman", serif;
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  white-space:nowrap;
}

.user-links{
  display:flex;
  align-items:center;
  gap:10px;
}

.online-count{ font-size:15px; }
.find-label{ margin-left:2px; }

.login-row a{
  text-decoration:none;
  color:#fff;
}

.inline-login,
.logout-inline,
.top-search-form{
  display:inline;
}

.login-row input[type="text"],
.login-row input[type="password"],
.profile-jump{
  height:22px;
  margin:0 4px 0 2px;
  border:1px solid #5f9a90;
  background:rgba(0,0,0,.35);
  color:#fff;
  outline:none;
  vertical-align:middle;
  font-size:11px;
  padding:0 5px;
}

.inline-login input[type="text"],
.inline-login input[type="password"]{
  width:76px;
}

.top-search-form input[type="text"]{
  width:88px;
  margin:0;
  border-top:0;
  border-left:0;
  border-right:0;
  background:transparent;
  padding:0 0 1px;
}

.login-btn,
.logout-inline button{
  display:inline-block;
  padding:3px 8px 4px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28);
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  vertical-align:middle;
  cursor:pointer;
}

.profile-jump-wrap{
  position:absolute;
  right:10px;
  top:10px;
  z-index:4;
}

.profile-jump{
  width:178px;
  height:31px;
  border:3px solid rgba(240,240,240,.75);
  background:#004f46;
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:3px 6px;
  box-shadow:0 1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
}

.profile-jump option{
  color:#111;
  background:#fff;
}

.nav{
  position:absolute;
  left:148px;
  right:6px;
  bottom:0;
  z-index:3;
  display:flex;
  gap:3px;
  align-items:end;
  height:31px;
}

.nav a{
  flex:1 1 auto;
  min-width:106px;
  max-width:122px;
  height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-transform:uppercase;
  font-size:10px;
  font-weight:700;
  color:#fff;
  border-radius:8px 8px 0 0;
  border:1px solid rgba(0,0,0,.32);
  border-bottom:none;
  background:rgba(8,114,115,.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 14px rgba(0,0,0,.12);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

.nav a:hover,
.nav a:focus-visible{
  background:rgba(18,145,146,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -10px 14px rgba(0,0,0,.08),
    0 0 10px rgba(172,233,225,.16);
}

.nav a:not(.active):hover,
.nav a:not(.active):focus-visible{
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.28);
}

.nav a.active{
  background:#efe5d3;
  color:#181818;
  text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  border-color:#a39174;
}

.layout{
  display:grid;
  grid-template-columns:var(--left-col) var(--center-col) var(--right-col);
  gap:0;
  align-items:stretch;
}

.left,
.right{
  position:relative;
  min-height:1110px;
  overflow:hidden;
}

.left::before,
.right::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--paper);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center top;
  z-index:0;
  pointer-events:none;
}

.page-profile .left::before,
.page-profile .right::before{
  background-image:var(--paper);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center top;
}

.left > *,
.right > *{
  position:relative;
  z-index:1;
}

.left{
  border-right:1px solid rgba(121,83,44,.15);
}

.right{
  border-left:1px solid rgba(121,83,44,.1);
  padding-top:8px;
}

.left-top{
  height:36px;
  position:relative;
}

.left-menu{
  padding:0 4px 0 2px;
}

.left-menu a{
  display:block;
  margin:0 0 8px 0;
  padding:1px 6px 1px 10px;
  color:#8a251a;
  text-transform:uppercase;
  font-family:"Arial Black", Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight:900;
  line-height:1;
  letter-spacing:-0.35px;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.32);
  text-decoration:none;
  transition:background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.left-menu a:hover,
.left-menu a:focus-visible{
  background:rgba(255,248,230,.78);
  color:#9a2619;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  outline:none;
}

.left-fill{
  height:760px;
  position:relative;
}

.left-ad{
  position:absolute;
  left:16px;
  top:18px;
  width:70px;
  height:160px;
  border:1px solid #9f8b6f;
  background:linear-gradient(180deg, #161616, #46372b 58%, #0f0f0f);
  color:#e8d6b4;
  font-family:Georgia, "Times New Roman", serif;
  font-size:11px;
  text-align:center;
  padding-top:10px;
  line-height:1.05;
  font-weight:700;
}

.center{
  position:relative;
  min-height:1110px;
  border-left:1px solid #dfccb1;
  border-right:1px solid #d8c4a5;
  background:var(--paper) center top / 100% 100% no-repeat;
}

.search{
  width:calc(100% - 24px);
  height:10px;
  margin:8px 12px 14px;
  border:1px solid #d0c3af;
  background:#fff;
  box-shadow:inset 0 0 0 1px #ece7df;
}

.sidebox{ margin:0 12px 12px; }

.flash-message{
  margin:8px 8px 0;
  padding:10px 12px;
  border:1px solid #cda774;
  font-size:12px;
  font-weight:700;
  background:rgba(255,248,232,.88);
  color:#7d4227;
}

.flash-message.error{
  background:rgba(255,234,234,.92);
  border-color:#d59b9b;
  color:#842323;
}

.login-error{
  display:inline-block;
  margin-left:8px;
  color:#ffd2d2;
  font-weight:700;
}

@media (min-width:1400px){
  .page{
    transform:scale(1.05);
    transform-origin:top center;
    margin-bottom:70px;
  }
}


.page-profile .layout{
  grid-template-columns:var(--left-col) var(--center-col) var(--right-col);
}

.page-profile .center{
  grid-column:auto;
}

.page-profile .right{
  display:block;
}





.page-profile .right{
  min-height:1220px;
}

.page-profile .search{
  width:calc(100% - 22px);
  margin:8px 11px 18px;
}

.page-profile .sidebox{
  margin:0 10px 12px;
}


body.inactive-modal-open{
  overflow:hidden;
}

.inactive-modal-backdrop[hidden]{
  display:none !important;
}

.inactive-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(33, 17, 17, .48);
  z-index:9999;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:120px;
}

.inactive-modal-box{
  width:560px;
  border:1px solid #955632;
  background:#f8ecdd;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-family:Arial, Helvetica, sans-serif;
}

.inactive-modal-head{
  height:31px;
  padding:7px 14px 0;
  background:linear-gradient(180deg, #d38158, #bf5f38);
  color:#fff7e8;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.28);
}

.inactive-modal-body{
  padding:18px 18px 12px;
  background:#fff8ef;
  border-top:1px solid #edc8b1;
}

.inactive-modal-body h2{
  margin:0 0 10px;
  color:#7f241b;
  font-family:Georgia, "Times New Roman", serif;
  font-size:28px;
  line-height:1.08;
}

.inactive-modal-lead{
  margin:0 0 10px;
  color:#8b4325;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
}

.inactive-modal-text{
  margin:0;
  color:#5b3427;
  font-size:14px;
  line-height:1.5;
}

.inactive-modal-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 18px 14px;
  background:#f3e2d0;
  border-top:1px solid #d7b89b;
}

.inactive-modal-action-buttons{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.inactive-modal-link{
  color:#8a251a;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}

.inactive-modal-link:hover{
  text-decoration:underline;
}

.inactive-modal-close{
  min-width:114px;
  height:30px;
  border:1px solid #7a4d33;
  background:linear-gradient(180deg, #faf0dd, #d8b388);
  color:#5a2516;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.inactive-fallback-box{
  margin:18px 24px;
}


.discord-cta-button{
  display:inline-block;
  min-height:24px;
  padding:4px 12px;
  border:1px solid #8e6946;
  background:linear-gradient(180deg, #f7ead1, #d5ae7e);
  color:#6b2d18;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  vertical-align:middle;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

.discord-cta-button:hover{
  text-decoration:none;
  filter:brightness(1.03);
}

.notice-discord-wrap{
  display:inline-block;
  margin-left:8px;
  vertical-align:middle;
}

.notice-discord-button-row{
  margin:8px 0 10px;
}


body{
  padding-bottom:44px;
}

.bottom-archive-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.bottom-archive-bar{
  pointer-events:auto;
  width:calc(var(--page-width) + 109px);
  min-width:calc(var(--page-width) + 109px);
  max-width:calc(var(--page-width) + 109px);
  height:31px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px 0 18px;
  background:linear-gradient(180deg, #d9c39b 0%, #cfb48a 48%, #c6a67c 100%);
  border-top:1px solid #b48e61;
  box-shadow:0 -1px 0 rgba(255,255,255,.45) inset, 0 -1px 3px rgba(0,0,0,.18);
  font-family:Georgia, "Times New Roman", serif;
}

.bottom-archive-left{
  flex:0 0 auto;
}

.bottom-archive-select{
  width:150px;
  height:24px;
  border:1px solid #9d8a73;
  background:#f0e9de;
  color:#6f2e1b;
  font:700 12px Arial, Helvetica, sans-serif;
  padding:1px 4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.bottom-archive-links{
  min-width:0;
  display:flex;
  align-items:center;
  gap:16px;
  overflow:hidden;
  white-space:nowrap;
}

.bottom-archive-link{
  color:#8c3323;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  line-height:1;
  position:relative;
  padding-bottom:2px;
  border-bottom:2px solid rgba(141,48,33,.55);
}

.bottom-archive-link::before{
  content:"•";
  color:#9e4331;
  margin-right:5px;
  position:relative;
  top:-1px;
}

.bottom-archive-link:hover{
  color:#6f2317;
  border-bottom-color:#6f2317;
}