@import url(//fonts.googleapis.com/css?family=Muli:400,300italic,300,400italic);

body {
    font-family: 'Muli', sans-serif;
    padding-top: 50px;
    padding-bottom: 20px;
    cursor: default;
    height: 100vh;
}

:focus, :active {
    outline: 0 !important;
}

a.disabled {
    pointer-events: none;
}

    a.disabled i {
        color: #ccc;
        text-decoration: underline double #f00;
    }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: bold;
}

footer {
    font-size: 10px;
}

.pad-top4 {
    padding-top: 4px;
}

.pad-top8 {
    padding-top: 8px;
}

.pad-top10 {
    padding-top: 10px;
}

.pad-top20 {
    padding-top: 20px;
}

.text-bold {
    font-weight: bold;
}

.text-strikethrough {
    text-decoration: line-through;
}

.pre-line {
    white-space: pre-line;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use in combination with text-ellipsis. A width or max width must be specified for ellipsis to work*/
.small-col {
    max-width: 120px;
}

.med-col {
    max-width: 240px;
}

.large-col {
    max-width: 360px;
}

#pbDME {
    position: relative;
    bottom: 6px;
    height: 24px;
    width: 125px;
    background-image: url("Images/pbDMEconnect.png");
    -ms-background-repeat: no-repeat;
    background-repeat: no-repeat;
    float: right;
}

/* Set width on the form input elements since they're 100% wide by default */
.adminAreaContainer input,
.adminAreaContainer select,
.adminAreaContainer textarea,
.adminAreaContainer .form-panel,
.adminAreaContainer .combobox-container .input-group {
    max-width: 500px;
}

.form-panel {
    position: relative;
}

textarea {
    width: 100%;
}

/*Extra table styles*/
.table tr.no-border > th,
.table tr.no-border > td {
    border: none;
}

/* Extra button styles */
.btn-inverse {
    color: #fff;
    background-color: #333333;
}

    .btn-inverse:hover,
    .btn-inverse:focus,
    .btn-inverse:active,
    .btn-inverse.active,
    .btn-inverse.disabled,
    .btn-inverse[disabled] {
        color: #FFF;
        background-color: #555555;
    }

#loginLink {
    margin-top: 5px;
}
/* navbar styles */
.navbar-inverse {
    background-color: #333;
    border-color: #333;
    background-image: none;
}

    .navbar-inverse .navbar-toggle {
        border-color: #FFFFFF;
    }

        .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
            background-color: #666;
        }

    .navbar-inverse .navbar-nav > li > select {
        margin: 15px 0;
    }

    .navbar-inverse .navbar-nav > .open > a,
    .navbar-inverse .navbar-nav > .open > a:hover,
    .navbar-inverse .navbar-nav > .open > a:focus {
        background-color: #aaaaab;
    }

    .navbar-inverse .navbar-nav > li > a {
        color: #FFF;
    }

        .navbar-inverse .navbar-nav > li > a:hover,
        #nav-expander:hover {
            color: #ffaa00;
        }

.navbar-brand {
    padding: 0;
}

.navbar > .container .navbar-brand {
    margin: 0;
}

.navbar-header {
    margin-left: 0 !important;
}

a.nav-expander {
    color: #FFFFFF;
    display: block;
    height: 40px;
    margin-left: 0;
    padding: 11px 0;
    -ms-transition: left 0.3s ease-in-out 0s;
    -o-transition: left 0.3s ease-in-out 0s;
    -webkit-transition: left 0.3s ease-in-out 0s;
    transition: left 0.3s ease-in-out 0s;
    width: 48px;
    z-index: 12;
}

    a.nav-expander:hover {
        cursor: pointer;
    }

#module-nav {
    display: block;
    background: #FFFFFF;
    height: 100%;
    overflow: auto;
    position: fixed;
    left: -200px;
    top: 0;
    width: 200px;
    z-index: 2000;
    -ms-transition: left 0.3s ease-in-out 0s;
    -webkit-transition: left 0.3s ease-in-out 0s;
    -moz-transition: left 0.3s ease-in-out 0s;
    -o-transition: left 0.3s ease-in-out 0s;
    transition: left 0.3s ease-in-out 0s;
}

    #module-nav.nav-expanded {
        left: 0;
        box-shadow: 2px 0 3px #999;
    }

nav#module-nav #nav-title {
    background-color: #00264c;
    color: #FFF;
    padding: 14px;
    font-size: 19px;
    font-weight: bold;
}

