body {
    line-height: 23px; /* to make the dropdowns and text boxes at least have a little vertical space between them by default */
/*    padding-left: 40px !important;
    padding-right: 40px !important;*/
}

/* general formatting 
----------------------------------------------------- */

h1
{
    font-size: 1.75em;
    color: black;
}

h2 {
    font-size: 1.5em;
    color: black;
}

h3 {
    font-size: 1.25em;
    color: black;
}

/* 
    despite the default message that's usually here (in site.css that is) - i actually want this to be 100% width by default most of the time
    would override if necessary elsewhere
    
    NOTE: removed table from this list as it would break the table width of paging row on gridview

*/
input,
select,
textarea
 {
    /*max-width: 280px;*/
    width: 100%;
}


input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: normal;
}

select {
    height: 22px;
    border: 1px solid silver;
}

input, textarea {
    padding: 3px 4px 3px 4px !important;
    border: solid 1px silver;
}

input {
    height: 22px;
}

    input[type='file'] /* no borders on checkboxes */ {
/*        border-top: 0px;
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;*/
        height: 30px !important;
    }

    input[type='submit'] /* no set width */ {
        width:auto;
        height: auto;
    }

input[type='checkbox'] /* no borders on checkboxes */ {
    border-top: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    width:auto; /* don't need 100% width for this type of input */
}

        input[type='checkbox'] + label {
            /*font-weight:normal !important;*/
            margin-left: 5px !important;
            /*margin-bottom: 0px !important;
            margin-top: 0px !important;*/
        }

    input[type='radio'] /* no borders on radio buttons */ {
        margin-bottom: 0px !important;
        margin-top: 0px !important;
        padding-top: 0px !important;
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
        font-weight: normal;
        height: 12px;
        width:auto;
    }

        input[type='radio'] + label /* label fix for the radio buttons, there was too much spacing coming from bootstrap, made mine important */ {
            font-weight: normal !important;
            margin-left: 5px !important;
            margin-bottom: 0px !important;
            margin-top: 0px !important;
            margin-right: 10px;
            vertical-align: top;
            padding-top: 0px;
        }

hr {
    border-color: silver;
    margin: 20px 0px 20px 0px;
}


/* login screen / change pw screen
----------------------------------------------------- */

.divLogin {
    max-width: 500px;
    /*min-width:300px;*/
    /*min-height:250px;*/
    max-height: 500px;
    background-color: White;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: auto;
    border: 1px solid gray;
    padding: 5px 5px 5px 5px;
    line-height: 20px;
}

.divLoginImg {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    /*padding: 20px 20px 20px 20px;*/
}

    .divLoginImg img {
        box-sizing: content-box;
    }

