/* shinymanager authentication page customisation */

/* Authentication panel style class */
.panel-auth {
  background-color: #f5f5f5 !important;  /* Set background to light grey */
}

/* Authentication panel primary box style class */
.panel-auth .panel-primary {
  border-color: #183D6E;  /* Set border color to dark blue */
  border-radius: 4px;  /* Use rounded corners for box */
}

/* labels style class */
.panel-auth .control-label {
  display: block;  /* Set display behaviour to block */
  text-align: left;  /* Ensure labels are aligned to the left */
  font-family: sans-serif;  /* Use sans-serif font for better readability */
  font-size: 17px;  /* Increase font size slightly */
  color: #000000;  /* Set font color to black */
}

/* Username and password form style class */
.panel-auth .form-control {
  font-family: sans-serif;  /* Use sans-serif font for better readability */
  font-size: 15px;  /* Set font size */
  border: 1px solid #e3e3e3;  /* Set border color to light grey */
  border-radius: 4px;  /* Use rounded corners for box */
}
/* Username and password form style class during focus */
.panel-auth .form-control:focus {
  border-color: #183D6E;  /* Set border color to dark blue */
  box-shadow: 0 2.5px 15px rgba(24, 61, 110, 0.4);  /* Add shadow around form */
}

/* Login button style class */
.panel-auth .btn-primary {
  font-family: sans-serif;  /* Use sans-serif font for better readability */
  font-size: 17px;  /* Increase font size slightly */
  background-color: #183D6E;  /* Set button color to dark blue */
  color: white;  /* Set font color to white */
  border-color: #183D6E;  /* Set border color to dark blue */
  border-radius: 4px;  /* Use rounded corners for box */
  cursor: pointer;  /* Set cursor style to pointer */
  margin-bottom: -10px;  /* Decrease space between login button and border  */
}

/* Login button style class during hover */
.panel-auth .btn-primary:hover {
  background-color: #0f2a52;  /* Set button color to dark blue */
  border-color: #0f2a52;  /* Set border color to dark blue */
  box-shadow: 0 2.5px 15px rgba(24, 61, 110, 0.4);  /* Add shadow around button */
  opacity: 1;  /* Make button fully opaque on hover */
  transform: translateY(-1.5px);  /* Move button up when hovering */
  transition: all 0.4s ease;  /* Create animation between element states */
}

/* Login button style class during click and focus */
.panel-auth .btn-primary:active, .panel-auth .btn-primary:focus {
  background-color: #183D6E;  /* Set button color to dark blue */
  border-color: #183D6E;  /* Set border color to dark blue */
  box-shadow: 0 2.5px 15px rgba(24, 61, 110, 0.4);  /* Add shadow around button */
  opacity: 1;  /* Make button fully opaque on hover */
}

/* Error message style class */
.panel-auth .alert-danger {
  font-size: 15px;  /* Set font size */
  font-family: sans-serif;  /* Use sans-serif font for better readability */
  color: #721c24;  /* Set font color to dark red */
  border-radius: 4px;  /* Use rounded corners for box */
  border: 1px solid #f5c6cb;  /* Set border color to lighter red */
  background-color: #f8d7da;  /* Set message background color to light red */
  padding: 10px;  /* Add padding around text */
  margin-bottom: -2.5px;  /* Decrease space between login button and border  */
}