#spip-admin{display:none}
.spip-admin-float{display:none}

@font-face{

    font-family: Vazir;

    src: url('../fonts/Vazir.woff2') format('woff2');

    font-weight: normal;

}

:root{

    --jf-primary-color: #E2C850 ;

    --jf-primary-color-hover: #CBB448 ;

    --jf-secondary-color: #5d6c79;

    --jf-secondary-color-hover: #256666;

    --jf-success: #02a533;

    --jf-error: #f00;

    --jf-white: #f4f4f4;

    --jf-white-hover: #fff;

    --jf-black: #555;

    --jf-black-hover: #333;

    --jf-bg-one: #F4F4FC;

    --jf-bg-two: #E9ECF5;

    --jf-border: 2px solid #ccc;

    --jf-border-focus: 1px solid #555;

    --jf-border-radius: 10px;

}

*{

    padding: 0;

    margin: 0;

    border: 0;

    outline: 0;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    font-family: Vazir;

}



/* ! basic tags */

body, html{

    direction: rtl;

}

body{

    background: var(--jf-bg-one);

    color: var(--jf-black);

}

a, a:active, a:focus, a:visited{

    text-decoration: none;

    color: var(--jf-black);

}

ul li{

    list-style: none;

}

a, span{

    display: inline-block;

}

hr{

    border: none;

    border-bottom: 1px solid #ddd;

    margin-top: 3px;

    margin-bottom: 5px;

}



/* ! right-side-block */

.right-side-block{

    width: 250px;

    background-color: #E9ECF5;

    height: 100%;

    position: fixed;

    right: 0;

    bottom: 0;

    z-index: 212;

    top: 0;

    overflow-y: auto;

    transition: all 200ms ease;

    display: flex;

    flex-direction: column;

    padding-bottom: 10px;

}

.right-side-block.is-active{

    right: -170px;

    transition: all 200ms ease;

}

.right-side-block span.bars{

    position: absolute;

    left: 25px;

    top: 15px;

    display: none;

}

.right-side-block ul li{

    position: relative;

}

.right-side-block ul li a{

    font-size: 13px;

    font-weight: 500;

    width: 100%;

    margin: 5px 0;

    padding: 10px 50px;

    white-space: nowrap;

}

.right-side-block ul li.is-active {

    background-color: var(--jf-white-hover);

    border-left: 5px solid var(--jf-primary-color);

}

.right-side-block ul li:hover{

    background-color: var(--jf-white-hover);

    transition: background-color 200ms ease;

}

.right-side-block.is-active .ic{

    left: 27px;

    right: unset;

}

.right-side-block.is-active ul li.is-active{

    background-color: transparent;

    border: none;

}

.copy-right{

    text-align: center;

    margin-top: auto;

    padding-top: 10px;

    font-size: 13px;

}

.right-side-block.is-active .copy-right{

    display: none;

}

/* ! profile */

.profile-block{

    width: 140px;

    height: 140px;

    cursor: pointer;

    margin: 15px auto 50px;

    border-radius: 50%;

}

.profile__name{

    margin-top: 10px;

    font-size: 16px;

    font-weight: bold;

    width: 100%;

    text-align: center;

}

.profile__skill{

    font-size: 13px;

    display: block;

    margin-right: auto;

    width: 100%;

    text-align: center;

}

.profile__img{

    background-size: cover;

    width: 100%;

    height: 100%;

    padding: 4px;

    position: relative;

    overflow: hidden;

    border-radius: 20px;

}

.profile__img img{

    width: 100%;

    height: 100%;

    border-radius: 20px;

}

.right-side-block.is-active .profile-block{

    width: 50px;

    height: 50px;

    position: relative;

    left: -87px;

    margin-bottom: 0px;

    border-radius: 5px;

}

.right-side-block.is-active .profile__img img{

    width: 100%;

    height: 100%;

    border-radius: 5px;

}

.right-side-block.is-active .profile-block .box__camera,

.right-side-block.is-active .profile__name{

    display: none

}

/* ! content block */

.left-side-block{

    margin-right: 250px;

    transition: all 200ms ease;

}

.left-side-block.is-active{

    margin-right: 80px;

    transition: all 200ms ease;

}

/* ! header */

.header{

    border-bottom: var(--jf-border);

}

.header-block{

    display: flex;

    flex-direction: row;

    width: 100%;

    max-width: 1200px;

    margin-right: auto;

    margin-left: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    /* align-items: center; */

}

.header__right{

    display: flex;

    margin-left: auto;

    align-items: center;

    width: auto;

}

.bars{

    cursor: pointer;

    user-select: none;

}

