.login-pages {
    color: var(--color-grey-200);
    font-family: Roboto;
    background-color: #F5F9F7;

    .form-signin {
        width: 33rem;
        padding: 2rem 5.5rem 2.5rem 5.5rem;
        margin: auto;
        background-color: white;
        border-radius: 10px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        height: 40.75rem;

        .back-button {
            position: relative;
            top: 2rem;
            left: -2rem;
            color: var(--color-grey-200);
            font-size: 1rem;
            cursor: pointer;

            &:hover {
                color: var(--color-grey-100);
            }
        }
    }

    .form-signin .form-control {
        box-sizing: border-box;
        height: auto;
        padding: 0.625rem;
        font-size: 1rem;
    }

    .form-signin .form-control:focus {
        z-index: 2;
    }

    .button.is-primary {
        height: auto;
        padding: 0.625rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5rem;
    }

    .password-forgotten {
        color: #657B6F;
        font-size: 0.85rem;
        text-decoration: underline;

        &:hover {
            color: #586D62;
        }
    }

    .trademark {
        text-align: center;
        margin-bottom: auto;
    }

    .warning-error {
        svg path {
            fill: var(--color-red-default);
        }
    }

    .icon-check {
        border-radius: 100%;
        border: solid #A5AAB2 1px;
        padding: 3px;

        &.valid-check {
            background-color: var(--color-green-1kmapied);
            border-color: var(--color-green-1kmapied);

            path {
                stroke: var(--color-white);
            }
        }
    }

    .form-control:disabled {
        background-color: whitesmoke;
        color : var(--color-grey-50)
    }
}