.bl__form-container {
}
#bl__form {
max-width: 450px;
padding: 20px;
margin: 0 auto;
position: relative;
}
.bl__field {
width: 100%;
margin-bottom: 10px;
}
.bl__name {
display: flex;
justify-content: space-between;
}
.bl__name div {
width: 49%;
}
.bl__field input {
width: 100%;
}
.bl__submit {
width: 100%;
}
.bl__error input{
border-color: red;
}
.bl-error {
font-size: 10px;
color: red;
padding-left: 3px;
margin-top: 3px;
display: block;
}
.iti.iti--allow-dropdown {
width: 100%;
}
.bl__loading {
position: absolute;
background: #ffffffd9;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
z-index: 9;
display: none;
}
.bl__loading > div {
margin: auto;
}
.bl__loading-text {
text-align: center;
font-size: 14px;
padding-left: 5px;
}
.bl__loading-icon {
display: inline-block;
position: relative;
width: 80px;
height: 50px;
}
.bl__loading-icon div {
display: inline-block;
position: absolute;
left: 8px;
width: 16px;
background: #28303d;
animation: bl__loading-icon 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.bl__loading-icon div:nth-child(1) {
left: 8px;
animation-delay: -0.24s;
}
.bl__loading-icon div:nth-child(2) {
left: 32px;
animation-delay: -0.12s;
}
.bl__loading-icon div:nth-child(3) {
left: 56px;
animation-delay: 0;
}
@keyframes bl__loading-icon {
0% {
top: 8px;
height: 64px;
}
50%, 100% {
top: 24px;
height: 32px;
}
}