@font-face {
    font-family: 'DanaMedium';
    src: url('fonts/Dana-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'DanaBold';
    src: url('fonts/Dana-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Yekan-Medium';
    src: url('fonts/Yekan-Medium.ttf') format('truetype');
}

body {
    direction: rtl;
    font-family: DanaMedium;
    background-image: url('Images/back.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0% 10%;
}

.LoginBox {
    background-image: url('Images/login_box.png');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    box-shadow: 0px 4px 100px #9d9d9d;
    width: 100%;
    max-width: 700px;
    margin: 100px auto;
    text-align: center;
    padding-bottom: 20px;
}

    .LoginBox .Top_des {
        background-color: #1460f5;
        width: 33%;
        height: 15px;
        border-radius: 0px 0px 10px 10px;
        margin: 0 auto;
    }

    .LoginBox .Logo {
        background-image: url('Images/logo.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 100%;
        height: 200px;
    }

    .LoginBox .Title1 {
        font-family: Yekan-Medium;
        font-size: 23px;
        font-weight: 500;
        letter-spacing: 0%;
        text-align: center;
    }

    .LoginBox .Title2 {
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 0%;
        text-align: center;
        color: #585858;
    }

    .LoginBox .UserInput {
        background-color: #ffffff;
        box-shadow: 0px 4px 50px #dedede;
        border-radius: 15px;
        width: 60%;
        margin: 0 auto;
        padding: 25px;
    }

        .LoginBox .UserInput input[type="text"], input[type="password"] {
            font-family: DanaMedium;
            font-size: 16px;
            width: 85%;
            height: 30px;
            margin-right: 5px;
            border: none;
            border-right: 1px solid #e5e5e5;
            padding: 0 10px 0 10px;
        }

            .LoginBox .UserInput input[type="text"]:focus, input[type="password"]:focus {
                outline: none;
            }

            .LoginBox .UserInput input[type="text"]:is(:-webkit-autofill, :autofill), input[type="password"]:is(:-webkit-autofill, :autofill) {
                transition: background-color 5000s ease-in-out 0s;
            }

    .LoginBox .Login-btn {
        font-family: DanaBold;
        font-size: 16px;
        color: #fff;
        background-color: #105cf0;
        box-shadow: 0px 4px 50px #bfbfbf;
        border-radius: 10px;
        width: 200px;
        height: 70px;
        border: none;
    }

        .LoginBox .Login-btn:hover {
            cursor: pointer;
        }

.error{
    color:red;
}