:root{--primary-button-color: linear-gradient(180deg, rgba(0,217,255,1) 0%, rgba(0,142,166,1) 100%);--primary-button-color-hover: linear-gradient(180deg, #00DDFF 0%, #007e94 100%);--primary-button-text-color: #fff;--text-color: #fff;--primary-background-color: #000000;--icon-color: #4DD4FF;--padding-input-12: 8px;--padding-input-14: 10px;--select-padding-14: 8px;--select-padding-12: 6px;--button-padding-14: 10px;--button-padding-12: 10px;--font-size-12: 13px;--font-size-14: 15px;--middle-text-12: 19px;--middle-text-14: 22px}.main-container{color:var(--text-color);min-height:100vh;padding-top:20%;padding-bottom:5%;font-family:Roboto,sans-serif;position:relative;background-size:cover;background-position:center;&:before{content:"";position:absolute;inset:0;background-color:#0000004d;z-index:0}>*{position:relative;z-index:1}.background-image{position:fixed;top:0;width:min(100vw,500px);height:100%;z-index:0}.main-content{width:min(100vw,500px);margin:0 auto;position:relative;height:100%}& h1{font-size:28px;margin-bottom:10px}& p{color:#fff;margin-bottom:20px}& h4{color:#4dd4ff;font-size:16px;font-weight:500;margin-bottom:5px}.input-group{background-color:#fff;color:#000;border-radius:4px;display:flex;align-items:center;position:relative}.input-group .input-field{background:none;border:none;color:#000;flex-grow:1;width:100%;padding:var(--padding-input-14)}.input-field:focus{box-shadow:none}.icon{width:20px;height:20px;color:var(--icon-color)}.toggle-password{background:none;border:none;color:#a0a0a0}.button-default{background:var(--primary-button-color);color:var(--primary-button-text-color);border:none;border-radius:4px;padding:5px;width:100%}.button:hover{background:var(--primary-button-color-hover)}.create-account{text-align:center}.create-account a{color:#ffc107;text-decoration:none}.create-account a:hover{color:#ffa33a;text-decoration:underline}.middle-text{text-align:center;margin:15px 0;font-weight:700}.submit-button{border-radius:4px;background:var(--primary-button-color);color:var(--primary-button-text-color);font-size:var(--font-size-14);padding:var(--button-padding-14);line-height:1.5rem}.submit-button:hover{background:var(--primary-button-color-hover)}.custom-container{display:flex;justify-content:center;align-items:center;.custom-item{width:100%;max-width:95%;.custom-item-content{display:flex;flex-direction:column;background-color:#262626}}}}@media screen and (max-width: 450px){.main-container{padding-top:17%;padding-bottom:20%;font-size:var(--font-size-14);.main-content{.input-group .input-field{font-size:var(--font-size-14);padding:var(--padding-input-14)}.middle-text{font-size:var(--middle-text-14)}.submit-button{font-size:var(--font-size-14);padding:var(--button-padding-14)}}}}@media screen and (max-width: 400px){.main-container{padding-bottom:20%;font-size:var(--font-size-12);.main-content{.input-group .input-field{font-size:var(--font-size-12);padding:var(--padding-input-14)}.middle-text{font-size:var(--middle-text-12)}.submit-button{font-size:var(--font-size-12);padding:var(--button-padding-12)}}}}