#loginBox {
    max-width: 575px;
}

#captchaWrapper {
    display: flex;
}

#captchaImg {
    min-width: 250px;
    box-shadow: 0px 0px 9px 2px gray;
    border-radius: 5px;
    margin-bottom: 10px;
}

#refreshCaptcha {
    height: 48px;
    width: 48px;
    min-width: unset;
    margin-left: 1em;
    font-size: 1.5em;
    line-height: 2em;
}

input::placeholder {
    color: #DADADA;
    opacity: 1;
}

.inputError {
    border-color: red !important;
}

.inputError::placeholder {
    color: red;
}

.errorFlagWrapper {
    position: absolute;
    z-index: 5;
    font-size: .9em;
}

.errorFlagTip {
    height: 1.5em;
    width: 1.5em;
    position: relative;
    top: 0.45em;
    left: 1.1em;
    background-color: #282828;
    transform: rotateZ(45deg);
    z-index: -1;
}

.errorFlagContent {
    background-color: #282828;
    padding: 0.5em 1em;
    border-radius: 8px;
}

#submitLogin {
    margin-top: 10px;
}

#successDiv img {
    max-width: 100%;
}

#svgBackground {
    animation: shiftRight 1s ease-out;
}

#svgHuman {
    animation: shiftUp 1s ease-out;
}

@keyframes shiftUp {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes shiftRight {
    0% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0px);
    }
}