@import 'font.css';
@import 'fa_all.css';

:root {

    --green: #03a88f;
    --red: #ff0000;
    --lime: #03a88f1a;
    --white: #fefefe;
    --black: #111217;
    --light: #e2e2e2ef;
    --gray: #999;
    --yellow: #ffc855;

    --lh_small: 18px;
	--lh_normal: 24px;
	--lh_medium: 32px;
    --lh_big: 48px;
    --lh_huge: 72px;

    --screen: 1200px;
    --radius: 5px;
    --margin: 10px;
    --longfield: 740px;
}

/************************************************************************************************/

*{margin: 0; padding: 0; border: 0; font-size: 14px; font-family: mitra,Tahoma; line-height: var(--lh_normal); font-smooth: auto;}
html, body {width: 100%; height: 100%;}
body{color: var(--black); overflow: auto; overflow-x: hidden; clear: both; width: 100%; margin: 0; direction: rtl; position: relative; align-content: start;}

form {display: inline;}
a {text-decoration: none; color: var(--green); transition: 0.5s; cursor: pointer;}
a:hover{color: var(--red);}
b, strong, b *:not(i), strong *:not(i), .strong, .strong *:not(i) {font-family: mitrab !important; font-weight: normal;}
small, small *:not(i), .small, .small *:not(i) {font-size: 12px !important; font-weight: normal;}
p {text-align: justify;}
pre{white-space: pre-wrap; text-align: justify;}
img {max-width: 100%; height: auto; margin: auto; border-radius: 3px; box-sizing: border-box; line-height: 0;}
video {max-width: 100%; width: auto; height: 100%; max-height: 500px; margin: auto;}

/************************************************************************************************/

header, main, nav, aside, footer, section, div, h1, h2, h3, h4, h5, h6, fieldset {position: relative; box-sizing: border-box;}

header {position: fixed; z-index: 60; top: 0; right: 0; left: 0; display: none; box-shadow: 0 0 5px var(--light); background-color: var(--white);}

nav {position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: 280px; padding: 10px; background-color: var(--white); box-shadow: 0 0 20px var(--light);}
nav a {display: block; padding: 10px; font-family: mitrab; border-radius: var(--radius);}
nav a:hover, nav a.active {background-color: var(--light);}

.logo {display: block; height: 64px; padding: 15px; text-align: center;}
.logo img {height: 100%;}
.logo a:hover {background: none !important;}

main {margin: 20px 300px 20px 420px;}
main.sub {margin: 20px;}
main.manager {margin-left: 20px;}

aside {position: fixed; z-index: 1; top: 0; left: 0; bottom: 0; width: 400px; padding: 10px; box-shadow: 0 10px 10px var(--light) inset;}

@media only screen and (max-width:1000px){
main {margin-left: 20px;}
aside {position: static; width: calc(100% - 360px); margin: 20px 320px 0 20px; padding: 10px; box-shadow: 0 0 10px var(--light) inset;}
}

@media only screen and (max-width:600px){
header {display: block;}
nav {display: none;}
main {margin: 50px 0;}
aside {width: calc(100% - 40px); margin: 20px;}
.logo {display: inline-block; height: 54px; padding: 10px 0;}
}

footer {overflow: auto; margin-right: 300px; padding: 100px 20px 10px; text-align: center;}
footer small {display: block; margin: auto; max-width: 960px;}
@media only screen and (max-width:500px){
footer {padding: 50px 10px;}
footer .lhsmall {text-align: justify;}
}

.footer_link {max-width: 750px; text-align: right; margin: 20px auto; float: right;}
.footer_link a {display: inline-block; box-sizing: border-box; padding-left: 10px; font-size: 12px;}
.footer_logo {text-align: left; float: left; margin: 20px auto;}
.footer_logo a {display: inline-block; overflow: hidden; box-sizing: border-box; float: left; width: 96px; height: 96px; padding: 10px; margin: 5px; border-radius: 100%; box-shadow: 0 0 5px var(--light) inset;}
.footer_logo a img {width: 100%; height: auto;}
.footer_logo a:hover {box-shadow: 0 0 5px var(--yellow) inset;}
.footer_logo a label {display: block; margin-top: -10px; font-size: 12px; line-height: 16px; cursor: pointer;}

@media only screen and (max-width:600px){
footer {margin-right: 20px;}
.footer_link {width: 100%;}
.footer_logo {width: 100%; text-align: center;}
.footer_logo a {float: none;}
}

/************************************************************************************************/

h1 {display: none;}
h2, h3, h4, h5, h6 {display: block;}

