/* =========================================================
   DANQVORA GLOBAL SITE SHELL V1
   Shared header/navigation system
========================================================= */

:root {
  --dq-shell-black: #080808;
  --dq-shell-black-2: #101010;
  --dq-shell-white: #ffffff;
  --dq-shell-muted: #858585;
  --dq-shell-border: rgba(255, 255, 255, .09);
  --dq-shell-width: 1460px;
}


/* =========================================================
   RESET FOR SHELL
========================================================= */

.dq-site-header,
.dq-site-header * {
  box-sizing: border-box;
}

.dq-site-header a {
  color: inherit;
  text-decoration: none;
}

.dq-site-header button {
  font: inherit;
}


/* =========================================================
   HEADER
========================================================= */

.dq-site-header {
  position: sticky;

  top: 0;

  z-index: 5000;

  width: 100%;

  background:
    rgba(8, 8, 8, .97);

  color: var(--dq-shell-white);

  border-bottom:
    1px solid var(--dq-shell-border);

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   MAIN HEADER ROW
========================================================= */

.dq-site-header-main {
  width:
    min(
      var(--dq-shell-width),
      calc(100% - 50px)
    );

  min-height: 74px;

  margin: auto;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 38px;
}


/* =========================================================
   BRAND
========================================================= */

.dq-site-brand {
  display: flex;

  align-items: center;

  gap: 13px;

  min-width: max-content;
}


.dq-site-brand-mark {
  width: 38px;
  height: 38px;

  flex:
    0 0 38px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.18);

  color: #fff;

  font-size: 12px;

  font-weight: 700;
}


.dq-site-brand-copy strong {
  display: block;

  color: #fff;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 4.5px;
}


.dq-site-brand-copy span {
  display: block;

  margin-top: 4px;

  color: #626262;

  font-size: 7px;

  letter-spacing: 1.5px;
}


/* =========================================================
   MAIN NAV
========================================================= */

.dq-site-nav {
  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap:
    clamp(
      15px,
      1.7vw,
      29px
    );
}


.dq-site-nav a {
  position: relative;

  min-height: 74px;

  display: inline-flex;

  align-items: center;

  flex: 0 0 auto;

  color: #7c7c7c;

  font-size: 9px;

  font-weight: 500;

  letter-spacing: .9px;

  white-space: nowrap;

  transition:
    color .18s ease;
}


.dq-site-nav a:hover {
  color: #fff;
}


.dq-site-nav a.active {
  color: #fff;
}


.dq-site-nav a.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background: #fff;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.dq-site-actions {
  min-width: max-content;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;
}


.dq-site-login {
  min-height: 40px;

  padding:
    0 12px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid transparent;

  color: #8b8b8b;

  font-size: 8px;

  letter-spacing: .8px;

  cursor: pointer;
}


.dq-site-login:hover {
  color: #fff;
}


.dq-site-primary {
  min-height: 40px;

  padding:
    0 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid #fff;

  background: #fff;

  color: #080808;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .8px;

  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease;
}


.dq-site-primary:hover {
  background: transparent;

  color: #fff;
}


/* =========================================================
   ACCOUNT CHIP
========================================================= */

.dq-site-account {
  min-height: 42px;

  padding:
    5px 9px;

  display: flex;

  align-items: center;

  gap: 9px;

  border:
    1px solid
    rgba(255,255,255,.13);

  color: #fff;
}


.dq-site-account:hover {
  border-color:
    rgba(255,255,255,.28);
}


.dq-site-account-avatar {
  width: 29px;
  height: 29px;

  flex:
    0 0 29px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #fff;

  color: #090909;

  font-size: 7px;

  font-weight: 700;
}


.dq-site-account-copy strong {
  display: block;

  font-size: 8px;

  font-weight: 600;
}


.dq-site-account-copy small {
  display: block;

  margin-top: 2px;

  color: #686868;

  font-size: 6px;

  letter-spacing: .5px;
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.dq-site-menu {
  display: none;

  width: 39px;
  height: 39px;

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.14);

  background: transparent;

  color: #fff;

  cursor: pointer;

  font-size: 16px;
}


/* =========================================================
   OPTIONAL SUB NAV
========================================================= */

.dq-site-subnav {
  width: 100%;

  min-height: 46px;

  background: #111;

  border-top:
    1px solid
    rgba(255,255,255,.05);
}


.dq-site-subnav-inner {
  width:
    min(
      var(--dq-shell-width),
      calc(100% - 50px)
    );

  min-height: 46px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;
}


.dq-site-subnav-links {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 24px;

  overflow-x: auto;

  scrollbar-width: none;
}


.dq-site-subnav-links::-webkit-scrollbar {
  display: none;
}


.dq-site-subnav a,
.dq-site-subnav button {
  flex: 0 0 auto;

  padding: 0;

  border: 0;

  background: transparent;

  color: #696969;

  cursor: pointer;

  font-size: 8px;

  letter-spacing: .8px;

  white-space: nowrap;
}


.dq-site-subnav a:hover,
.dq-site-subnav button:hover,
.dq-site-subnav .active {
  color: #fff;
}


/* =========================================================
   PAGE IDENTITY
========================================================= */

.dq-site-page-name {
  color: #555;

  font-size: 7px;

  letter-spacing: 1.5px;

  white-space: nowrap;
}


/* =========================================================
   MOBILE OVERLAY NAV
========================================================= */

.dq-site-mobile-nav {
  display: none;

  padding:
    5px 15px
    17px;

  background: #0b0b0b;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.dq-site-mobile-nav.open {
  display: grid;
}


.dq-site-mobile-nav a {
  min-height: 44px;

  display: flex;

  align-items: center;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);

  color: #8a8a8a;

  font-size: 9px;

  letter-spacing: .8px;
}


.dq-site-mobile-nav a:hover,
.dq-site-mobile-nav a.active {
  color: #fff;
}


/* =========================================================
   DESKTOP RESPONSIVE
========================================================= */

@media(max-width: 1180px) {

  .dq-site-header-main {
    gap: 22px;
  }


  .dq-site-nav {
    justify-content: flex-start;

    gap: 20px;

    overflow-x: auto;

    scrollbar-width: none;
  }


  .dq-site-nav::-webkit-scrollbar {
    display: none;
  }


  .dq-site-page-name {
    display: none;
  }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width: 820px) {

  .dq-site-header-main {
    width:
      calc(100% - 28px);

    min-height: 66px;

    grid-template-columns:
      minmax(0,1fr)
      auto;

    gap: 15px;
  }


  .dq-site-nav {
    display: none;
  }


  .dq-site-menu {
    display: grid;

    place-items: center;
  }


  .dq-site-actions {
    gap: 6px;
  }


  .dq-site-actions
  .dq-site-login {
    display: none;
  }


  .dq-site-subnav-inner {
    width:
      calc(100% - 28px);
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 540px) {

  .dq-site-brand-copy strong {
    font-size: 12px;

    letter-spacing: 3.5px;
  }


  .dq-site-brand-copy span {
    font-size: 6px;
  }


  .dq-site-brand-mark {
    width: 35px;
    height: 35px;

    flex-basis: 35px;
  }


  .dq-site-actions
  .dq-site-primary {
    display: none;
  }


  .dq-site-account-copy {
    display: none;
  }


  .dq-site-account {
    padding: 4px;
  }

}
/* =========================================================
   FORUM COMPATIBILITY
   Keeps existing Forum HTML + JS intact
========================================================= */

.forum-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;

  background:
    rgba(8, 8, 8, .98) !important;

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   FORUM MAIN HEADER ROW
========================================================= */

.forum-header-top {
  width:
    min(
      1460px,
      calc(100% - 50px)
    ) !important;

  min-height: 74px !important;

  margin: auto !important;

  padding: 0 !important;

  display: grid !important;

  grid-template-columns:
    minmax(220px, auto)
    minmax(0, 1fr) !important;

  align-items: center !important;

  gap: 35px !important;
}


/* =========================================================
   BRAND
========================================================= */

.forum-brand {
  display: flex !important;

  align-items: center !important;

  gap: 13px !important;

  width: fit-content;
}


.forum-logo-mark {
  width: 38px !important;
  height: 38px !important;

  flex: 0 0 38px;

  display: grid !important;

  place-items: center !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  background: transparent !important;

  color: #fff !important;

  font-size: 12px !important;

  font-weight: 700 !important;
}


.forum-logo-text strong {
  display: block !important;

  color: #fff !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  letter-spacing: 4.5px !important;
}


.forum-logo-text span {
  display: block !important;

  margin-top: 4px !important;

  color: #626262 !important;

  font-size: 7px !important;

  letter-spacing: 1.5px !important;
}


/* =========================================================
   ACCOUNT / LOGIN
========================================================= */

.forum-auth {
  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 8px !important;
}


.login-button {
  min-height: 40px;

  padding:
    0 13px !important;

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  color: #858585 !important;

  font-size: 8px !important;

  letter-spacing: .8px !important;
}


.login-button:hover {
  color: #fff !important;
}


.register-button {
  min-height: 40px;

  padding:
    0 15px !important;

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  border:
    1px solid #fff !important;

  background: #fff !important;

  color: #080808 !important;

  font-size: 8px !important;

  font-weight: 700 !important;

  letter-spacing: .8px !important;
}


.register-button:hover {
  background: transparent !important;

  color: #fff !important;
}


/* =========================================================
   FORUM NAVIGATION ROW
========================================================= */

.forum-nav {
  width: 100% !important;

  min-height: 48px !important;

  padding: 0 !important;

  background: #111 !important;

  border-top:
    1px solid
    rgba(255,255,255,.05) !important;
}


.forum-navigation {
  width:
    min(
      1460px,
      calc(100% - 50px)
    );

  min-height: 48px;

  margin: auto;

  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  gap:
    clamp(
      17px,
      2vw,
      28px
    ) !important;

  overflow-x: auto;

  scrollbar-width: none;
}


.forum-navigation::-webkit-scrollbar {
  display: none;
}


.forum-navigation a {
  min-height: 48px;

  padding: 0 !important;

  position: relative;

  display: inline-flex !important;

  align-items: center;

  flex: 0 0 auto;

  color: #707070 !important;

  font-size: 8px !important;

  font-weight: 500;

  letter-spacing: .8px !important;

  white-space: nowrap;
}


.forum-navigation a:hover,
.forum-navigation a.active {
  color: #fff !important;
}


.forum-navigation a.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background: #fff;
}


