:root {
        color-scheme: light dark;
        /*noinspection CssInvalidFunction*/
        --bg-primary: light-dark(#f1f1f1, #333);
        /*noinspection CssInvalidFunction*/
        --text-primary: light-dark(#000000, #f1f1f1);
        /*noinspection CssInvalidFunction*/
        --bg-box: light-dark(#ddd, #555);
        /*noinspection CssInvalidFunction*/
        --bg-card: light-dark(#f1f1f1,#333);
        /*noinspection CssInvalidFunction*/
        --bg-frame: light-dark(#ddd,#555);
        /*noinspection CssInvalidFunction*/
        --bg-race: light-dark(#add8e6, #1e90ff);
        /*noinspection CssInvalidFunction*/
        --text-race: light-dark(var(--text-primary));
        /*noinspection CssInvalidFunction*/
        --bg-rc: light-dark(lightblue, dodgerblue)

    }
    [data-theme="light"] {color-scheme: light; }
    [data-theme="dark"] {color-scheme: dark; }
    * {
      box-sizing: border-box;
      background-color: var(--bg-primary);
      color: var(--text-primary);
    }

    body {
      font-family: Arial;
      font-size: 12px;
      padding: 10px;
      background: var(--bg-box);
    }

    table, th, td {
      border: none; /* Removes the border lines */
      background-color: transparent;
      border-collapse: collapse; /* Merges adjacent borders, which is important if some borders were to remain */
    }

    .superstar {
        background: lightskyblue;
        color : black;
    }
    .superstar.err {
        color : red;
    }

    .star {
        background: lightcyan;
        color : black;
    }

    .star.err {
        color : red;
    }

    .team {
        color : black;
    }

    .team.err {
        color : red;
    }

    .quatloo {
        color : black;
    }

    .quatloo.err {
        color : red;
    }

    .thrawl {
        background: lightgray;
        color : black;
    }

    .currentteam {
        background: var(--bg-rc);
    }

    /* Header/Blog Title */
    .header {
      text-align: center;
      overflow: hidden;
      /*background-color: var(--bg-box);*/
      background-color: var(--bg-box);
    }

    .header h2 {
      font-size: 20px;
      /*background-color: var(--bg-box);*/
      background-color: transparent;
    }

    /* Change color on hover */
    .lefttab {
      background-color: var(--bg-box);
      width:100%;
      overflow: auto
    }
        /* Make links block-level elements that fill the cell */


    .lefttab a {
      float: left;
      text-align: left;
      padding: 1px 1px;
      text-decoration: none;
      background-color: transparent;
    }

    .lefttab td, a {
      background-color: transparent;
    }

    .lefttab tr:hover, td:hover, a:hover {
      background-color: var(--bg-frame);
    }

    .lefttab a:hover {
      background-color: var(--bg-frame);
      cursor:pointer;
    }
    .currentrow {
        background-color: var(--bg-rc);
        color: var(--text-primary);
    }

    .centertab {
      overflow: auto;
      background-color: var(--bg-frame);
    }
    .centertab a {
      text-align: center;
      color: var(--text-primary);
      text-decoration: none;
    }
    .centertab h4 {
      text-align: center;
    }

    .righttab {
      background-color: var(--bg-primary);
      overflow: auto
    }
    .righttab a {
      float: left;
      display: block;
      color: var(--text-primary);
      text-align: left;
      padding: 1px 1px;
      text-decoration: none;
    }

    .righttab a:hover, tr:hover, td:hover {
      background-color: var(--bg-box);
      color:var(--text-primary)
    }
    /* Style the top navigation bar */
    .topnav {
      overflow: hidden;
      background-color: black;
    }


    /* Style the topnav links */
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 18px;
      text-decoration: none;
      background-color: black;
    }

    .topnav form, img {
      background-color: black;
    }

    /* Change color on hover */
    .topnav a:hover, form:hover  {
      background-color: #ddd;
      color: black;
    }
    .topnav img:hover {
        background-color: currentColor;
    }

    .row {
        background-color: var(--bg-box)
    }

    /* Create two unequal columns that floats next to each other */
    /* Left column */
    .leftcolumn {
      float: left;
      padding: 10px;
      width: 25%;
      background-color: var(--bg-frame);
    }

    /* Right column */
    .centercolumn {
      float: left;
      width: 20%;
      background-color: var(--bg-frame);
      padding: 10px;
    }

    /* Right column */
    .rightcolumn {
      float: left;
      width: 75%;
      background-color: var(--bg-frame);
      padding: 10px;
    }

    /* Create two equal columns that floats next to each other */
    /* Left column */
    .leftcolumn50 {
      float: left;
      width: 50%;
      padding-left: 20px;
      padding-bottom: 10px;
      background-color: var(--bg-primary);
    }

    /* center column */
    .centercolumn50 {
      float: left;
      width: 50%;
      background-color: var(--bg-primary);
      padding-left: 20px;
    }

    /* Right colum50 */
    .rightcolumn50 {
      float: left;
      width: 50%;
      background-color: var(--bg-primary);
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 10px;
    }

    /* Fake image */
    .fakeimg {
      background-color: #aaa;
      width: 100%;
      padding: 20px;
    }

    /* Add a card effect for articles */
    .card {
      overflow:hidden;
      background-color: var(--bg-card);
      padding: 10px;
      margin-top: 10px;
    }

    /* Clear floats after the columns */
    .row::after {
      content: "";
      display: table;
      clear: both;
    }
    .login table {
        padding-right: 5px;
        padding-bottom: 20px;
    }
     .login::after {
      content: "";
      display: table;
      clear: both;
    }

   /* Single column */
    .onecolumn {
      width: 100%;
      background-color: var(--bg-primary);
      padding: 10px;
      text-align:center;
    }

    /* Footer */
    .footer {
      padding: 10px;
      text-align: center;
      background-color: var(--bg-frame);
      margin-top: 10px;
    }

    .fixed-header thead {
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .header th {
      font-weight: bold;
      background-color: var(--bg-primary)
    }
    .scrollable {
      overflow-y: auto;
      height: 100%;
      max-width: 100%;
    }
        /* footer column */
    .footercolumn {
      width: 100%;
      background-color: var(--bg-primary);
      padding: 10px;
      column-count: 3;
      text-align:center;
    }
    .footercolumn a {
      color: var(--text-primary);
      text-decoration: none;
      padding-left:20px;
    }
    .footercolumn p {
      padding-left: 20px;
    }
    tr.collapse {
      visibility: collapse;
    }

    /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 800px) {
      .leftcolumn, .rightcolumn {
        width: 100%;
        padding: 0;
      }
    }

    /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
    @media screen and (max-width: 400px) {
      .topnav a {
        float: none;
        width: 100%;
      }
    }
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 10; /* Sit on top */
      padding-top: 20px; /* Location of the box */
      left: 0px;
      top: 0px;
      width: 50%; /* Full width */
      height: 90%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }

    /* The Close Button */
    .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }