.img {
    -drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }


.image {
  margin: 50px auto;
  width: 600px;
  position: relative
}

.image #svg {
  position: absolute;
  top: 0;
  left: 0;
}

.buttons {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

.encRotateRight1{
  content: url('../images/buttons/encRight.png');
  width: 4vh;
  height: 4vh;
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  padding: 0.1vh;

  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}

.encRotateRight2{
  content: url('../images/buttons/encRight.png');
  width: 4vh;
  height: 4vh;
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  padding: 0.1vh;

  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.encRotateLeft1{
  content: url('../images/buttons/encLeft.png');
  width: 4vh;
  height: 4vh;
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  padding: 0.1vh;
}

.encRotateLeft2{
  content: url('../images/buttons/encLeft.png');
  width: 4vh;
  height: 4vh;
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  padding: 0.1vh;

  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

#ldcEkran {
  position: absolute;
  top: 10;
  left: 50;
}

#canvasScreen {
  background-color: #2658d6;
  position: absolute;
  width: 84 ;
  height: 42;
  left: 6.5%;
  top: 8%;
  width: 16.8%;
  border: 2px solid black;
}

#canvasButton1 {
  background-color: black;
  border-radius: 50%;
  position: absolute;
  width: 5.9%;
  height: 7.2%;
  left: 14%;
  top: 51%;
}

#canvasRedLed {
  background-color: rgb(104, 57, 57);
  border-radius: 50%;
  position: absolute;
  width: 4%;
  height: 5%;
  left: 5.6%;
  top: 68%;
}

#canvasRgbLed {
  background-color: grey;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 4%;
  left: 16%;
  top: 36.5%;
}

#canvasRelay {
  background-color: black;
  border-radius: 50%;
  position: absolute;
  width: 2%;
  height: 3%;
  left: 18%;
  top: 89%;
}

#canvasResetButton {
  background-color: red;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 4%;
  left: 51.8%;
  top: 52.8%;
}

/* Aktif olduktan sonraki renk kodu Motor1  #88cc004e */
#canvasMotor1 {
  background-color: transparent; 
  position: absolute;
  width: 4%;
  height: 7%;
  left: 90%;
  top: 6%;
}
/* Aktif olduktan sonraki renk kodu Motor2  #88cc004e */
#canvasMotor2 {
  background-color: transparent;
  position: absolute;
  width: 4%;
  height: 7%;
  left: 90%;
  top: 14.5%;
}
/* Aktif olduktan sonraki renk kodu Buzzer #ffffff97 */
#canvasBuzzer {
  background-color: transparent;
  border-radius: 50%;
  position: absolute;
  width: 7.8%;
  height: 10.5%;
  left: 85.9%;
  top: 52%;
}


.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
}

h1.title {
  padding:25px;
  font-size:30px;
  font-weight: 100;;
}

.margin-bottom-40 {
  margin-bottom:40px;
}

/* Button Sizes*/

.btn-mod.btn-large {
    height: auto;
    padding: 13px 52px;
    font-size: 15px;
}

.btn-mod.btn-medium {
    height: auto;
    padding: 10px 35px;
    font-size: 13px;
}

.btn-mod.btn-small {
    height: auto;
    padding: 6px 16px;
    font-size: 12px;
}

/* Button Mod to the original Bootstrap Buttons */

