/*Custom CSS*/

/*Here I will write some css for looks good*/

th, td {
    padding: 7px;
}

th {
    background-color: rgb(248, 248, 248);
}

.cls_requestType {
    border: none !important;
    background-color: transparent;
}

#gridT, #gridT tr {
    /*border: 1px solid #0D857B;*/
    /*border: 1px solid #1052a0;*/
    /*border: 1px;
border-color: #1052a0;*/
    border-style: double double double double;
    border-collapse: separate;
}

#subT, #subT tr {
    /*border: 1px solid #f3f3f3;*/
    border: 1px;
    border-color: #1052a0;
    border-style: double double double double;
}

#subT {
    margin: 0px 0px 0px 10px;
    padding: 7px;
    width: 95%;
}

    #subT th {
        font-size: 10px;
        /*border: 1px;
    border-color: #1052a0;
    border-style: double double double double;*/
    }

.hoverEff {
    cursor: pointer;
}

    .hoverEff:hover {
        background-color: rgb(242, 242, 242);
    }

.expand {
    background-image: url("../Images/ShowHideImage.png");
    background-position-x: -22px;
    background-repeat: no-repeat;
}

.collapse {
    background-image: url("../Images/ShowHideImage.png");
    background-position-x: -2px;
    background-repeat: no-repeat;
}

/*CollapsiblePanel*/
.ContainerPanel {
    width: 450px;
    border: 1px;
    border-color: #1052a0;
    border-style: double double double double;
}

.collapsePanelHeader {
    width: 450px;
    height: 30px;
    background-image: url("../images/bg-menu-main.png");
    background-repeat: repeat-x;
    color: #FFF;
    font-weight: bold;
}

.HeaderContent {
    float: left;
    padding-left: 5px;
}

.Content {
}

.ArrowExpand {
    background-image: url("../images/expand_blue.jpg");
    width: 13px;
    height: 13px;
    float: right;
    margin-top: 7px;
    margin-right: 5px;
}

    .ArrowExpand:hover {
        cursor: pointer;
    }

.ArrowClose {
    background-image: url("../Images/collapse_blue.jpg");
    width: 13px;
    height: 13px;
    float: right;
    margin-top: 7px;
    margin-right: 5px;
}

    .ArrowClose:hover {
        cursor: pointer;
    }

.highlight-text {
    color: red;
}

.success-text {
    color: green;
    /*font-weight:bold;*/
}

#subT tr:nth-child(even) {
    background-color: #ffffff;
}

#subT tr:nth-child(odd) {
    background-color: #DCDCDC;
}

.header-text {
    font-size: 9px;
}

#gridT th:first-child {
    text-decoration: underline;
    width: 120px;
    cursor: pointer;
}

#headerUpdatedate {
    cursor: pointer;
}

.contain-arrows, .contain-arrows-status {
    width: 20px;
    position: relative;
    top: 2px;
    height: 10px;
    float: right;
}

.cls-image-header-down {
    background: url(../Images/sorting.png) 0 10px;
    height: 10px;
}

.cls-image-header-up {
    background: url(../Images/sorting.png) 0 0;
    height: 10px;
}

.hide-header {
    display: none;
}

.row-text {
    font-size: 9px;
}

#dvLoading {
    background-color: #333;
    opacity: 0.8;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 100;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(../Images/loading.gif);
    background-position: center;
    background-repeat: no-repeat;
}



/*dialogue box class properties*/
.ui-dialog-buttonset {
    width: 7.81em !important;
    position: relative !important;
    top: 50% !important;
    left: 42% !important;
    float: none !important;
}

.header-class {
    font-size: 1.5em;
    color: #689420;
    font-family: sans-serif;
    font-weight: 700;
}

.label-class {
    font-size: 0.875em;
    font-family: sans-serif;
    font-weight: 400;
}

.label-left {
    color: #808080;
    width: 13.750em;
}

.label-right {
    color: #4d4d4d;
    width: 14.750em;
}

.btn-class {
    background-color: #00464e !important;
    color: #ffffff !important;
    font-size: 1em !important;
    width: 9.5em;
    height: 3.18em;
    font-family: sans-serif !important;
    border-radius: 5px !important;
}

    .btn-class:hover {
        background-color: #00343a;
    }

.ui-widget-header {
    border: none !important;
    background: none !important;
}

/*Shipment Styles*/
.title-class {
    font-size: 2.25em;
    color: #689420;
    font-family: sans-serif;
    font-weight: 700;
    text-align: center;
}

.current-status-column {
    width: 260px;
}

.booking-date-column {
    width: 90px;
    min-width: 90px !important;
}

.btn-back {
    color: #00464e !important;
    font-size: 0.875em;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
}

    .btn-back:hover {
        font-weight: 800;
    }

.back-div {
    float: left;
    margin: 4px 0 0 22px;
}

    .back-div a {
        text-decoration: initial;
        font-weight: bold;
    }

    .back-div img {
        vertical-align: middle;
    }

        .back-div img:hover {
            font-weight: 800;
        }

