.btn-orange{
  background: #ff4500;
  color: #fff;
}

.btn-orange:hover{
  background: #ff4500bd;
  color: #fff;
}

.btn-red{
  background: red;
  color: #fff;
}

.btn-red:hover{
  background: rgb(245 71 71);
  color: #fff;
}

input:not(:placeholder-shown) ~ label {
  transform: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
}
.modal-dialog{
  height: 100%;
  align-content: center;
  place-items: center;
}
.modal-title{
  flex: 1;
}
.form-check-input[type=checkbox]{
  border-color: black;
}
.login-page-bg{
  background-image: url("/dist/img/bg-login.jpg");
  background-color: #cccccc;
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover; 
}
.header_logo{
  max-width: 200px;
}
span.required {
  color: red;
  font-weight: bold;
}
#toast-container {
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 9999;
}

#loginForm input{
  border-radius: 0%;
}

.is-invalid{
  border-color: #dc4c64 !important;
}

 .toast-message {
   background: #28a745;
   color: #fff;
   padding: 12px 20px;
   border-radius: 6px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   margin-bottom: 10px;
   animation: fadeInOut 3s ease-in-out forwards;
 }

 .toggle-password {
  position: absolute;
  top: 67%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  color: #6c757d;
}

.toggle-password:hover {
  color: #000;
}
@media screen and (min-width: 480px) {
   .mw-sm-100 {
    /* max-width: 100%; */
  }
}