/* JOB DETAILS PAGES AND FLYOUT STYLING */

i.icon {
    display: inline-block;
}

.icon-servicetype-driven {
    background: #b2b2b2 url(/Images/Redesign/icon-servicetype-driven@2x.png) no-repeat center center;
    -webkit-background-size: 22px auto;
    background-size: 22px auto;
    border: 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    width: 30px;
    height: 30px;
    text-align: center;
}

.icon-servicetype-transported {
    background: #b2b2b2 url(/Images/Redesign/icon-servicetype-transported@2x.png) no-repeat center center;
    -webkit-background-size: 28px auto;
    background-size: 28px auto;
    border: 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    width: 30px;
    height: 30px;
    text-align: center;
}

.job-details {
    padding: 0 15px;
}

    .job-details .job-details-inner {
        background-color: #0076a6;
        padding: 10px 10px 10px 0;
    }

        .job-details .job-details-inner > div {
            padding: 0 0 0 10px;
        }

    .job-details .job-details-vehicles {
        background-color: #0076a6;
        padding: 0 10px 10px 10px;
    }

    .job-details th, .job-details td {
        font-size: 12px;
        font-weight: 500;
    }

    .job-details .map-canvas {
        height: 358px;
        margin-bottom: 0;
        min-height: 358px;
        width: 100%;
    }

    .job-details .btn--search-backloads {
        margin: 10px 0 0 0;
    }

    .job-details table.details tr {
        border-bottom: 2px solid #0076a6;
        border-left: none;
    }

    .job-details table.details th {
        text-align: left;
        width: 190px;
    }

    .job-details table.details td.map-marker-cell img {
        max-height: 17px;
    }

    .job-details table.details td.service-type-cell {
        padding-bottom: 0px;
        padding-top: 5px;
    }

    .job-details .job-details-pictures {
        margin-top: 10px;
    }

        .job-details .job-details-pictures a {
            color: #fff;
            display: inline-block;
            margin: 0 0 5px 3px;
            text-align: center;
            width: 70px;
        }

@media (max-width: 768px) {
    .job-details .btn--search-backloads {
        margin: 10px 0 10px 0;
        width: 100%;
        position: relative;
        z-index: 9999;
    }
}

@media print {
    .job-details {
        padding-left: 0;
    }

        .job-details th, .job-details td {
        }

        .job-details .map-canvas img {
            max-width: none !important;
        }

        .job-details .map-canvas a,
        .job-details .map-canvas .gm-style-cc,
        .job-details .map-canvas .gmnoscreen {
            display: none !important;
        }

        .job-details table.details {
            border: 1px solid #FFFFFF;
        }

            .job-details table.details tr {
                border: none;
                border-bottom: 1px solid #FFFFFF;
            }

            .job-details table.details td {
                border: none;
            }
}

.details-box {
    background-color: #FFFFFF;
    padding: 15px;
}

    .details-box header:before,
    .details-box header:after {
        content: " ";
        display: table;
    }

    .details-box header:after {
        clear: both;
    }

    .details-box .heading {
        background-color: #0076a6;
        color: #ffffff;
        float: left;
        margin-bottom: 15px;
        max-width: 202px;
        padding: 10px;
        text-transform: uppercase;
        width: 47.5%;
    }

    .details-box .msg-feedback-left-already {
        background-color: #b2b2b2;
        color: #0076a6;
        float: right;
        margin-bottom: 15px;
        max-width: 202px;
        padding: 10px;
        text-transform: uppercase;
        width: 47.5%;
    }

    .details-box .btn--feedback,
    .details-box .btn--upload-fuel-receipt,
    .details-box .btn--upload-poc-pod {
        background-color: #14C497;
        color: #ffffff;
        float: right;
        margin-bottom: 15px;
        max-width: 202px;
        padding: 10px;
        text-align: center;
        text-transform: uppercase;
        width: 47.5%;
    }

    .details-box .btn--delivery-status,
    .details-box .btn--mark-complete,
    .details-box .btn--send-invoice {
        background-color: #13AD84;
        color: #ffffff;
        float: right;
        margin-bottom: 15px;
        max-width: 202px;
        padding: 10px;
        text-align: center;
        text-transform: uppercase;
        width: 47.5%;
    }

    .details-box .btn--proof-of-collection {
        background-color: #13AD84;
        color: #ffffff;
        float: right;
        margin-bottom: 15px;
        max-width: 202px;
        padding: 10px;
        text-align: center;
        text-transform: uppercase;
        width: 47.5%;
    }

    .details-box .btn--proof-of-delivery {
        background-color: #13AD84;
        color: #ffffff;
        float: right;
        margin-bottom: 15px;
        max-width: 202px;
        padding: 10px;
        text-align: center;
        text-transform: uppercase;
        width: 47.5%;
    }

    .details-box .btn--fuel-receipt {
        background-color: #13AD84;
        color: #ffffff;
        float: right;
        margin-bottom: 15px;
        padding: 5px 10px;
        text-align: center;
        text-transform: uppercase;
        width: auto;
    }

    .details-box .btn--block-company {
        color: #099FB3;
    }

    .details-box .btn--unblock-company {
        color: #f00;
    }

    .details-box .content {
        background-color: #fff;
    }

    .details-box .row-field {
        padding: 15px;
        border-bottom: 2px solid #FFFFFF;
        text-transform: uppercase;
    }

