body{font:12px/18px IRANSansX; margin:0; padding:0}
body *{box-sizing: border-box}
a{text-decoration:none; color:var(--a-color)}
a:hover{color:var(--a-hover-color)}
h1,h2,h3,h4,h5,h6{font-weight:bold; margin:0; padding:0}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{transition:all ease-out 0.15s}
figure{margin:0; padding:0}
img[loading]{opacity:0.1}

ul, ol{list-style:none; margin:0; padding:0}
ul{list-style:none; margin:0; padding:0}
ol>li{display:flex}
ol>li:nth-child(1):before{content:'١'}
ol>li:nth-child(2):before{content:'۲'}
ol>li:nth-child(3):before{content:'۳'}
ol>li:nth-child(4):before{content:'۴'}
ol>li:nth-child(5):before{content:'۵'}
ol>li:nth-child(6):before{content:'۶'}
ol>li:nth-child(7):before{content:'۷'}
ol>li:nth-child(8):before{content:'۸'}
ol>li:nth-child(9):before{content:'۹'}
ol>li:nth-child(10):before{content:'١۰'}
ol>li:nth-child(11):before{content:'١'}
ol>li:nth-child(12):before{content:'١۲'}
ol>li:nth-child(13):before{content:'١۳'}
ol>li:nth-child(14):before{content:'١۴'}
ol>li:nth-child(15):before{content:'١۵'}
ol>li:nth-child(16):before{content:'١۶'}
ol>li:nth-child(17):before{content:'١۷'}
ol>li:nth-child(18):before{content:'١۸'}
ol>li:nth-child(19):before{content:'١۹'}
ol>li:nth-child(20):before{content:'۲۰'}

p{margin:0; padding:0}
input,textarea,button,select, option, optgroup{outline:none !important; font:12px/18px IRANSansX;}

