:root {
   --bg: #11151a;
   --panel: #191f26;
   --panel2: #202832;
   --border: #303a46;
   --text: #e8edf2;
   --muted: #9eabb8;
   --accent: #2aa9e0;
   --accent2: #55c2ef;
   --row1: #181e25;
   --row2: #202730;
   --hover: #283744;
   --danger: #e05d5d;
}

* {
   box-sizing: border-box;
}

html, body {
   margin: 0;
   padding: 0;
   min-width: 0;
   background: var(--bg);
   color: var(--text);
   font-family: Arial, Helvetica, sans-serif;
}

body {
   font-size: 15px;
}

h1 {
   margin: 0;
   font-size: 28px;
   font-weight: 600;
}

a {
   color: var(--accent2);
}

a img {
   border: 0;
}

#top {
   position: relative;
   width: 100%;
   min-width: 0;
   height: auto;
   min-height: 105px;
   padding: 22px 30px;
   background: #151b22;
   color: var(--text);
   border-bottom: 1px solid var(--border);
   background-image: none;
}

#top img {
   max-height: 56px;
   max-width: 100%;
}

#menubar {
   position: relative;
   left: auto;
   top: auto;
   width: 100%;
   min-width: 0;
   height: auto;
   background: #1a222b;
   border-bottom: 1px solid var(--border);
   padding: 0 20px;
}

#menu {
   float: none;
   margin: 0;
   min-height: 50px;
   height: auto;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 4px;
}

#menu table,
#menu tbody,
#menu tr {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}

#menu td {
   display: block;
   padding: 0;
}

.menulink,
.menulinkactive {
   display: inline-block;
   margin: 0;
   padding: 15px 13px 13px;
   border: 0;
   border-bottom: 3px solid transparent;
   background: transparent;
   color: #c7d0d9;
   font-size: 15px;
   text-decoration: none;
   white-space: nowrap;
}

.menulink:hover {
   color: #ffffff;
   background: #202a34;
}

.menulinkactive {
   color: #ffffff;
   border-bottom-color: var(--accent);
   background: #202a34;
}

#content {
   position: relative;
   left: auto;
   top: auto;
   width: 100%;
   max-width: 1500px;
   margin: 0 auto;
   padding: 24px;
   text-align: center;
}

.listingtable {
   border-collapse: collapse;
   margin: 10px auto 25px;
   border: 1px solid var(--border);
   background: var(--panel);
   color: var(--text);
   font-size: 14px;
}

.listingtable th {
   height: 42px;
   padding: 8px 10px;
   background: #252f39;
   background-image: none;
   color: #f0f4f7;
   border: 1px solid var(--border);
   font-weight: 600;
   text-align: center;
}

.listingtable td {
   padding: 7px 9px;
   border: 1px solid var(--border);
   color: var(--text);
}

.listingtable tr[bgcolor="#FFFFFF"],
.listingtable tr[bgcolor="#F1FAFA"] {
   background: var(--row1) !important;
}

.listingtable tr:nth-child(even) td {
   background: var(--row2);
}

.listingtable tr:hover td {
   background: var(--hover) !important;
}

.pl {
   color: #e7edf3;
   text-decoration: none;
   font-size: inherit;
}

.pl:hover {
   color: var(--accent2);
   text-decoration: underline;
}

.listinglink,
.smalllink {
   color: var(--accent2);
}

.FilterField {
   width: 170px;
   height: 34px;
   padding: 5px 9px;
   border: 1px solid var(--border);
   border-radius: 4px;
   background: #11171d;
   color: #ffffff;
   font-size: 14px;
}

.FilterField::placeholder {
   color: #788694;
}

.FilterSubmit {
   width: auto;
   height: 34px;
   padding: 5px 13px;
   border: 1px solid var(--accent);
   border-radius: 4px;
   background: var(--accent);
   color: #ffffff;
   font-size: 14px;
   cursor: pointer;
}

.FilterSubmit:hover {
   filter: brightness(1.1);
}

.error {
   width: 90%;
   margin: 12px auto;
   padding: 15px;
   border: 1px solid var(--danger);
   border-radius: 5px;
   background: #29191b;
   color: #ffb7b7;
   font-size: 14px;
   font-weight: 600;
}

a.tip {
   text-decoration: none;
}

a.tip span {
   display: none;
}

a.tip:hover {
   position: relative;
}

a.tip:hover span {
   display: block;
   position: absolute;
   z-index: 100;
   top: 20px;
   left: 5px;
   padding: 7px 9px;
   border: 1px solid var(--border);
   border-radius: 4px;
   background: #050709;
   color: #ffffff;
   white-space: nowrap;
   font-size: 12px;
}

#content > div:last-child a {
   color: var(--muted) !important;
}

@media (max-width: 900px) {
   #top {
      padding: 18px;
   }

   #menubar {
      padding: 0 8px;
   }

   #content {
      padding: 12px;
      overflow-x: auto;
   }

   .menulink,
   .menulinkactive {
      padding: 12px 9px 10px;
      font-size: 13px;
   }

   .listingtable {
      font-size: 12px;
   }
}