@media (max-width: 768px) {
    .details-box .heading {
        font-size: 11px;
        padding: 5px;
    }

    .details-box .msg-feedback-left-already {
        font-size: 11px;
        padding: 5px;
    }

    .details-box .btn--feedback,
    .details-box .btn--upload-fuel-receipt,
    .details-box .btn--upload-poc-pod {
        font-size: 11px;
        padding: 5px;
    }

    .details-box .btn--delivery-status,
    .details-box .btn--mark-complete,
    .details-box .btn--send-invoice {
        font-size: 11px;
        padding: 5px;
    }

    .details-box .btn--proof-of-collection {
        font-size: 11px;
        padding: 5px;
    }

    .details-box .btn--proof-of-delivery {
        font-size: 11px;
        padding: 5px;
    }

    .details-box .btn--fuel-receipt {
        font-size: 11px;
        padding: 5px;
    }

    .details-box .btn--block-company {
        font-size: 11px;
    }

    .details-box .btn--unblock-company {
        font-size: 11px;
    }
}

@media print {
    .details-box {
        padding-left: 0;
        page-break-inside: avoid !important;
    }

        .details-box .heading {
            background-color: #ccc !important;
            margin: 0;
        }

        .details-box .content {
            border: 1px solid #FFFFFF;
            padding-left: 0;
        }

        .details-box .row-field {
            border-bottom: 1px solid #FFFFFF;
            padding: 8px;
        }

        .details-box .msg-feedback-left-already,
        .details-box .btn--feedback,
        .details-box .btn--upload-fuel-receipt,
        .details-box .btn--upload-poc-pod,
        .details-box .btn--delivery-status,
        .details-box .btn--mark-complete,
        .details-box .btn--send-invoice,
        .details-box .btn--proof-of-collection,
        .details-box .btn--proof-of-delivery,
        .details-box .btn--fuel-receipt,
        .details-box .btn--block-company,
        .details-box .btn--unblock-company {
            display: none;
        }
}

table.details {
    width: 100%;
}

    table.details tr {
        border-bottom: 2px solid #FFFFFF;
        border-left: 2px solid #FFFFFF;
    }

    table.details th,
    table.details td {
        padding: 13px;
        background-color: #fff;
    }

    table.details th {
        background-color: #e7e7e7;
        color: black;
        font-weight: normal;
        text-transform: uppercase;
    }

@media print {
    table.details {
        border: 1px solid #FFFFFF;
    }

        table.details tr {
            border: none;
            border-bottom: 1px solid #FFFFFF;
        }

        table.details th,
        table.details td {
            border: none;
            background-color: #fff;
            color: black;
            font-size: 10px;
            padding: 8px;
            text-transform: uppercase;
        }
}