.btn-mod.btn-circle {
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.btn-mod.btn-border {
    color: #000000;
    border: 2px solid #000000;
    background: transparent;
}

.btn-mod, a.btn-mod {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 13px;
    color: #fff;
    background: rgba(34,34,34, .9);
    border: 2px solid transparent;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.btn-mod.btn-border:hover, .btn-mod.btn-border:focus{
    color: #fff;
    border-color: transparent;
    background: #000;
}

.btn-mod:hover, .btn-mod:focus, a.btn-mod:hover, a.btn-mod:focus {
    font-weight: 400;
    color: rgba(255,255,255, .85);
    background: rgba(0,0,0, .7);
    text-decoration: none;
    outline: none;
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Reveal icon on hover */

a.btn.btn-mod.btn-border.animation-one span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.3s;
}

a.btn.btn-mod.btn-border.animation-one span:after {
  font-family: FontAwesome;
  content: "\f105";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.3s;
}

a.btn.btn-mod.btn-border.animation-one:hover span {
  padding-right: 25px;
}

a.btn.btn-mod.btn-border.animation-one:hover span:after {
  opacity: 1;
  right: 0;
}

.neopixel{
  position: absolute;
  width:40%; 
  height:auto; 
  left: 59.5%;
  top: 50%;
  opacity: 1;
}
.footleft{
  position: absolute;
  width:15%; 
  height:auto; 
  left: 25.5%;
  top: 51%;
  opacity: 1;
}
.legleft{
  position: absolute;
  width:15%; 
  height:auto; 
  left: 25.5%;
  top: 47%;
  opacity: 0;
}
.armleft{
  position: absolute;
  width:15%; 
  height:auto; 
  left: 25.5%;
  top: 42%;
  opacity: 0;
}
.footright{
  position: absolute;
  width:15%; 
  height:auto; 
  left: 59.5%;
  top: 51%;
  opacity: 1;
}
.legright{
  position: absolute;
  width:15%; 
  height:auto; 
  left: 59.5%;
  top: 47%;
  opacity: 0;
}
.armright{
  position: absolute;
  width:15%; 
  height:auto; 
  left: 59.5%;
  top: 42%;
  opacity: 0;
}
.ultrasonic{
  position: absolute;
  width:18%; 
  height:auto; 
  left: 52%;
  top: 18.5%;
  opacity: 1;
}

.servo{
  position: absolute;
  width:18%; 
  height:auto; 
  left: 10%;
  top: 5%;
  opacity: 1;
}

.servoleftarm {
  width: 4%;
  height: auto;
  position: absolute;
  left: 34.8%;
  top: 85%;
  transform-origin: center 10px;
}

.servorightarm {
  width: 4%;
  height: auto;
  position: absolute;
  left: 61.3%;
  top: 85%;
  transform-origin: center 10px;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }

}

#rgb1 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 79.6%;
  top: 5%;
}
#rgb2 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 85.2%;
  top: 6.8%;
}
#rgb3 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 89.3%;
  top: 11.8%;
}
#rgb4 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 90.9%;
  top: 18.7%;
}
#rgb5 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 89.5%;
  top: 25.5%;
}
#rgb6 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 85.2%;
  top: 30.7%;
}
#rgb7 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 79.5%;
  top: 32.1%;
}
#rgb8 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 73.9%;
  top: 31%;
}
#rgb9 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 69.8%;
  top: 25.5%;
}
#rgb10 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 68.2%;
  top: 18.8%;
}
#rgb11 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 69.8%;
  top: 11.9%;
}
#rgb12 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 73.9%;
  top: 6.9%;
}
#rgb13 {
  background-color: gray;
  border-radius: 50%;
  position: absolute;
  width: 3%;
  height: 3.5%;
  left: 79.6%;
  top: 18.7%;
}
#embeddedLed {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 49.1%;
  top: 55.1%;
}
#ultrasonicRGBRight {
  background-color:transparent;
  border-radius: 50%;
  position: absolute;
  width: 7%;
  height: 8%;
  left: 23.3%;
  top: 10.5%;
}
#ultrasonicRGBLeft {
  background-color:transparent;
  border-radius: 50%;
  position: absolute;
  width: 7%;
  height: 8%;
  left: 9.5%;
  top: 10.5%;
}

#svgBuzzer {
  position: absolute;
  left: 50%;
  top: 30%;
}

#distanceText {
  position: absolute;
  left: 80%;
  top:10%;
}

#pDistance{
  position: absolute;
  left: 70%;
  top:10%;
}