.menu-icon{

    display: flex;

    justify-content: center;

    align-items: center;

    border: var(--jf-border);

    border-radius: 5px;

    width: 35px;

    height: 35px;

}

.logo{

    padding: 2px 10px;

    border-radius: 10px;

    margin-right: 10px;

    font-size: 20px;

}

.header__left{

    display: flex;

    width: auto;

    align-items: center;

}

.header__search{

    position: relative;

    width: auto;

    align-items: center;

}

.header__search input{

    border: var(--jf-border);

    border-radius: var(--jf-border-radius);

    padding: 3px 35px 3px 10px;

    background-color: transparent;

    width: 100%;

    display: block;

}

.header__search>button{

    position: absolute;

    right: 5px;

    top: 4px;

    background-color: transparent;

}

.notification{

    margin-left: 15px;

    position: relative;

}

.notif__icon::before{

    content: '';

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: var(--jf-primary-color);

    position: absolute;

    border: 2px solid var(--jf-bg-one);

    top: 0;

    right: -2px;

}

/* ! main */

.main-content{

    max-width: 1200px;

    margin-right: auto;

    margin-left: auto;

}



/* ! ----- index.html ----- */

/* ! banner type one */

.banner-type-one{

    padding: 25px 15px;

    position: relative;

    background-color: var(--jf-secondary-color);

    border-radius: 10px;

}

.banner-type-one *{

    color: var(--jf-white);

}

.banner-type-one__button{

    padding: 5px 15px;

    border-radius: 5px;

    margin-top: 10px;

}

.banner-type-one__button:hover{

    color: var(--jf-white-hover);

}

.banner-type-one__button--accept{

    background-color: var(--jf-primary-color);

    border: 1px solid var(--jf-primary-color);

}

.banner-type-one__button--reject{

    background-color: transparent;

    border: 1px solid var(--jf-white);

}

/* ! top cards */

.card{

	font-weight:bold;

	background-color:#FFC;

	padding-left:5px;

	padding-right:5px;

}

.card-top{

	padding-top:20px;

}

.card-red{

	font-weight:bold;

	color:#C00;

}

.card-line{

	border-bottom:#CCC 1px solid;

	margin-top:-15px;

}

.top-card{

    margin: 0;

}

.top-card-number{

    width: 100%;

    font-size: 28px;

    font-weight: bold;

    border-radius: 5px;

    background-color: var(--jf-primary-color);

    color: var(--jf-white);

    display: flex;

    justify-content: center;

    align-items: center;

}

.top-card-number>p{

    text-align: center;

}

/* ! banner type two */

.banner-type-two{

    width: 100%;

    height: 200px;

    position: relative;

    background: url('../img/company.jpg') no-repeat;

    background-size: cover;

    background-position: center center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border-radius: var(--jf-border-radius);

}

.banner-type-two h2{

    font-size: 28px;

    color: var(--jf-white);

    text-align: center;

    display: block;

    background-color: var(--jf-black);

    padding: 5px 20px;

    border-radius: 10px;

}

.banner-type-two button{

    padding: 5px 10px;

    background-color: var(--jf-primary-color);

    color: var(--jf-white);

    margin-top: 20px;

    border-radius: 10px;

}

@import 'style.css';

.section-info{

    width: 100%;

    display: flex;

    flex-direction: row;

    align-items: center;

    padding: 5px 10px;

    background-color: #999;

    color: #fff;

    border-radius: 10px;

}

.section-info span{

    padding-left: 10px;

}



/* ----- icons */

.ic{

    position: absolute;

    font-size: 20px;

    top: 14px;

    right: 15px;

    color: var(--jf-black);

    user-select: none;

}



/* ----- box */

.jf-box{

    padding: 10px;

    border: var(--jf-border);

    border-radius: var(--jf-border-radius);

    height: 100%;

}

.form-max-width{

    max-width: 500px;

    margin-right: auto;

    margin-left: auto;

}



/* ----- buttons */

.jf-button{

    padding: 10px 45px;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    white-space: nowrap;

    font-weight: 500;

    border-radius: 10px;

    cursor: pointer;

    display: block;

    font-size: 18px;

    background-color: var(--jf-primary-color) !important;

    color: var(--jf-white-hover);

    margin-right: auto;

    margin-left: auto;

}

.jf-button:hover{

    background-color: var(--jf-primary-color-hover) !important;

    transition: background-color 200ms;

}



/* ----- forms */

.text{

    width: 100%;

    margin-right: auto;

    margin-left: auto;

    display: block;

    padding: 0 12px;

    border-radius: var(--jf-border-radius);

    height: 42px;

    line-height: 40px;

    border: var(--jf-border);

    margin-bottom: 15px;

    text-align: right;

    font-size: 16px !important;

}

