/* L2Eirin cabinet in the look of the new site (template/site/l2eirin_new2): background art, fonts
   (EB Garamond / Forum headings, Intro Book text), gold lines with diamonds, chevron buttons.
   Loaded after gwstyle.css from head.tpl (not on the admin URL). Remove that <link> to roll back. */

@font-face {
  font-family: "L2E Forum";
  src: url("/template/site/l2eirin_new2/fonts/forum/Forum-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "L2E Intro";
  src: url("/template/site/l2eirin_new2/fonts/intro/fonts/Intro-Book.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "L2E Garamond";
  src: url("/template/site/l2eirin_new2/fonts/eb-garamond/EBGaramond%5Bwght%5D.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --e-gold: #c9ad77;
  --e-gold-hi: #ecd393;
  --e-gold-text: #dfc683;
  --e-head: #e5d7b7;
  --e-light: #efe4d0;
  --e-text: #c9c6be;
  --e-muted: #8e98a5;
  --e-line: #b6a16b33;
  --e-line-2: #c9ad7755;
  --e-panel: rgba(20, 20, 19, 0.78);
  --e-panel-2: rgba(12, 13, 15, 0.72);
  --e-input: rgba(8, 9, 10, 0.7);
  --e-sans: "L2E Intro", "Intro Book", Arial, sans-serif;
  --e-serif: "L2E Forum", "Forum", Georgia, serif;
  --e-title: "L2E Garamond", "EB Garamond", Georgia, serif;
  --font-0: var(--e-sans);
  --font-1: var(--e-sans);
  --color-accent: 201, 173, 119;
  --color-accent-hover: 236, 211, 147;
}

/* ---------- page ---------- */
html body {
  color: var(--e-text);
  font-family: var(--e-sans);
  background:
    linear-gradient(90deg, #101112ec, #101112c0 50%, #101112ec),
    url("/template/site/l2eirin_new2/images/bg/inner-screens.webp") center top / cover fixed,
    #111314;
}
html body #page-container,
html body #main-container {
  background: transparent;
}
html body,
html body .form-control,
html body .btn,
html body .table,
html body label,
html body .dropdown-item,
html body .nav-link,
html body .block-content,
html body p,
html body small {
  font-family: var(--e-sans);
}
html body a {
  color: var(--e-gold-text);
}
html body a:hover {
  color: #f3e1b0;
}
html body ::selection {
  background: #c9ad7755;
  color: #fff;
}
html body h1:not(.popover-header),
html body h2:not(.popover-header),
html body h3:not(.popover-header),
html body h4:not(.popover-header),
html body h5:not(.popover-header),
html body h6:not(.popover-header),
html body .h1,
html body .h2,
html body .h3,
html body .h4,
html body .h5,
html body .h6 {
  font-family: var(--e-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  color: var(--e-head) !important;
}
html body .text-muted {
  color: var(--e-muted) !important;
}
html body .text-primary,
html body .text-primary-light,
html body .text-warning {
  color: var(--e-gold-text) !important;
}
html body .text-info {
  color: #9cc7dc !important;
}
html body .text-success {
  color: #9fd49a !important;
}
html body .text-danger {
  color: #e48a7c !important;
}
html body code {
  color: var(--e-gold-text);
}
html body .font-w600,
html body .font-w700,
html body b,
html body strong {
  font-weight: 600;
}

/* ---------- header and menus ---------- */
html body #page-header {
  background: rgba(11, 12, 14, 0.9) !important;
  border-bottom: 1px solid var(--e-line);
  box-shadow: 0 10px 30px -18px #000;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html body #page-header .content-header {
  min-height: 72px;
}
html body .l2e-logo {
  display: inline-flex;
  align-items: center;
  margin-right: 24px;
}
html body .l2e-logo img {
  display: block;
  width: 118px;
  height: auto;
  filter: drop-shadow(0 2px 6px #0008);
  transition: filter 0.3s;
}
html body .l2e-logo:hover img {
  filter: drop-shadow(0 0 10px #c9ad7766);
}
html body .l2e-logo::before {
  display: none;
}
html body .nav-main-header > li > a,
html body .nav-main-header a,
html body .btn-dual-secondary {
  font-family: var(--e-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d8d2c4 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
html body .nav-main-header a > i,
html body .btn-dual-secondary > i {
  color: var(--e-gold) !important;
}
html body .nav-main-header a:hover,
html body .nav-main-header a:focus,
html body .nav-main-header li.open > a.nav-submenu,
html body .nav-main-header li:hover > a.nav-submenu,
html body .btn-dual-secondary:hover,
html body .btn-dual-secondary:focus,
html body .show > .btn-dual-secondary.dropdown-toggle {
  color: #fff6e2 !important;
  background: linear-gradient(180deg, transparent 60%, #c9ad7714) !important;
  border-bottom-color: var(--e-gold) !important;
}
html body .nav-main-header a.active,
html body .btn-dual-secondary.active,
html body .btn-dual-secondary:not([disabled]):not(.disabled).active {
  color: var(--e-gold-hi) !important;
  background: linear-gradient(180deg, transparent 40%, #c9ad7722) !important;
  border-bottom-color: var(--e-gold-hi) !important;
}
html body .nav-main-header a:hover > i,
html body .nav-main-header a:focus > i,
html body .nav-main-header a.active > i,
html body .nav-main-header .open a > i {
  color: var(--e-gold-hi) !important;
}
/* server switcher: the first menu of the header */
html body #page-header .content-header-section:first-child .nav-main-header > li > a {
  color: var(--e-gold-hi) !important;
  border: 1px solid var(--e-line-2) !important;
  background: linear-gradient(90deg, #c9ad771f, #c9ad7708) !important;
}
html body #page-header .content-header-section:first-child .nav-main-header > li > a:hover,
html body #page-header .content-header-section:first-child .nav-main-header > li.open > a {
  border-color: var(--e-gold) !important;
}
/* drop-down lists of the header and the user menu */
html body .nav-main-header ul,
html body .dropdown-menu {
  background: rgba(16, 17, 19, 0.97) !important;
  border: 1px solid var(--e-line-2) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 40px -12px #000 !important;
  padding: 6px 0;
}
html body .nav-main-header li ul li a,
html body .dropdown-item {
  background: transparent !important;
  color: #d8d2c4 !important;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
  border: 0 !important;
}
html body .nav-main-header li ul li a i,
html body .dropdown-item i {
  color: var(--e-gold) !important;
}
html body .nav-main-header > li ul li a:hover,
html body .dropdown-item:hover,
html body .dropdown-item:focus {
  background: #c9ad771a !important;
  color: var(--e-gold-hi) !important;
}
html body .dropdown-divider,
html body .border-b {
  border-color: var(--e-line) !important;
}
html body .dropdown-menu .h6 {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--e-gold-text) !important;
}
/* mobile sidebar */
html body #sidebar,
html body #page-container.page-header-modern #sidebar,
html body #page-container #sidebar {
  background: rgba(13, 14, 16, 0.98) !important;
  border-right: 1px solid var(--e-line);
}
html body #sidebar .content-header {
  background: transparent !important;
  border-bottom: 1px solid var(--e-line);
}
html body #sidebar .nav-main a {
  color: #d8d2c4 !important;
  font-family: var(--e-sans);
  letter-spacing: 0.04em;
}
html body #sidebar .nav-main a > i {
  color: var(--e-gold) !important;
}
html body #sidebar .nav-main a.active,
html body #sidebar .nav-main a:hover {
  color: var(--e-gold-hi) !important;
  background: #c9ad7714 !important;
}
html body #page-header-loader {
  background: #0d0e10 !important;
}

/* ---------- panels (blocks) ---------- */
html body .block {
  position: relative;
  background: var(--e-panel) !important;
  border: 1px solid var(--e-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 22px 50px -26px #000, inset 0 0 0 4px #0002 !important;
  color: var(--e-text);
}
html body .block > .block-header:first-child::before,
html body .block-content-full.l2e-gem::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid var(--e-gold);
  background: #161a20;
  transform: translateX(-50%) rotate(45deg);
  z-index: 2;
}
html body .block-header,
html body .block-header-default,
html body .block-themed > .block-header,
html body .block-header.bg-gd-dusk,
html body .block-header.bg-primary-dark,
html body .block-header.bg-gd-primary,
html body .block-header.bg-gd-emerald {
  background: linear-gradient(90deg, #c9ad7712, transparent 70%) !important;
  border-bottom: 1px solid var(--e-line) !important;
  border-radius: 0 !important;
}
html body .block-title {
  font-family: var(--e-serif) !important;
  font-size: 17px;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
  color: var(--e-head) !important;
  text-transform: uppercase;
}
html body .block-themed > .block-header > .block-title,
html body .block-themed > .block-header > .block-title small {
  color: var(--e-head) !important;
}
html body .block-header .btn-block-option,
html body .btn-block-option {
  color: var(--e-gold) !important;
}
html body .block-header .btn-block-option:hover {
  color: var(--e-gold-hi) !important;
}
html body .block-content {
  color: var(--e-text);
}
html body .bg-body-light,
html body .block-content.bg-body-light {
  background: rgba(0, 0, 0, 0.28) !important;
  border: 0 !important;
  border-top: 1px solid var(--e-line) !important;
  box-shadow: none !important;
}
html body .bg-white,
html body .options-overlay {
  background: rgba(14, 15, 17, 0.92) !important;
}
html body .bg-primary,
html body .bg-info,
html body .bg-gd-dusk,
html body .bg-gd-primary,
html body .bg-gd-emerald,
html body .bg-primary-dark {
  background: linear-gradient(90deg, #c9ad771f, #c9ad7708) !important;
}
html body hr,
html body .border-bottom,
html body .border-right,
html body .border-top {
  border-color: var(--e-line) !important;
}
/* stat tiles on the main page */
html body a.block.block-link-shadow:hover,
html body a.block.block-link-pop:hover {
  border-color: var(--e-line-2) !important;
  box-shadow: 0 22px 50px -22px #000, 0 0 0 1px #c9ad7733 !important;
  transform: translateY(-2px);
}
html body a.block {
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
html body .block .font-size-h3,
html body .block .font-size-h4 {
  font-family: var(--e-title);
  color: var(--e-light) !important;
}
html body .block .font-size-sm.text-muted.text-uppercase,
html body .block .text-uppercase.text-muted {
  font-size: 10px !important;
  letter-spacing: 0.2em;
}
html body .block .si,
html body .block .fa-2x,
html body .block .fa-4x,
html body .block .fa-diamond,
html body .block .si-wallet,
html body .block .si-users,
html body .block .fa-gift {
  color: var(--e-gold) !important;
}
html body .badge,
html body .badge-secondary,
html body .badge-primary,
html body .badge-pill {
  font-family: var(--e-sans);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #e3dccd !important;
  background: #000a !important;
  border: 1px solid #ffffff1f;
  border-radius: 2px;
}
/* ribbons (the blue "i" corner) */
html body .ribbon-primary .ribbon-box,
html body .ribbon-primary.ribbon-modern .ribbon-box {
  background: linear-gradient(135deg, #b8955a, var(--e-gold-hi)) !important;
  color: #1b1610 !important;
}
html body .ribbon-primary.ribbon-bookmark .ribbon-box::before {
  border-color: #b8955a !important;
  border-left-color: transparent !important;
}
html body .ribbon-primary.ribbon-bookmark.ribbon-right .ribbon-box::before {
  border-color: #b8955a !important;
  border-right-color: transparent !important;
}

/* ---------- buttons ---------- */
html body .btn {
  border-radius: 0 !important;
  font-family: var(--e-sans);
  font-weight: 400;
  letter-spacing: 0.06em;
  box-shadow: none !important;
  transition: background 0.25s, border-color 0.25s, color 0.25s, filter 0.25s, transform 0.25s;
}
html body .btn-rounded {
  border-radius: 0 !important;
}
/* main actions: gold chevron plate */
html body .btn-primary,
html body .btn-alt-success,
html body .btn-alt-primary,
html body .submit-form,
html body .btn-pay {
  color: #1b1610 !important;
  background: linear-gradient(180deg, #ecd393, #c9ad77 55%, #a8844b) !important;
  border: 0 !important;
  padding-left: 22px;
  padding-right: 22px;
  text-transform: uppercase;
  font-size: 13px;
  -webkit-clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
html body .btn-primary i,
html body .btn-alt-success i,
html body .btn-alt-primary i,
html body .submit-form i {
  color: #1b1610 !important;
}
html body .btn-primary:hover,
html body .btn-alt-success:hover,
html body .btn-alt-primary:hover,
html body .submit-form:hover,
html body .btn-primary:focus,
html body .btn-alt-success:focus,
html body .btn-alt-primary:focus,
html body .submit-form:focus {
  color: #000 !important;
  filter: brightness(1.1) drop-shadow(0 0 8px #c49b4e66);
}
html body .btn-primary:not([disabled]):not(.disabled):active,
html body .btn-alt-success:not([disabled]):not(.disabled):active,
html body .btn-alt-primary:not([disabled]):not(.disabled):active {
  background: linear-gradient(180deg, #c9ad77, #a8844b) !important;
  color: #000 !important;
}
/* quiet actions: dark plate with a gold line */
html body .btn-secondary,
html body .btn-alt-secondary,
html body .btn-alt-info,
html body .btn-outline-primary,
html body .btn-noborder,
html body .btn-sm.btn-secondary {
  color: #e5d7b7 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid var(--e-line-2) !important;
}
html body .btn-secondary i,
html body .btn-alt-secondary i,
html body .btn-alt-info i,
html body .btn-outline-primary i {
  color: var(--e-gold) !important;
}
html body .btn-secondary:hover,
html body .btn-alt-secondary:hover,
html body .btn-alt-info:hover,
html body .btn-outline-primary:hover,
html body .btn-secondary:not([disabled]):not(.disabled):active {
  color: #fff6e2 !important;
  background: #c9ad771f !important;
  border-color: var(--e-gold) !important;
}
html body .btn-alt-danger {
  color: #f0b3a8 !important;
  background: rgba(80, 20, 14, 0.35) !important;
  border: 1px solid #b0584a88 !important;
}
html body .btn-alt-danger:hover {
  color: #fff !important;
  background: rgba(140, 40, 28, 0.5) !important;
  border-color: #d0705f !important;
}
html body .btn:disabled,
html body .btn.disabled {
  opacity: 0.5;
  filter: grayscale(0.4);
}
/* text links that act as buttons (account actions, sign-in links) */
html body .block .btn-link,
html body a.link-effect {
  color: var(--e-gold-text);
}
html body a.link-effect::before {
  background-color: var(--e-gold) !important;
}

/* ---------- forms ---------- */
html body label,
html body .col-form-label {
  font-family: var(--e-sans);
  font-size: 13px;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  color: #d8d2c4;
}
html body .form-control,
html body .custom-select,
html body .input-group-text {
  font-family: var(--e-sans);
  color: #e3dccd !important;
  background-color: var(--e-input) !important;
  border: 1px solid #c9ad7733 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
html body .form-control:focus {
  color: #fff6e2 !important;
  border-color: var(--e-gold) !important;
  box-shadow: 0 0 0 3px #c9ad771f !important;
}
html body .form-control::placeholder {
  color: #6f7680 !important;
  opacity: 1;
}
html body .form-control option,
html body .form-control optgroup {
  background: #141516;
  color: #e3dccd;
}
html body .input-group-text {
  color: var(--e-gold) !important;
}
html body .form-text,
html body .help-block {
  color: var(--e-muted) !important;
}
html body .custom-control-label::before,
html body .css-control-input ~ .css-control-indicator {
  background: var(--e-input) !important;
  border: 1px solid var(--e-line-2) !important;
}
html body .custom-control-input:checked ~ .custom-control-label::before,
html body .css-checkbox .css-control-input:checked ~ .css-control-indicator,
html body .css-control-primary .css-control-input:checked ~ .css-control-indicator,
html body .css-control-secondary .css-control-input:checked ~ .css-control-indicator,
html body .css-control-success .css-control-input:checked ~ .css-control-indicator {
  background: var(--e-gold) !important;
  border-color: var(--e-gold-hi) !important;
}
html body .css-switch .css-control-input ~ .css-control-indicator::after {
  background: #d8d2c4 !important;
}
html body .css-switch .css-control-input:checked ~ .css-control-indicator::after {
  background: #1b1610 !important;
}
html body .invalid-feedback,
html body .err-msg {
  color: #e48a7c;
}
html body .is-invalid .form-control,
html body .form-control.is-invalid {
  border-color: #b0584a !important;
}

/* ---------- tabs ---------- */
html body .nav-tabs,
html body .nav-tabs-block,
html body .nav-tabs-alt {
  background: rgba(0, 0, 0, 0.25) !important;
  border-bottom: 1px solid var(--e-line) !important;
}
html body .nav-tabs .nav-link,
html body .nav-tabs-block .nav-link,
html body .nav-tabs-alt .nav-link {
  font-family: var(--e-sans) !important;
  font-size: 12px;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 20px;
}
html body .nav-tabs .nav-link:hover,
html body .nav-tabs-block .nav-link:hover,
html body .nav-tabs-alt .nav-link:hover {
  color: #efe4d0 !important;
}
html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-item.show .nav-link,
html body .nav-tabs-block .nav-link.active,
html body .nav-tabs-alt .nav-link.active {
  color: var(--e-gold-hi) !important;
  background: linear-gradient(180deg, transparent, #c9ad771a) !important;
  box-shadow: inset 0 -2px var(--e-gold) !important;
}
html body .nav-pills .nav-link.active,
html body .nav-pills .show > .nav-link {
  background: #c9ad7726 !important;
  color: var(--e-gold-hi) !important;
}

/* ---------- tables, lists ---------- */
html body .table {
  color: var(--e-text);
  font-size: 14px;
}
html body .table thead th,
html body .table th {
  font-family: var(--e-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e0c687;
  background: linear-gradient(90deg, rgba(165, 149, 109, 0.2), rgba(165, 149, 109, 0.06));
  border-color: #c7c1ad1f !important;
}
html body .table td,
html body .table th,
html body .table-bordered,
html body .table-bordered td,
html body .table-bordered th {
  border-color: #c7c1ad1f !important;
}
html body .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02);
}
html body .table-hover tbody tr:hover,
html body .table-warning,
html body .table-warning > td {
  color: #fff;
  background: rgba(165, 149, 109, 0.08) !important;
}
html body .list-group-item {
  color: var(--e-text);
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: var(--e-line) !important;
}
html body .list-group-item-action:hover,
html body .list-group-item.active {
  background: #c9ad771a !important;
  color: var(--e-gold-hi) !important;
}
html body .page-link {
  color: var(--e-gold-text) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-color: var(--e-line) !important;
}
html body .page-item.active .page-link {
  color: #1b1610 !important;
  background: var(--e-gold) !important;
  border-color: var(--e-gold) !important;
}
html body .blockquote,
html body .blockquote-footer {
  color: var(--e-muted);
}

/* ---------- alerts, popovers, tooltips ---------- */
html body .alert {
  border-radius: 0;
  border: 1px solid var(--e-line);
  border-left: 2px solid var(--e-gold);
  background: #c9ad770f !important;
  color: var(--e-text) !important;
}
html body .alert-danger {
  border-left-color: #c0604f;
  background: rgba(120, 30, 20, 0.2) !important;
}
html body .alert-success {
  border-left-color: #6fae68;
  background: rgba(40, 90, 40, 0.2) !important;
}
html body .popover,
html body .tooltip-inner,
html body .tippy-content {
  font-family: var(--e-sans);
  color: var(--e-text);
  background: #141516;
  border: 1px solid var(--e-line-2);
  border-radius: 0;
}
html body .popover-header {
  font-family: var(--e-serif);
  background: rgba(0, 0, 0, 0.3);
  color: var(--e-head);
  border-bottom-color: var(--e-line);
}
html body .popover-body {
  color: var(--e-text);
}

/* ---------- modal windows ---------- */
html body .modal-backdrop.show {
  background: #050607;
  opacity: 0.82;
}
html body .modal-content {
  background: #141516 !important;
  border: 1px solid var(--e-line-2) !important;
  border-radius: 0 !important;
  box-shadow: 0 30px 80px -20px #000 !important;
}
html body .modal-content .block {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .modal-content .block > .block-header:first-child::before {
  display: none;
}
html body .modal-content .block-header {
  padding-top: 18px;
  padding-bottom: 18px;
}
html body .modal-content .block-title {
  font-size: 19px;
}
html body .modal-ajax-footer {
  background: rgba(0, 0, 0, 0.3) !important;
  border-top: 1px solid var(--e-line);
}

/* ---------- sign-in / sign-up / reminder ---------- */
html body .content > .pb-20.text-center h1,
html body .content-full .pb-20.text-center .h4 {
  font-family: var(--e-title) !important;
  font-size: 34px !important;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f3ead8 !important;
  text-shadow: 0 2px 18px #000;
}
html body .content-full .pb-20.text-center {
  position: relative;
  padding-bottom: 34px !important;
}
html body .content-full .pb-20.text-center::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--e-gold), transparent);
}
html body .js-validation-signin .block,
html body .js-validation-signup .block,
html body .js-validation-reminder .block {
  box-shadow: 0 30px 70px -30px #000, inset 0 0 0 4px #0002 !important;
}
html body .js-validation-signin .bg-body-light a,
html body .js-validation-signup .bg-body-light a,
html body .js-validation-reminder .bg-body-light a {
  color: var(--e-muted) !important;
  font-size: 13px;
  letter-spacing: 0.03em;
}
html body .js-validation-signin .bg-body-light a:hover,
html body .js-validation-signup .bg-body-light a:hover,
html body .js-validation-reminder .bg-body-light a:hover {
  color: var(--e-gold-hi) !important;
}

/* ---------- warehouse / game accounts ---------- */
html body .check_account_wh,
html body .list_account .bg-primary,
html body .accordion_account .block-header {
  background: rgba(0, 0, 0, 0.3) !important;
}
html body .css-control.css-checkbox.css-control-secondary,
html body .check_account_wh .css-control {
  color: var(--e-text);
}
html body [class*="check_account_wh"] .css-control-input:checked ~ .css-control-indicator {
  background: var(--e-gold) !important;
}

/* ---------- footer ---------- */
html body #page-footer {
  background: rgba(11, 12, 14, 0.85);
  border-top: 1px solid var(--e-line);
  color: var(--e-muted);
}
html body #page-footer a {
  color: var(--e-gold-text);
}
html body #page-footer .form-control {
  background: transparent !important;
  border: 1px solid var(--e-line-2) !important;
}

/* ---------- donations page: its own widget, retuned through its variables ---------- */
html body .donate-widget {
  --bg-card: rgba(20, 20, 19, 0.78);
  --bg-hover: rgba(201, 173, 119, 0.08);
  --bg-input: rgba(8, 9, 10, 0.7);
  --border: #b6a16b33;
  --gold: #c9ad77;
  --gold-light: #ecd393;
  --gold-dim: rgba(201, 173, 119, 0.3);
  --text: #c9c6be;
  --text-dim: #8e98a5;
  font-family: var(--e-sans);
}
html body .donate-widget .card {
  border-radius: 0;
  box-shadow: 0 22px 50px -26px #000, inset 0 0 0 4px #0002;
}
html body .donate-widget .page-header h1 {
  font-family: var(--e-title) !important;
  color: #f3ead8 !important;
  letter-spacing: 0.08em;
}
html body .donate-widget .sec-label {
  font-family: var(--e-serif);
  font-size: 0.8rem;
}

/* ---------- small screens ---------- */
@media (max-width: 1360px) {
  html body .nav-main-header > li > a {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
  html body .l2e-logo {
    margin-right: 10px;
  }
}
@media (max-width: 991px) {
  html body .l2e-logo img {
    width: 96px;
  }
  html body .content-full .pb-20.text-center .h4 {
    font-size: 26px !important;
  }
}
/* ---------- header fits the screen (logo + server switcher + menu) ---------- */
html body #page-header .content-header {
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  gap: 10px;
}
html body #page-header .content-header-section {
  white-space: nowrap;
}
@media (max-width: 1799px) {
  html body #page-header .content-header-section:not(:first-child) .nav-main-header > li > a > i {
    display: none;
  }
  html body .nav-main-header > li > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    letter-spacing: 0.04em;
  }
  html body .l2e-logo {
    margin-right: 8px;
  }
  html body .l2e-logo img {
    width: 100px;
  }
}
@media (max-width: 1365px) {
  html body .nav-main-header > li > a,
  html body #page-header .btn-dual-secondary {
    font-size: 10.5px;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
/* narrow desktops: menu as icons with the label in a tooltip-free compact form */
@media (min-width: 992px) and (max-width: 1239px) {
  html body #page-header .content-header-section:not(:first-child) .nav-main-header > li > a {
    font-size: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html body #page-header .content-header-section:not(:first-child) .nav-main-header > li > a > i {
    display: inline-block;
    font-size: 15px;
    margin: 0 !important;
  }
  html body #page-header .content-header-section:not(:first-child) .nav-main-header > li > ul a {
    font-size: 13px !important;
  }
  html body .l2e-logo img {
    width: 86px;
  }
}

/* phones: the "create game account" plate goes under the title instead of over it */
@media (max-width: 767px) {
  html body .btn-create-account {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: block;
    margin: 14px auto 0;
    font-size: 12px !important;
  }
}

/* the header (blurred) is its own layer: keep it and its drop-downs above the page blocks */
html body #page-header {
  z-index: 1031;
}
html body #sidebar,
html body #page-container #sidebar {
  background: #0d0e10 !important;
}

