html,
body{height:100%;margin:0;padding:0;font-size:13px;font-family:"Roboto", sans-serif}

a,a:hover{cursor:pointer;color:#3174c7;text-decoration:none}
a:hover:hover{color:#c00}

.wrap{margin:0 auto;max-width:1400px}
h1{font-size:1.2em;line-height:24px;font-weight:400;padding:6px}
h3{font-size:1em;font-weight:400;margin:3px 0}

.main-content{display:flex;height:calc(100vh - 40px)}
.table td,.table th{padding:.15rem}


.footer{position:fixed;bottom:0;left:0;z-index:99;width:100%;padding:8px 20px;
    background:rgba(245,245,245,1);border-top:1px solid #888;text-align:center}
.dummy{width:100%;padding:2em 0}
.logIn{position:relative;display:block;width:280px;margin:5em auto;padding:24px}
.logIn td{padding:2px}
.logIn input{border:1px solid #888}



.topMenu{position:static;width:auto;height:40px;margin:0;padding:1px;background:#555;z-index:999}
.topMenu a{color:#ccc}
.topMenu a:hover{color:#fff}
.topMenu ul{display:block;list-style:none;margin:0}
.topMenu li{display:inline-block;line-height:24px;margin:6px}
.topMenu li:last-child{float:right;padding-right:30px}
.topMenu a:before {transform:scale(.75);}

.subMenu ul{display:block;list-style:none;margin:0;padding:0}
.subMenu li{display:inline-block;line-height:30px}
.subMenu li a{display: block; min-width:98px;text-align:center;}
.subMenu li.chk {background:aliceblue;border-bottom:1px solid #aaa}
.subMenu li:hover{background:#f8f8f8;border-bottom:1px solid #ddd}
.subMenu a{color:#333}
.subMenu li.ok{position:absolute;background:red;padding:0 16px;color:white;margin-top:-36px;border-bottom: 1px solid #fff}


.dispatch {position:relative}
.dispatch table th{background:aliceblue;font-weight:300 !important}
.dispatch td:nth-child(2),
.dispatch td:nth-child(4){text-align:left !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.dispatch td:nth-child(2) a{color:#333}
.dispatch td:nth-child(10) a{display:block;margin-left:8px}
.dispatch .blue-dir:before{margin:3px 3px 3px 0}
.dispatch .blue-edit:before{float:right}
.dispatch td img{height:48px;width:auto}
.dispatch td a.blue-edit{line-height:24px}
.dt-scroll-body{min-height:70vh}

.load{width:980px}
.load table{width:100%}
.load th{text-align:right !important;font-weight:400}
.load td{
    text-align:left !important;
    margin-bottom:6px;
    height:36px;
    box-sizing:border-box;
    padding:6px 0px 6px 6px;
    background:rgb(255, 255, 255);
    border-radius:6px;
    border-width:1px;
    border-style:solid;
    border-color:rgb(136, 136, 136);
    border-image:initial;
}
.load td input,
.load td select,
.load td textarea{font-size:1.1em;border:none !important}
.load .notes{text-align:left !important;color:#333}
.load input.ix,
.load select.ix,
.load textarea.ix,
.load .dx{
    height:auto;
    width:99%;
    border-width:initial;
    border-style:none;
    border-color:initial;
    border-image:initial;
    padding:0px;
    margin:0px;
    outline:none;
}
.load .btn{display:inline-block;margin-left:36px}
.btn{padding:6px 20px;background:#3174c7;margin:4px;color:#fff;border:none;border-radius:5px;cursor:pointer}

.load > p{margin:0 116px;font-size:1.2em;line-height:28px}
.load a {display:inline-block;color:#333}
.load .blue-dir:before{float:right;margin-left: 8px}

.att2{background:#ffe6e6}
.add{color:#c00;border:none;background:white;line-height:22px;cursor:pointer}

.ui-datepicker.ui-widget.ui-widget-content{font-size:.85em}
.ui-timepicker-div .ui-widget-header{margin-bottom:8px}
.ui-timepicker-div dl{text-align:left}
.ui-timepicker-div dl dt{float:left;clear:left;padding:0 0 0 5px}
.ui-timepicker-div dl dd{margin:0 10px 10px 40%}
.ui-timepicker-div td{font-size:90%}
.ui-tpicker-grid-label{background:none;border:none;margin:0;padding:0}
.ui-timepicker-rtl{direction:rtl}
.ui-timepicker-rtl dl{text-align:right;padding:0 5px 0 0}
.ui-timepicker-rtl dl dt{float:right;clear:right}
.ui-timepicker-rtl dl dd{margin:0 40% 10px 10px}

#email{position:absolute;bottom:0;right:5%;background:#fff;border:1px solid #eee;border-radius:4px;box-shadow:0 2px 2px 2px #efefef;z-index:99}
#email p{margin:0;padding:4px 4px 4px 12px;line-height:24px;font-weight:700;background:#efefef}
#email p em{float:right;transform:scale(.75);cursor:pointer}
#email .email{
    display:block;
    margin:0 auto;
    width:720px;
    padding: 0 16px;
    background:white;
}
#email table{width:100%}
#email table td{padding:2px;border-top:1px solid #ddd}
#email table tr:first-child td{border-top:none}
#email input{width:480px;border:none}
#email textarea{width:530px;height:24em;border:none}
#email input:focus,
#email textarea:focus{outline:none;border:none;box-shadow:none}


.map-container{flex-grow:1;height:calc(100vh - 40px);border-left:1px solid #aaa}

.control-panel{
  position:static;
  width:240px;
  padding:16px;
  box-shadow:0 2px 4px rgba(0, 0, 0, 0.5);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  z-index:99;
}
.control-panel .control-box{
	margin-bottom:6px;
    max-width:240px;
	height:28px;
	padding:6px;
	background:#fff;
	border-radius:6px;
	border:1px solid #888;
    box-sizing:border-box;
    overflow:hidden;
    position:relative
}
.control-panel input{
	border:none;
    padding:0px;
    margin:0px;
    height:auto;
    outline:none;
    background:transparent;
}
.control-panel input[type='submit']{
    float:right;
    padding:4px 12px;
    border:1px solid #888;
    border-radius:5px;
    cursor:pointer
}
.address-input{width: 99%}

.toprow span{float:right;cursor:pointer}


.mbox{position:relative;min-height:4em}
.mbox .blue-dir{position:absolute;right:0;top:0}
.mbox .blue-dir:before{}

.route-info{padding:0;margin:0}
.route-info p{margin:0}
.route-info p em{color:#3174c7;font-style:normal;font-weight:700}
.route-info ul{list-style:none;margin:4px 0 12px 0;padding:0}
.route-info li{max-width:250px;overflow:clip}



#pinInfo{margin-top:2em}
#pinInfo h2 {font-size:1.5em;font-weight:500;margin:0;padding:0}
#pinInfo div {line-height:22px;border:1px solid #ccc;border-radius:3px;margin-bottom:4px;background:ghostwhite}
#pinInfo h3 {font-size:1.2em}
#pinInfo img {height:auto;width:240px}
#pinInfo .grey-close {float:right;cursor:pointer}
#pinInfo .useit{text-align:right;line-height:24px}
#pinInfo a .blue-dir:before{margin-left:8px;float:right}
#pinInfo a:hover .blue-dir:before{background-position:-23px -72px}
#pinInfo div:before {transform:scale(.75)}

.orderList > div{display:inline-block;vertical-align:top}
.docs{position:relative;width:200px;min-height:320px;padding:4px}
.docs h3{padding:3px;margin:0 0 1em}
.docs input{
    display: inline-block;
    content: '';
    width: 48px;
    height: 48px;
    margin: 8px 2px;
    text-indent: -10000px;
    background-image: url(../ico/upload.png);
    background-repeat: no-repeat;
    cursor: pointer;
}
.docs form{display:inline-block}
.orderList a{line-height:24px}
.docs a > img{height:48px;width:auto;margin:1px;border:2px solid #888}
.docs span{display:inline-block;position:relative} 
.docs span i {
    display: block;
    position: absolute;
    width: 32px;
    top: 20px;
    left: 4px;
    color: white;
    font-size: 1.1em;
    font-style: normal;
    text-align: center;
}



.txt{cursor:pointer}
#download2CSV{color:#3174c7;cursor:pointer}
#download2CSV img{height:1.4em;vertical-align:text-bottom}
#download2CSV:hover{color:#900}




[class^="grey-"]:before,
[class^="red-"]:before,
[class^="blue-"]:before,
[class^="black-"]:before,
[class^="white-"]:before,
[class*=" grey-"]:before,
[class*=" red-"]:before,
[class*=" blue-"]:before,
[class*=" black-"]:before,
[class*=" white-"]:before{
	content:' ';
	display:block;
	float:left;
	width:24px;
	height:24px;
	background-image:url('../ico/map.png');
	background-repeat:no-repeat;
}

.grey-close:before {background-position:0 0}
.red-close:before  {background-position:-24px 0}
.blue-close:before {background-position:-48px 0}
.black-close:before{background-position:-72px 0}
.white-close:before{background-position:-86px 0}

.grey-search:before{background-position:0 -24px}
.red-search:before {background-position:-24px -24px}
.blue-search:before{background-position:-48px -24px}
.black-search:before{background-position:-72px -24px}
.white-search:before{background-position:-86px -24px}

.grey-share:before {background-position:0 -48px}
.red-share:before  {background-position:-24px -48px}
.blue-share:before {background-position:-48px -48px}
.black-share:before{background-position:-72px -48px}
.white-share:before{background-position:-96px -48px}

.grey-dir:before   {background-position:0 -72px}
.red-dir:before    {background-position:-24px -72px}
.blue-dir:before   {background-position:-48px -72px}
.black-dir:before  {background-position:-72px -72px}
.white-dir:before  {background-position:-96px -72px}

.grey-map:before   {background-position:0 -96px}
.red-map:before    {background-position:-24px -96px}
.blue-map:before   {background-position:-48px -96px}
.black-map:before  {background-position:-72px -96px}
.white-map:before  {background-position:-96px -96px}

.grey-save:before  {background-position:0 -120px}
.red-save:before   {background-position:-24px -120px}
.blue-save:before  {background-position:-48px -120px}
.black-save:before {background-position:-72px -120px}
.white-save:before {background-position:-96px -120px}

.grey-menu:before  {background-position:0 -144px}
.red-menu:before   {background-position:-24px -144px}
.blue-menu:before  {background-position:-48px -144px}
.black-menu:before {background-position:-72px -144px}
.white-menu:before {background-position:-96px -144px}

.grey-car:before   {background-position:0 -168px}
.red-car:before    {background-position:-24px -168px}
.blue-car:before   {background-position:-48px -168px}
.black-car:before  {background-position:-72px -168px}
.white-car:before  {background-position:-96px -168px}

.grey-truk:before {background-position:0 -192px}
.red-truk:before  {background-position:-24px -192px} 
.blue-truk:before {background-position:-48px -192px} 
.black-truk:before{background-position:-72px -192px}
.white-truk:before{background-position:-96px -192px}

.grey-point:before {background-position:0 -216px}
.red-point:before  {background-position:-24px -216px} 
.blue-point:before {background-position:-48px -216px} 
.black-point:before{background-position:-72px -216px}
.white-point:before{background-position:-96px -216px}

.grey-phone:before {background-position:0 -240px}
.red-phone:before  {background-position:-24px -240px} 
.blue-phone:before {background-position:-48px -240px} 
.black-phone:before{background-position:-72px -240px}
.white-phone:before{background-position:-96px -240px}

.grey-clock:before {background-position:0 -264px}
.red-clock:before  {background-position:-24px -264px} 
.blue-clock:before {background-position:-48px -264px} 
.black-clock:before{background-position:-72px -264px}
.white-clock:before{background-position:-96px -264px}

.grey-file:before  {background-position:0 -288px}
.red-file:before   {background-position:-24px -288px} 
.blue-file:before  {background-position:-48px -288px} 
.black-file:before {background-position:-72px -288px}
.white-file:before {background-position:-96px -288px}

.grey-cal:before   {background-position:0 -312px}
.red-cal:before    {background-position:-24px -312px} 
.blue-cal:before   {background-position:-48px -312px} 
.black-cal:before  {background-position:-72px -312px}
.white-cal:before  {background-position:-96px -312px}

.grey-sms:before   {background-position:0 -336px}
.red-sms:before    {background-position:-24px -336px} 
.blue-sms:before   {background-position:-48px -336px} 
.black-sms:before  {background-position:-72px -336px}
.white-sms:before  {background-position:-96px -336px}

.grey-mail:before  {background-position:0 -360px}
.red-mail:before   {background-position:-24px -360px} 
.blue-mail:before  {background-position:-48px -360px} 
.black-mail:before {background-position:-72px -360px}
.white-mail:before {background-position:-96px -360px}

.grey-user:before  {background-position:0 -384px}
.red-user:before   {background-position:-24px -384px} 
.blue-user:before  {background-position:-48px -384px} 
.black-user:before {background-position:-72px -384px}
.white-user:before {background-position:-96px -384px}

.grey-list:before  {background-position:0 -408px}
.red-list:before   {background-position:-24px -408px} 
.blue-list:before  {background-position:-48px -408px} 
.black-list:before {background-position:-72px -408px}
.white-list:before {background-position:-96px -408px}

.grey-edit:before  {background-position:0 -432px}
.red-edit:before   {background-position:-24px -432px} 
.blue-edit:before  {background-position:-48px -432px} 
.black-edit:before {background-position:-72px -432px}
.white-edit:before {background-position:-96px -432px}

.grey-info:before  {background-position:0 -456px}
.red-info:before   {background-position:-24px -456px} 
.blue-info:before  {background-position:-48px -456px} 
.black-info:before {background-position:-72px -456px}
.white-info:before {background-position:-96px -456px}