html,
body {
    height: 100%;
    font-weight: bold;
}


@media screen and (max-width:1024px) {
    body {
        cursor:pointer;
    }
}

body.buttons {
    padding-top: 40px;
}

.container-fluid {
    margin-top: 10px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

.nobuttons nav {
    display:none;
}

@media screen and (max-width:768px) {
    nav {
        display:none;
    }
}

#mobileNav {
    display:none;
}

@media screen and (max-width:768px) {
    #mobileNav {
        display:block;
        position:fixed;
        top:5px;
        left:15px;
        z-index:4;
    }

    #menuFlyout {
        background-color:#fff;
        display:block;
        width:25vw;
        border:1px solid grey;
        box-shadow:3px 3px 3px grey;
        display:none;
        z-index:4;
    }

    #menuFlyout a {
        display:block;
        padding:6px 12px;
    }
}

#legendOverlay {
    position:fixed;
    width:100%;
    height:100%;
    display:block;
    left:0;
    top:0;
    background-color:rgba(0,0,0,0.5);
    display:none;
}

#legendOverlay article {
    position:absolute;
    left:50%;
    top:50%;
    background-color:#fff;
    width:33%;
    display:block;
    padding:6px 15px;
    transform:translate(-50%, -50%);
    border-radius:5px;
}

#legendOverlay button {
    position:absolute;
    right:5px;
    top:5px;
}

#jobColorLegend p {
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

#jobColorLegend i, #jobColorLegend .colorKey {
    margin-right:10px;
    display:inline-block;
    width:20px;
    font-size:1.5rem;
}

#jobColorLegend .colorKey {
    height:20px;
    border-radius:5px;
    border:1px solid black;
}

#jobCodeLegend li {
    font-weight:normal;
}

.international {
    background-color: #a9d08e;
}

.interstate {
    background-color: #ffffff;
}

.intrastate, .intra {
    background-color: #00b0f0;
}

.local {
    background-color: #fcfc00;
}

.labor {
    background-color: #fc90aa;
}

.warehouse {
    background-color: #fcd8ff;
}

.containers {
    background-color: #f89708;
}

.deleted {
    text-decoration: line-through;
    opacity: 0.5;
}

.changed {
    background-color:#f00;
}

.planDate {
    background-color:#c90606;
}


/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

tr {
    background-color: #f9f9f9;
    height: 40px;
}

tr, thead {
    border: 2px black solid;
}

/*.changed {
    border: 3px red solid !important;
}*/

.kv-grid-group {
    font-size: 16px;
}

.orange {
    color: #d66a00;
}

.delivery {
    background-color: #00fc00;
}

.green {
    color: #667f1a;
}

.changed_fill {
    background-color: red !important;
    color: #FFF;
}

.site-login {
    width: 500px;
    margin: auto;
    border: 1px solid black;
    padding: 20px;
    border-radius: 2px;
    background-color: #f9f9f9;
}

.site-login button {
    text-align: center;
}

.center {
    text-align: center;
}



/******************** Infopanel Styles ********************/

.infopanel {
    position:fixed;
    width:95vw;
    height:95vh;
    background-color:#d9edf7;
    box-shadow: 3px 3px 3px grey;
    top:15px;
    left:50vw;
    transform:translate(-50%, 0);
    z-index:3;
}

.job-about {
    padding-top: 20px;
    height:100%;
}

.job-about header {
    display:flex;
    justify-content:space-between;
    padding:6px 15px;
}

.job-about header section {
    display:flex;
    justify-content:space-between;
}

.job-about header .infopanelButtonsLeft {
    width:180px;
    position:relative;
}

.job-about header #inlineInfo {
    display:none;
}


.job-about header .infopanelButtonsRight {
    width:120px;
}

.job-about #infoRow {
    display:flex;
    padding:6px 15px;
    flex-wrap:wrap;
    justify-content:space-between;
}

.job-about #infoRow p {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-weight:normal;
}

.job-about #infoRow p strong {
    margin-bottom:-20px;
}

.job-about main {
    max-height:60vh;
    overflow-y:auto;
}