.box{margin:16px 0;}
.box .box{margin:0;}
.box-header{position:relative; width:100%; border-top:1px solid rgba(33,33,33,0.4);padding-top:8px; padding-bottom:8px;}
.box-header:before{content:""; position:absolute; top:-1px; right:0; width:100px; height:4px; background:#000000}
.box-header .title{
    font-size:14px; white-space:nowrap; color:#3B3B3B; line-height:24px; font-weight:bold;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
}
.box-header .archive{
    white-space:nowrap; color:#0090ed; line-height:24px; float: left; padding-right:4px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
}
.box-header .archive .caret{font-weight:bold; margin-right:8px;}
.box-header .box-count{white-space:nowrap; height:inherit; line-height:24px;  font-weight:bold; font-size:14px; display:inline; float: left; color:#3B3B3B}
.box-header .box-count:before{content:attr(data-title);}

.wrapper[data-theme="dark"] .box-header{border-top:1px solid rgba(233,233,233,0.4);}
.wrapper[data-theme="dark"] .box-header:before{background:#ffffff}
.wrapper[data-theme="dark"] .box-header .title{color:#ffffff;}




.box-tab-title{display:flex; width:fit-content; position:absolute; left:0; top:0; height:26px; overflow:hidden; line-height:28px;}
.box-tab-title>ul{display:flex;}
.box-tab-title>ul>li.tab-item{}
.box-tab-title>ul>li.tab-item .tab-title{white-space:nowrap; font-weight:normal; font-size:12px;}

.box-tab-title>ul>li.tab-item .tab-title a{display:block; height:100%; padding:0 16px; color:#A4A4A4}
.box-tab-title>ul>li.tab-item:hover .tab-title a{color:#333; background:#aaaaaa}
.box-tab-title>ul>li.tab-item.active .tab-title a{color:#ffffff; background:#000000}

.wrapper[data-theme="dark"] .box-tab-title>ul>li.tab-item .tab-title a{color:#f4f4f4}
.wrapper[data-theme="dark"] .box-tab-title>ul>li.tab-item:hover .tab-title a{color:#333; background:#aaaaaa}
.wrapper[data-theme="dark"] .box-tab-title>ul>li.tab-item.active .tab-title a{color:#333; background:#fff}

.box-tab-title>ul>li.tab-item{}


.box-stage{}
.flex-view{display:flex; margin-left:calc(var(--gap-revers) / 2); margin-right:calc(var(--gap-revers) / 2)}
.flex-view[data-cols-count]{flex-wrap: wrap}
.flex-view .item-content{width:100%; margin:calc(var(--gap) / 2)}
.flex-view[data-cols-count="2"] .item-content{width:calc(50% - (var(--gap) * 1))}
.flex-view[data-cols-count="3"] .item-content{width:calc(33.33% - (var(--gap) * 1))}
.flex-view[data-cols-count="4"] .item-content{width:calc(25% - (var(--gap) * 1))}
.flex-view[data-cols-count="5"] .item-content{width:calc(20% - (var(--gap) * 1))}

.grid-view{display:grid}
.grid-view .item-content[data-grid="one"]{grid-area:one;}
.grid-view .item-content[data-grid="two"]{grid-area:two;}
.grid-view .item-content[data-grid="three"]{grid-area:three;}
.grid-view .item-content[data-grid="four"]{grid-area:four;}
.grid-view .item-content[data-grid="five"]{grid-area:five;}
.grid-view .item-content[data-grid="six"]{grid-area:six;}
.grid-view .item-content[data-grid="seven"]{grid-area:seven;}
.grid-view .item-content[data-grid="eight"]{grid-area:eight;}
.grid-view .item-content[data-grid="nine"]{grid-area:nine;}
.grid-view .item-content[data-grid="ten"]{grid-area:ten;}

.carousel-view{display:block; width: 100%;}

.box.just-image{}
.box.just-image .thumbnail{text-align: center}
.box.just-image .thumbnail a{}
.box.just-image .details{}
.box.just-image .details .rootitr{}
.box.just-image .details .title{}
.box.just-image .details .title>a{font-size:0; display:block; line-height:0}
.box.just-image .details .title>a:after{content:""; position:absolute; top:0; right:0; bottom:0; left:0}
.box.just-image .details .service{}
.box.just-image .details .date{}

.box.tabs-view{position:relative}
.box.tabs-view .box-tab-title{}
.box.tabs-view .box-tab-title ul{display:flex;}
.box.tabs-view .box-tab-title ul li{width:100%;}
.box.tabs-view .box-tab-title ul li .tab-title{}
.box.tabs-view .box-tab-title ul li .tab-title.active{}
.box.tabs-view .box-tab-title ul li .tab-title a{}
.box.tabs-view .box-tab-title ul li .tab-title.active a{}
.box.tabs-view .box-tab-stage{}
.box.tabs-view .box-tab-stage ul{}
.box.tabs-view .box-tab-stage ul li{}
.box.tabs-view .box-tab-stage ul li.tab-item{display:none}
.box.tabs-view .box-tab-stage ul li.tab-item.active{display:block}

.box .more{display:flex; flex-wrap: wrap; flex-grow: 1; margin:16px -8px;}
.box .more li{margin:8px;}
.box .more li a{width:100%; display:flex; height:40px; border:1px solid #ccc; border-radius:4px; text-align:center; justify-content:center; align-items: center; color:#ccc}
.box .more li a img{width:16px; height:16px; margin:0 8px;}

.load-more{width:auto; height:36px; margin-bottom: 32px;}
.load-more a{display:block; background: #000000; color:#ffffff; border-radius:18px; line-height:36px; padding:0 36px;}
.wrapper[data-theme="light"]{background:#FFFFFF; color:#212121}
.wrapper[data-theme="dark"]{background:#2A2E3A; color:#FFFFFF}

/*current tab style*/
.box.tab-mode{}
.box.tab-mode .box-header{display:flex;}
.box.tab-mode .box-header .title{cursor: pointer; margin-left:16px; padding-left:16px; position:relative; color:#999}
.box.tab-mode .box-header .title.active{color:#3B3B3B; cursor: default;}
.box.tab-mode .box-header .title:after{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:12px; background:#999;}
.box.tab-mode .box-header .title:last-child{margin-left:0; padding-left:0}
.box.tab-mode .box-header .title:last-child:after{display:none; background:transparent}

.box.tab-mode .box-stage{display:none}
.box.tab-mode .box-stage.active{display:block}

.newspaper-mode{}
.newspaper-mode .thumbnail{position:relative; width:100%; height:100%; perspective:800px; perspective-origin: right center; transform-style: preserve-3d;}
.newspaper-mode .thumbnail>img{visibility: hidden}
.newspaper-mode .thumbnail .newspaper-page{display:flex; position:absolute; transform-origin: right center; transform-style: preserve-3d; left:50%; transition:transform ease-out 0.3s}
.newspaper-mode .thumbnail .newspaper-page[data-page="1"]{transform:rotateY(45deg) translateX(-60%)}
.newspaper-mode .thumbnail .newspaper-page[data-page="2"]{transform:rotateY(35deg) translateX(-60%);}
.newspaper-mode .thumbnail .newspaper-page[data-page="3"]{transform:rotateY(25deg) translateX(-60%);}
.newspaper-mode .thumbnail .newspaper-page[data-page="4"]{transform:rotateY(15deg) translateX(-60%);}
.newspaper-mode:hover .thumbnail .newspaper-page[data-page="1"]{transform:rotateY(calc(45deg * 0.7)) translateX(-50%) scale(1.12);}
.newspaper-mode:hover .thumbnail .newspaper-page[data-page="2"]{transform:rotateY(calc(35deg * 0.7)) translateX(-50%) scale(1.12);}
.newspaper-mode:hover .thumbnail .newspaper-page[data-page="3"]{transform:rotateY(calc(25deg * 0.7)) translateX(-50%) scale(1.12);}
.newspaper-mode:hover .thumbnail .newspaper-page[data-page="4"]{transform:rotateY(calc(15deg * 0.7)) translateX(-50%) scale(1.12);}
.newspaper-mode .thumbnail .newspaper-page-part{width:100%; overflow:hidden; transform-origin: left center; position:relative; line-height:0}
.newspaper-mode .thumbnail .newspaper-page-part img{height:100%;}
.newspaper-mode .thumbnail .newspaper-page .newspaper-page-part:after{content:""; position:absolute; top:0; left:0; right:0; bottom:0; transition:opacity ease-out 0.3s}
.newspaper-mode .thumbnail .newspaper-page[data-page="1"] .newspaper-page-part:after{
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 */
}
.newspaper-mode .thumbnail .newspaper-page[data-page="2"] .newspaper-page-part:after{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.2+0,0.6+20 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.6) 20%,rgba(0,0,0,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.newspaper-mode .thumbnail .newspaper-page[data-page="3"] .newspaper-page-part:after{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.3+0,0.7+20 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.7) 20%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.newspaper-mode .thumbnail .newspaper-page[data-page="4"] .newspaper-page-part:after{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.4+0,0.8+20 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.8) 20%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.newspaper-mode:hover .thumbnail .newspaper-page[data-page="1"] .newspaper-page-part:after{opacity:0.2;}
/*.newspaper-mode .thumbnail .newspaper-page[data-page="1"] .newspaper-page-part[data-page-part="1"]{transform:}*/
.newspaper-mode .thumbnail .newspaper-page[data-page="1"] .newspaper-page-part[data-page-part="2"]{transform: rotateY(3deg) translateX(2px)}
.newspaper-mode .thumbnail .newspaper-page[data-page="1"] .newspaper-page-part[data-page-part="3"]{transform: rotateY(6deg) translateX(5px)}
.newspaper-mode .thumbnail .newspaper-page[data-page="1"] .newspaper-page-part[data-page-part="4"]{transform: rotateY(9deg) translateX(8px)}
.newspaper-mode .thumbnail .newspaper-page[data-page="1"] .newspaper-page-part[data-page-part="5"]{transform: rotateY(12deg) translateX(11px)}

.magazine-mode{}
.magazine-mode .thumbnail{position:relative; width:100%; height:100%; perspective:1000px; perspective-origin: right center; transform-style: preserve-3d;}
.magazine-mode .thumbnail img{box-shadow:none !important; border:1px solid #ddd; position:relative; z-index:1; border-radius:2px; transition:box-shadow ease-out 0.3s}
.magazine-mode .thumbnail .magazine-image-wrapper{display:inline-block; line-height:0; position:relative;transform:rotateY(34deg) translateX(10px); transform-style: preserve-3d; transition:transform ease-out 0.3s;}
.magazine-mode .thumbnail .magazine-image-wrapper:before{content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:#ccc; transform:translateZ(-15px); z-index: 1; border-radius:2px}
.magazine-mode .thumbnail .magazine-image-wrapper:after{content:""; display:block; width:15px; height:100%; position:absolute; top:0; left:0; background: url('data:image/gif;base64,R0lGODlhAgABAIAAAP///2ZmZiH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDEgNzkuYzAyMDRiMmRlZiwgMjAyMy8wMi8wMi0xMjoxNDoyNCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNDRUQ3MDA2MDc3QTExRUU5RTlDOEQzNEE3RkQ2RDFDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNDRUQ3MDA3MDc3QTExRUU5RTlDOEQzNEE3RkQ2RDFDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0NFRDcwMDQwNzdBMTFFRTlFOUM4RDM0QTdGRDZEMUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0NFRDcwMDUwNzdBMTFFRTlFOUM4RDM0QTdGRDZEMUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAAgABAAACAgwKADs='); transform:rotateY(90deg) translateX(10px) translateZ(-6px) scaleY(0.98); z-index:1}
.magazine-mode .thumbnail .magazine-image-wrapper .magazine-image-shadow{display:inline-block; line-height:0; position:absolute; bottom:-3px; left: -8px; filter:blur(4px); width:calc(100% + 16px); height:8px; background:#000; border-radius:50%; z-index:0; transition:transform ease-out 0.3s;}
.magazine-mode:hover .thumbnail .magazine-image-wrapper{transform:rotateY(0deg) translateX(0px);}
.magazine-mode:hover .thumbnail .magazine-image-wrapper .magazine-image-shadow{transform:scaleY(0.7) scaleX(0.95)}
.magazine-mode .thumbnail .magazine-image-wrapper .magazine-image-overlay{
    position:absolute; top:0; left:0; width:100%; height:100%; z-index: 1; opacity:0.7; border-radius:2px; transition:opacity ease-out 0.3s;
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 */
}
.magazine-mode:hover .thumbnail .magazine-image-wrapper .magazine-image-overlay{opacity:0}
.magazine-mode:hover .thumbnail img{box-shadow: 1px 2px 3px rgba(0,0,0,0.3) !important}

.sardabir-table{overflow: auto; padding:8px 0}
.sardabir-table table{width:100% !important}

.dashboard-view-stage{margin-top:16px; padding:16px 16px 8px;}
.dashboard-view-stage,.dashboard-menu-stage{background: #fff; margin-bottom:16px;}
.dashboard-view-avatar{position:relative; text-align:center;margin-bottom:8px}
.dashboard-view-avatar .user-avatar{width:100px; height:100px; margin:0 auto; position:relative;}
.dashboard-view-avatar .user-avatar img{background:rgba(0,0,0,0.1); border-radius:50%; width:100%; height:100%; padding:2px;border:2px solid #fff; box-shadow:0 0 1px #000}
.dashboard-view-avatar .user-avatar figcaption{position:absolute; bottom:0; right:0}
.dashboard-view-avatar .user-avatar figcaption button{background:#d4d4d4; border-radius:50%; cursor:pointer; width:25px; height:25px; padding:0; text-align:center; line-height:23px; color:#fff; font-size:20px; font-weight:bold; font-family: "Arial Black", serif; border:1px solid #fff; box-shadow:0 0 1px #000; text-shadow:0 0 1px #000}
.dashboard-view-info{margin-top:16px;}
.dashboard-view-info>div{margin-bottom:8px;}
.dashboard-view-info .user-fullname{color:#666; font-weight:bold; font-size:14px; text-align:center}
.dashboard-view-info .user-fullname:empty:before{content:"کاربر مهمان"}
.dashboard-view-info .user-phone{color:#888; font-size:14px; text-align:center; direction:ltr}
.dashboard-view-info .user-phone:empty:before{content:"۰۹*********"}
.dashboard-view-about{margin-bottom:8px}
.dashboard-view-about .user-about{text-align:justify}
.dashboard-view-about .user-about:empty{display:none;}
.dashboard-view-about .user-about:before{content:"درباره من:"; display: table; width:100%; margin-bottom:8px; color:#999}

.dashboard-menu-stage{}
.dashboard-menu-stage>ul{}
.dashboard-menu-stage>ul li{height:40px; border-bottom:1px solid rgba(0,0,0,0.1);}
.dashboard-menu-stage>ul>li:last-child{border-bottom: none;}
.dashboard-menu-stage>ul li a{display:block; color:#333; width:100%; height:40px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; padding:0 8px; line-height:40px;}
.dashboard-menu-stage>ul li a:hover{background:rgba(0,0,0,0.02)}
.dashboard-menu-stage>ul li a.signout{color:rgb(250,60,60)}



.form-wrapper{position:relative}
.form-wrapper .form-row{margin:8px -8px; display:flex;}
.form-wrapper .form-col{margin: 0 8px; position:relative}
.form-wrapper .form-col input,
.form-wrapper .form-col select,
.form-wrapper .form-col textarea{width:100%; height:40px; padding:0 8px; border-radius:4px; background:#fff; border:none; font: inherit; font-size:14px}
.form-wrapper .form-col textarea{resize:vertical; height:150px; max-height:200px; min-height:100px; padding:8px;}
.form-wrapper .form-col button{width:100%; height:50px; padding:0 8px; border-radius:4px; border:none; font: inherit; font-size:16px; cursor:pointer; color:#fff}
.form-wrapper .form-col button#report-file-alt{background:#a1a1a1}
.form-wrapper .form-col button#submit{background:#78cd51}

#top-header{background:#e9e9eb; height:30px; line-height:30px; border-bottom:1px solid #cccccc; position:sticky; top:0; z-index:13}
#top-header .row{padding:0; border-right:1px solid #cccccc; border-left:1px solid #cccccc}

#top-header .sites{}
#top-header .sites>ul{display:flex; /*margin:0 -8px;*/}
#top-header .sites>ul>li{position:relative}
#top-header .sites>ul>li>a{display:block; width:100%; height:100%; padding:0 8px; position:relative; z-index:2}
#top-header .sites>ul>li.active>a{color:#212121}
#top-header .sites>ul>li.active:before{content:""; position:absolute; z-index:0; width:100%; height:20px; background:rgba(255, 255, 255,1); top:50%; transform:translateY(-50%); border-radius:4px}

#top-header .toggle-sites{position:relative; width:30px; height:24px; background:rgba(0,0,0,0.2); border:none; border-radius:4px; flex-direction: column; justify-content: center; align-content:center; cursor:pointer; margin:3px 0; display:none;}
#top-header .toggle-sites>span{display:block; width:70%; height:2px; background:#fff; border-radius:1px; margin:2px auto;}
body.show-sites #top-header .toggle-sites span{margin:0 auto; position:absolute; left:50%; transform:translateX(-50%); transform-origin: center center;}
body.show-sites #top-header .toggle-sites span:last-child{display:none;}
body.show-sites #top-header .toggle-sites span:nth-child(1){transform:translateX(-50%) rotate(45deg)}
body.show-sites #top-header .toggle-sites span:nth-child(2){transform:translateX(-50%) rotate(-45deg)}


#top-header .date-and-networks{display: flex; flex-direction: row-reverse; align-items: center}
#top-header .date{margin-right:16px;}
#top-header .networks{height:24px;}
#top-header .networks>ul{display:flex; flex-direction: row-reverse}
#top-header .networks>ul>li{margin-right:16px; padding-right:16px; position:relative; color:#444; font-size:14px; display:flex; flex-direction: column; justify-content: center}
#top-header .networks>ul>li:after{content:""; position:absolute; top:50%; right:0; width:1px; height:10px; background:rgba(66,66,66,0.5); transform:translateY(-50%)}
#top-header .networks>ul>li:last-child:after{display:none;}
#top-header .networks>ul>li a{background:#fff; width:24px; height:24px; display:block; padding:5px; line-height:0; border-radius:50%; transition:background-color ease-out 0.3s}
#top-header .networks>ul>li a:hover{background:#ffd500}
#top-header .networks>ul>li svg{width:100%; height:100%;}
#top-header .networks>ul>li svg.instagram-icon{margin:-2px; width:calc(100% + 4px); height:calc(100% + 4px)}


#main-header{height:64px; border-bottom:1px solid #cccccc; position:relative; z-index:10;}
#main-header .row{padding:0; height:64px; align-items: center}
#main-header [class^="col-"]{padding:0}

#main-header{}
#main-header .logo{display:flex; height:50px;}
#main-header .logo img{height:100%; width:auto; object-fit: contain}
#main-header .logo figcaption{line-height:50px; margin-right:24px; white-space: nowrap}
#main-header .logo figcaption a{color:#666}

#main-header .search{border:1px solid #ccc; border-radius:15px; height:30px; display:flex; position:relative;}
#main-header .search input{border:none; height:28px; padding:0 16px; font-size:11px; width:100%; max-width:25vw; border-radius:0 15px 15px 0 }
#main-header .search button{width:35px; min-width:35px; height:28px; background:#000000; border:none; cursor:pointer; line-height:34px; border-radius:15px 0 0 15px;}
#main-header .search button img{width:14px; height:14px;}
#main-header .search>ul{position:absolute; top:28px; right:12px; left:12px; background:#fff; border-radius:0 0 15px 15px; border:1px solid #ccc; box-shadow:3px 3px 3px rgba(0,0,0,0.3)}
#main-header .search>ul:empty{display:none}
#main-header .search>ul>li{border-bottom:1px solid #ccc;}
#main-header .search>ul>li:hover{background:rgba(0,0,0,0.03)}
#main-header .search>ul>li:last-child{border-bottom:none}
#main-header .search>ul>li>a{display:block; width:100%; /*height:30px; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;*/ padding:8px;}

#menu{height:30px; line-height:30px; /*background:#ffffff;*/ position:sticky; top:-1px; padding-top:30px; margin-top:-30px; margin-bottom:30px; z-index:11;}
#menu:before{content:""; position:absolute; top:30px; left:0; right:0; height:30px; background:#ffffff; border-bottom:1px solid #cccccc; z-index: 0}
#menu>.container{position:relative; z-index: 1}
#menu.is-sticky:before{box-shadow:0 0 5px rgba(0,0,0,0.3);}
#menu .row{padding:0; border-right:1px solid #cccccc; border-left:1px solid #cccccc}
#menu .col-start,
#menu .col-end{display:flex;}

#menu .logo-alt{width:0; height:26px; margin:3px 0 0; overflow: hidden; transition:width ease-out 0.2s, margin ease-out 0.4s}
#menu .logo-alt a{display:block; height:26px; aspect-ratio:19 / 8; overflow:hidden; position:relative}
#menu .logo-alt img{height:inherit; aspect-ratio: inherit;}

#menu .main-menu{display:flex; height:30px;}
#menu .user-menu{width:fit-content; height:30px; position:relative}
#menu .user-menu-button{width:fit-content; margin:0; padding:0; transition:padding ease-out 0.2s; height:inherit; background:transparent; border:none; cursor:pointer; display:flex; color:#fff; align-items: center}
#menu.is-sticky .user-menu-button{padding:0 8px;}
#menu .user-menu-button.active{background:rgba(255,255,255,0.1); padding:0 8px;}
#menu .user-menu-fullname{font-size:10px; line-height:30px; margin-left:5px; white-space:nowrap}
#menu .user-menu-fullname:empty:before{content:"کاربر میهمان"}
#menu .user-menu-avatar{width:20px;height:20px; border:1px solid #fff; border-radius:50%; padding:2px; background: rgba(255,255,255,0.3)}
#menu .user-menu-container{display:none; position:absolute; top:31px; left:0; width:200px; background:var(--a-hover-color); border-radius:0 0 4px 4px; overflow:hidden; box-shadow:0 0 5px rgba(0,0,0,0.3)}
#menu .user-menu-container .user-menu-items{margin:0; padding:0; display:flex; flex-direction: column;}
#menu .user-menu-container .user-menu-item{display:block; width:100%; height:30px; border-bottom:1px solid rgba(255,255,255,0.3)}
#menu .user-menu-container .user-menu-item:last-child{border-bottom:none;}
#menu .user-menu-container .user-menu-item a{display:block; width:100%; height:100%; text-align: center; line-height:28px; font-size:11px; color:#fff;}
#menu .user-menu-container .user-menu-item a.signout{background:rgba(200,100,100,1)}
#menu .user-menu-container .user-menu-item a.signout:hover{background:rgba(200,120,120,1)}
#menu .user-menu-container .user-menu-item a:hover{background:rgba(255,255,255,0.1)}
#menu .user-menu-button.active ~ .user-menu-container{display:block;}

#menu .toggle-main-menu{position:relative; width:30px; height:24px; background:rgba(255,255,255,0.2); border:none; border-radius:2px; flex-direction: column; justify-content: center; align-content:center; cursor:pointer; margin:4px 0 0; display:none;}
#menu .toggle-main-menu>span{display:block; width:70%; height:2px; background:#fff; border-radius:1px; margin:2px auto;}
body.show-menu #menu .toggle-main-menu span{margin:0 auto; position:absolute; left:50%; transform:translateX(-50%); transform-origin: center center;}
body.show-menu #menu .toggle-main-menu span:last-child{display:none;}
body.show-menu #menu .toggle-main-menu span:nth-child(1){transform:translateX(-50%) rotate(45deg)}
body.show-menu #menu .toggle-main-menu span:nth-child(2){transform:translateX(-50%) rotate(-45deg)}
#menu .main-menu>li{height:inherit; margin-left:8px; padding-left:8px;}
#menu .main-menu>li .menu-name{height:inherit; line-height:30px; font-size:12px; font-weight:bold; white-space:nowrap}
#menu .main-menu>li .menu-name.keyword-mode{height:inherit; line-height:30px; font-size:12px; padding:0 8px; background: #FFD300}
#menu .main-menu>li .menu-name a{height:inherit; display:block; color:#212121; position:relative}
#menu .main-menu>li .menu-name.keyword-mode a{color:#333}
#menu .main-menu>li .menu-name a:before{content:""; position:absolute; bottom:0; left:0; right:0; height:3px; transition:background ease-out 0.3s; background:transparent}
#menu .main-menu>li .menu-name.active a:before{background:#FFD500 !important;}
#menu .main-menu>li .menu-name:hover a:before{background:#ccc;}
#menu .main-menu>li:has(.sub-menu){position: relative;}
#menu .main-menu>li:has(.sub-menu)>.menu-name>a{display:flex}
#menu .main-menu>li:has(.sub-menu)>.menu-name>a:after{content:""; height:100%; position:relative; border:5px solid transparent; border-top:5px solid rgba(255,255,255,0.5); top:calc(50% - 2px); margin-right:8px;}
#menu .main-menu>li:has(.sub-menu):hover>.menu-name>a:after{border-top-color:rgba(255,255,255,1)}
#menu .main-menu>li:has(.sub-menu)>.sub-menu{position:absolute; display:none; /*top:30px;*/ right:0; width:175px; background:#134289; border-radius:0 0 4px 4px; box-shadow:3px 3px 3px rgba(0,0,0,0.3)}
#menu .main-menu>li:has(.sub-menu):hover>.sub-menu{display:block}
#menu .main-menu>li:has(.sub-menu)>.sub-menu>li>.menu-name>a{padding-right:8px; padding-left:8px; white-space:nowrap; background:rgba(255,255,255,0.1)}

#menu .main-menu .sub-menu>li:has(.sub-sub-menu){position: relative;}
#menu .main-menu .sub-menu>li:has(.sub-sub-menu)>.menu-name>a{display:flex; position:relative}
#menu .main-menu .sub-menu>li:has(.sub-sub-menu)>.menu-name>a:after{content:""; height:0; position:absolute; border:5px solid transparent; border-right:5px solid rgba(255,255,255,0.5); top:calc(50% - 5px); left:8px;}
#menu .main-menu .sub-menu>li:has(.sub-sub-menu):hover>.menu-name>a:after{border-right-color:rgba(255,255,255,1)}
#menu .main-menu .sub-menu>li:has(.sub-sub-menu)>.sub-sub-menu{position:absolute; display:none; top:0; right:175px; width:175px; background:#134289; border-radius:0 0 4px 4px; box-shadow:3px 3px 3px rgba(0,0,0,0.3)}
#menu .main-menu .sub-menu>li:has(.sub-sub-menu):hover>.sub-sub-menu{display:block}
#menu .main-menu .sub-menu>li:has(.sub-sub-menu)>.sub-sub-menu>li>.menu-name>a{padding-right:8px; padding-left:8px; white-space:nowrap; background:rgba(255,255,255,0.2)}
#menu .main-menu .sub-menu li{border-bottom:1px solid rgba(255,255,255,0.2); height:35px;}
#menu .main-menu .sub-sub-menu li{border-bottom:1px solid rgba(255,255,255,0.3)}



#menu .search-alt{margin:0 auto 0 0; height:30px; width:0; transition:width ease-out 0.2s; overflow:hidden; }
#menu .search-alt button{width:30px; height:30px; background:none; border:none; cursor:pointer; padding:7px 0; text-align:left}
#menu .search-alt button img{width:16px;}
#menu.is-sticky .search-alt{width:30px;}

.pagination{margin:16px 0 32px;}
.pagination ul{display:flex; justify-content: center}
.pagination ul li{width:40px; height:40px; margin:4px}
.pagination ul li a{display:block; width:100%; height:100%; line-height:40px; text-align:center; font-size:14px; color:#999; border:1px solid #ccc; border-radius:50%;}

#calendar-overlay{
    position:fixed; top:0; left:0; width:100vw; height:100vh;overflow:hidden; background:rgba(0,0,0,0.3); backdrop-filter:blur(2px);
    transform:scale(0);
}
#calendar-overlay .calendar-overlay-container{
    position:absolute; top:50%; left:50%; width:500px; background:rgba(0,0,0,0.6); border-radius:8px; backdrop-filter:blur(15px); padding:16px; box-shadow:0 0 8px rgba(0,0,0,0.3);
    opacity:0;
    transform:translateX(-50%) translateY(-50%) scale(0);
    transition:opacity ease-out 0.15s, transform ease-out 0.15s;
}
#calendar-overlay .calendar-overlay-header{display:flex; width:100%; height:36px; margin-bottom:16px; position:relative}
#calendar-overlay .calendar-overlay-header:after{content:""; width:100%; height:0; position:relative; top:50%; border-bottom:1px solid rgba(255,255,255,0.1); order:3}
#calendar-overlay .calendar-overlay-header .calendar-overlay-title{white-space:nowrap; height:inherit; line-height:36px;  font-weight:bold; margin-left:16px; font-size:14px; background:#ffd400; border-radius:4px; padding:0 16px; order:2}
#calendar-overlay.show,
#calendar-overlay.wait{z-index:99999999; transform: scale(1)}
#calendar-overlay.show .calendar-overlay-container{
    opacity:1; max-height:calc(100vh - 64px); overflow:auto;
    transform:translateX(-50%) translateY(-50%) scale(1);
}
#calendar-overlay .datepicker-plot-area *{font:13px/20px 'Noto Sans Arabic',tahoma}
#calendar-overlay .calendar-overlay-switch{position:absolute; top:-2px; left:0; background:none; border:none;}
#calendar-overlay .calendar-overlay-switch button{padding:0; margin:0; background:none; border:none; color:#fff; font:11px 'Noto Sans Arabic',tahoma; cursor:pointer;}
#calendar-overlay .calendar-overlay-switch button:before{content:"[ "}
#calendar-overlay .calendar-overlay-switch button:after{content:" ]"}
#calendar-overlay .calendar-overlay-input-between{display:flex;}
#calendar-overlay .calendar-overlay-input-between .calendar-overlay-input-from,
#calendar-overlay .calendar-overlay-input-between .calendar-overlay-input-to{width:100%;}
#calendar-overlay .calendar-overlay-input-between .calendar-overlay-input-from{margin-left:16px}
#calendar-overlay .calendar-overlay-input-direct{display:none;}
#calendar-overlay .calendar-overlay-input-direct .calendar-overlay-input{width:100%}
#calendar-overlay .calendar-overlay-container.direct-mode .calendar-overlay-input-between{display:none;}
#calendar-overlay .calendar-overlay-container.direct-mode .calendar-overlay-input-direct{display:flex;}
#calendar-overlay .calendar-overlay-input-between .calendar-overlay-input-from:before,
#calendar-overlay .calendar-overlay-input-between .calendar-overlay-input-to:before,
#calendar-overlay .calendar-overlay-input-direct .calendar-overlay-input:before{content:attr(data-title); display:block; height:30px; line-height:28px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;}
#calendar-overlay .datepicker-plot-area{border:none; border-radius:4px; background:rgba(255,255,255,0.5)}
#calendar-overlay .datepicker-plot-area .datepicker-navigator{direction: ltr}
#calendar-overlay .datepicker-plot-area .datepicker-navigator .pwt-btn-next,
#calendar-overlay .datepicker-plot-area .datepicker-navigator .pwt-btn-switch,
#calendar-overlay .datepicker-plot-area .datepicker-navigator .pwt-btn-prev{background:none; color:#fff; line-height:26px}
#calendar-overlay .datepicker-plot-area .datepicker-day-view .table-days td span,
#calendar-overlay .datepicker-plot-area .datepicker-year-view .year-item,
#calendar-overlay .datepicker-plot-area .datepicker-month-view .month-item{background:rgba(0,0,0,0.3); border-radius:4px; color:#f0f0f0; border:1px solid transparent;}
#calendar-overlay .datepicker-plot-area .datepicker-day-view .table-days td span{line-height:24px}
#calendar-overlay .datepicker-plot-area .datepicker-year-view .year-item,
#calendar-overlay .datepicker-plot-area .datepicker-month-view .month-item{margin:1px; width:calc(33.33% - 2px); height:50px; line-height:48px}
#calendar-overlay .datepicker-plot-area .datepicker-day-view .table-days td span.other-month{color:rgba(255,255,255,0.3); background:rgba(0,0,0,0.1)}
#calendar-overlay .datepicker-plot-area .datepicker-day-view .table-days td.disabled span,
#calendar-overlay .datepicker-plot-area .datepicker-year-view .year-item.year-item-disable,
#calendar-overlay .datepicker-plot-area .datepicker-month-view .month-item.month-item-disable{background:none;}
#calendar-overlay .datepicker-plot-area .datepicker-day-view .table-days td.disabled span.other-month{color:rgba(255,255,255,0.5)}
#calendar-overlay .datepicker-plot-area .datepicker-day-view .table-days td{padding:1px;}
#calendar-overlay .datepicker-plot-area .datepicker-day-view .table-days td.today span{background:rgba(255, 212, 0,0.3)}
#calendar-overlay .datepicker-plot-area .toolbox{display:flex}
#calendar-overlay .datepicker-plot-area .toolbox .pwt-btn-submit,
#calendar-overlay .datepicker-plot-area .toolbox .pwt-btn-calendar,
#calendar-overlay .datepicker-plot-area .toolbox .pwt-btn-today{width:100%; margin: 0; background:none; line-height:22px;}
#calendar-overlay .datepicker-plot-area .toolbox .pwt-btn-calendar{display:none}
#calendar-overlay .datepicker-plot-area .datepicker-day-view .table-days td.selected span,
#calendar-overlay .datepicker-plot-area .datepicker-year-view .year-item.selected,
#calendar-overlay .datepicker-plot-area .datepicker-month-view .month-item.selected{border:1px solid #ffd400;}
#calendar-overlay .datepicker-plot-area .datepicker-day-view .table-days tr{border-bottom:none}
#calendar-overlay .apply{white-space:nowrap; height:40px; width:100%; line-height:36px; font-weight:bold; margin-top:16px; font-size:14px; background:#ffd400; border:none; border-radius:4px; cursor:pointer}

#footer{background:#2A2E3A; color:#fff; border-top:1px solid rgba(255,255,255,0.1)}
#footer .flex-view .item-content{width:auto; margin:var(--gap)}
#footer .footer-top{padding:32px 0; border-bottom:1px solid rgba(255,255,255,0.1)}
#footer .footer-top .goto-top{margin:0 auto 16px;width:50px; height:50px;}
#footer .footer-top .goto-top button{width:inherit; height:inherit; line-height: 59px; border-radius:50%; overflow:hidden; border:none; background:#FFD500; cursor:pointer;}
#footer .footer-top .goto-top button svg{width:18px; height:18px;}
#footer .footer-top [data-theme="footer-logos"]{justify-content: center; flex-wrap: wrap; margin-top:16px;}
#footer .footer-top [data-theme="footer-logos"] .item-content{margin:8px; flex-grow:1}
#footer .footer-top [data-theme="footer-logos"] .thumbnail{text-align: center}
#footer .footer-top [data-theme="footer-logos"] .thumbnail img{filter:brightness(3) grayscale(100%) opacity(0.3); transition:filter ease-out 0.3s}
#footer .footer-top [data-theme="footer-logos"] .thumbnail img:hover{filter:brightness(100) grayscale(0%) opacity(0.8);}
#footer .footer-top [data-theme="footer-logos"] .details{display:none}
#footer .footer-top [data-theme="footer-list"]{justify-content: center; margin-top:16px}
#footer .footer-top [data-theme="footer-list"] .list-view{margin:0 32px; text-align: right;}
#footer .footer-top [data-theme="footer-list"] .list-view .list-header{color:#fff; font-size:15px; font-weight:bold}
#footer .footer-top [data-theme="footer-list"] .list-view .list-items{margin-top:8px; text-align:right}
#footer .footer-top [data-theme="footer-list"] .list-view .list-items .item-name{font-size:13px; font-weight:normal; margin-bottom:4px;}
#footer .footer-top [data-theme="footer-list"] .list-view .list-items .item-name a{color:#999; position:relative}
#footer .footer-top [data-theme="footer-list"] .list-view .list-items .item-name a:before{content:""; position:absolute; width:6px; height:6px; top:calc(50% + 1px); right:-10px; transform: translateY(-50%); background:#2A2E3A; border-radius:50%; transition:background ease-out 0.3s}
#footer .footer-top [data-theme="footer-list"] .list-view .list-items .item-name a:hover{color:#FFD500}
#footer .footer-top [data-theme="footer-list"] .list-view .list-items .item-name a:hover:before{background:#FFD500}

#footer .footer-middle{padding:32px 0; border-bottom:1px solid rgba(255,255,255,0.1)}
#footer .footer-middle [data-theme="footer-information"]{}
#footer .footer-middle [data-theme="footer-information"] .footer-information{display:flex; flex-direction:column}
#footer .footer-middle [data-theme="footer-information"] .footer-information .contact-top{margin-bottom:54px;}
#footer .footer-middle [data-theme="footer-information"] .footer-information .contact-top .address{line-height:18px;}
#footer .footer-middle [data-theme="footer-information"] .footer-information .contact-top .address svg{width:16px; height:16px; vertical-align:sub; margin-left:4px}

#footer .footer-middle [data-theme="footer-information"] .footer-information .contact-bottom{display:flex;}
#footer .footer-middle [data-theme="footer-information"] .footer-information .contact-bottom .contact-item{width:100%; text-align:center; line-height:18px;}
#footer .footer-middle [data-theme="footer-information"] .footer-information .contact-bottom .contact-item:first-child{text-align:right}
#footer .footer-middle [data-theme="footer-information"] .footer-information .contact-bottom .contact-item:last-child{text-align:left}
#footer .footer-middle [data-theme="footer-information"] .footer-information .contact-bottom .contact-item a{color:#fff}
#footer .footer-middle [data-theme="footer-information"] .footer-information .contact-bottom .contact-item svg{width:16px; height:16px; vertical-align:sub; margin-left:4px}
#footer .footer-middle [data-theme="footer-information"] .footer-networks{margin-right:24px; display:flex}
#footer .footer-middle [data-theme="footer-information"] .footer-networks ul{display: flex; flex-direction:column; margin-left:10px;}
#footer .footer-middle [data-theme="footer-information"] .footer-networks ul li{margin-bottom:10px}
#footer .footer-middle [data-theme="footer-information"] .footer-networks ul li:last-child{margin-bottom:0}
#footer .footer-middle [data-theme="footer-information"] .footer-networks ul li a{width:24px; height:24px; display:flex; flex-direction:column; align-content:center; justify-content:center; text-align: center; background:#fff; border-radius:50%; transition:background ease-out 0.3s}
#footer .footer-middle [data-theme="footer-information"] .footer-networks ul li a:hover{background:#ffd500}
#footer .footer-middle [data-theme="footer-information"] .footer-networks ul li a svg{width:14px; height:14px; margin:0 auto}
#footer .footer-middle [data-theme="footer-information"] .footer-networks ul li a svg.instagram-icon{width:20px; height:20px;}
#footer .footer-middle .col-start{max-width:calc(100% - 300px)}

#footer .footer-middle .footer-logo{}
#footer .footer-middle .footer-logo>a{}
#footer .footer-middle .footer-logo a img{}
#footer .footer-middle .footer-logo figcaption{font-size:22px; direction:ltr; text-align:right}
#footer .footer-middle .footer-logo figcaption a{color:#fff}

#footer .footer-bottom{padding:16px 0; background: #1C1F26}
#footer .footer-bottom .persian-copyright{}
#footer .footer-bottom .english-copyright{direction: ltr;}

@media screen and (max-width:1336px) {
    #menu .user-menu-fullname{display:none;}
    #menu .main-menu > li{margin-left:8px; padding-left:8px;}
}
@media screen and (max-width:1200px) {
    #menu .col-start{padding-left:0}
    #menu .main-menu > li{margin-left:5px; padding-left:5px;}
}
@media screen and (max-width:1060px) {
    #menu .user-menu-fullname{display:initial;}
    #menu .user-menu{margin-left:12px;}
}
@media screen and (max-width:600px) {
    #main-header .search>ul{display:none}
}
@media screen and (max-width:460px) {
    #menu .user-menu-fullname{display:none;}
}