/* =========================================================
   WHAT'S NEW BUTTON
========================================================= */

.nav-right {
  position: absolute;

  right:
    max(
      25px,
      calc((100% - 1460px) / 2)
    );

  display: flex !important;

  align-items: center;
}


.new-posts-nav {
  min-height: 32px;

  padding:
    0 11px !important;

  border:
    1px solid
    rgba(255,255,255,.10) !important;

  background: transparent !important;

  color: #777 !important;

  font-size: 7px !important;

  letter-spacing: .8px !important;
}


.new-posts-nav:hover {
  border-color:
    rgba(255,255,255,.25) !important;

  color: #fff !important;
}


/* =========================================================
   LOGGED-IN PASSPORT ACCOUNT
========================================================= */

.forum-logged-account {
  display: flex;

  align-items: center;

  gap: 8px;
}


.forum-account-passport {
  min-height: 42px;

  padding:
    5px 9px;

  display: flex;

  align-items: center;

  gap: 9px;

  border:
    1px solid
    rgba(255,255,255,.13);
}


.forum-account-passport:hover {
  border-color:
    rgba(255,255,255,.28);
}


.forum-account-avatar {
  width: 29px !important;
  height: 29px !important;

  flex:
    0 0 29px;

  display: grid !important;

  place-items: center !important;

  border-radius: 50%;

  background: #fff !important;

  color: #080808 !important;

  font-size: 7px !important;

  font-weight: 700 !important;
}


.forum-account-copy strong {
  display: block;

  color: #fff;

  font-size: 8px !important;
}


.forum-account-copy small {
  display: block;

  margin-top: 2px;

  color: #666 !important;

  font-size: 6px !important;

  letter-spacing: .5px;
}


.forum-account-logout {
  min-height: 40px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(255,255,255,.10);

  background: transparent;

  color: #777;

  cursor: pointer;

  font-size: 7px;

  letter-spacing: .7px;
}


.forum-account-logout:hover {
  color: #fff;

  border-color:
    rgba(255,255,255,.25);
}


/* =========================================================
   MOBILE FORUM HEADER
========================================================= */

@media(max-width: 820px) {

  .forum-header-top {
    width:
      calc(100% - 28px) !important;

    min-height: 66px !important;
  }


  .forum-logo-text strong {
    font-size: 12px !important;

    letter-spacing: 3.5px !important;
  }


  .forum-auth {
    min-width: 0;
  }


  .forum-nav {
    min-height: 47px !important;

    padding:
      0 14px !important;

    display: flex !important;

    align-items: center !important;
  }


  .forum-menu-button {
    display: grid !important;

    place-items: center;

    width: 38px;
    height: 38px;

    padding: 0;

    flex:
      0 0 38px;

    border:
      1px solid
      rgba(255,255,255,.12) !important;

    color: #fff;
  }


  .forum-navigation {
    position: absolute;

    top: 113px;

    left: 0;
    right: 0;

    width: 100%;

    min-height: 0;

    padding:
      8px 15px
      17px;

    display: none !important;

    flex-direction: column;

    align-items: stretch !important;

    gap: 0 !important;

    background: #0b0b0b;

    border-top:
      1px solid
      rgba(255,255,255,.07);

    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }


  .forum-navigation.open {
    display: flex !important;
  }


  .forum-navigation a {
    width: 100%;

    min-height: 44px;

    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }


  .forum-navigation a.active::after {
    display: none;
  }


  .nav-right {
    position: static;

    margin-left: auto;
  }

}


@media(max-width: 520px) {

  .forum-logo-text span {
    display: none !important;
  }


  .forum-auth
  .login-button {
    display: none;
  }


  .forum-account-copy {
    display: none;
  }


  .forum-account-passport {
    padding: 4px;
  }

}


/* DANQVORA LIVE CHAT SHELL V1 */

/* =========================================================
   LIVE CHAT HEADER
========================================================= */

