* {
    box-sizing: border-box;
  }
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* HEADER */

header{
    font-size: 15px;
    text-align: center;
}

.clock {
    /* padding: 10px; */
    border-bottom: 1px solid black;
    /* background-color: rgb(0, 2, 119); */
    color: rgb(0, 0, 0);
    font-size: 20px;
    /* font-family: Orbitron; */

}

/* main{
    display: flex;
    margin : 5px;
    border: 1px solid black;
    flex-direction: row;
} */

.box{
    display: flex;
    flex-wrap: wrap;
    margin : 1px;
    /* border : 1px solid black; */
    /* position: absolute; */
    justify-content: center;
    
}

.box-sub{ 
    width: 13%;
    margin : 5px;
    height: 380px;
    border : 2px solid hsl(108, 84%, 43%);
    
}


.box-sub-tab{
    width: 98%;
    height: 380px;
    border : 1px solid rgb(62, 245, 26);
    margin : 1px;
}

.box-sub-tab th{
    text-align: center;
    border : 1px solid rgb(57, 214, 91);
    background-color: rgb(28, 187, 7);
    color: #ffffff;
    font-size: 4px;
}

.box-sub-tab .option{
    margin-bottom: 2px;
}
.box-sub-tab .option img{
    width: 5px;
}

.box-sub-tab .option th a{
    text-decoration: none;
    color :rgb(255, 0, 0);
}

.box-sub-tab .status .status-sub{
    width : 15px;
    height: 15px;
    border : 1px solid rgb(255, 255, 255);
    border-radius: 50%;
    background-color: rgb(255, 0, 0);
}


.box-sub-tab .status .active{
    width : 15px;
    height: 15px;
    border : 1px solid rgb(255, 255, 255);
    border-radius: 50%;
    background-color: rgb(60, 22, 228);
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
    @keyframes example {
        0%   {background-color:rgb(255, 255, 255);}
        25%  {background-color:rgb(0, 134, 52); }
        50%  {background-color:rgb(255, 255, 255); }
        75%  {background-color:rgb(0, 134, 52); }
        100% {background-color:rgb(255, 255, 255); }
    }

.box-sub-tab th{
    font-size: 18px;
}
.box-sub-tab .option th{
    font-size: 2px;
}

.box-sub-tab td{
    text-align: center;
    color : rgb(12, 12, 12);
    border : 1px solid rgb(217, 250, 208);
    font-weight: bold;
    font-size: 15px;
}

.tr-nilai td{
    font-size: 19px;
    border : 2px solid rgb(101, 238, 108);
    background-color: #c1f5d1;
    color : #e70c0c;
}

.tr-dt td{
    font-size: 20px;
    color : #000000;
}

.topnav{
    margin-top: 10px;
    overflow: hidden;
    text-align: center;
    
  }
  
  .topnav a {
    color: #000000;
    text-align: center;
    padding: 7px 16px;
    text-decoration: none;
    font-size: 20px;
  }
  
  .topnav span{
      font-size : 19px;
  }
  
  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }
  
  .topnav-right {
    float: right;
  }

@media screen and (max-width : 980px) {
    header{
        font-size: 25px;
    }
    .clock {
        font-size: 20px;
    }
    .box {
    flex-direction: column;
    position: relative;
      flex-basis: 100%;
      flex-wrap: nowrap;
      
    }
    .box-sub{ 
        width: 50%;
        margin : 20px 0px;
        margin-left: 25%;
        border : 1px solid rgb(48, 216, 14);
        
    }
    main{
        margin : 0px 10px;
        border: 1px solid black; 
    }
    .box-sub-tab{
        padding: 15px;
    }
  
    .tr-nilai td{
        font-size: 20px;
    }
    .box-sub-tab tr td{
        font-size: 20px;
     
    }
    .box-sub-tab th{
        font-size: 20px;
    }
  }