/* Option 2: Import via CSS */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
/*
@font-face {
    font-family: Kanit;
    src: url(/fonts/kanit/Kanit-Regular.ttf);
}*/

/** {*/
    /*font-family: Kanit;*/
    /*font-family: 'Kanit', sans-serif;
}*/

html,
body {
  width: 100%;
  height: 100vh;
}

body {
  padding: 0;
  margin: 0;
  font-family: Kanit;
}

.body-background {
    background: linear-gradient(180deg, #dec3b9 0%, rgba(222, 195, 185, 0.2) 100%);
    overflow: auto;
}

input {
    background: red;
}

::placeholder {
    font-size: 18px;
    font-weight: bold;
}

.test {
  mix-blend-mode: screen;
}

.border {
  border: 1px solid blue;
}

.login {
    /*width: 580px;
    height: 600px;
    overflow: hidden;
    margin: auto;
    margin-top: 70px;
    border-radius: 5px;
    background: linear-gradient( 180deg, #fff 0.19%, #fbf9f9 30.53%, #f1ebeb 65.91%, #e3d6d6 101.3% );
    box-shadow: 10px 4px 30px 0px #c26a6e;
    padding-left: 120px;
    padding-right: 120px;
    padding-top: 25px;
    text-align: center;*/
    width: 580px;
    height: 600px;
    overflow: hidden;
    margin: auto;
    margin-top: 70px;
    position: relative;
    margin-top: 70px;
    margin-bottom: 70px;
    
    
    
    border-radius: 5px;
    background: linear-gradient( 180deg, #fff 0.19%, #fbf9f9 30.53%, #f1ebeb 65.91%, #e3d6d6 101.3% );
    box-shadow: 10px 4px 30px 0px #c26a6e;
    padding-left: 120px;
    padding-right: 120px;
    padding-top: 25px;
    text-align: center;
}

.login__form-group {
}

.login__body {
}

.login__form {
}

.login__form-group {
  text-align: start;
}

.login__form-group:nth-child(1) {
  margin-top: 52px;
}

.login__form-group:nth-child(2) {
  padding-top: 26px;
}

.login__label {
  padding-left: 5px;
  color: var(--Text-Secondary-Text, #727296);
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 150% */
}

.login__form-control {
  position: relative;
}

.eye-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}

.eye-icon:hover {
  cursor: pointer;
}

.login__input { 
    width: 100%;
    height: 53.923px;
    padding: 12px 0px 11.923px 16px;
    background: linear-gradient(#fff 0 0) padding-box, linear-gradient(45deg, #B37F2C, #B37F2C, #F8DE7C, #FFF2A6, #F8DE7C, #B37F2C) border-box;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 6px;
}

    .login__input:focus-visible {
        outline: none
    }

    /*.login__input:active {
        border: 1px solid red;
    }
*/
.login__button {
    width: 100%;
    padding: 12px;
    max-height: 53px;
    border-radius: 20px;
    background: var( --GD-Pink3, linear-gradient( 180deg, #ddbeb2 0%, #fdd9cb 15.32%, #ffe7dd 67.85%, #ce9696 100% ) );
    border: none;
    margin-top: 50px;
    color: #815e51;
    text-align: center;
    font-family: Kanit;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 150% */
}

.footer-image {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0;
    height: 150px;
    max-height: 256px;
    /*z-index: 1;*/
}
.copyright {
    width: 100%;
    /* border: 1px solid red; */
    text-align: center;
    color: #534D4E;
    font-size: 16px;
    position: fixed;
    bottom: 10px;
    left: 0px;
    z-index: 99;
    font-weight: 400;
}

@media screen and (min-width: 1441px) {
    .login {
        height: 700px;
        padding-top: 47px;
    }

    .login__button {
        margin-top: 80px;
    }

    .footer-image {
        /* height: auto; */
    }
}