.chat-header {
  position: sticky !important;

  top: 0 !important;

  z-index: 5000 !important;

  width: 100%;

  background:
    rgba(8, 8, 8, .98) !important;

  color: #fff;

  border-bottom:
    1px solid
    rgba(255,255,255,.08) !important;

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   TOP ROW
========================================================= */

.chat-header-top {
  width:
    min(
      1460px,
      calc(100% - 50px)
    ) !important;

  min-height: 74px !important;

  margin: auto !important;

  padding: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content:
    space-between !important;

  gap: 30px !important;
}


/* =========================================================
   BRAND
========================================================= */

.chat-brand {
  display: flex !important;

  align-items: center !important;

  gap: 13px !important;

  min-width: max-content;
}


.chat-logo {
  width: 38px !important;

  height: 38px !important;

  flex:
    0 0 38px;

  display: grid !important;

  place-items: center !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  background:
    transparent !important;

  color: #fff !important;

  font-size: 12px !important;

  font-weight: 700 !important;
}


.chat-brand-copy strong {
  display: block !important;

  color: #fff !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  letter-spacing:
    4.5px !important;
}


.chat-brand-copy span {
  display: block !important;

  margin-top: 4px !important;

  color: #626262 !important;

  font-size: 7px !important;

  letter-spacing:
    1.5px !important;
}


/* =========================================================
   LIVE CHAT NAVIGATION
========================================================= */

.chat-nav {
  width: 100% !important;

  min-height: 48px !important;

  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  display: flex !important;

  align-items: center !important;

  gap:
    clamp(
      17px,
      2vw,
      28px
    ) !important;

  background: #111 !important;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  overflow-x: auto;

  scrollbar-width: none;
}


.chat-nav::-webkit-scrollbar {
  display: none;
}


.chat-nav a {
  position: relative;

  min-height: 48px;

  padding: 0 !important;

  display: inline-flex !important;

  align-items: center;

  flex:
    0 0 auto;

  color: #707070 !important;

  font-size: 8px !important;

  font-weight: 500;

  letter-spacing:
    .8px !important;

  white-space: nowrap;

  transition:
    color .18s ease;
}


.chat-nav a:hover,
.chat-nav a.active {
  color: #fff !important;
}


.chat-nav a.active::after {
  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 1px;

  background: #fff;
}


/* =========================================================
   LIVE CHAT PAGE ALIGNMENT
========================================================= */

.chat-page {
  width:
    min(
      1280px,
      calc(100% - 40px)
    ) !important;

  margin: auto !important;

  padding-top:
    30px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 820px) {

  .chat-header-top {
    width:
      calc(
        100% - 28px
      ) !important;

    min-height:
      66px !important;
  }


  .chat-brand-copy strong {
    font-size:
      12px !important;

    letter-spacing:
      3.5px !important;
  }


  .chat-nav {
    min-height:
      47px !important;

    padding-left:
      14px !important;

    padding-right:
      14px !important;

    gap:
      22px !important;
  }


  .chat-nav a {
    min-height:
      47px;
  }


  .chat-page {
    width:
      calc(
        100% - 28px
      ) !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 520px) {

  .chat-logo {
    width:
      35px !important;

    height:
      35px !important;

    flex-basis:
      35px;
  }


  .chat-brand-copy strong {
    font-size:
      11px !important;

    letter-spacing:
      3px !important;
  }


  .chat-brand-copy span {
    font-size:
      6px !important;

    letter-spacing:
      1px !important;
  }

}




/* DANQVORA AWARENESS SHELL V1 */

/* =========================================================
   HEADER
========================================================= */

.awareness-header {
  position: sticky !important;

  top: 0 !important;

  z-index: 5000 !important;

  width: 100%;

  background:
    rgba(8,8,8,.98) !important;

  color: #fff !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.08) !important;

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   TOP HEADER ROW
========================================================= */

.awareness-header .header-top {
  width:
    min(
      1460px,
      calc(100% - 50px)
    ) !important;

  min-height:
    74px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    30px !important;
}


/* =========================================================
   BRAND
========================================================= */

.awareness-header .brand {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    13px !important;

  min-width:
    max-content;
}


.awareness-header .brand-mark {
  width:
    38px !important;

  height:
    38px !important;

  flex:
    0 0 38px;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  background:
    transparent !important;

  color:
    #fff !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;
}


.awareness-header .brand-copy strong {
  display:
    block !important;

  color:
    #fff !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  letter-spacing:
    4.5px !important;
}


.awareness-header .brand-copy span {
  display:
    block !important;

  margin-top:
    4px !important;

  color:
    #626262 !important;

  font-size:
    7px !important;

  letter-spacing:
    1.5px !important;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.awareness-header .header-actions {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    8px !important;
}


.awareness-header .header-button {
  min-height:
    40px !important;

  padding:
    0 13px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid
    rgba(255,255,255,.13) !important;

  background:
    transparent !important;

  color:
    #888 !important;

  font-size:
    8px !important;

  letter-spacing:
    .8px !important;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.awareness-header .header-button:hover {
  color:
    #fff !important;

  border-color:
    rgba(255,255,255,.28) !important;
}


.awareness-header .header-button.light {
  border-color:
    #fff !important;

  background:
    #fff !important;

  color:
    #080808 !important;

  font-weight:
    700 !important;
}


.awareness-header .header-button.light:hover {
  background:
    transparent !important;

  color:
    #fff !important;
}


/* =========================================================
   ACCOUNT CHIP
========================================================= */

.awareness-header .account-chip {
  min-height:
    42px !important;

  padding:
    5px 9px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    9px !important;

  border:
    1px solid
    rgba(255,255,255,.13) !important;
}


.awareness-header .account-chip:hover {
  border-color:
    rgba(255,255,255,.28) !important;
}


.awareness-header .account-avatar {
  width:
    29px !important;

  height:
    29px !important;

  flex:
    0 0 29px;

  display:
    grid !important;

  place-items:
    center !important;

  border-radius:
    50% !important;

  background:
    #fff !important;

  color:
    #080808 !important;

  font-size:
    7px !important;

  font-weight:
    700 !important;
}


.awareness-header .account-copy strong {
  display:
    block !important;

  color:
    #fff !important;

  font-size:
    8px !important;
}


.awareness-header .account-copy small {
  display:
    block !important;

  margin-top:
    2px !important;

  color:
    #666 !important;

  font-size:
    6px !important;

  letter-spacing:
    .5px !important;
}


/* =========================================================
   AWARENESS NAVIGATION
========================================================= */

.awareness-header .navigation {
  width:
    100% !important;

  min-height:
    48px !important;

  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    clamp(
      17px,
      2vw,
      28px
    ) !important;

  background:
    #111 !important;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.awareness-header .navigation::-webkit-scrollbar {
  display:
    none;
}


.awareness-header .navigation a {
  position:
    relative;

  min-height:
    48px;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center;

  flex:
    0 0 auto;

  color:
    #707070 !important;

  font-size:
    8px !important;

  font-weight:
    500;

  letter-spacing:
    .8px !important;

  white-space:
    nowrap;

  transition:
    color .18s ease;
}


.awareness-header .navigation a:hover,
.awareness-header .navigation a.active {
  color:
    #fff !important;
}


.awareness-header .navigation a.active::after {
  content: "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    1px;

  background:
    #fff;
}


/* =========================================================
   PAGE ALIGNMENT
========================================================= */

body .page {
  width:
    min(
      1260px,
      calc(100% - 40px)
    ) !important;

  margin:
    auto !important;

  padding-top:
    30px !important;
}


/* =========================================================
   AWARENESS HERO REFINEMENT
========================================================= */

body .hero {
  border:
    1px solid
    rgba(255,255,255,.04);

  background:
    #080808 !important;
}


body .hero h1 {
  max-width:
    850px;

  font-size:
    clamp(
      48px,
      6.5vw,
      84px
    ) !important;

  line-height:
    .92 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 820px) {

  .awareness-header .header-top {
    width:
      calc(
        100% - 28px
      ) !important;

    min-height:
      66px !important;
  }


  .awareness-header .brand-copy strong {
    font-size:
      12px !important;

    letter-spacing:
      3.5px !important;
  }


  .awareness-header .navigation {
    min-height:
      47px !important;

    padding-left:
      14px !important;

    padding-right:
      14px !important;

    gap:
      22px !important;
  }


  .awareness-header .navigation a {
    min-height:
      47px;
  }


  body .page {
    width:
      calc(
        100% - 28px
      ) !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 560px) {

  .awareness-header .brand-mark {
    width:
      35px !important;

    height:
      35px !important;

    flex-basis:
      35px;
  }


  .awareness-header .brand-copy strong {
    font-size:
      11px !important;

    letter-spacing:
      3px !important;
  }


  .awareness-header .brand-copy span {
    display:
      none !important;
  }


  .awareness-header .account-copy {
    display:
      none !important;
  }


  .awareness-header .account-chip {
    padding:
      4px !important;
  }


  .awareness-header .header-button:not(.light) {
    display:
      none !important;
  }


  body .hero {
    grid-template-columns:
      1fr !important;

    gap:
      28px !important;
  }

}




/* DANQVORA PASSPORT SHELL V1 */

/* =========================================================
   PASSPORT HEADER
========================================================= */

.passport-header {
  position: sticky !important;

  top: 0 !important;

  z-index: 5000 !important;

  width: 100%;

  background:
    rgba(8,8,8,.98) !important;

  color:
    #fff !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.08) !important;

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   TOP HEADER ROW
========================================================= */

.passport-header .header-top {
  width:
    min(
      1460px,
      calc(100% - 50px)
    ) !important;

  min-height:
    74px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    30px !important;
}


/* =========================================================
   BRAND
========================================================= */

.passport-header .brand {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    13px !important;

  min-width:
    max-content;
}


.passport-header .brand-mark {
  width:
    38px !important;

  height:
    38px !important;

  flex:
    0 0 38px;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  background:
    transparent !important;

  color:
    #fff !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;
}


.passport-header .brand-copy strong {
  display:
    block !important;

  color:
    #fff !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  letter-spacing:
    4.5px !important;
}


.passport-header .brand-copy span {
  display:
    block !important;

  margin-top:
    4px !important;

  color:
    #626262 !important;

  font-size:
    7px !important;

  letter-spacing:
    1.5px !important;
}


/* =========================================================
   HEADER ACCOUNT
========================================================= */

.passport-header .header-account {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    9px !important;
}


.passport-header .header-account-copy {
  text-align:
    right !important;
}


.passport-header .header-account-copy strong {
  display:
    block !important;

  color:
    #fff !important;

  font-size:
    8px !important;

  font-weight:
    600 !important;
}


.passport-header .header-account-copy span {
  display:
    block !important;

  margin-top:
    3px !important;

  color:
    #666 !important;

  font-size:
    6px !important;

  letter-spacing:
    .7px !important;
}


/* =========================================================
   HEADER BUTTON
========================================================= */

.passport-header .header-button {
  min-height:
    40px !important;

  padding:
    0 13px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid
    rgba(255,255,255,.13) !important;

  background:
    transparent !important;

  color:
    #888 !important;

  font-size:
    8px !important;

  letter-spacing:
    .8px !important;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.passport-header .header-button:hover {
  color:
    #fff !important;

  border-color:
    rgba(255,255,255,.28) !important;
}


/* =========================================================
   PASSPORT NAVIGATION
========================================================= */

.passport-header .passport-nav {
  width:
    100% !important;

  min-height:
    48px !important;

  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    clamp(
      17px,
      2vw,
      28px
    ) !important;

  background:
    #111 !important;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.passport-header .passport-nav::-webkit-scrollbar {
  display:
    none;
}


.passport-header .passport-nav a {
  position:
    relative;

  min-height:
    48px;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center;

  flex:
    0 0 auto;

  color:
    #707070 !important;

  font-size:
    8px !important;

  font-weight:
    500;

  letter-spacing:
    .8px !important;

  white-space:
    nowrap;

  transition:
    color .18s ease;
}


.passport-header .passport-nav a:hover,
.passport-header .passport-nav a.active {
  color:
    #fff !important;
}


.passport-header .passport-nav a.active::after {
  content: "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    1px;

  background:
    #fff;
}


/* =========================================================
   PASSPORT PAGE ALIGNMENT
========================================================= */

body .passport-page {
  width:
    min(
      1240px,
      calc(100% - 40px)
    ) !important;

  margin:
    auto !important;

  padding-top:
    30px !important;
}


/* =========================================================
   PASSPORT SEARCH / TOOLS
========================================================= */

body .passport-tools {
  border-color:
    #d9dcde;

  background:
    #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 820px) {

  .passport-header .header-top {
    width:
      calc(
        100% - 28px
      ) !important;

    min-height:
      66px !important;
  }


  .passport-header .brand-copy strong {
    font-size:
      12px !important;

    letter-spacing:
      3.5px !important;
  }


  .passport-header .passport-nav {
    min-height:
      47px !important;

    padding-left:
      14px !important;

    padding-right:
      14px !important;

    gap:
      22px !important;
  }


  .passport-header .passport-nav a {
    min-height:
      47px;
  }


  body .passport-page {
    width:
      calc(
        100% - 28px
      ) !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 560px) {

  .passport-header .brand-mark {
    width:
      35px !important;

    height:
      35px !important;

    flex-basis:
      35px;
  }


  .passport-header .brand-copy strong {
    font-size:
      11px !important;

    letter-spacing:
      3px !important;
  }


  .passport-header .brand-copy span {
    display:
      none !important;
  }


  .passport-header .header-account-copy {
    display:
      none !important;
  }


  .passport-header .header-button {
    min-height:
      36px !important;

    padding:
      0 9px !important;

    font-size:
      7px !important;
  }

}




/* DANQVORA MARKETS SHELL V1 */

/* =========================================================
   MARKET NAVBAR
========================================================= */

.market-navbar {
  position:
    fixed !important;

  top:
    0 !important;

  left:
    0 !important;

  right:
    0 !important;

  z-index:
    5000 !important;

  width:
    100% !important;

  height:
    74px !important;

  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  display:
    grid !important;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto !important;

  align-items:
    center !important;

  gap:
    38px !important;

  background:
    rgba(8,8,8,.97) !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.08) !important;

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   MARKET LOGO
========================================================= */

.market-logo {
  min-width:
    max-content;

  color:
    #fff !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  letter-spacing:
    4.5px !important;

  line-height:
    1;
}


/* =========================================================
   MARKET NAV
========================================================= */

.market-nav {
  min-width:
    0;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    clamp(
      17px,
      2vw,
      29px
    ) !important;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.market-nav::-webkit-scrollbar {
  display:
    none;
}


.market-nav a {
  position:
    relative;

  min-height:
    74px;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center;

  flex:
    0 0 auto;

  color:
    #747474 !important;

  font-size:
    8px !important;

  font-weight:
    500;

  letter-spacing:
    .8px !important;

  white-space:
    nowrap;

  transition:
    color .18s ease;
}


.market-nav a:hover,
.market-nav a.active {
  color:
    #fff !important;
}


.market-nav a.active::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    1px;

  background:
    #fff;
}


/* =========================================================
   BACK TO DANQVORA
========================================================= */

.back-danqvora {
  min-height:
    40px;

  padding:
    0 14px !important;

  display:
    inline-flex !important;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    max-content;

  border:
    1px solid
    rgba(255,255,255,.15) !important;

  background:
    transparent;

  color:
    #8a8a8a !important;

  font-size:
    8px !important;

  font-weight:
    500;

  letter-spacing:
    .8px !important;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.back-danqvora:hover {
  border-color:
    #fff !important;

  background:
    #fff;

  color:
    #080808 !important;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.market-menu {
  width:
    39px !important;

  height:
    39px !important;

  padding:
    0 !important;

  border:
    1px solid
    rgba(255,255,255,.14) !important;

  background:
    transparent !important;

  color:
    #fff !important;

  font-size:
    16px !important;

  cursor:
    pointer;
}


/* =========================================================
   PAGE OFFSET
========================================================= */

.market-page {
  padding-top:
    74px !important;
}


/* =========================================================
   HERO REFINEMENT
========================================================= */

.market-hero {
  min-height:
    520px !important;

  padding:
    110px
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    )
    78px !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.07) !important;
}


.market-hero-content {
  max-width:
    1460px;

  margin:
    0 auto;
}


.market-kicker {
  margin-bottom:
    22px !important;

  color:
    #626262 !important;

  font-size:
    8px !important;

  letter-spacing:
    2px !important;
}


.market-hero h1 {
  max-width:
    1050px !important;

  font-size:
    clamp(
      58px,
      8vw,
      112px
    ) !important;

  line-height:
    .9 !important;

  letter-spacing:
    -5px !important;

  font-weight:
    500 !important;
}


/* =========================================================
   DESKTOP / MEDIUM
========================================================= */

@media(max-width: 1100px) {

  .market-navbar {
    gap:
      22px !important;
  }


  .market-nav {
    justify-content:
      flex-start !important;

    gap:
      20px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 820px) {

  .market-navbar {
    height:
      66px !important;

    padding-left:
      14px !important;

    padding-right:
      14px !important;

    grid-template-columns:
      minmax(0,1fr)
      auto
      auto !important;

    gap:
      8px !important;
  }


  .market-logo {
    font-size:
      12px !important;

    letter-spacing:
      3.5px !important;
  }


  .market-nav {
    position:
      absolute;

    top:
      66px;

    left:
      0;

    right:
      0;

    width:
      100%;

    padding:
      8px 15px
      17px;

    display:
      none !important;

    flex-direction:
      column;

    align-items:
      stretch !important;

    gap:
      0 !important;

    background:
      #0b0b0b;

    border-top:
      1px solid
      rgba(255,255,255,.07);

    border-bottom:
      1px solid
      rgba(255,255,255,.07);

    overflow:
      visible;
  }


  .market-nav.open {
    display:
      flex !important;
  }


  .market-nav a {
    width:
      100%;

    min-height:
      44px;

    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }


  .market-nav a.active::after {
    display:
      none;
  }


  .market-menu {
    display:
      grid !important;

    place-items:
      center;
  }


  .back-danqvora {
    min-height:
      39px;
  }


  .market-page {
    padding-top:
      66px !important;
  }


  .market-hero {
    min-height:
      470px !important;

    padding:
      90px 22px
      60px !important;
  }


  .market-hero h1 {
    font-size:
      clamp(
        50px,
        13vw,
        78px
      ) !important;

    letter-spacing:
      -3.5px !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 520px) {

  .market-navbar {
    grid-template-columns:
      minmax(0,1fr)
      auto !important;
  }


  .back-danqvora {
    display:
      none !important;
  }


  .market-logo {
    font-size:
      11px !important;

    letter-spacing:
      3px !important;
  }


  .market-hero {
    padding:
      72px 18px
      50px !important;
  }


  .market-hero h1 {
    font-size:
      clamp(
        46px,
        15vw,
        66px
      ) !important;

    letter-spacing:
      -3px !important;
  }

}




/* DANQVORA BRIEF SHELL V1 */

/* =========================================================
   BRIEF HEADER
========================================================= */

body .navbar {
  position:
    fixed !important;

  top:
    0 !important;

  left:
    0 !important;

  right:
    0 !important;

  z-index:
    5000 !important;

  width:
    100% !important;

  height:
    74px !important;

  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  display:
    grid !important;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto !important;

  align-items:
    center !important;

  gap:
    38px !important;

  background:
    rgba(8,8,8,.97) !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.08) !important;

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   LOGO
========================================================= */

body .navbar .logo {
  min-width:
    max-content;

  color:
    #fff !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  letter-spacing:
    4.5px !important;

  line-height:
    1;
}


/* =========================================================
   PRIMARY NAV
========================================================= */

body .navbar #navMenu {
  min-width:
    0;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    clamp(
      17px,
      2vw,
      29px
    ) !important;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


body .navbar #navMenu::-webkit-scrollbar {
  display:
    none;
}


body .navbar #navMenu a {
  position:
    relative;

  min-height:
    74px;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center;

  flex:
    0 0 auto;

  color:
    #747474 !important;

  font-size:
    8px !important;

  font-weight:
    500 !important;

  letter-spacing:
    .8px !important;

  white-space:
    nowrap;

  transition:
    color .18s ease;
}


body .navbar #navMenu a:hover,
body .navbar #navMenu a.active {
  color:
    #fff !important;
}


body .navbar #navMenu a.active::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    1px;

  background:
    #fff;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

body .navbar .nav-actions {
  min-width:
    max-content;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    8px !important;
}


body .navbar .nav-access {
  min-height:
    40px;

  padding:
    0 14px !important;

  display:
    inline-flex !important;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(255,255,255,.15) !important;

  background:
    transparent !important;

  color:
    #898989 !important;

  font-size:
    8px !important;

  font-weight:
    500;

  letter-spacing:
    .8px !important;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}


body .navbar .nav-access:hover {
  border-color:
    #fff !important;

  background:
    #fff !important;

  color:
    #080808 !important;
}


/* =========================================================
   MENU BUTTON
========================================================= */

body .navbar .menu-button {
  display:
    none;

  width:
    39px !important;

  height:
    39px !important;

  padding:
    0 !important;

  border:
    1px solid
    rgba(255,255,255,.14) !important;

  background:
    transparent !important;

  color:
    #fff !important;

  font-size:
    16px !important;

  cursor:
    pointer;
}


/* =========================================================
   PAGE OFFSET
========================================================= */

body .brief-page {
  padding-top:
    74px !important;
}


/* =========================================================
   HERO ALIGNMENT
========================================================= */

body .brief-hero {
  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;
}


body .brief-hero-content {
  max-width:
    1460px;

  margin:
    0 auto;
}


body .brief-hero h1 {
  max-width:
    1120px !important;

  font-size:
    clamp(
      60px,
      8.5vw,
      125px
    ) !important;

  line-height:
    .89 !important;

  letter-spacing:
    -5px !important;
}


/* =========================================================
   CATEGORY BAR
========================================================= */

body .brief-categories {
  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;
}


/* =========================================================
   CONTENT WIDTH
========================================================= */

body .brief-content {
  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;
}


/* =========================================================
   MEDIUM
========================================================= */

@media(max-width: 1100px) {

  body .navbar {
    gap:
      22px !important;
  }


  body .navbar #navMenu {
    justify-content:
      flex-start !important;

    gap:
      20px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 820px) {

  body .navbar {
    height:
      66px !important;

    padding-left:
      14px !important;

    padding-right:
      14px !important;

    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    gap:
      10px !important;
  }


  body .navbar .logo {
    font-size:
      12px !important;

    letter-spacing:
      3.5px !important;
  }


  body .navbar #navMenu {
    position:
      absolute;

    top:
      66px;

    left:
      0;

    right:
      0;

    width:
      100%;

    padding:
      8px 15px
      17px;

    display:
      none !important;

    flex-direction:
      column;

    align-items:
      stretch !important;

    gap:
      0 !important;

    background:
      #0b0b0b;

    border-top:
      1px solid
      rgba(255,255,255,.07);

    border-bottom:
      1px solid
      rgba(255,255,255,.07);

    overflow:
      visible;
  }


  body .navbar #navMenu.open {
    display:
      flex !important;
  }


  body .navbar #navMenu a {
    width:
      100%;

    min-height:
      44px;

    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }


  body .navbar #navMenu a.active::after {
    display:
      none;
  }


  body .navbar .menu-button {
    display:
      grid !important;

    place-items:
      center;
  }


  body .navbar .nav-access {
    display:
      none !important;
  }


  body .brief-page {
    padding-top:
      66px !important;
  }


  body .brief-hero {
    min-height:
      620px;

    padding:
      90px 22px
      60px !important;
  }


  body .brief-hero-bottom {
    flex-direction:
      column;

    gap:
      20px !important;
  }


  body .brief-categories {
    padding-left:
      14px !important;

    padding-right:
      14px !important;
  }


  body .brief-content {
    padding-left:
      22px !important;

    padding-right:
      22px !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 520px) {

  body .navbar .logo {
    font-size:
      11px !important;

    letter-spacing:
      3px !important;
  }


  body .brief-hero h1 {
    font-size:
      clamp(
        52px,
        16vw,
        76px
      ) !important;

    letter-spacing:
      -3px !important;
  }


  body .brief-content {
    padding-top:
      70px !important;

    padding-bottom:
      70px !important;
  }

}




/* DANQVORA FORUM BOARD SHELL V1 */

/* =========================================================
   HEADER
========================================================= */

.board-site-header {
  position:
    sticky !important;

  top:
    0 !important;

  z-index:
    5000 !important;

  width:
    100%;

  background:
    rgba(8,8,8,.98) !important;

  color:
    #fff !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.08) !important;

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   TOP ROW
========================================================= */

.board-site-header .board-header-top {
  width:
    min(
      1460px,
      calc(100% - 50px)
    ) !important;

  min-height:
    74px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    30px !important;
}


/* =========================================================
   BRAND
========================================================= */

.board-site-header .board-brand {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    13px !important;

  min-width:
    max-content;
}


.board-site-header .board-logo {
  width:
    38px !important;

  height:
    38px !important;

  flex:
    0 0 38px;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  background:
    transparent !important;

  color:
    #fff !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;
}


.board-site-header .board-brand-copy strong {
  display:
    block !important;

  color:
    #fff !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  letter-spacing:
    4.5px !important;
}


.board-site-header .board-brand-copy span {
  display:
    block !important;

  margin-top:
    4px !important;

  color:
    #626262 !important;

  font-size:
    7px !important;

  letter-spacing:
    1.5px !important;
}


/* =========================================================
   LOGIN / REGISTER AREA
========================================================= */

.board-site-header #headerActions {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    8px !important;
}


.board-site-header .header-action {
  min-height:
    40px !important;

  padding:
    0 13px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid
    rgba(255,255,255,.13) !important;

  background:
    transparent !important;

  color:
    #888 !important;

  font-size:
    8px !important;

  letter-spacing:
    .8px !important;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.board-site-header .header-action:hover {
  color:
    #fff !important;

  border-color:
    rgba(255,255,255,.28) !important;
}


.board-site-header .header-action.light {
  border-color:
    #fff !important;

  background:
    #fff !important;

  color:
    #080808 !important;

  font-weight:
    700 !important;
}


.board-site-header .header-action.light:hover {
  background:
    transparent !important;

  color:
    #fff !important;
}


/* =========================================================
   NAVIGATION BAR
========================================================= */

.board-site-header .board-nav {
  position:
    relative;

  width:
    100% !important;

  min-height:
    48px !important;

  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    20px !important;

  background:
    #111 !important;

  border-top:
    1px solid
    rgba(255,255,255,.05);
}


/* =========================================================
   NAV LINKS
========================================================= */

.board-site-header .board-navigation {
  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    clamp(
      17px,
      2vw,
      28px
    ) !important;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.board-site-header .board-navigation::-webkit-scrollbar {
  display:
    none;
}


.board-site-header .board-navigation a {
  position:
    relative;

  min-height:
    48px;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center;

  flex:
    0 0 auto;

  color:
    #707070 !important;

  font-size:
    8px !important;

  font-weight:
    500;

  letter-spacing:
    .8px !important;

  white-space:
    nowrap;

  transition:
    color .18s ease;
}


.board-site-header .board-navigation a:hover,
.board-site-header .board-navigation a.active,
.board-site-header #goldNav {
  color:
    #fff !important;
}


/* current board indicator */

.board-site-header #goldNav::after,
.board-site-header .board-navigation a.active::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    1px;

  background:
    #fff;
}


/* =========================================================
   WHAT'S NEW
========================================================= */

.board-site-header #whatsNewButton {
  min-height:
    32px !important;

  padding:
    0 11px !important;

  flex:
    0 0 auto;

  border:
    1px solid
    rgba(255,255,255,.10) !important;

  background:
    transparent !important;

  color:
    #777 !important;

  font-size:
    7px !important;

  letter-spacing:
    .8px !important;
}


.board-site-header #whatsNewButton:hover {
  border-color:
    rgba(255,255,255,.25) !important;

  color:
    #fff !important;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.board-site-header #mobileMenu {
  display:
    none;

  width:
    38px !important;

  height:
    38px !important;

  padding:
    0 !important;

  flex:
    0 0 38px;

  border:
    1px solid
    rgba(255,255,255,.14) !important;

  background:
    transparent !important;

  color:
    #fff !important;

  font-size:
    16px !important;

  cursor:
    pointer;
}


/* =========================================================
   BOARD PAGE WIDTH
========================================================= */

body .board-page {
  width:
    min(
      1280px,
      calc(100% - 40px)
    ) !important;

  margin:
    0 auto !important;

  padding-top:
    30px !important;
}


/* =========================================================
   BOARD TITLE
========================================================= */

body .board-header {
  border-color:
    #dedede;
}


body .board-header h1 {
  letter-spacing:
    -2px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 820px) {

  .board-site-header .board-header-top {
    width:
      calc(
        100% - 28px
      ) !important;

    min-height:
      66px !important;
  }


  .board-site-header .board-brand-copy strong {
    font-size:
      12px !important;

    letter-spacing:
      3.5px !important;
  }


  .board-site-header .board-nav {
    min-height:
      47px !important;

    padding:
      0 14px !important;
  }


  .board-site-header #mobileMenu {
    display:
      grid !important;

    place-items:
      center;
  }


  .board-site-header .board-navigation {
    position:
      absolute;

    top:
      47px;

    left:
      0;

    right:
      0;

    width:
      100%;

    padding:
      8px 15px
      17px;

    display:
      none !important;

    flex-direction:
      column;

    align-items:
      stretch !important;

    gap:
      0 !important;

    background:
      #0b0b0b;

    border-top:
      1px solid
      rgba(255,255,255,.07);

    border-bottom:
      1px solid
      rgba(255,255,255,.07);

    overflow:
      visible;
  }


  .board-site-header .board-navigation.open {
    display:
      flex !important;
  }


  .board-site-header .board-navigation a {
    width:
      100%;

    min-height:
      44px;

    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }


  .board-site-header .board-navigation a::after {
    display:
      none !important;
  }


  body .board-page {
    width:
      calc(
        100% - 28px
      ) !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 560px) {

  .board-site-header .board-logo {
    width:
      35px !important;

    height:
      35px !important;

    flex-basis:
      35px;
  }


  .board-site-header .board-brand-copy strong {
    font-size:
      11px !important;

    letter-spacing:
      3px !important;
  }


  .board-site-header .board-brand-copy span {
    display:
      none !important;
  }


  .board-site-header #loginButton {
    display:
      none !important;
  }


  .board-site-header .header-action {
    min-height:
      36px !important;

    padding:
      0 9px !important;

    font-size:
      7px !important;
  }


  .board-site-header #whatsNewButton {
    margin-left:
      auto;
  }

}




