tr.timeingtable:nth-of-type(odd)  {
        background-color: #eee;
        color: #505050;
      }
      
      tr.timeingtable th[scope="col"] {
        background-color: #505050;
        color: #fff;
      }
      
      tr.timeingtable th[scope="row"]{
        background-color: #d6ecd4;
        color: #505050;

      }
      
      th.timeingtable{
        border: 1px solid rgb(160 160 160);
        padding: 8px 10px;
      }
      
      table.timeingtable {
        border-collapse: collapse;
        border: 2px solid rgb(140 140 140);
        font-family: sans-serif;
        font-size: 0.8rem;
        letter-spacing: 1px;
      }
      
  
      td.timeingtable {
        border: 1px solid rgb(160 160 160);
        padding: 8px 10px;
      }
          
          
          
          table, th, td {
        border: 1px solid black;
          }
          td {
        text-align: center;
        
      }
      
      /* Style the tab */
      .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
      }
      
      /* Style the buttons inside the tab */
      .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px ;
        transition: 0.3s;
        font-size: 17px;
      }
      
      /* Change background color of buttons on hover */
      .tab button:hover {
        background-color: #ddd;
      }
      
      /* Create an active/current tablink class */
      .tab button.active {
        background-color: #ccc;
      }
      
      /* Style the tab content */
      .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
      }
      
      /* Style the close button */
      .topright {
        float: right;
        cursor: pointer;
        font-size: 28px;
      }
      
      .topright:hover {color: red;}
      
      
      .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
      }
      
      .switch input { 
        opacity: 0;
        width: 0;
        height: 0;
      }
      
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
      }
      
      .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
      }
      
      input:checked + .slider {
        background-color: #2196F3;
      }
      
      input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
      }
      
      input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
      }
      
      /* Rounded sliders */
      .slider.round {
        border-radius: 34px;
      }
      
      .slider.round:before {
        border-radius: 50%;
      }
      
            .trafficLightcontainer {
              background-color: lightblue;
              width: 650px;
              align-items: center;
      
              margin: 4px;
              padding: 5px;
              display: flex;
              flex-direction: row;
              flex: 1 1 260px;
              flex-wrap: wrap;
      
      
            }
            div.inline { float:left; }
      
            svg:has(+ .red){
              visibility: hidden;
                      background-color: red;
      
            }
         
           svg:has(+ .green){
              visibility: visible;
                      background-color: white;
      
            }
                  svg:has(~ .red){
              visibility: hidden;
                      background-color: red;
      
            }
         
           svg:has(~ .green){
              visibility: visible;
                      background-color: white;
      
            }
      
      
            .trafficLight {
              background-color: black;
              width: 50px;
              height: 170px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              padding: 10px 5px !important;
              border-radius: 10px !important;
              margin: 1px 3px 1px 1px !important;
              padding: 5px !important;
            }
              .trafficLightped {
              background-color: black;
              width: 50px;
              height: 140px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              padding: 10px 5px !important;
              border-radius: 10px !important;
              margin: 1px 3px 1px 1px !important;
              padding: 5px !important;
            }
      
            .trafficLight span {
              width: 45px;
              height: 45px;
              border-radius: 100%;
            }
            
              .trafficLightped span {
              width: 45px;
              height: 45px;
              border-radius: 100%;
            }
      
      
         .label {
                  font-size: 12px !important;
                  margin-top: 5px !important;
                 color:lightgreen;
                 margin: 2px;
              }
       
         .label2 {
                  font-size: 15;
                  margin-top: 5px;
                  margin: 10px;
              }
      
          .gray {
              background-color: gray;
            }
          .red {
              animation-name: red;
              background-color: red !important;
            }
          .yellow {
              animation-name: yellow;
              background-color: yellow !important;
            }
          .green {
              animation-name: green;
              background-color: LightGreen !important;
            }
            
          .flashingred {
              background-color: red ;
              animation:flashingredanim 1s linear forwards infinite ;
            }
          .flashingyellow {
              animation:flashingyellowanim 1s linear forwards infinite ;
              background-color: yellow ;
            }
          .flashinggreen {
              background-color:lightgreen ;
              animation:flashinggreenanim 1s linear forwards infinite ;
            }
          
            
      
       @keyframes flashingredanim
       {
          0% {opacity: 1;}
         50% {opacity: 0;}
       } 
       @keyframes flashinggreenanim
       {
          0% {opacity: 1;}
         50% {opacity: 0;}
       } 
       @keyframes flashingyellowanim
       {
          0% {opacity: 1;}
         50% {opacity: 0;}
       }      
       
       .float-container {
        border: 1px solid #fff;
        padding: 2px !important;
      }
      .float-child {
          min-width: 40% ;
          width: 40% ;
          float: left;
          padding: 2px !important;
      }