.root {
    --color-lightblue: #60b2de;
    --nav-height: 115px;
    --nav-gap-x: 80px;
    --menu-gap-x: 22px;
    --menu-gap-y: 22px;
    --menu-width: 270px;
    --menu-width-small: 75px;
    --menu-icon-size: 15px;
    --menu-link-padding-x: 15px;
    --menu-link-padding-y: 10px;
    --menu-link-text-gap: 15px;
    --main-content-gap-x: 50px;
    --main-content-gap-y: 50px;
    --footer-height: 85px;
    --color-info-gap-x: 20px;
    --color-info-gap-y: 25px;
    --color-info-icon-size: 18px;
    --color-info-icon-gap: 10px;
    --color-info-content-gap: calc(var(--color-info-icon-size) + var(--color-info-icon-gap));
}
.card {
    --color-blue: #225674;
    --color-blue-light: #0277BD;
    --icon-gap: 20px;
    --icon-size: 20px;
    --text-color: #666666;
    height: 100vh;
    padding: 50px 20px;
}

.card-container {
    width: 450px;
    max-width: 400px;
}

.card-header {
    /**/
}

    .card-header.is-logo {
        /**/
    }

.card-content {
    /**/
}

.card-label {
    color: var(--text-color);
}

.card-input {
    border: 1px solid #AEB6BF;
    border-radius: 24px;
    color: var(--text-color);
    outline: none;
    padding: 12px 20px;
    padding-left: calc(var(--icon-gap) + (var(--icon-size) / 2) + var(--icon-size));
    width: 100%;
}

    .card-input::placeholder {
        color: #D6DBDF;
    }

.card-logo {
    width: 100%;
    max-width: 200px;
}

.card .input-form {
    /**/
}

.card .input-group {
    position: relative;
}

    .card .input-group .input-icon {
        height: 100%;
        left: 0;
        padding: 0px var(--icon-gap);
        position: absolute;
        top: 0;
    }

        .card .input-group .input-icon .icon {
            width: var(--icon-size);
        }

    .card .input-group .card-input {
        /**/
    }

.card .form-actions {
    /**/
}

    .card .form-actions .action-submit {
        background-color: var(--color-blue);
        border-radius: 30px;
        color: white;
        outline: none;
        padding: 15px 25px;
        width: 100%;
    }

        .card .form-actions .action-submit:hover {
            opacity: .75;
            transition: all .2s linear;
        }

    .card .form-actions .action-recovery {
        background-color: var(--color-blue-light);
        border-radius: 30px;
        color: white;
        outline: none;
        padding: 15px 25px;
        width: 100%;
    }

.card .link-access {
    color: var(--color-blue);
    text-decoration: underline;
}

    .card .link-access:hover {
        opacity: .75;
        transition: all .2s linear;
    }

@media (max-width: 768px) {
    .card-logo {
        width: 128px;
    }
}

@media (max-width: 767px) {
    .card {
        /**/
    }

        .card .form-actions {
            /**/
        }

            .card .form-actions.auth-recovery {
                /**/
            }

                .card .form-actions.auth-recovery .action-recovery {
                    margin-top: 20px;
                }
}
.m-auto {
    margin: auto;
}

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

.items-center {
    align-items: center;
}

.flex {
    display: flex;
}

.bg-cover {
    background-size: cover;
}

* {
    --tw-ring-inset: var(--tw-empty, );
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
}

* {
    --tw-shadow: 0 0 #0000;
}

*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

.bg2-white {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.py-14 {
    padding-top: 3.5rem;
    padding-bottom : 3.5rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.pb-8 {
    padding-bottom: 2rem;
}
.text-center {
    text-align: center;
}
.font-bold {
    font-weight: 700;
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle;
}

.inline-block {
    display: inline-block;
}