/* machine open close button */
.button-container {
    text-align: center;
}

.on-button, .off-button {
    width: 100px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    background-color: rgb(0, 0, 0);
    color: white;
    font-weight: bolder;
}
.on-button.green,
    .off-button.green {
        margin: 0 3px;
      background-color: rgb(1, 84, 1);
      color: white;
    }
/* css for specimen  */
#box1{
    gap: 10px;
}
.container {
    display: flex;
    align-items: center;
    margin: 0 0px 5px 200px;
  }
  label {
    font-weight: bold;
    width: 155px; /* Adjust the label width as needed */
  }
  #selection select{
    padding: 3px;
    width: 40%;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.837);
  }

/* 
#box1-form{
    display: flex;
    align-items: center;
    margin: 0 0px 5px 0;
    padding-left: 11%;
    gap: 5px;
} */
/* toggle button css */
  /* Styles for the toggle container */
  .toggle-container {
    display: inline-block;
    position: relative;
    width: 40px; /* Reduced width */
    height: 20px; /* Reduced height */
}

/* Styles for the hidden checkbox input */
.hidden-checkbox {
    display: none;
}

/* Styles for the slider (toggle button) */
.slider-tb {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    border-radius: 10px; /* Adjusted border radius */
    transition: 0.4s;
}

/* Styles for the slider when checked (active) */
.hidden-checkbox:checked + .slider-tb {
    background-color: rgb(1, 84, 1);
}

/* Styles for the slider's circle (toggle handle) */
.slider-tb::before {
    position: absolute;
    content: "";
    height: 16px; /* Reduced height */
    width: 16px; /* Reduced width */
    left: 2px; /* Adjusted left position */
    bottom: 2px; /* Adjusted bottom position */
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    transition: 0.4s;
  
}

/* Styles for the slider's circle when checked (active) */
.hidden-checkbox:checked + .slider-tb::before {
    transform: translateX(20px); /* Adjusted translation value */
}
/* css for xraytube */
/* .col-9{
    width: 40%;
} */
#box2 label{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}
/* css for voltage and current slider */
/* Styles for the slider container */
.slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


        /* Styles for the sliders */
        .slider {
            -webkit-appearance: none;
            appearance: none;
            width: 80%;
            height: 5px; /* Reduced height */
            background-color: #ffffff; /* Solid color instead of gradient */
            border-radius: 5px;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .5s;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 15px; /* Reduced width */
            height: 15px; /* Reduced height */
            background: #000000;
            border-radius: 50%;
            cursor: pointer;
            /* box-shadow: 0px 0px 5px rgba(102, 101, 101, 0.5); */
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: #4CAF50;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
        }

/* Styles for the slider value labels */
.slider-label {
    font-size: 24px;
    margin-top: 10px;
    color: #ffffff;
}

/* Styles for the values beside the headings */
.slider-value {
    font-size: 24px;
    color: #ffffff;
    margin-left: 10px;
}

/* css for scan setting */
/* Container styles */
#box3{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container {
    display: flex;
    align-items: center;
    margin: 0 0px 5px 110px;
  }

  /* Label styles */
  label {
    font-weight: bold;
    width: 150px; /* Adjust the label width as needed */
  }

  /* Input and select styles */
  input[type="number"],
  #SS select ,#SA select ,#EA select ,#SR select{
    /* flex: 1; Take up remaining space */
    padding: 3px;
    width: 40%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.837);
    border-radius: 5px;
  }

/* css for start scan */
#box4{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.837);
}
.my-button{
    font-weight: bold;
}
/* control panel div  */

#control{
    background: #86888c;
}