/* Satır 1 */ 
#str1-stn1 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 39%;
  top: 50%;
}
#str1-stn2 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 42%;
  top: 50%;
}
#str1-stn3 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 45%;
  top: 50%;
}
#str1-stn4 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 48%;
  top: 50%;
}
#str1-stn5 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 51%;
  top: 50%;
}
#str1-stn6 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 54%;
  top: 50%;
}
#str1-stn7 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 57%;
  top: 50%;
}
#str1-stn8 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 60%;
  top: 50%;
}

/* Satır 2 */ 
#str2-stn1 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 39%;
  top: 53%;
}
#str2-stn2 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 42%;
  top: 53%;
}
#str2-stn3 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 45%;
  top: 53%;
}
#str2-stn4 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 48%;
  top: 53%;
}
#str2-stn5 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 51%;
  top: 53%;
}
#str2-stn6 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 54%;
  top: 53%;
}
#str2-stn7 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 57%;
  top: 53%;
}
#str2-stn8 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 60%;
  top: 53%;
}


/* Satır 3 */ 
#str3-stn1 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 39%;
  top: 56%;
}
#str3-stn2 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 42%;
  top: 56%;
}
#str3-stn3 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 45%;
  top: 56%;
}
#str3-stn4 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 48%;
  top: 56%;
}
#str3-stn5 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 51%;
  top: 56%;
}
#str3-stn6 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 54%;
  top: 56%;
}
#str3-stn7 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 57%;
  top: 56%;
}
#str3-stn8 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 60%;
  top: 56%;
}


/* Satır 4 */
#str4-stn1 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 39%;
  top: 59%;
}
#str4-stn2 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 42%;
  top: 59%;
}
#str4-stn3 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 45%;
  top: 59%;
}
#str4-stn4 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 48%;
  top: 59%;
}
#str4-stn5 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 51%;
  top: 59%;
}
#str4-stn6 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 54%;
  top: 59%;
}
#str4-stn7 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 57%;
  top: 59%;
}
#str4-stn8 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 60%;
  top: 59%;
}

/* Satır 5 */ 
#str5-stn1 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 39%;
  top: 62%;
}
#str5-stn2 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 42%;
  top: 62%;
}
#str5-stn3 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 45%;
  top: 62%;
}
#str5-stn4 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 48%;
  top: 62%;
}
#str5-stn5 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 51%;
  top: 62%;
}
#str5-stn6 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 54%;
  top: 62%;
}
#str5-stn7 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 57%;
  top: 62%;
}
#str5-stn8 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 60%;
  top: 62%;
}

/* Satır 6 */ 
/* Satır 6 */ 
#str6-stn1 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 39%;
  top: 65%;
}
#str6-stn2 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 42%;
  top: 65%;
}
#str6-stn3 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 45%;
  top: 65%;
}
#str6-stn4 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 48%;
  top: 65%;
}
#str6-stn5 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 51%;
  top: 65%;
}
#str6-stn6 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 54%;
  top: 65%;
}
#str6-stn7 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 57%;
  top: 65%;
}
#str6-stn8 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 60%;
  top: 65%;
}

/* Satır 7 */ 
#str7-stn1 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 39%;
  top: 68%;
}
#str7-stn2 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 42%;
  top: 68%;
}
#str7-stn3 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 45%;
  top: 68%;
}
#str7-stn4 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 48%;
  top: 68%;
}
#str7-stn5 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 51%;
  top: 68%;
}
#str7-stn6 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 54%;
  top: 68%;
}
#str7-stn7 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 57%;
  top: 68%;
}
#str7-stn8 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 60%;
  top: 68%;
}

/* Satır 8 */ 
#str8-stn1 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 39%;
  top: 71%;
}
#str8-stn2 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 42%;
  top: 71%;
}
#str8-stn3 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 45%;
  top: 71%;
}
#str8-stn4 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 48%;
  top: 71%;
}
#str8-stn5 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 51%;
  top: 71%;
}
#str8-stn6 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 54%;
  top: 71%;
}
#str8-stn7 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 57%;
  top: 71%;
}
#str8-stn8 {
  background-color: transparent;
  border-radius: 30%;
  position: absolute;
  width: 2%;
  height: 2%;
  left: 60%;
  top: 71%;
}

