html {
     height: 100%;
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: center;
     position: relative;
     top: 0;
     right: 0;
     overflow: hidden;
 }

 .signin-container {
     width: 100%;
     height: 100dvh;
 }

 .auth-form {
     margin: auto;
     z-index: 9999999;
     width: 506px;
     box-shadow: 24px 24px 40px 0px var(--custom-rgba4);
     box-shadow: -24px -24px 40px 0px var(--custom-rgba4);
     border-radius: 16px;
     padding: 20px;
 }

 .gradient-one {
     position: absolute;
     top: -200px;
     left: 0px;
     height: 791px;
     width: 791px;
     overflow: hidden;
 }

 .gradient-one>img,
 .gradient-two>img {
     height: 100%;

     width: 100%;
 }

 .gradient-two {
     position: absolute;
     bottom: 100px;
     /* opacity: 0.12; */
     right: 200px;
     height: 485px;
     width: 485px;
 }

 .auth-tle {
     font-family: 'Inter-SemiBold';
     font-size: 24px;
     line-height: 38.4px;
     color: var(--custom-252525);
     margin-bottom: 22px;
 }

 .form-item {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .form-item>label {
     font-size: 14px;
     font-family: 'Inter-Regular';
     color: var(--custom-333333);
 }


 .form-item>input,
 .password-container>input {
     height: 50px;
     width: 100%;
     font-size: 14px;
     border-radius: 32px;
     font-family: 'Inter-Regular';
     border: none;
     box-sizing: border-box;
     padding-left: 16px;
     background-color: var(--custom-F5F9FA);

 }

 .form-item>input:focus,
 .password-container>input:focus {
     outline: none;
 }

 .password-container {
     position: relative;
 }

 .password-container>img {
     position: absolute;
     top: 16px;
     right: 16px;
     cursor: pointer;

 }

 .form-item-sp {
     margin-bottom: 20px;
 }

 .custom-checkbox input[type="checkbox"] {
     position: absolute;
     opacity: 0;
     cursor: pointer;
 }

 .custom-checkbox .checkmark {
     position: relative;
     height: 15px;
     width: 15px;
     background-color: var(--custom-383C45);
     border: none;
     border-radius: 3px;
     display: inline-block;
     vertical-align: middle;
     box-sizing: border-box;
 }

 .custom-checkbox input[type="checkbox"]:checked+.checkmark::after {
     content: "";
     position: absolute;
     top: 6px;
     left: 50%;
     width: 3px;
     height: 7px;
     border: solid white;
     border-width: 0 2px 2px 0;
     transform: translate(-50%, -50%) rotate(45deg);
 }

 .custom-checkbox {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     font-size: 14px;
     color: white;
     color: var(--custom-six);
     font-family: 'Inter-Regular';
     margin-top: 20px;

 }

 .custom-checkbox a {
     text-decoration: none;
     color: var(--custom-seven);
 }

 /* .custom-checkbox input[type="checkbox"]:focus+.checkmark {
    box-shadow: 0 0 3px 2px rgba(255, 255, 255, 0.5);
} */

 .signin-btn {
     width: 100%;
     height: 46px;
     margin-top: 25px;
     border-radius: 32px;
     box-shadow: 0px 8px 16px -4px var(--custom-16223314);
     background-color: var(--custom-383C45);
     color: var(--custom-FDFDFD);

 }

 @media only screen and (max-width: 800px) {

     .gradient-one,
     .gradient-two {
         display: none;
     }

 }

 @media only screen and (max-width: 700px) {
    html {
       display: block;
    }

    .auth-form {
        margin: auto;
        width: 100%;
        box-shadow: none;
        padding: 20px;
    }
    .auth-tle {
        margin-top: 5px;
        margin-bottom: 16px;
    }
 }

 @media only screen and (max-width: 500px) {
    .auth-form {
        padding: 16px;
    }
 }