/* hover menu over the master-account tile */
html body .options-container .options-overlay,
html body .options-container .options-overlay.bg-white {
  background: rgba(20, 19, 16, 0.97) !important;
  border: 1px solid var(--e-line-2);
}

/* sign-in / sign-up / password reminder: the main button larger and centred under the form */
html body .js-validation-signin [class*="col-"]:has(> .submit-form),
html body .js-validation-signup [class*="col-"]:has(> .submit-form),
html body .js-validation-reminder [class*="col-"]:has(> .submit-form) {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center !important;
}
html body .js-validation-signin .submit-form,
html body .js-validation-signup .submit-form,
html body .js-validation-reminder .submit-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 42px;
  margin: 6px auto 0;
  padding: 0 34px;
  font-size: 13px !important;
  letter-spacing: 0.12em;
  -webkit-clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
}
html body .js-validation-signin .submit-form i,
html body .js-validation-signup .submit-form i,
html body .js-validation-reminder .submit-form i {
  display: none;
}
@media (max-width: 575px) {
  html body .js-validation-signin .submit-form,
  html body .js-validation-signup .submit-form,
  html body .js-validation-reminder .submit-form {
    width: 100%;
    min-width: 0;
  }
}

/* server list of the header (bootstrap drop-down inside the menu bar): one server per line */
html body #page-header .dropdown-menu {
  min-width: 220px;
  width: auto;
}
html body #page-header .dropdown-menu > div {
  display: block !important;
  margin: 0 !important;
}
html body #page-header .dropdown-menu .dropdown-item,
html body #page-header .nav-main-header .dropdown-menu a {
  display: block !important;
  float: none !important;
  width: 100%;
  padding: 9px 18px !important;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 13px !important;
  border: 0 !important;
}
html body #page-header .dropdown-menu .dropdown-item.active,
html body #page-header .dropdown-menu .dropdown-item:active {
  color: var(--e-gold-hi) !important;
  background: #c9ad7726 !important;
}

