body {
    background-color: rgb(240, 240, 230);
    min-width: 450px;
}

.main-container {
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-gap: 20px;
    /* min-width: 1200px; */
}

.title label {
    position: relative;
    font-size: 45px;
    font-style: italic bold;
    color: rgb(2, 72, 2);
    top: -50px;
}

.system-info {
    border: 5px rgb(196, 196, 196);
    border-style: ridge;
    //min-width: 260px;
}

.system-title-label {
    // position: relative;
    position: right;
    top:-12px;
    left:3%;
    background-color: rgb(152, 151, 151);
    color:white;
    margin-bottom: 0px;
}

.system-info input,
.system-info button,
.system-info label {
    position: relative;
    left: 5px;
    margin-bottom: 3px;
}

#ChipTemp, #PWMFreq, #BlockTemp {
    text-align: right;
}

#system-status,
#connection-path,
#ErrorReport,
#ModuleErrorReport {
    width: 95%;
}

#myChart {
    background-color: white;
}

.right-container > .slice_container {
    /* border: 5px rgb(196, 196, 196); */
    /* border-style: ridge; */
    min-width: 350px;
}

.slice_label,
.module_label {
    position:relative;
    font-size: 30px;
    top:-12px;
    left:45%;
    background-color: rgb(152, 151, 151);
    color:white;
}

.slice_container {
    margin-bottom: 7px;
}

.slice_menu {
    text-align: center;
    font-size: 40px;
    margin-top: 40px;
}

.slice_menu button {
    margin-right: 20px;
    margin-bottom: 40px;
}

.slice {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1.3fr 1.3fr ;
    min-width: 700px;
    /* grid-gap: 2px; */
}

.table_frames {
    display: grid;
    grid-template-columns: auto auto auto auto auto ;
    // min-width: 700px;
    /* grid-gap: 2px; */
}

.reference_vars input[type="number"],
.misc_vars input[type="number"],
.power_vars input[type="number"],
.actual_vars input[type="text"],
.calibration_vars input[type="number"] {
    text-align: right;
    width: 60px;
}

//.misc_vars input[type="text"] {
//    width: 200px;
//}

//.misc_vars button {
//    position: relative;
//    left: 5px;
//} 

.piechart {
    position: relative;
    display: flex;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-image: conic-gradient(
        white 0 360deg);
    margin: 0%;
}

.plot_chart {
    width: 360px;
    border-radius: 50%;
}

.power_vars input[type="number"],
.power_vars .W {
    position: relative;
    top: -8px;
}

.footer {
    display: grid;
    grid-template-columns: 8fr 1fr;
    grid-gap: 5px;
}

.ready-status, .time {
    border: 5px rgb(196, 196, 196);
    border-style: ridge;  
}

.time {
    background-color: goldenrod;
    text-align: right;
}

.radio_buttons,
.actual_vars,
.reference_vars,
.calibration_vars,
.misc_vars,
.power_vars {
    border: 3px rgb(196, 196, 196);
    border-style: ridge;
    padding: 3px;
}

// Sample buttons
.sample_vars {
  overflow: hidden;
  float: center;
  //border: 1px solid #ccc;
  //background-color: #f1f1f1;
}

.sample_vars button {
  background-color: #f1f1f1;
  border: 2px ;
  border-style: outset;
  float: center;
  width: 100px;
  height: 16;
}
.sample_vars button:hover {
  background-color: #fff;
}
.sample_vars button.inactive {
  border-style: outset;
  background-color: button.background-color;
}
.sample_vars button.active {
  border-style: inset;
  background-color: #fff;
  //background-color: rgb(64, 233, 64);
}

//.radio_buttons {
//    padding-top: 45px;
//}

// New experiments with tab styles 
// From https://www.w3schools.com/howto/howto_js_tabs.asp

/* Style the tab */
.tab {
  overflow: hidden;
  float: center;
  // border: 1px solid #ccc;
  //border-style: outset;
  //background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: #f1f1f1;
  float: center;
  //border: solid black 1px;
  border: 3px;
  border-style: outset;
  //outline: none;
  //cursor: pointer;
  //padding: 14px 16px;
  width: 30px;
  height: 30px;
  //transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #fff;
}

/* Create an active/current tablink class */
.tab button.inactive {
  background-color: button.background-color;
  border-style: button.border-style;
}
.tab button.unconnected {
  background-color: gold;
}
.tab button.active {
  background-color: rgb(64, 233, 64);
  border-style: outset;
}