.vehicles-list.tabbable {
    background-color: #e7e7e7;
    padding: 5px;
}

    .vehicles-list.tabbable .nav-tabs {
        border: none;
    }

        .vehicles-list.tabbable .nav-tabs li {
            border: none;
        }

            .vehicles-list.tabbable .nav-tabs li a {
                background-color: #b2b2b2;
                border: none;
                -webkit-border-radius: 0;
                border-radius: 0;
                color: #fff;
                font-size: 12px;
                padding: 8px 5px;
                margin-right: 5px;
            }

                .vehicles-list.tabbable .nav-tabs li a.returnVehicles,
                .vehicles-list.tabbable .nav-tabs li a.onwardJobs,
                .vehicles-list.tabbable .nav-tabs li a.multipleDropOff {
                    background-color: #14C497 !important;
                    border-color: #14C497 !important;
                    color: #fff !important;
                }

            .vehicles-list.tabbable .nav-tabs li.active a {
                background-color: #fff;
                color: #0076a6;
            }

    .vehicles-list.tabbable .tab-content {
        position: relative;
        z-index: 1;
    }

@media print {
    .vehicles-list.tabbable .tab-content .tab-pane {
        display: block;
    }
}

table.details--vehicles tr {
    border-bottom: 2px solid #FFFFFF !important;
    border-right: none;
}

table.details--vehicles th {
    background-color: #fff;
    border: none;
    border-right: 1px solid #FFFFFF;
    font-size: 12px;
    padding: 8px;
}

table.details--vehicles td {
    font-size: 12px;
    padding: 8px;
}

    table.details--vehicles th:last-child,
    table.details--vehicles td:last-child {
        border-right: none;
    }

    table.details--vehicles th.last-cell,
    table.details--vehicles td.last-cell {
        border-right: none;
    }

table.details > tbody > tr.selected > td {
    background-color: #0076a6;
    color: #fff;
}

.vehicle-row-show-all-prompt {
    display: block;
}

.vehicle-row-printable {
    display: none;
}

.vehicle-row {
    display: table-row;
}

    .vehicle-row.aborted td {
        background-color: #f2dede;
    }

@media print {
    .vehicle-row-show-all-prompt {
        display: none;
    }

    .vehicle-row {
        display: none;
    }

    .vehicle-row-printable {
        display: table-row;
    }
}

.job-details-wrapper-row > td {
    background-color: #f0f0f0;
}

