@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Syne:wght@400..800&display=swap");

:root {
    --primary-color: #719a00;
    --black-color: #000000;
    --border-color: #b8c4d1;
    --white-color: #ffffff;
    --label-color: #292929;
    --placeholder-color: #777777;
    --icon-color: #a3aed0;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Syne", sans-serif;
}

.left-login-content {
    position: relative;
    width: 100%;
    height: 100vh;
}

.left-login-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.left-login-content .login-logo {
    position: absolute;
    top: 50px;
    left: 50px;
}

.right-login-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.login-form {
    max-width: 550px;
    width: 100%;
    margin: auto;
}

.welcome-text {
    font-size: 36px;
    font-weight: 600;
    color: var(--black-color);
}

.login-header h3 {
    font-size: 28px;
    font-weight: 500;
    color: var(--primary-color);
}

.login-header p {
    color: var(--label-color);
    font-weight: 400;
}

.input-field label {
    color: var(--label-color);
    font-weight: 400;
    margin-bottom: 5px;
}

.form-control {
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-light, #fafafa);
    padding: 10px;
}

.form-control:focus {
    box-shadow: none;
    border: 1px solid var(--primary-color);
}

.login-btn {
    background-color: var(--primary-color);
    padding: 10px;
    color: var(--white-color);
    width: 100%;
}
.login-btn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.form-check-input:focus {
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.forgor-password a {
    color: var(--primary-color);
    text-decoration: none;
}

.star {
    color: #ff0000;
}
#email-error,
#password-error {
    color: red;
}

/* for input error */
#otp-error {
    color: red;
    padding: 1px 20px 1px 20px;
}
/* for password toggle */

#input-group {
    position: relative;
}

  /*Loader Css*/
  .loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    /* Semi-transparent background */
    z-index: 9999;
    /* Ensure it sits above other content */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader img {
    width: 100px;
    height: auto;
}

/* toggle password */
.pass {
    position: relative;
    display: inline-block;
}

.toggle-password {
    position: absolute;
    right: 50px;
    top: 40px;
    bottom: 90px;
    transform: translateY(-50%);
    cursor: pointer;
}

/* css for error handle */
input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: red;
}
.error{
    color:red;
}
@media (max-width:1200px){
    .right-login-content {
        padding: 20px;
    }
}
@media (max-width:767px){
.input-field label {
    color: #ffffff;
}
.right-login-content {
    padding: 20px;
    position: absolute;
    top: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;
    background: #000000c4;
    color: #fff;
}
.welcome-text {
    color: #ffffff;
    font-size: 26px;
}
.login-header p {
    color: #ffffff;
}
.left-login-content .login-logo {
    display: none;
}
}