.recordCount {
    color: #98908E;
}
/*.webgrid-table td, th {
border: 1px solid #98BF21;
}*/

.webgrid-header {
    background-color: #A7C942;
    color: #FFFFFF;
    text-align: left;
}

.webgrid-alternating-row {
    background-color: #EAF2D3;
}

.colWidth {
    width: 200px;
}

#Outer {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#GridBody {
    width: 1020px;
    height: 200px;
    overflow-y: scroll;
    border: solid 1px #e8eef4;
}

#GridHeader table {
    width: 1022px;
    text-align: left;
    margin-top: 0px;
    border: solid 1px #A7C942;
    padding: 0px;
    border-collapse: collapse;
}

#GridFooter {
    border: solid 1px #e8eef4;
    width: 1020px;
}

#GridHeader table th {
    width: 200px;
}

#statusList .connectingLine {
    position: absolute;
    top: -40px;
    width: 3px;
    background: #00464e;
    height: 100%;
    left: 46%;
}

#subgrid {
    margin: 0;
}

#statusList tbody td:first-child, #statusList thead th:first-child {
    width: 40px !important;
    min-width: 40px;
    position: relative;
}

#statusList tbody tr:last-child td:first-child .connectingLine {
    top: -46%;
}

#statusList thead th:first-child {
    height: 19px;
}

#statusList .statusIcon {
    z-index: 10;
    position: absolute;
}

#statusList tbody td {
    word-break: break-word;
    width: 134px; /*149px;*/
}

#statusList thead th {
    width: 134px; /*151px;*/
}

#statusList {
    height: 200px;
    overflow-y: auto;
    padding: 0;
}

#fixheader thead th {
    width: 134px;
}

    #fixheader thead th:first-child {
        width: 40px !important;
    }

.remarks-col {
    width: 220px;
}

/*------------------------------------------------new css------------------------------------------------*/

/*COMMON CSS*/
body {
    font-family: open-sans,sans-serif;
    margin: 0px;
}

.clear-fix {
    clear: both;
}

::-webkit-input-placeholder {
    font-weight: normal !important;
    position: relative;
    top: 10px;
    margin-top: 10px;
    font-style: italic;
}

:-moz-placeholder { /* Firefox 18- */
    font-weight: normal !important;
    position: relative;
    top: 10px;
    margin-top: 10px;
    font-style: italic;
}

::-moz-placeholder { /* Firefox 19+ */
    font-weight: normal !important;
    position: relative;
    top: 10px;
    margin-top: 10px;
    font-style: italic;
}

:-ms-input-placeholder {
    font-weight: normal !important;
    position: relative;
    top: 10px;
    margin-top: 10px;
    font-style: italic;
}
/**/
/*HEADER NAVIGATION & LOGO*/
header nav {
    height: 95px;
    padding: 10px 30px 0;
    font-size: 14px;
    color: #00464e;
}

    header nav .navbar-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        header nav .navbar-nav li.qLogo {
            float: left;
            width: 199px;
            cursor: default;
        }

        header nav .navbar-nav li.links {
            float: right;
        }

            header nav .navbar-nav li.links .link-text {
                font-size: 16px;
                color: #00464e;
                line-height: 30px;
                cursor: pointer;
            }
/*BANNER*/
header .banner {
    /*height: 389px;*/
}


/*MAIN CONTAINER*/
.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

/*TRACK YOUR SHIPMENTS SECTION*/
.trackShipments h1 {
    color: #689420;
    font-size: 2em;
    text-align: center;
    margin: 20px 0;
}

/*-- Original Style before change to mobile enabled
    
    .trackShipments .content-wrap {
    Width: 700px;
    Background: #00464e;
    margin: 0 auto;
    position: relative;    
    padding: 15px 70px;
}*/

@media only screen and (min-width: 0px) and (max-width: 450px) {
    .trackShipments .content-wrap {
        Width: 100%;
        Background: #00464e;
        margin: 0 auto;
        position: relative;
        padding: 15px 0px 15px 0px;
    }
}

@media only screen and (min-width: 451px) and (max-width: 3000px) {
    .trackShipments .content-wrap {
        Width: 58%;
        Background: #00464e;
        margin: 0 auto;
        position: relative;
        padding: 15px 70px 15px 70px;
    }
}

.trackShipments .radio-btns {
    padding: 10px 0 10px 0;
}

/*-- Original Style before change to mobile enabled
    .trackShipments .radio-btns .radio-lbl {
        font-size: 14px;
        color: #fff;
        float: right;
    }   
}*/

@media only screen and (min-width: 0px) and (max-width: 450px) {
    .trackShipments .radio-btns .radio-lbl {
        font-size: 12px;
        color: #fff;
        margin: 0 auto;
        float: right;
    }
}

@media only screen and (min-width: 451px) and (max-width: 3000px) {
    .trackShipments .radio-btns .radio-lbl {
        font-size: 14px;
        color: #fff;
        float: right;
    }
}