@media (max-width: 575px) {
  html body .js-validation-signin .submit-form,
  html body .js-validation-signup .submit-form,
  html body .js-validation-reminder .submit-form {
    white-space: nowrap;
    padding: 0 20px;
    font-size: 13px !important;
    letter-spacing: 0.06em;
  }
}

/* phones: the header (logo, sign-in / sign-up or user + log-out, burger) on one line */
@media (max-width: 575px) {
  html body #page-header .content-header {
    padding-left: 10px;
    padding-right: 6px;
    gap: 4px;
  }
  html body .l2e-logo {
    margin-right: 4px;
  }
  html body .l2e-logo img {
    width: 76px;
  }
  html body #page-header .content-header-section:last-child .btn {
    font-size: 10px !important;
    letter-spacing: 0.02em;
    padding: 6px 5px !important;
    margin-right: 0 !important;
  }
  html body #page-header .content-header-section:last-child .btn > i.si-login,
  html body #page-header .content-header-section:last-child .btn > i.fa-user-plus,
  html body #page-header .content-header-section:last-child .btn > i.si-logout {
    display: none;
  }
}

/* pop-up notifications (bootstrap-notify): solid, above the header */
html body [data-notify="container"].alert {
  z-index: 1060 !important;
  background: #17171a !important;
  color: #e3dccd !important;
  border: 1px solid var(--e-line-2);
  border-left: 3px solid var(--e-gold);
  box-shadow: 0 18px 40px -12px #000;
}
html body [data-notify="container"].alert-success {
  background: #121c14 !important;
  border-left-color: #6fae68;
}
html body [data-notify="container"].alert-danger {
  background: #221311 !important;
  border-left-color: #c0604f;
}
html body [data-notify="container"].alert-warning,
html body [data-notify="container"].alert-info {
  background: #1d1a12 !important;
}
html body [data-notify="container"] [data-notify="dismiss"],
html body [data-notify="container"] .close {
  color: #d8d2c4;
  opacity: 0.8;
  text-shadow: none;
}