h2 {padding: 50px 0 0; font-family: mitrab; font-size: 32px; line-height: var(--lh_big); max-width: var(--longfield); margin: var(--margin) auto; text-align: center;}
h3 {padding: 15px; font-family: mitrab; font-size: 20px; line-height: 36px; text-align: right;}
h4 {padding: 10px 15px; font-family: mitrab; font-size: 18px; text-align: right; border-bottom: 1px solid var(--light);}
h5 {padding: 20px 20px 10px; font-family: mitrab; font-size: 18px; text-align: right; border-bottom: 1px solid var(--light);}

h2 span {display: block; float: left; margin: -25px 0 5px 10px;}
h2 span, h2 span * {font-family: danab;}

h4 span {display: block; padding: 5px; font-size: 12px; line-height: var(--lh_small); font-weight: normal;}

@media only screen and (max-width:800px){h2 {font-size: 24px; line-height: var(--lh_medium);}}
@media only screen and (max-width:600px){h2 span {float: none; margin: 10px 0;}}
@media only screen and (max-width:350px){h2 {font-size: 18px; line-height: var(--lh_normal);}}

.titlebar {opacity: 0.5;}

/************************************************************************************************/

.coverwrap {position: fixed; z-index: 200; top: 0; right: 0; left: 0; bottom: 0; display: none; overflow: visible; background-color: var(--light); text-align: center; line-height: 0;}

.coverbox {position: relative; z-index: 100; display: block; overflow: auto; max-width: 800px; width: calc(100% - 20px); height: calc(100% - 60px); margin: -35px auto 20px; position: relative; box-sizing: border-box; background-color: var(--white); box-shadow: 0 0 15px var(--lime) inset; border-radius: var(--radius);}

.coverclose {position: relative; z-index: 101; display: inline-block; overflow: hidden; box-sizing: border-box; width: 80px; margin: 10px auto 0; line-height: 0; cursor: pointer; border-radius: var(--radius); color: #D10003 !important; text-align: center;}
.coverclose i {width: 64px; line-height: 56px; font-size: 64px; border-radius: 15px; background-color: var(--white); vertical-align: baseline;}

.coverlink {position: absolute; z-index: 30; top: 0; right: 0; left: 0; bottom: 0; display: block; overflow: visible; font-size: 0 !important; line-height: 0;}
.coverlink * {display: none;}

.coverback:hover {cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAALVBMVEVHcEzeAADeAADeAADeAADeAADgAADfAADeAADfAADeAADeAADeAADeAADeAACMoaXdAAAADnRSTlMAK7H8vP4LNjQac9jNpC6u6jAAAACgSURBVBjTY2DADdgkIfTEBCCRdVYAxGa8swxIyjxVBHGE7LYDyblxRkApRuWnmgxgShEkEdIAVhAXJAAUcQcbw6j6WBEmAVJi4vzUA2oTo/K7dyEFMHtF3r3zYEDiODIgKTMSYIAZEOL8WBEm8dRDyC5IACZRwKgKcSFIAuQMsK65YMuhDpWBuEooDuSFrE1gVzFqgzzHVgkxdHoCnrABAJ6DK/kuTn6sAAAAAElFTkSuQmCC'), auto;}

.slideright {margin-right: calc((50% - (var(--screen)/2)) + 10px) !important;}
@media only screen and (max-width:1200px){.slideright {margin-right: 20px !important;}}

.descbox .coverbox {margin: 45px auto; height: calc(100% - 90px);}
.descbox .coverclose {float: right; margin: 20px; clear: both;}
.descbox .coverclose i { width: 48px; line-height: 48px; font-size: 42px;}

.coverprev, .covernext {content:"\f101"; font-family: 'FA6'; position: fixed; z-index: 995; top: 48%; right: 15px; display: none; box-sizing: border-box; overflow: hidden; height: 90px; width: 75px; padding: 10px 0; border-radius: var(--radius); background-color: var(--white); box-shadow: 0 0 5px var(--gray); opacity: 0.7; align-content: center;}
.covernext {content:"\f105"; left: 15px; right: auto;}
.coverprev:hover, .covernext:hover {opacity: 1;}
.coverprev i, .covernext i {width: auto;}
.coverback {position: fixed; z-index: 90; top: 45px; bottom: 45px; left: 20px; right: 20px; background: linear-gradient(to left, transparent, var(--white), transparent);}
@media only screen and (max-width:1000px){.coverprev, .covernext {opacity: 0.5; width: 50px; height: 60px; padding: 0;}}

.loadingbox {padding: 200px 0;}
.loadingbox i {display: inline-block; width: 64px; line-height: 64px; margin: auto; font-size: 64px; opacity: 0.7;}
.loadingbox small {display: inline-block; margin-top: 10px;}

/************************************************************************************************/

.trim {position: relative; display: block; box-sizing: border-box; overflow: auto; width: calc(100% - 20px); padding: 10px; margin: var(--margin) auto; vertical-align: top; text-align: justify; border-radius: var(--radius); transition: 0.5s;}
.trim.hor {padding-right: 15px; padding-left: 15px;}
.trim.ver {padding-top: 15px; padding-bottom: 15px;}
.trim.small {padding-top: 5px; padding-bottom: 5px; line-height: var(--lh_small);}
.trim.nomax *:not(.captcha):not(img) {max-width: none !important;}
@media only screen and (max-width:500px){
.trim.fixfloat:not(i) .fright, .trim.fixfloat:not(i) .fleft {float: none !important; display: block !important;}
.trim.nomax {padding-right: 0; padding-left: 0; margin-right: 0; margin-left: 0; width: 100%;}
}

/************************************************************************************************/

fieldset {display: inline-block; position: relative; width: calc(50% - 20px); max-width: 360px; min-width: 150px; margin: var(--margin); text-align: right; vertical-align: middle;}
fieldset label {display: block; position: relative; z-index: 2; margin: 0 var(--margin); text-light: 0 0 5px var(--white); font-family: danab; font-size: 17px;}
fieldset input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]), fieldset select, fieldset textarea {display:block; overflow:auto; width: 100%; height: 58px; margin-top: -12px; padding: 5px 15px; box-sizing: border-box; line-height: var(--lh_normal); transition: 0.5s; border-radius: var(--radius); box-shadow: 0 0 5px var(--light) inset; appearance: none; background-color: var(--white); color: var(--black); outline: none;}
fieldset textarea {height: 160px; padding-top: 15px;}
fieldset u {display: block; overflow: hidden; height: 0; padding: 0; position: absolute; z-index: 10; top: 80px; right: 0; font-size: 12px !important; line-height: var(--lh_small); opacity: 0; transition: 0.5s; text-align: justify; text-decoration: none; background-color: var(--yellow); border-radius: var(--radius);}
fieldset select:hover, fieldset select:focus, fieldset textarea:hover, fieldset textarea:focus, fieldset input:hover, fieldset input:focus, fieldset input:disabled {background-color: var(--light) !important;}
fieldset input:disabled {cursor: not-allowed;}
fieldset select:hover~u, fieldset select:focus~u, fieldset textarea:hover~u, fieldset textarea:focus~u, fieldset input:hover~u, fieldset input:focus~u, fieldset .nice-select:hover~u {overflow: auto; opacity: 1; height: auto; padding: 10px;}
fieldset input[type=file], fieldset input[type=image]{overflow: hidden !important; padding: 18px !important; direction: ltr;}
fieldset input[type=checkbox]{float: right; margin: 4px 4px 0 10px; cursor: pointer; width: 20px; height: 20px; accent-color: var(--green);}
fieldset input[type=radio]{float: right; margin: 7px; height: 15px; width: 15px; accent-color: var(--red);}

