body {
background-color: #D9AFD9;
background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
  background-size: cover;
  background-repeat: no-repeat;

    font-family: verdana;
}
 
h1 {
    color: grey;
    font-family: optima;
    font-size: 200%;

}

h2 {
    color: grey;
    font-family: optima;
    font-size: 150%;
}


/* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}



/****************** For the TOPNAV Bar ************************/


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  font-family: verdana;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Change the color of links on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;  /* greenish */
  color: white;
}



/* Dropdown button */
.dropdown .dropbtn {
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0; /* Important for vertical align on mobile phones */
  font-size: 25px;
  font-family: verdana;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Add a color to the active/current link */
.dropdown-active {
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #04AA6D;  /* greenish */
  margin: 0; /* Important for vertical align on mobile phones */
  font-size: 25px;
  font-family: verdana;
}


/****************** For the TOPNAV Bar ************************/
















/* Style for big warnings */
.bigWarning {
  border: 10px outset red;
  text-align: center;
  background-color: black;
  text-align: center;
  color: red;
  font-size: 50px;
  font-family: verdana;
}

/* For the tables */
table_component {
    overflow: auto;
    width: 100%;
}

.table_component table {
    border: 1px solid #dededf;
    height: 100%;
    width: 1000px;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
    text-align: center;
}

.table_component caption {
    caption-side: top;
    text-align: center;
    font-size: 25px;
}

.table_component th {
    border: 1px solid #dededf;
    background-color: #eceff1;
    color: #000000;
    padding: 5px;
    text-align: center;
    font-size: 25px;
}

.table_component td {
    border: 1px solid #dededf;
    background-color: #ffffff;
    color: #000000;
    padding: 5px;
    text-align: center;
}


.status_ok {background-color: #4CAF50;} /* Green */
.status_bad {background-color: #f44336;} /* Red */ 
.status_warn {background-color: #ffa500;} /* Yellow */ 




/********** FOR TABLES *************/
/* see https://divtable.com/table-styler/    */
table.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
  border: 3px solid #AAAAAA;
  padding: 3px 2px;
}
table.blueTable tbody td {
  font-size: 13px;
}
table.blueTable tr:nth-child(even) {
  background: #D0E4F5;
}
table.blueTable thead {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
table.blueTable thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
  border-left: none;
}

table.blueTable tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
table.blueTable tfoot td {
  font-size: 14px;
}


/********** FOR ECHARTS *************/
.chart-container {
      width: 70vw;
      height: 40vh;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
}
canvas {
        display: block;
        justify-content: center;
        align-items: center;
}