.radio-lbl {
    font-weight: 100;
}

.trackShipments .comment-text {
    text-align: center;
    position: relative;
}

/*-- Original Style before change to mobile enabled
    
    .trackShipments .comment-text textarea {
        height: 65px;
        width: 675px;
        padding: 10px 12px 0px;
        resize: none;
        position: relative;
        font-size: 12px;
        font-family: open-sans,sans-serif;
}*/

@media only screen and (min-width: 0px) and (max-width: 450px) {
    .trackShipments .comment-text textarea {
        height: 65px;
        width: 90%;
        padding: 10px 12px 0px 12px;
        resize: none;
        position: relative;
        font-size: 11px;
        font-family: open-sans,sans-serif;
    }
}

@media only screen and (min-width: 451px) and (max-width: 3000px) {
    .trackShipments .comment-text textarea {
        height: 65px;
        width: 100%;
        padding: 10px 12px 0px 12px;
        resize: none;
        position: relative;
        font-size: 12px;
        font-family: open-sans,sans-serif;
    }
}

.trackShipments .comment-text .note {
    font-size: 12px;
    color: #fff;
    float: left;
    padding: 5px 0;
}

.trackShipments .btn-wrap {
    margin: 15px 0 10px 0;
}

    .trackShipments .btn-wrap .trackBtn {
        Background: #8fc13e;
        color: #fff;
        Font-size: 16px;
        width: 150px;
        line-height: 23px;
        height: 40px;
        color: #fff;
        outline: 0px;
        border: 1px;
        float: right;
        cursor: pointer;
    }

        .trackShipments .btn-wrap .trackBtn:hover {
            Background: #689420;
        }

/*TRACKING SUMMARY*/


.trackSummary h1 {
    color: #689420;
    font-size: 2em;
    text-align: center;
    margin: 20px 0;
}

.trackSummary .content-wrap {
    padding: 10px 20px;
}

.trackSummary .table-striped tbody tr:nth-of-type(odd) {
    background-color: #ECF0F0;
}

.trackSummary .table {
    width: 100%;
    border-spacing: 0;
    font-size: 14px;
    border: solid 1px #ECF0F0;
}



    .trackSummary .table td, .table th {
        padding: .75rem;
        line-height: 1.5;
        vertical-align: middle;
        border-top: 1px solid #eceeef;
        text-align: left;
        /*word-break:break-all;*/
    }

    .trackSummary .table thead th {
        border-bottom: 2px solid #eceeef;
        color: #fff;
        font-size: 12px;
        background: #00464e;
        font-weight: 100;
    }

    .trackSummary .table td {
        /*color: #4d4d4d;*/
        font-size: 12px;
        line-height: 16px;
        /*min-width: 100px;*/
    }

        /*.trackSummary .table td :hover {
        background: #e4e4e4;
    }*/

        .trackSummary .table td i {
            display: block;
            font-style: normal;
        }

        .trackSummary .table td b.statusIcon {
            display: inline-block;
            /*background: url(../Images/icon.png);*/
            height: 42px;
            width: 42px;
            background-repeat: no-repeat;
            float: left;
            margin-right: 10px;
        }

/*FOOTER*/
footer {
    Background: #f4f4f4;
    color: #00464e;
}

    footer a {
        text-decoration: none;
    }

    footer ul {
        list-style: none;
        padding: 0;
        margin: 0px;
    }

    footer .container {
        width: 865px;
        margin: 0 auto;
    }

/*FOOTER COLUMNS*/
.footer-cols {
    float: left;
    margin-left: 20px;
}

footer .footer-cols h3 {
    border-bottom: 1px solid #AABEC1;
    display: block;
    line-height: 40px;
    margin: 0;
}

    footer .footer-cols h3 a {
        font-size: 16px;
        color: #00464e;
        font-weight: 700;
    }

footer .footer-cols .nav li a {
    font-size: 12px;
    color: #00464e;
    line-height: 25px;
    font-weight: 400;
}

.footer-cols.first {
    margin-left: 0px;
}

.footer-cols.last {
    margin-left: 0px;
}

    .footer-cols.last h3 {
        border-bottom: 0px;
    }
/*FOOTER COPY RIGHT*/
footer .copyRight {
    border-top: 1px solid #c2d0d2;
    clear: both;
}

    footer .copyRight .container p {
        font-size: 14px;
        color: #004751;
        font-weight: bold;
        margin: 0;
        margin-top: 30px;
        padding-bottom: 30px;
    }

        footer .copyRight .container p a {
            text-decoration: none;
            color: #004751;
        }

div.image-blurred-edge {
    float: right;
    height: 100%;
    width: 100%;
    text-align: center;
}

.body-div, .mainContainer {
    float: left;
    width: 100%;
}

.banner-div {
    float: left;
    height: 182px;
    width: 100%;
}

.left-float {
    float: left;
}

.redirectClass {
    margin-top: 15px;
}

.link-color {
    color: blue !important;
}

.TermsOfUse {
    margin-right: 10px;
    margin-left: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}