/* Authentication forms */


.auth-main{
    background-color: var(--font-fff);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;

    a:not(.btn){
        color: var(--primary-color);
    }

    .auth_div{
        background-color: var(--font-fff);
        width: 360px;
        z-index: 2;

        @include max-screen($break-small - 1px) {
            width: 320px;
        }
        .card{
            overflow: hidden;
            background: transparent;
            border: 0;
        }
    }
    .auth_brand{
        @extend .m-b-30;

        .navbar-brand{
            color: var(--dark-color);
            font-size: 35px;
            margin: 0;
            padding: 0;
        }
    }
	.form-auth-small {
		.btn{
            @extend .m-t-20;
		}

		.element-left {
			float: left;
		}

		.element-right {
			float: right;
		}

		.bottom {
            @extend .m-t-20;
			@extend .align-center;
		}
    }
    .lead {
        @extend .m-t-5;
        @extend .m-b-0;
        @extend .font-20;
        color: var(--font-color);
    }
	.helper-text {
        color: var(--text-muted);
        @include display-block;
	}
	.btn-signin-social {
        @include display-block;
        @extend .m-b-5;
		padding: 10px 22px;
		width: 100%;
		background-color: var(--font-fff);
		border-color: var(--font-ccc);

		&:hover,
		&:focus {
			background-color: var(--font-eee);
		}

		i {
            @extend .font-16;
			margin: 5px;
		}
    }
    .page-400,
    .forgot-pass{
        &::before{
            z-index: 1;
        }
        .header,
        .body{
            z-index: 9;
            position: relative;
        }
    }    
    .page-400{
        position: relative;        
        &::before{
            position: absolute;
            content: '404';
            font-size: 100px;
            top: 20px;
            left: 80px;
            opacity: 0.07;
        }
    }
    .forgot-pass{
        position: relative;

        &::before{
            position: absolute;
            font-family: 'Simple-Line-Icons';
            content: '\e08e';
            font-size: 290px;
            top: -80px;
            left: 38px;
            opacity: 0.03;
        }
    }
	@include max-screen($break-medium) {
        margin: 0 auto;
    }
}
.maintenance{
    background: var(--white-color);
}

.animate_lines {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 90vw;
    z-index: 1;

    .line {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba($dark, 0.03);        

        &:after {
            background: -webkit-gradient(linear, left top, left bottom, from(var(--border-color)), color-stop(75%, var(--primary-color)), to(var(--secondary-color)));
            background: linear-gradient(to bottom, var(--border-color) 0%, var(--primary-color) 75%, var(--secondary-color) 100%);
            content: "";
            display: block;
            position: absolute;
            height: 15vh;
            width: 100%;
            top: -50%;
            left: 0;
            -webkit-animation: run 7s 0s infinite;
                    animation: run 7s 0s infinite;
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
            -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
                    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
        }

        &:nth-child(1) {
            margin-left: 22%;
            &:after {
                -webkit-animation-delay: 2s;
                        animation-delay: 2s;
            }
        }
        &:nth-child(3) {
            margin-left: 12%;
            &:after {
                -webkit-animation-delay: 2.5s;
                        animation-delay: 2.5s;
            }
        }
        &:nth-child(4) {
            margin-left: 80%;
            &:after {
                -webkit-animation-delay: 3s;
                        animation-delay: 3s;
            }
        }
        &:nth-child(5) {
            margin-left: 85%;
            &:after {
                -webkit-animation-delay: 3.5s;
                        animation-delay: 3.5s;
            }
        }
        &:nth-child(6) {
            margin-left: 100%;
            &:after {
                -webkit-animation-delay: 1.5s;
                        animation-delay: 1.5s;
            }
        }
    }
    @-webkit-keyframes run {
        0% {
            top: -50%;
        }
        100% {
            top: 110%;
        }
    }
      
    @keyframes run {
        0% {
            top: -50%;
        }
        100% {
            top: 110%;
        }
    }
}