:root {
	--fs: 16px; --lh: 1.27; --lhb: 1.4;
	--ph: calc(var(--fs) * .9); --pv: calc(var(--fs) * .5); /*indent*/
	--br: var(--pv); --brb: 10px; /*radius*/
	--bg: #FBF7F3; --bgs: #F5EEE5; --bd: #EEE; --bt: #60AA00;
	}
body {font-family: Arial; font-size: var(--fs); letter-spacing: 0.2px; margin: 0; padding: 0; height: 100%; line-height: var(--lh); background: #EEE; min-height: 1px; max-height: 1000000px; text-size-adjust: none; -webkit-text-size-adjust: none;}

input,select,textarea,button {color: #000; background: #FFF; font-family: Arial; font-size: var(--fs); letter-spacing: 0.2px; outline: none; box-sizing: border-box;}
input[type=submit],input[type=text],input[type=password],input[type=email],input[type=number] {-webkit-appearance: none; -moz-appearance: none; appearance: none;} 

input::placeholder {color: #777;}
p,div,form {border: 0; margin: 0; padding: 0;}
img {border: 0; margin: 0; padding: 0; image-orientation: none;}
table {border: 0; border-spacing: 0; box-sizing: border-box;}
table td {padding: 0; line-height: var(--lh);}

h1, h2, .header, .header2 {font-weight: bold; margin: 0; padding: 0; line-height: 1.37;}
h1, .header {font-size: 20px;}
h2, .header2 {font-size: 18px;}

.big {font-size: 1.07rem; line-height: var(--lhb); !important}
.normal {font-size: .94rem; !important}
.mid {font-size: .9rem; !important}
.sm {font-size: .875rem; !important}
.small {font-size: 11px;} /*->tiny .75rem*/
.note {font-size: 12px; color: #CC0000;}
.txt {line-height: var(--lhb);}
.text {font-size: 14px;} /* ->txt */
.bold {font-weight: bold;}
.hide {display: none;}
.er {font-size: .875rem; color: #DD0000; margin-top: 5px;} /*msg js*/
.green {color: #339900;}
.grey {color: #777;}
.black {color: #000;}
.selected {background: #CCFF99;}
.bgw {background: #FFF;}
.center {text-align: center;}
.top {vertical-align: top;}
.middle {vertical-align: middle;}
.bt {border-top: 1px solid #EEE;}

div.list {display: table; border-spacing: 3px; color: #CCC;}
div.list a {display: table-cell; padding: var(--pv) var(--ph); color: #000; border-radius: var(--br);}
div.list a:hover {background: #F9F9F7;}
div.list span {display: table-cell; padding: var(--pv) var(--ph); color: #000; background: #F9F9F7; border: 1px solid #DDD; border-radius: var(--br);}
div.list img {width: 16px; margin: 0 0 -3px 5px;}

.fm {width: 100%; padding: 9px; border: 1px solid #CCC; border-radius: 7px;}
/*->fm*/
.flat {padding: 3px; border: 1px solid #CCC; height: 28px; vertical-align: middle;}
.flattxt {padding: 3px; border: 1px solid #CCC;}

/* 
div.select {padding: 8px 12px; height: 38px; color: #999; background: #FFF; border: 1px solid #DDD; border-radius: var(--br); cursor: pointer; overflow: clip; box-sizing: border-box;}
div.selectDrop {border: 1px solid #CCC; margin-top: -1px; padding: 5px 0; position: absolute; display: none; background: #FFF; z-index: 100; overflow: auto;}
 */
input.txt {padding: 7px; height: 34px; border: 1px solid #CCC;}

/*top mob*/
body.m {padding-top: 48px; background: #FFF;}
table.m {width: 100%; background: #509900; position: fixed; top: 0; left: 0; right: 0; z-index: 2000;}
table.m td a.act {background: var(--bt);}
table.m td a.tmenu {margin: 3px 2px; padding: 9px 12px; border-radius: var(--br); display: flex; align-items: center;}
div.tmenu {} /*DEPR*/
/*top desk*/
table.page {width: 1000px; margin: 0 auto;}
table.tmenu {background: #509900;}
table.tmenu td a.act {background: var(--bt);}
a.logo img {width: 90px; height: 24px; margin: 5px 55px;}
a.tmenu {padding: 14px 18px; color: #FFF; white-space: nowrap; display: block;}
a.imenu {padding: 14px; display: block;}
a.imenu img {width: 20px; height: 20px;}
table.pagew {width: 1000px; background-color: #FFF; margin: 0 auto;} /*TODO->page bgw*/
table.pagew td.pagew {padding: 0; vertical-align: top;} /*TODO->top*/

a {color: #0055CC; text-decoration: none;}
a.wh {color: #EEE;}
a.lt {color: #777;}
a.lt img {margin: 0 0 -3px 5px; width: 15px;}
a.dk {color: #000;}
a.white {color: #FFF;} /*->wh*/

/*dropdown*/
a.item {color: #000; display: block; padding: 10px 50px 11px 16px;}
a.item:hover {background: var(--bg);}
a.item img {width: 20px; margin: 0 10px -5px 0; border-radius: 5px;}
a.item img.promo {width: 18px; margin: 0 8px -6px -2px; padding: 1px; border: 2px solid #BBDD77; border-radius: 50%;}
div.line {margin-top: 5px; padding-top: 5px; border-top: 1px solid #EEE;}
div.dropdown {margin-top: 7px; padding: 7px 0; position: absolute; display: none; background: #FFF; border-radius: var(--br); box-shadow: 1px 1px 7px rgba(0,0,0,0.3); z-index: 1500;}

/*->item*/
div.sb {width: 200px; padding: 15px 0; font-size: 0.9rem;}
div.sb a {display: block; padding: 7px 0 9px 15px; color: #777;}
div.sb a:hover {background: var(--bg);}
div.sb img {width: 20px; height: 20px; border-radius: 4px; margin: 0 10px -5px 0;}
div.sb img.pr {width: 18px; height: 18px; margin: 0 8px -6px -2px; padding: 1px; border: 2px solid #BBDD77; border-radius: 50%;}
div.sb span {background: #F3EEE0; padding: 3px 7px; border-radius: 25px;}

/* dialog */
div.dlBg {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.5; background: #000; z-index: 1000;}
div.dlMenu {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 250px; border-radius: var(--brb); background: #FFF; z-index: 1100;}
div.dlItem {padding: 15px; cursor: pointer; user-select: none;}
div.dlItem img {width: 20px; margin: 0 7px -5px 0;}
div.dlItem p {margin: 7px 0 0 27px; color: #999; font-size: 0.9rem; line-height: var(--lh);}
div.dlItem a {color: #000;}

/*user*/
table.umenu {background: #CCE5F0; width: 100%;}
table.umenu td {border-right: 1px solid #BBDDEE;}
table.umenu a {padding: 12px 25px; color: #000; display: block; white-space: nowrap; text-align: center;background: #CCE5F0;}
table.umenu a.umenu  {background: #BBDDEE; font-weight: bold;}

a.b, button.b, input.b, a.bd, button.bd, input.bd {padding: var(--pv) var(--ph); border-radius: var(--br); box-shadow: 1px 1px 2px rgba(0,0,0,0.1); text-align: center; display: inline-block; box-sizing: border-box; white-space: nowrap; cursor: pointer; user-select: none;}
a.b, button.b, input.b {color: #000; border: 1px solid #CCC; background: #FFF;}
a.bd, button.bd, input.bd {color: #FFF; border: 1px solid var(--bt); background: var(--bt);}

.ok {font-size: 14px; padding: 15px; border-left: 5px solid #BBF577; background: #DDFFBB; line-height: 16px;}
.err{font-size: 14px; padding: 15px; border-left: 5px solid #FFCCEE; background: #FFEEF5; line-height: 16px;}
.not{font-size: 14px; padding: 15px; border-left: 5px solid #FFEE99; background: #FFFFCC; line-height: 16px;}
.hint{font-size: 0.9rem; display: none; position: absolute; margin-top: 3px; padding: 12px 20px; color: #FFF; background: rgba(0,0,0,0.75); border-radius: var(--br); box-shadow: 1px 1px 5px rgba(0,0,0,0.2); z-index: 1000;}
div.error {margin-top: 12px; padding: 7px 16px; background: #FFDDDD; color: #CC0000; border-radius: var(--br); display: inline-block; box-shadow: 1px 1px 5px rgba(0,0,0,0.2);}

/*user*/
.up {display: block; width: 50px; height: 50px; border-radius: var(--brb); background: #F5EEE5 no-repeat center/cover; overflow: hidden;}

/*login*/
.lg{display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 280px; border-radius: var(--brb); padding: 20px 35px; background: var(--bg); z-index: 1100;}
.lg div{font-size: 20px; margin: 15px 0; font-weight: bold;}
.lg input[type=text], .lg input[type=password], .lg input[type=submit]{width: 100%; border: 1px solid #CCC; border-radius: var(--br); margin: 5px 0; padding: 10px; background: #FFF; box-sizing: border-box;}
.lg input[type=submit]{margin-top: 15px; color: #FFF; background: var(--bt); border: 0;}
.lg input[type=checkbox]{margin: 15px 0 0 0; width: 20px;}
.lg a.reg{display: block; margin-top: 15px; color: var(--bt);}
.lg a.reg b{font-size: 20px;}
.lg a.for{display: block; margin: 15px 0; color: #777;}
.lg img{float: right; margin: -3px -20px 0 0; padding: 5px; border-radius: 50%; background: #F3EEE0; width: 12px; cursor: pointer;}
img.pwd {width: 18px; position: absolute; margin: 14px 0 0 -33px; background: #FFF; padding: 3px; border-radius: 50%;}

/*wrap FBF5EE*/
div.wrap {display: inline-block; border: 1px solid #DDD; background: rgba(255,255,255,0.5); margin: 0 5px 5px 0; padding: 7px 12px; border-radius: 30px; white-space: nowrap; font-size: 0.9rem;}
div.wrap img {width: 18px; height: 18px; margin: 0 7px -4px -2px; opacity: 0.3;}

/*about*/
div.about {margin: var(--fs) 0; font-size: 0.9rem;}
div.about img {width: 18px; height: 18px; margin-top: 1px; opacity: 0.3; float: left;}
div.about div {margin-left: 25px; line-height: var(--lhb);}

/*who*/
img.act {background: #EEE7DD;}

/*list selector*/
span.sl {font-size: 0.9rem; background: rgba(255,255,255,0.75); border-radius: 30px; padding: var(--pv) var(--ph); white-space: nowrap; cursor: pointer; user-select: none;}
span.sl-act {color: #FFF; background: #8DC600;}

.block {padding: var(--fs); border: 1px solid var(--bd); border-radius: var(--brb); background: var(--bg);}
.blk { padding: var(--fs); border-radius: var(--brb); background: var(--bgs);}

/*foot*/
td.ft {color: #FFF; background: #777; padding: 20px; vertical-align: top; line-height: 2; white-space: nowrap;}
td.ft a {color: #EEE;}
td.ft div {padding: 0 0 18px 0;}
/* lang select*/
div.lng {display: none; margin-right: -30px; padding: 0;}
div.lng a, div.lng span {padding: var(--pv);}
div.lng span {font-weight: bold; background: #888; border-radius: var(--br);}
img.lng {padding: 3px; width: 24px; height: 24px; filter: invert(.9); cursor: pointer;}

/*input*/
input.in{width: 100%; padding: 10px 12px; border: 1px solid #BBB; border-radius: var(--br); box-sizing: border-box;}
input.in-sm{width: 100%; padding: var(--pv) var(--ph); border: 1px solid #BBB; border-radius: var(--br); box-sizing: border-box;}

/*switch*/
input.sw{display: none;}
input.sw+label {width: 50px; height: 25px; border-radius: 25px; background: #DDD0CC; display: inline-block; vertical-align: middle; position: relative; cursor: pointer;}
input.sw+label:after {content: ''; top: 3px; left: 3px; width: 19px; height: 19px; background: #FFF; border-radius: 50%; position: absolute; transition: 0.3s;}
input.sw:checked+label {background: #8DC600;}
input.sw:checked+label:after {left: calc(100% - 3px); transform: translateX(-100%);}

/*checkbox*/
.cb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1px solid #BBB;border-radius:5px;cursor:pointer;position:relative;vertical-align:middle;margin:0 12px 2px 0;}
.cb:checked{background:var(--bt);border-color:var(--bt);}
.cb:checked::before{content:'✔';position:absolute;top:1px;left:3px;color:#FFF;font-size:14px;}