/* Global Styles */
body {
  background-color: white;
  margin-bottom: 5%;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

/* Form Styles */
.fsetup1 {
  width: 70%;
  max-width: 30000px;
  min-width: 1000px;
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 10px;
  margin: 0 auto 2%;
}

legend {
  font-size: 30px;
  font-weight: bolder;
  font-family: Arial, Helvetica, sans-serif;
}

.ValidationTitle1 {
  font-size: 3.5rem;
  color: black;
  margin: 2% 2% 1% 2%;
  font-family: 'Times new roman', Courier, monospace;
}

.tests {
  font-size: 1rem;
  color: black;
  margin: 3% 1% 0 1%;
  font-family: 'Times new roman', Courier, monospace;
}

.checkboxes1, .checkboxes2, .checkboxes3, .checkboxes4 {
  width: 23px;
  height: 23px;
  margin-top: 3%;
  border-radius: 5px;
  border: 0;
}

/* Dropdown Styles */
.dropdown-button {
  width: 190px;
  height: 35px;
  background-color: white;
  color: black;
  font-weight: bold;
  cursor: pointer;
  padding: 5px 0 7.5px;
  font-size: 18px;
  margin: 1% 10% 0 10%;
  border-radius: 5px;
  border: 2px solid lightgray;
}

.dropdown:hover .dropdown-button {
  background-color: white;
}

.dropdown-content {
  display: none;
  background-color: whitesmoke;
  width: 150px;
  height: 95px;
  margin: 1% 0 0 10%;
  border-radius: 5px;
  border: 2px solid lightgray;
  z-index: 1;
}

.dropdown-content a {
  font-size: 0.7rem;
  font-weight: bold;
  color: black;
  padding: 8px 8px 8px 35px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: gainsboro;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Label and Input Styles */
.labels, .label1 {
  font-size: 20px;
  color: black;
  margin: 5% 0 0.3% 10%;
  font-family: 'Times new roman', Courier, monospace;
}

.numbers1, .numbers12, .numbers14 {
  width: 30px;
  height: 30px;
  font-size: 1rem;
  color: black;
  margin: 1% 1% 0.3% 1%;
  padding-left: 0.7%;
  border-radius: 5px;
  border: 2px solid lightgray;
  font-family: 'Times new roman', Courier, monospace;
}

.numbers24 {
  width: 30px;
  height: 30px;
  font-size: 1rem;
  color: black;
  margin: 1% 1% 0.3% 1%; /* Adjusted left margin to 0 */
  padding-left: 0.1%;
  border-radius: 5px;
  border: 2px solid lightgray;
  font-family: 'Times new roman', Courier, monospace;
}

.numbers2, .numbers3 {
  width: 70px;
  height: 30px;
  font-size: 1rem;
  color:black;
  margin: 2% 0.00005% 5% 0;
  padding-left: 2%;
  border-radius: 5px;
  border: 2px solid lightgray;
  font-family: 'Times new roman', Courier, monospace;
}

.error, .error2, .error3, .error4 {
  width: 60px;
  height: 28px;
  font-size: 1rem;
  color: black;
  margin: 2% 0% 0 0%;
  padding: 1.5%;
  border-radius: 5px;
  border: 2px solid lightgray;
  font-family: 'Times new roman', Courier, monospace;
}

/* Button Styles */
.button1, .button12, .button13, .button14, .button11 {
  width: 80px;
  height: 40px;
  background-color: white;
  color: green;
  margin-left: 88%;
  margin-bottom: 0%;
  border-radius: 5px;
  border: 2px solid lightgray;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  max-width: 80px;
}

.button2 {
  width: 70px;
  height: 30px;
  background-color: white;
  color: green;
  margin-left: 50%;
  border-radius: 5px;
  border: 2px solid lightgray;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

/* Button Hover Effect */
.button1:hover,
.button12:hover,
.button13:hover,
.button14:hover,
.button11:hover,
.button2:hover {
  background-color: lightgray;
}

/* Message Container Styles */
.messageContainerf, .messageContainert, .messageContainerfilter {
  width: 80%;
  max-width: 500px;
  padding: 20px;
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 3%;
  margin-bottom: 3%;
  display: none;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  font-family: Times_new_roman, sans-serif;
  font-size: 16px;
  color: red;
  font-weight: bold;
  border: 2px solid lightgray;
  margin-left: 35%;
}

.messageContainerfilter {
 color: #000000;
}

.messageContainert {
  color: green;
}

/* Option Button Styles */
.optionButton, .optionButtont {
  width: 100px;
  height: 52px;
  background-color: white;
  color: black;
  border-radius: 5px;
  border: 2px solid lightgray;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.optionButton {
  margin: 5% 0 0 20%;
}

.optionButtont {
  margin: 5% 0 0 39%;
}

/* Tab Content Styles */
.tabcontent .Scanin {
  padding: 10px;
  margin: 5px 15%;
  box-sizing: border-box;
  border: 1px solid #000000;
  border-radius: 5px;
  font-size: 12px;
  width: 70%;
  background-color: white;
}

.Scanin:focus {
  outline: none;
  border: 1px solid lightgray;
  transform: scale(1.05);
}

/* Chart Styles */
#chartdiv {
  display: none;
  padding: 10px;
  border: 2px solid black;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 1200px;
  height: 80vh;
}

/* Additional Styles */
.button3 {
  width: 90px;
  height: 40px;
  background-color: white;
  color: green;
  margin-left: 88%;
  margin-bottom: 0;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 600;
  padding: 5px;
  border: 2px solid lightgray;
}

.table {
  margin-top: 3%;
  margin-bottom: 3%;
  margin-left: 35%;
  margin-right: 35%;
  border: #000000;
  width: 100%;
  max-width: 500px;
}

.table td, .table th {
  width: 120px;
  height: 50px;
  background-color: white;
  border-radius: 5px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .optionButtonContainer, .messageButtonContainer {
    flex-direction: column;
    align-items: center;
  }

  .optionButton, .optionButtont, .messageButtonContainer .optionButton, .messageButtonContainer .optionButtont {
    margin: 5% 0;
    width: 70%;
  }

  .messageButtonContainer .optionButton, .messageButtonContainer .optionButtont {
    margin: 0 2%;
  }

  .button1, .button12, .button13, .button14, .button11, .button2, .button3 {
    width: 70%;
    font-size: 16px;
  }

  /* Button Hover Effect */
  .button1:hover,
  .button12:hover,
  .button13:hover,
  .button14:hover,
  .button11:hover,
  .button2:hover,
  .optionButton:hover,
  .optionButtont:hover,
  .messageButtonContainer .optionButton:hover,
  .messageButtonContainer .optionButtont:hover {
    background-color: lightgray;
  }

  /* Additional Styles */
  .table, .messageContainerf, .messageContainert, .messageContainerfilter {
    margin-left: 10%;
    margin-right: 10%;
  }
}