.job-about main article {
    background-color:#fff;
    margin:5px;
}

.job-about main article h4 {
    font-weight:bold;
    padding:6px 12px;
    position:relative;
}

h4 .glyphicon {
    position:absolute;
    right:5px;
    top:50%;
    transform:translateY(-50%);
}

.job-about main article section {
    display:block;
    height:0px;
    overflow-y:hidden;
    padding:0 15px;
    transition:height .5s, padding .5s;
    font-weight:normal;
}

.job-about main article section.open {
    height:150px;
    padding:15px;
    overflow-y:auto;
}

.job-about main article .customerDetails {
    display:flex;
}

.job-about main article .customerDetails p {
    width:49%;
    display:inline-block;
    font-weight:normal;
}

.job-about main article .jobDetails p {
    width:100%;
    display:block;
    font-weight:normal;
}

.job-about main article .jobDetails .distanceContainer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.job-about main article .jobDetails .distanceContainer div {
    text-align:center;
}

.job-about main article .jobDetails .agentContainer {
    display:flex;
    justify-content: space-between; 
}

.job-about header div {
    width:auto;
    margin-left:0;
    padding:0;
    position:relative;
}

#moveButtons {
    position:absolute;
    background-color:#fff;
    z-index:2;
    padding:6px 12px;
    box-shadow:3px 3px 3px grey;
    display:none;
    border-radius:5px;
    right:0;
    top:35px;
}

#moveButtons a {
    width:50px;
    box-sizing:content-box;
    display:block;
}

#moveButtons a:first-of-type {
    margin-bottom:6px;
}

/*Tablet Screens*/
@media screen and (max-width:1024px) and (min-width:768px) {
    .infopanel {
        height:90vh;
        top:calc(50vh + 25px);
        transform:translate(-50%, -50%);
    }

    .job-about main {
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        max-height:70vh;
    }

    .job-about main article {
        width:46%;
    }

    .job-about main article section {
        height:200px;
        overflow-y:auto;
    }

    .job-about main article section.open {
        padding:0 15px;
    }    

    .job-about main h4 {
        border-bottom:1px solid grey;
    }

    .job-about main h4 .glyphicon {
        display:none;
    }
}

/*Desktop Screens*/
@media screen and (min-width:1025px) {
    .infopanel {
        top:50vh;
        height:50vh;
        transform:translate(-50%, -50%);
    }

    .job-about {
        padding-top:5px;
    }

    .job-about header {
        padding:5px;
        height:45px;
    }

    .job-about header #inlineInfo {
        display:flex;
        justify-content:space-between;
        width:calc(100% - 350px);
        align-items:center;
    }

    .job-about header #inlineInfo p {
        margin:0;
        font-weight:normal;
    }

    .job-about main {
        display:flex;
        justify-content:space-between;
        height:calc(100% - 45px);
    }

    .job-about main h4 {
        border-bottom:1px solid grey;
    }

    .job-about main h4 .glyphicon {
        display:none;
    }

    .job-about main article {
        height:97%;
    }

    .job-about main article:nth-of-type(1) {
        width:25%;
    }

    .job-about main article:nth-of-type(2) {
        width:37%;
    }

    .job-about main article:nth-of-type(3) {
        width:12.5%;
    }

    .job-about main article:nth-of-type(4) {
        width:24%;
    }

    .job-about main article section {
        height:calc(100% - 52px);
        overflow-y:auto;
    }

    .job-about #infoRow {
        display:none;
    }

}


/*********************************************************************************************************************/


.disabled {
    color: white;
}

.added {
    background-color: green !important;
    color: #FFF;

}

hr.break {
    margin-top: 5px;
    margin-bottom: 5px;
}

.kv-expand-detail-row {
    font-weight: normal;
}


.navbar-fixed-top {
    height: 50px;
    background-color: #FFF;
    border: 0;
}

.kv-expand-icon-cell:hover, .kv-expand-icon-cell:focus {
    background-color: transparent !important;
    cursor: default;
}

.kv-expand-detail-loading {
    background-image: none;
}

.key {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid black;
}

.key-cat {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: inline-block;
}

