.hide-error {
    display: none;
}

.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 20;
    background-color: rgba(247, 243, 234, 0.8);
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    line-height: 0;
    text-align: center;
    display: none
}

.loader span {
    display: block;
    line-height: 1;
    padding-top: 10px;
    font-size: 16px;
    font-size: 1.1428571429rem;
    font-weight: bold;
    color: #670b00;
    letter-spacing: .4em;
    padding-left: 5px
}

.loader span i {
    font-style: normal;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: opacity;
    animation-name: opacity;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.loader span i:nth-child(1) {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -ms-animation-delay: .2s;
    -o-animation-delay: .2s;
    animation-delay: .2s
}

.loader span i:nth-child(2) {
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -ms-animation-delay: .4s;
    -o-animation-delay: .4s;
    animation-delay: .4s
}

.loader span i:nth-child(3) {
    -webkit-animation-delay: .6s;
    -moz-animation-delay: .6s;
    -ms-animation-delay: .6s;
    -o-animation-delay: .6s;
    animation-delay: .6s
}

.loader span i:nth-child(4) {
    -webkit-animation-delay: .8s;
    -moz-animation-delay: .8s;
    -ms-animation-delay: .8s;
    -o-animation-delay: .8s;
    animation-delay: .8s
}

.loader img {
    width: 60px;
    height: auto;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: rice;
    animation-name: rice;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes rice {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    20% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    33% {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg)
    }
    53% {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg)
    }
    66% {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg)
    }
    86% {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rice {
    0% {
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
    20% {
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
    33% {
        -ms-transform: rotate(120deg);
        transform: rotate(120deg)
    }
    53% {
        -ms-transform: rotate(120deg);
        transform: rotate(120deg)
    }
    66% {
        -ms-transform: rotate(240deg);
        transform: rotate(240deg)
    }
    86% {
        -ms-transform: rotate(240deg);
        transform: rotate(240deg)
    }
    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
.d-flex{
    display: flex;
}

@media (min-width: 767px) {
    .w-250 {
        width: 250px;
    }

    .w-180 {
        width: 180px;
    }

    .d-md-flex {
        display: flex;
    }

    .d-block {
        display: block;
    }

    .item-center {
        align-items: center;
    }
}
/*fix moble screen*/
@media (max-width: 767px) {
    .w-100{
        width: 100%;
    }
    .w-250{
        width: 100%;
    }
    .w-180{
        width: 100%;
    }
    .border-b-1{
        padding-top:10px;
        padding-bottom:10px;
        border-bottom: 1px solid #d5c1a4;
    }
}


main .login .message {
    border: 2px solid;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    text-align: center;
    padding: 10px;
    margin: 0 0 25px;
    font-weight: bold;
    background: #FFF;
    border-color: #ffa73f;
    color: #000;
}


main .signup .flex #pass-strength-result {
    margin: 0;
    padding: 2px 10px;
    font-weight: bold;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    color: #FFF
}

main .signup .flex #pass-strength-result.short {
    background-color: #bf574b
}

main .signup .flex #pass-strength-result.bad {
    background-color: #fff600
}

main .signup .flex #pass-strength-result.good {
    background-color: #91c0a9
}

main .signup .flex #pass-strength-result.strong {
    background-color: #3170cf
}
.over_time .name, .has_existed .name{
    color: red;
}
.message_over_time{
    background: #FFFDC0;
    color: #EF6250;
    font-size: 16px;
    font-size: 1.0666666667rem;
    font-weight: bold;
    border: 2px solid #EF6250;
    border-radius: 5px;
    padding: 15px 30px;
    margin-bottom: 30px;
    
}