.auth-form .form-group {
    margin-bottom: 15px;
    position: relative;
}

.auth-form .form-group .input-icon-wrapper {
    display: none;
    position: absolute;
    bottom: 0;
    right: 12px;
    cursor: pointer;
}
::-ms-reveal {
    display: none;
}
.auth-form .form-group .input-icon,
.auth-form .form-group.password-group input:placeholder-shown + .input-icon-wrapper,
.auth-form .form-group input[type="text"] + .input-icon-wrapper .password-hidden,
.auth-form .form-group input[type="password"] + .input-icon-wrapper .password-visible {
    display: none;
}

.auth-form .form-group input:not(:placeholder-shown) + .input-icon-wrapper,
.auth-form .form-group input[type="password"]:not(:placeholder-shown) + .input-icon-wrapper .password-hidden,
.auth-form .form-group input[type="text"]:not(:placeholder-shown) + .input-icon-wrapper .password-visible {
    display: block;
}

.auth-form .form-group.invalid label {
    color: #BA2A1F;
}

.auth-form .form-group.invalid input {
    border-color: #BA2A1F;
    background-color: #FCF1ED;
}

.auth-form .form-group label {
    text-transform: capitalize;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #333333;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0;
}

.auth-form .form-group input {
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    color: #333;
    padding: 10px 12px 12px 12px;
    height: 40px;
}

.auth-form .form-group.password-group input {
    padding-right: 40px;
}

.auth-form .form-group:not(.invalid) input:focus,
.auth-form .form-group:not(.invalid) input:active {
    border-color: #78AEE4
}

.auth-form .submit-button {
    width: 100%;
    height: 44px;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
    text-align: center;
    background-color: #A2302A;
    color: #FFFFFF;
    border: none;
    margin-bottom: 24px;
    border-radius: 2px;
    opacity: 1;
}

.auth-form .submit-button:not(.loading):hover,
.auth-form .submit-button:not(.loading):focus {
    background-color: #444444;
}
.auth-modal .auth-form .r-club-security-username {
    display: none;
}

.auth-form .submit-button.loading {
    user-select: none;
    cursor: default;
    position: relative;
    color: rgba(255, 255, 255, 0.2);
}

.auth-form .submit-button.loading:after {
    content: url("/images/sign-in/loader.svg");
    animation: spin 1.5s linear infinite;
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: calc((100% - 20px) / 2);
    top: calc((100% - 20px) / 2);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.auth-form .remember-me {
    display: flex;
    align-items: center;
    position: relative;
}

.auth-form .remember-me label {
    margin-left: 28px;
    margin-bottom: 21px;
    text-transform: initial;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0;
}

.auth-form .remember-me input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0;
    background-color: #FFFFFF;
    width: 0;
    height: 0;
}

.auth-form .remember-me input[type=checkbox]:before {
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #CCCCCC;
    position: absolute;
    top: 1px;
    left: 0;
}

.auth-form .remember-me input[type=checkbox]:hover:before,
.auth-form .remember-me input[type=checkbox]:focus:before {
    border: 1px solid #78AEE4;
}


.auth-form .remember-me input[type=checkbox]:checked:after {
    content: url("/images/sign-in/check-mark.svg");
    position: absolute;
    left: 5px;
    top: 3px;
}

/*region Password requirements Popover*/
.auth-form .popover {
    background-color: #EBEBEB;
    border: 1px solid transparent;
    border-radius: 2px;
    box-shadow: none;
    width: 240px;
}

.auth-form .popover.right {
    margin-left: 21px;
}

.auth-form .popover.top {
    margin-bottom: 21px;
}

.auth-form .popover .arrow {
    border-color: transparent;
}

.auth-form .popover.right .arrow:after {
    border-right-color: #ebebeb;
    border-width: 7px 12px 7px 0
}

.auth-form .popover.top .arrow:after {
    border-top-color: #EBEBEB;
    bottom: 1px;
    margin-left: -10px;
    content: " ";
    border-bottom-width: 0;
}

.auth-form .popover .popover-content {
    padding: 12px;
}

.auth-form .popover .popover-content .requirements-title {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;

}


.auth-form .popover .popover-content .requirements-title,
.auth-form .popover .popover-content .requirements {
    margin-bottom: 8px;
}
.auth-form .popover .popover-content .requirements {
    display: flex;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

.auth-form .popover .popover-content .requirements:before {
    content: url("/images/sign-in/check-mark-grey.svg");
    margin-right: 8px;
    width: 20px;
    height: 20px;
}

.auth-form .popover .popover-content .requirements.valid {
    color: #56943A;
}

.auth-form .popover .popover-content .requirements.valid:before {
    content: url("/images/sign-in/check-mark-green.svg");
}

.auth-form .password-group.invalid .popover .popover-content .requirements:not(.valid) {
    color: #BA2A1F;
}

.auth-form .password-group.invalid .popover .popover-content .requirements:not(.valid):before {
    content: url("/images/sign-in/cross-mark-red.svg");
}
/*endregion*/

/*region Error message Popover*/
.auth-form .form-group.invalid:not(.password-group__create) .popover,
.auth-form .btn.submit-button + .popover {
    background-color: #FCF1ED;
    max-width: 240px;
    min-width: 160px;
    width: auto;
}
.auth-form .form-group:not(.invalid):not(.password-group__create) .popover {
    visibility: hidden !important;
}

.auth-form .form-group.invalid:not(.password-group__create) .popover.right .arrow:after,
.auth-form .btn.submit-button + .popover.right .arrow:after {
    border-right-color: #FCF1ED;
}

.auth-form .form-group.invalid:not(.password-group__create) .popover.top .arrow:after,
.auth-form .btn.submit-button + .popover.top .arrow:after {
    border-top-color: #FCF1ED;
}

.auth-form .form-group.invalid:not(.password-group__create) .popover .popover-content .error-message,
.auth-form .btn.submit-button + .popover .popover-content .message__failed {
    color: #BA2A1F;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}
/*endregion*/

/*region Mobile View*/

.device-xxs .auth-form .remember-me label,
.device-xs .auth-form .remember-me label,
.device-sm .auth-form .remember-me label {
    margin-bottom: 17px;
}

.device-xxs .auth-form .submit-button,
.device-xs .auth-form .submit-button,
.device-sm .auth-form .submit-button {
    margin-bottom: 20px;
}

/*endregion*/