/* DANQVORA FORUM THREAD SHELL V1 */

/* =========================================================
   THREAD HEADER
========================================================= */

.thread-site-header {
  position:
    sticky !important;

  top:
    0 !important;

  z-index:
    5000 !important;

  width:
    100%;

  background:
    rgba(8,8,8,.98) !important;

  color:
    #fff !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.08) !important;

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   TOP ROW
========================================================= */

.thread-site-header .forum-header-top {
  width:
    min(
      1460px,
      calc(100% - 50px)
    ) !important;

  min-height:
    74px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    30px !important;
}


/* =========================================================
   BRAND
========================================================= */

.thread-site-header .forum-brand {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    13px !important;

  min-width:
    max-content;
}


.thread-site-header .forum-logo {
  width:
    38px !important;

  height:
    38px !important;

  flex:
    0 0 38px;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  background:
    transparent !important;

  color:
    #fff !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;
}


.thread-site-header .forum-brand-copy strong {
  display:
    block !important;

  color:
    #fff !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  letter-spacing:
    4.5px !important;
}


.thread-site-header .forum-brand-copy span {
  display:
    block !important;

  margin-top:
    4px !important;

  color:
    #626262 !important;

  font-size:
    7px !important;

  letter-spacing:
    1.5px !important;
}


/* =========================================================
   LOGIN / REGISTER
========================================================= */

.thread-site-header #headerActions {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    8px !important;
}


