/*
coded by esemds
*/
#account{
    display: block;
    width: 1401px;
    margin: 30px auto;
    padding: 20px;
    /*padding: 10px;*/
    border-radius: 5px;
    background-color: #ECEFF4;
}
#forms{
    /*display: grid;*/
    /*grid-template-areas: 'form form';*/
    width: 920px;
    background-color: #FFFFFF;
    height: 430px;
    margin: 30px auto;
    border-radius: 10px;
    padding: 30px;
}
#account form{
    width: 360px;
    height: auto;
    float: right;
    padding: 30px;
    margin: 20px;
}
#form-login{
    border-radius: 5px;
    background-color: #2E3440;
    color: #ECEFF4;
}
#form-signup{
    border-radius: 5px;
    background-color: #ECEFF4;
    color: #0C132C;
}
#account input{
    padding: 7px 110px 7px 10px;
    width: 240px;
    margin: 5px 0 5px 0;
    border: 0;
    border-radius: 3px;
    text-align: center;
}
#account label{
    text-align: center;
    position: absolute;
    width: 100px;
    background-color: #5E81AC;
    margin-top: 5px;
    border-top: 3px solid #5E81AC;
    border-bottom: 3px solid #5E81AC;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

#form-login a{
    color: #3F88C5;
    font-size: 0.9rem !important;
    font-weight: normal !important;
    margin: 5px 0;
}
#form-login a:hover{
    color: #4C566A;
    text-decoration: underline !important;
}
#account select{
    width: 200px !important;
    margin: 5px 0;
    border: 0;
    padding: 3px 100px 5px 10px;
    background-color: #2E344033;
    font-family: "Vazir";
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
#account button{
    font-family: "vazir";
    width: 100px !important;
    padding: 4px 10px;
    margin-top: 5px;
    border: 0;
    border-radius: 3px;
    color: #2E3440;
    background-color: #00ACEE;
    font-size: 1rem;
    cursor: pointer;
    transition: 300ms;
}
#account button:hover{
    background-color: #222222;
    color: #00ACEE;
}
#account ul li{
    list-style: none;
    margin-right: 5px;
}
#account h3{
    padding: 5px;
}
#account a{
    text-decoration: none;
    color: #00ACEE;
    padding: 5px;
    font-weight: bold;
}
#account p{
    padding: 5px;
}

/*
The Profile Pgae :) page :|
*/
#profile{
    display: block;
    width: 1401px;
    margin: 30px auto;
    padding: 20px;
    /*padding: 10px;*/
    border-radius: 5px;
    background-color: #ECEFF4;
    position: relative;
    display: grid;
    grid-template-areas: 'rofile-info profile-edit';
}
#profile h3{
    padding: 0 0 10px 0;
}
#profile p{
    margin-top: 5px;
    border-right: 3px solid #3F88C5;
    padding: 0 5px 0 0;
}
#profile a{
    color: #00ACEE;
    text-decoration: underline;
}
#profile button{
    font-family: "vazir";
    width: auto !important;
    padding: 4px 20px;
    margin-top: 5px;
    border: 0;
    border-radius: 3px;
    color: #2E3440;
    background-color: #00ACEE;
    font-size: 1rem;
    cursor: pointer;
    transition: 300ms;
}
#profile button:hover{
    background-color: #2E3440;
    color: #00ACEE;
}
#profile button:focus{
    padding: 2px 20px !important;
}
.exit {
    position: absolute;
    left: 20px;
    top: 20px;
    color: #fff !important;
    background-color: #BB0000 !important;
    /*border: 1px solid #880000 !important;*/
}
.exit:hover{
    color: #BB0000 !important;
    background-color: #222 !important;
}
.exit:focus{
    width: auto !important;
}
.edit-data{
    background-color: #ECEFF4;
    width: auto;
    padding: 30px;
    border-radius: 5px;
    margin: 0 auto;
}
.edit-data input{
    padding: 7px 110px 7px 10px;
    width: 240px;
    margin: 5px 0 5px 0;
    border: 0;
    border-radius: 3px;
    text-align: center;
    background-color: #FFFFFF;
}
.edit-data label{
    text-align: center;
    position: absolute;
    width: 100px;
    background-color: #5E81AC;
    margin-top: 5px;
    border-top: 3px solid #5E81AC;
    border-bottom: 3px solid #5E81AC;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}


@media screen and (max-width: 480px) {
    #account{
        width: auto;
        margin: 10px auto;
        padding: 5px;
    }
    #forms{
        width: auto;
        height: 620px;
        margin: 5px auto;
        padding: 5px;
    }
    #account form{
        width: 90%;
        height: auto;
        padding: 4%;
        margin: 5px;
    }
    #account input{
        padding: 7px 110px 7px 10px;
        width: 68%;
        margin: 5px 0 5px 0;
    }


    #profile{
        width: auto;
        margin: 30px auto;
        padding: 20px;
        /*padding: 10px;*/
        border-radius: 5px;
        background-color: #ECEFF4;
        position: relative;
    }
    .edit-data{
        background-color: #ECEFF4;
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        margin: 0 auto;
    }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    #account{
        width: auto;
        margin: 10px auto;
        padding: 5px;
    }
    #forms{
        width: auto;
        height: 680px;
        margin: 5px auto;
        padding: 5px;
    }
    #account form{
        width: 74%;
        height: auto;
        padding: 4%;
        margin: 10px 9%;
    }
    #account input{
        padding: 7px 110px 7px 10px;
        width: 68%;
        margin: 5px 0 5px 0;
    }
    #profile{
        width: auto;
        margin: 30px auto;
        padding: 20px;
        /*padding: 10px;*/
        border-radius: 5px;
        background-color: #ECEFF4;
        position: relative;
    }
    .edit-data{
        background-color: #ECEFF4;
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        margin: 0 auto;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #account{
        width: auto;
        margin: 10px auto;
        padding: 5px;
    }
    #forms{
        width: auto;
        height: 720px;
        margin: 5px auto;
        padding: 5px;
    }
    #account form{
        width: 64%;
        height: auto;
        padding: 4%;
        margin: 10px 14%;
    }
    #account input{
        padding: 7px 110px 7px 10px;
        width: 75%;
        margin: 5px 0 5px 0;
    }
    #profile{
        width: auto;
        margin: 30px auto;
        padding: 20px;
        /*padding: 10px;*/
        border-radius: 5px;
        background-color: #ECEFF4;
        position: relative;
    }
    .edit-data{
        background-color: #ECEFF4;
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        margin: 0 auto;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1460px) {
    #account{
        display: block;
        width: auto;
        margin: 30px auto;
        padding: 20px;
        /*padding: 10px;*/
        border-radius: 5px;
        background-color: #ECEFF4;
    }
    #forms{
        /*display: grid;*/
        /*grid-template-areas: 'form form';*/
        width: 920px;
        background-color: #FFFFFF;
        height: 390px;
        margin: 30px auto;
        border-radius: 10px;
        padding: 30px;
    }
    #account form{
        width: 360px;
        height: auto;
        float: right;
        padding: 30px;
        margin: 20px;
    }
    #profile{
        width: auto;
        margin: 30px auto;
        padding: 20px;
        /*padding: 10px;*/
        border-radius: 5px;
        background-color: #ECEFF4;
        position: relative;
    }
    .edit-data{
        background-color: #ECEFF4;
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        margin: 0 auto;
    }
}