.user-login-form{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    row-gap:20px
}
.user-login-form .form-input-container .form-input__name{
    font-size:14px;
    font-weight:500;
    line-height:20px;
    color:#18181b
}
.user-login-form .form-input-container .form-input__name+input[type=password],.user-login-form .form-input-container .form-input__name+input[type=text],.user-login-form .form-input-container input[type=password]+.form-input-error .form-input-error__message,.user-login-form .form-input-container input[type=text]+.form-input-error .form-input-error__message{
    margin-top:2px
}
.user-login-form .form-input-container input[type=password],.user-login-form .form-input-container input[type=text]{
    display:block;
    border:1px solid #d4d4d8;
    border-radius:12px;
    padding:12px 16px;
    font-size:16px;
    font-weight:400;
    line-height:24px;
    color:#18181b;
    transition-property:color,border;
    transition-duration:.3s
}
.user-login-form .form-input-container input[type=password]::placeholder,.user-login-form .form-input-container input[type=text]::placeholder{
    color:#71717a
}
.user-login-form .form-input-container input[type=password]:focus,.user-login-form .form-input-container input[type=text]:focus{
    border-color:#18181b
}
.user-login-form .form-input-container.is-errored input[type=password],.user-login-form .form-input-container.is-errored input[type=text]{
    border-color:#be123c
}
.user-login-form .form-input-container .form-input-error{
    display:grid;
    grid-template-rows:0fr;
    overflow:hidden;
    transition-property:grid-template-rows;
    transition-duration:.3s
}
.user-login-form .form-input-container .form-input-error .form-input-error__wrapper{
    min-height:0
}
.user-login-form .form-input-container .form-input-error .form-input-error__message{
    font-size:14px;
    font-weight:400;
    line-height:20px;
    color:#be123c
}
.user-login-form .form-input-container.is-errored .form-input-error{
    grid-template-rows:1fr
}

/* Checkbox remember me / */
.user-login-form .form-input-container.is-checkbox .form-input__label {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	column-gap: 8px;
	width: auto;
	cursor: pointer;
}

.user-login-form .form-input-container.is-checkbox .form-input__label input[type = "checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
	appearance: none;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.user-login-form .form-input-container.is-checkbox .form-input__label .form-input__checkbox {
	flex-shrink: 0;
	display: block;
	width: 18px;
	height: 18px;
	margin: 3px;
	padding: 0px;
	border: none;
	border-radius: 4px;
	box-shadow: 0 0 0 2px #71717a inset;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 18C1.45 18 0.979 17.8043 0.587 17.413C0.195667 17.021 0 16.55 0 16V2C0 1.45 0.195667 0.979 0.587 0.587C0.979 0.195667 1.45 0 2 0H16C16.55 0 17.021 0.195667 17.413 0.587C17.8043 0.979 18 1.45 18 2V16C18 16.55 17.8043 17.021 17.413 17.413C17.021 17.8043 16.55 18 16 18H2ZM7.6 12.775C7.73333 12.775 7.85833 12.7543 7.975 12.713C8.09167 12.671 8.2 12.6 8.3 12.5L13.975 6.825C14.1583 6.64167 14.25 6.41667 14.25 6.15C14.25 5.88333 14.15 5.65 13.95 5.45C13.7667 5.26667 13.5333 5.175 13.25 5.175C12.9667 5.175 12.7333 5.26667 12.55 5.45L7.6 10.4L5.425 8.225C5.24167 8.04167 5.01667 7.95 4.75 7.95C4.48333 7.95 4.25 8.05 4.05 8.25C3.86667 8.43333 3.775 8.66667 3.775 8.95C3.775 9.23333 3.86667 9.46667 4.05 9.65L6.9 12.5C7 12.6 7.10833 12.671 7.225 12.713C7.34167 12.7543 7.46667 12.775 7.6 12.775Z' fill='%239E8559' /%3e%3c/svg%3e");
	background-size: 0%;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	transition-property: background, box-shadow;
	transition-duration: 0.3s;
	transition-timing-function: linear;
}

.user-login-form .form-input-container.is-checkbox .form-input__label .form-input__title {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #18181b;
}

.user-login-form .form-input-container.is-checkbox .form-input__label input[type = "checkbox"]:checked + .form-input__checkbox {
	background-size: 100%;
	box-shadow: 0 0 0 2px #9e8559 inset;
}
/* / Checkbox remember me */

.user-login-form .form-buttons{
    display:flex;
    flex-direction:column;
    justify-content:stretch
}
.user-login-form .form-buttons .form-buttons__forgot-password-button{
    align-self:flex-start;
    display:block;
    margin:0;
    padding:0;
    border:none;
    border-radius:0;
    background-color:transparent!important;
    font-size:14px;
    font-weight:400;
    line-height:20px;
    color:#9e8559
}
.user-login-form .form-buttons .form-buttons__forgot-password-button:hover{
    color:#7b6540
}
.user-login-form .form-buttons .form-buttons__submit-button{
    position:relative;
    display:block;
    margin:0;
    padding:12px 24px;
    border:none;
    border-radius:12px;
    background-color:#9E8559;
    font-size:16px;
    font-weight:500;
    line-height:24px;
    color:#fff;
    overflow:hidden
}
.user-login-form .form-buttons .form-buttons__submit-button::after,.user-login-form .form-buttons .form-buttons__submit-button::before{
    content:'';
    position:absolute;
    z-index:1;
    display:block;
    visibility:hidden;
    opacity:0;
    transition-property:visibility,opacity;
    transition-duration:.3s
}
.user-login-form .form-buttons .form-buttons__submit-button::before{
    top:0;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    background-color:inherit
}
.user-login-form .form-buttons .form-buttons__submit-button::after{
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(-65deg);
    width:24px;
    height:24px;
    border:2px solid #fff;
    border-bottom-color:transparent;
    border-radius:50%;
    animation-duration:.8s;
    animation-timing-function:linear;
    animation-iteration-count:infinite
}
.user-login-form .form-buttons .form-buttons__submit-button:hover{
    background-color:#161616
}
.user-login-form.is-loading .form-buttons .form-buttons__submit-button::after,.user-login-form.is-loading .form-buttons .form-buttons__submit-button::before{
    visibility:visible;
    opacity:1;
    pointer-events:none
}
.user-login-form.is-loading .form-buttons .form-buttons__submit-button::after{
    animation-name:loading_animation_rotate_cyrcle
}
@keyframes loading_animation_rotate_cyrcle{
    0%{
        transform:translate(-50%,-50%) rotate(-65deg)
    }
    100%{
        transform:translate(-50%,-50%) rotate(295deg)
    }
}