.thread-site-header .header-button {
  min-height:
    40px !important;

  padding:
    0 13px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid
    rgba(255,255,255,.13) !important;

  background:
    transparent !important;

  color:
    #888 !important;

  font-size:
    8px !important;

  letter-spacing:
    .8px !important;
}


.thread-site-header .header-button:hover {
  color:
    #fff !important;

  border-color:
    rgba(255,255,255,.28) !important;
}


.thread-site-header .header-button.light {
  background:
    #fff !important;

  border-color:
    #fff !important;

  color:
    #080808 !important;

  font-weight:
    700 !important;
}


.thread-site-header .header-button.light:hover {
  background:
    transparent !important;

  color:
    #fff !important;
}


/* =========================================================
   NAVIGATION BAR
========================================================= */

.thread-site-header .forum-nav {
  position:
    relative;

  width:
    100% !important;

  min-height:
    48px !important;

  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  display:
    flex !important;

  align-items:
    center !important;

  background:
    #111 !important;

  border-top:
    1px solid
    rgba(255,255,255,.05);
}


/* =========================================================
   NAV LINKS
========================================================= */

.thread-site-header .forum-navigation {
  width:
    100% !important;

  min-height:
    48px !important;

  margin:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  gap:
    clamp(
      17px,
      2vw,
      28px
    ) !important;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.thread-site-header .forum-navigation::-webkit-scrollbar {
  display:
    none;
}


.thread-site-header .forum-navigation a {
  position:
    relative;

  min-height:
    48px;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center;

  flex:
    0 0 auto;

  color:
    #707070 !important;

  font-size:
    8px !important;

  font-weight:
    500;

  letter-spacing:
    .8px !important;

  white-space:
    nowrap;
}


.thread-site-header .forum-navigation a:hover,
.thread-site-header .forum-navigation a.active {
  color:
    #fff !important;
}


.thread-site-header .forum-navigation a.active::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    1px;

  background:
    #fff;
}


