/* --------------------title--------------- */
.title {
  text-align: center;
  margin-top: 20px;
  font-size: 40px;
  color: #fff;
  padding: 10px;
  background-color: #023b598e;
}


/* ---------------instructions----------- */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  border: 2px solid #3385ff;
  min-width: 330px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;
  cursor: pointer;
}

.dropdown p {
  text-align: center;
  font-size: 30px;
  color: #fff;

}

.dropdown:hover .dropdown-content {
  display: block;
  background-color: #e2d18b;
  margin-left: 100px;
  padding: 50px;

}

/* -----------------circuit-------------- */
.container-pic {
  width: 100%;
  display: flex;
  justify-content: center;
}

.circuit {
  position: relative;
  text-align: center;

  width: 75%;
}

.circuit img {
  justify-content: center;
  display: block;
  background-color: #EFEFEE;
  max-width: 100%;
  /* border: 6px solid #75c9b7; */
}

.components {
  position: absolute;
  text-align: center;
  font-size: 1vw;
}


/* -------------resistance----------- */
#r1 {
  top: 15%;
  left: 16%;
  width: 5%;
}

#r2 {
  top: 15%;
  right: 13.5%;
  width: 5%;
}

#r3 {
  bottom: 21%;
  left: 52%;
  width: 5%;
}

/* --------------volt------------------ */
#v1 {
  top: 60%;
  left: 2%;
  width: 5%;

}

/* ---------------current------------------ */
#v2 {
  position: absolute;
  top: 63%;
  right: 2%;
  width: 40px;
}

/* ----------------switch------------------ */
.switch select {
  cursor: pointer;
  background-color: #ffb656;
  position: absolute;
  width: 10%;
  height: 5%;
  font-weight: 600;
}

#s1 {
  top: 54%;
  left: 18%;
}

#s2 {
  top: 54%;
  right: 17%;
}


/*------------- Ammeter css --------------- */
.ammeter input {
  background-color: #a6d4ff;
  height: 5%;
  border-radius: 6px;
  width: 7%;
}

#A1 {
  top: 18%;
  left: 27.5%;

}

#A2 {
  top: 18%;
  right: 32%;
}

#A3 {
  top: 44.5%;
  left: 45.8%;

}


/* ----------------simulation---------- */
.container {
  display: flex;
  justify-content: center;
}


.tabs {

  position: relative;
  width: 100%;
  list-style: none;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.outside-info {

  display: flex;
  justify-content: center;
  width: 100%;
}

.info-container {
  text-align: left;
  margin: 5%;
  width: 100%;
  font-size: 20px;
  background: #023B59;
  padding: 5vh 2vh 5vh 2vh;
  color: white;
  /* position: absolute; */
  box-sizing: border-box;
  border-radius: 10px;
  border: 2px solid #8AC007;
}

.button .simulate {
  cursor: pointer;
  background-color: #ffe26a;
  text-align: center;
  border-radius: 30px;
  font-size: 20px;
  width: 25vh;
  height: 10vh;
}

.tabs u {
  font-weight: 500;
}

.tabs .simulate:hover {
  background: #f6ebf4;
  color: #023B59;
  border: 2px solid #8AC007;
}

.tabs input[type=radio] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.tabs li {
  float: left;
  margin: 0% 5%;
}

.tabs label {
  display: flex;
  text-align: center;
  padding: 2vh 2vh 2vh 2vh;
  border-radius: 2px 2px 0 0;
  color: #fff;
  font-size: 100%;
  font-weight: normal;
  background: #023B59;
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid #8AC007;
}

.tabs label:hover {
  background: #f6ebf4;
  top: 0;
  color: #023B59;
  border: 2px solid #8AC007;
}

[id^=tab]:checked+label {
  background: #ffe26a;
  color: white;
  top: 0;
  color: #023B59;
  border-radius: 10px;
  border: 2px solid #8AC007;
}


/* -------------table----------------- */

.tablee h3 {
  text-align: center;
  font-size: 30px;
  color: #fff;

}

table {

  color: #666;
  font-size: 12px;
  text-shadow: 1px 1px 0px #fff;
  background: #eaebec;
  border: #ccc 2px solid;
  border-radius: 3px;
  box-shadow: 0 1px 2px #d1d1d1;
}

table th {
  padding: 10px 0px 10px 0px;
  width: 50vh;
  border-top: 1px solid #fafafa;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  text-align: center;
  background: #ededed;
  background: -moz-linear-gradient(top, #ededed, #ebebeb);
}

table tr {
  padding: 10px 0px 10px 0px;
  width: 50vh;
  text-align: center;
  padding-left: 0px;
}

table tr td:first-child {
  text-align: center;
  padding-left: 0px;
  border-left: 0;
}

table tr td {
  padding: 10px 0px 10px 0px;
  width: 50vh;
  background: #fafafa;
}

table tr:hover td {
  background: #e6e5e5;
  border: 1px solid #023B59;
}