/* Additional styling for the parent container */
div {
  margin: 10px 0; /* Add margin to space out the elements */
}



/* Style for the form heading */
h4 {
  font-size: 24px;
  margin: 20px 0;
}



label {
  font-size: 16px; /* Adjust the font size to your preference */
}



/* Apply CSS to the select element */
select {
  width: 60%; /* Make the dropdown full width */
  padding: 8px; /* Add some padding to the dropdown */
  border: 1px solid #bcbcbc; /* Add a border */
  border-radius: 5px; /* Add rounded corners */
  background-color: #f5f5f5; /* Set a background color */
  font-size: 16px; /* Set the font size */
  color: #333333; /* Set the text color */
}

/* Style the options within the dropdown */
select option {
  font-size: 16px; /* Set the font size */
  color: #333333; /* Set the text color */
  background-color: #ffffff; /* Set the background color of options */
}


/* Style for the threshold input */
input[type="range"] {
  width: 60%;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 5px;
}

/* Style for the threshold track (the background of the range input) */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: #2196F3;
  border-radius: 5px;
}

/* Style for the threshold thumb (the slider handle) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: #4CAF50;
  border-radius: 50%;
}

/* Style for the left and right labels */
#thresholdLeft, #thresholdRight {
  font-size: 16px;
  color: #777777;
}

/* Style for the threshold value */
#thresholdValue {
  font-size: 16px;
  font-weight: bold;
  color: #4CAF50;
  display: inline-block;
  margin-left: 10px;
}



/* Apply CSS to the reply-option labels */
label.reply-option {
  font-size: 16px; /* Adjust the font size as needed */
   text-indent: 20px; 
}


/* Style the checkbox container (the label element) */
label.checkbox-container {
  display: block;
  position: relative;
  padding-left: 30px; /* Add space for the custom checkbox */
  margin-bottom: 10px; /* Adjust as needed */
  cursor: pointer;
  font-size: 16px;
}

/* Style the custom checkbox */
label.checkbox-container input[type="checkbox"] {
  position: absolute;
  opacity: 0; /* Hide the default checkbox */
  cursor: pointer;
}

/* Create the custom checkbox */
label.checkbox-container .custom-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px; /* Set the height of the custom checkbox */
  width: 20px; /* Set the width of the custom checkbox */
  background-color: #eeeeee; /* Background color of the checkbox */
  border: 1px solid #bcbcbc; /* Border color */
  border-radius: 3px; /* Rounded corners */
}

/* Style the custom checkbox when it's checked */
label.checkbox-container input[type="checkbox"]:checked + .custom-checkbox::before {
  content: "\2713"; /* Unicode checkmark character */
  font-size: 16px;
  color: #ffffff; /* Color of the checkmark */
  text-align: center;
  line-height: 20px; /* Vertically center the checkmark */
  background-color: #007bff; /* Background color when checked */
}

/* Style the custom checkbox when it's hovered over */
label.checkbox-container:hover input[type="checkbox"] + .custom-checkbox {
  background-color: #bcbcbc; /* Background color on hover */
}



/* Apply CSS to input[type="time"] elements */
input[type="time"] {
  width: 110px; /* Adjust the width as needed */
  padding: 5px; /* Add padding for better appearance */
  border: 1px solid #bcbcbc; /* Add a border */
  border-radius: 5px; /* Round the corners */
  font-size: 16px; /* Set the font size */
  color: #333333; /* Set the text color */
}


/* Apply CSS to the input elements */
input[type="number"]{
  width: 30%; /* Take the full width of the container */
  padding: 10px; /* Add some padding for better readability */
  margin: 5px 0; /* Add spacing between elements */
  border: 1px solid #bcbcbc; /* Add a border for clarity */
  border-radius: 5px; /* Round the corners of the input elements */
  box-sizing: border-box; /* Include padding and border in the element's total width */
}

input[type="text"]{
  width: 60%; /* Take the full width of the container */
  padding: 10px; /* Add some padding for better readability */
  margin: 5px 0; /* Add spacing between elements */
  border: 1px solid #bcbcbc; /* Add a border for clarity */
  border-radius: 5px; /* Round the corners of the input elements */
  box-sizing: border-box; /* Include padding and border in the element's total width */
}


textarea {
  width: 100%; /* Take the full width of the container */
  height: 100px; /* Take the full width of the container */
  
  padding: 10px; /* Add some padding for better readability */
  margin: 5px 0; /* Add spacing between elements */
  border: 1px solid #bcbcbc; /* Add a border for clarity */
  border-radius: 5px; /* Round the corners of the input elements */
  box-sizing: border-box; /* Include padding and border in the element's total width */
}


.textarea-container {
  display: flex;
  align-items: center;
  
}

.textarea-container textarea {
  margin-right: 10px; /* Add spacing between textarea and button */
}


/* CSS class for time inputs */
.time-input {
  width: 40px; /* Adjust the width to your preference */
  display: inline-block; 
}




/* Style for buttons */
button[type="button"] {
  background-color: #007BFF; /* Button background color */
  color: #ffffff; /* Button text color */
  padding: 10px 20px; /* Padding around the button text */
  border: none; /* Remove button border */
  border-radius: 5px; /* Round the corners of the button */
  cursor: pointer; /* Add a pointer cursor on hover */
}

button[type="button"]:hover {
  background-color: #0056b3; /* Change button color on hover */
}

/* Styling for the modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
  width: 70%;
  max-width: 600px;
  margin: 15% auto; /* Center the modal vertically */
}

.close {
  color: #555555;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

/* Add a smooth transition effect */
.modal-content, .close {
  transition: 0.3s;
}

.close:hover {
  color: #f44336; /* Change close button color on hover */
}