/* === Google Font ===*/
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

	* {
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box;
	    font-family: 'Poppins', sans-serif;
	}

	/* === Variables Define ===*/
	:root {
	    --primary-color: #3525D3;
	    --white-color: #fff;
	    --black-color: #3C4A57;
	    --light-gray: #E4E8EE;
	}

	/* === Body CSS ===*/
	body {
	    position: relative;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    min-height: 100vh;
	    /* background: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
	    background-image: url('/image/static/eSIPPDA.png'); */
	    /* background:
	        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
	        linear-gradient(-45deg, rgba(68, 129, 235, 0.9), rgba(4, 190, 254, 0.9)),
	        url('/image/static/eSIPPDA.png'); */
	    background: linear-gradient(135deg, hsla(220, 81%, 59%, 0.85), hsla(196, 98%, 51%, 0.65)), url('/image/static/eSIPPDA.png');
	    background-size: contain;
	    background-position: center center;
	    background-repeat: no-repeat;
	    background-attachment: fixed;
	    height: 100%;
	    margin: 0;
	    display: flex;
	    align-items: center;
	    color: white;
	    font-family: "Montserrat", sans-serif;
	    font-size: 14px;
	    justify-content: center;
	}

	@media (max-width: 768px) {
	    body {
	        background-size: 175%;
	    }
	}

	/* === Main Content CSS ===*/
	.header {
	    display: flex !important;
	    /* justify-content: center !important; */
	}

	.justify-content-center {
	    justify-content: center !important;
	}

	.justify-content-between {
	    justify-content: space-between !important;
	}

	.justify-content-around {
	    justify-content: space-around !important;
	}



	.header .logo {
	    font-size: 3.75rem;
	    color: #fdc654;

	    /* border: 0.55rem solid #739600; */
	    border: double 0.4rem transparent;
	    border-radius: 80px;
	    background-image: linear-gradient(black, black), radial-gradient(circle at top left, #F4C307, #7C2C13);
	    background-origin: border-box;
	    background-clip: padding-box, border-box;
	    /* will have no effect */
	    padding: 0.75rem;
	    margin: auto;
	}

	.wrapper {
	    padding: 50px 25px 0;
	    max-width: 668px;
	    width: 100%;
	    margin: auto;
	}

	.wrapper::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    /* background-image: url("images/bg-1.svg"); */
	    background-position: center center;
	    /* background-size: cover; */
	    /* background-repeat: no-repeat; */
	    /* min-height: 100vh; */
	    z-index: -1;
	}

	.wrapper .headline {
	    text-align: center;
	    padding-bottom: 48px;
	}

	.wrapper .headline h1 {
	    font-size: 42px;
	    font-weight: 700;
	    line-height: 52px;
	}

	.wrapper .form {
	    max-width: 350px;
	    width: 100%;
	    margin: auto;
	}

	.wrapper .form-group {
	    margin-bottom: 15px;
	}

	.wrapper .form-group input {
	    display: block;
	    font-size: 16px;
	    line-height: 24px;
	    letter-spacing: -0.1px;
	    padding: 11px 15px;
	    height: 48px;
	    border-radius: 5px;
	    color: var(--black-color);
	    border: 1px solid #e4e8ee;
	    box-shadow: none;
	    width: 100%;
	}

	.wrapper .form-group input:focus {
	    outline: none;
	}

	.wrapper .form-group input::placeholder {
	    color: var(--black-color);
	    font-weight: 400;
	    font-size: 14px;
	}

	.icon {
	    cursor: pointer;
	    /* position: relative; */
	    display: flex;
	    /* width: 60px;
	    height: 60px;
	    margin-left: 12px;
	    margin-right: 12px; */
	    background-color: #04befe;
	    border-radius: 30px;
	    overflow: hidden;
	}

	.icon i {
	    /* position: relative; */
	    color: #FFFFFF;
	    font-size: 1.75rem;
	    /* margin-top: 15px; */
	    /* transition: all 0.25s ease; */
	    align-self: center;
	    padding: 0.5rem;
	}

	.wrapper .btn {
	    width: 100%;
	    margin: 15px 0 30px;
	    font-size: 14px;
	    line-height: 22px;
	    font-weight: 700;
	    padding: 12px 29px;
	    height: 48px;
	    text-transform: uppercase;
	    color: var(--white-color);
	    background-color: var(--primary-color);
	    border: none;
	    border-radius: 2px;
	    cursor: pointer;
	    text-align: center;
	}

	.wrapper .btn:focus {
	    outline: none;
	}

	.wrapper .account-exist {
	    color: var(--black-color);
	    border-top: 1px solid var(--light-gray);
	    padding-top: 20px;
	    text-align: center;
	}

	.wrapper .account-exist a {
	    color: var(--primary-color);
	}

	.wrapper .forget-password {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    padding: 15px 0;
	}

	.wrapper .forget-password a {
	    color: var(--primary-color);
	}

	.wrapper .forget-password .check-box {
	    font-size: 15px;
	    color: var(--black-color);
	}

	.signup.inActive {
	    display: none;
	}

	.signin {
	    display: none;
	}

	.signin.active {
	    display: block;
	}

	@media (max-width:1030px) {
	    .wrapper::before {
	        left: -25%;
	        min-height: 60vh;
	        height: 500px;
	    }
	}

	@media (max-width:767px) {
	    .wrapper {
	        max-width: 550px;
	    }

	    .header .logo {
	        font-size: 2.25rem;
	    }

	    .wrapper .headline h1 {
	        font-size: 22px;
	        line-height: 25px;
	    }
	}

	.password-group {
	    position: relative;
	}

	.password-group input {
	    width: 100%;
	    padding-right: 44px;
	    /* room for the button */
	    box-sizing: border-box;
	}

	.toggle-password {
	    position: absolute;
	    top: 50%;
	    right: 12px;
	    transform: translateY(-50%);
	    background: none;
	    border: none;
	    padding: 4px;
	    cursor: pointer;
	    color: #666;
	    display: flex;
	    align-items: center;
	}

	.toggle-password:hover,
	.toggle-password:focus-visible {
	    color: #000;
	}