/* styles to replace main.css ie set default for basic elements */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

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, button,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
    box-sizing: border-box;
}

input:read-only,
input:disabled {
    background-color:#dcdcdc;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

.test {
     width: 100%;
     border: 4px solid red; /* #79b1d3; */
}

body {
	background-color : white;
	margin: 0;
    padding: 0;
    font-family: Verdana,Arial,Helvetica, sans-serif;
    line-height: 1.5rem;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.footer {
    margin-top: auto;
    width: 100%;
    background-color: #2576a6;
    color: #ffffff;
    padding: 0.5rem;
}

.footerText {
    margin-right: 1.5rem;
}

.content {
    margin: 1rem 0 0 0;
    padding: 0 1.5rem 0 0;
    border: 0px solid black;
    flex: 1;
}

textarea {
    font-family: Verdana,Arial,Helvetica, sans-serif;
}

span {
    font: inherit;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


BODYold {
	background-color : white;
	margin: 0;
    padding: 0;
    font-family: Verdana,Arial,Helvetica, sans-serif;
    /* font-size: 12pt; */
    font-size: 100%;
    line-height: 1.5em;
}

input {
    /* height: 2rem;
    line-height: 1.5rem;
    border: 2px solid red; */
    font-size: inherit; 
}

input[type="checkbox"]{
    width: 1.25rem; 
    height: 1.25rem; 
}

input.select22 {
    height: 1.25rem;
    position:relative;
    top: .18rem;
}

select {
    line-height: 1rem;
    font-size: 1rem;
    vertical-align: middle;
    padding: 1px 5px;
}

.fakeLink {
    color:#0066CC; 
    cursor: pointer;
}

a:link {
    color:#0066CC; 
    text-decoration: none;
    /* font-weight: bold; */
}

a:visited {
    color:#0066CC; 
    text-decoration: none;
}

a:hover {
    color: red;
	background-color: #fff   /* #C4E4F7; */
	text-decoration: none;
}

/* end styles to replace main.css */

/* flat lights */
.greenCircle {
	background-image: url('../img/greenCircle.png');
	background-repeat: no-repeat;
	background-position: center; 
}
.redCircle {
	background-image: url('../img/redCircle.png');
	background-repeat: no-repeat;
	background-position: center; 
}
.blueCircle {
	background-image: url('../img/blueCircle.png');
	background-repeat: no-repeat;
	background-position: center; 
}
.yellowCircle {
	background-image: url('../img/yellowCircle.png');
	background-repeat: no-repeat;
	background-position: center; 
}
.checkMarkRed {
	background-image: url('../img/checkMarkRed.png');
	background-repeat: no-repeat;
	background-position: center; 
}
.checkMarkBlue {
	background-image: url('../img/checkMarkBlue.png');
	background-repeat: no-repeat;
	background-position: center; 
}
.crossOut {
	background-image: url('../img/crossOutMark.png');
	background-repeat: no-repeat;
	background-position: center; 
	background-size: .75em .75em; 
}

/* end lights */

.noPadding {
    padding: 0em;
}

.warning {
    color: red;
    font-weight: bold;
}
.warningTextarea {
    color: red;
    border: 0px none;
    background: transparent;    
    outline: none;
}

.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}

.text-info {
    color: #2563ab;
}

.text_justified {
    text-align:justify;
}

/*NavBar Header Style*/
.navbar-ody {
    background-color: #fcfcfc;
    border-color:#2576a6;
    color: #0066cc;
    width:100%;
    left: 0;
    right:0;
    padding: 0.5em 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.navbar-ody .logo {
    margin-left: 1rem;
}

.navbar-ody .title {
    margin-right: 5rem;
}

.navbar-ody .homenav {
    margin-right: 2rem;
}

.navbar-ody .full-width {
    flex-basis: 60%;
}

.navbar-ody .navbar-ody-brand {
    color: #fff;
}

.navbar-ody-brandd {
    padding-left: 3em;
}

nav ul ul {
    visibility: hidden;
    transition: 0.2s; /* delay of 1 seconds on hover off */
    -webkit-transition-delay: 0.2s;
}

nav ul li:hover > ul {
    visibility: visible;
    transition-delay: 0s; /* react immediately on hover */
    -webkit-transition-delay: 0s;
}

nav ul {
    /* padding: 10px 20px 0px 20px;*/
    padding: 0 1em;
    border-radius: .65em;  
    list-style: none;
    position: relative;
    display: inline-table;
    white-space: nowrap;
}

nav ul:after {
    content: ""; 
    clear: both; 
    display: block;
}

nav ul li {
    float: left;
    padding: .35rem 0;  /* Spacing between "Menu" and list */
}
   
nav ul li:hover a, nav ul li a:link, nav ul li a:visited {
    color: #fff;
    background-color: transparent;
}
    
nav ul li a {
    display: block; 
    padding: 0 2em;
    /* margin: 18px; */
    color: #757575; 
    text-decoration: none;
}

nav ul ul {
    background: #258dc8; 
    border-radius: 0; 
    margin-top: .35em;  /* Spacing between "Menu" and list */
    position: absolute; 
    top: 100%;
    z-index: 999;
}

nav ul ul li {
    float: none; 
    /* border-top: 1px solid #6BA9CD;
    border-bottom: 1px solid #6BA9CD;*/
    position: relative;
    border:none;
}

nav ul ul li a {
    padding: .1em 1.5em;  /* space between mennu items */
    color: #fff;
    font-size: 1.2em;
}  

nav ul ul li a:hover {
    background: #2576a6;
}


nav ul ul ul {
    position: absolute;
    left: 195px;
    top: 0;
    display: none;
    background: #cd8d6b; 
    border-radius: 0; 
    margin-top: .35em;  /* Spacing between "Menu" and list */
    transition: 0.2s; /* delay of 1 seconds on hover off */
    -webkit-transition-delay: 0.2s;
}

nav ul ul li:hover ul {
   display: block;
}

nav ul ul ul li {
    float: none; 
    position: relative;
    border:none;
}

nav ul ul ul li.first {
    margin-top: .35em;
}

nav ul ul ul li.last {
    margin-bottom: .05em;
}

nav ul ul ul li a {
    padding: .1em 1.5em;  /* space between mennu items */
    color: #fff;
    font-size: 1.2em;
}

nav ul ul ul li a:hover {
    background: #5bbc2e;
}


a.navbar-brand:hover{
    background-color: transparent;
}

a.menuStyle{
    font-size: 1.2em;
    color: #F4FBFE;
}
    
.divider {
    border-bottom: 1px solid #6BA9CD;
}
 
.dividerThick {
    border-bottom: 2px solid #6BA9CD;
}


/* navLinks styles Submenu  */
.navLinks ul { 
    margin: 0;
    padding: 0;
    list-style-type: none; 
    padding-top:2em;
    padding-bottom: 0.5em;
    /* font-size: 100%; */
    border: 0px solid black;
}

.navLinks.modal ul { 
    padding-top:0;
}

.navLinks ul li { 
    display: inline; 
    padding-right: 1em;
    border: 0px solid red;
}

.navLinks ul li a { 
    color: #888;
    position: relative;
 	background-repeat: no-repeat;
	background-position: left;
	margin-left: .5em;
	padding: 0 0 0 1em;
	background-position: left;
    font-size: 1.2em;
}

.navLinks ul li a:hover { 
    color: #65ABD6;
    background-color: transparent;
}

/* misc classes */
.centered {
    text-align: center;
    vertical-align: middle;
}
.blackText {
    color: #000000;
}
.whiteText {
    color: #fff;
}
.redText {
    color: #f00;
}
.blueText {
    color: #0066CC;
}

.boldText {
    font-weight: bold;
}

.normalText {
    font-weight: 400;
}

.verticalSpacer {
    margin-top: 1rem;
}

.bordered {
   border: 0px solid black;
}

.form-inline  {
   border: 0px solid black;
}

.form-inline .form-group {
	margin-bottom: 10px; 
    display: inline-block;
    border: 0px solid black;
    margin-left: 1rem;
}

/*
.navbarr {
    border-radius: 0;
    padding: 1.1em;
}

*/

.sectionHead{
    background-color: #79b1d3; /* #4391C4; */
    padding: .5rem 2rem;
}

.bigTitle {
    color: #ffffff;
    font-weight: 600;
    font: 1.5rem Arial,Helvetica;
}

.container {
    border: 1px solid #DBECF6;
    padding-bottom: 1rem;
}

.centeredTable {
    width: 100%;
}

.bgLightBlue {
    background-color: #DBECF6;
}
.bgWhite {
    background-color: white;
}

.greyBackground {
    background-color: #edf1f9;
}

.bgLightGreen {
     background-color: #D7FFCE;
}

/* What are these */
.col-md-3 {
    width: 25%;
}
.width50percent {
    width: 50%;
    border: 0px solid red;
}
.width100percent {
    width: 100%;
    border: 0px solid red;
    /* padding-top: 0px;
    margin: 0px .5rem; */
}
.fieldSetMargin {
    /* padding-top: 200px; */
}

.indent-1 {
    margin-left: 1rem;
}

.indent-1r {
    margin-right: 1rem;
}

.indent-1t {
    margin-top: 1rem;
}

.indent-1b {
    margin-bottom: 1rem;
}

.indent-2 {
    margin-left: 2rem;
}

.indent-2r {
    margin-right: 2rem;
}

.indent-2t {
    margin-top: 2rem;
}

.indent-2b {
    margin-bottom: 2rem;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

/* end of what are these */

/* edit screen */
fieldset {
    border-width: 2px;
    background-color: #FAFDFF; /*#FAFDFF;*/
    margin:2rem;
    margin-bottom: 0rem;
    padding: 1rem 0 0 0;
    border-radius: 3px;
    border-color: #00f; /* transparent;*/
}

fieldset legend {
    width: 100%;
    color: #2576a6;
    background-color: transparent;
    padding: 0px;
    border: 0px solid black;
    margin: 0px;
}

/* for now overridden in odyStles-Don.css */ 
.legendBackground {
    background-color: beige;
    padding: .5rem;
}

.subFieldSet {
    width: 100%;
    border: 0px solid black;
    /* border-width: 2px; */
    background-color: #DBECF6; /* was #edf1f9; */
    margin: 1rem 0 0 0;
    padding: 0em 0 0 0;
    border-radius: 3px;
}

.closeSection {
	float: right;
	vertical-align: bottom;
	padding: 0 .5em 0 0;
	margin: 0;
    color: #2576a6;
    border: 0px solid black;
    background-color: transparent;
    cursor: pointer;
}

/* taken from jquery.modal */
.closeIcon {
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    color: #fff;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    background: #ff0000;
    border: 2px solid #fff;
    -webkit-border-radius:  26px;
    -moz-border-radius:     26px;
    -o-border-radius:       26px;
    -ms-border-radius:      26px;
    box-shadow:    1px 1px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    box-shadow:         1px 1px 5px rgba(0,0,0,0.5);
    cursor: pointer;
}
/* taken from jquery.modal */
.goTopIcon {
    padding: 0 10px 0 10px;
    top: -10px;
    right: -10px;
    width: auto; /* 60px; */
    height: 30px;
    color: #fff;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    background: #79b1d3; /* f88; f55 */
    border: 2px solid #fff;
    -webkit-border-radius:  26px;
    -moz-border-radius:     26px;
    -o-border-radius:       26px;
    -ms-border-radius:      26px;
    box-shadow:    1px 1px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    box-shadow:         1px 1px 5px rgba(0,0,0,0.5);
    cursor: pointer;
}

.subSectionDivide {
    width: 100%;
    padding: 0;
    margin: 0 0 1em 0;
	size : 1em;
	line-height : 1em;
    border-bottom: 2em solid #DBECF6;
}

.dField {
    padding-left: .5em;
    padding-right: .5em;
    margin-bottom: 1em;
    border: 0px solid red;
    vertical-align: middle;
}

.numericData {
    text-align: right;
}
.textData {
    text-align: left;
}

.textgreyedout {
     background-color: #d5eeff;
     border: 0px;
}

.last {
    margin-bottom: 0;
}

.label {
    padding: 0;
    margin: 0;
    text-align: left;
    border: 0px solid black;
    display: inline-block;
}
.dField label {
    width: 30%;
}
.dField labelModal {
    width: 15%;
}

.top {
    vertical-align: top;
}

.hideSection {  
    display: none;
}

/*
.validation-error {
   border-color: #FF0000 !important;
   border-style: double !important;
}
*/
/* end edit screens */

/* New classes to integrate and classify. used in quotes and bookngs==========================================  */
.opsection {
    width: 100%;
	border: 0px solid #65ABD6;
	color:#000000;
	border-spacing: 1px;
    padding: 1px;
    font-size: 55%;
    text-align:center;
    margin-top: 2px;
}
.opcolumn a:link {
    font-size: 95%;
}

.opcolumn { 
    padding: 1px;
    border: 1px solid #ffffff;
    font-size: 85%;
}
.inputSpaced {
    margin: .2rem 0 0 0 ;
}
.opcolumnleft { 
    padding: 1px;
    text-align: left;
    font-size: 85%;
}

.optitle { 
    border-color: #ffffff;
    background-color: #A3CDE6;
    font-size: 95%;
}
.opbutton {
    /* vertical-align: +30%; */
    color: blue;
}

.rightBorder {
    border-right: 2px solid #DBECF6;
}
.tdsoft {  background-color: #DBECF6} /* blue */
.tdmedium { background-color: #BEDBED}
.tdhard { background-color: #A3CDE6; font-size: 85%;}

.opsection th:hover:not(.unSortable) {
	background-color: #2576a6;
}
th.sortable {
    color: #fff;
}

.radioresize {
  width: 1rem;
  height: 1rem;
}
.notAllowed {
  width: .5 em;
  height: .5 em;
}

.hrw {
	/* width : 100%; &*/
	height : .5em ;
	background-color : #ffffff;
	border: 0;
	border-bottom: 2px solid #A3CDE6;
}
.hrg {
	/* width : 100%; &*/
	height : .5em ;
	background-color : #7FC9c5;
	border: 0;
	border-bottom: 3px solid #7FC9c5;
}
.hrg2 {
	/* width : 100%; &*/
	height : .5em ;
	background-color : #ffffff;
	border: 0;
	border-bottom: 5px solid #7FC9c5;
}

.hidden {
    display: none;
}

.unhidden {
    display: block;
}

div.form {
    margin-bottom: 10px;
}
label.form {
    display: inline-block;
    width: 110px;
    color: #777777;
    font-weight: 600;
}
label.form.label2 {
   width: 20%;
}
input.form {
    padding: 5px 10px;
}
.upper {
    text-transform: uppercase;
}

.apicontainer {
    border: 2px solid #DBECF6;
    padding: 1rem;
    margin-bottom: 2rem;
}

.apiTitle {
    font-weight: bold;
    text-decoration: underline;
}

.apiSubTitle {
    font-weight: bold;
    font-style: italic;
    color: #0066cc;
}

.centerText {
    text-align: center;
}

/* Login */
.loginblk {
    width: 100VW;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loginblk__authorize {
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: #e6e6e6;
    border-radius: 7px;
}

.loginblk__title {
    color: #fff;
    background-color: #5fc7f5;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 7px;
}

.loginblk__formblk {
    padding: 20px;
}

.loginblk__text {
    color: #00abf7;
    font-size: 14px;
    font-weight: 600;
}


.loginblk__text--last {
    margin-top: 15px;
}

.loginblk__input {
    padding: 0 5px;
    line-height: 20px;
    width: 300px;
    height: 28px;
    border-radius: 5px;;
}

.login_authblock {
    display: flex;
    margin-top: 15px;
}

.loginblk__cbtext {
    font-size: 11px;
    margin-left: 5px;
}

.loginblk__btn {
    font-size: 12px;
    color: #fff;
    background-color: #5bbc2e;
    font-weight: 600;
    display: block;
    height: 25px;
    width: 100px;
    padding: 0px 20px;
    cursor: pointer;
    border: solid 1px #acacac;
    border-radius: 5px;
    box-shadow: 0px 2px 4px 0px #b6b6b6;
    margin-left: 65px;
    text-align: center;
}

.cargoItems {
    width: auto;
}

.cargoItems th {
    padding: 0.25rem 1rem;
}

.addTotals {
    display: flex;
    flex-direction: row;
}

.auto-left {
    margin-left: auto;
}

.width60 {
    width: 60%;
}

.displayFees {
    display: flex;
    flex-direction: row;
}

.displayFees :first-child {
    width: 25rem;
}

.displayFees :nth-child(2) {
    width: 15rem;
}

.displayFees :nth-child(3) {
    width: 15rem;
}

.displayFees :nth-child(4) {
    font-weight: 600;
}