body {
  background-color: darkorange;
  margin-left: 5px;
  margin-right: 5px;
  color: #333333;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  text-align: center;
}

header {
  background-color: green;
  margin: -2px auto 0 auto;
  padding: 2px 0;
  border-radius: 5px;
  color: white;
}

h1 {
  margin: 0px;
  font-size: 18px;
}

.grapharea {
  background-color: #fff2cc;
  margin-top: 4px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}

#chart_div {
  background-color: #fff2cc;
  height: 185px;
}

#showspan {
  background-color: green;
  width: 20%;
  height: 26px;
  margin-top: -5px;
  padding-left: 5px;
  border-radius: 5px;
  color: white;
}

.container_op_panel {
  background-color: #fff2cc;
  margin-top: 4px;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 56px 56px;
}

.cell_current_temp {
  margin-top: 2px;
  color: green;
  font-size: 16px;
}

.cell_flow {
  display: flex;
  padding-top: 5px;
  align-items: center;        /* 縦方向 */
  justify-content: center;    /* 横方向 */
  font-size: 24px;
  font-weight: bold;
}

.cell_tx {
  grid-column: 3/4;             /* セルを連結 */
  grid-row: 1/3;                /* 同上       */
}

.cell_history {
  padding-top: 5px;
  /* text-align: left; */
  font-size: 10px;
}

.cell_temp {
  font-weight: bold;
  padding-left: 5px;
  display: flex;
  align-items: center;        /* 縦方向 */
  justify-content: center;    /* 横方向 */
}

#temp_value {
  font-size: 50px;
}

#temp_unit {
  font-size: 16px;
}

.cell_cool {
  padding-top: 10px;
}

.cell_stop {
  padding-top: 10px;
}

.cell_heat {
  padding-top: 10px;
}

.btn {
  display: inline-block;
  width: 90%;
  border-radius: 6px;
  border-bottom: 3px solid #888;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

.btn:active {
  transform: translateY(6px);
  border-bottom: none;
}

.btn_tx {
  background: darkorange;
  height: 94px;
  line-height: 94px;
  margin-top: 5px;
  display: none;
}

.btn_cool {
  background: #00e;
  height: 38px;
  line-height: 38px;
}

.btn_stop {
  background: #222;
  height: 38px;
  line-height: 38px;
}

.btn_heat {
  background: #f39;
  height: 38px;
  line-height: 38px;
}

.paramlist {
  margin: 5px 5px 0 5px;
  padding: 5px 5px;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  display: none;
}

.container_param_list {
  background-color: #fff2cc;
  margin: 5px 0 0 0;
  padding: 0 0 2px 10px;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.cell_item {
  height: 30px;
  line-height: 30px;
  margin-top: 2px;
  padding-left: 10px;
  color: #00b050; 
}

.cell_param {
  background-color: #00b050;
  width: 90%;
  height: 28px;
  margin-top: 2px;
  padding-left: 10px;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  font-weight: normal;
}

#logout {
  margin-top: 5px;
  font-size: 12px;
}

footer {
  margin-top: 5px;
  color: ivory;
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
}


.container_login {
  background-color: #fff2cc;
  margin-top: 5px;
  border-radius: 5px;
  padding: 5px 35px;
  color: green;
  font-size: 14px;
}

.loginform {
  text-align: left;
}

.inputbox {
  width: 100%;
  height: 26px;
  padding-left: 2px;
  padding-right: 30px;
}

.field-icon {
  color: #555;
  float: right;
  margin-right: 10px;
  margin-top: -20px;
  position: relative;
  z-index: 2;
}

.submitbtn {
  width: 100px;
}

/* Checkboxes styles */
input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-top: 1px;
  padding-left: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid black;
  margin-top: 4px;
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 5px;
  top: -5px;
  left:   5px;
  margin-top: 6px;
  border-radius: 1px;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}