html {
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    direction: rtl;
    font-family: irsans;
    height: 100%;
    background: #fff;
    color: #555;
}

input[type=checkbox] {
    display: none;
}

.right {
    float: right;
}

.left {
    float: left;
}

.VYMape {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

    .VYMape > svg {
        height: 100%;
    }

.container {
    width: 100%;
}

.pages {
    width: 90%;
    position: relative;
    perspective: 800px;
    margin: auto;
    border: 1px solid transparent;
}

.box-login {
    transition: 0.3s;
    width: 33%;
    background-color: rgba(255,255,255,0.7);
    position: relative;
    border: 1px solid #e3cd93;
    animation: show 1s cubic-bezier(0.25, 0.1, 0.25, 1);
    margin: 40px auto 10px;
}

.header {
    padding: 10px 25px;
    border-bottom: 1px solid #e8e8e8;
}

    .header > h3 {
        margin: 0 0 15px;
    }

    .header > p {
        font-size: 15px;
        margin: 0px;
        padding-right: 20px;
    }

.form {
    padding-top: 30px;
    text-align: center;
}

    .form .row {
        padding: 8px 15px;
        overflow: hidden;
    }

        .form .row.form-control {
            border-bottom: 1px solid #e1e1e1;
            display: inline-block;
            text-align: right;
            padding: 5px 10px;
        }

    .form .title {
        display: inline-block;
        font-size: 13px;
    }

    .form .txt_control {
        border: 0px none;
        transition: 0.3s;
        font-size: 17px;
        font-weight: 500;
        color: #34314c;
        padding: 6px 20px;
        box-sizing: border-box;
        font-family: mitra;
        background: transparent;
        margin: auto;
        display: inline-block;
        padding-right: 15px;
    }

    /*.form .txt_control:focus {
            padding-right: 30px;
            width: 70%;
            border-bottom-color: #fc9d9a;
        }*/

    .form .footer {
        margin-top: 30px;
    }

    /*.form .txt_control.username{
                background:url("../../Content/Images/username.png") no-repeat right center;
                background-size: 15px 15px;
            }

            .form .txt_control.pass{
                background:url("../../Content/Images/password.png") no-repeat right center;
                background-size: 15px 15px;
            }*/

    .form .switch {
        display: block;
        margin-top: 2px;
        overflow: hidden;
    }

        .form .switch label {
            display: block;
            margin-right: 15px;
            font-family: aban;
            top: 3px;
            outline: medium none transparent;
            position: relative;
            font-size: 20px;
            line-height: 1em;
            box-sizing: border-box;
            width: 2.2em;
            height: 1em;
            border-radius: 1em;
            transition: all 0.1s ease 0s;
            border-width: 1px;
            border-style: solid;
            background: rgb(255, 255, 255) none repeat scroll 0% 0%;
            border-color: rgb(166, 166, 166);
            cursor: pointer;
        }

            /*.form .switch label::before {
                content: attr(data-off);
                display: inline-block;
                position: absolute;
                left: 8px;
                top: 3px;
                font-size: 12px;
                font-weight: 500;
                color: #333;
            }*/

            .form .switch label::after {
                content: "";
                background: #bbbbbb;
                display: inline-block;
                width: 0.5em;
                height: 0.5em;
                border-radius: 0.5em;
                position: absolute;
                top: 0.17em;
                transition: all 0.1s ease 0s;
                background-color: rgb(51, 51, 51);
                border-color: transparent;
                border-width: 0.27em;
                border-style: solid;
                box-sizing: border-box;
                right: 0.2em;
            }

            .form .switch label + span {
                color: #777;
                float: left;
                font-size: 14px;
                padding-right: 10px;
                margin-top: 2px;
            }


        .form .switch input:checked + label {
            background: #e3cd93;
            border-color: transparent;
        }

            /*.form .switch input:checked + label::before {
                left: auto;
                right: 10px;
                content: attr(data-on);
                color: #fff;
            }*/

            .form .switch input:checked + label:after {
                right: 1.4em;
                background: #fff;
            }

    .form .btn {
        position: relative;
        transition: all .4s cubic-bezier(0,0,.2,1) 0s;
        cursor: pointer;
        line-height: 1.846;
        padding: 5px 25px;
        text-align: center;
        color: rgb(182, 133, 28);
        border: 1px solid rgb(208,185,135);
        min-width: 80px;
        font-family: traffic;
        font-size: 13px;
    }

        .form .btn:hover {
            background-color: rgb(208,185,135);
            color: #fff;
        }

.error {
    text-align: center;
    padding: 10px 0px;
    color: #F68657;
}

/*---------------  Animation -----------------*/
/* Question Change */
@keyframes show {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

    75% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}


/* Responsive */
@media screen and ( max-width:1200px ) {
    .box-login {
        width: 70%;
    }
}


@media screen and ( max-width:500px ) {
    .box-login {
        width: 98%;
    }
}