textarea{

    resize: none;

    padding: 12px;

    margin-bottom: 15px;

    border: var(--jf-border);

    border-radius: var(--jf-border-radius);

    width: 100%;

    height: 150px !important;

    font-family: Vazir;

    font-size: 16px;

}

select{

    width: 100%;

    padding: 10px;

    border-radius: var(--jf-border-radius);

}



/* ----- tables */

.table-search{



}

.table{

    background: var(--jf-white-hover);

    padding: 20px;

    text-align: center;

    border-collapse: collapse;

    border-spacing: 0;

    width: 100%;

}

.table__table{

    overflow-x: scroll;

    width: 100%;

}

.table .title-row{

    background-color: var(--jf-white);

    height: 50px;

    font-size: 14px;

}

.table td{

    white-space: nowrap;

    color: var(--jf-black);

    padding: 10px 20px;

    font-size: 14px;

}

.table td, table th{

    border-bottom: var(--jf-border);

}



/* pagination */

.pagination-block{

    display: flex;

    flex-direction: row;

    justify-content: center;

    margin-top: 20px;

}

.pagination-item{

    min-width: 40px;

    height: 40px;

    background-color: var(--jf-white);

    box-shadow: 0px 1px 2px #aaa;

    border-radius: var(--jf-border-radius);

    margin: 0px 10px;

    text-align: center;

    padding-top: 7px;

}

.pagination-item:hover{

    background-color: var(--jf-white-hover);

}



/* tab box */

.tab__box{

    background: #fff;

    margin-bottom: 20px;

    border-radius: var(--jf-border-radius);

}

.tab__box .tab__items{

    /*white-space: nowrap;*/

    /*overflow-x: scroll;*/

    padding: 8px 10px;

}

.tab__box .tab__item{

    color: #8f9395;

    padding: 5px 11px;

    font-size: 13px;

    cursor: pointer;

}

.tab__box .tab__item.is-active{

    border-radius: 10px;

    background-color: var(--jf-primary-color);

    text-align: center;

    color: #fff;

}

/* tab box green */

.tab__bog{

    background: #fff;

    margin-bottom: 20px;

    border-radius: var(--jf-border-radius);

}

.tab__bog .tab__items{

    /*white-space: nowrap;*/

    /*overflow-x: scroll;*/

    padding: 8px 10px;

}

.tab__bog .tab__item{

    color: #8f9395;

    padding: 5px 11px;

    font-size: 13px;

    cursor: pointer;

}

.tab__bog .tab__item.is-active{

    border-radius: 10px;

    background-color: var(--jf-secondary-color);

    text-align: center;

    color: #fff;

}

.pagination-items ul li {display: inline-block;text-decoration: none;

border: 1px solid #BFBFBF;margin: 2px}

@media (max-width: 575.98px) {

    .right-side-block span.bars{

        display: block;

    }

    .text{

        width: 100%;

    }

    .right-side-block .header__logo {

        display: block;

    }

    .multi-text{

        display: unset;

        margin: 0;

    }

    .t-header-search{

        width: 100%;

    }

    .jh50 h2{

        font-size: 22px;

    }

}

@media (min-width: 767.98px) {

    /* ! bootstrap edit */

    /* other */

    .bars-mobile{

        display: none;

    }

}

@media (max-width: 991.98px) {

    .right-side-block {

        right: -250px;

        /* display: none; */

    }

    

    .right-side-block.is-active {

        /* display: block; */

        right: 0;

    }

    

    .right-side-block .header__logo {

        margin-right: 15px !important;

    }

    

    .left-side-block {

        margin-right: 0 !important;

    }

    

    .bars {

        display: flex !important;

    }

    

    .right-side-block.is-active ul li a::before {

        right: 15px;

    }

    

    .right-side-block ul li.is-active a {

        color: #2b4a83 !important;

        background-color: #eef2f8 !important;

    }

    

    .right-side-block ul li a:hover {

        background-color: #eef2f8 !important;

        transition: background-color 200ms ease;

    }

    

    .right-side-block.is-active .profile-block {

        width: 122px;

        height: 122px;

        position: unset;

        margin-bottom: 50px;

    }

    

    .right-side-block.is-active .profile__name {

        display: block

    }

    

    .right-side-block.is-active ul {

        margin-top: unset;

    }

    

    .right-side-block.is-active .profile__camera.default__avatar {

        top: 76%

    }

    

    .profile-block:hover .profile__camera::before {

        top: 50% !important;

    }

    

    .right-side-block.is-active .profile__camera::before {

        width: 20px;

        height: 20px;

        right: 40.5%;

        top: 3px;

    }

    

}

@media (mix-width: 1199.98px){



}