:root {
	--intertight: 'Inter Tight';
	--imageopacity: 0.7;
    --transition: all .3s;
	--black: #020202;
    --darkgrey: #40403C;
	--white: #F7F6F3;
    --lightgrey: #E6E7E8;
    --green: #4FDB9A;
}

body {margin: 0; padding: 0; font-size: 13px; font-family: var(--intertight);}
p {margin-bottom: 10px;}
img {max-width: 100%; display: block;}
a {text-decoration: none;}
input[type='text'], input[type='password'], input[type='number'], select {font-family: var(--intertight); font-size: 13px; border: 1px solid var(--darkgrey); color: var(--darkgrey); box-sizing: border-box; padding: 10px 15px; width: 100%; box-sizing: border-box;}
button {cursor: pointer; border: 0; background: var(--black); padding: 10px 15px; color: #FFF; font-size: 13px; font-family: var(--intertight); width: 100%; box-sizing: border-box; transition: var(--transition);}
button:hover {background: var(--darkgrey);}
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--darkgrey);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-right: 8px;
    background-color: var(--black);
}

input[type="checkbox"]:checked {
    background-color: var(--black); /* Your green color */
    border-color: var(--black);
}

input[type="checkbox"]:checked::after {
    content: "✓";
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}

.loginregister-bg {background: url('../images/login-bg.webp') no-repeat center center; background-size: cover; position: fixed; top: 0; bottom: 0; left: 0; right: 0;}
.loginregister-wrapper {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3)}

.login-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; grid-auto-rows: 1fr; grid-template-columns: 50% 50%; z-index: 1; width: 90%; max-width: 700px;}
.login-left, .login-right {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 5%; box-sizing: border-box;}
.login-left {color: #FFF; height: 100%; background: rgba(0, 0, 0, 0.7); width: 100%; text-align: center;}
.login-left a {text-decoration: underline; color: #FFF;}
.login-right {color: var(--darkgrey); height: 100%; width: 100%; background: #FFF;}
.login-right a {color: var(--darkgrey);}
.login-contact {color: #BDB6AB; text-align: center;}
.login-contact a {color: var(--black);}
.login-form-wrapper {width: 100%;}
.login-form {margin-bottom: 20px;}
.form-group {margin-bottom: 15px;}
.form-info-wrapper {margin-top: 5px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center;}
.login-form input[type="checkbox"] {background: var(--black);}
.main-title {font-size: 30px; margin-bottom: 20px;}
.login-title {font-size: 30px; margin-bottom: 20px; text-align: center; line-height: 1em;}

.register-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--white); color: var(--darkgrey); padding: 20px 2%; width: 80%; box-sizing: border-box;}
.register-title {text-align: center; font-size: 35px; margin-bottom: 35px; line-height: 1em;}
.register-form {display: grid; grid-auto-rows: 1fr; grid-template-columns: 48% 48%; column-gap: 4%;}
.register-left {width: 100%; height: 100%; box-sizing: border-box;}
.register-right {width: 100%; height: 100%; box-sizing: border-box;}
.toc-wrapper {margin-bottom: 40px; color: #BDB6AB;}
.toc-wrapper a {color: var(--black);}
.register-button {margin-bottom: 15px;}
.go-to-login {text-align: center; color: #BDB6AB; }
.go-to-login a {color: var(--black)}

.alert ul {margin-bottom: 0;}

@media screen and (max-width: 600px) {
    .login-box {display: flex; flex-direction: column;}
}