.job-details-flyout {
    position: relative;
}

    .job-details-flyout.tabbable > .nav li a {
        background-color: #b2b2b2;
        border: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        color: #fff;
        font-size: 12px;
        padding: 8px;
        margin-right: 5px;
    }

    .job-details-flyout.tabbable > .nav li.active a {
        background-color: #0076a6;
    }

    .job-details-flyout.tabbable > .nav li.green-tab a {
        background-color: #14C497;
    }

    .job-details-flyout.tabbable > .nav li.amber-tab a {
        background-color: #FF8426;
    }

    .job-details-flyout.tabbable > .nav li.simple-link {
        float: right;
    }

        .job-details-flyout.tabbable > .nav li.simple-link a {
            background-color: #fff;
            border: 1px solid #0076a6;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            color: #0076a6;
            font-size: 12px;
            padding: 4px 10px;
            margin-left: 3px;
            margin-right: 0px;
        }

    .job-details-flyout.tabbable > .nav li.close-link {
        float: right;
    }

        .job-details-flyout.tabbable > .nav li.close-link a {
            background-color: transparent;
            border: none;
            color: #0076a6;
            font-size: 18px;
            margin: 3px 0px 0px 10px;
            padding: 0;
        }

    .job-details-flyout.tabbable .tab-content .job-details {
        padding: 0 15px;
    }

    .job-details-flyout.tabbable .tab-content .job-details-inner {
        background-color: #0076a6;
        padding: 10px 10px 10px 0;
    }

        .job-details-flyout.tabbable .tab-content .job-details-inner > div {
            padding: 0 0 0 10px;
        }

    .job-details-flyout.tabbable .tab-content .job-details table.details tr {
        border-bottom: 2px solid #0076a6;
        border-left: none;
    }

    .job-details-flyout.tabbable .tab-content .job-details table.details th {
        text-align: left;
        width: 190px;
    }

    .job-details-flyout.tabbable .tab-content .job-details table.details td {
        text-align: left;
    }

        .job-details-flyout.tabbable .tab-content .job-details table.details td.map-marker-cell img {
            max-height: 17px;
        }

        .job-details-flyout.tabbable .tab-content .job-details table.details td.service-type-cell {
            padding-bottom: 0px;
            padding-top: 5px;
        }

    .job-details-flyout.tabbable .tab-content .job-details table.details tr.tracking-row th {
        background-color: #0076a6;
        border: none;
        padding: 0;
    }

    .job-details-flyout.tabbable .tab-content .job-details table.details tr.tracking-row td {
        background-color: #0076a6;
        border: none;
        padding: 0 0 0 2px;
    }

    .job-details-flyout.tabbable .tab-content .job-details table.details tr.tracking-row .green-cell {
        background-color: #13AD84;
        color: #fff;
        border: 1px solid #fff;
        padding: 12px;
        position: relative;
    }

    .job-details-flyout.tabbable .tab-content .job-details table.details tr.tracking-row .green-cell-border {
        border: 1px solid #fff;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .job-details-flyout.tabbable .tab-content .job-details .map-canvas {
        height: 358px;
        margin-bottom: 0;
        min-height: 358px;
        width: 100%;
    }

    .job-details-flyout.tabbable .tab-content .job-details .vehicles-list table.details tr {
        border-bottom: 2px solid #FFFFFF;
    }

    .job-details-flyout.tabbable .tab-content .job-details .vehicles-list table.details th {
        text-align: left;
        width: auto;
    }

    .job-details-flyout.tabbable .tab-content .job-details .vehicles-list table.details td {
        text-align: left;
    }

    .job-details-flyout.tabbable .tab-content .new-quotes-details {
        background-color: #0076a6;
    }

    .job-details-flyout.tabbable .tab-content .new-quotes-details-inner {
        padding: 0 10px 10px 10px;
    }

        .job-details-flyout.tabbable .tab-content .new-quotes-details-inner > table {
            border: 1px solid #fff;
            margin: 0;
        }

    .job-details-flyout.tabbable .tab-content .customer-supplier-quote-details {
        padding: 0 15px;
    }

    .job-details-flyout.tabbable .tab-content .customer-supplier-quote-details-inner {
        background-color: #0076a6;
        padding: 10px 10px 10px 0;
    }

        .job-details-flyout.tabbable .tab-content .customer-supplier-quote-details-inner > div {
            padding: 0 0 0 10px;
        }

    .job-details-flyout.tabbable .tab-content .customer-supplier-quote-details table.details th {
        text-align: left;
        width: 202px;
    }

    .job-details-flyout.tabbable .tab-content .customer-supplier-quote-details table.details td {
        text-align: left;
    }

        .job-details-flyout.tabbable .tab-content .customer-supplier-quote-details table.details td.service-type-cell {
            padding-bottom: 0px;
            padding-top: 5px;
        }

    .job-details-flyout.tabbable .tab-content .collection-delivery-details {
        padding: 0 15px;
    }

    .job-details-flyout.tabbable .tab-content .collection-delivery-details-inner {
        background-color: #0076a6;
        padding: 10px 10px 10px 0;
    }

        .job-details-flyout.tabbable .tab-content .collection-delivery-details-inner > div {
            padding: 0 0 0 10px;
        }

    .job-details-flyout.tabbable .tab-content .collection-delivery-details .details-box .content {
        text-align: left;
    }

        .job-details-flyout.tabbable .tab-content .collection-delivery-details .details-box .content .row-field.company-address-field {
            min-height: 112px;
        }

    .job-details-flyout.tabbable .tab-content .assigned-drivers-details {
        padding: 0 15px;
    }

    .job-details-flyout.tabbable .tab-content .assigned-drivers-details-inner {
        background-color: #0076a6;
        padding: 10px 10px 10px 0;
    }

        .job-details-flyout.tabbable .tab-content .assigned-drivers-details-inner > div {
            padding: 0 0 0 10px;
        }

    .job-details-flyout.tabbable .tab-content .assigned-drivers-details .details-box .content {
        text-align: left;
    }

        .job-details-flyout.tabbable .tab-content .assigned-drivers-details .details-box .content .row-field.company-address-field {
            min-height: 112px;
        }