@import url("https://fonts.googleapis.com/css2?family=Kanit&family=Nova+Square&family=Skranji&display=swap");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html , body{
    height: 100%;
    width: 100%;
    font-family: "Kanit" !important;
}
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100vw;
    background: #a83b3f;
    backdrop-filter: blur(8px);
  
    
  }
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3vw;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4.5px);
    -webkit-backdrop-filter: blur(4.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }
  .container {
    width: 350px;
    display: flex;
    flex-direction: column;
    padding: 0 15px 0 15px;
  }
  span {
    color: #fff;
    font-size: small;
    display: flex;
    justify-content: center;
  }
  header {
    color: #fff;
    font-size: 30px;
    display: flex;
    justify-content: center;
    padding: 10px 0 30px 0;
  }
  .input-field {
    position: relative;
    margin: 10px 0;
  }
  .input-field .input {
    height: 45px;
    width: 100%;
    /* width: calc(100% - 45px); */
    border: none;
    border-radius: 30px;
    color: #fff;
    font-family: "Kanit" !important;
    font-size: 15px;
    padding: 0 0 0 45px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
  }
  .input-field > span {
    color: yellow;
    margin: -15px 0;
    position: absolute;
  }
  .input-field i , .reset-password-form i{
    position: absolute;
    top: 15px;
    left: 17px;
    color: #fff;
  }
  ::-webkit-input-placeholder {
    color: #fff;
  }
  .submit {
    border: none;
    border-radius: 30px;
    font-family: "Kanit" !important;
    font-size: 16px;
    height: 45px;
    outline: none;
    width: 100%;
    color: white;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: 0.3s;
  }
  .submit:hover {
    box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2);
  }
  .two-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: small;
    margin-top: 30px;
  }
  .two-col label {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .one {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  label a,
  .two-col a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
  }
  .top a {
    color: white;
    text-decoration: none;
  }
  .forward-pointer {
    margin-left: 20px;
    visibility: hidden;
    font-size: 20px;
  }
  .p-forward-pointer:hover .forward-pointer {
    visibility: visible;
  }
  .tick-or-cross {
    position: absolute;
    right: 15px;
    top: 12px;
  }
  .tick-or-cross img {
    display: none;
    width: 20px;
    height: 20px;
  }
  .view-not-view img {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .view-not-view img:nth-child(2) {
    display: none;
  }
  .view-not-view {
    display: flex;
    position: absolute;
    right: -35px;
    top: 10px;
  }


  /* Reset Form container */
  .reset-body {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-height: 100vh; */
    width: 50vw;
    background: #a83b3f;
    backdrop-filter: blur(8px);
}
.reset-body{

.reset-password-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3vw;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4.5px);
    -webkit-backdrop-filter: blur(4.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.reset-container {
    width: 350px;
    display: flex;
    flex-direction: column;
    padding: 0 15px 0 15px;
}

.reset-header {
    color: #fff;
    font-size: 30px;
    display: flex;
    justify-content: center;
    padding: 10px 0 30px 0;
}

.reset-input-field {
    position: relative;
    margin: 10px 0;
}

.reset-input {
    height: 45px;
    width: 100%;
    border: none;
    border-radius: 30px;
    color: #fff;
    font-family: "Kanit" !important;
    font-size: 15px;
    padding: 0 10px 0 42px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.reset-submit {
    border: none;
    border-radius: 30px;
    font-family: "Kanit" !important;
    font-size: 16px;
    height: 45px;
    outline: none;
    width: 100%;
    color: white;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: 0.3s;
}

.reset-submit:hover {
    box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2);
}

.reset-link {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.reset-link a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}
}
/* Forgot password page */
.fp-bg-img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  background: #a83b3f;
  backdrop-filter: blur(8px);
}
.fp-bg-img{
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3vw;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4.5px);
  -webkit-backdrop-filter: blur(4.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.login-form {
  width: 350px;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
}

header {
  color: #fff;
  font-size: 30px;
  display: flex;
  justify-content: center;
  padding: 10px 0 30px 0;
}
/* Form Fields */
.field {
  position: relative;
  margin: 15px 0;
}

.field .pass-key {
  height: 45px;
  width: 100%;
  border: none;
  border-radius: 30px;
  padding: 0 0 0 20px;
  color: #fff;
  font-family: "Kanit" !important;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.field .show, .field .hide {
  position: absolute;
  right: 20px;
  top: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.field .show:hover {
  text-decoration: underline;
}

::placeholder {
  color: #fff;
}
input[type="submit"] {
  border: none;
  border-radius: 30px;
  font-family: "Kanit";
  font-size: 15px;
  height: 45px;
  outline: none;
  width: 100%;
  color: white;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: 0.3s;
  margin: 0 auto;
}

input[type="submit"]:hover {
  box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2);
}
.show , .hide {
  width: 25px;
  height: 25px;
}
.hide{
  display: none;
}
}


/* Responsive */

@media screen and (max-width: 768px) {
  .container, 
  .reset-container, 
  .login-form {
    width: 95%;
    padding: 10px;
  }
  .box{
    width: 90%;
  }
  .reset-body{
    width: 95%;
  }
  header, 
  .reset-header {
    font-size: 24px;
  }

  .field, 
  .reset-input-field {
    margin: 10px 0;
  }

  .content {
    /* padding: 2vw; */
  }
}

@media screen and (max-width: 480px) {
  /* Layout tweaks for mobile screens */
  body, .fp-bg-img, .login-body, .reset-body {
    padding: 10px;
  }

  header, 
  .reset-header {
    font-size: 22px;
    padding: 5px 0 20px;
  }

  .field .pass-key, 
  .reset-input {
    height: 40px;
    font-size: 14px;
  }

  .submit, 
  .reset-submit {
    height: 40px;
    font-size: 14px;
  }

  /* Reduce icon size */
  .show, 
  .hide {
    width: 20px;
    height: 20px;
  }

  /* Adjust box padding */
  .box, 
  .reset-password-form, 
  .content {
    padding: 1.5vw;
  }

  /* Adjust form content */
  input[type="submit"] {
    font-size: 14px;
  }
}