nav#module-nav #nav-close {
    color: #FFF;
    -ms-opacity: 0.4;
    opacity: 0.4;
}

nav#module-nav .app-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

    nav#module-nav .app-menu li {
        border-bottom: 1px solid #CCC;
        margin-left: 0;
        font-size: 14px;
    }

        nav#module-nav .app-menu li:hover {
            background-color: #0052a4;
        }

        nav#module-nav .app-menu li a {
            color: #333;
            display: block;
            padding: 10px;
        }

            nav#module-nav .app-menu li a:hover {
                color: #fff;
                text-decoration: none;
            }

        nav#module-nav .app-menu li .sub-nav {
            border-bottom: 0;
            padding: 4px;
        }

#HomeImage {
    display: inline-block;
    background-image: url(images/IPN-Logo.png);
    margin-top: 5px;
    -ms-background-repeat: no-repeat;
    background-repeat: no-repeat;
    -ms-background-size: 100% auto;
    background-size: 100% auto;
    width: 45px;
    height: 40px
}

#siteNav .navbar {
    min-height: 20px;
}

#siteNav .navbar-default {
    -ms-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
    border-left: none;
    border-right: none;
}

#siteNav .navbar-nav > li > a {
    padding: 5px;
}

    #siteNav .navbar-nav > li > a:active {
        background-color: #aaaaab;
        color: white;
    }

#siteNav .navbar-nav > li {
    padding: 0 2px;
}

    #siteNav .navbar-nav > li:first-child {
        padding-left: 0;
    }

    #siteNav .navbar-nav > li:last-child {
        padding-right: 0;
    }

.adminSecondMenu .navbar-nav,
.shopfloorSecondMenu .navbar-nav{
    margin: 0;
}

.user-data {
    color: #333;
}

.partnerProducer {
    padding: 5px;
}

/*Main Admin Menu Hover*/
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    text-decoration: none;
    color: white;
    background-color: #4f985e;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: white;
    background-color: #aaaaab;
}

/* Modal styles*/
.modal-header-inverse {
    background-color: #333;
    color: #FFF;
    -ms-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

    .modal-header-inverse button.close {
        color: #FFF;
        -ms-opacity: .5;
        opacity: .5;
    }

.modal-backdrop {
    pointer-events: none;
}


/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

.pagination {
    margin: 0;
}

    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
        background-color: #8cc540;
        border-color: #8cc540;
    }

    .pagination > li > a, .pagination > li > span {
        background-color: #fff;
        color: #8cc540;
    }

        .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
            color: #6f9b1e;
        }

.pager-wrapper {
    text-align: right;
}

    .pager-wrapper > span {
        margin: 4px 10px
    }

.order-queue .pager-wrapper > span {
    margin: 4px 10px
}

.pagination-container {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

/*Styling for standard message boxes*/
.modal-error {
    color: black;
    background-color: white;
}

.modal-error h4 {
    color: #a40004;
}

/*Home*/
.container .jumbotron {
    margin-top: 20px;
    background: url(Images/ipn-banner.jpg) no-repeat top left;
    -ms-background-size: cover;
    background-size: cover;
    border: 1px solid #ccc;
    color: #FFF;
    text-shadow: 2px 2px 4px #333;
}

/* Set with screen width above 768px */
@media screen and (min-width: 768px) {
    .orderDetailFlex {
        display: flex;
    }
}

@media only screen and (max-width: 4000px) {
    .jumbotron {
        height: 240px;
    }
}

@media only screen and (max-width: 1200px) {
    .jumbotron {
        height: 198px;
    }
}

@media only screen and (max-width: 991px) {
    .jumbotron {
        height: 150px;
    }
}

@media only screen and (max-width: 768px) {
    .jumbotron {
        height: 150px;
    }
}

@media only screen and (max-width: 480px) {
    .jumbotron {
        height: 90px;
    }
}

@media only screen and (max-width: 320px) {
    .jumbotron {
        height: 50px;
    }

    #HomeImage {
        width: 32px;
        height: 30px
    }
}

/*vertically centered content*/
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

/* Set with screen width above 768px */
@media screen and (min-width: 768px) {
    .equal, .equal > div[class*='col-'] {
        display: -webkit-flex;
        display: flex;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        -o-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    #siteNav {
        position: fixed;
        width: 100%;
        z-index: 1000;
    }
}

