@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

body * {
    font-size: 1.0em !important;
    font-family: Montserrat, sans-serif;
}

input[type=checkbox] {
    position: absolute;
    left: -9999px;
}

.inputNotSlide {
    position: relative !important;
    left: 0 !important;
}

    .inputNotSlide input[type=checkbox] {
        position: relative;
        left: 0px;
    }

table tr td {
    vertical-align: middle !important;
}

.marginTop20 {
    margin-top: 20px;
}

.ui-helper-hidden-accessible {
    display: none;
}

.gridview tbody tbody tr:nth-child(even) {
    background-color: transparent;
}

.ui-autocomplete {
    max-width: 400px;
}

.file-upload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

    .file-upload input.file-input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }

.callout {
    position: inherit !important;
}

ul {
    list-style-type: none !important;
}

body {
    font-size: 0.7em;
    color: #666;
    background-color: #fff;
    color: black;
}

h5 {
    text-align: left;
    width: 100%;
    font-size: 2.0em;
    color: #fff !important;
    background-color: #DF7A7A !important;
    font-weight: normal;
    border-left: solid 3px #333;
    padding-left: 5px !important;
    font-weight: bold !important;
}

h1 {
    /*text-align: left;
		width: 100%;
		font-size: 2.5em !important;
		background-color: #eee;
		color: #333;
		font-weight: normal;
		border-left: solid 10px maroon;
		padding-left: 20px !important;
		text-shadow: -2px 2px 3px #ccc;*/
    font-size: 1.6em !important;
    width: 100%;
    color: #DF7A7A !important;
}

h6 {
    /*text-align: left;
		width: 100%;
		font-size: 2.5em !important;
		background-color: #eee;
		color: #333;
		font-weight: normal;
		border-left: solid 10px maroon;
		padding-left: 20px !important;
		text-shadow: -2px 2px 3px #ccc;*/
    font-size: 1.6em !important;
    width: 100%;
    color: #DF7A7A !important;
    border-bottom: solid 2px #DF7A7A;
    padding-left: 10px !important;
}

iframe {
    width: 95vw !important;
    height: 70vh !important;
    margin: auto;
    overflow: scroll;
}

.columns {
    margin-top: 5px;
}

.tabs-title a {
    border: none;
    background-color: white !important;
    color: #333333 !important;
    font-size: 1.0em !important;
}

.tabs-title.is-active {
    /*border-top: 3px solid #2ba6cb !important;                
        border-bottom: 3px solid #2ba6cb !important;*/
}

    .tabs-title.is-active a {
        color: white !important;
        background-color: #2ba6cb !important;
    }

.accordion-item {
    background-color: #333;
}

    .accordion-item.is-active {
        background-color: #8c0000 !important;
    }

    .accordion-item a {
        color: #ccc;
    }

        .accordion-item a:hover {
            color: #333;
        }

.bpopupHolder {
    display: none;
    width: 99vw !important;
}

#bpopupHolder {
    background-color: #fff;
    border-radius: 15px;
    color: #000;
    display: none;
    padding: 20px;
    min-width: 80vw;
    min-height: 80vh;
    text-align: center;
    overflow: scroll;
}

.dataTables_length {
    font-size: 1.0em;
    width: 200px !important;
}

    .dataTables_length label select {
        width: 50px !important;
    }

.tabs-content {
    padding-top: 20px !important;
}

    .tabs-content table tr td {
        vertical-align: middle !important;
    }

.shoutout {
    font-weight: bold;
    color: maroon;
}

.divBorder {
    background-color: #333;
    height: 50px !important;
    vertical-align: central !important;
}

.bigText {
    font-size: 1.4em;
    color: maroon;
    font-weight: bold;
}


