html, body {font-family: Arial; font-size: 15px; letter-spacing: 0.2px; margin: 0; padding: 0; height: 100%;}
body {background: #EEE;}
td {font-size: 15px;}
p,div,form {border: 0; margin: 0; padding: 0;}
img {border: 0;}
table {border: 0; box-sizing: border-box;} /* TODO: border-spacing: 0; after replacing all 'cellspacings' */
input, textarea {font-family: Arial; letter-spacing: 0.2px; outline: none;}
/*table td {padding: 0;} TODO: after replacing all 'cellpaddings' */

h1 {font-size: 24px; font-weight: normal; margin: 0; padding: 0; line-height: 28px;}
h2 {font-size: 16px; color: #333; font-weight: bold; margin: 0; padding: 0; line-height: 20px;}

table.t {border-spacing: 0; border: 0;}
.t td {padding: 0; font-size: 15px; line-height: 20px;}

div.list {display: table; border-spacing: 3px; font-size: 16px; color: #CCC;}
div.list a {display: table-cell; padding: 7px 11px; color: #000; text-decoration: none; border-radius: 5px;}
div.list a:hover {background: #F9F9F7;}
div.list span {display: table-cell; padding: 7px 11px; color: #000; background: #F9F9F7; border: 1px solid #EEE; border-radius: 5px;}
div.list img {width: 16px; margin: 0 0 -3px 5px;}


.normal {font-size: 12px; line-height: 16px;}
.mid {font-size: 13px; line-height: 18px;}
.note {font-size: 12px; color: #CC0000;}
.text {font-size: 14px;}
.selected {background: #CCFF99;}
.hide {display: none;}
.big {font-size: 16px; line-height: 20px;}
.wht {color: #FFF;}
.small {font-size: 11px; color: #000;}
.small-grey {font-size: 13px; color: #808080;}
.er {font-size: 11px; color: #DD0090; margin-top: 3px;}
.green {color: #00AA00;}
.grey {color: #999;}
.middle {vertical-align: middle;}
.center {text-align: center;}
.bTop {border-top: 1px solid #EEE;}

.header {font-size: 24px; color: #333333;}
.driver {font-size: 24px; color: #00AA00;}
.passenger {font-size: 24px; color: #FF6600;}

.header2 {font-size: 16px; font-weight: bold;}
.driver2 {font-size: 16px; color: #00AA00; font-weight: bold;}
.passenger2 {font-size: 16px; color: #FF6600; font-weight: bold;}

.flat {padding: 3px; border: 1px solid #CCC; height: 28px; font-size: 13px; vertical-align: middle;}
.flattxt {padding: 3px; border: 1px solid #CCC; font-size: 14px;}
input[type=submit], input[type=text], input[type=password], input[type=email] {-webkit-appearance: none; border-radius: 0px;} /*mob safari forms fix*/

div.select {padding: 7px; height: 18px; background: #FFF no-repeat 97% 60%; border: 1px solid #CCC; cursor: pointer; overflow: hidden; 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; font-size: 15px;}


table.page {width: 1000px; border-spacing: 0; margin: 0 auto;}
table.tmenu {background: #559900;}
table.page td {padding: 0;}
table.page td.act {background: #77BB00;}
table.page a.logo {display: block; padding: 0 55px;}
table.page a.logo img {width: 90px; height: 24px;}
table.pagew {width: 1000px; background-color: #FFF; border-spacing: 0; margin: 0 auto;}
table.pagew td.pagew {padding: 0; vertical-align: top;}

a.tmenu {padding: 14px 20px; color: #FFF; text-decoration: none; display: block; white-space: nowrap;}
a.tmenu:hover {background: #6BB000;}
a.imenu {display: block; padding: 13px;}
a.imenu img {width: 20px; height: 20px;}
a.imenu:hover {background: #6BB000;}



div.flex {display: flex; flex-flow: column; height: 100%;}
div.flex .head {flex: 0 1 auto;}
div.flex .body {flex: 1 1 auto; width: 1000px; background: #FFF; margin: 0 auto;}
div.flex .foot {flex: 0 1 auto;}

a {color: #0055CC;}

a.small   {font-size: 11px;}


a.menu:link     {color: #777; text-decoration: none;}
a.menu:visited {color: #777; text-decoration: none;}
a.menu:hover   {color: #000; text-decoration: none;}
td.menu:hover  {background: #F9F9F7;}  /*F9F9F3*/
div.menu:hover {background: #FFEECC;} /*FFF7C3*/

a.wh {color: #EEE; text-decoration: none;}
a.lt {color: #999; text-decoration: none;}
a.lt img {margin: 0 0 -3px 5px; width: 15px;}
a.dk {color: #000; text-decoration: none;}

/*dropdown menu: DEPRECATED->.sb*/
.item:hover {background: #FBFAF6;}
a.item {color: #777; text-decoration: none; display: block; padding: 7px 15px 9px 15px; font-size: 14px;}
a.item img {width: 20px; margin: 0 10px -4px 0;}
a.item img.promo {width: 18px; margin: 0 8px -6px -2px; padding: 1px; border: 2px solid #BBDD77; border-radius: 50%;}
a.item div {overflow: hidden;}
div.item {color: #777; padding: 7px; cursor: pointer;}
div.line {margin-top: 5px; padding-top: 5px; border-top: 1px solid #EEE;}
div.dropdown {margin-top: 5px; padding: 5px 0; position: absolute; display: none; width: 160px; background: #FFF; border-radius: 3px; box-shadow: 0 3px 7px rgba(0,0,0,0.3); z-index: 100; overflow: auto;}
div.wide {width: 250px; max-height: 250px; overflow: auto;}

/* 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: 10px; 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: 5px 0 0 27px; color: #999; font-size: 12px; line-height: 16px;}
div.dlItem a {color: #000; text-decoration: none;}

a.black {color: #000;}
a.black:visited {color: #000;}

a.grey {color: #999;}
a.grey:visited {color: #999;}

a.white {color: #FFF; text-decoration: none;}
a.white:visited {color: #FFF;}

.uimg {width: 50px; height: 50px; overflow: hidden; border-radius: 10px; margin: 15px; display: block;}
.uimg img {display: inline; margin-top: -7px; width: 50px;}

a.umenu, a.umenuoff {padding: 9px 25px; text-decoration: none; color: #000; display: block;}
a.umenuoff:hover {background: #CCE5F0;}
a.umenu {font-weight: bold;}
table.umenu  {background: #DDEEF5; border-spacing: 0; border: 1px solid #BBDDF5; border-right: 0;}
td.umenu, td.umenuoff {padding: 0; border-right: 1px solid #BBDDF5; white-space: nowrap; text-align: center;}
td.umenu {background: #BBDDEE;}

a.b, button.b {color: #000; text-decoration: none; padding: 7px 10px; border: 1px solid #DDD; margin-right: 10px; border-radius: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); background: #FFF; white-space: nowrap; user-select: none; font-weight: normal;}
a.b-click {color: #000; text-decoration: none; padding: 7px 10px; border: 1px solid #DDD; margin-right: 10px; border-radius: 3px; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1); background: #F5F5EE; white-space: nowrap; user-select: none;}
input[type=submit].b {font-size: 15px; color: #000; background: #FFF; border: 1px solid #BBB; text-decoration: none; padding: 3px 10px; margin-right: 10px; border-radius: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); white-space: nowrap; cursor: pointer; font-weight: bold; height: 28px;}
a.bd, button.bd {color: #FFF; background: #55AA00; border: 1px solid #449900; text-decoration: none; padding: 7px 10px; margin-right: 10px; border-radius: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); white-space: nowrap; user-select: none; font-weight: normal;}
input[type=submit].bd, button.bd {font-size: 15px; color: #FFF; background: #55AA00; border: 1px solid #449900; text-decoration: none; padding: 3px 10px; margin-right: 10px; border-radius: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); white-space: nowrap; cursor: pointer; font-weight: bold; height: 28px;}

.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: 15px; display: none; position: absolute; margin-top: 3px; padding: 12px 20px; color: #FFF; background: #888; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); z-index: 100;}

.lg{font-size: 20px; display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; border-radius: 10px; padding: 20px 50px; background: #FBFAF6; 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: 5px; margin: 5px 0; padding: 10px; background: #FFF; font-size: 16px; box-sizing: border-box;}
.lg input[type=submit]{margin-top: 15px; color: #FFF; background: #55AA00; border: 0; font-size: 16px;}
.lg input[type=checkbox]{margin: 15px 0 0 0; width: 20px;}
.lg span{font-size: 15px; line-height: 20px;}
.lg a.reg{display: block; margin-top: 15px; color: #55AA00;}
.lg a.for{display: block; margin: 15px 0; color: #777; font-size: 15px;}
.lg img{float: right; margin: -3px -32px 0 0; padding: 5px; border-radius: 50%; background: #F3EEE0; width: 12px; cursor: pointer;}

div.error {margin-top: 10px; padding: 7px 15px; background: #FFDDDD; color: #CC0000; border-radius: 5px; display: inline-block; box-shadow: 1px 1px 5px rgba(0,0,0,0.2);}

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

/*list selector*/
span.sl {background: #FFF; padding: 7px 10px; border-radius: 5px; white-space: nowrap; cursor: pointer; user-select: none;}
span.sl-act {color: #FFF; background: #8DC600;}

/*header*/
.bt {border-top: 1px solid #EEE;}
div.sb {width: 200px; padding: 15px 0; font-size: 14px;}
div.sb a {display: block; padding: 7px 0 9px 15px; color: #777; text-decoration: none;}
div.sb a:hover {background: #FBFAF6;}
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: 50%;}

.lang {padding: 6px 7px 5px 7px;}
span.lang {background: #AAA; color: #FFF; border-radius: 5px;}

div.soc {color: #FFF; line-height: 180%;}
div.soc img {width: 36px; margin: 10px 10px 0 0; border-radius: 50%;}

/*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%);}