body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #b8c8d7;
}

#enclosure {
  width: 1000px;
  height: 680px;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

#screen {
  display: flex;
  flex-direction: column;
  width: 800px;
  height: 480px;
  background: rgb(23, 70, 96);
  background: linear-gradient(180deg, #174660 0%, #06a6ce 100%);
  padding: 0px 8px;
}

#top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  /* border-bottom: 1px solid black; */
  /* color: #b8c8d7; */
}

#logo {
  width: 233px;
  height: 38px;
}

#main-ctn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

.bg {
  background: linear-gradient(180deg, #102f40 0%, #194d69 100%);
}


.left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  width: 131px;
  height: 415px;
  border-radius: 12px;
  box-shadow: 0px 0px 8px 1px #24C0E8;
}

.menu-item {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
  overflow: hidden;
  border: 1px outset black;
  text-decoration: none;
  color: #b8c8d7;
  /* border-radius: 12px; */

}

.menu-item:first-of-type {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.menu-item:last-of-type {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.menu-item-selected {
  background-color: #212121;
  color: rgb(36, 172, 207);
  font-weight: 700;
  border: 1px inset black;
  box-shadow: 0px -4px 4px 0px #0000004d inset;
}

.menu-item:hover {
  background-color: #21212146;
  color: rgb(36, 172, 207);
  font-weight: 700;
}

.mid {
  height: 415px;
  width: 660px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#top {
  height: 230px;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* background: rgb(16, 47, 64); */
  /* background: linear-gradient(180deg, rgba(16, 47, 64, 1) 0%, rgba(25, 77, 105, 1) 100%); */
}

#graph {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 6px;
}

#canvas {
  /* background-color: #212121; */
  width: 585px;
  height: 173px;
  border: 2px solid #24accf;
  border-radius: 1px;

}

.info {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding-top: 12px;
}

.info-item:first-child {
  width: 146px;
}

.info-item {
  font-size: 20px;
  padding: 0 2px;
  background-color: #212121BF;
  border-radius: 5px;
  width: 236px;
}

.info-item.A {
  font-size: 38px;
}

#bottom {
  display: flex;
  justify-content: space-between;
  height: 178px;
  width: 100%;
}

#bottom-left {
  display: flex;
  justify-content: space-between;
  height: 174px;
  width: 390px;
  /* background: rgb(16, 47, 64); */
  /* background: linear-gradient(180deg, rgba(16, 47, 64, 1) 0%, rgba(25, 77, 105, 1) 100%); */
  padding-bottom: 4px;
}

#current {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  width: 69%;
  /* border: 1px solid lightblue; */

}

.display-ctn {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  /* border: 1px solid red; */

}

#offset-ctn {
  height: 100%;
  width: 29%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#offset-txt {
  text-align: center;
  padding: 8px 0px;
}

.offset-btn-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

#offset-output {
  text-align: center;
  padding: 12px 0px;
}

.btn-bar {
  height: 48px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* border: 1px solid greenyellow; */

}

.btn {
  background-color: rgb(17, 49, 67);
  color: #b8c8d7;
  border: 2px solid rgb(36, 172, 207);
  border-radius: 12px;
  box-shadow: 0 0 8px rgb(36, 172, 207);
  padding: 10px 6px;
  min-width: 46px;
  min-height: 40px;
  transition: 0.4s;
}

.btn-up,
.btn-dbl-up,
.btn-down,
.btn-dbl-down {
  padding: 6px;
}

.btn-alt {
  background-color: #174660;
  color: #A4A4A4;
  border: 1px solid #143D54;
  box-shadow: inset 0px 4px 4px rgba(255, 255, 255, 0.25), inset 0px -4px 4px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 12px;
  width: 46px;
  height: 45px;
  transition: 0.2s;
  margin: 0 2px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-alt:active {
  background: linear-gradient(180deg, #113244 0%, #1f5572 100%),
    linear-gradient(0deg, #13384C, #13384C);
  border-image-source: linear-gradient(180deg, #34637c 0%, #113244 100%);
  outline-offset: -2.5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3.5px ridge #113244;
  box-shadow: none;
}

.btn-selected-alt {
  background: linear-gradient(180deg, #113244 0%, #1f5572 100%),
    linear-gradient(0deg, #13384C, #13384C);
  border-image-source: linear-gradient(180deg, #34637c 0%, #113244 100%);
  border-radius: 12px;
  width: 46px;
  height: 45px;
  transition: 0.2s;
  color: #25eba1;
  outline: 1px solid #25E8A1;
  outline-offset: -2.5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3.5px ridge #113244;
  margin: 0 2px;
}

.btn:hover {
  border: 2px solid rgb(98, 205, 232);
  box-shadow: 0 0 18px rgb(98, 205, 232);
}

.btn:active {
  translate: 1px 2px;
  background-color: rgb(39, 78, 101);
}

.btn-selected {
  border: 2px solid rgb(39, 231, 161);
  color: rgb(150, 223, 242);
  box-shadow: 0 0 18px rgb(39, 231, 161);

}

#bottom-right {
  display: flex;
  height: 178px;
  width: 256px;
  /* background: rgb(16, 47, 64); */
  /* background: linear-gradient(180deg, #102f40 0%, #194d69 100%); */
}

#temperature {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

fieldset {
  border-radius: 8px;
  /* padding: 3px; */
  width: 200px;
}

legend {
  margin: auto;
}

.display {
  height: 80px;
  width: 200px;
  background-color: #06a6ce8a;
  border: 1px solid #FFF;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nums {
  color: #FFF;
  font-size: 54px;
  font-family: 'Transponder AOE', sans-serif;
  letter-spacing: 6px;
}

.btn-row {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin: auto;
}

.btn-row>button {
  font-size: 28px;
  min-width: 142px;
}

.options {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.options>div {
  display: flex;
  align-items: center;
  margin: 6px 0px;
  width: 70%;
}

label {
  margin: 0px 16px;
}

.version-ctn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ver-header {
  margin: 0px;
}



/* gradient from #174660 to #06A6CE */
/* gradient from #102F40 to #194D69 */
/* font-family: 'Transponder AOE', sans-serif; */
/* Dark Mode */
/* background: linear-gradient(180deg, #102f40 0%, #194d69 100%); */

/* Light Mode */
/* background: linear-gradient(180deg, #C8C8C8 0%, #7B7E7E 100%); */