.login-bg {
    background:url("../assets/images/image-bg.jpg") 
    no-repeat;
    background-size:cover;
    background-position:center center;
    background-attachment:fixed
}

.logo {
    display: block;
    padding-top: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    opacity: 1.0;
}

.login-cont {
    background-color: white;
    opacity: 0.9;
    border-radius: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5%;
    margin-right: 5%;
}

.login-wind {
    margin-top: 2.5%;
    margin-bottom: 5%;
    margin-left: 50%;
    margin-right: 10%;
}

.form-control {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.btn-primary {
    padding-left: 17.5%;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: none;
    display: flex;
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: white;
    background-color: red;
}

.btn-primary:hover {
    padding-left: 17.5%;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    margin-left: 25%;
    margin-right: 25%;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: white;
    background-color: darkred;
}

.btn-link {
    padding: 20px;
    display: flex;
    margin-left: 25%;
    margin-right: 25%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    align-content: center;
}

.btn-linkTrans {
    background-color: transparent;
    border: none;
    padding: 10px;
    display: flex;
    margin-left: 30%;
    margin-right: 25%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    align-content: center;
}

.btn-linkTrans:hover {
    background-color: red;
    color: white;
    border: none;
    padding: 10px;
    display: flex;
    margin-left: 30%;
    margin-right: 25%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    align-content: center;
}

.dialog-sty {
    border-style: none; 
    background-color: rgba(255, 255, 255, 0.8);;
    transition: display 1s allow-discrete, overlay 1s allow-discrete;

  animation: close 1s forwards;
  &[open] {
    animation: open 1s forwards;
  }
}

@keyframes open {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes close {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

.dialog-sty::backdrop {
    background:rgba(55,55,55,.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media screen and (max-width: 600px) {
.logo {
    display: block;
    padding-top: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    opacity: 1.0;
}

.login-cont {
    background-color: white;
    opacity: 0.9;
    border-radius: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.login-wind {
    margin-top: 2.5%;
    margin-bottom: 5%;
    margin-left: 10%;
    margin-right: 10%;
}

.form-control {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.btn-primary {
    padding-left: 17.5%;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: none;
    display: flex;
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: white;
    background-color: red;
}

.btn-primary:hover {
    padding-left: 17.5%;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    margin-left: 25%;
    margin-right: 25%;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    color: white;
    background-color: darkred;
}

.btn-link {
    padding: 20px;
    display: flex;
    margin-left: 25%;
    margin-right: 25%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    align-content: center;
}

.btn-linkTrans {
    background-color: transparent;
    border: none;
    padding: 10px;
    display: flex;
    margin-left: 30%;
    margin-right: 25%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    align-content: center;
}

.btn-linkTrans:hover {
    background-color: red;
    color: white;
    border: none;
    padding: 10px;
    display: flex;
    margin-left: 30%;
    margin-right: 25%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    align-content: center;
}


}