/* ---------- game accounts block (main page of the cabinet) ---------- */
html body .block:has(> .btn-create-account) > .block-content {
  padding: 22px 24px 18px;
}
/* title row: "your game accounts on server" + the create button on the same line */
html body .block:has(> .btn-create-account) > .block-content > .mb-20:first-child {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-height: 40px;
  margin-bottom: 18px !important;
  padding: 0 300px 16px 0;
  border-bottom: 1px solid var(--e-line);
  font-family: var(--e-title);
  font-size: 22px;
  line-height: 1.2;
  color: var(--e-gold-hi);
}
html body .block:has(> .btn-create-account) > .block-content > .mb-20:first-child > span {
  font-family: var(--e-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--e-muted);
  flex-basis: 100%;
}
html body .block > .btn-create-account {
  top: 26px !important;
  right: 24px !important;
  height: 40px;
  padding: 0 26px !important;
  font-size: 12px !important;
  letter-spacing: 0.1em;
}
html body .block > .btn-create-account i {
  margin-right: 8px !important;
}

/* one account */
html body .list_account {
  margin-bottom: 12px !important;
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1px solid var(--e-line) !important;
  box-shadow: none !important;
  transition: border-color 0.25s;
}
html body .list_account:hover,
html body .list_account.open {
  border-color: var(--e-line-2) !important;
}
html body .list_account > .block-header:first-child::before,
html body .list_account > .accordion_account::before,
html body .list_account > .accordion_account::after {
  display: none !important;
}
html body .list_account > .accordion_account {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px !important;
  background: linear-gradient(90deg, #c9ad7716, transparent 75%) !important;
}
html body .list_account > .accordion_account > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--e-title) !important;
  font-size: 20px;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  color: #f3ead8 !important;
  text-decoration: none;
}
html body .list_account > .accordion_account > a::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1px solid var(--e-gold);
  background: #c9ad7733;
  transform: rotate(45deg);
  transition: background 0.25s;
}
html body .list_account > .accordion_account > a[aria-expanded="true"]::before {
  background: var(--e-gold-hi);
}
html body .list_account > .accordion_account > .float-left {
  float: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--e-muted);
}
html body .list_account > .accordion_account .fa-info-circle {
  font-size: 16px;
  color: var(--e-gold) !important;
  cursor: help;
  opacity: 0.85;
}
html body .list_account > .accordion_account .fa-info-circle:hover {
  opacity: 1;
}
html body .list_account .collapse > .block-content,
html body .list_account .collapsing > .block-content {
  padding: 14px 16px 16px !important;
}
/* no characters */
html body .list_account .block-content > h6.text-muted {
  margin: 0 0 14px;
  padding: 12px;
  font-family: var(--e-sans) !important;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--e-muted) !important;
  text-align: center;
  border: 1px dashed #c9ad7730;
  background: rgba(0, 0, 0, 0.18);
}
/* characters */
html body .list_account .table {
  margin-bottom: 14px;
}
html body .list_account .table td {
  vertical-align: middle;
}
html body .list_account .table .btn-group {
  flex-wrap: wrap;
  gap: 6px;
}
html body .list_account .table .btn-group > .btn {
  border-radius: 0 !important;
  margin: 0 !important;
}
/* account actions: equal plates in a row */
html body .list_account .block-content > .text-center:last-child {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
html body .list_account .block-content > .text-center:last-child > .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0 !important;
  height: 38px;
  margin: 0 !important;
  padding: 0 10px;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #d8d2c4 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--e-line) !important;
}
html body .list_account .block-content > .text-center:last-child > .btn i {
  margin: 0 !important;
  color: var(--e-gold) !important;
}
html body .list_account .block-content > .text-center:last-child > .btn:hover {
  color: var(--e-gold-hi) !important;
  border-color: var(--e-gold) !important;
  background: #c9ad7714 !important;
}
/* refresh: a quiet link under the list */
html body .block:has(> .btn-create-account) .block-content > .text-center.p-10 {
  padding: 4px 0 0 !important;
  text-align: right !important;
}
html body .block:has(> .btn-create-account) .block-content > .text-center.p-10 > .btn {
  height: auto;
  padding: 4px 0 !important;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--e-muted) !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px dotted #8e98a566 !important;
}
html body .block:has(> .btn-create-account) .block-content > .text-center.p-10 > .btn i {
  color: var(--e-muted) !important;
}
html body .block:has(> .btn-create-account) .block-content > .text-center.p-10 > .btn:hover,
html body .block:has(> .btn-create-account) .block-content > .text-center.p-10 > .btn:hover i {
  color: var(--e-gold-hi) !important;
  border-bottom-color: var(--e-gold) !important;
}
html body .block:has(> .btn-create-account) .blockquote-footer a {
  color: var(--e-muted) !important;
}
@media (max-width: 991px) {
  html body .block:has(> .btn-create-account) > .block-content > .mb-20:first-child {
    padding-right: 0;
  }
  html body .block > .btn-create-account {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: flex;
    align-items: center;
    margin: 18px auto 0;
  }
}
@media (max-width: 575px) {
  html body .block:has(> .btn-create-account) > .block-content {
    padding: 16px 14px 14px;
  }
  html body .list_account .block-content > .text-center:last-child {
    grid-template-columns: 1fr 1fr;
  }
  html body .block:has(> .btn-create-account) .block-content > .text-center.p-10 {
    text-align: center !important;
  }
}