/* =========================================================
   MENU BUTTON
========================================================= */

.thread-site-header #forumMenuButton {
  display:
    none;

  width:
    38px !important;

  height:
    38px !important;

  padding:
    0 !important;

  flex:
    0 0 38px;

  border:
    1px solid
    rgba(255,255,255,.14) !important;

  background:
    transparent !important;

  color:
    #fff !important;

  font-size:
    16px !important;

  cursor:
    pointer;
}


/* =========================================================
   THREAD PAGE
========================================================= */

body .thread-page {
  width:
    min(
      1280px,
      calc(100% - 40px)
    ) !important;

  margin:
    0 auto !important;

  padding-top:
    30px !important;
}


/* =========================================================
   THREAD TITLE PANEL
========================================================= */

body .thread-header {
  border-color:
    #dedede;
}


body .thread-header h1 {
  letter-spacing:
    -1.8px;
}


/* =========================================================
   THREAD ACTION BUTTONS
========================================================= */

body .thread-actions-top button {
  transition:
    opacity .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}


/* =========================================================
   POSTS
========================================================= */

body .post-content {
  line-height:
    1.75;
}


body .post-footer {
  border-top-color:
    #ededed;
}


/* =========================================================
   REPLY COMPOSER
========================================================= */

body .reply-inner {
  border-color:
    #dedede;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 820px) {

  .thread-site-header .forum-header-top {
    width:
      calc(
        100% - 28px
      ) !important;

    min-height:
      66px !important;
  }


  .thread-site-header .forum-brand-copy strong {
    font-size:
      12px !important;

    letter-spacing:
      3.5px !important;
  }


  .thread-site-header .forum-nav {
    min-height:
      47px !important;

    padding:
      0 14px !important;
  }


  .thread-site-header #forumMenuButton {
    display:
      grid !important;

    place-items:
      center;
  }


  .thread-site-header .forum-navigation {
    position:
      absolute;

    top:
      47px;

    left:
      0;

    right:
      0;

    width:
      100% !important;

    min-height:
      0 !important;

    padding:
      8px 15px
      17px !important;

    display:
      none !important;

    flex-direction:
      column;

    align-items:
      stretch !important;

    gap:
      0 !important;

    background:
      #0b0b0b;

    border-top:
      1px solid
      rgba(255,255,255,.07);

    border-bottom:
      1px solid
      rgba(255,255,255,.07);

    overflow:
      visible;
  }


  .thread-site-header .forum-navigation.open {
    display:
      flex !important;
  }


  .thread-site-header .forum-navigation a {
    width:
      100%;

    min-height:
      44px;

    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }


  .thread-site-header .forum-navigation a.active::after {
    display:
      none;
  }


  body .thread-page {
    width:
      calc(
        100% - 28px
      ) !important;
  }


  body .thread-header-top {
    gap:
      24px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 560px) {

  .thread-site-header .forum-logo {
    width:
      35px !important;

    height:
      35px !important;

    flex-basis:
      35px;
  }


  .thread-site-header .forum-brand-copy strong {
    font-size:
      11px !important;

    letter-spacing:
      3px !important;
  }


  .thread-site-header .forum-brand-copy span {
    display:
      none !important;
  }


  .thread-site-header #loginButton {
    display:
      none !important;
  }


  .thread-site-header .header-button {
    min-height:
      36px !important;

    padding:
      0 9px !important;

    font-size:
      7px !important;
  }


  body .thread-page {
    width:
      calc(
        100% - 18px
      ) !important;

    padding-top:
      20px !important;
  }


  body .thread-header {
    padding:
      20px !important;
  }


  body .thread-header-top {
    flex-direction:
      column !important;
  }


  body .thread-actions-top {
    justify-content:
      flex-start !important;
  }


  body .post-content {
    padding:
      22px 18px
      15px !important;
  }


  body .post-footer {
    align-items:
      flex-start !important;

    flex-direction:
      column !important;
  }


  body .reply-inner {
    padding:
      16px !important;
  }


  body .reply-toolbar {
    align-items:
      flex-start !important;

    flex-direction:
      column !important;
  }

}