.divLoginBody {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.login-mb {
    margin-top: 20px !important;
}

.login-fields {
    margin-top: 30px !important;
}

    .login-fields div {
        margin-top: 3px !important;
    }

.login-label {
    display: inline-block;
    width: 75px !important;
}

.login-field {
    display: inline-block;
    width: 150px;
}

.loginScreenSubText {
    text-align: center;
    font-size: 14pt;
    color: black;
    font-weight: normal;
}

.divLoginErrorMsg {
    color: Red;
}

.divLoginInfoMsg {
    color: #001CC9;
}

.change-pw-title {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 10px;
}

.change-pw-fields {
    margin-top: 0px !important;
}

    .change-pw-fields div {
        margin-top: 3px !important;
    }

.change-pw-enter-twice-msg {
    color: blue;
    margin-bottom: 30px;
}

.change-pw-action-btns {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.change-pw-label {
    display: inline-block;
    max-width: 200px;
    margin-right: 10px;
}

.change-pw-field {
    display: inline-block;
    width: 150px;
}


/* spacing for 'action buttons'
----------------------------------------------------- */


.actionButtons {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.actionButtonsBlueBottom {
    margin-top: 20px !important;
    margin-bottom: 0px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    background-color: #DBE5F1;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 74px;
    width: 100%;
}

.actionButtons-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.actionButtons-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.actionButtons-xs {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.actionButtons-xs2 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.title-links a {
    display: inline-block;
    margin-left: 10px;
}

.title-links-2 a {
    display: inline-block;
    margin-left: 10px;
    padding-top: 22px;
}

.title-links-2-first a {
    display: inline-block;
    padding-top: 22px;
}


/* page structure for our "colored" tops and width adjusted bottoms to match
----------------------------------------------------- */


.page-title-top-bg {
    background-color: #DBE5F1;
    width: 100vw;
    position: relative;
    left: 50%;margin-left: -50vw;
    padding-top: 20px;
    padding-bottom: 10px;
}

.page-body {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

.dashboard-quick-search-wrap {
    padding-top: 0px;
    padding-bottom: 50px;
/*    text-align: center;*/
}

.dashboard-quick-search-wrap .form-control {
    padding: 6px 12px 6px 12px !important;
}

.dashboard-quick-search-width {
    max-width: 500px;
/*    margin-right: auto;
    margin-left: auto;*/
}

.dashboard-search-results {
   /* max-width: 500px;*/
/*    margin-right: auto;
    margin-left: auto;*/
}

/*
    Header and Navigation
    ---------------------------------------------
*/
.logo {
    height: 60px;
    margin-right: 70px;
}

.navbar {
    /*padding-left: 50px;*/
    padding-top: 4px;
    height: 70px;
}

.navbar-client-logo {
    margin-right: 30px;
    margin-left: 0px !important;
}

.navbar-brand {
    float: left;
    padding: 0px 0px;
    font-size: 18px;
    line-height: 20px;
    margin-top: 8px;
}

.navbar-inverse {
    background-color: white;
    border-bottom: solid 3px silver;
    padding-top: 5px;
    padding-bottom: 4px;
}

    /* navbar buttons */
    .navbar-inverse .navbar-nav > li > a {
        color: #001f59;
        display: inline-block;
        /*cursor:pointer;
    height:20px;
    background-color:#124270;
    background-repeat:repeat-x;      
    text-decoration:none;
    font-size:8pt;
    text-align:center;
    line-height:20px;
    padding:0px 10px 0px 10px;
    border-radius:5px;
    border: 1px solid gray;
    margin-top:10px;*/
    }

        .navbar-inverse .navbar-nav > li > a:hover,
        .navbar-inverse .navbar-nav > li > a:focus {
            color: white;
            background-color: #0768a7;
        }

.navbar-collapse {
    background-color: white;
}

    .navbar-collapse ul {
        list-style-type: none;
        margin-top: 6px;
    }

    .navbar-collapse li a {
        height: 50px;
        /*display: inline-block;*/
        /*float: left;*/
        padding: 15px 14px 10px 14px;
        text-transform: uppercase;
        color: #001f59;
    }

        .navbar-collapse li a:hover {
            background-color: #0768a7;
            color: white;
            text-decoration: none;
        }


.nav .caret {
    border-top-color: black;
    border-bottom-color: black;
    margin-left: 5px;
    color: black;
}

.nav a:hover .caret {
    border-top-color: black;
    border-bottom-color: black;
}


.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: black;
    border-bottom-color: black;
}

.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: black;
    border-bottom-color: black;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: black;
    border-bottom-color: black;
}


.navbar-inverse .navbar-nav > .dropdown > a:hover .caret {
    border-top-color: white;
    border-bottom-color: white;
}

.navbar-inverse .navbar-nav > .dropdown > a .caret {
    border-top-color: black;
    border-bottom-color: black;
}

.navbar-inverse .navbar-nav > .open > a .caret,
.navbar-inverse .navbar-nav > .open > a:hover .caret,
.navbar-inverse .navbar-nav > .open > a:focus .caret {
    border-top-color: white;
    border-bottom-color: white;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #001f59;
}

/*the right side of the nav bar where the [username//postition//office] type info appears*/
.navbar-user-info-li {
    margin-top: 15px;
    margin-right: 10px;
}

.loginInfo {
    float: right;
    color: #001f59;
    height: 50px;
    padding: 15px 14px 10px 14px;
    margin-right: 24px;
    margin-top: 6px;
}

    .loginInfo a {
        color: #001f59;
    }


/* tables (gridview)
----------------------------------------------------- */

.thead-exw {
    background-color: gray !important;
}

.thead-exw {
    color: white !important;
}

.thead-exw a {
    color: white;
    text-decoration: underline;
}

    .thead-exw a:hover {
        color: white;
    }

    .thead-exw a:visited {
        color: white;
    }

    .thead-exw a:active {
        color: white;
    }

/*
.sortable {
    background-image: url('img/sort_both.png');
    background-repeat: no-repeat;
    background-position: center right;
}*/

    .sortable-dash a {
        text-decoration:underline;
    }

        .sortable-dash a::after {
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-left: 5px;
            background: url('img/sortable.png') 0 0 no-repeat;
            background-size: contain;
            /*trying to center vertically in the thead - this might not work everywhere, for now it's working on the dashboard search results*/
            position: absolute;
            top: 32px;
        }

.sortable a {
    text-decoration: underline;
}

    .sortable a::after {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-left: 5px;
        background: url('img/sortable.png') 0 0 no-repeat;
        background-size: contain;
    }



.lookup-grid-div-wrap {
    height: 350px;
}

.port-lookup-grid-div-wrap {
    height: 350px;
}

.attachment-grid-div-wrap {
    height: 350px;
}

/* styles the div that gets auto generated around and asp.net gridview */
.gridViewWrapperFix > div {
    padding: 0px;
    margin: 0;
    border: 1px solid silver;
}

.pagerCssClass {
}

.pagerCssClass span {
    padding: 5px 5px 5px 5px;
}

    .pagerCssClass a,
    .pagerCssClass span {
        display: inline-block;
        padding: 0px 9px;
        margin-right: 4px;
        border-radius: 3px;
        border: solid 1px #c0c0c0;
        background: #e9e9e9;
        box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
        font-size: .875em;
        font-weight: bold;
        text-decoration: none;
        color: #717171;
        text-shadow: 0px 1px 0px rgba(255,255,255, 1);
    }

    .pagerCssClass a {
        background-color: #f5f5f5;
        color: #969696;
        border: 1px solid #969696;
    }

    .pagerCssClass span {
        background: #616161;
        box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
        color: #f0f0f0;
        text-shadow: 0px 0px 3px rgba(0,0,0, .5);
        border: 1px solid #3AC0F2;
    }

/* generic
----------------------------------------------------- */

.hidden {
    display: none !important;
}

.marginTop10 {
    margin-top: 10px !important;
}

.marginTop20 {
    margin-top: 20px !important;
}

.marginBottom10 {
    margin-bottom: 10px !important;
}

.marginBottom10 {
    margin-bottom: 10px !important;
}

.marginLeft5 {
    margin-left: 5px;
}

.marginLeft10 {
    margin-left: 10px;
}

.alignCenter {
    text-align:center;
}

.inlineBlock {
    display: inline-block;
}

.widthFull {
    width: 100%;
}

.posRelative {
    position: relative;
}

.flexCenter {
    display: flex;
    align-items: center;
}

.commentsOverflow {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 200px;
}

/*no gutters code from here*/
/*https://julienmelissas.com/no-gutter-column-trick-for-bootstrap/*/

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

    .row.no-gutters > [class^="col-"],
    .row.no-gutters > [class*=" col-"] {
        padding-right: 0;
        padding-left: 0;
    }

/*

    NOTE 

    this is only cosmetic
    data will still be sent to the server in mixed case
    so be sure to wrap the server side code or sql code in
    a toupper() type method as well

*/
.toUpper {
    text-transform: uppercase;
}

.ellipsesOverFlow {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    /*max-height: 23px;*/
}

.nowrap {
    white-space: nowrap;
}

/* popup stuff
----------------------------------------------------- */
    .popupBackgroundOverlay {
        background-color: black;
        filter: alpha(opacity=50);
        opacity: 0.60;
    }

.popupWrapper {
    border: 2px solid Gray;
    padding-bottom: 0px;
    background-color: White;
}

.popupHeader {
    /* border-bottom:2px solid Gray; */
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    background-color: #001f59;
    border-bottom: 1px solid gray;
    margin-bottom: 10px;
}

.popupHeaderCloseBtn {
    display: inline-block;
    float: right;
}

.popupHeader h1 {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    display: inline-block;
    color: white;
}

.popupHeader a {
    color: white;
    vertical-align: middle;
}

    .popupHeader a:hover {
        color: white;
        vertical-align: middle;
    }

    .popupHeader a:visited {
        color: white;
        vertical-align: middle;
    }

    .popupHeader a:active {
        color: white;
        vertical-align: middle;
    }


.popupBody {
    padding-left: 20px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-top: 10px;
    line-height: 20px;
}

.popupBody-less-padding {
    padding-left: 10px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
    line-height: 20px;
}

.popupBody div {
    margin-top: 2px;
}

.popupMaxHeight600px {
    max-height: 600px;
    overflow: auto;
}

.port-lookup-popup-wrap {
    background-color: white;
    min-width: 300px;
    max-width: 1000px;
    width: 1000px;
    height: 580px;
    overflow: auto; /* fixes an issue where the asp modal 
                        popup extender would load off the top of the screen 
                        (long grid results making the "center" of the popup push it off screen, 
                        then gridviewsrcoll would hide it, but leaving the popup centered as if the long grid was still there */
}

.attachments-popup-wrap {
    background-color: white;
    min-width: 300px;
    max-width: 1000px;
    width: 1000px;
    height: 580px;
    overflow: auto; /* fixes an issue where the asp modal 
                        popup extender would load off the top of the screen 
                        (long grid results making the "center" of the popup push it off screen, 
                        then gridviewsrcoll would hide it, but leaving the popup centered as if the long grid was still there */
}


/* btnGroup btns for button bar naviagtion
----------------------------------------------------- */

.btn-nav {
    background-color: #107BC9;
    color: white;
    border-radius: 0;
    text-transform: uppercase;
    border-radius: 3px;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
    text-transform: none;
}

    .btn-nav:hover {
        background-color: white;
        border: 1px solid #001f59;
    }

    .btn-nav.active {
        background-color: #1496F5;
    }

        .btn-nav.active:hover {
            background-color: white;
            border: 1px solid #001f59;
        }


/* required fields css
----------------------------------------------------- */

.required-txt {
    /*border: 1px solid red !important;*/
}

.required-txtid {
    /*border: 1px solid red !important;*/
}

.required-ddl {
    /*border: 1px solid red !important;*/
}

.required-rb {
    /*color: red !important;*/
}

.required-rbl {
    /*color: red !important;*/
}

.required-chk {
    /*color: red !important;*/
}

.required-ckl {
    /*color: red !important;*/
}

.required-fup {
/*    color: red !important;
    border-color: red !important;*/
}

/* other
----------------------------------------------------- */

.tabWrapper {
    min-height:500px;
}

.tabWrapperWithBlueBottom {
    min-height: 500px;
    position: relative; /* added this to make actionButtonsBlueBottom stick to bottom */
    padding-bottom: 74px; /* add this to make space for the blue botton bar the bottom so it doesn't hide content, much match height in .actionButtonsBlueBottom */
}

.txt-portcode-width {
    width: 180px;
}

.btn-txt-height {
    height: 23px !important;
    padding: 2px 10px 2px 10px !important;
}

.txt-postal-code {
    width:150px;
}

.fuel-surcharge-grid {
    max-height:400px;
    overflow-y: auto;
    margin-bottom: 20px !important;
    border: 1px solid silver;
}

.trucker-profile-tab-1 {
    height: 700px;
    overflow: auto;
    overflow-x: hidden;
}