body {
    font-family: "Lato", sans-serif;
  }

  hr{
    margin:1px;
  }
        
        h1   {color: white;
             text-align: left; 
             font-size: 20px;
             display: inline;
             position:absolute;
             top:5px;
          }

          .footer_class{
    text-align:center;
    padding:0px;
    line-height: 1px;
    font-size: 15px;
  }

  .img_class {
          position: absolute;
          left:10px;
          top:10px;
          display:inline-block;
          }
        
  
 
  
  p {
      color:rgb(5, 90, 155); 
  }

  #help_div{
     width:100%;
     height:620px;
     overflow:scroll;

  }

  .footer_h3{
    color: rgb(5, 90, 155); 
    word-spacing: 4px;
    white-space:nowrap;
  }

  .footer_h4{
    color: rgb(5, 90, 155);
    word-spacing: 10px;
    white-space:nowrap;
  }

  .footer_h5{
    color: rgb(5, 90, 155);
    word-spacing: 4px;
    white-space:nowrap;
  }

  select{
    padding:1px;
  
  }

  .container {
   
    padding: 10px;
    display:none;
    width: calc(100%-250px);
   
   }

/* Floating column for labels: 25% width */
    .col-25 {
        float: left;
        width: 25%;
        margin-top: 2px;
       
    }

  

/* Floating column for inputs: 75% width */
    .col-75 {
        float: left;
        width: 75%;
        margin-top: 2px;
       
    }

    .col-50-1 {
        float: left;
        width: 50%;
        margin-top: 2px;
       
    }
  
    .sidenav {
width: 250px;
position: absolute;
z-index: 1;
top: 1px;
left: 1px;
background: #444444;
overflow-x: hidden;
padding: 1px 0;
height:100%;
}

.fav-popup {
display: none;
position: fixed;
padding:10px;
top: 1;
right:15px;
width: 350px;
height:350px;
border: 3px solid #f1f1f1;
z-index: 0;
background-color:white;
overflow:scroll;
}



.span_border111{

width : 800px;
word-wrap: break-word;
word-break: break-all;

}

.input_text_class{
width: 80%;
margin-bottom : 6px;
}

.col-50-border {
        border : 1px solid rgb(5, 90, 155); ;
        float: left;
        width: 45%;
        margin-top: 2px;
        overflow: scroll;
        height: 450px;
        padding : 6px;

    }

    .col-100 {
        border : 1px solid rgb(5, 90, 155); ;
        float: left;
        width: 85%;
        margin-top: 2px;
        overflow: scroll;
        height: 450px;
        padding : 6px;

    }

.active,.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 14px;
color: #FFFFFF;
display: block;
}

.sidenav a:hover {
color: #C2C2C2;
}

.main {
margin-left: 250px; /* Same width as the sidebar + left position in px */
font-size: 14px; /* Increased text to enable scrolling */
padding: 0px 0px;
width: calc(100%-250px);


}
   
        
  input[type="text"] {
    width: 80%;
    margin-bottom : 6px;
  
    
  }
        
  input[type="password"] {
    width: 80%;
    margin-bottom : 6px;
   
  }
        
  input[type="checkbox"] {
    margin-bottom : 6px;
   
  }
        
  input[type=button], input[type=submit], input[type=reset] {
    background-color: rgb(5, 90, 155); ;
    border: none;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    margin-bottom : 6px;
   
  }

  .tree_style
 {
    border : 1px solid rgb(5, 90, 155); ;
    padding : 5px 5px;
    overflow: scroll;
    height: 450px;
    margin : 5px;

 }

 .p12{
    color: rgb(5, 90, 155);
    font-size: 16px;
    line-height: 1px;
    word-spacing: 8px;
    font-style:normal;
    font-weight: bold;
}

#machine_list {

width: 100%;
height:500px;
overflow-y: scroll;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;

}

#machine_list td  {
border: 1px solid #ddd;
padding: 8px;
width:12%;
}





#machine_list th {
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
background-color: rgb(86, 47, 228);
width:12%;
}

.selected {
background-color: #4CAF50;
}  

.sel_sb {
background-color: rgb(221, 16, 16);
}  

.log {

width: 100%;
height:100px;
position:static;
overflow-y: scroll;
border-style: outset;
bottom:0px;
padding:5px
}

.div_table {

width: 100%;
height:300px;
overflow-y: scroll;

}

