/* Reset some default styles */
/* Set styles for the video background */
body, html {
  margin: 0;
  padding: 0;
  background-image: url('../images/background01.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Center the login box */
.form-signin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* Adjust the width as needed */
    max-width: 500px; /* Add a maximum width */
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px; /* Adjust the padding */
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}

.login-logo img {
    display: block;
    margin: 0 auto;
    max-width: 100%; /* Ensure the logo scales properly */
}

.login-box-body {
    margin-top: 20px;
}

.login-box-msg {
    font-size: 16px; /* Adjust the font size */
    margin-bottom: 20px; /* Adjust the margin */
}

/* Style form elements */
.form-group {
    margin-bottom: 15px; /* Adjust the margin */
}

.form-control {
  display: block;
  width: 300px;
  margin: 0 auto; /* Add margin auto to center horizontally */
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.checkbox {
    margin-top: 6px;
}

/* Style buttons */

/* Add space between Remember Me checkbox and Sign In button */
.row {
    margin-top: 10px;
}


/* Style buttons */
.btn {
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); /* Add box shadow */
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
  border: none;
}

.btn-warning {
  background-color: #ffc107;
  color: #000;
  border: none;
  display: block;
  margin: 10px auto;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); /* Add box shadow */
}