@media only screen and (max-width: 480px) {
    .equal, .equal > div[class*='col-'] {
        display: block;
    }
}

.pointer {
    cursor: pointer;
}

/*filter*/
.order-queue #filter .form-group {
    margin-bottom: 0;
}

/*order-grid*/
.order-queue > .order-grid-wrapper {
    margin-top: 10px;
}

    .order-queue > .order-grid-wrapper ~ .order-grid-wrapper {
        margin-top: 5px;
    }


.order-grid {
    width: 100%;
}

.order-grid-header-row {
    background-color: #bfbfbf;
    color: #333;
}

    .order-grid-header-row.reprint {
        background-image: linear-gradient(90deg, transparent 90%, rgba(255,255,255,0.5) 100%);
        background-size: 10px 10px;
    }

    .order-grid-header-row.transmitted {
        background-color: #cac7af;
    }

    .order-grid-header-row.test-order {
        background-color: #BB99CC;
    }

    .order-grid-header-row.danger {
        background-color: #ffaaaa;
    }

    .order-grid-header-row td {
        line-height: 1em;
    }

.order-grid-btn, .order-grid-btn:active, .order-grid-btn:focus {
    margin-left: 5px;
    margin-top: 8px;
    display: inline-block;
    font-size: 18px;
    text-shadow: 1px 1px 2px #999;
}

.grid-btn, .grid-btn:active, .grid-btn:focus {
    font-size: 16px !important;
    text-shadow: 1px 1px 2px #999;
}

.view-order-btn, .view-order-btn:active, .view-order-btn:focus {
    color: #fff !important;
}

    .view-order-btn:hover {
        color: #dfdfdf !important;
    }

.job-ticket-btn, .job-ticket-btn:active, .job-ticket-btn:focus {
    color: #ffebb6 !important;
}

    .job-ticket-btn:hover {
        color: #ffdb7d !important;
    }

.order-status-btn, .order-status-btn:active, .order-status-btn:focus {
    color: #0077b5 !important;
}

    .order-status-btn:hover {
        color: #00a0dc !important;
    }

.ship-btn, ship-btn:active, ship-btn:focus {
    color: #71481c !important;
}

.support-btn, support-btn:active, support-btn:focus {
    color: #2f004d !important;
}

.load-btn, load-btn:active, load-btn:focus {
    color: #333 !important;
}

.print-btn, print-btn:active, print-btn:focus {
    color: #333 !important;
}

.notes-btn, notes-btn:active, notes-btn:focus {
    color: #333 !important;
}

.ship-btn:hover {
    color: #553515 !important;
}

.header-label {
    font-size: .7em;
    color: #fff;
}

.order-grid-header-row.danger .header-label {
    color: #b80b0f;
}

.order-header-label {
    font-size: .7em;
    color: #fff;
    display: inline-block;
}

.header-data {
    font-weight: bold;
    line-height: 1.2em !important;
    display: inline-block;
}

.header-data-sm {
    font-size: .8em !important;
    font-weight: normal;
}

.item-env {
    color: #999;
}

.item-box {
    color: #b39430;
}

.order-line-item-list {
    width: 100%;
}

    .order-line-item-list > tbody > tr {
        background-color: #f6f6f6;
    }

        .order-line-item-list > tbody > tr:nth-of-type(odd) {
            background-color: #e8e8e8;
        }

    .order-line-item-list th {
        background-color: #787878;
        color: #787878;
        font-size: .8em;
        font-weight: normal;
    }

        .order-line-item-list th.in {
            color: #FFF;
        }

    .order-line-item-list th, .order-line-item-list td {
        padding: 4px !important;
    }

.order-item-row, .detail-item-row {
    background-color: #FFF;
    border-bottom: 1px solid #DDDDDD;
}

.order-item-reprint-row {
    color: darkmagenta;
}

.order-item-row td {
    vertical-align: top !important;
    padding: 6px;
}

.order-item-row.cancelled {
    color: #dd6666;
}

/*delivery-grid add-ons*/
.delivery-header-row {
    width: 100%;
    background-color: #d3e9ff;
}

.delivery-header-row2 td {
    padding: 0 6px !important;
    line-height: 1em;
}

.delivery-header-row .header-label {
    color: #31708f;
}

.delivery-header-row .order-line-item-list th {
    background-color: #787878;
    color: #787878;
}

    .delivery-header-row .order-line-item-list th.in {
        background-color: #787878;
        color: #FFF;
    }

