* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body { margin: 0; line-height: 1.7; }
body, p, input, textarea, select {
    font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
}
p { font-size: 1rem; }
h1, h2, h3, h4, h5, h6 { 
	font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
	font-weight:600; 
	line-height: 1.3em;
}
h1, h2 { font-size:24px; }

.flex { display:flex; }

.half-container {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items:center; 
    justify-content: center;
}
.logo-wrapper { 
    background: #efbf04 url(images/bg.png) no-repeat top left;
    background-size: cover;
    text-align: center;
}
img.logo {
    width: 300px;
    margin: 0 auto;
    object-fit: contain;
}

.form-wrapper {
	box-shadow: 0 2px 23px 0 #00000014;
	height: 100vh;
	overflow: auto;
    padding: 30px 7rem;
}
form { width:100%; }
form input {
    border-radius: 4px;
	color: #3d3d3d;
	font-size: 1rem;
	line-height: 21px;
	padding: 8.5px 10px;
	width: 100%;
	border: 1px solid #cccccc;	
}
form label { 
	margin-bottom: 5px;
	margin-top: 20px;
	display: block; 
	font-size: 1rem;
	line-height: 21px;
	text-align: left;
}
.password-container {
    position: relative;
    display: flex;
    align-items: center;
}
.password-container input { flex: 1; }
.toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.confirm-email h1 { margin-bottom:40px; }
.digit-code {
    display: flex;
    flex-direction: row;
    gap: 14px;
	margin-bottom: 80px;
}
.digit-code input {
    border: 1.667px solid #ededed;
    border-radius: 6.667px;
    font-size: 24px;
    height: 80px;
    text-align: center;
    width: 100%;
    max-width: 72px;
}

form button.submit {
    height: 44px;
    width: 100%;
    border: 0;
    background: #000;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    padding: 8px 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 30px;
}

.activation-form { 
	box-shadow: 0 2px 50px 0 #00000014;
	padding: 72px 92px;
	align-items: start;
	display: block;
}
.activation-form img.logo {
    width: 150px;
    margin: 0 0 50px;
}



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

    .form-wrapper { padding: 30px 4rem; }

}

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

	.main-container,
	.half-container { 
        width: 100%;
        display: block;
	}
	.form-wrapper { 
        height: unset;
        padding: 30px;
        box-shadow: none;
	}

	h1, h2 { font-size:20px; }

}



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

	img.logo { width:250px; }

}