/* Root: variables colors */
:root {
    --green-light-main-clr: rgba(159, 232, 112, 1);
    --green-dark-main-clr: rgba(22, 51, 0, 1);
    --green-light-main-hover-clr: rgb(152, 223, 108);
    --black-clr: #111111;
    --grey-clr: #808080;
    --white-clr: #ffffff;
    --input-clr: #2b2b2b;
    --red-clr: #ff4040;
    --model-light-clr: #f4f4f4;
    --model-light-shadow: #e7e7e7;
    --model-dark-clr: #161616;
    --paragraph-white-clr: #e2e2e2;
}

/* Root : variables sizes */
:root {
    --font-size-12: 12px;
    --font-size-10: 10px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-32: 32px;
    --font-size-48: 48px;
    --font-size-64: 64px;
}

/* Root : borders */

:root {
    --border-radius-30: 30px;
}

/* Root : variable font */
:root {
    --main-font: "Epilogue", sans-serif;
}

/* Root : transation */
:root {
    --transition: all 0.3s ease-in-out;
    --transition-in: transform 0.3s ease-in; /* For scaling in */
    --transition-out: transform 0.5s ease-out; /* For scaling out */
}

@media screen and (min-width: 1400px) {
}

@media screen and (min-width: 1200px) {
}

@media screen and (max-width: 1199px) {
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 991px) {
    .auth-body {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .auth-logo {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .auth-body .auth-form {
        width: 85% !important;
    }
}

@media screen and (max-width: 567px) {
    .auth-header .auth-logo-mobile {
        height: 30px !important;
    }

    .auth-header .support-btn {
        padding: 5px 10px !important;
        font-size: var(--font-size-10) !important;
    }

    .auth-body {
        padding-top: 30px !important;
        padding-bottom: 50px !important;
    }

    .auth-body .auth-title .title {
        font-size: var(--font-size-18) !important;
        font-weight: 600;
        line-height: 20px;
    }

    .auth-body .auth-title p {
        font-size: var(--font-size-14) !important;
    }

    .auth-body .auth-form {
        width: 100% !important;
    }

    .canceled-title p {
        width: 350px !important;
    }

    .request-alert {
        padding: 10px 10px !important;
    }
}

@media screen and (max-width: 425px) {
}

@media screen and (max-width: 320px) {
    .auth-header .auth-logo {
        height: 30px !important;
    }

    .auth-body .sign-up-account {
        width: 290px !important;
    }

    .auth-body .sign-up-account img {
        height: 20px !important;
        width: 20px !important;
    }

    .auth-body .sign-up-account .s-title {
        font-size: var(--font-size-14) !important;
    }

    .auth-body .sign-up-account p {
        font-size: var(--font-size-12) !important;
        color: var(--grey-clr);
        line-height: 18px !important;
    }

    .canceled-title p {
        width: 300px !important;
    }
}