.panel-equip, .panel-job, .panel-event {
    width: 20%;
    float: right;
    display: none;
    position:fixed;
    right:0;
}

.panel-job a {
    display:block;
    margin-bottom:5px;
}

.btnJob {
    float: right;
    margin-right: 32%;
}

.btnEvent {
    float: right;
    margin-right: 25%;
}

.btnEquip {
    float: right;
    margin-right: 20%;
}

.icofont {
    font-size: 15px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
    border-radius: 3px;
}

.navbar-nav > li > a {
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 22px;
    border-color: #ccc;
    border-radius: 3px;
}

.navbar-text {
    margin-top: 6px;
    margin-bottom: 6px;
}

@media screen and (max-width:1024px) {
    .navbar-text {
        width:200px;
        white-space:nowrap;
        text-align:center;
    }
}

.navbar-form {
    margin-top: 0;
    margin-bottom: 0;
}

.navbar-right {
    margin-right: 15px;
}

@media screen and (max-width:1024px) {
    .navbar-right {
        margin-right:-5px;
    }
}



.kv-grid-group {
    background-color: #d9edf7;
}



.jobCounter {
    background-color:#0f0;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.jobSelected {
    background-color: #AAA;
}

.dispHead {
    width: calc(100vw / 15.3);
}

.dispHeadPx {
    width: 150px;
}

@media screen and (max-width:1024px) {
    .dispHead {
        width:calc(100vw / 7 - 3px);
    }
}

div.expand {
    border-bottom: 1px solid black;
    padding: 4px;
}

div.expand[data-et="PD"] {
    background-color:#c90606;
    color:#fff;
    font-weight:normal;
}

div.expand:last-of-type {
    margin-bottom: -1px;
}

td.header, th.header {
    background-color: #CCC;
}

.off, .drive, .closed, .full, .ask {
    background-color: #bbb;
    vertical-align: middle !important;
    text-align: center;

}

.layover, .declined, .needreload {
    vertical-align: middle !important;
    text-align: center;
}

.drive {
    background-color: #BB8FCE;
}

.unpacking {
    background-color: #fc9000;
}

.intransit {
    background-color: #fc0000;
}

.localmove {
    background-color: #00fcff;
}

.storagein {
    background-color: #fcd8ff;
}

.storagein:after {
    content:' ';
    display:block;
    clear:both;
}

.storageout {
    background-color: #fcd8ff;
}

.storageout:after {
    content:' ';
    display:block;
    clear:both;
}

#w0 > table > tbody > tr > td, #w0 > table > tbody > tr, #w0 > table > tbody > tr > th {
    border: 1px solid #000;
}

td.job {
    padding: 0 !important;
}

#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:transparent;
    display: none;
    background-color:rgba(0,0,0,0.5);
}

.conflict {
    background-color: #FF0000;
    color: white;
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes example {
    0%   {background-color: red; color: white}
    25%  {background-color: white; color: black}
    50%  {background-color: white; color: black}
    100% {background-color: red; color: white}
}

.equip {
    border: 1px solid black;
    width: 130px;
    padding: 5px;
    text-align: center;
    margin-bottom: 10px;
}

.unavailable {
    background-color: #c9302c;
    color: #FFF;
}

.service {
    background-color: #f0ad4e;
    color: #FFF;
}

.available {
    background-color: #449d44;
    color: #FFF;
}

.onloan {
    background-color: #31b0d5;
    color: #FFF;
}

.splash {
    background-color: #000;
    text-align: center;
}

.splash-logo {
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

.site-splash {
    height: 100vh;
    width: 100vw;
    position: relative;
}

.nojob {
    /*background-color: black;*/
}

.expand, .nojob {
    font-size: 11px;
}

.arpin {
    text-align: center;
    width:100%;
    height:auto;
}

.disp-icon {
    float: right;
}

.navbar-form {
    margin-right: 35px !important;
}

.icofont-cur-dollar, .icofont-star {
    font-size: 14px;
}

.arpin-blue {
    color: #223f7b;
}

.sideheader {
    background-color: #888 !important;
    color: #fff;
    font-size: 30px;
    vertical-align: middle !important;
    text-align: center;
}

.tableWrapper {
    position:relative;
}

/*.dispatchTable {
    position:relative;
}*/

.driverOverlay {
    position:absolute;
    top:0;
    left:0;
    background-color:transparent !important;
    pointer-events:none;
    
}

.driverOverlay thead .dispHeadPx{
    visibility:hidden;
}

.driverOverlay tbody td{
    visibility:hidden;
    white-space:nowrap;
}

.right {
    float: right;
}

.needreload {
    background-color: #f89708;
}

#leftHeader thead .dispHeadPx, #leftHeader td {
    display: none;
}

#leftHeader tr {
    border-right: 0;
}

