.from-container {
    display: block;
    position: absolute;
    top: 45%;
    left: 50%;
    width: 350px !important;
    height: 430px !important;
    transform: translate(-55%, -45%);
    background: #cedef9;
    border-radius: 15px;
    padding: 25px 35px;
    border: 5px solid rgb(255, 255, 255);
    box-shadow: 10px 10px 15px #1e516f43, -10px -10px 20px #cde9fd3d;
    margin: 20px;
}

    .from-container > i {
        display: flex;
        justify-content: center;
        margin: 10px 0 30px 0;
        font-size: 40px;
    }

.heading {
    text-align: center;
    font-weight: 900;
    font-size: 24px;
    color: rgb(16, 137, 211);
}

.form {
    direction: rtl;
    margin-top: 20px;
}

    .form .input {
        width: 100%;
        font-size: 15px;
        border: none;
        padding: 15px 40px 15px 10px;
        border-bottom: 1px solid rgb(109, 186, 234);
        margin-top: 15px;
        border-inline: 2px solid transparent;
        background: none;
    }

    .form > i.user {
        position: absolute;
        top: 182px;
        right: 51px;
    }

    .form > i.password {
        position: absolute;
        top: 245px;
        right: 51px;
    }

    .form .input::-moz-placeholder {
        color: rgba(87, 157, 201, 0.682);
    }

    .form .input::placeholder {
        color: rgba(87, 157, 201, 0.682);
    }

    .form .input:focus {
        outline: none;
        border-inline: none;
    }

    .form .forgot-password {
        display: block;
        margin-top: 10px;
        margin-left: 10px;
    }

        .form .forgot-password a {
            font-size: 11px;
            color: #0099ff;
            text-decoration: none;
        }

    .form .login-button {
        display: block;
        width: 100%;
        height: 3em;
        font-weight: bold;
        padding-block: 15px;
        margin-top: 40px;
        font-size: 17px;
        border-radius: 20px;
        box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
        border: none;
        transition: all 0.2s ease-in-out;
        color: white;
        background: linear-gradient( 45deg, rgb(53, 128, 175) 0%, rgb(28, 158, 184) 100% );
    }
        .form .login-button:hover {
            transform: scale(1.03)!important;
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px!important;
        }

        .form .login-button:active {
            transform: scale(0.95)!important;
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px!important;
        }
.wrap-input-login {
    width: 100%;
    position: relative;
    margin-bottom: 30px;
}

.login-input {
    font-size: 14px !important;
    color: #8C8C8C;
    /*border-color: white !important;
                            border-bottom-width: 2px !important;*/
    line-height: 2em;
    display: block;
    width: 100%;
    height: 2em;
    padding: 0 30px 0 38px;
}
.icon-span {
    font-size: 17px;
    display: flex !important;
    float: right;
    color: #086195;
    position: absolute;
    top: 5px;
}
.icon-title {
    color: #086195;
}