* {
  font-family: "Sarabun", sans-serif;
}
#map-background {
  position: relative;
  height: 100vh;
  width: 100vw;
}
#float-login {
  min-width: 350px;
  text-align: center;
  position: absolute; /* This makes it float over the parent */
  top: 40%; /* Place it 50% from the top */
  left: 50%; /* Place it 50% from the left */
  transform: translate(
    -50%,
    -50%
  ); /* Ensures the box is centered both vertically and horizontally */
  background: rgba(0, 0, 0, 0.3); /* Semi-transparent white background */
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Optional: Adds a little shadow for depth */
  z-index: 1000; /* Make sure it's above other items */
  font-size: 20px;
}
button[type="submit"] {
  background-color: #007bff; /* Blue color */
  color: #ffffff; /* White text */
  border: none; /* No border */
  border-radius: 4px; /* Rounded corners */
  padding: 10px 20px; /* Top-bottom, Left-right padding */
  font-size: 16px; /* Text size */
  cursor: pointer; /* Hand cursor on hover */
  transition: background-color 0.3s; /* Smooth transition effect */
  outline: none; /* Remove focus border in some browsers */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* A little shadow */
}
button[type="submit"]:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

button[type="submit"]:active {
  background-color: #004391; /* Even darker blue when pressed */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* A smaller shadow when pressed */
}
#word-login {
  color: #333;
  margin-top: -50px;
  font-size: 20px;
  font-weight: bold;
}
input[type="text"],
input[type="password"] {
  color: #666;
  font-size: 16px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  outline: none;
}
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
input[type="password"] {
  margin-left: 0;
}
.input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
label {
  min-width: 100px;
  /*color: #333;*/
  color: #333;
  font-size: 20px;
}
input[type="text"],
input[type="password"] {
  margin-top: 15px;
  color: #666;
  font-size: 14px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  width: calc(100% - 155px);
  box-sizing: border-box;
  outline: none;
}
#togglePassword {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  outline: none;
  margin-left: 5px;
}

.alert {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-danger,
.alert-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}