#leftHeader thead {
    border:0;
}

#leftHeader thead th {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}


#leftHeader {
    position:fixed;
    left:16px;
    top:50px;
    z-index: 2;
    border-left:1px solid black;
}

.nobuttons #leftHeader {
    top:0;
}

#leftHeader tbody tr {
    border-top:2px solid transparent;
}

#leftHeader:before {
    content: '';
    position: absolute;
    left: -18px;
    top: -1px;
    height: 110%;
    width: 17px;
    background-color: white;
}

#tableHead {
    position:fixed;
    top:50px;
    left:15px;
    z-index:2;
    margin:0;
}

.nobuttons #tableHead {
    top:0;
}

#tableHead thead th {
    visibility:hidden;
}

#tableMain thead {
    visibility:hidden;
}

.nobuttons #tableMain thead {
    visibility:visible;
}

#tableMain tbody th {
    visibility:hidden;
}

.nobuttons #tableMain tbody th {
    visibility:visible;
}

@media screen and (max-width: 768px) {
    #leftHeader:after {
        content:'';
        display:block;
        position:fixed;
        left:0;
        top:0;
        height:50px;
        width:100%;
        background-color:white;
    }
}

.spreadLine {
    text-align:center;
    background-color:#EC5A2F;
    margin:0;
    cursor:pointer;
}

.spreadEvent, .spreadStart {
    position:relative;
    border-bottom:1px solid black;
    border-right:1px solid black;
    padding-right:10px !important;
    padding-bottom:12x !important;
}

.spreadStart {
    padding-right:5px !important;
    padding-left:10px !important;
    border-right:0;
    border-left:1px solid black;
}

.spreadEvent::before {
    content:'';
    position:absolute;
    display:block;
    width:calc(100% - 2px);
    height:calc(100% - 1px);
    right:2px;
    bottom:1px;
    border-bottom:1px solid black;
    border-right:1px solid black;
}

.spreadEvent::after {
    content:'';
    position:absolute;
    display:block;
    width:calc(100% - 6px);
    height:calc(100% - 4px);
    right:6px;
    bottom:4px;
    border-bottom:1px solid black;
    border-right:1px solid black;
}

.spreadStart::before {
    content:'';
    position:absolute;
    display:block;
    width:calc(100% - 2px);
    height:calc(100% - 1px);
    left:2px;
    bottom:1px;
    border-bottom:1px solid black;
    border-left:1px solid black;
}

.spreadStart::after {
    content:'';
    position:absolute;
    display:block;
    width:calc(100% - 6px);
    height:calc(100% - 4px);
    left:6px;
    bottom:4px;
    border-bottom:1px solid black;
    border-left:1px solid black;
}

#spreadDateOverlay {
    position:absolute;
    left:50%;
    top:50%;
    display:block;
    background-color:#fff;
    width:50vw;
    height:50vh;
    border:2px solid black;
    transform:translate(-50%, -50%);
    border-radius:5px;
    padding:6px 12px;
    background-color:#D9EDF7;
}

.spreadDetails {
    display:block;
    width:100%;
    border:1px solid black;
    margin-bottom:10px;
    padding:6px 12px;
    background-color:#fff;
}

.spreadDetails span {
    margin-right:20px;
}

.spreadDetails.DE {
    background-color:#00fc00;
}

.spreadDetails.PK {
    background-color:#FC90AA;
}

.spreadDetails.PU {
    background-color:#FCFC00;
}