html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the form horizontally */
  padding: 40px 15px; /* Unified padding for better responsiveness */
  background-color: #87ceeb;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="login"],
.form-signin input[type="password"],
.form-signin input[type="pin"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px; /* Unified margin for better spacing */
  border-radius: 4px;
  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

.fields-required {
  font-size: 11px; /* Added 'px' unit */
}

#force-hinline {
  display: inline-block;
}

.csb-spacer {
  background-color: #87ceeb;
  width: 2px;
  height: 2px;
}

.rotate5 {
  transform: rotate(5deg);
  border: 2px solid blue;
}

.rotate315 {
  transform: rotate(315deg);
  border: 2px solid blue;
}

.selTask {
  border: 5px solid blue;
}

#btn1, #btn2, #btn3, #btn4 {
  display: none;
  background-color: red;
}

.selTaskC {
  border: 4px solid blue;
  background-color: white;
}

.bold {
  font-weight: bold;
}

input {
  font-weight: bold;
}

/* Media Queries for Responsiveness */
@media (max-width: 767px) {
  body {
    flex-direction: column;
    padding: 20px 10px; /* Adjust padding for smaller screens */
  }
  .form-signin {
    width: 90%; /* Adjust width for smaller screens */
    max-width: 100%; /* Ensure max-width doesn't exceed viewport */
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  body {
    padding: 30px 20px; /* Adjust padding for medium screens */
  }
  .form-signin {
    width: 80%; /* Adjust width for medium screens */
    max-width: 450px; /* Ensure form doesn't get too wide */
  }
}

@media (min-width: 992px) {
  body {
    padding: 40px 30px; /* Maintain original padding for larger screens */
  }
  .form-signin {
    width: 70%; /* Adjust width for larger screens */
    max-width: 600px; /* Ensure form width is optimized for large screens */
  }
}