/* Column widths */
.w-2   { width: 2%; }
.w-5   { width: 5%; }
.w-12  { width: 12% !important; }
.w-33  { width: 33% !important; }
.w-100 { width: 100%; }

/* Colors */
.text-orange { color: #e6880e; }
.text-green  { color: #bbeb54; }
.text-teal   { color: #31d6bb; }
.text-cyan   { color: cyan; }

/* Hidden column */
.d-none { display: none; }

    /*body, html {
      height: 100%;
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      /*background-color: #000;  Black background 
      color: #fff; /* White text 
    }*/

    .main_layer {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
    }

    .logo {
      max-height: 15vh; /* Set the height relative to the viewport */
      margin: 0 20px;
    }

    .top_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
    }

    .header-text-container {
      flex-grow: 1;
      text-align: center;
    }

    .header-text {
      font-size: 2.8vw; /* Adjust based on viewport width */
      font-weight: bold;
      color: #FFD700;
    }

    .sub-header {
      font-size: 1.8vw;
      font-weight: bold;
      color: #FF4500;
      margin-top: 10px;
    }

    .table {
      font-size: 1.7vw; /* Responsive font size */
      border: 1px solid #00FF00;
      background-color: #333;
    }

    .table thead {
      background-color: #00FF00;
      color: black;
      font-weight: bold;
    }

    .table tbody tr {
      color: #FFF;
    }

    .table tbody tr:hover {
      background-color: #444;
    }

    .table th, .table td {
      text-align: center;
      padding: 0.5vw;
      white-space: nowrap; /* Responsive padding */
    }

    .bottom_layer {
      background-color: #111;
      color: white;
      padding: 10px;
      text-align: center;
      font-size: 2vw; /* Responsive font size */
    }

    .bottom_layer h4 {
      color: #FF4500;
      font-weight: bold;
    }

#tb1 tbody tr:first-child td:first-child{
      font-size: .70rem;
      padding: 0px;
      font-weight: bold;
    }

    @media (max-width: 768px) {
      .header-text, .sub-header {
        font-size: 7vw; /* Increase font size on smaller screens */
      }

      .table th, .table td {
        padding: 2vw; /* Increase padding for touch devices */
      }
    }