/* Cross browser reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0; border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {	display: block; }
body {line-height: 1;overflow-x:hidden;} ol,ul { list-style: none; } blockquote,q {quotes: none; } blockquote:before,blockquote:after,q:before,q:after{content: ''; content: none; }
table {	border-collapse: collapse; border-spacing: 0; }
b,strong { font-weight:bold; }

/* Title bar */
div#tb {background-color: #eee; height: 64px; height: 64px; display: table; width: 100%; }
div#tb .title { text-align: center; font-size: 24px;display: table-cell; vertical-align: middle; font-weight: bold; }
div#tb img { width: 64px; height: 64px; float: left;}

/* Footer, on bottom of page always */
html { height: 100%; box-sizing: border-box; }
*,*:before,*:after { box-sizing: inherit; }
body { position: relative; padding-bottom:45px; min-height: 100%; }
div#ftr { position: absolute; right: 0; bottom: 0; width: 100%; height: 28px;
 overflow: hidden; font: 9px Verdana,sans-serif; line-height: 12px; text-align: center; 
 background-color: #eee; }
div#ftr a { color: navy; }
div#ftr ul,li { list-style-type:none;display: inline-block; }
div#ftr ul li + li:before { content: "\00a0|\00a0"; }

/* Small and big pretty content box, plus invisible */
div.cbx { 
 margin: 20px auto; width: 300px; 
 background-color: #ebebeb;
 border: 1px gray ridge;
 padding: 8px;
 text-align: left;
}
div.big { width: 420px; }
div.zp { padding: 0px !important; }
div.inv { background-color: transparent; border: 0px; }

div.cbx ul, ul li { list-style: disc inside; }
div.cbx ul li { display: list-item; }
div.cbx h2 { width: 100%; font-size: 24px; text-align: center; padding-bottom: 4px; }
div.cbx h3 { width: 100%; font-size: 18px; font-weight: bold; text-align: center; padding-bottom: 4px; padding-top: 4px; margin-top: 4px; }