#canvas1{
  background-color: wheat;
  border-radius: 30%;
  position: absolute;
  width: 10%;
  height: 10%;
  left: 10%;
  top:10%;
}

.img-oled {
  position: absolute;
  left: 30%;
  top: 35%;
  width: 40%;
  height: auto;
  opacity: 0;
}

.faceeye-oled {
  position: absolute;
  left: 33%;
  top: 35%;
  width: 35%;
  height: auto;
  opacity: 0;
}

.facemouth-oled {
  position: absolute;
  left: 33%;
  top: 35%;
  width: 35%;
  height: auto;
  opacity: 0;
}

#myCanvas {
  position: absolute;
  left: 29%;
  top: 32%;
  background-color: transparent;
  width: 42%;
  height: 21%;
}

/* Ana stil */
.switch {
  position: relative;
  display: inline-block;
  width: 2rem; /* Switch'in genişliği */
  height: 1rem; /* Switch'in yüksekliği */
}

/* Düğmenin giriş özellikleri */
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

/* Ana slider stilleri */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

/* Slider'daki nokta */
.slider:before {
  position: absolute;
  content: "";
  height: 0.75rem; /* Slider'ın yüksekliği */
  width: 0.75rem; /* Slider'ın genişliği */
  left: 0.125rem; /* Slider'ın sola olan mesafesi */
  bottom: 0.125rem; /* Slider'ın aşağıya olan mesafesi */
  background-color: white;
  transition: .4s;
}

/* Ana stil: aktif durum */
input:checked + .slider {
  background-color: #00224D;
}

/* Ana stil: odaklanıldığında */
input:focus + .slider {
  box-shadow: 0 0 0.0625rem #2196F3;
}

/* Ana stil: aktif durumda slider'ın konumu */
input:checked + .slider:before {
  transform: translateX(0.75rem); /* Slider'ı kaydırarak aktif hale getir */
}

/* Yuvarlak köşeli stiller */
.slider.round {
  border-radius: 0.5rem; /* Yuvarlak köşeler */
}

.slider.round:before {
  border-radius: 50%; /* Yuvarlak köşe */
}


#switch1{
  position: absolute;
  top:65%;
  left: 20%;
}

#switch2{
  position: absolute;
  top:65%;
  left:82%;
}

input[type="range"]::-webkit-slider-thumb {
  background-color: #4CCD99;
}
input[type="range"]::-moz-range-thumb {
  background-color: 4CCD99;
}
input[type="range"]::-ms-thumb {
  background-color: #4CCD99;
}

#sliderDistance{
  width: 15%;
  position: absolute;
  left: 37%;
  top: 12%;
}
#sliderLineSensorLeft{
  width: 12%;
  position: absolute;
  left: 17%;
  top: 56%;
}
#sliderLineSensorRight{
  width: 12%;
  position: absolute;
  left: 80%;
  top: 56%;
}

.potRotateRight1{
  content: url('../images/buttons/potRight.png');
  width: 4vh;
  height: 4vh;
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  padding: 0.1vh;

  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}

.potRotateRight2{
  content: url('../images/buttons/potRight.png');
  width: 4vh;
  height: 4vh;
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  padding: 0.1vh;

  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.potRotateLeft1{
  content: url('../images/buttons/potLeft.png');
  width: 4vh;
  height: 4vh;
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  padding: 0.1vh;
}

.potRotateLeft2{
  content: url('../images/buttons/potLeft.png');
  width: 4vh;
  height: 4vh;
  visibility: visible;
  border-style: none;
  border-width: 0px;
  z-index: 101;
  cursor: pointer;
  padding: 0.1vh;

  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}