/* 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 { color: #FFF; background-color: #555; white-space: nowrap; text-align: right;font-weight: bold; min-width: 100px; font-size: 14px; }
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(even) input { background-color: #eee; border: 1px solid #888; }
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.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; }

/* 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; }
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.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: #999; border-radius: 5px; border: 1px solid #555; padding: 2px 4px; margin: 8px 3px; position: relative; top: 0px; 
 line-height: 22px;  cursor: pointer;}
.button:hover { background-color: #AAC; }
.button.icon { padding-left: 18px; }
.button > img { width:14px; height: 14px; position: absolute; left: 2px; top: 2px; }

.error { color: #D11 !important; font-weight: bold; }
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; }


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

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

@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; }
 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 { 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; }
}

@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:2px; }
}

@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.4s;
 -moz-transition:all 0.4s;
 -webkit-transition:all 0.4s;
 -o-transition:all 0.4s;
}