div.cbx table { width: 100%; }
div.cbx table td { width: 100%; font-size: 14px; }
div.cbx table select,div.cbx table input, div.cbx table input[type=date] { width: 100%; font-size: 12px; padding: 0px; }
div.cbx table p,div.cbx table.dsp td { padding: 5px; font-weight: bold; }
div.cbx table th,td.vtd div, div.thdr { color: #FFF; background-color: #555; white-space: nowrap; text-align: right;font-weight: bold; min-width: 100px; font-size: 14px; }
div.thdr { font-size: 1.4rem; text-align: center; padding: 0.5em; }

div.cbx .shade { background-color: #555; color: #FFF;} 
div.smh table th { min-width: 60px; }
div.lgh table th { min-width: 125px; font-size: 13px; }
div.big div.bcol { width: 50%; display: inline-block; padding: 0px 0px; vertical-align: top; }
div.big div.acol { width: 100%; clear: both; }
div.vrt table th { text-align: center; min-width: 0px; padding: 2px 4px; }
div.vrt table td { text-align: center; }
div.vrt table tr:nth-child(even) { background-color: #ddd; }
div.vrt table tr:nth-child(odd) { background-color: #fff; }
div.two table tr:nth-child(4n), div.two table tr:nth-child(4n-3) {background-color: #ddd; }
div.two table tr:nth-child(4n-2), div.two table tr:nth-child(4n-1) {background-color: #fff; }
div.two table tr:nth-child(4n-1), div.two table tr:nth-child(4n-3) { border-bottom: 1px solid #000; }
div.tri table tb { width: 30% !important; }
div.full { max-width: 99%; width: auto !important; }
div.hscr { overflow-x: auto; max-width: 99%; width: auto !important; margin: auto; }
div.hscr table, div.hscr table td { width: auto !important; margin: 0 auto; font-size: 14px; }
div.hscr table th { white-space: normal; width: 1px; vertical-align: bottom; }
div.hscr input, div.hscr select { width: 120px !important; vertical-align: middle; }
div.hscr input[type='checkbox'] { width: auto !important; }
div.vl table td { border-right: 1px solid #000; }
div.vl table tr { border: 1px solid #000; }
div.hnh table td { width: 50% !important; }

/* Dispatch Portal */

div.checkin { background-color: cyan; border: 2px solid black; text-align: center; vertical-align: middle; padding: 3px; }
div.checkin.warning { background-color: red; border: 3px solid black; }

div.env { overflow: auto; max-height: clamp(60vh, 73vh - 8vw, 70vh); }
div.env.short { max-height: 15vh; }
div.env table { table-layout: fixed; border: 1px solid #000;  }
div.env table th,div.env table td { white-space: nowrap; border-bottom: 1px solid #000; border-right: 1px solid #000; padding: 5px; width: 1px; }
div.env tr#firstrow { position: sticky; top: 0px; border-bottom: 1px solid #000; z-index: 2; }
div.env table th { background-color: grey; color: white; text-align: left;  }
div.env table tr:nth-child(even) { background-color: #ddd; }
div.env table tr:nth-child(odd) { background-color: #fff; }
div.env table td:first-child { position: sticky; left: 0px; background-color: grey;  border: 1px solid #000; z-index: 1; padding: 0px; vertical-align: middle; }
div.env table td { border-bottom: 1px solid #000; border-right: 1px solid #000; }
div.env table td.right { text-align: right; }
div.env table th.right { text-align: right; vertical-align: middle; }
div.env table tr.editrec { background-color: yellow; }
div.env table tr.editrec input { background-color: yellow; }

div.envopt table th, div.envopt table td { white-space: nowrap; border-bottom: 1px solid #000; border-right: 1px solid #000; padding: 5px; width: 1px; }
div.envopt table th { background-color: grey; color: white; text-align: left;  }
div.envopt.right table th { text-align: right; }
div.envopt { padding: 0.33rem; }
div.envopt table { border: 1px solid #000; }
div.envopt select, div.envopt input[type="text"] { width: 8rem; }
div.envopt input[type="number"] { width: 5rem; }
div.envopt input[type="number"].crn { width: 7rem; }

/*div.env table tr.highlite { background-color: tan; border: 4px solid #000; }*/
table tr.highlite { background-color: tan !important; border: 4px solid #000; }

div.env { position: relative; }
div.env table tr.nada td { border: 2px dashed #888; height: 6em; background-color: #eee; }
div.env table tr.nada td span { position:sticky; left: 50px; margin: 0px auto; top: 3em; border: 2px dashed #888; padding: 1em;  }

div.env table td:first-child * { vertical-align: middle; }
div.env a > img { height: 2em; }
div.dispaction { margin: 4px; display: flex; }
div.dispaction .subbutt, a.rep { height: 5.5em; width: 6.5em; padding: 2.5em 1px 1px 1px; margin: 0.25em; 
           font-size: clamp(8px, 0.6vw + 5px, 64px) !important; white-space: normal;
           font-family: 'Verdana',Arial,sans-serif; display: inline-block; text-align: center;
           background-repeat: no-repeat; background-position: top; background-size: 2.5em;
           background-color: #ddd; border-radius: clamp(5px, 0.6px + 2px, 15px); border: 2px outset #ddd;
           color: black; text-decoration: none; cursor: pointer; line-height: normal;
           overflow: clip;
}

a.rep { background-size: 1.4em; position: relative; background-position: center 1.1em; background-color: #d7d7f0; } 
a.rep span.lbl { position: absolute; top: 0em; right: 2.8em; background-position: center 0.5em;: 0px; padding: 0.10em;  background-color: #aad; color: #000; font-size: 0.7em; }
a.rep:first-of-type { margin-left: 1em; }
div.dispaction .subbutt:hover, a.rep:hover { background-color: #ccf; border: 2px outset #ccf; }
div.dispaction .subbutt:active, a.rep:active,
div.dispaction .subbutt:focus, a.rep:focus { background-color: #dde; border: 2px outset #000; }
div.dispaction .subbutt:disabled, div.dispaction .subbutt.dis, a.rep:disabled { cursor: not-allowed; border: 2px solid #eee; background-color: #eee;
  color: #777; font-weight: normal; }
div.dispaction .subbutt.sm { width: 8.5em; }

#credtog:checked ~ .dispaction label#credlab, #sltog:checked ~ .dispaction label#splitlab,
#paytog:checked ~ .dispaction label#paylab { background-color: #ccf; border: 2px outset #000; font-weight: bold; }
div#dispcredit, div#dispsplit, div#disppay { display: none; background-color: #ccf; }
#credtog:checked ~ div#dispcredit, #sltog:checked ~ div#dispsplit, #paytog:checked ~ div#disppay { display: block; }

input.hid { display: none; }
input.save { border-color: yellow !important; background-image:url('/images/icon_save.svg'); font-weight: bold; }
input.action2 { font-weight: bold; font-size: 1.2em; }

/* Dispatcher portal icons */
div.dispaction a.rep { background-image:url('/images/icon_report.svg'); }
div.dispaction input.New { background-image:url('/images/icon_new.svg'); }
div.dispaction input.Book { background-image:url('/images/icon_truck.svg'); }
div.dispaction input.Book:disabled { background-image:url('/images/icon_truck_dis.svg'); }
div.dispaction .sel.Clone { background-image:url('/images/icon_clone.svg'); }
div.dispaction .sel.Clone:disabled, div.dispaction .sel.Clone.dis { background-image:url('/images/icon_clone_dis.svg'); }
div.dispaction .sel.Credit { background-image:url('/images/icon_credit.svg'); }
div.dispaction .sel.Credit:disabled, div.dispaction .sel.Credit.dis { background-image:url('/images/icon_credit_dis.svg'); }
div.dispaction .sel.Bill, div.dispaction .sel.Pay { background-image:url('/images/icon_bill.svg'); }
div.dispaction .sel.Bill:disabled, div.dispaction .sel.Pay.dis { background-image:url('/images/icon_bill_dis.svg'); }
div.dispaction input.Close { background-image:url('/images/icon_closedate.svg'); }
div.dispaction input.Close:disabled { background-image:url('/images/icon_closedate_dis.svg'); }
div.dispaction input.Edit { background-image:url('/images/icon_edit.svg'); }
div.dispaction input.Edit:disabled { background-image:url('/images/icon_edit_dis.svg'); }
div.dispaction input.Combine { background-image:url('/images/icon_merge.svg'); }
div.dispaction input.Combine:disabled { background-image:url('/images/icon_merge_dis.svg'); }
div.dispaction input.Delete { background-image:url('/images/icon_delete.svg'); }
div.dispaction input.Delete:disabled { background-image:url('/images/icon_delete_dis.svg'); }
div.dispaction input.Tender { background-image:url('/images/icon_tender.svg'); }
div.dispaction input.Tender:disabled { background-image:url('/images/icon_tender_dis.svg'); }
div.dispaction input.Request { background-image:url('/images/icon_request.svg'); }
div.dispaction input.Request:disabled { background-image:url('/images/icon_request_dis.svg'); }


div.flex { display: flex; }

div.dispreports, div.dispreports a { margin: 4px 4px 4px 12px; }

div.dispreportopts, div.dispreportopts input { margin: 4px; }

div.commfull { display: none; }
div.mesgfull { display: none; }

div.image { width: 90%; height: 90%; }
img.image { width: 100%; height: 100%; }
embed.image { width: 100%; height: 100vh; }


div.dispfilt {border: 1px solid #000; background-color: #ddd; }
div.dispfilt label {margin: 0 10px 0 10px; white-space: nowrap; }
div.dispfilt input[type=submit] {padding: 1px; margin: 4px; }
div.dispfilt { background-image: url('/images/icon_filter.svg'); 
  background-size: 1em; background-position: 0.5em; background-repeat: no-repeat; padding-left: 1.5em; }

div.dispfiltcrit { margin: 4px 4px 4px 4px; background-color: #f2f2f2; padding: 4px 4px 4px 4px; }
div.dispfiltcrit input { margin: 4px 4px 4px 4px; }
div.dispfiltcrit select { margin: 4px 4px 4px 4px; }
/* div.dispfiltcrit input.datetime { width: 140px; } */


div.disphist { margin: 4px 4px 4px 4px; background-color: #f2f2f2; padding: 4px 4px 4px 4px; }
div.disphist select { margin: 4px 4px 4px 4px; }
div.disphist input.date { width: 140px; }   
div.disphist input { width: 100px; margin: 4px 4px 4px 4px; }

div.displb { margin: 4px 4px 4px 4px; background-color: #f2f2f2; padding: 4px 4px 4px 4px; }
div.displb select { margin: 4px 4px 4px 4px; }
/* div.displb input.date { width: 85px; } */
div.displb label { margin: 4px 4px 4px 4px; }

/*
div.envdata input.date {width:110px;}
div.envdata input.time24 {width:60px;}
div.envdata input.time {width:70px;}
*/
div.envdata {border: 3px solid #fff; background-color: #ddd; }
div.envdata div {border: 1px solid #808080; background-color: #f2f2f2; padding: 3px; }
div.envdata label { padding: 3px; }

div.map { width: 100%; height: 400px; }

div.serverinfo { background-color: yellow }
ul.idx li { font-family:'Verdana',Arial,sans-serif; padding: 1px;}
ul.idx li a { text-decoration: none; color: #000; }
/* End dispatcher */

/* View Trip table */
div.trip th:nth-child(1),div.trip td:nth-child(1) { min-width: 25px; width: 25px; }
div.trip table tr:nth-of-type(1n+2) th { vertical-align: top; font-size: 22px; padding-top: 20px; }
div.trip tr.sep { border-top: 8px solid #555; }
div.trip tr.alt { background-color: #ddd; } 
div.trip table th { text-align: center; vertical-align: bottom; }
div.trip tr.stop td:nth-child(2) { vertical-align: top; font-weight: bold; }
div.trip tr.stop td:nth-child(3) { white-space: nowrap; vertical-align: top; }
div.trip tr.pd td:nth-child(1) { vertical-align: top; font-size: 12px; }
div.trip td { padding: 2px; }
div.trip { max-width: 1000px; }

div.trips td { vertical-align: middle; }
div.trips td:nth-of-type(1) { vertical-align: middle; }

/* Qualification status table */
div.qls td:nth-child(2) { white-space: nowrap; }

/* Contacts table */
div.cnt td:nth-child(4) input { width: 180px !important; font-size: 12px !important; }
div.cnt td:nth-child(5) input { width: 150px !important; }
div.cnt td:nth-child(6) input { width: 60px !important; }

/* Available equipment table */
div.ave td, div.ave th { min-width: 0px; width: 0px; white-space: nowrap; }

/* Rate quote table */
div.rtq td, div.rtq th { min-width: 0px !important; width: auto !important; white-space: nowrap; text-align: right; }
div.rtq td:nth-child(1),div.rtq th:nth-child(1) { text-align: center; } 
div.rtq td:nth-child(2),div.rtq th:nth-child(2) { text-align: left; }

/* Available loads table */
div.avl td:nth-child(3),div.avl td:nth-child(6) { white-space: nowrap; text-align: left; }
div.avl td:nth-child(7),div.avl td:nth-child(8) { white-space: nowrap; }
div.avl a { margin-top: 2px; }

/* Requested loads table */
div.rql td:nth-child(1) { white-space: nowrap; }
div.rql td:nth-child(4),div.rql td:nth-child(7) { white-space: nowrap; }

/* Delivered Loads */
div.dll td:nth-child(4),div.dll td:nth-child(9) { width: 120px !important; }
div.dll td:nth-child(14) { white-space: nowrap; }

/* Intransit loads */
div.intsum td:nth-child(5) { white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; max-width:125px; text-align: right;}
div.intsum td:nth-child(6) { white-space: nowrap; text-align: left; }
div.intsum td:nth-child(7) { padding-left: 2px; }

div.int td:nth-child(4), div.int td:nth-child(7) { white-space: nowrap; }
div.int td, div.int th { font-size: 14px !important; }
div.int td:nth-child(2) { font-weight: bold; }
div.int td:nth-child(10) .button { margin-bottom: 4px; }
table.sorted th { cursor: pointer; }
input.exp { position: absolute; clip: rect(0, 0, 0, 0);}

/* clear previous formats */
div.clr table td { border-left: 0px; border-right: 0px; text-align: left; vertical-align: middle; }
div.clr td:nth-child(4), div.clr td:nth-child(6) { white-space: normal;}
div.clr table th { white-space: nowrap; vertical-align: middle;  text-align: right; }
div.clr table tr { background-color: transparent !important; border: 0px; }
div.clr input, div.clr select { width: 100% !important; }

/* General fonts, colors */

h1 { font-size: 28px; font-weight: bold; padding: 15px 5px; margin: 0 auto; text-align: center; }

.shaded { background-color: yellow !important; }
.bold { font-weight: bold; }

/* A line/paragraph of pretty text */
div.prt { font-size: 14px; font-family: Arial; text-align: justify; }
div#pg div.prt, div#pg p { padding: 5px 20px; line-height: 18px; font-size: 16px; text-align: center;}
div.prt p { padding-bottom: 10px; }

form.icon input + img { position: absolute; width: 14px; height: 14px; left: 5px; top: 4px; }
form.icon { position: relative; }

/* Labels and fields as columms, sub as a 2col submit button */
div.clbl,div.cfld { width: 120px; display: inline-block; padding-right: 5px; padding-bottom: 5px; }
div.clbl { margin-left: 20px; font-weight: bold; text-align: right; }
div.cfld { margin-right: 20px; }
div.cfld input { width: 100%; }
div.csub { width: 290px; text-align: center; margin: 5px;}
div.csub input, div#pg input { font-size:16px; font-family:'Verdana',Arial,sans-serif; }

.button { 
 background-color: #ccc; border-radius: 5px; border: 1px solid #555; padding: 3px 5px; margin: 8px 3px; 
 position: relative; top: 0px; line-height: 22px; cursor: pointer; white-space: nowrap; 
}

a.button { text-decoration: none; }
.button.disabled { color: #888; cursor: not-allowed; }
.button.icon { padding-left: 18px; }
.button > img { width:14px; height: 14px; position: absolute; left: 2px; top: calc(50% - 7px); }

td .button { display: block; margin: 0px; text-align: center; }

.error { color: #D11 !important; font-weight: bold; background-color: pink !important; }
div.cbx .error,div.bbx .error,div.error { border: 1px solid #F44 !important; background-color: #FDD !important;
   text-align: center; color: #000; font-size: 18px; margin-bottom: 3px; }
input.error { text-align: left !important; }

div.loading { display: none; margin: 0px 5px; height: 20px; width: 20px; 
  background-image: url('../images/loading.gif'); background-repeat: no-repeat;
  background-size: 20px; background-position: center; }

div.loading.static { position: absolute; top: 45px; right: 5px; }

div.rl p a { font-size: 28px; }

/* Chat box */

.chat .msg { background-color: #ccc; border-radius: 15px; padding: 10px; margin: 3px; }
.chat .msg.unread { font-weight: bold; background-color: #bcf; }
.chat .msg.unread span:nth-of-type(2)::after { content: 'New! '; float: right; font-size: 15px; color: #847418; }
.chat .msg.mine  { text-align: right; }

.chat .msg span:nth-of-type(1) { font-size: 20px; font-weight: bold; display: block; }
.chat .msg span:nth-of-type(2) { font-size: 15px; display: block; border-bottom: 1px solid #000; text-align: left; }
.chat .msg span:nth-of-type(3) { display: block; padding: 3px; }
.chat .msg span:nth-of-type(3), .chat textarea { font-family:'Verdana',Arial,sans-serif; font-size: 17px; }
.chat .cc { height: calc(100% - 90px); overflow-y: scroll; }

div.int .chat { right: 5px; }
div#cspc { height: 400px; display: none; }

.chat textarea { width: 98%;  max-width: 98%; border-radius: 4px; margin-bottom: 30px; min-width: 100px; 
  position: absolute; bottom: 0px; height: 60px; max-height: 60px; }
div.sbmt { text-align: center; position: absolute; bottom: 4px; left: 0px; text-align: center; width: 100%; }
.sbmt input[type="submit"] { width: 75px; margin-left: 5px; }
.derp { position: absolute; bottom: 4px; left: calc(50% - 37px); }
.chat label.close { position: absolute; top: 3px; right: 3px; font-size: 22px; font-family:'Verdana',Arial,sans-serif; 
  height: 24px; width: 30px; border-radius: 10px; background-color: #000; 
  text-align: center; color: #fff; font-weight: bold; cursor: pointer; }
.chat { text-align: left; position: relative; }

label[for="chtt"].icon { position: absolute; bottom: 50px; right: 0px; cursor: pointer;
    width: 64px; height: 64px; background-color: #FFF;
    border: 1px solid #000; border-right: 0px; border-radius: 5px; }
label[for="chtt"].icon img { height: 64px; width: 64px; }


input[type="checkbox"].chtt { position: absolute; clip: rect(0, 0, 0, 0); }
div.chat { width: 0px; height: 0px; position: absolute; overflow: hidden; z-index: 5; }
input[type="checkbox"].chtt:checked ~ div.chat { position: absolute; width: 400px; height: 400px; 
   border: 1px solid #000; border-radius: 5px; padding: 4px; overflow-y: hidden;
   background-color: #FFF; }

label.button { line-height: 1em; }
label.chttog img { float: left; width: 18px; height: 18px; top: calc(50% - 9px); }
label.chttog.new { animation: new 10s linear infinite; }
label.chttog.new img { top: 0px; }

@keyframes new { 0%,56% {background-color: #aaf; }
 60%,70% {background-color: #e9ce35; } 
75%,100% {background-color: #aaf;} }

.chg, .chat .msg.chg { background-color: #FF0; animation: chg 5s linear 1; }
@keyframes chg { 0,10% { background-color: #ccc; }
 50% { background-color: #FF0; }
 60% { background-color: #fef7c8; }
 75%,100% { background-color: #FF0; } }

@media (max-height: 450px) or (max-width: 450px) {
 input[type="checkbox"].chtt:checked ~ div.chat { height: calc(100% - 33px); 
   position: fixed; top: 0px; left: 0px; width: 100%; max-width: 100%; }
}


/* Menu */
#navt { position: absolute; clip: rect(0, 0, 0, 0);}
label[for="navt"].icon { float:right; top: 0px; right: 0px; cursor: pointer;
    width: 64px; height: 64px; padding: 5px; background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'><rect width='22' height='5' y='5' x='5'/><rect y='23' width='22' height='5' x='5'/><rect y='14' width='22' height='5' x='5'/></svg>"); }
label[for="blank"].icon { float:right; top: 0px; right: 0px; width: 0px; height: 0px; padding: 5px; }
.nav { height: 32px; position: fixed; top: 0; right: 0; bottom: 0; width: 0px; }
#pg { min-width: 100%; background-color: #fff; position: relative; top: 0; bottom: 100%; right: 0; }
div#tb { position: relative; top: 0px; right: 0px;  }
#navt:checked ~ #pg,#navt:checked ~ #ftr,#navt:checked ~ #tb { right: 200px; color: #aaa; }
#navt:checked ~ #tb .nav { height: 100%; width: 200px;}

/* Menu styling */
.nav { background: #111; padding-top: 10px; font-family:'Verdana',Arial,sans-serif; overflow-x:hidden; }
.nav li,.nav label[for="navt"] { display: block; width: 180px; min-height: 25px; font-size: 18px; margin: auto; text-align: center; padding: 3px; }
.nav li:hover,.nav label[for="navt"]:hover { background-color: #448 }
.nav li a { color: #ccf;text-decoration: none; }
.nav label[for="navt"] { margin-top: 20px; cursor: pointer; font-size: 14px; height: 20px; }
.nav p,div.uname { text-align: center; font-size: 16px; color: #ddd; width: 180px; margin: auto; }
.uname { font-weight: bold; font-size: 18px; color: #fff; padding-bottom: 10px; }
.nav div.spc { height: 20px; }

ul.mm li { display: inline-block; padding: 4px 14px; text-align: center; line-height: 1.1em;
      font-family:'Verdana',Arial,sans-serif; font-size: 16px; }

ul.mm { width: 100%; text-align: center; background-color: #e4e4e4; }
ul.mm li:hover { background-color: #ccd; }
ul.mm li a { color: #000080; text-decoration: none; }
ul.mm li a:hover { text-decoration: underline; color: #33f; }

/* logout, home */
.nav li:nth-of-type(1) a, .nav li:nth-of-type(2) a { color: #999; }
.nav li:nth-of-type(2) { margin-bottom: 15px; }

/* Style menu as buttons */
ul.mm li, .nav li {
  background-color: #0a0a23;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border-radius:10px;
}

ul.mm li { margin: 2px; }
ul.mm li a, ul.mm li a:hover, .nav li a, .nav li a:hover { color: #fff; text-decoration: none; }

/* Style hamburger menu to match */
alabel[for="navt"].icon {  border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC; border-radius:10px; }

alabel[for="navt"].icon { 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'><rect fill='#ff0' width='22' height='5' y='5' x='5'/><rect fill='#fff' y='23' width='22' height='5' x='5'/><rect fill='#fff' y='14' width='22' height='5' x='5'/></svg>");
}
alabel[for="navt"].icon:hover { 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' enable-background='new 0 0 32 32' xml:space='preserve'><rect fill='#FF0000' width='32' height='32' y='0' x='0'/><rect fill='#fff' width='22' height='5' y='5' x='5'/><rect fill='#fff' y='23' width='22' height='5' x='5'/><rect fill='#fff' y='14' width='22' height='5' x='5'/></svg>");
}

ul.mm li:hover, .nav li:hover { background-color: #FF0000; }


/* Media based sizing, default is 421px - 619px */

@media (max-width: 480px) { div.intsum td:nth-child(5) { max-width: 100px; } }

@media (max-width: 550px) {
div.int td:nth-child(4), div.int td:nth-child(6) { white-space: normal; }
div.int td:nth-child(8), div.int th:nth-child(8) { display: none; }
div.int td:nth-child(9), div.int th:nth-child(9) { display: none; }
div.int td { font-size: 12px !important; }
div.trips td:nth-child(7), div.trips td:nth-child(8), div.trips td:nth-child(9) { display: none; }
div.trips th:nth-child(7), div.trips th:nth-child(8), div.trips th:nth-child(9) { display: none; }
div.trips td { padding: 2px; }
}

@media (max-width: 700px) { div.int td:nth-child(10) { white-space: normal; } }

@media (max-width: 420px) { /* 320px - 420px */
 div#tb img,label[for="navt"].icon { width: 32px; height: 32px; }
 label[for="blank"].icon { display: none; margin: 0px; }
 div#tb { height: 32px; }
 div#tb .title { font-size: 14px; }
 h1 { font-size: 16px; }
 div#ftr { font-size: 7px; height: 24px; }
 div.big { max-width: 325px; font-size: 14px; }
 div.clbl { font-size: 15px; }
 body { padding-bottom: 24px; }
 div.cfld input { max-width: 150px; }
 ul.mm li { font-size: 14px; padding:2px 6px; }
 div.big div.bcol { width: 100%; clear: both; }
 div.cbx table td { font-size: inherit; }
 div.cbx table th, div.cbx table td { padding: 0px; }
 div.cbx table th { min-width: 75px; font-size: 12px; padding-right: 4px; }
 div.lgh table th { min-width: 95px; }
 div.cbx h2 { font-size: 18px; }
 div.cbx table select,div.cbx table input,.inherit { font-size: inherit !important; }
 form.icon input + img { width: 16px; height: 16px; top: 4px; }
 div.vrt table th { min-width: 0px; }
 div.ave td, div.ave th { white-space: normal !important; }
 div.ave td:nth-child(5) { white-space: nowrap !important; }
 div.hscr { font-size: 10px; max-width: 100%; padding: 1px; }
 div.hscr input, div.hscr select { width: 60px !important; }
 div.intsum td { font-size: 11px !important; }
 div.intsum td:nth-child(5) { max-width: 100px; }
 div.intsum td:nth-child(7) { padding-left: 2px; }
}
@media (max-width: 320px) { /* 0-320px */
 div.cbx { margin: 5px auto; width: 275px; padding: 5px; }
 h1 { font-size: 12px; }
 div.big { max-width: 275px; }
 div.prt, div.prt p, div#pg p { font-size: 14px; }
 div.clbl { margin-left: 5px; font-size: 14px; }
 div.cfld { margin-right: 5px; }
 div.cfld input { max-width: 130px; }
 div.csub { width: 265px; margin: 5px; }
 ul.mm li { font-size: 10px; padding: 3px 7px; line-height: 1em; }
 div.cbx table td { font-size: 12px; }
 div.cbx .error,div.bbx .error,div.error { font-size: 16px; }
 select.error { font-size: 15px !important; }
 form.icon input + img { width: 14px; height: 14px; }
 div.cbx table th { font-size: 10px; }
 div.ave td { white-space: normal !important; }
 div.hscr { max-width: 100%; }
 div.hscr,div.hscr table td { font-size: 8px; padding: 1px; }
 div.intsum td:nth-child(5) { max-width: 75px; }
}
@media (min-width: 620px) { /* 620px - 999px */
 div#tb img { width: 100px; height: 100px; }
 label[for="navt"].icon,label[for="blank"].icon { margin:20px; width: 60px; height: 60px; }
 div#tb .title,h1 { font-size: 34px; }
 div#tb { height: 100px; }
 div#ftr { font-size: 12px; line-height: 14px; height: 32px;}
 body { padding-bottom: 32px; }
 h1 { font-size: 32px; }
 div.clbl,div.cfld { padding-bottom: 10px; width: 165px; }
 div.clbl { margin-left: 10px; font-size: 20px; }
 div.cfld { margin-right: 10px; }
 div.csub { width: 380px; margin: 5px 10px; }
 div.cbx { margin: 15px auto; width: 400px; padding: 14px; }
 div.big { width: 500px; }
 div.big p, div#pg p { font-size: 18px; line-height: 1.4em; }
 div.big ul li { font-size: 16px; line-height: 1.2em; }
 div.csub input { font-size:18px; width: 90px; }
 ul.mms { white-space: nowrap; }
 ul.mms li { font-size: 16px; padding:2px 6px; }
 ul.mms li:nth-child(n+2) { border-left: 1px solid #000; }
 div.cbx table select,div.cbx table input { font-size: inherit !important; }
 form.icon input + img { width: 16px; height: 16px; top: 5px; }
 div.cbx table th,div.cbx table td { padding: 4px 4px; }
 div.cbx table th { font-size: 14px; }
 div.intsum td:nth-child(5) { max-width: 250px; }
 div.int td:nth-child(10) { white-space: nowrap; }
 div.trip tr.pd td:nth-child(1) { font-size: 18px; }
 div.trip tr.stop td:nth-child(2) { font-size: 22px; }
 div.trip tr.stop td:nth-child(3) { font-size: 20px; }
 div.trip .button { font-size: 16px; line-height: 22px; }
}

@media (max-width: 850px) { /* available loads < 850px */ 
 div.avl td:nth-child(1),div.avl td:nth-child(3),div.avl td:nth-child(6), div.avl td:nth-child(4) { text-align: center; white-space: normal; padding: 1px; }
 #avl { padding: 1px; }
 #avl table, #avl table td { font-size: 11px; padding: 1px; }
 div.int { font-size: 20px; }
}

@media (min-width: 1000px) { /* 1000px+ */
 div.prt, div.prt p { font-size: 20px; line-height: 22px; }
 div#tb .title,h1 { font-size: 40px; }
 div.big { width: 775px; }
 div.big p, div#pg p { font-size: 22px; line-height: 1.4em; }
 div.big ul li { font-size: 20px; line-height: 1.2em; }
 h1 { font-size: 40px; }
 #navt:checked ~ #pg,#navt:checked ~ #ftr,#navt:checked ~ #tb { right: 300px; }
 #navt:checked ~ #tb .nav { height: 100%; width: 300px;}
 .nav li,.nav label[for="navt"] { width: 260px; font-size: 24px; }
 .nav label[for="navt"] { font-size: 16px; }
 .nav p,div.uname { width: 260px; font-size: 22px; }
 .uname { font-size: 24px; }
 .nav div.spc { height: 24px; }
 ul.mm li { font-size: 20px; padding:4px 8px; }
 div.cbx table, div.cbx table input, div.cbx table select, div.cbx table td { font-size: 20px; }
 div.cbx table th { padding: 6px 10px; min-width: 125px; }
 div.cbx h2 { font-size: 28px; }
 div.lgh table th { min-width: 140px; font-size: 16px; }
 div.cbx .error,div.bbx .error,div.error { font-size: 24px; }
 select.error { font-size: 20px !important; }
 form.icon input + img { width: 22px; height: 22px; top: 5px; }
 div.cbx table th,div.cbx table td { padding: 2px 3px; }
 div.hscr,div.hscr table td { font-size: 16px; }
 div.hscr table th { padding: 6px 10px; min-width: 0; }

 div.sct div.cbx { display: inline-block; margin: 10px 20px; vertical-align: top;}
 div.sct { text-align: center;  }
 div.avl td:nth-child(1),div.avl td:nth-child(4) { white-space: nowrap; text-align: right; }
 div.intsum td:nth-child(5) { max-width: 700px; }
 div.int td, div.int th { font-size: 20px !important; padding: 6px 8px !important; }

 .button { line-height: 32px; }
 .button.icon { padding-left: 28px; }
 .button > img { width:24px; height: 24px; top:calc(50% - 12px); }

 div.trip table td { padding: 5px; }
}

@media (min-width: 1500px) { /* 1500px+ */
 div.avl td:nth-child(1),div.avl td:nth-child(4) { white-space: nowrap; text-align: right; }
 div.hscr,div.hscr table td { font-size: 20px; }
 div.intsum td:nth-child(5) { max-width: 1200px; }
}

/* Transitions, pretty animations to make things feel responsive */
/* td,th,table,tr,  */

div,img,input,p,h1,h2,li,label,ul,select,td,th,table,tr { 
 transition:all 0.2s;
 -moz-transition:all 0.2s;
 -webkit-transition:all 0.2s;
 -o-transition:all 0.2s;
}
.nt, .nt > * { transition: none; -moz-transition:none; -webkit-transition:none; -o-transition:none; } 

div.msgbody textarea { height: 10em; width: 60em; }
div.cbx video { width: 100%; padding: 0px 0.5em; }