/* DANQVORA ADMIN SHELL V1 */

/* =========================================================
   ADMIN HEADER
========================================================= */

.admin-header {
  position:
    sticky !important;

  top:
    0 !important;

  z-index:
    6000 !important;

  width:
    100%;

  background:
    rgba(6,6,6,.985) !important;

  color:
    #fff !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.09) !important;

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   ADMIN TOP ROW
========================================================= */

.admin-header .admin-header-inner {
  width:
    min(
      1460px,
      calc(100% - 50px)
    ) !important;

  min-height:
    74px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    30px !important;
}


/* =========================================================
   ADMIN BRAND
========================================================= */

.admin-header .admin-brand {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    13px !important;

  min-width:
    max-content;
}


.admin-header .admin-mark {
  width:
    38px !important;

  height:
    38px !important;

  flex:
    0 0 38px;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    1px solid
    rgba(255,255,255,.20) !important;

  background:
    transparent !important;

  color:
    #fff !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;
}


.admin-header .admin-brand strong {
  display:
    block !important;

  color:
    #fff !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  letter-spacing:
    4.5px !important;
}


.admin-header .admin-brand span {
  display:
    block !important;

  margin-top:
    4px !important;

  color:
    #666 !important;

  font-size:
    7px !important;

  letter-spacing:
    1.5px !important;
}


/* =========================================================
   ADMIN ACCOUNT
========================================================= */

.admin-header .admin-account {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    12px !important;

  min-width:
    0;
}


.admin-header .admin-account-copy {
  text-align:
    right !important;
}


.admin-header .admin-account-copy strong {
  display:
    block !important;

  color:
    #fff !important;

  font-size:
    8px !important;

  font-weight:
    600 !important;
}


.admin-header .admin-account-copy span {
  display:
    block !important;

  margin-top:
    3px !important;

  color:
    #666 !important;

  font-size:
    6px !important;

  letter-spacing:
    .8px !important;
}


/* =========================================================
   LOG OUT
========================================================= */

.admin-header .admin-logout {
  min-height:
    40px !important;

  padding:
    0 13px !important;

  border:
    1px solid
    rgba(255,255,255,.14) !important;

  background:
    transparent !important;

  color:
    #8a8a8a !important;

  font-size:
    8px !important;

  letter-spacing:
    .8px !important;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.admin-header .admin-logout:hover {
  border-color:
    #fff !important;

  background:
    #fff !important;

  color:
    #080808 !important;
}


/* =========================================================
   ADMIN NAV
========================================================= */

.admin-header .admin-nav {
  width:
    100% !important;

  min-height:
    48px !important;

  padding-left:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  padding-right:
    max(
      25px,
      calc(
        (100vw - 1460px) / 2
      )
    ) !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    clamp(
      17px,
      2vw,
      28px
    ) !important;

  background:
    #111 !important;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.admin-header .admin-nav::-webkit-scrollbar {
  display:
    none;
}


.admin-header .admin-nav a {
  position:
    relative;

  min-height:
    48px;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center;

  flex:
    0 0 auto;

  color:
    #707070 !important;

  font-size:
    8px !important;

  font-weight:
    500;

  letter-spacing:
    .8px !important;

  white-space:
    nowrap;
}


.admin-header .admin-nav a:hover,
.admin-header .admin-nav a.active {
  color:
    #fff !important;
}


.admin-header .admin-nav a.active::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    1px;

  background:
    #fff;
}


/* =========================================================
   INTERNAL ADMIN INDICATOR
========================================================= */

.admin-header .admin-nav-internal {
  margin-left:
    auto;

  padding-left:
    14px !important;

  padding-right:
    14px !important;

  border-left:
    1px solid
    rgba(255,255,255,.10);

  border-right:
    1px solid
    rgba(255,255,255,.10);
}


/* =========================================================
   ADMIN CONTENT POLISH
========================================================= */

body .admin-page,
body .admin-main,
body main {
  scroll-margin-top:
    130px;
}


body .admin-panel,
body .admin-card,
body .admin-section {
  border-color:
    #dedede;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 820px) {

  .admin-header .admin-header-inner {
    width:
      calc(
        100% - 28px
      ) !important;

    min-height:
      66px !important;
  }


  .admin-header .admin-brand strong {
    font-size:
      12px !important;

    letter-spacing:
      3.5px !important;
  }


  .admin-header .admin-nav {
    min-height:
      47px !important;

    padding-left:
      14px !important;

    padding-right:
      14px !important;

    gap:
      20px !important;
  }


  .admin-header .admin-nav a {
    min-height:
      47px;
  }


  .admin-header .admin-nav-internal {
    margin-left:
      0;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 560px) {

  .admin-header .admin-mark {
    width:
      35px !important;

    height:
      35px !important;

    flex-basis:
      35px;
  }


  .admin-header .admin-brand strong {
    font-size:
      11px !important;

    letter-spacing:
      3px !important;
  }


  .admin-header .admin-brand span {
    display:
      none !important;
  }


  .admin-header .admin-account-copy {
    display:
      none !important;
  }


  .admin-header .admin-logout {
    min-height:
      36px !important;

    padding:
      0 10px !important;

    font-size:
      7px !important;
  }

}




/* DANQVORA BRIEF DYNAMIC V1 */

.brief-dynamic-card {
  color:
    inherit !important;

  text-decoration:
    none !important;

  cursor:
    pointer;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.brief-dynamic-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(255,255,255,.24) !important;
}


.brief-dynamic-card:hover h3 {
  color:
    #fff;
}


.brief-category {
  cursor:
    pointer;
}


.brief-empty-state {
  grid-column:
    1 / -1;

  min-height:
    260px;

  padding:
    45px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  border:
    1px solid
    rgba(255,255,255,.09);

  background:
    #080808;
}


.brief-empty-code {
  margin-bottom:
    22px;

  color:
    #555;

  font-size:
    8px;

  letter-spacing:
    2px;
}


.brief-empty-state h3 {
  max-width:
    520px;

  margin:
    0;

  color:
    #fff;

  font-size:
    clamp(
      25px,
      4vw,
      42px
    );

  line-height:
    1;

  letter-spacing:
    -1.5px;

  font-weight:
    500;
}


.brief-empty-state p {
  max-width:
    530px;

  margin:
    20px 0 0;

  color:
    #777;

  font-size:
    11px;

  line-height:
    1.7;
}


.brief-error-state {
  border-color:
    rgba(255,255,255,.16);
}


.brief-empty-visual {
  opacity:
    .35;
}


@media(max-width:720px) {

  .brief-empty-state {
    min-height:
      220px;

    padding:
      28px;
  }

}



/* DANQVORA BRIEF ADMIN V1 */

.brief-editor-section {
  overflow:
    hidden;
}


.brief-editor-header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.brief-new-button {
  min-height:
    36px;

  padding:
    0 13px;

  border:
    1px solid #111;

  background:
    #111;

  color:
    #fff;

  font-size:
    8px;

  letter-spacing:
    1px;

  cursor:
    pointer;
}


.brief-editor-message {
  min-height:
    20px;

  margin:
    0 0 18px;

  color:
    #777;

  font-size:
    9px;

  line-height:
    1.5;
}


.brief-editor-message.success {
  color:
    #266632;
}


.brief-editor-message.error {
  color:
    #a02d2d;
}


.brief-editor-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    340px;

  gap:
    24px;
}


.brief-editor-form,
.brief-admin-library {
  border:
    1px solid #dedede;

  background:
    #fff;
}


.brief-editor-form {
  padding:
    25px;
}


.brief-editor-state {
  margin-bottom:
    25px;

  padding-bottom:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-bottom:
    1px solid #e7e7e7;
}


.brief-editor-state > div span {
  display:
    block;

  margin-bottom:
    5px;

  color:
    #969696;

  font-size:
    7px;

  letter-spacing:
    1.3px;
}


.brief-editor-state > div strong {
  display:
    block;

  max-width:
    600px;

  color:
    #111;

  font-size:
    16px;

  font-weight:
    600;
}


.brief-status-badge,
.brief-mini-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid #d4d4d4;

  font-size:
    7px;

  letter-spacing:
    .8px;
}


