@font-face {
    font-family: 'IRANSansWeb';
    src: url('/Static/font/IranSans/IRANSansWeb.ttf') format('truetype');
}

body, html {
    width: 100%;
    height: 100%;
}

form {
    height: 100%;
}

.login {
    width: 100%;
    font-family: IRANSansWeb,Tahoma,Arial;
}

    .login,
    .login .img,
    .login .content {
        float: left;
        height: 100%;
    }

.login {
    background: #f8f8f8;
}

    .login .img {
        background: url('/Static/images/engineer-login.jpg') no-repeat center center;
        background-size: cover;
        position: relative;
        border-radius: 0 0 250px 0;
    }

        .login .img:after {
            content: "";
            background: linear-gradient(90deg, rgba(89, 156, 165,1) 0%, rgba(177, 173, 173) 100%);
            opacity: .5;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 0;
            border-radius: 0 0 250px 0;
        }

    .login .content {
        background: #f8f8f8;
        padding-top: 60px;
        direction: rtl;
        text-align:center;
    }

        .login .content h1 {
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            color: #292929;
            margin-bottom: 40px;
        }

        .login .content .title {
            font-family: Bauhaus Medium,Tahoma;
            font-size: 20px;
            width: 100%;
            text-align: center;
            margin-top: 150px;
        }

            .login .content .title label {
                margin: 0 2px;
            }

                .login .content .title label:first-child {
                    color: #292929;
                }

                .login .content .title label:last-child {
                    color: #CFA144;
                }


        .login .content .user-image {
            font-size: 55px;
            text-align: center;
            width: 100%;
            margin-bottom: 10px;
        }

            .login .content .user-image i {
                border: #ddd solid 1px;
                border-radius: 50%;
                width: 90px;
                height: 90px;
                padding-top: 15px;
                background: #fff;
            }

        .login .content input {
            margin-bottom: 10px;
            text-align: right;
        }

            .login .content input[type="submit"] {
                background: #292929;
                text-align: center;
                margin-top: 20px;
                font-size: 13px;
                height: 38px;
            }

    .login .menu {
        width: 100%;
        height: 80px;
        list-style: none;
        padding: 0;
        float: right;
        padding-top: 20px;
        transition: all .5s;
        position: relative;
        z-index: 10;
    }

        .login .menu li {
            float: right;
            text-align: center;
            min-width: 120px;
            direction: rtl;
        }

            .login .menu li i {
                margin-left: 5px;
                transition: all .5s;
                color: #CFA144;
            }

            .login .menu li a {
                color: #fff;
                font-size: 13px;
                text-decoration: none;
            }

            .login .menu li a,
            .login .menu li i,
            .login .menu li label {
                cursor: pointer;
            }

                .login .menu li a:hover > label {
                    color: #fff;
                }


@media screen and (max-width:1024px) {
    .login .img,
    .login .img:after {
        border-radius: 0 0 170px 0;
    }

    .login .content .title {
        margin-top: 80px;
    }
}

@media screen and (max-width:767px) {
    .login .img {
        height: 50px;
        background-image: none;
        background-color: #fff;
        border-radius: 0;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10;
    }

        .login .img:after {
            display: none;
        }


    .login .content {
        padding-top: 80px;
    }

        .login .content .title {
            margin-top: 80px;
        }
}

@media screen and (max-width:425px) {

    .login .content {
        padding-left: 0;
        padding-right: 0;
    }
}