fieldset button, .button {display: inline-block; overflow: hidden; max-width: 100%; padding: 10px 20px 10px 30px; box-sizing: border-box; cursor: pointer; font-family: danab; font-size: 18px; font-weight: bolder; text-align: center; border-radius: var(--radius); background-color: var(--green); color: #fff; transition:0.5s; white-space: nowrap; text-overflow: ellipsis;}
fieldset button:hover, .button:hover {color: #fff; box-shadow: 0 0 10px var(--white) inset;}
fieldset button i, .button i {float: right; font-size: 18px;}

@media only screen and (max-width:700px){
fieldset {width: calc(100% - 20px); max-width: calc(100% - 20px); min-width: 100px;}
fieldset textarea {height: 200px;}
}

.showpasskey {position: absolute; z-index: 1; bottom: 14px; right: 10px;}
.textareacounter {position: absolute; z-index: 5; top: 0; left: 10px; font-size: 10px;}

/************************************************************************************************/

.nice-select {overflow: visible; position: relative; box-sizing: border-box; padding: 15px; margin-top: -12px; border-radius: var(--radius); cursor: pointer; height: 58px; line-height: var(--lh_small); transition: 0.5s; box-shadow: 0 0 5px var(--light) inset;  background-color: var(--white); color: var(--black);}
.nice-select:hover, .nice-select:active, .nice-select.open, .nice-select:focus {background-color: var(--light);}
.nice-select:after {border-bottom: 3px solid var(--gray); border-left: 3px solid var(--gray); content: ''; display: block; height: 7px; width: 7px; margin-top: -7px; pointer-events: none; position: absolute; left: 20px; top: 50%; transform-origin: 66% 66%; transform: rotate(-45deg); transition: 0.5s;}
.nice-select.open:after {transform: rotate(135deg)}
.nice-select.open .list {opacity: 1; pointer-events: auto; transform: scale(1) translateY(0);}
.nice-select.disabled {background-color: var(--light); pointer-events: none;}
.nice-select.disabled .current {font-family: mitrab;}
.nice-select.disabled:after {border: none;}
.nice-select span {display: block; width: calc(100% - 20px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.nice-select .list {max-height: 240px; padding: 2px; background-color: var(--white); border-radius: var(--radius); box-sizing: border-box; opacity: 0; overflow: auto; pointer-events: none; position: absolute; top: 125px; right: 0; left: 0; transform-origin: 50% 0; transform: scale(0.75) translateY(-21px); transition: all .2s cubic-bezier(0.5,0,0,1.25),opacity .15s ease-out; z-index: 30; box-shadow: 0 0 5px var(--light) inset;}
.nice-select .list:hover .option:not(:hover) {background-color: transparent !important;}
.nice-select .option {cursor: pointer; list-style: none; min-height: 30px; outline: none; padding: 10px 15px; margin: 2px; border-radius: var(--radius); transition: 0.5s;}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {background-color: var(--light);}
.nice-select .option.selected {font-family: mitrab; background: linear-gradient(45deg, transparent, var(--light));}
.nice-select .option.disabled {background-color: transparent; color: var(--gray); cursor: default}

.nice-select .nice-select-search-box {box-sizing: border-box; position: absolute; width: 100%; top: 74px; right: 0; z-index: 8; opacity: 0; pointer-events: none; transform-origin: 50% 0; transform: scale(.75) translateY(-21px); transition: all .2s cubic-bezier(.5,0,0,1.25), opacity .15s ease-out;}
.nice-select .nice-select-search{color: #555; height: 42px;}
.nice-select.open .nice-select-search-box{opacity: 1; z-index: 40; pointer-events: auto; transform: scale(1) translateY(0);}
.nice-select-search-box input {position: static; width: 100% !important;}

/************************************************************************************************/

.withdate .nice-select {float: right; width: calc(33.33% - 10px); max-width: calc(33.33% - 10px); min-width: calc(33.33% - 10px); margin-left: 10px;}
.withdate .nice-select:nth-of-type(5) {width: 33.33%; max-width: 33.33%; min-width: 33.33%; margin-left: 0;}

.withcb {margin: 10px !important; padding: 10px; background-color: var(--light); border-radius: var(--radius); cursor: pointer;}
.withcb label {display: block; margin: 0; cursor: pointer;}
.withcb small {display: block; line-height: var(--lh_small); padding: 5px;}

.withta {width: calc(100% - 20px); max-width: 745px; min-width: 300px;}
.withta u {top: 162px;}

.withbt {text-align: center;}
.withgift {position: absolute; z-index: 1; left: 10px; top: -20px; color: var(--red); text-light: 0 0 5px var(--white);}
.thinbutton {margin: -5px -10px -15px -10px; padding: 5px 10px 5px 20px;}
.longfield {width: calc(100% - 20px); max-width: var(--longfield); min-width: 300px;}
.nolabel label {display: none;}
.nolabel input {margin-top: 0 !important;}
.insidelabel label {width: 40px; margin: 15px 10px -40px 0; font-size: 12px;}
.fieldset_city {display: inherit;}

.searchfield {float: right; max-width: calc(100% - 75px);}
.searchbutton {float: right; padding: 10px; margin-top: 32px;}

@media only screen and (max-width:480px){
.withta {min-width: 100px;}
.withta u {top: 222px;}
.longfield {min-width: 100px;}
}

/************************************************************************************************/

.captcha {margin-top: 30px; box-shadow: 0 0 5px var(--light); border-radius: var(--radius); line-height: 0; padding: 5px 0;}
.captcha label {margin: -20px 10px -6px 0;}
.captcha a {display: inline-block; width: 45px; text-align: center; border-radius: var(--radius); line-height: 0; vertical-align: top; padding: 14px 5px 0;}
.captcha img {display: inline-block; height: 48px; width: 190px; max-width: calc(100% - 120px); border-radius: var(--radius);}
.captcha input {display: inline-block !important; width: calc(100% - 255px) !important; min-width: 55px; height: 48px !important; margin: 0 5px 0 0 !important; padding: 4px !important; text-align: center !important; font-family: mitrab; font-size: 18px; border: none !important; box-shadow: 0 0 5px var(--light) inset !important; vertical-align: top;}

/************************************************************************************************/

.menusort {float: left; margin-top: 0; margin-bottom: 0; max-width: 280px;}
.menusort label {z-index: 41; width: 125px; margin-bottom: -35px; font-family: mitra; font-size: 14px;}
.menusort .nice-select {z-index: 40; height: 45px; padding: 10px 140px 10px 10px;}

.filebutton {position: absolute; z-index: 4; right: 15px; top: 32px; width: var(--lh_normal);}
.filebutton * {margin: 0;}

.comment fieldset {width: calc(100% - 20px);}
.comment .col50 {overflow: visible;}

/************************************************************************************************/

.message {position: relative; display: inline-block; padding: 5px; margin: var(--margin); text-align: right; border-radius: var(--radius); background-color: var(--yellow);}
.message_table {display: table; width: 100%;}
.message_icon {display: table-cell; padding: 0 10px 0 15px; text-align: center; vertical-align: middle !important;}
.message_text {display: table-cell; padding: 10px 0 10px 20px; text-align: justify; vertical-align: middle; border-radius: var(--radius);}
.message a {margin:0 2px; font-family: mitrab;}
@media only screen and (max-width:420px){
.message_icon {display: none;}
.message_text{padding: 10px;}
}

.error {border-right: 5px solid red; animation: borderwink_error 2s 10;}
.error .fa-3x {animation: iconwink_error 2s 10;}
.success {border-right: 5px solid green; animation: borderwink_success 2s 10;}
.success .fa-3x {animation: iconwink_success 2s 10;}
.attention {padding: 0; background-color: var(--light);}
.attention .message_text {font-size: 12px; line-height: var(--lh_small); background-color: none;}

.nts {text-align: center; font-family: mitrab; font-size: 18px; margin: var(--margin); padding: 100px; border-radius: var(--radius);}
.nts *:not(i) {font-family: mitrab; font-size: 18px; color: var(--red); border: none;}
.nts i {margin: auto;}
.nts label {border: none; height: 0;}
@media only screen and (max-width:1000px){.nts{padding: 100px 50px;}}
@media only screen and (max-width:500px){.nts{padding: 50px 10px;}}

/************************************************************************************************/

.alarm_wrap {position: fixed; z-index: 500; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--white); text-align: center; opacity: 0;}
.alarm_holder {position: fixed; z-index: 505; top: 40%; left: 50%; transform: translate(-50%, -50%); display: inline-block; padding: 30px; background-color: var(--white); box-shadow: 0 0 30px var(--light); border-radius: var(--radius);}
.alarm_text {display: block; margin: 10px 0 30px; font-family: mitrab;}
@media only screen and (max-width:900px){
.alarm_holder {top: 30%; left: 10%; right: 10%; transform: none; padding: 30px 10px;}
}

/************************************************************************************************/

.pagenum {text-align: center; clear: both;}
.pagenum span,.pagenum b {display: inline-block; padding: 10px; margin: 10px 3px 3px; width: 48px; box-sizing: border-box; background-color: var(--black); color: var(--white) !important; border-radius: var(--radius); font-family: mitrab; font-size: 16px;}
.pagenum a {display: inline-block; padding: 10px 0; margin: 10px 3px 3px; width: 48px; box-sizing: border-box; background-color: var(--yellow); color: var(--black) !important; border-radius: var(--radius); font-family: mitrab; font-size: 16px;}
.pagenum a:hover {background-color: var(--green); color: var(--white) !important;}

/************************************************************************************************/

.boxbutton .trim {overflow: hidden; height: calc(100% - 20px); transition: 1s; text-align: center; box-shadow: 0 0 25px var(--light) inset, 0 0 5px var(--light); background-color: var(--white);}
.boxbutton:hover .trim {box-shadow: 0 0 100px var(--light) inset;}
.bb_holder {position: absolute; z-index: 3; bottom: 50%; left: 0; right: 0; transform: translateY(50%); padding: 5px 10px;transition: 0.5s;}
.boxbutton .trim::before, .boxbutton .trim::after {content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(-90deg, var(--white), transparent); transform: skewX(-45deg); opacity: 0.3; transition: 1s; box-shadow: 0 0 25px var(--white) inset, 0 0 5px var(--white);}
.boxbutton .trim::after {right: -100%;}
.boxbutton:hover .trim::before {right: 250%;}
.boxbutton:hover .trim::after {right: 150%;}
.boxbutton .ma_holder {max-width: calc(100% - 10px); max-height: calc(100% - 10px);}

.bb_img img {position: absolute; z-index: 0; top: 0; left: 50%; margin: 0; transform: translateX(-50%); max-width: none; filter: brightness(50%) blur(0.5px); transition: 1s;}
.bb_img:hover img {filter: brightness(50%) blur(0px);}
.bb_img .bb_holder {background: linear-gradient(to left, transparent, var(--white), transparent);}
.bb_img:hover .bb_holder {padding: 10px; transform: translateY(50%) scale(1.01);}

/************************************************************************************************/

.chart_area {position: relative; display: block; overflow: visible; height: calc(100% - 30px); margin-left: 25px; border: 2px solid var(--light); border-top: none; border-right: none; line-height: 0; text-align: left;}
.chart_col {position: relative; display: inline-block; overflow: visible; max-width: 30px; margin: 0 1px; height: 100%; border-radius: var(--radius) var(--radius) 0 0; transition: 0.5s; white-space: nowrap;}
.chart_bar {position: absolute; z-index: 1; bottom: 0; right: 0; left: 0; background-color: var(--green); border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 0 5px var(--white) inset;}
.chart_val, .chart_big {position: absolute; z-index: 5; bottom: 20px; left: 50%; transform: translate(-50%, 0); padding: 2px 10px; background-color: var(--light); border-radius: var(--radius); opacity: 0; font-size: 12px; line-height: var(--lh_small); text-align: center; transition: 0.5s; box-shadow: 0 0 5px var(--light) inset;}
.chart_big {top: 20px; bottom: auto; opacity: 1; background-color: var(--yellow);}
.chart_col:hover, .chart_col:focus {background-color: var(--light);}
.chart_col:hover .chart_val, .chart_col:focus .chart_val {opacity: 1;}
.chart_date {display: block; overflow: visible; height: 30px; margin: 1px 0 0 30px; text-align: left; line-height: 0;}
.chart_date .chart_col {font-size: 10px; transform: rotate(-90deg); background: none !important; text-align: left;}
.chart_ver {position: absolute; z-index: 1; top: 10px; left: -280px; bottom: 10px; display: block; height: var(--lh_normal); width: 300px; transform: rotate(-90deg); transform-origin: right; font-size: 12px;}
.chart_hor {position: absolute; z-index: 2; bottom: 40px; right: 10px; display: inline-block; padding: 1px 5px 0 5px; font-size: 12px; line-height: var(--lh_small); background-color: var(--light); border-radius: var(--radius);}
.chart_stripes {background: repeating-linear-gradient(-45deg, transparent, transparent 8px, var(--white) 5px, var(--white) 10px); background-color: var(--green);}

.chart_pie {position: absolute; z-index: 1; top: 45%; left: 10px; right: 10px; transform: translate(0, -50%); display: block; overflow: visible; height: 50px; margin: var(--margin); border-radius: var(--radius);}
.chart_pie::after {content: ""; position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--radius); box-shadow: 0 0 20px var(--white) inset;}
.chart_pie .chart_slice {position: relative; display: inline-block; overflow: visible; height: 100%; border: 2px solid var(--white); border-radius: var(--radius);}
.chart_pie .chart_slice:nth-of-type(1) {background-color: var(--red);}
.chart_pie .chart_slice:nth-of-type(2) {background-color: var(--cobalt);}
.chart_pie .chart_slice:nth-of-type(3) {background-color: var(--orange);}
.chart_pie .chart_slice:nth-of-type(4) {background-color: var(--magenta);}
.chart_pie .chart_slice:nth-of-type(5) {background-color: var(--green);}
.chart_pie .chart_label {position: absolute; z-index: 5; left: 50%; transform: translate(-50%, 0); display: inline-block; min-width: 80px; padding: 2px 10px;  text-align: center; background-color: var(--yellow); border-radius: var(--radius); box-shadow: 0 0 5px var(--light) inset; line-height: 0;}
.chart_pie .chart_label * {font-size: 12px; line-height: var(--lh_small);}
.chart_pie .chart_slice:nth-of-type(even) .chart_label {top: -50px;}
.chart_pie .chart_slice:nth-of-type(odd) .chart_label {bottom: -50px;}
.chart_keys {position: absolute; z-index: 1; bottom: 15px; left: 20px; right: 20px; font-size: 12px; line-height: var(--lh_small); color: var(--gray); text-align: left;}

/************************************************************************************************/

.slidetop {display: block; overflow: hidden; position: relative; padding: 0; background-color: var(--black); line-height: 0; text-align: center;}
.slidetop li {line-height: 0;}
.slidetop img, .slidetop video {opacity: 0.8;}
.slidetop span {position: absolute; z-index: 5; top: 50%; left: 0; right: 0; bottom: auto; transform: translateY(-50%); padding: 30px; font-family: mitrab; font-size: 36px; background: linear-gradient(to left, transparent, var(--white), transparent); text-align: center; opacity: 0.8;}
.slidetop span small {display: block; margin-top: 20px; line-height: var(--lh_small);}
@media only screen and (max-width:700px){
.slidetop span {padding: 10px; font-size: 18px;}
.slidetop span small {margin-top: 10px;}
}

/************************************************************************************************/

.articlepath {display: block; padding: 5px; border-bottom: 1px solid var(--light); font-size: 10px; line-height: var(--lh_small);}
.articlepath a {font-size: 10px; line-height: var(--lh_small);}

.articlelist {display: inline-block; width: 100%; text-align: right;}
.articlelist .trim {line-height: 0; background-color: var(--white);}
.articlelist .trim img {margin: 5px; max-width: calc(100% - 10px);}

.pl_media {display: inline-block; width: 100px; vertical-align: top;}
.pl_info {display: inline-block; width: calc(100% - 100px); padding: 10px;}
.pl_info .textover {padding: 1px 10px;}
.pl_info .line {margin: 10px 0;}

.articlebox {display: block; padding: 5px; margin: 5px 0; border-bottom: 1px solid var(--light); transition: 0.5s;}
.articlebox:hover {background-color: var(--light);}
.ab_media {position: relative; overflow: hidden; width: 100px; height: 60px; float: right;}
.ab_media img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ab_label {width: calc(100% - 110px); float: left;}

/************************************************************************************************/

.loginbox {width: 400px; margin: 50px auto; text-align: center;}
.loginbox fieldset {width: calc(100% - 20px);}

.googlemap {height: 300px; overflow: hidden; box-shadow: 0 0 5px var(--light);}
.googlemap iframe {width: 100% !important; height: 100% !important;}

.managerbut {position: absolute; z-index: 1; top: 95px; left: calc(50% - (var(--screen) / 2)); display: inline-block; width: auto;}
.managerbut .button {padding: 10px; background-color: var(--red);}
@media only screen and (max-width: 1200px){
.managerbut {left: 0;}
}

.postal {display: inline-block; width: calc(50% - 20px); margin: var(--margin); background: repeating-linear-gradient(135deg,#cf2004 0,#cf2004 15px,transparent 15px,transparent 25px,#3ea8f2 25px,#3ea8f2 40px,transparent 40px,transparent 50px); vertical-align: top; align-items: start;}

.stickleft, .stickright {position: absolute; z-index: 45; bottom: 10px; left: 10px; padding: 5px 10px 5px 15px; background-color: var(--green); color: #fff; border-radius: var(--radius); box-shadow: 0 0 5px var(--green);}
.stickright {z-index: 40; right: 10px; left: auto;}

.stickleft.nobg, .stickright.nobg {background: none !important; box-shadow: 0 0 0 !important;}

.specialleft, .specialright {position: fixed; z-index: 45; bottom: 20px; left: -5px; display: inline-block; width: 80px;}
.specialright {z-index: 40; right: -5px; left: auto;}
.specialleft a, .specialright a {display: block; padding-top: 10px; margin-bottom: 10px; font-size: 10px; color: #fff; background-color: var(--green); border-radius: var(--radius) 0 0 var(--radius); box-shadow: 0 0 5px var(--green);}

.textover {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.opt {text-align: center; letter-spacing: 20px; font-size: 24px; font-family: mitrab;}

/************************************************************************************************/

.table {display: table; width: 100%; table-layout: fixed; border-spacing: 10px 5px;}
.table.nospace {border-spacing: 0 0;}
.table.nospace .cell {padding: 0 !important;}
.cell {display: table-cell; vertical-align: middle; padding: 5px; text-align: center; width: auto; border-radius: var(--radius);}
.linecell {display: table-row;}

.cart {display: block; padding: 5px; border-bottom: 1px solid var(--light);}
.cart .pad5 {display: inline-block; vertical-align: top;}
.cart .pad5:nth-child(1) {width: 40px;}
.cart .pad5:nth-child(2) {width: calc(100% - 300px); text-align: right;}
.cart .pad5:nth-child(3) {width: 170px; text-align: right;}
.cart .pad5:nth-child(4) {width: 90px;}
@media only screen and (max-width:600px){
.cart .pad5:nth-child(2) {width: calc(100% - 40px);}
.cart .pad5:nth-child(3) {width: calc(100% - 90px); text-align: left;}
}

/************************************************************************************************/

.tabbox {opacity: 0; z-index: 5;}
.block {display:block !important; box-sizing: border-box;}
.relative {position: relative!important;}
.visible {overflow: visible !important;}
.hidden {overflow: hidden !important;}
.break {word-break: break-all;}

.lhsmall, .lhsmall * {line-height: var(--lh_small) !important;}
.line0 {font-size: 0px !important; line-height: 0px !important;}
.nobr {border: none !important; border-radius: 0 !important;}
.line {border-bottom: 1px solid var(--light);}

.iconimage {float: right; width: var(--lh_normal); height: var(--lh_normal); margin-left: 10px; border-radius: var(--radius); box-shadow: 0 0 3px var(--light);}
.zoomimage {display: inline-block; overflow: hidden; box-sizing: border-box; width: var(--lh_normal); height: var(--lh_normal); margin: 0 2px; line-height: 0; position: relative; text-align: center; background-color: #fff; border-radius: var(--radius); animation: zoomimage_blink 5s infinite; transition: 0.5s;}
.zoomimage i {font-size: 18px;}
.zoomimage:hover {transform: scale(1.2); transform-origin: center center;}
@keyframes zoomimage_blink {0%, 100% {filter: brightness(100%);} 50% {filter: brightness(70%);}}

.col120 {width: 120px;}
.col100 {width:100% !important; min-width: 100% !important; max-width: 100% !important; box-sizing:border-box;}
.col75 {display: inline-block; vertical-align: top; width: 75% !important; min-width: 75% !important; max-width: 75% !important; box-sizing:border-box;}
.col66 {display: inline-block; vertical-align: top; width: 66.66% !important; min-width: 66.66% !important; max-width: 66.66% !important; box-sizing:border-box;}
.col50 {display: inline-block; vertical-align: top; width: 50% !important; min-width: 50% !important; max-width: 50% !important; box-sizing:border-box;}
.col33 {display: inline-block; vertical-align: top; width: 33.33% !important; min-width: 33.33% !important; max-width: 33.33% !important; box-sizing:border-box;}
.col25 {display: inline-block; vertical-align: top; width: 25% !important; min-width: 25% !important; max-width: 25% !important; box-sizing:border-box;}
.col20 {display: inline-block; vertical-align: top; width: 20% !important; min-width: 20% !important; max-width: 20% !important; box-sizing:border-box;}
@media only screen and (max-width:900px){
.col25 {width: 50% !important; min-width: 50% !important; max-width: 50% !important;}
}
@media only screen and (max-width:900px){
.col20 {width: 33.33% !important; min-width: 33.33% !important; max-width: 33.33% !important;}
.col75, .col66, .col33 {width: 100% !important; min-width: 100% !important; max-width: 100% !important;}
}
@media only screen and (max-width:600px){
.col20 {width: 50% !important; min-width: 50% !important; max-width: 50% !important;}
.col50, .col25 {width: 100% !important; min-width: 100% !important; max-width: 100% !important;}
}
@media only screen and (max-width:350px){
.col20 {width: 100% !important; min-width: 100% !important; max-width: 100% !important;}
}

.height50 {height: 50px !important;}
.height100 {height: 100px !important;}
.height150 {height: 150px !important;}
.height200 {height: 200px !important;}
.height250 {height: 250px !important;}
.height300 {height: 305px !important;}
.height400 {height: 400px !important;}
.height500 {height: 500px !important;}
.height700 {height: 700px !important;}

.clear{clear:both;font-size:1px !important;line-height:1px !important;}
.clear5{display:block;overflow:hidden;height:5px;clear:both;}
.clear10{display:block;overflow:hidden;height:10px;clear:both;}
.clear15{display:block;overflow:hidden;height:15px;clear:both;}
.clear20{display:block;overflow:hidden;height:20px;clear:both;}
.clear50{display:block;overflow:hidden;height:50px;clear:both;}
.clear100{display:block;overflow:hidden;height:100px;clear:both;}
.clear150{display:block;overflow:hidden;height:150px;clear:both;}

.after5 {margin-bottom: 5px;}
.after10 {margin-bottom: 10px;}

.space{display: inline-block !important; padding: 0 0 !important;}
.space5{display: inline-block !important;padding: 0 5px !important;}
.space10{display: inline-block !important; padding: 0 10px !important;}
.space15{display: inline-block !important; padding: 0 15px !important;}
.space20{display: inline-block !important; padding: 0 20px !important;}

.rtl {direction: rtl !important;}
.ltr {direction: ltr !important; font-family: en;}

.radius {border-radius: 100%; box-shadow: 0 0 5px var(--light);}
.hide {display: none;}
.wbg {background-color: var(--white); box-shadow: 0 0 5px var(--light) inset;}
.lbg {background-color: var(--white); box-shadow: 0 0 25px var(--light) inset; overflow: auto;}
.gbg {background-color: var(--green) !important; box-shadow: none; overflow: auto;}
.gbg, .gbg * {color: var(--white);}
.red {color: var(--red) !important;}
.gray {color: var(--gray) !important;}
.right {text-align: right !important;}
.center {text-align: center !important;}
.left {text-align: left !important;}
.justify {text-align: justify !important;}
.overline {text-decoration: line-through;}
.fright {float: right !important; clear: none;}
.fleft {float: left !important; clear: none;}
.nofloat {float: inherit !important;}
.pad0 {padding:0 !important;}
.pad5 {padding:5px !important;}
.pad10 {padding:10px !important;}
.pad15 {padding:15px !important;}
.pad20 {padding:20px !important;}
.pad50 {padding:50px !important;}
.marg0 {margin:0 !important;}
.marg1 {margin:1px !important;}
.marg5 {margin:5px !important;}
.marg10 {margin:10px !important;}
.marg15 {margin:15px !important;}
.marg20 {margin:20px !important;}

.nomarg, .nomarg * {margin: 0 !important;}
.rightpad10 {padding-right: 10px !important;}
.leftpad10 {padding-left: 10px !important;}
.sidepad5 {padding-left: 5px !important; padding-right: 5px !important;}
.sidepad10 {padding-left: 10px !important; padding-right: 10px !important;}

.danab {font-family: danab;}
.fs64 {font-size: 64px !important;}
.fs32 {font-size: 32px !important;}
.fs24 {font-size: 24px !important;}
.fs18 {font-size: 18px !important;}