.hold.delivery-header-row {
    background-color: #ffcccc;
}

    .hold.delivery-header-row .header-label {
        color: #b80b0f;
    }

.cancelled.delivery-header-row {
    background-color: #444;
}

    .cancelled.delivery-header-row .header-label,
    .cancelled.delivery-header-row .header-data {
        color: #dd6666;
    }

    .cancelled.delivery-header-row .cancelled {
        text-decoration: line-through;
    }

.shipped.delivery-header-row {
    background-color: #D7DEC4;
}

    .shipped.delivery-header-row .header-label {
        color: #71481c;
    }

.overdue.delivery-header-row {
    background-color: #FFD061;
}

    .overdue.delivery-header-row .header-label {
        color: #403418;
    }

.reprint.delivery-header-row {
    background-image: linear-gradient(90deg, transparent 90%, rgba(255,255,255,.5) 100%);
    background-size: 10px 10px;
}

.delivery-header-row .btn-hold {
    background-color: #31708f;
    color: #FFF;
}

.delivery-header-row.hold .btn-hold {
    background-color: #222;
    color: #FFF;
}

/* Queue Legend */
#legend {
    position: relative;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px;
    margin-top: 10px;
}

    #legend ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        #legend ul li {
            color: #333;
            float: left;
            font-size: 11px;
            font-weight: normal;
            margin-right: 10px;
        }

            #legend ul li span {
                background-color: #d3e9ff;
                border: 1px solid;
                /*border-radius: 100px;*/
                display: inline-block;
                /*height: 12px;*/
                margin-right: 3px;
                padding: 0 3px;
                vertical-align: middle;
            }

            #legend ul li:last-child {
                margin: 0;
            }

            #legend ul li.overdue span {
                background-color: #FFD061;
                color: #403418;
            }

            #legend ul li.hold span {
                background-color: #ffcccc;
                color: #b80b0f;
            }

            #legend ul li.shipped span {
                background-color: #D7DEC4;
                color: #71481c;
            }

            #legend ul li.cancelled span {
                background-color: #444;
                color: #dd6666;
            }

            #legend ul li.test-order span {
                background-color: #BB99CC;
                color: #FFF;
                border-color: #00264C;
            }

            #legend ul li.transmitted span {
                background-color: #B5B18F;
                color: #FFF;
                border-color: #00264C;
            }

            #legend ul li.reprint span {
                background-color: #bfbfbf;
                background-image: linear-gradient(90deg, transparent 80%, rgba(255,255,255,.5) 90%);
                background-size: 5px 5px;
            }

/*Delivery Dialog*/
.shipment-item-row {
    cursor: pointer;
}

    .shipment-item-row + .cancelled {
        cursor: default;
        color: #dd6666;
        background-color: #ddd;
    }

        .shipment-item-row + .cancelled:hover {
            background-color: #ddd;
        }

/*myModal Overrides*/
#myModal select,
#myModal .carton-row.info {
    cursor: pointer;
}

#myModal input[type="date"] {
    cursor: text;
}

/*universal message box for blockUI*/
#universalMsgBox {
    background-color: #666;
    box-shadow: 0 3px 6px #999;
    color: #333;
    -ms-border-radius: 4px;
    border-radius: 4px;
    padding: 4px;
    min-height: 40px;
    min-width: 350px;
    cursor: default;
    position: relative;
}

    #universalMsgBox .alert-danger {
        background-color: #fff;
        border-color: #a40004;
        border-width: 4px;
        color: #a40004;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

/*new edit-box note editor like jira*/
.edit-box {
    background-color: transparent;
    display: block;
    padding: .2em;
    cursor: pointer;
    padding-right: 12px;
}

    .edit-box:hover {
        background-color: #FFF;
        border: 1px solid #BBB;
        background-image: url(/Content/Images/bg-edit-pencil.png);
        -ms-background-position: top right;
        background-position: top right;
        -ms-background-repeat: no-repeat;
        background-repeat: no-repeat;
    }

.edit-box-textarea {
    max-width: none;
    width: 100%;
}

.edit-box-controls {
    display: block;
    text-align: right;
    margin: 3px 0;
}

.edit-box-cancel, .edit-area-submit {
    cursor: pointer;
}