/*LOADING IDEA*/
.spinner {
    margin: 100px auto 0;
    width: 70px;
    text-align: center;
}

    .spinner > div {
        width: 18px;
        height: 18px;
        background-color: #7DAC2F;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

tr th {
    background-color: #ccc;
    color: #333 !important;
    text-align: left;
    font-weight: bold !important;
    font-size: 1.0em;
}

.yellowHolder {
    background-color: #fff;
    color: #7DAC2F;
    font-size: 1.2em !important;
}

tr {
    /*border: solid 1px white;*/
}

table tbody tr:nth-child(even):hover {
    /*background-color: #ccc !important;*/
    /*color: red !important;*/
}

.trGreen {
    background-color: #DFFFBF !important;
    color: black;
}

.trRed {
    background-color: #FFE1E1 !important;
    color: black !important;
}

.trBlue {
    background-color: #DDF4FF;
}

.trOrange {
    background-color: #FEE4B4 !important;
}

.trDHL {
    background-color: #FFCC00;
    color: #990000;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
}

.trSKYNET {
    background-color: White;
    color: #F80000;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
}

.trGOBI {
    background-color: White;
    color: #80AD35;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
}

.trMSES {
    background-color: White;
    color: #0073A4;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
}

.trRAM {
    background-color: #E63011;
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
}

.progress-meter {
    background-color: #7DAB2F !important;
}

.font1_8 {
    font-size: 0.8em !important;
}

.font1_12 {
    font-size: 1.2em !important;
    font-weight: bold;
}

.dataTables_filter {
    min-width: 300px !important;
}

    .dataTables_filter input {
        max-width: 200px !important;
        height: 20px !important;
        float: right;
        color: #00468C !important;
        font-weight: bold;
    }

.overviewHeading {
    font-size: 1.4em;
    font-weight: bold;
}

.overviewValue {
    font-size: 1.4em;
    font-weight: bold;
    color: red;
}

table {
    border-collapse: collapse;
}

td {
    /*border-bottom: solid 1px #fff !important;*/
}

tr:hover td:first-child {
    /*border-left: 3px solid #2ba6cb !important;*/
}

.taskButton {
    max-width: 100px !important;
    float: left;
}


.headingCounter {
    color: red !important;
}


.tabsEParcel a {
    color: #FDB712 !important;
}

.performanceGood {
    color: black;
    font-size: 1.2em !important;
}

.performanceBad {
    color: Red;
    font-size: 1.2em !important;
}

.performanceGreenText {
    color: Green;
    font-size: 1.2em !important;
}

.performanceRed {
    background-color: #FF7373;
    font-size: 1.2em !important;
}

.performanceBlack {
    background-color: #ccc;
    font-size: 1.2em !important;
}

.performanceGreen {
    background-color: #CCFF99;
    font-size: 1.2em !important;
}

.smallDate {
    font-size: 0.6em !important;
    color: #fff !important;
}

.possibleProblem {
    color: red;
    font-weight: bold;
}

    .possibleProblem td:nth-child(2):before {
        content: 'POSSIBLE PROBLEM: ';
    }

.SkynetRNote td {
    background-color: #FF7373 !important;
    color: #000 !important;
    font-weight: bold;
    text-transform: uppercase;
}

.IQANote td {
    background-color: #FFFF99 !important;
    color: #000 !important;
    font-weight: bold;
    text-transform: uppercase;
}

.slackNote td {
		background-color: #4F7ACA !important;
		color: #000 !important;
		font-weight: bold;
		text-transform: uppercase;
}

.waybillNoteTable {
    font-size: 1.0em !important;
}


/*MASTER VIEW*/
.masterP {
    font-size: 0.8em !important;
    margin-left: 10px;
    color: #aaa;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

    .masterP b {
        font-size: 1.4em !important;
        margin-left: 10px;
        color: #333;
    }

.masterView {
    padding: 5px !important;
}

    .masterView table td {
        background-color: none !important;
    }

.masterTable {
    background-color: white !important;
}

    .masterTable tr:hover td:first-child {
        border-left: none !important;
    }

    .masterTable table {
        margin: 0 !important;
        font-size: 1.0em !important;
    }

        .masterTable table tr:hover td:first-child {
            border-left: none !important;
        }

.masterView th {
    background-color: #333 !important;
    color: #fff !important;
    font-size: 1.2em !important;
    font-weight: normal !important;
}

.masterTable td {
    text-align: left !important;
    vertical-align: top !important;
    color: #000 !important;
}

.fullscreenIframe {
    width: 100% !important;
}

.masterBold {
    font-weight: bold;
}

.masterButton {
    color: #000 !important;
    font-size: 1.2em !important;
}

.masterTable table tbody tr:nth-child(even) {
    background-color: #fff;
}

.tabs-panel {
    padding: 0 !important;
}

    .tabs-panel .masterTable td {
        text-align: left !important;
        vertical-align: top !important;
        padding: 5px !important;
    }

.modalBranchDetail {
    padding: 40px !important;
}

.masterView td {
    padding: 0 !important;
}

.skyTrack {
    background-color: #fff;
    border-top: solid 10px #333;
    display: none;
    position: fixed !important;
    bottom: 0;
    left: 60px;
    width: 96vw !important;
    height: 100vh !important;
}

.sideMenu {
    width: 60px;
    background-color: #333;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh !important;
    text-align: center;
    padding-top: 60px;
    z-index: 1 !important;
}

    .sideMenu div {
        width: 60px !important;
        height: 60px !important;
        font-family: 'Font Awesome 5 Free' !important;
    }

        .sideMenu div img {
            width: 35px;
        }

    .sideMenu .itemHolder {
        display: none;
        float: left;
        width: 300px !important;
        height: 100% !important;
        border-left: solid 2px #eee;
        text-align: left;
    }

        .sideMenu .itemHolder ul {
            color: red !important;
        }

        .sideMenu .itemHolder a {
            color: #fff !important;
            font-size: 1.2em !important;
            font-weight: normal;
        }

            .sideMenu .itemHolder a:hover {
                color: #DF7A7A !important;
            }

.fas {
    color: #555;
    font-size: 2.5em !important;
}

    .fas:hover {
        color: #fff !important;
    }

.far {
    color: #555;
    font-size: 2.5em !important;
}

    .far:hover {
        color: #fff !important;
    }


.fab {
    color: #555;
    font-size: 2.5em !important;
}

    .fab:hover {
        color: #fff !important;
    }

body {
    padding-left: 50px !important;
}

.pageLoader {
    text-align: center;
}

    .pageLoader img {
        margin: auto;
    }

.loaderHolder {
    text-align: center;
}

    .loaderHolder img {
        margin: auto;
    }

.loaderImage {
    max-width: 160px !important;
}

.tabs-title.is-active a {
    background-color: #ffae00 !important;
    color: #333 !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.tabs {
    border: none !important;
    border-bottom: solid 3px #ffae00 !important;
}

.fas2 {
    font-size: 1.0em !important;
    color: #333 !important;
}

.tabs-title a:hover {
    background-color: #FFECC6 !important;
    color: #333 !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

h4 {
    font-size: 1.6em !important;
    width: 100%;
    color: #DF7A7A !important;
    border-bottom: solid 2px #DF7A7A;
    padding-left: 10px !important;
}

.hasChildItem {
    font-weight: bold !important;
}

    .hasChildItem:after {
        content: '  +';
    }

.defaultPageTable {
    max-width: 98vw !important;
}

.dataTable {
    z-index: 9999 !important;
    font-size: 0.8em !important;
    width: 100% !important;
}

    .dataTable tbody tr td {
        border-bottom: solid 1px #ccc !important;
    }

.GridView tbody tr td {
    border-bottom: solid 1px #ccc !important;
}

.searchButton {
    height: 38px !important;
    margin-top: -5px !important;
    font-size: 2.4em !important;
    font-weight: bold !important;
    padding: 0 !important;
    padding-top: 6px !important;
}

.searchTextHolder {
    margin-top: -5px !important;
    height: 30px !important;
}

select {
    border: solid 1px #333 !important;
    height: 39px !important;
    color: #333 !important;
    font-weight: bold !important;
    font-size: 1.2em !important;
}

input[type=text] {
    border: solid 1px #333 !important;
    height: 39px !important;
    color: #333 !important;
    font-weight: bold !important;
    font-size: 1.2em !important;
}

input[type=search] {
    border: solid 1px #333 !important;
    height: 39px !important;
    color: #333 !important;
    font-weight: bold !important;
    font-size: 1.2em !important;
    padding: 0 !important;
    padding-left: 5px !important;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #ddd !important;
    font-weight: bold;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #ddd !important;
    font-weight: bold;
}

:-ms-input-placeholder { /* IE 10+ */
    color: #ddd !important;
    font-weight: bold;
}

:-moz-placeholder { /* Firefox 18- */
    color: #ddd !important;
    font-weight: bold;
}

.button.tiny {
    font-size: 0.9em !important;
    padding: 10px !important;
}

.skynetTrackImage {
    margin-right: 10px !important;
}

/* Tooltip container */
.menuToolTip {
}

    /* Tooltip text */
    .menuToolTip span {
        visibility: hidden;
        width: 150px;
        height: 50px;
        vertical-align: middle !important;
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 17px 0 !important;
        border-bottom-right-radius: 6px;
        border-top-right-radius: 6px;
        font-weight: bold;
        font-size: 1.0em !important;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        margin-left: 40px;
        margin-top: -3px;
        z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .menuToolTip:hover span {
        /*visibility: visible;*/
    }

.overviewTable b {
    font-size: 2.0em !important;
}

.overviewTable p {
    font-size: 1.0em !important;
}

.overviewTable td {
    text-align: center
}

.overviewTable th {
    text-align: center
}

.chartHolder {
    max-width: 500px;
    max-height: 500px;
    text-align: center;
}

.loginPage {
    background-color: #fff !important;
    color: #333 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin-left: 0px !important;
}

.unactionedException {
    width: 80px !important;
    float: left;
    height: 35px;
    margin-right: 20px;
}

.unactionedExceptionItemGood {
    width: 100%;
    height: 100%;
    background-color: #85B200;
    border-radius: 5px;
    text-align: center;
    padding-top: 7px;
    font-weight: bold;
    color: #fff;
    font-size: 1.2em !important;
}

.unactionedExceptionItemBad {
    width: 100%;
    height: 100%;
    background-color: #FF6384;
    border-radius: 5px;
    text-align: center;
    padding-top: 7px;
    font-weight: bold;
    color: #fff;
    font-size: 1.2em !important;
}

.unactionedExceptionItemOther {
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 5px;
		text-align: center;
		padding-top: 7px;
		font-weight: bold;
		color: red !important;
		font-size: 1.2em !important;
}

.unactionedSpan {
    color: #aaa;
    font-size: 0.6em !important;
    float: left;
    padding-top: 15px;
    padding-right: 10px;
}

.grouopAddressButton {
    width: 100px !important;
    margin-right: 10px !important;
}

/* Medium and down */
@media screen and (max-width: 40em) {

    .sideMenu {
        -webkit-transform: translateZ(0);
    }

    .button {
        font-size: 0.7em !important;
    }

    .divBorder {
        height: 30px !important;
    }

    .unactionedExceptionItemBad {
        font-size: 0.8em !important;
    }

    .unactionedSpan {
        display: none;
    }

    .unactionedException {
        width: 50px !important;
        height: 28px !important;
    }

    .tabs-title a {
        font-size: 0.8em !important;
    }
}


.errorSlider {
    background-color: #FF6384;
    width: 100% !important;
    color: black !important;
    min-height: 50px !important;
    padding: 5px;
    font-weight: bold;
}

.progressBarBooking td{
    font-size: 0.8em !important;
}

.kpiPerc {
		font-size: 2.0em !important;
		text-align: center !important;
}