#pubsub_mult_table_data  tr:nth-child(even) {background-color: #c2c2c2;}
    th, td {
   border-bottom: 1px solid #ddd;
   padding:10px;
    }
#pubsub_mult_table_data  {
        width: 100%;
    } 
  
#table_data_browse tr:nth-child(even) {background-color: #b4addf;}
    th, td {
   
   padding:1px;
    }

#table_data_browse {
        width: 100%;
    } 

 .new-line-container{
    clear:left;
 }

  .col-border {
        border : 1px solid rgb(5, 90, 155); ;
        width : 90%;
        float: left;
        margin: 10px;
        overflow: scroll;
        height: 575px;
        padding : 6px;

    }
  
  .vl {
    border-right: 1px solid green;
    height: 100%;
    top: 100px;
    position: absolute;
    left: 270px;
    margin-left: -3px;
    
  }

  .p_alarm {
      color: #ff0000; 
  }

  .cs{
    word-spacing: 8px;
    color:white;
    font-size: 16px;
    text-align: right;
    padding:3px;

  }

  .btn{
    padding:2px;
    background-color: rgb(5, 90, 155); 
    margin-bottom: 2px;
    color:white;
  }

  .jsondownload{
    padding-top:10px;
    padding-bottom:10px

  }
  
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }
  
  hr {
    position : absolute;
    width: 100%;
    left: 2px;
  }







  ul {
          margin: 0;
          padding: 0;
        }
        
        /* Style the list items */
        ul li {
          cursor: pointer;
          position: relative;
          padding:4px;
          list-style-type: none;
          background: #eee;
          font-size: 14px;
          transition: 0.2s;
          
          /* make the list items unselectable */
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        
        /* Set all odd list items to a different color (zebra-stripes) */
        ul li:nth-child(odd) {
          background: #f9f9f9;
        }
        
        /* Darker background-color on hover */
        ul li:hover {
          background: #ddd;
        }
        
        /* When clicked on, add a background color and strike out text */
        ul li.checked {
          background: #888;
          color: #fff;
          text-decoration: line-through;
        }
        
        /* Add a "checked" mark when clicked on */
        ul li.checked::before {
          content: '';
          position: absolute;
          border-color: #fff;
          border-style: solid;
          border-width: 0 2px 2px 0;
          top: 10px;
          left: 16px;
          transform: rotate(45deg);
          height: 15px;
          width: 7px;
        }
        
        /* Style the close button */
        .close {
          position: absolute;
          right: 0;
          top: 0;
          padding: 12px 16px 12px 16px;
        }
        
        .close:hover {
          background-color: #f44336;
          color: white;
        }
        
        /* Style the header */
        .header {
          background-color: #f44336;
          padding: 30px 40px;
          color: white;
          text-align: center;
        }
        
        /* Clear floats after the header */
        .header:after {
          content: "";
          display: table;
          clear: both;
        }

        .am_log_id{
          position:absolute;
          width:100%;
          height:400px;
          overflow:scroll;
        }

        #loader { 
        border: 3px solid #f3f3f3; 
        border-radius: 50%; 
        border-top: 3px solid rgb(5, 90, 155);
        width: 40px; 
        height: 40px; 
        animation: spin 1s linear infinite; 
        display:none;
        opacity:0.9;
    } 

    #loader1 { 
        border: 3px solid #f3f3f3; 
        border-radius: 50%; 
        border-top: 3px solid rgb(5, 90, 155);
        width: 40px; 
        height: 40px; 
        animation: spin 1s linear infinite; 
        display:none;
        opacity:0.9;
    } 

    #loader2 { 
        border: 3px solid #f3f3f3; 
        border-radius: 50%; 
        border-top: 3px solid rgb(5, 90, 155); 
        width: 40px; 
        height: 40px; 
        animation: spin 1s linear infinite; 
        display:none;
        opacity:0.9;
    } 
      
    @keyframes spin { 
        100% { 
            transform: rotate(360deg); 
        } 
    } 
      
    .center { 
        position: absolute; 
        bottom: 0; 
        right: 0; 
        left: 25%;
        top:50%;
        z-index: 1;
    } 

    .center1 { 
        position: absolute; 
        bottom: 0; 
        right: 0; 
        left: 25%;
        top:75%;
        z-index: 1;
    } 

    .center2 { 
        position: absolute; 
        bottom: 0; 
        right: 0; 
        left: 25%;
        top:75%;
        z-index: 1;
    }