/*Support: Order Detail: Order Summary well*/
.details-order-summary {
    margin: 0;
    background-color: #dedede;
    color: #333;
    height: 100%;
    width: 100%;
    font-size: 10px;
    border-color: #333;
}

    .details-order-summary.transmitted {
        background-color: #DEDAB8;
    }

    .details-order-summary.test-order {
        background-color: #E3C1F4;
    }

    .details-order-summary.reprint {
        background-image: repeating-linear-gradient( to right, transparent, transparent 30px, rgba(255,255,255,0.5) 31px, rgba(255,255,255,0.5) 0);
    }

/*Support: Order Detail: Shipments*/
tr.warning .header-label {
    color: #8a6d3b;
}

tr.danger .header-label {
    color: #333;
}

tr.delivery-carton .header-label {
    color: #8a6d3b;
}

    tr.delivery-carton .header-label.header-alert {
        color: #8a6d3b;
    }

tr.warning .header-data, tr.delivery-carton .header-data {
    font-size: 1em !important;
}

tr.danger .header-data {
    text-decoration: line-through;
}

/*Admin Index table columns*/
.rud-col {
    width: 60px;
}

.link-col {
    width: 44px;
}

/*thumbnail edit btns*/
.clear-image-btn {
    margin-top: 5px;
}

/*Disable form fields*/
.form-control.disabled {
    pointer-events: none;
    -ms-opacity: 0.5;
    opacity: 0.5;
}

    .form-control.disabled:hover {
        cursor: not-allowed;
    }

/*Shopfloor Details*/
.top-buffer {
    cursor: default;
    margin-top: 15px;
}

/*#region Item Print Job Message*/
.itemPrintMessageBox {
    margin: 5px;
    padding: 10px;
    background-color: floralwhite;
    border: 1px solid lightgray;
}

.itemErrorMessageBox {
    margin: 5px;
    padding: 10px;
    background-color: floralwhite;
    border: 1px solid firebrick;
}

.printMessage.success > .itemPrintMessageBox {
    margin: 5px;
    padding: 10px;
    background-color: #e6f3e6;
    border: 1px solid #00c722;
}
/*#endregion Item Print Job Message*/

/*Job Ticket*/
.job-ticket-btn,
a.print-btn,
a.notes-btn,
span.fa.item-box {
    text-shadow: 1px 1px 2px #999;
}

    .job-ticket-btn:hover,
    a.print-btn:hover,
    a.notes-btn:hover {
        box-shadow: none;
    }

td.info, td.danger {
    font-size: 11px;
}

/*Order Details*/
.orderDetailPage .noBorderCenterText,
.orderDetailPage .table > tbody > tr.active > th {
    border: none;
    /*text-align: center;*/
    background-color: transparent;
    padding: 5px;
}

.orderDetailPage h4.panel-title {
    margin-top: 5px;
}

#ItemsHeading {
    padding: 5px 15px;
}

.widthMax {
    width: 100%;
}

.widthHeight {
    height: 100%;
}

/*Cancel Order Items Modal*/
#cancelOrderItemsModal .radio input {
    margin-top: 5px;
}

#cancelOrderItemsModal .radio label {
    margin-top: 5px;
    padding: 0;
}

.itemToDelete {
    position: relative;
    top: 5px;
    left: 2px;
}

/*CSS changes to support a slightly different UI layout used on some newer admin pages*/

.theme-v2 .pager-wrapper {
    text-align: left;
    margin-bottom: 10px;
}
.theme-v2 .pagination-container {
    margin-left: 0;
}

/*Fix checkbox and radio buttons being too low (probably caused by usage a smaller font size for the theme)*/
.theme-v2 .checkbox input[type="checkbox"], .theme-v2 .radio input[type="radio"] {
    margin-top: 1px;
}

/*Fix default checkbox margin messing up 'naked' checkboxes in tables and elsewhere*/
.theme-v2 input[type="checkbox"] {
    margin-top: 0;
}

/*Faster modal fade in without the slide up animation*/
.theme-v2 .modal.fade .modal-dialog, .theme-v2 .modal.in .modal-dialog {
    -webkit-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

.theme-v2 .modal.fade {
    -webkit-transition: opacity .05s linear;
    -o-transition: opacity .05s linear;
    transition: opacity .05s linear;
}

/* dynamic modal errors*/
.overflowWrap {
    overflow-wrap: break-word;
}

/*This changes the validate error message to red*/
form .error {
    color: red;
}