/* Loading Bar Styles */
.loading-bar {
  width: 65%;
  margin: 0 auto;
  height: 20px;
  background-color: #f3f3f3;
  border-radius: 5px;
  position: relative;
}

.loading-progress {
  height: 100%;
  width: 0;
  background-color: red;
  border-radius: 5px;
  transition: width 1s ease-in-out, background-color 1s ease-in-out;
  position: relative;
}

@keyframes run {
  0% { left: 0; }
  100% { left: calc(100% - 30px); }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Logo Styles */
.logo {
  display: block;
  margin: 20px auto;
  width: 20px;
}

/* Container Styles */
.container {
  text-align: center;
  margin: 50px auto;
}

/* Form Styles */
.login-form {
  margin-top: 50px;
}

.login-form input {
  padding: 10px;
  margin-bottom: 10px;
  width: 250px;
}

/* Footer Styles */
.footer {
  margin-top: 50px;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f3f3f3;
  padding: 10px 0;
}