.connection {
    width: fit-content;
    margin: 0 auto;
    padding: 1em 2em;
    cursor: default;
}

    .connection:hover {
        border-color: var(--light-gray);
    }

    .connection > h2,
    .connection > input {
        margin-bottom: .8rem;
    }

    .connection > label,
    .connection > button.lms-btn {
        font-size: 1.2rem;
    }

    .connection > h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .connection > input {
        font-weight: 500;
        font-size: 1.1rem;
        padding: .3rem 1rem;
        border-radius: var(--border-radius);
        border-style: solid;
        border-width: var(--border-thickness);
        border-color: var(--light-gray);
        outline: none;
    }

    .connection > input {
        font-family: var(--limseo-text-font-family);
    }

        .connection > input:hover:not(.error) {
            border-color: var(--limseo-light-lblue);
            background-color: var(--limseo-superlight-lblue)
        }

        .connection > input:focus:not(.error,:hover) {
            background-color: var(--superlight-gray)
        }

        .connection > input.error {
            border-color: var(--light-red-error);
            background-color: var(--superlight-red-error);
        }

    .connection > button.lms-btn {
        margin-top: .3rem;
        font-weight: 500;
        padding: .5em;
        /* text-transform: uppercase; */
    }

        .connection > button.lms-btn.error {
            background-color: var(--red-error);
        }

            .connection > button.lms-btn.error:hover,
            .connection > button.lms-btn.error:focus {
                background-color: var(--light-red-error);
            }

div.error {
    text-align: center;
    white-space: pre-wrap;
    width: fit-content;
    margin: 1rem auto;
    color: var(--red-error);
    font-weight: 500;
}