.brief-status-badge {
  min-height:
    30px;

  padding:
    0 10px;
}


.brief-status-badge.published,
.brief-mini-status.published {
  border-color:
    #111;

  background:
    #111;

  color:
    #fff;
}


.brief-status-badge.draft,
.brief-mini-status.draft {
  background:
    #f2f2f2;

  color:
    #777;
}


.brief-form-two {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;
}


.brief-form-field {
  margin-bottom:
    17px;
}


.brief-form-field label {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #666;

  font-size:
    7px;

  letter-spacing:
    1.2px;
}


.brief-form-field input,
.brief-form-field textarea {
  box-sizing:
    border-box;

  width:
    100%;

  border:
    1px solid #d5d5d5;

  outline:
    none;

  background:
    #fff;

  color:
    #111;

  font:
    inherit;
}


.brief-form-field input {
  height:
    44px;

  padding:
    0 12px;
}


.brief-form-field textarea {
  padding:
    12px;

  resize:
    vertical;

  line-height:
    1.6;
}


.brief-form-field input:focus,
.brief-form-field textarea:focus {
  border-color:
    #777;
}


.brief-form-field small {
  display:
    block;

  margin-top:
    6px;

  color:
    #999;

  font-size:
    7px;

  line-height:
    1.5;
}


.brief-featured-control {
  margin:
    5px 0 22px;

  padding:
    15px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  border:
    1px solid #dedede;

  cursor:
    pointer;
}


.brief-featured-control input {
  margin-top:
    2px;
}


.brief-featured-control strong {
  display:
    block;

  color:
    #222;

  font-size:
    8px;

  letter-spacing:
    .7px;
}


.brief-featured-control small {
  display:
    block;

  margin-top:
    5px;

  color:
    #888;

  font-size:
    7px;

  line-height:
    1.5;
}


.brief-editor-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.brief-editor-button {
  min-height:
    39px;

  padding:
    0 12px;

  border:
    1px solid #cfcfcf;

  background:
    #fff;

  color:
    #555;

  font-size:
    7px;

  letter-spacing:
    .8px;

  cursor:
    pointer;
}


.brief-editor-button.primary {
  border-color:
    #111;

  background:
    #111;

  color:
    #fff;
}


.brief-editor-button.secondary {
  border-color:
    #777;

  color:
    #111;
}


.brief-editor-button.danger {
  margin-left:
    auto;

  border-color:
    #d9b8b8;

  color:
    #9a2c2c;
}


.brief-editor-button:disabled {
  opacity:
    .35;

  cursor:
    not-allowed;
}


/* =========================================================
   ARTICLE LIBRARY
========================================================= */

.brief-admin-library {
  align-self:
    start;
}


.brief-library-heading {
  padding:
    19px;

  border-bottom:
    1px solid #e3e3e3;
}


.brief-library-heading span {
  display:
    block;

  margin-bottom:
    5px;

  color:
    #999;

  font-size:
    7px;

  letter-spacing:
    1.3px;
}


.brief-library-heading strong {
  color:
    #111;

  font-size:
    13px;
}


.brief-admin-article-list {
  max-height:
    720px;

  overflow-y:
    auto;
}


.brief-library-item {
  width:
    100%;

  padding:
    17px 18px;

  display:
    block;

  border:
    0;

  border-bottom:
    1px solid #e9e9e9;

  background:
    #fff;

  text-align:
    left;

  cursor:
    pointer;
}


.brief-library-item:hover,
.brief-library-item.active {
  background:
    #f5f5f3;
}


.brief-library-item.active {
  box-shadow:
    inset 2px 0 0 #111;
}


.brief-library-item-top {
  margin-bottom:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  color:
    #888;

  font-size:
    7px;

  letter-spacing:
    .8px;
}


.brief-mini-status {
  min-height:
    22px;

  padding:
    0 7px;
}


.brief-library-item > strong {
  display:
    block;

  color:
    #222;

  font-size:
    11px;

  line-height:
    1.45;
}


.brief-library-item > small {
  display:
    block;

  margin-top:
    9px;

  color:
    #999;

  font-size:
    7px;

  line-height:
    1.4;
}


.brief-admin-empty {
  padding:
    28px 18px;

  color:
    #888;

  font-size:
    9px;

  line-height:
    1.6;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px) {

  .brief-editor-layout {
    grid-template-columns:
      1fr;
  }


  .brief-admin-article-list {
    max-height:
      420px;
  }

}


@media(max-width:650px) {

  .brief-editor-header-actions {
    align-items:
      flex-end;

    flex-direction:
      column;
  }


  .brief-form-two {
    grid-template-columns:
      1fr;
  }


  .brief-editor-form {
    padding:
      17px;
  }


  .brief-editor-state {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .brief-editor-actions {
    flex-direction:
      column;
  }


  .brief-editor-button {
    width:
      100%;
  }


  .brief-editor-button.danger {
    margin-left:
      0;
  }

}