/* Minification failed. Returning unminified contents.
(353,16): run-time error CSS1039: Token not allowed after unary operator: '-avatar-size'
(355,15): run-time error CSS1039: Token not allowed after unary operator: '-avatar-size'
(360,24): run-time error CSS1039: Token not allowed after unary operator: '-avatar-size'
(364,18): run-time error CSS1039: Token not allowed after unary operator: '-avatar-size'
(2086,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2087,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2088,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2089,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2090,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2091,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2092,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2093,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2189,17): run-time error CSS1039: Token not allowed after unary operator: '-eci-offwhite'
(2190,24): run-time error CSS1039: Token not allowed after unary operator: '-main-eci-color'
(2191,28): run-time error CSS1039: Token not allowed after unary operator: '-main-eci-color'
(2195,21): run-time error CSS1039: Token not allowed after unary operator: '-main-eci-color'
(2196,28): run-time error CSS1039: Token not allowed after unary operator: '-main-eci-color'
(2197,32): run-time error CSS1039: Token not allowed after unary operator: '-eci-offwhite'
(5333,32): run-time error CSS1039: Token not allowed after unary operator: '-navbar-height'
(5333,55): run-time error CSS1039: Token not allowed after unary operator: '-navbar-spacing'
(5333,79): run-time error CSS1039: Token not allowed after unary operator: '-card-header-height'
(5333,107): run-time error CSS1039: Token not allowed after unary operator: '-k-filter-height'
(5333,132): run-time error CSS1039: Token not allowed after unary operator: '-k-grouping-header-height'
(5333,166): run-time error CSS1039: Token not allowed after unary operator: '-k-header-icon-height'
 */
@charset "UTF-8";
/* Primary Colors - use to draw special attention */
/* Secondary Colors - use for basic and background elements */
/* Success Colors - use to draw attention to complete elements */
/* Warning Colors - use to draw attention to incomplete or incorrect elements */
/* Danger Colors - use to draw immediate attention to dangerous or destructive elements. Use sparingly. */
/* Utility Colors - use white text on top of primary colors, use black sparingly */
/* ECI Color */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("../fonts/fa-brands-400.eot");
  src: url("../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("../fonts/fa-regular-400.eot");
  src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../fonts/fa-solid-900.eot");
  src: url("../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

.fa-green {
    color: green;
}

.fa-red {
    color: red;
}

i.ecif {
    font-size: 1.25em;
}

    i.ecif.in-transit:after {
        content: "✪";
    }

i.push {
    margin-right: 4px;
}

i.extra-push {
    margin-right: 6px;
}

i.blue {
    color: #485da6;
}

i.gray {
    color: lightgray;
}


i.status.in-transit {
    color: #FFBF00;
    float: right;
    margin-top: 3px;
}

i.status.on-site {
    color: #485da6;
    float: right;
    margin-top: 5px;
}

i.status.off-site {
    color: #ff0000;
    float: right;
    margin-top: 5px;
}

html {
    height: 100%;
    background: #fff;
}

body {
    background-color: #fff;
}

.body-content {
    width: 100%;
    margin-top: 3.85rem !important;
}
.body-content.mobile {
    width: 100%;
    margin-top: 0 !important;
}

.body-row {
    height: inherit;
}
    .body-row.lockit {
        background: #fffdee75;
    }

.operation-body {
    margin: 0;
    margin-top: 11.8rem !important;
    margin-bottom: 0.5rem !important;
    padding: 1rem;
    padding-bottom: 1rem !important;
}

.operation-body-no-tabs {
    margin: 0;
    /*margin-top: 100px;*/
    margin-bottom: 0.5rem !important;
    padding: 1rem;
    padding-bottom: 1rem !important;
}


/*.operation-body.task-body {
    padding-left: 6rem !important;
    border-left: solid 4px green;
}*/

.fixed-width {
    overflow-x: hidden;
}

.task-header {
    background: #fff;
    position: fixed;
    left: 1px;
    right: 0;
    top: 3.85rem !important;
    z-index: 700;
    height: 4rem;
}

.task-header-band {
    background: #f0f0f0; /*#cfd3d8;*/
    border-top: 1px solid #7c7e81;
    border-bottom: 2px solid #7c7e81;
    width: 100%;
    height: 4.0rem !important;
    padding: 15px 0;
    position: fixed;
    left: 0; top: 6.675rem !important;

    z-index: 800;
}
.task-header-band-buttons {
    text-align: right;
    margin-top: -4px;
}

.taskbar {
    text-align: left;
    /*background: #fafafa;*/
    background: transparent;
    /*border-bottom: 1px solid #7c7e81;*/
    position: fixed;
    left: 1px;
    right: 0;
    top: 3.85rem !important;
    z-index: 999;
}
    .taskbar .tasktab {
        width: 7rem !important;
        text-align: center;
        display: inline-block;
        margin-left: -4px;
        border-right: 1px solid #ccc;
    }
        .taskbar .tasktab.thin {
            width: 3rem !important;
        }
        .taskbar .tasktab.thin .btn-navbar {
            padding-left: 5px !important;
        }
    .taskbar .tasktab:first-child {
        border-left: 1px solid #ccc;
    }

.row.buffer {
    padding-bottom: 1em !important;
}

.row.medium-buffer {
    padding-bottom: 1.5em !important;
}

.row.large-buffer {
    padding-bottom: 2em !important;
}

.col.small-buffer {
    padding-bottom: .5em !important;
}


.non-task-header-band {
    background: #f0f0f0;
    border-top: 1px solid #7c7e81;
    border-bottom: 2px solid #7c7e81;
    width: 100%;
    height: 4.0rem !important;
    padding: 15px 0;
    position: fixed;
    left: 0;
    top: 3.8rem !important;
    z-index: 800;
}

.non-task-header-band-buttons {
    text-align: right;
    margin-top: -4px;
}



/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
  white-space: normal; }

/* Bootstrap Toggle v2.2.2 corrections for Bootsrtap 4*/
.toggle-off {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }

.toggle.off {
  border-color: rgba(0, 0, 0, 0.25); }

.toggle-handle {
  background-color: white;
  border: thin rgba(0, 0, 0, 0.25) solid; }

.nav-container {
  padding-left: 0px;
  padding-right: 0px; }

.sidebar-nav {
  padding: 0px; }

.footer {
  padding-top: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; }

.grid {
  height: 100%; }

.smaller {
  font-size: small; }

.tiny {
  font-size: x-small; }

.font-size-lg {
  font-size: 1.2rem; }

input#Filters_DateFrom.form-control.k-input,
input#Filters_DateTo.form-control.k-input,
input#Filters_AcctDate.form-control.k-input {
  text-indent: 0.3em !important; }

.filter-dropdown {
  font-size: 14px; 
}

.nonEditable {
  background-color: rgba(239, 249, 249, 0.6); }

.short-text {
  display: none; }

.alert-modal-danger {
  color: #790928;
  background-color: #FCDFD1;
  border-color: #FABAA5; }

.alert-modal-success {
  color: white;
  background-color: green;
  border-color: green; }

#reportContainer {
  max-width: 720px; }

.signature-canvas {
  border: solid 1px #ced4da;
  border-radius: 5px;
  width: 100%;
  height: 150px; }

.signature-buttons {
  display: block;
  text-align: right; }

.signature-buttons .btn {
  float: none; }

#SummaryFiltersMenu {
  padding-top: 6px; }

.error-page {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background-color: #fffafa;
    color: darkred;
}
    .error-page a {
        background-color: #d94747;
        border-color: #dc3545;
        color: #FFFFFF;
        cursor: pointer;
    }

        .error-page a:hover {
            background-color: #af1c1c;
            color: #fbb;
        }

input#DeliveryActualDate.k-input,
input#PickupActualDate.k-input {
  /*margin-left: 2px;*/ }

.circle {
  background-color: #ccc;
  border-radius: 50%;
  height: var(--avatar-size);
  text-align: center;
  width: var(--avatar-size);
  margin-right: 5px;
  font-weight: 600; }

.initials {
  font-size: calc(var(--avatar-size) / 2);
  /* 50% of parent */
  line-height: 1;
  position: relative;
  top: calc(var(--avatar-size) / 4);
  /* 25% of parent */ }

.filter-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.filter-left {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  font-size: 0.8em;
  flex: 1 1 100px; }

.filter-center {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  flex: 1 0 350px;
  opacity: 0; }

.filter-right {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex: 1 0 75px; }

.input-validation-error {
  border: 1px solid #ff0000 !important;
  background-color: #FFCCCC; }

.dispatch-pickup-button {
  font-size: 1.5em;
  color: white;
  margin-left: 7px;
  letter-spacing: 2px;
  font-weight: 600; }

.dispatch-delivery-button {
  font-size: 1.5em;
  color: white;
  letter-spacing: 2px;
  font-weight: 600; }

.two-tabs {
  margin-bottom: -12px;
  padding-right: 7px; }

.pickup-tab {
  background-color: #4ac1d4 !important;
  /*opacity: 0.4;*/ }

.delivery-tab {
  background-color: #e2c15f !important;
  /*opacity: 0.4;*/ }


.eci-kendo-datepicker {
  height: 38px; }



.medium-heading {
    font-size: 18px;
    font-weight: bold;
    color: #3a468e;
}


.text-white {
    color: #fff;
}

.text-gold {
    color: gold;
}


#page-spinner {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999;
    display: none;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

#page-spinner::after {
    content: '';
    display: block;
    position: absolute;
    left: 48%;
    top: 40%;
    width: 40px;
    height: 40px;
    border-style: solid;
    border-color: #f3f3f3;
    border-top-color: #3498db;
    border-width: 4px;
    border-radius: 50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}







table.table.less-padding th,
table.table.less-padding td {
    padding: 0.5em;
    vertical-align: unset;
}
table.table.less-padding thead td {
    font-size: 0.85em;
    color: #485687;
}





/* Customize the label (the container) */
.checkmark-label {
    display: block;
    position: relative;
    padding-left: 1.25em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

    /* Hide the browser's default checkbox */
    .checkmark-label input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0.25em;
    left: 0;
    height: 1.0em;
    width: 1.0em;
    background-color: #f7f7f7;
    border: solid 1px #999;
}

    .checkmark.on-left {
        left: 0;
        right: auto;
    }

    .checkmark.on-right {
        left: auto;
        right: 0;
    }

    .checkmark.on-center {
        left: 1px; /* for border */
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

/* On mouse-over, add a grey background color */
.checkmark-label:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is disabled, add the rollover color to the background */
.checkmark-label input:disabled ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkmark-label input:checked ~ .checkmark {
    background-color: #5454ff;
    border: solid 1px #000052;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkmark-label input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkmark-label .checkmark:after {
    left: 32%;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkmark-label .label-text {
    font-size: 1.1em;
    font-weight: normal;
    color: #212529;
}

    .checkmark-label.large .checkmark {
        height: 1.75em;
        width: 1.75em;
    }

    .checkmark-label.large .checkmark:after {
        left: 32%;
        width: 8px;
        height: 18px;
    }

.col-value .checkmark-label {
    margin: 2px;
    float: left;
}




.display-box {
    text-align: left;
    padding: 20px;
    border: solid 1px #ccc;
    font-size: 1.0em;
}

    /* Not sure if we will use this or not */
    .display-box .title {
        float: right;
        text-align: right;
        font-size: 1.1em;
        margin-top: -2.2em;
        padding: 4px 10px;
        border: 0;
        background: #fff;
        color: #5171d0;
    }

    .display-box .display-item {
        margin-bottom: 0.65em;
        display: block;
    }

        .display-box .display-item.horizontal {
            margin-right: 2.5em;
            display: inline-block;
        }

        .display-box .display-item label {
            font-size: 0.9em;
            color: cornflowerblue;
        }

.formdate {
    color: orangered;
    font-weight: bold;
}

.display-box.hide-left {
    border-left: 0;
}

.breakout {
    border: 0;
    border-left: solid 1px #999;
    border-bottom: solid 1px #999;
    border-image-slice: 1;
    border-image-source: linear-gradient(to left, #fff, #fff, #cdcdcd, #999);
}

.col.left-bar {
    border-left: solid 1px #eee;
}

.push-left {
    margin-left: -0.65em;
}

.push-down {
    margin-bottom: 1.0em;
}

/*** All below was moved (and posibly edited since) from Branding.css */


.primary-button {
    background-color: #3340d8;
    color: #fff;
    font-weight: bold;
    border-radius: 4.8px;
    /*box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.12);*/
    transition: 0.3s;
    padding: 6px 24px;
    z-index: 900;
    cursor: pointer;
    border: 0;
}

    .primary-button:hover {
        background-color: #112797;
        color: #f0f0f0;
        text-decoration: none !important;
        z-index: 900;
        cursor: pointer;
    }

    .primary-button.green-btn {
        background-color: #31a550;
        color: #fff;
    }

    .primary-button.green-btn:hover {
        background-color: #41a75d;
        color: #f0f0f0;
        text-decoration: none !important;
        z-index: 900;
        cursor: pointer;
    }

    .primary-button.stand-out {
        border: 1px solid #ffffffd8;
    }

.primary-button-special-ops {
    background-color: #DD6D04;
    color: #FFFFFF;
    font-weight: bold;
    border-radius: 4.8px;
    /*box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.12);*/
    transition: 0.3s;
    padding: 6px 24px;
    z-index: 900;
    cursor: pointer;
    border: 0;
}

    .primary-button-special-ops:hover {
        background-color: #6A1E00;
        color: #FDEDCB;
        text-decoration: none !important;
        z-index: 900;
        cursor: pointer;
    }

.primary-button-active-ops {
    background-color: #4D840E;
    color: #FFFFFF;
    font-weight: bold;
    border-radius: 4.8px;
    /*box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.12);*/
    transition: 0.3s;
    padding: 6px 24px;
    z-index: 900;
    cursor: pointer;
    border: 0;
}

    .primary-button-active-ops:hover {
        background-color: #173F02;
        color: #ECF8CC;
        text-decoration: none !important;
        z-index: 900;
        cursor: pointer;
    }

.primary-button-completed-ops {
    background-color: #293C75;
    color: #FFFFFF;
    font-weight: bold;
    border-radius: 4.8px;
    /*box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.12);*/
    transition: 0.3s;
    padding: 6px 24px;
    z-index: 900;
    cursor: pointer;
    border: 0;
}

    .primary-button-completed-ops:hover {
        background-color: #091540;
        color: #BBC1D4;
        text-decoration: none !important;
        z-index: 900;
        cursor: pointer;
    }

.secondary-button {
    background-color: #485687;
    color: #fcfcfc;
    font-weight: bold;
    border-radius: 4.8px;
    border: none;
    /*box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.12);*/
    transition: 0.3s;
    padding: 6px 24px;
    z-index: 900;
    cursor: pointer;
    border: 0;
}
    .secondary-button.danger {
        background-color: #dc3545;
        border-color: #dc3545;
    }

    .secondary-button:hover {
        background-color: #485687;
        /*background-color: #3f5495;*/
        color: #FFFFFF;
        z-index: 900;
        cursor: pointer;
    }

.tertiary-button {
    background-color: #379a59;
    color: #fcfcfc;
    font-weight: bold;
    border-radius: 4.8px;
    border: none;
    transition: 0.3s;
    padding: 6px 24px;
    z-index: 900;
    cursor: pointer;
    border: 0;
}

    .tertiary-button:hover,
    .tertiary-button:active {
        background-color: #32864f;
        color: #FFFFFF;
        z-index: 900;
        cursor: pointer;
    }


.panel-header-button {
    margin-top: -0.325em;
    font-size: 0.9em;
}

.outline-button {
    border: 1px solid #091540;
    box-sizing: border-box;
    border-radius: 4px;
    color: #091540;
    font-weight: normal;
    transition: 0.3s;
    cursor: pointer;
    background: none;
}

    .outline-button:hover {
        background-color: #091540;
        border: 1px solid #091540 !important;
        box-sizing: border-box;
        border-radius: 4px;
        color: #FFFFFF;
        border: 0;
        cursor: pointer;
    }

.outline-button-white {
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 4px;
    color: #FFFFFF;
    font-weight: normal;
    transition: 0.3s;
    cursor: pointer;
    background: none;
}

    .outline-button-white:hover {
        border: 1px solid #381fb4;
        box-sizing: border-box;
        border-radius: 4px;
        color: #381fb4;
        font-weight: normal;
        transition: 0.3s;
        cursor: pointer;
        background-color: #FFFFFF;
    }

.button-disabled {
    background-color: #66729A;
    color: #FFFFFF;
    border-radius: 4.8px;
}

a, .text-button {
    /*font-weight: bold;*/
    color: #0022CC;
    text-decoration: none;
    background: none;
    border: 0;
}

    a:hover, .text-button:hover {
        text-decoration: underline;
    }

    a .navlink-dropdown {
        font-weight: normal !important;
    }

    a.logo-link:hover {
        text-decoration: none !important;
    }

.icon-button {
    cursor: pointer;
    padding: 6px 10px 3px 10px !important;
}

    .icon-button > i {
        font-size: 22px;
    }



div.warning {
    background-color: #f8d5d5;
    padding: 4px 15px;
    font-size: 0.85em;
    color: #b23131;
    border-bottom: 1px solid #f3a1a1;
    border-top: 1px solid #f3a1a1;
    font-style: italic;
}

.warning-button {
    background-color: #BE5302;
    color: #FFFFFF;
    font-weight: bold;
    border-radius: 4.8px;
    /*box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.12);*/
    transition: 0.3s;
    padding: 6px 24px;
    cursor: pointer;
}

    .warning-button:hover {
        background-color: #802B01;
        color: #FDEDCB;
        text-decoration: none !important;
        cursor: pointer;
    }

    .warning-button.stand-out {
        border: 1px solid #ffffffd8;
    }

.danger-button {
    background-color: #B31627;
    color: #FFFFFF;
    font-weight: bold;
    border-radius: 4.8px;
    /*box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.12);*/
    transition: 0.3s;
    padding: 6px 24px;
    cursor: pointer;
}

    .danger-button:hover {
        background-color: #790928;
        color: #FCDFD1;
        text-decoration: none !important;
        cursor: pointer;
    }

    .danger-button.stand-out {
        border: 1px solid #ffffffd8;
    }

.completed-button {
    background-color: #9099B7;
    color: #091540;
}

.completed-button {
    background-color: #9099B7;
    color: #091540;
    font-weight: bold;
    border-radius: 4.8px;
    /*box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.12);*/
    transition: 0.3s;
    padding: 6px 24px;
    cursor: pointer;
}

    .completed-button:hover {
        background-color: #091540;
        color: #9099B7;
        text-decoration: none !important;
        cursor: pointer;
    }

/* Cards */
/* Primary Colors - use to draw special attention */
/* Secondary Colors - use for basic and background elements */
/* Success Colors - use to draw attention to complete elements */
/* Warning Colors - use to draw attention to incomplete or incorrect elements */
/* Danger Colors - use to draw immediate attention to dangerous or destructive elements. Use sparingly. */
/* Utility Colors - use white text on top of primary colors, use black sparingly */
/* ECI Color */

.sign-in-card {
    width: 80%;
    max-width: 840px;
    margin: 0 auto;
    border-radius: 0.5rem;
    overflow: hidden;
}
 .sign-in-card > .primary-button {
     cursor: pointer;
 }

.summary-card {
    /*background-color: #F2F3FC;*/
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #ccc;
    height: 100%;
    overflow: hidden;
    /*box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.24), 0px 1px 3px rgba(0, 0, 0, 0.12);*/
}

    .summary-card.halfski {
        max-width: 45%;
    }

    .summary-card.thirdski {
        max-width: 30%;
    }

.summary-card-title { /*summary-card-title*/
    background-color: #485687;
    /*background-color: #303c69;*/
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    /*border-radius: 4px 4px 0 0;*/
}

.card-content-lite {
    display: block;
    padding: 1.25em;
}
    .card-content-lite.summary-panel{
        padding-bottom: 0;
    }

    .card-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
        padding: 1.25em;
        column-gap: 30px;
        row-gap: 20px;
        /*overflow: hidden;*/
    }

.table-card-title { /*summary-card-title*/
    /*background-color: #091540;
    background-color: #345b7e;
    background-color: #130078;*/
    background-color: #0b3d7c; 
    color: #FFFFFF;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}

.summary-card-body > h6 {
    color: #6165D9 !important;
}



.form-page {
    margin: 0.5em;
    margin-top: 5em;
}
.form-card {
    background: #fdfdfd;
    margin: 1.5em;
    border-radius: 6px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.form-card-title {
    background-color: #f9f9f9; /*summary-card-title*/
    color: #091540;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 1px solid #ccc;
}
.form-row {
    margin-top: 1.5em;
}
.form-card label {
    margin-bottom: 0.25em !important;
}
.form-control {
    border: 1px solid #66729A !important;
}
    .form-control.inline-box {
        max-width: 240px;
        display: inline-block;
        height: 2.1em;
        padding: 1px 8px;
    }

.form-normal {
    font-weight: normal !important;
    color: #091540 !important;
    font-size: 16px !important;
    padding-left: 1rem !important;
}
.form-label {
    font-weight: normal !important;
    color: #091540 !important;
    font-size: 0.95em !important;
}

.non-form-control {
    border: 1px solid #939dbc !important;
}


.faux-span {
    border: 1px solid transparent !important;
    background-color: transparent !important;
    user-select: none;
}


.modal-input-card {
    background-color: #fff;
    overflow: hidden;
}

    .modal-input-card .input-card-body {
        padding: 0 !important;
        margin: 0 !important;
    }

.input-card {
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #ccc;
    overflow: hidden;
}

    .input-card.halfski {
        max-width: 45%;
    }

    .input-card.thirdski {
        max-width: 30%;
    }

/*    .input-card.even {
        border: 1px solid #d9d9d9;
    }*/

.input-card-title {
    background-color: #f0f0f0;
    color: #142457;
    /*font-weight: bold;*/
}

/*    .input-card-title.even {
        background-color: #e0e0e0;
    }*/

.input-card-title-create {
    background-color: #4D840E;
    color: #142457;
    font-weight: bold;
    font-size: 20px;
    border-radius: 4px 4px 0 0;
}

.input-card-body > h6 {
    color: #485687;
}

.input-card.vessel-input-card {
    position: relative;
    border-width: 2px;
    border-style: solid;
    border-color: #d2d2d2;
}

/*    .input-card.vessel-input-card.even {
        position: relative;
        border-color: #bec7cc;
    }*/

.vessel-card-title {
    padding-top: .5em;
    padding-bottom: .75em;
    padding-left: 5px;
    /*border-bottom: 1px solid #ddd;*/
}

.card-denoter {
    width: 1.25em;
    height: 100%;
    background: #f0f0f0;
    position: absolute;
    top: 0;
    bottom: 0;
    writing-mode: vertical-lr;
    text-orientation: upright;
    overflow: hidden;
}
    .card-denoter.success {
        background: #dff4b1;
    }
    .card-denoter.left {
        left: 0;
    }
    .card-denoter.right {
        right: 0;
    }
/*    .card-denoter.even {
        background: #bec7cc;
    }*/

.card-gully {
    padding-left: 30px;
}

#idTrac {
    position: absolute;
}

.mouse-banner {
    font-size: 0.85em;
    background-color: #67919c;
    color: #ffffff;
    white-space: nowrap;
    padding: 0 10px;
    padding-bottom: 1px;
    border-radius: 4px;
    display: none;
}

.basic-card {
    border-radius: 6px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.basic-card-title {
    background-color: #f0f0f0; /*summary-card-title*/
    color: #142457;
    font-weight: bold;
    font-size: 20px;
}

.multi-card {
    background-color: #fdfdfd;
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 100%;
    overflow: hidden;
}

.multi-card-title {
    background-color: #f0f0f0; /*summary-card-title*/
    color: #142457;
    font-weight: bold;
    font-size: 20px;
}

.multi-card .card-body {
    padding: 0.75rem !important;
}

.card-title-icon {
    color: #485687 !important;
    font-size: 18px !important;
}

.card-body.validator {
    padding-top: 0 !important;
}

label.checkbox.control-label {
    font-weight: normal !important;
    color: #091540 !important;
}

i.icon-splash {
    font-size: 96px;
    color: #BBC1D4;
}

.info-card {
    background-color: #F2F3FC;
    color: #112797 !important;
}

    .info-card.rounded {
        border-radius: 6px !important;
        overflow: hidden;
    }

    .info-card .closer {
        color: #ebebeb;
        float: right;
        font-size: 2em;
        font-weight: bold;
        margin-top: -.45em;
        margin-right: .25em;
    }

        .info-card .closer:hover,
        .info-card .closer:focus {
            color: rgb(231, 65, 65);
            text-decoration: none;
            cursor: pointer;
        }

.info-card-title {
    background-color: #c4c7dd;
    color: #091540;
}

.info-card-footer {
    background-color: #E7E8FB;
    color: #4D4CD7 !important;
}

.info-card h6 {
    color: #6165D9 !important;
}

.info-card h4 {
    color: #142457 !important;
}



.preview-card {
    background-color: #fbfbfb;
    color: #6f6f6f !important;
}

    .preview-card.rounded {
        border-radius: 6px !important;
        overflow: hidden;
    }

    .preview-card .closer {
        color: #ebebeb;
        float: right;
        font-size: 2em;
        font-weight: bold;
        margin-top: -.45em;
        margin-right: .25em;
    }

        .preview-card .closer:hover,
        .preview-card .closer:focus {
            color: rgb(231, 65, 65);
            text-decoration: none;
            cursor: pointer;
        }

.preview-card-title {
    background-color: #61a76f;
    color: #091540;
}

    .preview-card-title.header-text {
        color: #d7f1dc !important;
        font-weight: 600;
        cursor: default;
    }

.preview-card-footer {
    background-color: #E7E8FB;
    color: #4D4CD7 !important;
}

.preview-card h6 {
    color: #7e7e7e !important;
    font-weight: normal;
}

    .preview-card h6.green-font {
        color: #5f8b56 !important;
    }

.preview-card h4 {
    color: #5e5e5e !important;
}

.preview-card .fa {
    color: #bedcc4 !important;
}

.preview-card .btn-success {
    background-color: #2c753b !important;
}



.vessel-loading-banner{
    padding: 1.0em 0.5em;
    color:indianred;
    display: none;
}
.vessel-reloading-banner {
    padding: 1.0em 0.5em;
    color: indianred;
    display: none;
}

.completed-card {
    background-color: #F2F4F8;
    color: #091540 !important;
}

.completed-card {
    background-color: #F2F4F8;
    color: #091540 !important;
}

    .completed-card h6 {
        color: #293C75 !important;
    }

    .completed-card h4 {
        color: #091540 !important;
    }

.completed-card-title { /*summary-card-title*/
    background-color: #96A7E0;
    color: #091540;
}

.completed-card-footer {
    background-color: #CAD4F7;
    color: #4D4CD7 !important;
}

.success-card {
    background-color: #F6FCE8;
    color: #173F02 !important;
}

.success-card-title {
    background-color: #DFF4B1;
    color: #173F02;
    /*border-bottom: 1px solid #ddd;*/
}

.success-card-footer {
    background-color: #ECF8CC;
    color: #3C710A;
}

.success-card h6 {
    color: #4D840E !important;
}

.success-card h4 {
    color: #173F02 !important;
}

.warning-card {
    background-color: #FEF8EA;
    color: #6A1E00 !important;
}

.warning-card-title { /*summary-card-title*/
    background-color: #F4B964;
    color: #6A1E00;
}

.warning-card-footer {
    background-color: #FDEDCB;
    color: #9F3D02;
}

.warning-card h6 {
    color: #DD6D04 !important;
}

.warning-card h4 {
    color: #6A1E00 !important;
}

/*.danger-card {
    background-color: #FDEFE7;
    color: #640528 !important;
}*/

.danger-card {
    background-color: #ac1313;
    color: #fff !important;
}

.danger-card-title { /*summary-card-title*/
    background-color: #F18975;
    color: #640528;
}

.card {
    background-color: inherit !important;
    border: none !important;
}

.card-footer {
    background-color: inherit !important;
    border: none !important;
    text-align: center;
}

    .card-footer.light-blue {
        background-color: #48568749 !important;
    }

.card-tabs > .active {
    background-color: inherit !important;
}

.bg-eci {
    background-color: #381fb4;
}

.summary-panel .mb-md-2 {
    margin-bottom: 1rem !important;
}

.card-footer-adjuster {
    margin-bottom: -16px !important;
}


/* Elevation and Shadows */
/* shadow1 should be used on cards and layout elements
   shadow2 should be used on top navigation
   shadow3 should be used on buttons and interactive elements
   shadow4 should be used on modals and tooltips */
.shadow1 {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.24), 0px 1px 3px rgba(0, 0, 0, 0.12);
}

.shadow2 {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12), 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.shadow3 {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.12);
}

.shadow4 {
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Forms */
/* Primary Colors - use to draw special attention */
/* Secondary Colors - use for basic and background elements */
/* Success Colors - use to draw attention to complete elements */
/* Warning Colors - use to draw attention to incomplete or incorrect elements */
/* Danger Colors - use to draw immediate attention to dangerous or destructive elements. Use sparingly. */
/* Utility Colors - use white text on top of primary colors, use black sparingly */

label {
    font-size: 14px;
    font-weight: bold;
    color: #485687;
    vertical-align: baseline;
}

label.pt-1 {
    padding-top: 0.125rem !important;
}

label.control-label {
    margin-bottom: 0.2rem !important;
}

.fa-invoice-dollar {
    font-size: 18px !important;
}

textarea {
    padding: 3px 5px;
}

textarea.form-control {
    height: 75%;
}

.modal-body > .custom-control.custom-checkbox {
    z-index: 77000 !important;
}

/*.k-input {
    height: calc(1.5em + .75rem + 2px) !important;
}*/

.k-input, .k-select {
    border: 1px solid #66729A !important;
}

.k-select {
    height: 96% !important;
    /*height: calc(1.5em + .775rem) !important;*/
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

.k-select.firefox {
    height: 100% !important;
}

.k-picker-wrap {
    border: 0 !important;
}


.form-check-input {

}



/* ECI Color */
/* Primary Colors - use to draw special attention */
/* Secondary Colors - use for basic and background elements */
/* Success Colors - use to draw attention to complete elements */
/* Warning Colors - use to draw attention to incomplete or incorrect elements */
/* Danger Colors - use to draw immediate attention to dangerous or destructive elements. Use sparingly. */
/* Utility Colors - use white text on top of primary colors, use black sparingly */
/*.navbar {
    background: #381fb4;
}*/
.navbar {
    /*background: #e3f3ff;*/
    background: #fff;
    border-bottom: 1px solid #ccc;
    height: 3.85rem !important;
}

.navlink-dropdown {
    color: #FFFFFF;
    font-weight: normal;
}

    .navlink-dropdown:hover {
        color: #091540;
    }

.oplog-navbar-button-spacing {
    margin-right: 8px;
}

.oplog-navbar-fixed {
    z-index: 1000;
    position: absolute;
    top: 90px;
}

.oplog-header-fixed {
    z-index: 1010;
    position: absolute;
    top: 160px;
    padding-left: 0 !important;
}

.oplog-header-fixed-no-nav-tabs {
    z-index: 1010;
    position: fixed;
    top: 55px;
    padding-left: 0 !important;
}

.fixed-card-header-below-navbar {
    position: fixed;
    top: 66px;
    left: 15px;
    right: 15px;
}

.navbar-wordmark {
    color: #FFFFFF;
    font-weight: bold;
}

    .navbar-wordmark:hover {
        text-decoration: none;
    }



.app-nav {
    color: #555 !important;
    font-weight: normal !important;
    font-size: 16px !important;
}

.page-nav {
    /*color: #091540 !important;*/
    font-weight: normal !important;
    font-size: 14px !important;
    padding: 0 !important;
}

    .page-nav i {
        font-size: 16px !important;
    }

.btn-navbar {
    background: #fff;
    color: #303c69;
    padding: 12px 0;
    border-bottom: 1px solid #7c7e81;
}

    .btn-navbar:hover {
        background: #F2F4F8;
    }

.btn-navbar-inactive {
    /*background: #F2F4F8;*/
}

.btn-navbar-disabled {
    background: #e3e3e3;
    cursor: not-allowed;
}
    .btn-navbar-disabled:hover {
        background: #e3e3e3;
        cursor: not-allowed;
    }

.btn-navbar-active {
    background: #f0f0f0;
    color: #485687;
    border-bottom: 1px solid #f0f0f0;
}
    .btn-navbar-active:hover {
        background: #f0f0f0;
    }

.btn-navbar-inactive-success {
    background: #F6FCE8;
    color: #204C04;
}

.btn-navbar-inactive-warning {
    background: #FEF8EA;
    color: #802B01;
}

.btn-navbar-inactive-danger {
    background: #FDEFE7;
    color: #790928;
}

.btn-navbar-active-success {
    background: #E4E6ED;
    color: #204C04;
}

.btn-navbar-active-warning {
    background: #E4E6ED;
    color: #802B01;
}

.btn-navbar-active-danger {
    background: #E4E6ED;
    color: #790928;
}



.js-button {
    padding: 0 4px;
    width: 14px;
    height: 20px;
    margin: unset;
    font-size: 0.8em;
    color: #fff;
    background-color: #485687;
    border: 1px solid #3e4a73;
    border-radius: 4px;
}
    .js-button .icon {
        vertical-align: text-top;
    }

    .js-button:disabled {
        background-color: silver;
        color: linen;
        border-color: #878787
    }

ul.nav.nav-pills.nav-fill {
    margin-left: 2px !important;
}

/* Primary Colors - use to draw special attention */
/* Secondary Colors - use for basic and background elements */
/* Success Colors - use to draw attention to complete elements */
/* Warning Colors - use to draw attention to incomplete or incorrect elements */
/* Danger Colors - use to draw immediate attention to dangerous or destructive elements. Use sparingly. */
/* Utility Colors - use white text on top of primary colors, use black sparingly */
/* ECI Color */

.status-pill {
    border-radius: 18px;
    box-sizing: border-box;
    padding: 2px 18px;
    font-weight: normal !important;
    text-align: center;
}

    .status-pill.borderless {
        border: 0 !important;
    }

div.status-pill {
    display: inline-block;
    padding: 5px 18px;
    padding-top: 2px;
}

.status-pill-info {
    color: #FFFFFF;
    background-color: #485687;
 /*   background: #381fb4;*/
    border: 1px solid #383838;
    text-align: center;
}

.status-pill-in-progress {
    color: #FFFFFF;
    background: #2AA211;
    border: 1px solid #383838;
    text-align: center;
}

.status-pill-danger {
    color: #790928;
    background: #FCDFD1;
    border-radius: 18px;
    border: 1px solid #790928;
    box-sizing: border-box;
    padding: 2px 18px;
    font-weight: normal !important;
    text-align: center;
}

.status-pill-warning {
    color: #802B01;
    background: #FDEDCB;
    border-radius: 18px;
    border: 1px solid #802B01;
    box-sizing: border-box;
    padding: 2px 18px;
    font-weight: normal !important;
    text-align: center;
}

.status-pill-success {
    color: #204C04;
    background: #ECF8CC;
    border-radius: 18px;
    border: 1px solid #204C04;
    box-sizing: border-box;
    padding: 2px 18px;
    font-weight: normal !important;
    text-align: center;
}

.status-header-plain {
    font-weight: bold;
    margin-right: 6px;
}

    .status-header-plain:before {
        content: "»";
        margin-right: 6px;
    }

.read_more:before {
    content: "»";
    margin-right: 6px;
}

.icon-status-closed {
    background: inherit;
    color: #091540;
    padding: 1px;
}

.icon-status-cancelled {
    background: inherit;
    color: #485687;
    padding: 1px;
}

.icon-status-success {
    background: #D6F29B;
    color: #204C04;
    padding: 1px;
}

.icon-status-warning {
    background: #FBD798;
    color: #802B01;
    padding: 1px;
}

.icon-status-danger {
    background: #FABAA5;
    color: #790928;
    padding: 1px;
}

/* Primary Colors - use to draw special attention */
/* Secondary Colors - use for basic and background elements */
/* Success Colors - use to draw attention to complete elements */
/* Warning Colors - use to draw attention to incomplete or incorrect elements */
/* Danger Colors - use to draw immediate attention to dangerous or destructive elements. Use sparingly. */
/* Utility Colors - use white text on top of primary colors, use black sparingly */
/* ECI Color */
.tooltip {
    background-color: #112797;
    color: #FFFFFF;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 2px;
}

/* Typography */
/* Primary Colors - use to draw special attention */
/* Secondary Colors - use for basic and background elements */
/* Success Colors - use to draw attention to complete elements */
/* Warning Colors - use to draw attention to incomplete or incorrect elements */
/* Danger Colors - use to draw immediate attention to dangerous or destructive elements. Use sparingly. */
/* Utility Colors - use white text on top of primary colors, use black sparingly */
/* ECI Color */
html {
    font-size: 100%;
    color: #091540;
}

h1 {
    font-size: 36px;
    font-weight: bold;
}

h2 {
    font-size: 24px;
    font-weight: bold;
}

h3 {
    font-size: 20px;
    font-weight: bold;
}

h4 {
    font-size: 18px;
    font-weight: bold;
    color: #23356D;
}

/* Used as a label */
h6 {
    font-size: 14px;
    font-weight: bold;
    color: #485687;
    margin-bottom: 0.2rem !important;
    cursor: default;
}

span.label {
    font-size: 14px;
    font-weight: bold;
    color: #485687;
    margin-bottom: 0.2rem !important;
    cursor: default;
}

span.warning {
    color: #ff0000;
}

span.warning.small {
    font-size: 0.85em;
}

label.label {
    font-size: 14px;
    font-weight: bold;
    color: #485687;
    margin-bottom: -0.2rem !important; /* must be negative! */
    cursor: default;
}

label.label.enlarge {
    font-size: 1.0em;
    font-weight: normal;
}

.date-danger {
    font-size: 13px;
    color: #790928;
    background-color: #FCDFD1;
    border: 1px solid #790928;
    border-radius: 10px;
}

.date-warning {
    font-size: 13px;
    color: #802B01;
    background-color: #FDEDCB;
    border: 1px solid #802B01;
    border-radius: 10px;
}

.date-success {
    font-size: 13px;
    color: #204C04;
    background-color: #ECF8CC;
    border: 1px solid #204C04;
    border-radius: 10px;
}

li {
    font-size: 14px;
}

.font-weight-normal {
    font-weight: normal !important;
}

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

.font-size-xl {
    font-size: 32px;
}

.row.padded {
    padding-left: 15px;
    padding-right: 15px;
}

.row.headroom {
    padding-top: 5px;
}

.row.push {
    margin-bottom: 1.0em;
}

.row.pushed {
    margin-top: 1.5em;
}

.row.display {
    margin-top: 0.65em;
}

/*
------------------------------------ Variables Section ------------------------------------
*/
:root {
    --navbar-height: 60px;
    --navbar-oplog-height: 40px;
    --navbar-spacing: 10px;
    --card-header-height: 60px;
    --k-grouping-header-height: 40px;
    --k-header-icon-height: 35px;
    --k-filter-height: 50px;
    --avatar-size: 2.5rem;
}

/*
------------------------------------ Tables Section ------------------------------------
*/

th {
    font-size: 14px;
    font-weight: bold;
    color: #485687;
}

/*
------------------------------------ Cards Section ------------------------------------
*/
.btn-eci-card-header {
    background-color: #E4E6ED;
    border: 1px solid #091540;
    border-radius: 4px;
}

    .btn-eci-card-header:hover {
        /*background-color: #2601e2;*/
        background-color: #4953e2;
        color: #E4E6ED;
    }

.btn-eci-card-header-success {
    background-color: #3C710A;
    color: #FFFFFF;
}

    .btn-eci-card-header-success:hover {
        background-color: #388606;
        color: #F6FCE8;
    }

.btn-eci-card-header-danger {
    background-color: #b41111;
    color: #FFFFFF;
}

    .btn-eci-card-header-danger:hover {
        background-color: #7b0606;
        color: #FDEFE7;
    }

.btn-eci-card-header.add-btn {
    background-color: #2a874a;
    color: #FFFFFF;
}

    .btn-eci-card-header.add-btn:hover {
        background-color: #0f9c3f;
        color: #FDEFE7;
    }

.btn-eci-card-header.delete-btn {
    background-color: #3C710A;
    color: #FFFFFF;
}

    .btn-eci-card-header.delete-btn:hover {
        background-color: #790909;
        color: #FDEFE7;
    }

.btn.mini-sized {
    font-size: 0.8em;
    margin-top: 0.2em;
}

.fa-outline-eci {
    color: #FFFFFF;
    border: 1px solid transparent;
    padding: 5px;
}

    .fa-outline-eci:hover {
        border: 1px solid #FFFFFF;
        text-decoration: none;
        border-radius: 2px;
        padding: 5px;
    }

.btn-success {
    background-color: #3C710A;
    color: #FFFFFF;
}
.btn-success:hover {
    background-color: #498c0a;
    color: #FFFFFF;
}

.k-primary {
    color: var(--eci-offwhite);
    border-color: var(--main-eci-color);
    background-color: var(--main-eci-color);
}

    .k-primary:hover {
        color: var(--main-eci-color);
        border-color: var(--main-eci-color);
        background-color: var(--eci-offwhite);
    }

/*
------------------------------------ Text Section ------------------------------------
*/
.text-required {
    color: #091540;
    font-style: italic;
    font-weight: bold;
}

.text-eci-card-header {
    color: #091540;
    font-weight: 600;
    margin-right: 10px;
    cursor: default;
}

    .text-eci-card-header .title-strong a {
        color: #465ca5;
    }

.text-eci-card-header-spacing {
    padding-left: 1rem !important;
}

.text-saving {
    color: #666;
}

.non-selectable {
    cursor: default;
}

/*
------------------------------------ Background Section ------------------------------------
*/
.bg-transparent {
    background: transparent;
}

.bg-offwhite {
    background-color: #fff;
    /*background-color: #fcfcfc;*/
}

.bg-offwhite-darken-20 {
    background-color: #E4E6ED;
    /*background-color: #BBC1D4;*/
}

.bg-eci-card-header {
    /*background-color: #E4E6ED;*/
    color: #091540;
    padding-bottom: 1rem !important;
}

.border-eci-card-header {
    border: 0;
    border-radius: 5px;
}

.border-success-medium {
    border: 1px solid;
    border-color: #3C710A;
    border-radius: 5px;
}

.border-required {
    border: 1px solid #DD6D04;
}

/*
------------------------------------ Operation Log Reusable Sections ------------------------------------
*/
.border-card-body-summary-info,
.border-weight {
    border: solid 2px #142457;
}

.border-card-body {
    border: solid 2px #142457;
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 0px;
    padding-right: 0px;
}

/*
------------------------------------ Cards Section ------------------------------------
*/
.card-header {
    padding-left: 10px;
}

.checkbox-lg .custom-control-label::before,
.checkbox-lg .custom-control-label::after {
    top: .8rem;
    width: 1.55rem;
    height: 1.55rem;
}



/*
------------------------------------ Misc ------------------------------------
*/

.create-modal .control-label {
    padding-left: 3px;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
}

.create-modal .validation-summary-errors {
    background-color: #fae9e9;
    padding: 1.0em 0;
    margin-bottom: 1.0em;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.create-modal .validation-summary-errors ul {
    margin-bottom: 0 !important;
}

.row.material-picker {
    cursor: pointer;
    border-radius: 8px;
    background: #fff;
}
    .row.material-picker:hover {
        background: #f0f0f0;
    }

.row.product-picker {
    cursor: pointer;
}

/*    .row.product-picker:hover {
        background: #f0f0f0;
    }*/

.col.col-box {
    padding: 6px 10px;
    border: 1px solid #c7c7c7;
    border-radius: 7px;
    margin: 4px;
}
    .col.col-box:first-child {
        margin-left: 15px;
    }
    .col.col-box:last-child {
        margin-right: 15px;
    }

    .col.col-box.low-rise {
        padding: 4px 10px;
    }

    .col.col-box.empty-box {
        border: 0;
    }

    .col.col-box.clean {
        border: 0;
        border-radius: unset;
        margin: 2px 4px;
    }
        .col.col-box.clean:first-child {
            margin-left: 15px;
        }

        .col.col-box.clean:last-child {
            margin-right: 15px;
        }
        .col.col-box.clean.head {
            border-top: 1px solid #c7c7c7;
            border-bottom: 1px solid #c7c7c7;
            border-right: 1px solid #c7c7c7;
            margin: 2px 0;
        }
        .col.col-box.clean.head:first-child {
            border-left: 1px solid #c7c7c7;
        }


.col-box.padding-8 {
    padding-left: 8px;
    padding-right: 8px;
}
.col-box.padding-16 {
    padding-left: 16px;
    padding-right: 16px;
}
.col-box.padding-24 {
    padding-left: 24px;
    padding-right: 24px;
}
.col-box.padding-sides-0 {
    padding-left: 0;
    padding-right: 0;
}
.col-box.margin-15 {
    margin-left: 15px;
    margin-right: 15px;
}

.col-box.green-column {
    background-color: #e5f6ed;
}
.col-box.aqua-column {
    background-color: #e3f8fa;
}
.col-box.red-column {
    background-color: #f9edea;
}

.cell-red {
    background-color: #ffefef;
}
.cell-green {
    background-color: #ebfeea;
}
.cell-blue {
    background-color: #f8f8ff;
}
.cell-aqua {
    background-color: #f8ffff;
}

.cell-green-semi-opaque {
    background-color: #a6f5a230;
}
.cell-aqua-semi-opaque {
    background-color: #a2f5e730;
}
.cell-orange-semi-opaque {
    background-color: #f5d0a230;
}
.cell-red-semi-opaque {
    background-color: #f5a2a230;
}
.cell-blue-semi-opaque {
    background-color: #a2bdf530;
}

.item-box {
    padding: 16px 24px;
    margin: 4px 15px;
    border: 1px solid #c7c7c7;
    border-radius: 7px;
}
    .item-box.valid {
        background-color: #eefcf1;
    }
    .item-box.invalid {
        background-color: #fcf0ee;
    }

.materials-col {
    min-height: 30px;
    max-height: 200px;
    overflow:hidden;
    overflow-y: auto;
}

.materials-col.rounded {
    border-radius: 4px;
}

.opacity-grayscale {
    background-color: #efefef;
    opacity: 0.6;
    filter: grayscale(100%);
    pointer-events: none;
}

/* The following buttons should be paired with the Bootstrap btn class */
.block-button {
    padding: 4px 10px;
    padding-top: 2px;
    margin: 2px 4px;
    background-color: #485687;
    border-color: #485687;
    color: white;
    font-size: 0.9em;
}
    .block-button:hover {
        background-color: #385ad1;
        border-color: #485687;
        color: white;
    }

    .block-button:disabled {
        cursor: default;
        background-color: #485687;
        border-color: #485687;
        color: white;
    }

.card-button {
    padding: 3px 10px;
    padding-top: 1px;
    margin: 2px 4px;
    background-color: #485687;
    border-color: #485687;
    color: white;
    font-size: 0.9em;
}
    .card-button:hover,
    .card-button:active {
        background-color: #385ad1;
    }
    .card-button.danger {
        background-color: #dc3545;
        border-color: #dc3545;
    }
        .card-button.danger:hover {
            background-color: #c82333;
        }

.col-button {
    padding: 3px 10px;
    padding-top: 1px;
    margin: 2px 4px;
    background-color: #485687;
    color: white;
    font-size: 0.8em;
}

    .col-button.reversed {
        background-color: #f1f2f7;
        border: 1px solid #485687;
        color: #485687;
    }

    .col-button.tiny {
        padding: 2px 6px;
        padding-top: 0;
        font-size: 0.7em;
    }
        .col-button.tiny.remove-x {
            font-size: 0.8em;
        }

    .col-button.light {
        padding: 3px 10px;
        padding-top: 1px;
        background-color: #ffffff;
        color: #333;
    }
        .col-button.light:hover {
            background-color: #ffffffde;
        }
    .col-button:disabled {
        background-color: #aaa;
    }

    .col-button.below-grid {
        margin-top: -0.25em;
        margin-bottom: 1.0em;
    }

    .col-button.round-button {
        border-radius: 1em !important;
    }

    .col-button.reversed.pointer:hover {
        background-color: #d1e4fa;
    }


    button.pointer {
        cursor:pointer;
    }



.col-p {
    max-width: 100%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
}

    .col-p.sm-10 {
        width: 10%;
    }

    .col-p.sm-20 {
        width: 20%;
    }

    .col-p.sm-30 {
        width: 30%;
    }

    .col-p.sm-40 {
        width: 40%;
    }

    .col-p.sm-50 {
        width: 50%;
    }

    .col-p.sm-60 {
        width: 60%;
    }

    .col-p.sm-70 {
        width: 70%;
    }

    .col-p.sm-80 {
        width: 80%;
    }

    .col-p.sm-90 {
        width: 90%;
    }

    .col-p.sm-100 {
        width: 100%;
    }

.light-row-border {
    border-bottom: 1px solid #fcfcfc;
    padding-bottom: 0.25em;
}

.component-row {
    padding: 0;
    margin: 0;
    background-color: #f0f8ff4a;
}
    .component-row.lockit {
        background: #fffdee75;
    }
.component-row .col {
    padding-left: 0;
    padding-right: 0;
}
.component-weight-display {
    color: #485687;
    font-weight: bold;
}

.value-table-wrapper {
    position: relative;
    overflow: auto;
    /*border: 1px solid black;*/
    white-space: nowrap;
}

.blend-table .value-table-wrapper {
    font-size: 1.1em;
}
.blend-table .value-table .header-row {
    border-top: 1px solid #ccc;
}

table.value-table th,
table.value-table td {
    border-top: 1px solid #ccc;
    border-right: 1px solid #dfdfdf;
}

    table.value-table th:last-child,
    table.value-table td:last-child {
        border-right: 1px solid #ccc;
    }

.blend-table table.value-table th,
.blend-table table.value-table td {
    border-top: 1px solid #ccc;
    border-left: 1px solid #dfdfdf;
    border-right: 0;
    border-bottom: 0;
}

    .blend-table table.value-table th:nth-child(2),
    .blend-table table.value-table td:nth-child(2) {
        border-left: 2px solid #ccc;
    }

    .blend-table table.value-table th:last-child,
    .blend-table table.value-table td:last-child {
        border-right: 1px solid #ccc;
    }

table.value-table th {
    padding-top: 6px;
    /*border-top: 0;*/
    vertical-align: bottom;
}

table.value-table .sticky-col {
    position: -webkit-sticky;
    position: sticky;
    background-color: #fff !important;
    border: 1px solid #ccc;
    border-top: 2px solid #ccc;
    border-right: 6px solid #ccc;
    border-bottom: 3px solid #ccc;
    overflow: hidden;
    font-size: 0.9em;
}

table.value-table .sticky-calc {
    position: -webkit-sticky;
    position: sticky;
    background-color: #fff !important;
}

table.value-table .first-col {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    overflow: hidden;
    left: 0px;
    font-size: 0.85em;
}

    table.value-table .first-col .info-div {
        border: 0;
        padding: 0 6px;
    }

table.value-table .spec,
table.value-table .head-cell {
    min-width: 22px;
    text-align: center;
    padding: 0 4px;
}
table.value-table .head-cell {
    padding-top: 6px;
    background: #fff !important;
    writing-mode: vertical-rl;
    text-orientation: upright;
    border-top: 0;
    color: #646464;
}
    table.value-table .head-cell.norm {
        writing-mode: unset;
        text-orientation: unset;
        border-top: 1px solid #ccc;
        border-right: 1px solid #dfdfdf;
    }
    table.value-table td.norm {
        border-top: 1px solid #ccc;
        border-right: 1px solid #dfdfdf;
    }
    table.value-table .head-cell.unhilite {
        background: #f2f2f266 !important;
        color: #787878; /* has slightly lighter text */
    }
    table.value-table .head-cell.colorize {
        background: #faf9ef !important;
        color: #485687;
    }

table.value-table .spec {
    font-size: 0.8em;
    color: #777;
    min-width: 3.5em;
    text-align: right;
}
    table.value-table .spec.unhilite {
        background: #f2f2f266 !important;
        color: #888; /* has slightly lighter text */
    }

table.value-table .spec-warning {
    font-weight: bold;
    color: red;
}

    table.value-table .calc-row .spec {
        background: #fff;
        color: #485687;
        font-weight: bold;
    }

table.value-table .space-row {
    height: 8px;
    border-top: 1px solid #ccc;
}

div.space-row {
    height: 6px;
    border-top: 1px solid #efefef;
    background: #fdfdfd;
}

/* EDITABLE TABLE */
/*table.value-table.editable {
    border-collapse: collapse;
}*/

    table.value-table.editable th,
    table.value-table.editable td {
        /*text-align: left;*/
        padding: 4px 8px;
    }

    table.value-table tbody tr.striped:nth-child(even),
    table.value-table.editable tbody tr:nth-child(even) {
        background: #f2f2f2;
    }

    table.value-table.editable td.edit {
        background: #fff;
    }
        table.value-table.editable td.edit:focus-visible {
            outline: 1px solid crimson;
            border-radius: 3px;
        }




.hide {
    display: none;
}

.card-alert {
    font-size: 1.25em;
    color: #333;
    /*background: #eef0f3;*/
    border: 1px solid #ccc;
    padding: 3px 16px;
    width: fit-content;
    margin: 0 auto;
    border-radius: 6px;
}


.col-label {
    padding: 2px 4px;
    padding-top: 3px;
    border-right: 1px solid #f0f0f0;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
}
    .col-label.extra-value {
        overflow-x: scroll;
    }
    .col-label:last-child {
        border-right: 0;
    }
    .col-label .label-fix {
        height: 100%;
        position: relative;
    }
    .col-label .label-fix label {
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .col-label.extra-value label.cell {
        writing-mode: vertical-rl;
        text-orientation: upright;
        width: 22px;
        text-align: center;
    }

.col-value {
    padding: 2px 4px;
    padding-top: 3px;
    font-size: 0.9em;
    border-right: 1px solid #f0f0f0;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}
/*    .col-value.extra-value {
        overflow-x:scroll;
    }*/
    .col-value:last-child {
        border-right: 0;
    }
    .col-value.extra-value .spec-val {
        min-width: 22px;
        padding: 0 4px;
        border-right: 1px solid #ccc;
        display: inline-block;
        text-align: center;
        font-size: 0.8em;
    }
        .col-value.extra-value .spec-val:last-child {
            border-right: 0;
        }
.col-multi {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}


.hidden {
    display: none !important;
}

.showing {
    display: block;
}

.invisible {
    visibility: hidden;
}
    .invisible.anchor {
        width: 0;
        height: 0;
        padding: 0;
        margin: 0;
    }

.nice-button {
    padding: 6px 24px;
    padding-bottom: 7px;
}

.asterik-note {
    font-size: 0.65em;
}
.asterik-header {
    margin-top: -12px;
}


.basic-padding {
    padding-left: 15px;
    padding-right: 15px;
}

.btn-normal {
    padding-left: 16px;
    padding-right: 16px;
    background-color: #485687;
}
.btn-primary {
    background-color: #495da3;
}
    .btn-primary:hover {
        background-color: #485687;
    }

.slight-row {
    margin-top: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eeeff4;
    border-image: linear-gradient(90deg, transparent 0%, #eeeff4 10%, transparent 85%) 1;
}

    .slight-row:last-child {
        border-bottom: 0;
    }

    .slight-row button {
        margin-top: -3px;
    }

.with-linear-gradient {
    border-style: solid;
    border-width: 10px;
    border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}


/*** Warehouse Matrix **/
.warehouse-matrix .matrix-section {
    padding: 1em !important;
    border: 1px solid #BBC1D4;
    border-radius: 8px;
    margin: 2.0em 0.5em;
}
.warehouse-matrix .section-header {
    text-align: left;
    padding-left: 2.25em;
    margin-bottom: 1.0em;
}
    .warehouse-matrix .section-header .header {
        background: #fff;
        margin-top: -1.5em;
        font-size: 1.2em;
        color: #112797;
        width: fit-content;
        padding: 0 16px;
    }
    .warehouse-matrix .row {
        padding: 5px 0;
        font-size: 0.9em;
    }
.warehouse-matrix .matrix-header {
    padding-top: 6px;
    text-align: right;
    vertical-align: middle;
    color: #777;
}
.warehouse-matrix .stack-holder {
    display: grid;
    /* set up a grid that has 80px columns that wrap intact */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    column-gap: 8px;
}
.warehouse-matrix .matrix-stack {
    text-align: center;
    vertical-align: middle;
    color: #777;
}
.warehouse-matrix .matrix-stack-indicator {
    text-align: center;
    color: #777;
}
.warehouse-matrix .matrix-level {
    background-color: aliceblue;
    border: 2px solid #808080;
    border-bottom: 1px solid #808080;
    border-top: 0;
    border-radius: 4px;
    padding: 2px 4px;
    margin: 0 2px;
    min-width: 48px;
    text-align: center;
    color: #333;
    user-select: none;
}
    .warehouse-matrix .matrix-level:first-child {
        border-top: 2px solid #808080;
    }
    .warehouse-matrix .matrix-level:last-child {
        border-bottom: 2px solid #808080;
    }

    .warehouse-matrix .matrix-level.locked {
        background-color: #ffe0e0;
    }

    .warehouse-matrix .matrix-level.reserved {
        background-color: #d5d9e8;
    }

    .warehouse-matrix .matrix-level.chosen {
        background-color: #33CC33;
    }

.warehouse-legend {
    padding: 3px 0;
    font-size: 0.75em;
    color: #333;
}
.warehouse-legend-icon {
    display: inline-block;
    margin: 0;
    margin-right: 3px;
    margin-left: 20px;
    width: 22px;
    max-width: 22px;
    height: 12px;
    max-height: 12px;
    border: 2px solid #204C04;
    border-radius: 3px;
    background-color: aliceblue;
}
.warehouse-legend-icon:first-child {
    margin-left: 0;
}
    .warehouse-legend-icon.locked {
        background-color: #ffe0e0;
    }
    .warehouse-legend-icon.reserved {
        background-color: #d5d9e8;
    }
    .warehouse-legend-icon.chosen {
        background-color: #33CC33;
    }

    .warehouse-header {
        background: #cfd3d8;
        border-top: 1px solid #7c7e81;
        border-bottom: 2px solid #7c7e81;
        padding: 14px 10px;
        padding-bottom: 12px;
        margin: 0 -16px;
        font-size: 1.2em;
        color: #999;
    }
.warehouse-banner {
    padding-top: 6px;
    color: #802B01;
}
.warehouse-tracking {
    color: #485687;
}
.warehouse-subheader {
    padding: 12px 10px;
    border-bottom: 1px solid #7c7e81d0;
    margin: 0 -16px;
    margin-bottom: 20px;
}
.warehouse-buttons {
    display: inline-block;
    text-align: right;
    margin-left: 10px;
}
.matrix-button {
    margin-top: -4px !important;
    padding-top: 4px !important;
}
.warehouse-radio-label {
    margin-right: 20px;
}
.warehouse-loc-bags {
    color: #485687;
    font-size: 1.2em;
    padding-left: 30px;
}
.warehouse-loc-info {
    color: #808aae;
    font-size: 0.85em;
}

.quicktip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
    font-size: 0.8em;
}

    .quicktip .quicktiptext {
        visibility: hidden;
        width: 250px;
        background-color: #2196f3;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        right: 108%;
        opacity: 0;
        transition: opacity 1s;
    }

    .quicktip .quicktiptext.text-panel {
        width: 320px;
        text-align: left;
        padding: 5px 10px;
    }

        .quicktip .quicktiptext::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent #2196f3;
        }

        .quicktip .quicktiptext.text-panel::after {
            top: 35px;
        }

    .quicktip:hover .quicktiptext {
        visibility: visible;
        opacity: 1;
    }

/* Matrix Tooltip container */
.matrix-tooltip {
    position: relative;
    /* display: inline-block;
    border-bottom: 1px dotted black; <= If you want dots under the hoverable text */
}

    /* Matrix Tooltip text */
    .matrix-tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #485687;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the matrix-tooltip text */
        position: absolute;
        left: 10px;
        top: -30px;
        z-index: 1;
    }

/* Show the matrix-tooltip text when you mouse over the matrix-tooltip container */
    .matrix-tooltip:hover .tooltiptext {
        visibility: visible;
    }


.inline-headline {
    display: inline-block;
    font-size: 1.25rem;
    margin-right: 30px;
}
.inline-radio-group {
    display: inline-block;
    font-size: 1.25rem;
}
.inline-radio-group input,
.inline-radio-group label {
    font-size: 1.0em !important;
    font-weight: normal;
    color: black;
}
    .inline-radio-group label {
        margin-right: 10px;
    }


.destination-vessel-details {
    font-size: 0.9em;
    color: #777;
    margin-top: 0.75em;
    margin-bottom: 0;
}



/* The legend for the inventory page */
.icon-legend {
    font-size: 0.75em;
    text-align: right;
    color: #e2e2e2;
}

    .icon-legend i {
        color: white;
    }



.disabled-opacity {
    opacity: 0.75;
}

.railcar-in-transit {
    background-color: #FFBF0096;
    border-bottom-color: #fafafa61 !important;
    border-bottom-width: 1px !important;
}

.railcar-on-site {
    background-color: #ebf1f5;
    border-bottom-color: #fafafa61 !important;
    border-bottom-width: 1px !important;
}

.railcar-off-site {
    background-color: #ff00001a;
    border-bottom-color: #fafafa61 !important;
    border-bottom-width: 1px !important;
}

/* Dropdown Menu as a multi-select */
.selector-holder {
    position: relative;
    display: none;
}

.selector-menu {
    background-color: #fff;
    border: 2px solid #1f66cc;
    border-radius: 4px;
    border-top-left-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    max-width: 260px;
    font-size: 0.8em;
    color: #425288;
    overflow: hidden;
}

    .selector-menu .selector-menu-item {
        background-color: #fff;
        padding: 2px 5px;
        user-select: none;
        cursor: pointer;
    }

        .selector-menu .selector-menu-item .fas {
            color: #485da6;
        }

        .selector-menu .selector-menu-item:disabled {
            opacity: 0.75;
        }

        .selector-menu .selector-menu-item.header {
            padding: 0 5px;
            font-size: 0.85em;
            font-style: inherit;
            font-variant: small-caps;
            background-color: #eceff3;
            border-bottom: 1px solid #ddd;
        }

        .selector-menu .selector-menu-item.selected {
            background-color: #1f66cc;
            color: #fff;
        }

            .selector-menu .selector-menu-item.selected .fas {
                color: #fff;
            }

    .selector-menu .railcar-menu-item {
        display: none;
    }

        .selector-menu .railcar-menu-item.breaker {
            max-height: 2px;
            border-top: 1px solid #eee;
        }

    .selector-menu .selector-menu-scroller {
        height: 100px;
        overflow-y: auto;
    }

    .selector-menu .selector-menu-footer {
        text-align: center;
        padding: 2px 5px;
        background-color: #fafafa;
        border-top: 1px solid #aaa;
    }

        .selector-menu .selector-menu-footer button {
            background-color: #fafafa;
            border: 1px solid #999;
            color: #555;
        }

/* The Modal (background) */
.styled-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 900;
}

/* Modal Content */
.styled-modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #888;
    border-radius: 8px;
    margin: auto;
    padding: 0;
    /* width: 80%; Could be more or less, depending on screen size */
    width: 96%;
    max-width: 700px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation-name: animatestyledmodal;
    animation-duration: 0.8s;
    overflow: hidden;
}

/* Modal Header */
.styled-modal-header {
    padding: 2px 16px;
    padding-top: 8px;
    background-color: #485687;
    color: white;
    font-size: 0.85em;
    text-align: center;
}

/* Modal Body */
.styled-modal-body {
    padding: 2px 16px;
}
    .styled-modal-body .instructions {
        padding: 5px;
        font-size: 1.1em;
        width: 100%;
        text-align: center;
    }
    .styled-modal-body label{
        padding-left: 5px !important;
        margin-bottom: 0.2em !important;
    }

    .styled-modal-body .row {
        margin-bottom: 1.0em;
    }

/* Modal Footer */
.styled-modal-footer {
    padding: 6px 16px;
    background-color: #dbdbdb;
    border-top: 1px solid #d1d1d1;
    color: white;
    text-align: center;
}
    .styled-modal-footer button {
        font-size: 1.0em !important;
    }

/* The Close Button */
.styled-modal .styled-closer {
    color: #ebebeb;
    float: right;
    font-size: 2em;
    font-weight: bold;
    margin-top: -10px;
}

    .styled-modal .styled-closer:hover,
    .styled-modal .styled-closer:focus {
        color: rgb(231, 65, 65);
        text-decoration: none;
        cursor: pointer;
    }

/* Add Animation */
@-webkit-keyframes animatestyledmodal {
    from {
        top: 0;
        opacity: 0;
    }
    to {
        top: 5.0em;
        opacity: 1;
    }
}
@keyframes animatestyledmodal {
    from {
        top: 0;
        opacity: 0;
    }
    to {
        top: 5.0em;
        opacity: 1;
    }
}


select, select:hover {
    background-color: white;
}

option {
    background-color: white;
}

select.form-input {
    text-align: left !important;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 4px 5px;
    background-color: #fff !important;
    color: #333;
    width: 100%;
    max-width: 100%;
}

    select.form-input option {
        background-color: #fff !important;
    }

.form-control.form-sized {
    height: 2em !important;
}

input.form-input,
textarea.form-input {
    text-align: left !important;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 3px 5px;
    background-color: #fff !important;
    color: #333;
    width: 100%;
    max-width: 100%;
}
    input.form-input:read-only,
    textarea.form-input:read-only {
        background-color: #fdfdfd !important;
        border: 1px solid #e8e8e8 !important;
    }
    input.form-input.number-input {
        text-align: right !important;
    }
    input.form-input.small-number-input {
        width: 36px;
        font-size: 0.8em;
    }
    input.form-input.centered {
        text-align: center !important;
    }
    input.form-input.short
    input.form-control.short {
        height: 26px !important;
    }
    input.form-input.small {
        padding: 0 5px;
        padding-bottom: 1px;
    }

    input.form-input:disabled,
    textarea.form-input:disabled {
        background-color: #fdfdfd !important;
        border: 1px solid #e8e8e8 !important;
    }

    input.form-input.large {
        height: 2.25em;
    }

input.sku:read-only {
    background-color: #fffbe6 !important;
    border: 1px solid darkred !important;
    color: darkred !important;
    border-radius: 2px;
    font-size: 0.85rem;
    padding: 5px 6px;
}

input.lot-number:read-only {
    background-color: #fffbe6 !important;
    border: 1px solid darkred !important;
    color: darkred !important;
    border-radius: 2px;
    font-size: 0.85rem;
    padding: 5px 6px;
    padding-top: 3px;
}

input[type="date"].form-input {
    text-align: left !important;
    background-color: #fff !important;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 3px 5px;
    color: #333;
    width: auto;
    max-width: 100%;
}

/* Used to force alignment of text with faux input boxes */
.non-input {
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    padding: 3px 5px;
    color: #333;
    width: 100%;
    max-width: 100%;
    min-height: 2.15em;
    overflow: hidden;
}

/* Used to force left/right alignment of text to input boxes */
.pad-as-input {
    padding-left: 1.75em;
    padding-right: 1.75em;
}

option.separator {
    color: #999;
    background: none;
    font-weight: bold;
    font-size: 6px !important;
    vertical-align: middle;
}

.info-table {
    color: #333;
}
.info-table .row {
    border: 1px solid #efefef;
    border-radius: 6px;
    margin: 1px 0;
}
    .info-table .row .col {
        border-left: 1px solid #efefef;
        font-size: 0.9em;
    }
        .info-table .row .col:first-child {
            border-left: 0;
        }
    .info-table .row .col label {
        margin-top: 6px;
    }
    .info-table .row.body-row .col {
        padding-top: 0.4em;
        padding-bottom: 0.4em;
    }


.faux-table {
    color: #333;
}

    .faux-table .row {
        border: 1px solid #efefef;
        border-radius: 6px;
        margin: 1px 0;
        cursor: pointer;
    }

        .faux-table .row:hover {
            background-color: antiquewhite;
            border-color: #eddfb9;
        }

        .faux-table .row .col {
            border-left: 1px solid #efefef;
            font-size: 0.9em;
        }

            .faux-table .row .col:first-child {
                border-left: 0;
            }



.grid-addition-button {
    float: right;
    padding: 4px 12px;
    margin-top: -20px;
    margin-bottom: 4px;
}


.component-table-row {
    margin-left: 0;
    margin-right: 0;
}

.blend-table-row {
    margin-left: 0;
    margin-right: 0;
}

.blend-table {
    color: #333;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
}

    .blend-table .row {
        border-top: 1px solid #efefef;
        margin: 1px 0;
    }

        .blend-table .row.header-row {
            border-top: 0;
            background-color: #f9f9f9;
        }

        .blend-table .row.header-row label {
            padding-bottom: 2px;
            margin-bottom: 0;
        }

        .blend-table .row .col {
            border-right: 1px solid #efefef;
            font-size: 0.9em;
        }

            .blend-table .row .col:last-child {
                border-left: 0;
            }

            .blend-table .row .col label {
                margin-top: 6px;
                margin-bottom: 1px !important;
            }

        .blend-table .row.body-row .col {
            padding-top: 0.4em;
            padding-bottom: 0.4em;
        }

        .blend-table .row.detail-row {
            background-color: #fbfafa;
        }
            .blend-table .row.detail-row.selected {
                background-color: #ffffff;
            }
                .blend-table .row.detail-row.selected .vessel-empty {
                    background-color: #fbfafa;
                }



.catalog-table {
    color: #333;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
}

    .catalog-table .row {
        border-top: 1px solid #efefef;
        margin: 1px 0;
    }

        .catalog-table .row.header-row {
            border-top: 0;
            background-color: #f9f9f9;
        }

            .catalog-table .row.header-row label {
                padding-bottom: 2px;
                margin-bottom: 0;
            }

        .catalog-table .row .col {
            border-right: 1px solid #efefef;
            font-size: 0.9em;
        }

            .catalog-table .row .col:last-child {
                border-left: 0;
            }

            .catalog-table .row .col label {
                margin-top: 6px;
                margin-bottom: 1px !important;
            }

        .catalog-table .row.body-row .col {
            padding-top: 0.4em;
            padding-bottom: 0.4em;
        }

        .catalog-table .row.detail-row {
            background-color: #fcfcfc;
            display: none;
        }


.goods-row-wrapper .row.goods-body,
.goods-row-wrapper .row.goods-header {
    display: table;
}

    .goods-row-wrapper .row.goods-body .field {
        text-align: left;
        vertical-align: bottom;
        display: table-cell;
    }

    .goods-row-wrapper .row.goods-header .head-cell {
        text-align: left;
        vertical-align: bottom;
        display: table-cell;
    }

        .goods-row-wrapper .row.goods-header .head-cell.vertical {
            min-width: 22px;
            padding: 0 4px;
            padding-top: 6px;
            writing-mode: vertical-rl;
            text-orientation: upright;
        }


.catalog-table table.value-table .field {
    font-size: 1.0em;
    padding: 0 4px !important;
    min-width: 1.5em !important;
    /*text-align: left;*/
}
.catalog-table table.value-table .field.weight {
    text-align: right;
}
.catalog-table table.value-table .field.unhilite {
    background: #f2f2f266 !important;
    color: #888; /* has slightly lighter text */
}
.catalog-table table.value-table th,
.catalog-table table.value-table td {
    border-top: 0;
    min-width: 1.5em !important;
    padding: 0 4px;
}

/** Faux-Radio with is a clickable lighted checkbox, no sliding switch */
.faux-radio {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid #aaa;
    border-radius: 12px;
    background-color: #fff;
    margin: 0 !important;
}
    .faux-radio.small {
        width: 12px;
        height: 12px;
        border-radius: 6px;
        vertical-align: middle;
    }
    .faux-radio input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.faux-radio-light {
    position: absolute;
    cursor: pointer;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 12px;
    background-color: #ccc;
    -webkit-transition: .2s;
    transition: .2s;
}
.faux-radio.small .faux-radio-light {
    border-radius: 8px;
}
input:checked + .faux-radio-light {
    background-color: red;
}




/** SWITCHES */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch.small {
    width: 24px;
    height: 14px;
    margin-bottom: 0 !important;
}

    .switch.medium {
        width: 34px;
        height: 18px;
        margin-bottom: 0 !important;
    }

    .switch.small.floating {
        float: left;
        margin-top: 0.4em;
        margin-right: 4px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .switch-slider:before {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

.switch.small .switch-slider:before {
    width: 10px;
    height: 10px;
}

.switch.medium .switch-slider:before {
    width: 15px;
    height: 15px;
}

input:checked + .switch-slider {
    background-color: #2196F3;
}

input:focus + .switch-slider {
    box-shadow: 0 0 1px #2196F3;
}

input.large-check:checked + .switch-slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

input.medium-check:checked + .switch-slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

input.small-check:checked + .switch-slider:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

input.short-width {
    max-width: 300px;
}

input.medium-width {
    max-width: 360px;
}

input.large-width {
    max-width: 420px;
}


/* Rounded sliders */
.switch-slider.round {
    border-radius: 24px;
}
    .switch-slider.round:before {
        border-radius: 50%;
    }

.switch.small .switch-slider.round {
    border-radius: 14px;
}

.switch.medium .switch-slider.round {
    border-radius: 19px;
}

.switch-form-buffer {
    margin-top: 0.5em;
}

.basic-switch-label {
    padding: 0 5px;
    color: #485687;
}
.form-switch-label {
    padding: 0 5px;
    color: #485687;
    font-weight: normal;
    font-size: 1.1em;
    margin-top: -0.275em;
}
.form-switch-label.small {
    font-size: 0.9em;
    margin-top: 0;
}
.spec-switch-label {
    background: #faf9ef;
    border: #ccc 1px solid;
    padding: 0 5px;
    border-radius: 3px;
    color: #485687;
}


.padding-left-zero {
    padding-left: 0 !important;
}
.padding-right-zero {
    padding-right: 0 !important;
}


#detailArea input {
    width: 98% !important;
    max-width: 98% !important;
}

.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}
.align-center {
    text-align: center;
}

.coder {
    width: 0.35em;
    min-width: 0.25em;
    max-width: 0.35em;
    height: .75em;
    background: #381fb4;
    border: 1px solid #333;
    display: inline-block;
    margin-right: 5px;
}
    .coder.material {
        background: #32d816;
    }
    .coder.product {
        background: #f34e18;
    }
    .coder.moved {
        margin-bottom: 5px;
        margin-right: 0;
    }


.railcar-indicator {
    width: 1.0em;
    min-width: 0.5em;
    max-width: 1.0em;
    height: 1.0em;
    min-height: 0.5em;
    max-height: 1.0em;
    background: #1f55b4;
    border: 1px solid #333;
    border-radius: 1.0em;
    border: 1px solid #333;
    display: inline-block;
    margin-left: -3px;
    margin-right: 3px;
    font-size: 8px;
    font-weight: bold;
}
    .railcar-indicator.active {
        background: #1f55b4;
    }
    .railcar-indicator.in-transit {
        background: orange;
    }
    .railcar-indicator.not-active {
        background: #b41f1f;
    }

.lock {
    display: inline-block;
    margin-right: 5px;
    color: #C25252;
    font-size: 0.75em;
}

    .lock.moved {
        margin-bottom: 3px;
        margin-right: 0;
    }


.area-padding {
    height: 1.0em;
    min-height: 1.0em;
    max-height: 1.0em;
}
.area-label {
    font-size: 18px;
    font-weight: bold;
    color: #23356D;
    display: inline-block;
}

/** Styles for lists of materials by manufacturer */
.goods-container {
    cursor: pointer;
    padding: 4px 15px;
    margin-top: 1px;
}

.goods-manufacturer {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-bottom: 0;
    padding: 5px 10px;
}
    .goods-manufacturer:last-child {
        border-bottom: 1px solid #eee;
    }
    .goods-manufacturer .title {
        display: inline-block;
        color: #485687;
        font-size: 1.0em;
        padding: 6px 0;
    }

.goods-catalyst {
    background: #fff;
    border: 1px solid #eee;
    border-bottom: 0;
    padding: 2px 15px;
    padding-bottom: 20px;
    font-size: 0.85em;
}
    .goods-manufacturer .goods-catalyst {
        display: none;
    }
.goods-catalyst .title {
    display: inline-block;
    color: #445db2;
}
    .goods-catalyst label {
        margin-bottom: 0 !important;
    }
    .goods-catalyst .field {
        border-left: 1px solid #f0f0f0;
        white-space: nowrap;
        overflow: hidden;
    }
    .goods-catalyst .weight {
        text-align: right;
    }
    .goods-catalyst .buttons {
        font-size: 0.75em;
        text-align: right;
        padding: 0 !important;
    }

.goods-material {
    background: #fefefe;
    border: 1px solid #f0f0f0;
    border-left: 0;
    border-bottom: 0;
}
    .goods-material.odd {
        background: #fff;
    }
    .goods-material:hover {
        background-color: aliceblue;
    }

.goods-products {
    display: block;
    font-size: 1.0em;
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 5px 10px;
}
.goods-product {
    background: #fefefe;
    border: 1px solid #f0f0f0;
    border-left: 0;
    border-bottom: 0;
    font-size: 0.9em;
}
    .goods-product.odd {
        background: #fff;
    }
    .goods-product:hover {
        background-color: aliceblue;
    }


.goods-row-wrapper .row:first-child {
    border: 0;
}
.goods-row-wrapper .row:last-child {
    border-bottom: 1px solid #f0f0f0;
}
    .goods-row-wrapper.buffer-top {
        margin-top: 12px;
    }


.prev-catalyst {
    border-left: 1px solid #999;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    padding: 0 15px;
}
    .prev-catalyst .field {
        border-left: 1px solid #f0f0f0;
        white-space: nowrap;
        overflow: hidden;
    }

    .prev-catalyst .weight {
        text-align: right;
    }

    .prev-catalyst .buttons {
        font-size: 0.75em;
        text-align: right;
        padding: 0 !important;
    }




#attributeComponentPercent {
    display: inline-block;
    max-width: 50px;
    text-align: right !important;
    margin-left: 0.5em;
    font-size: 0.8em;
}


.mini-note {
    font-size: 0.7rem;
    color: #73798e;
}

.mutli-column-label {
    border: 1px solid #ccc;
    border-bottom: 0;
    color: #ccc;
    font-size: 0.8em;
    text-align: center;
    font-variant: small-caps;
    padding: 0;
}

.dotted {
    background-image: radial-gradient(#ccc 10%, transparent 10%), radial-gradient(#ccc 10%, transparent 10%);
    /*background-color: #fff;*/
    background-position: 0 0, 4px 4px;
    background-size: 4px 4px;
}

.unmatched {
    background: #ffa50054;
    color: #e70000;
}


/** When choosing a product from the 'Blend' menu dialog */
.product-container {
    max-width: 100%;
    overflow-x: auto;
    text-align: left;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.5) inset;
    -webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.5) inset;
    -moz-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.5) inset;
    display: flex;
}

.product-stamp {
    border: 1px solid #aaa;
    border-radius: 6px;
    padding: 8px;
    margin: 0;
    background: #fafafa;
    display: inline-block;
    text-align: left;
    cursor: pointer;
}
    .product-stamp:not(:first-child) {
        border-left: 1px solid #f0f0f0;
    }
    .product-stamp.selected {
        background: #fff;
        border-color: #381fb4;
    }


/** When choosing a previously built 'Blend' on the Blend Producer page */
.stamp-container {
    max-width: 100%;
    overflow-x: auto;
    text-align: left;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.5) inset;
    -webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.5) inset;
    -moz-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.5) inset;
    display: flex;
}
.compound-stamp {
    /*width: 100px;*/
    border: 1px solid #aaa;
    border-radius: 6px;
    padding: 8px;
    margin: 0;
    background: #fafafa;
    display: inline-block;
    text-align: left;
}
    .compound-stamp:not(:first-child){
        border-left: 1px solid #f0f0f0;
    }
    .compound-stamp div {
        display: block;
        padding: 2px 8px;
        padding-top: 1px;
    }
        .compound-stamp div.standout {
            background: #e3eaf4;
        }



/* Style the form tabs */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #f9f9f9;
}

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        border-left: 1px solid #f9f9f9;
        border-right: 1px solid #f9f9f9;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }
    .tab button:first-child {
        border-left: 0;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }
        .tab button:first-child:hover {
            border-left: 0;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #dae2ec;
            border-left: 1px solid #c0ccdb;
            border-right: 1px solid #c0ccdb;
        }
        .tab button.active:first-child {
            border-left: 0;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}




.builder-canvas {
    position: relative;
}
.actions-row {
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 10px;
    margin-top: 20px;
    margin-right: 0;
}
    .actions-row .label {
        background: #fdfdfd;
        margin-left: 8px;
        margin-top: -11px;
        font-size: 0.9em;
        width: 100px;
    }
.steps-row {
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 10px;
    margin-top: 20px;
    margin-left: 0;
}
    .steps-row .label {
        background: #fdfdfd;
        margin-left: 8px;
        margin-top: -11px;
        font-size: 0.9em;
        width: 100px;
    }

.action-area {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px;
    margin: 12px;
    min-width: 120px;
    min-height: 120px;
    background-color: #f9f9f9;
}

.step-area {
    border: 1px solid #6c7fc1;
    border-radius: 4px;
    border-top-right-radius: 0;
    margin: 12px;
    min-width: 120px;
    background-color: #f9f9f9;
    position:relative;
}
    .step-area .step-state-display {
        vertical-align: top;
        background-color: #fff;
        writing-mode: vertical-rl;
        text-orientation: upright;
        width: 25px;
        height: 100%;
        font-variant: small-caps;
        text-align: center;
        right: 0;
        position: absolute;
    }
    .step-area .action-container {
        margin: 12px;
        margin-top: 32px;
        margin-right: 37px;
        min-height: 235px;
        border: 3px solid transparent;
    }
    .step-area.accept .action-container {
        border: 3px dashed #dae2ec;
    }

.action-component {
    font-size: 0.9em;
    background-color: #fff;
    border: 1px solid #6c7fc1;
    border-radius: 4px;
    border-top-left-radius: 0;
    margin: 12px;
    height: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 160px;
    max-width: 200px;
    position: static;
    display: inline-block;
    user-select: none;
    cursor: pointer;
}
    .action-component.dragging {
        opacity: 0.6;
        position: relative;
        z-index: 1000;
    }
    .action-component.dropping {
        transition: all 0.5s ease-in-out;
    }
    .action-component .action-info {
        padding: 0 12px;
    }

.action-component .step-lock {
    /*background-color: #e3e3e3;
    border-bottom-right-radius: 4px;*/
    margin-bottom: 6px;
    width: 20px;
    height: 20px;
    font-size: 0.8em;
    text-align: center;
}
    .action-component .step-lock .fa-lock {
        color: #ccc;
    }
        .action-component .step-lock .fa-lock:hover {
            color: #c25252;
        }
    .action-component .step-lock.locked .fa-lock {
        color: #c25252;
    }

.action-component .move-action-container {
    width: 100%;
    text-align: center;
}
    .action-component .move-action-container .action-state-display {
        color: indianred;
        display: inline-block;
        margin-top: 4px;
    }
    .action-component .move-action {
        margin-top: 5px;
        padding-top: 1px;
        width: 20px;
        height: 20px;
        font-size: 0.8em;
        text-align: center;
    }
    .action-component .move-action .fa{
        color: #ccc;
    }
        .action-component .move-action .fa:hover {
            color: #c25252;
        }
    .action-component .move-action.step-left {
        border-top-right-radius: 4px;
        float: left;
    }
    .action-component .move-action.step-right {
        border-top-left-radius: 4px;
        float: right;
    }
.action-component .trash-can {
    /*background-color: #e3e3e3;
    border-bottom-left-radius: 4px;*/
    margin-bottom: 6px;
    width: 20px;
    height: 20px;
    font-size: 0.8em;
    text-align: center;
    float: right;
}
    .action-component .trash-can .fa {
        color: #ccc;
    }
        .action-component .trash-can .fa:hover {
            color: #c25252;
        }

    .action-component .action-only {
        display: block;
    }
    .action-component.action-source .action-only {
        display: none; /*hide sub-items until we leave the action-area*/
    }
    .action-component .source-only {
        display: none; /*hide sub-items after leaving action-area*/
    }
    .action-component.action-source .source-only {
        display: block;
    }

    .action-component input {
        max-width: 45px;
        height: 1.5em;
        padding-top: 2px;
        margin-top: 2px;
    }
    .action-component .action-notes {
        width: 100%;
        height: 56px;
        resize: none;
    }

.step-buttons {
    min-height: 1.75em;
        padding-right: 30px;
}
    .step-buttons button {
        float: right;
        margin-left: 6px;
    }
.step-label {
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 22px;
    text-align: left;
    padding: 0 5px;
    padding-right: 15px;
    position: absolute;
    left: 0;
    top: 0;
    color: #802B01;
    cursor: default;
    font-variant: small-caps;
    letter-spacing: 0.025em;
}
.step-remover {
    border-bottom-left-radius: 4px;
    width: 25px;
    height: 22px;
    text-align: center;
    font-weight: bold;
    color: #ccc;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
    .step-remover:hover {
        color: #c25252;
    }

.action-component .source-spacer {
    height: 8px;
    border-bottom: 1px solid #efefef;
    background: #fdfdfd;
    margin-bottom: 2px;
}
    .action-component .source-spacer.bottom {
        border-bottom: 0;
        border-top: 1px solid #efefef;
        margin-bottom: 0;
        margin-top: 2px;
    }
.action-component.depleted .source-spacer {
    background-color: aquamarine;
}
.action-component.overage .source-spacer {
    background-color: indianred;
}
.action-component.locked .source-spacer {
    background-color: lightsteelblue;
}
.action-component.locked .step-lock {
    background-color: transparent;
}
    .action-component.locked .step-lock .fa-lock,
    .action-component.locked .step-lock .fa-lock:hover,
    .action-component.locked .step-lock.locked .fa-lock {
        color: lightsteelblue;
    }
.action-component.locked .trash-can {
    background-color: transparent;
}
    .action-component.locked .trash-can .fa,
    .action-component.locked .trash-can .fa:hover {
        color: lightsteelblue;
    }
.action-component.locked input,
.action-component.locked textarea {
    background-color: #f9f9f9 !important;
    pointer-events: none;
}

.process-state-display {
    display: inline-block;
    border: 2px solid #d0d2d6;
    border-radius: 4px;
    background-color: #dae2ec;
    color: #555;
    padding: 0 12px;
    padding-bottom: 0px;
    font-weight: normal;
    font-size: 0.8em;
    font-variant: small-caps;
    padding-bottom: 3px;
}

.processed {
    pointer-events: none;
}

.step-area.processed {
    background-color: #f4f9fd;
}

.action-component.processed {
    background-color: #f4f9fd;
}

.hide-icon {
    opacity: 0;
}

dialog::backdrop {
    background: #fff;
    opacity: 0.75;
}

.field-box {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0 20px;
    padding-top: 24px;
    margin: 10px;
    margin-top: 20px;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
}
    .field-box.wide {
        margin-left: 0;
        margin-right: 0;
    }
    .field-box.buffer {
        padding-bottom: 1.5em;
    }

    .field-box.standout {
        background-color: #fcfcfc;
    }

    .field-box.modal-style {
        margin: 0;
        margin-top: 2em;
    }
    .field-box.modal-style .row {
        margin-top: 0.5em;
    }

    .field-box .label,
    .field-box.default .label {
        background: #fff;
        margin-left: -6px;
        margin-top: -2.75em;
        padding: 4px 6px;
        font-size: 0.9em;
        width: fit-content;
        white-space: nowrap;
    }
    .field-box.modal-style .label {
        font-size: 1.2em;
        font-weight: bold;
        margin-top: -2.3em;
        color: #23356d;
    }
    .field-box.preview-style .label {
        background-color: #fbfbfb;
    }
    .field-box.success .label {
        background-color: #f6fce8 !important;
    }
    .field-box.inner {
        margin: 0;
        margin-top: 20px;
        margin-bottom: 1.5em;
    }
        .field-box.inner .label {
            font-size: 0.9em !important;
            font-weight: normal !important;
            margin-top: -2.75em !important;
        }



.contained-box {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
    background-color: #fcfcfc;
    margin-top: 0.5em;
}

    .contained-box.success {
        background-color: #FAFDF2;
    }

    .contained-box.wide {
        margin-left: 0;
        margin-right: 0;
    }

    .contained-box.buffer {
        padding-bottom: 1.5em;
    }

    .contained-box .box-title {
        font-size: 1.0em;
        margin-top: -0.75em;
        padding: 0.25em 0;
        background-color: transparent;
        color: #23356d;
    }

    .contained-box .box-text {
        padding: 6px;
    }

        .contained-box .box-text.box-number {
            text-align: right;
        }

            .contained-box .box-text.box-number.negative {
                color: red;
            }


.standout-box {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0 20px;
    padding-top: 24px;
    margin: 10px;
    margin-top: 20px;
    background-color: #fafafa;
}
    .standout-box.success {
        background-color: #FAFDF2;
    }

    .standout-box.wide {
        margin-left: 0;
        margin-right: 0;
    }

    .standout-box.buffer {
        padding-bottom: 1.5em;
    }

    .standout-box .box-title {
        font-size: 1.1em;
        margin-top: -1.0em;
        padding: 0.25em 0.5em;
        background-color: transparent;
        color: #23356d;
    }

    .standout-box .box-text {
        padding: 6px;
    }
    .standout-box .box-text.box-number {
        text-align: right;
    }
        .standout-box .box-text.box-number.negative {
            color: red;
        }


    /* rollover is a popup called when hovering over an adjacent 'hint' */
    .rollover {
        background: #fff;
        border: 3px solid #485687;
        border-radius: 8px;
        font-size: 0.9em;
        color: #999;
        width: 400px;
        max-width: 400px;
        display: none;
    }

    /* this is the heading */
    .rollover .h {
        font-size: 1.1em;
        color: #666;
    }

/* these properties override the rollover when hovering */
.rollover-hint:hover + .rollover {
    display: block;
}



.standard-title {
    font-size: 1.0em;
    margin-top: -0.75em;
    padding: 0.25em 0;
    color: #23356d;
}


.message {
    font-weight: normal;
    font-size: 0.8em;
    /*font-variant: small-caps;*/
    color: #777;
}


/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    /* The actual popup */
    .popup .popuptext {
        visibility: hidden;
        width: 240px;
        max-width: 240px;
        background: #fff;
        border: 3px solid #485687;
        border-radius: 8px;
        padding: 8px 0;
        text-align: center;
        color: #333;
        position: absolute;
        bottom: 4em;
        left: 50%;
        margin-left: -120px;
    }

        /* Popup arrow */
        .popup .popuptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -10px;
            /*background: #fff;*/
            border-width: 10px;
            border-style: solid;
            border-color: #485687 transparent transparent transparent;
        }

    /* Toggle this class - hide and show the popup */
    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }
        .popup .show .popuptext {
            z-index: 1;
        }


/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.background-eci {
    background-color: #2200CC;
}

.eci-footer {
    background-color: #2200CC;
    color: #fff;
}
    .eci-footer h6 {
        color: #fff !important;
    }

/* Rounded border for section border */
hr.rounded {
    border-top: 8px solid #bbb;
    border-radius: 5px;
}

.form-control[readonly]{
    background-color: #F8F8F8;
    border-color: #C4C4C4 !important;
    opacity: 1;
}

.form-control.borderless {
    border: 0 !important;
}

.clickable {
    cursor: pointer;
}

.k-icon.k-svg-icon svg {
    vertical-align: top;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #222;
    color: #4e4e4e;
    overflow-x: hidden;
    transition: 0.5s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    padding-top: 60px;
    text-align: center;
    z-index: 100000;
}

    .sidenav a {
        padding: 4px 4px 4px 10px;
        text-decoration: none;
        font-size: 1.0em;
        color: #ddd;
        text-wrap: nowrap;
        display: block;
        transition: 0.3s;
    }

        .sidenav a:hover,
        .sidenav a:active {
            color: #f1f1f1;
            font-size: 1.15em;
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 2.0em;
        margin-right: 50px;
    }

.mobile-logo {
    vertical-align: middle;
    max-height: 2.4em;
}
.hamburger {
    margin-right: 5px;
    font-size: 1.95em;
    font-weight: bold;
    color: #130074;
    cursor: pointer;
}

hr.menu-rule {
    background-color: #4e4e4e;
    width: 80%;
}

.page-title {
    text-align: center;
    padding: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.75em;
    color: #130074;
    border-bottom: 1px solid #ccc;
}



.body-content.mobile .task-header {
    top: 2.85em !important;
}
    .body-content.mobile .task-header .taskbar {
        top: 2.85em !important;
    }
    .body-content.mobile .task-header .task-header-band {
        top: 5.675em !important;
    }

/*.mobile-header {
    position: relative;
}*/

.mobile-page-surround {
    margin: 0.25em;
    margin-top: 0;
}

.mobile-control-widgets {
    min-height: 2em;
    margin: 0.5em 0;
    margin-bottom: 0;
    font-size: 0.85em;
    position: relative;
}

    .mobile-control-widgets .form-control {
        width: 8.2em;
        height: 1.8em;
    }

        .mobile-control-widgets .form-control .k-picker-wrap .k-icon {
            margin-top: -0.6em;
        }

    .mobile-control-widgets .form-control.card-button {
        height: 2.0em;
        width: unset;
    }

    
    .mobile-control-widgets .dropdown-toggle {
        width: 164px !important;
        max-width: 240px;
        padding-top: 1px;
        display: inline-block;
    }
        .mobile-control-widgets .dropdown-toggle.wide {
            width: 190px !important;
        }

        .mobile-control-widgets .dropdown-menu > a {
            padding: 6px 0;
            height: 25px;
            padding-top: 2px;
        }




.mobile-dropdown {
    background-color: #f5f5f5;
    color: #130074;
    font-weight: bold;
    border-radius: 4.8px;
    border: none;
    transition: 0.3s;
    padding: 6px 8px;
    padding-right: 24px;
}

    .mobile-dropdown:hover,
    .mobile-dropdown:active {
        background-color: #e8e8e8;
        color: #0e0055;
        cursor: pointer;
    }

    .form-control.mobile-dropdown {
        border-color: #ccc !important;
    }



.mobile-grid {
    margin-top: 0.5em;
    font-size: 0.85em;
    overflow: hidden;
}

    .mobile-grid .k-pager-wrap.k-pager-sm .k-pager-numbers {
        position: relative;
        border-radius: unset;
    }

    .mobile-grid .k-grouping-header {
        text-wrap: nowrap;
    }



@media screen and (max-height: 450px) {
    .sidenav {
    padding-top: 15px;
}

    .sidenav a {
        font-size: 3.0em;
    }
}

.k-grid td {
  white-space: nowrap;
  text-overflow: ellipsis; }

.k-grid-header th {
  white-space: nowrap;
  text-overflow: ellipsis; }

.grid-changed-save-button {
  background-color: #343a40;
  color: white;
  border-color: transparent;
  background-image: none; }

.k-operator-hidden {
  width: 100% !important; }

.k-list-scroller {
  width: 200px !important;
  min-height: 200px; }

.gridCellCenter {
  text-align: center; }

.gridCellRight {
  text-align: right; }

.gridCellLeft {
  text-align: left; }

.eci-grid-button {
  text-transform: uppercase;
  background-color: lightgray;
  color: gray;
  background-image: none;
  border-color: lightgray; }

.selected-grid-option {
  font-size: 110%;
  color: rebeccapurple;
  background-color: mediumpurple; }

.btn-dirty {
  background-color: #4BB543; }

.k-popup {
  width: 200px !important;
  min-height: 200px; }

.k-animation-container {
  min-width: 200px !important; }

.k-list-container .k-popup .k-group .k-reset .k-state-border-up {
  width: 200px !important; }

.k-grid-norecords-template {
  width: 100% !important; }

.highlight {
  background: #eee; }

.small-grid .k-grid-content {
  min-height: 300px; }

.medium-grid .k-grid-content {
  min-height: 500px; }

.large-grid {
  position: absolute;
  bottom: 15px;
  top: 70px; }

.full-screen-grid-container {
  position: fixed;
  top: 130px;
  z-index: 500;
  bottom: 15px;
  right: 0px;
  left: 0px; }

.full-screen-search-container {
    position: fixed;
    top: 6.25em;
    z-index: 500;
    bottom: 15px;
    right: 0px;
    left: 0px;
}

.full-screen-grid-surround {
    top: 12.5em;
    bottom: 15px;
    left: 0 !important;
    right: 0 !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
    position: fixed !important;
    z-index: 500;
}
.full-screen-grid-surround.legend-padding {
    top: 13.75em;
}

.full-screen-grid {
  position: fixed;
  top: 70px;
  bottom: 15px;
  left: 15px;
  right: 15px; }

.full-screen-fixed-below-navbar {
  position: fixed;
  top: 60px;
  bottom: 15px;
  left: 15px;
  right: 15px; }

#grid {
  height: 100%; }

#filtersMenuCollapse {
  position: absolute;
  z-index: 2000;
  left: 15px;
  right: 15px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px; }

.btn-toggle-view-active {
  background-color: #545b62;
  color: lightgray;
  font-weight: 600;
  font-size: 14px; }

.btn-toggle-view-not-active {
  background-color: lightgray;
  color: #545b62;
  font-weight: 400;
  font-size: 14px; }

.k-grid-content {
    height: inherit;
    height: calc(100% - ( var(--navbar-height) + var(--navbar-spacing) + var(--card-header-height) + var(--k-filter-height) + var(--k-grouping-header-height) + var(--k-header-icon-height )));
}

/* Replaced with the border for the td below */
/*.k-grid-content table {
    border-bottom: 1px solid #ccc;
}*/

.k-grid-content table tr:last-child td {
    border-bottom: 1px solid #ccc;
}

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

.k-grid .k-header {
    background-color: #f7f7f7;
}
.k-grid tr.k-alt {
    background-color: #fafafa;
}
.theme-table {
    position: relative;
    border: solid 1px #a6a6c6;
    font-size: 0.8em;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow: auto;
    display: grid;
}


    .theme-table.freight-loads-grid {
        grid-template-columns: 1fr 3fr 1fr 1fr 1fr 16px;
    }

    .theme-table.create-modal-loads-grid {
        grid-template-columns: 37px 1fr 1fr 1fr 1fr 1fr 37px 16px;
    }
    .theme-table.create-modal-container-loads-grid {
        grid-template-columns: 37px 1fr 1fr 1fr 1fr 1fr 1fr 37px 16px;
    }

    .theme-table.copy-modal-loads-grid {
        grid-template-columns: 37px 1fr 1fr 1fr 1fr 1fr 37px 16px;
    }

    .theme-table.copy-modal-container-loads-grid {
        grid-template-columns: 37px 1fr 1fr 1fr 1fr 1fr 1fr 37px 16px;
    }

    .theme-table.location-grid {
        grid-template-columns: 2fr 2fr 1fr 3fr 1fr 1fr 1fr 1fr 57px;
    }

    .theme-table.vessel-grid {
        grid-template-columns: 1fr 2fr 3fr 2fr 2fr 2fr 2fr 1fr 1fr 1fr 1fr 1fr 16px;
    }

    .theme-table.warehouse-grid {
        grid-template-columns: 2fr 2fr 3fr 2fr 2fr 2fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr 16px;
    }

    .theme-table.schedule-materials-grid {
        grid-template-columns: 17px 1fr 2fr 3fr 3fr 2fr 2fr 2fr 2fr 37px 16px;
    }

    .theme-table.create-materials-grid {
        grid-template-columns: 17px 1fr 2fr 2fr 2fr 2fr 37px 16px;
    }

    .theme-table.create-products-grid {
        grid-template-columns: .5fr 2fr 1fr 1fr 1fr 1fr 1fr 16px;
    }

    .theme-table.note-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr 2fr 16px;
    }

    .theme-table.vessel-copy-grid {
        grid-template-columns: 37px 1fr 1fr 1fr 2fr 37px 16px;
    }


    /* Vessel Card Grids */

    .theme-table.scheduling-load-grid {
        background-color: #f3f3f3;
        grid-template-columns: 1fr 2fr 2fr 4fr 3fr 46px;
    }

    .theme-table.scheduling-package-grid {
        background-color: #f3f3f3;
        grid-template-columns: 1fr 2fr 2fr 2fr 2fr 3fr 3fr 46px;
        /*grid-template-columns: 1fr 1fr 1fr 2fr 2fr 46px;*/
    }


    .theme-table.processing-load-grid {
        background-color: #f3f3f3;
        grid-template-columns: 1fr 2fr 2fr 2fr 2fr 3fr 2fr;
    }

    .theme-table.processing-package-grid {
        background-color: #c3d8cc;
        grid-template-columns: 1fr 2fr 2fr 2fr 1fr 2fr 2fr 3fr 46px;
    }


    .theme-table.available-inbound-grid {
        grid-template-columns: 1fr 2fr 3fr 2fr;
    }
/*    .theme-table.available-inbound-grid {
        grid-template-columns: 1fr 2fr 3fr 2fr 1fr;
    }*/

    .theme-table.available-source-grid {
        grid-template-columns: 2fr 1fr 2fr 2fr 2fr 1fr 1fr;
    }

    /* END Vessel Card Grids */


    .theme-table.contents-grid {
        grid-template-columns: 1fr 2fr 2fr 2fr 2fr 1fr 2fr 1fr 1fr;
    }

    .theme-table.vessel-sched-grid {
        grid-template-columns: 25px 10em 1fr 1fr 2fr 1fr 2fr 2fr 1fr 1fr 1fr 16px;
    }

    .theme-table.vessel-sched-packages-grid {
        grid-template-columns: 25px 10em 1fr 1fr 2fr 1fr 2fr 2fr 1fr 1fr 1fr 1fr 16px;
    }

    .theme-table.vessel-io-grid {
        grid-template-columns: 25px 10em 1fr 1fr 1fr 2fr 1fr 2fr 2fr 1fr 1fr 1fr 2fr 16px;
    }

    .theme-table.vessel-packages-io-grid {
        grid-template-columns: 25px 10em 1fr 1fr 1fr 2fr 1fr 2fr 2fr 1fr 1fr 1fr 1fr 2fr 16px;
    }


    .theme-table.admin-contents-grid {
        grid-template-columns: 1fr 2fr 3fr 3fr 1fr 2fr 1fr 1fr 1fr 46px;
    }


    .theme-table.small-sized {
        max-height: 300px;
    }

    .theme-table.large-sized {
        max-height: 500px;
    }

    .theme-table.extra-large-sized {
        max-height: 800px;
    }

    .theme-table.super-large-sized {
        max-height: 1200px;
    }

    .theme-table.top-space {
        margin-top: 0.5em;
    }

    .theme-table .headings {
        display: contents;
    }

    .theme-table .main-contents {
        display: contents;
    }
        .theme-table .main-contents.standard {
            font-size: 1.2em;
        }

    .theme-table .tr {
        display: contents;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .theme-table .th {
        padding: 4px 6px;
        padding-bottom: 1px;
        /*background-color: #f3f3fa;*/
        background-color: #f3f3f3;
        border-bottom: 1px solid #a6a6c6;
        border-right: 1px solid #a6a6c6;
        color: #485687;
        cursor: default;
        font-weight: bold;
        position: sticky;
        top: 0;
    }

        .theme-table .th.green-font,
        .theme-table .td.green-font {
            color: #5f8b56;
            font-weight: bold;
        }

        .theme-table .th:last-child {
            border-right: 0;
        }

    .theme-table .td {
        padding: 4px 6px;
        padding-bottom: 1px;
        color: #666;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid #a6a6c6;
        border-right: 1px solid #a6a6c6;
    }

    .theme-table.norm .td {
        padding: 4px 6px;
    }

        .theme-table .td:last-child {
            border-right: 0;
        }

    .theme-table .tr:nth-child(2n) .td {
        background-color: white;
    }

    .theme-table .tr:nth-child(2n+1) .td {
        /*background-color: #fafcfe;*/
        background-color: #fcfcfc;
    }

    .theme-table .tr .th.white-column,
    .theme-table .tr .td.white-column {
        background-color: #fff;
    }

    .theme-table .tr .th.gray-column,
    .theme-table .tr .td.gray-column {
        background-color: rgb(238, 239, 242);
    }

    .theme-table .tr .th.light-gray-column,
    .theme-table .tr .td.light-gray-column {
        background-color: #f3f3f3;
    }

    .theme-table .tr .th.green-column,
    .theme-table .tr .td.green-column {
        background-color: #e5f6ed;
    }

    .theme-table .tr .th.aqua-column,
    .theme-table .tr .td.aqua-column {
        background-color: #e3f8fa;
    }

    .theme-table .tr .th.blue-column,
    .theme-table .tr .td.blue-column {
        background-color: #f8f8ff;
    }

    .theme-table .tr .th.red-column,
    .theme-table .tr .td.red-column {
        background-color: #f9edea;
    }

    .theme-table .tr .th.transparent-column,
    .theme-table .tr .td.transparent-column {
        background-color: transparent;
    }

/*    .theme-table .tr .td input.net {
        font-weight: bold !important;
    }*/

    .theme-table .tr .td input.warning-field {
        color: #e82e2e !important;
        font-weight: bold !important;
        font-style: italic !important;
    }

    .theme-table .tr .th.left-it,
    .theme-table .tr .td.left-it {
        text-align: left;
    }
    .theme-table .tr .th.right-it,
    .theme-table .tr .td.right-it {
        text-align: right;
    }
    .theme-table .tr .th.center-it,
    .theme-table .tr .td.center-it {
        text-align: center;
    }

    .theme-table .tr:hover :not(.tr.no-hover) .td {
        background-color: #eaeafb;
    }

    .theme-table .tr.start-row .td {
        margin-top: 5px;
        border-top: 1px solid #a6a6c6;
    }

    .theme-table .tr.end-row .td {
        /*border-top: 1px solid #a6a6c6;*/
        border-bottom: 0;
    }

    .theme-table .tr.selected_row .td {
        background-color: #adf785;
    }

    .theme-table .td .cell-mark {
        margin-top: -5px;
        text-align: center;
        color: green;
        font-weight: bold;
        font-size: 1.25em;
    }

    .theme-table .tr .td.align-number {
        padding-right: 11px; /*used when there is no input box but you need to align to one above*/
        padding-top: 10px;
    }

    .theme-table .tr .td.load-identifier {
        color: #a0a0a0;
        font-style: italic;
        font-size: 0.75em;
        padding-top: 0.75em;
    }

    .theme-table .tr .td.clipped {
        overflow: hidden;
    }

    .theme-table .tr .td input {
        height: 21px;
        max-height: 24px;
        padding-top: 5px;
        font-size: 0.8em;
    }

    .theme-table .tr.override .td {
        padding-bottom: 4px;
    }

    .theme-table .tr.override .td input {
        height: unset;
        max-height: unset;
        padding-top: unset;
        font-size: 1.0em;
    }

    .theme-table.medium-rows {
        font-size: 0.9rem;
    }

        .theme-table.medium-rows .th {
            font-size: 0.9rem;
        }

        .theme-table.medium-rows .td.display {
            font-size: 0.9rem;
        }

        .theme-table.medium-rows .td input {
            height: 1.85em;
            max-height: 1.85em;
            font-size: 0.9em;
        }

    .theme-table.tall-rows {
        font-size: 1.0rem;
    }

        .theme-table.tall-rows .th {
            font-size: 0.9rem;
        }

        .theme-table.tall-rows .td.display {
            font-size: 0.9rem;
        }

        .theme-table.tall-rows .td input {
            height: 2.0em;
            max-height: 2.0em;
            font-size: 1.0rem;
        }

        /* Chrome, Safari, Edge, Opera */
        .theme-table .tr .td input::-webkit-outer-spin-button,
        .theme-table .tr .td input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        .theme-table .tr .td input[type=number] {
            -moz-appearance: textfield;
        }

        .theme-table button {
            border: 0;
            border-radius: 6px;
            font-size: 0.75em;
            padding: 2px 10px;
            padding-bottom: 4px;
            margin-bottom: 4px;
            background: #134778;
            color: #fff;
        }

.theme-table-surround {
    position: relative;
    overflow: hidden;
}

    .theme-table-surround .info-slider {
        background: #fff;
        border: 3px solid #a6a6c6;
        border-radius: 8px;
        padding: 8px;
        position: absolute;
        width: 240px;
        max-width: 240px;
        top: 2em;
        right: -260px;
    }

        .theme-table-surround .info-slider .close-slider {
            float: right;
            vertical-align: middle;
            padding-top: 0;
            line-height: 10px;
            width: 16px;
            height: 16px;
            text-align: center;
            background: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }

    .theme-table-surround .info-slider-title {
        font-size: 1.0em;
        color: #333;
    }

    .theme-table-surround .info-slider-data {
        font-size: 0.85em;
        color: #c52727;
    }

    .theme-table-surround .info-slider.hiding {
        right: -260px;
        display: block;
        -webkit-animation: slideOut 0.5s;
        animation: slideOut 0.5s;
    }

    .theme-table-surround .info-slider.showing {
        right: 60px;
        display: block;
        -webkit-animation: slideIn 1s;
        animation: slideIn 1s;
    }



.theme-table .tr .td.standard input {
    height: 24px;
    max-height: 28px;
    padding-top: 5px;
    font-size: 1.0em;
}


@-webkit-keyframes slideIn {
    from {
        right: -260px;
    }
    to {
        right: 60px;
    }
}

@keyframes slideIn {
    from {
        right: -260px;
    }
    to {
        right: 60px;
    }
}


@-webkit-keyframes slideOut {
    from {
        right: 60px;
    }
    to {
        right: -260px;
    }
}

@keyframes slideOut {
    from {
        right: 60px;
    }
    to {
        right: -260px;
    }
}



.responsive-producers {
    border: 1px solid #a6a6c6;
    border-radius: 6px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: calc(100% - 1em);
    margin: 2em auto;
    overflow-y: auto;
    position: relative;
}

    .responsive-producers button {
        background: #147adc;
        color: #fff;
        border: 0;
        border-radius: 6px;
        padding: 0.15em 0.5em;
    }

.responsive-header {
    background-color: #147adc;
    color: white;
    font-size: 1.75em;
    padding: 2rem 1rem;
    text-align: center;
    cursor: default;
}

.responsive-tabs {
    background-color: #0055a5;
    color: white;
    font-size: 1.0em;
    padding: 1rem;
    text-align: left;
}
    .responsive-tabs span {
        display: inline-flex;
        margin: 0 16px;
    }
        .responsive-tabs span a {
            color: white;
            cursor: pointer;
        }
            .responsive-tabs span a:hover {
                color: white;
                text-decoration: underline;
                cursor: pointer;
            }
            .responsive-tabs span a.selected {
                color: white;
                text-decoration: underline;
                cursor: pointer;
            }

    .responsive-tabs .page-controls {
        float: right;
        font-size: 0.65em;
        color: aliceblue;
    }
    .responsive-tabs .page-controls .page-control {
        display: inline-block;
        margin-left: 0.35em;
        cursor: pointer;
    }

.responsive-footer {
    margin: 1em auto;
    width: 96%;
}

.responsive-producers .breadcrumbs {
    background: #e2f1ff;
    border-top: 1px solid #a6a6c6;
    padding: 0 0.75em;
    margin-top: 5em;
    height: 2.15em;
    max-height: 2.15em;
    font-size: 0.7em;
    color: #0055a5;
    overflow: hidden;
}

.responsive-footer .button-area {
    float: right;
    text-align: right;
}
    .responsive-footer .button-area button {
        margin-left: 0.1em;
    }
        .responsive-footer .button-area button.boost {
            margin-left: 0.25em;
        }

        .responsive-footer .page-info {
            text-align: center;
            margin: 0 auto;
            font-size: 0.75em;
        }

/*img {
    border-radius: 50%;
    height: 60px;
    width: 60px;
}*/

.responsive-producers .clickable {
    cursor: pointer;
}

.table-stable {
    border-bottom: 1px solid #a6a6c6;
}

    .table-stable.small-list {
        min-height: 35.55em;
    }

    .table-stable.medium-list {
        min-height: 82.7em;
    }

    .table-stable.large-list {
        min-height: 202.7em;
    }

table.responsive-table {
    width: 100%;
    font-size: 0.8em;
    border: solid 1px #a6a6c6;
    border-collapse: collapse;
}

    table.responsive-table td, table.responsive-table th {
        padding: 10px;
    }

    table.responsive-table th {
        color: #6450cf;
        cursor: default;
        background-color: #dbe6f2;
        font-weight: bold;
        min-width: 8rem !important;
    }

        table.responsive-table td {
            color: #666;
            text-align: left;
            vertical-align: top;
        }

            table.responsive-table td .vesselnumber {
                color: #0055a5;
                font-weight: bold;
            }

            table.responsive-table td .weight {
                color: #0055a5;
                font-weight: bold;
            }

            table.responsive-table td span.unannounced {
                font-size: 0.9em;
                font-style: italic;
                color: #0055a5;
            }

        table.responsive-table td button.list-button {
            font-family: Consolas;
            font-size: 0.85em;
            border-radius: 16px;
            padding: 0 1.0em;
            margin-top: -.25em;
            float:right;
        }

    table.responsive-table tr:nth-child(2n) {
        background-color: white;
    }

    table.responsive-table tr:nth-child(2n+1) {
        background-color: #f5f8fc;
    }

    table.responsive-table thead tr {
        border-top: 1px solid #a6a6c6;
        border-bottom: 1px solid #a6a6c6;
    }

    table.responsive-table.short-list tbody tr:last-child {
        border-bottom: 1px solid #a6a6c6;
    }

    table.responsive-table thead tr th {
        border-right: 1px solid #a6a6c6;
    }

    table.responsive-table tbody tr td {
        border-right: 1px solid #d2d2e0;
    }

    table.responsive-table.short-list thead tr th:last-child,
    table.responsive-table.short-list tbody tr td:last-child {
        border-right: 0;
    }

    table.responsive-table button {
        border: 0;
        border-radius: 16px;
        font-size: 0.85em;
        padding: 4px 10px;
        padding-bottom: 5px;
        background: #134778;
        color: #fff;
    }

/*.responsive-surround {
    border: 1px solid #afafaf;
    border-bottom-width: 2px;
}

    .responsive-surround.small-sized table.responsive-table {
        max-height: 300px;
    }

    .responsive-surround.large-sized table.responsive-table {
        max-height: 500px;
    }

    .responsive-surround.extra-large-sized table.responsive-table {
        max-height: 800px;
    }

    .responsive-surround table.responsive-table {
        overflow-y: auto;
        display: block;
    }*/

    table.responsive-table.small-sized {
        min-width: 100%;
        max-height: 300px;
        overflow-y: auto;
        display: block;
    }

    table.responsive-table.large-sized {
        min-width: 100%;
        max-height: 500px;
        overflow-y: auto;
        display: block;
    }

    table.responsive-table.extra-large-sized {
        min-width: 100%;
        max-height: 800px;
        overflow-y: auto;
        display: block;
    }

table.responsive-table thead.sticky-head tr th {
    position: sticky;
}

    .data-container {
        width: 100%;
        display: flex;
    }

/*.data-column {
    text-align: left;
    min-width: 9rem;
}*/

.col-width-1 {
    width: 9em;
}

.col-width-2 {
    width: 25%;
}

.col-width-3 {
    width: 4%;
}

.col-width-4 {
    width: 13%;
}

.col-width-5 {
    width: 29%;
}

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.row-filter-widgets {
    margin-top: 0.5em;
    padding: 0 1em;
    background-color: #fff;
    position: relative;
    width: 100%;
    font-size: 0.8em;
}

.row-filter-widget {
    padding: 5px 2px;
    float: left;
    display: block;
}

    .row-filter-widget input {
        color: #999;
        border: solid 1px #888;
        border-radius: 4px;
    }

    .row-filter-widget .filter-menu-button {
        color: #999;
        background: #fff;
/*        background-image: url('../assets/images/bap_logo_fish_blue.png');
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: center;
        background-position-x: -20%;
        background-blend-mode:screen;*/
        padding: 0.5em 0.5em;
        padding-bottom: 0.1em;
        border: solid 1px #888;
        border-radius: 4px;
        min-width: 12rem;
    }

        .row-filter-widget .filter-menu-button::before {
            font-family: "FontAwesome";
            content: "\f054";
            /*margin-top: -2px;*/
            color: darkslateblue;
            float: right;
            margin-right: 0.25em;
        }

/*        .row-filter-widget .filter-menu-button:hover {
            background: #f7fbff;
        }*/

        .row-filter-widget .filter-menu-button:hover::before {
            font-family: "FontAwesome";
            content: "\f054";
            /*margin-top: -2px;*/
            color: darkslateblue;
            float: right;
            margin-right: 0;
            animation-name: widget;
            animation-duration: 0.5s;
        }

/* widget animation code */
@keyframes widget {
    from {
        margin-right: 0.25em;
    }

    to {
        margin-right: 0;
    }
}

    .row-filter-widget.input-buffer {
        margin: 0.5em;
        margin-bottom: 0;
    }


    .row-filter-widget .showing-all {
        padding-top:0.5em;
        padding-left: 0.5em;
    }

 /* ---- csv export ---- */
.row-filter-widgets .download-link {
    float: right;
    margin-top: 15px;
    margin-bottom: -15px;
    margin-right: -10px;
}

    .row-filter-widgets .download-btn {
        display: block;
        text-align: center;
        width: 2rem;
        margin-top: -4px;
    }


.searchbox-holder {
    margin-top: 7px;
    margin-bottom: 7px;
    float: right;
}

    .searchbox-holder label {
        color: #fff;
    }

    .searchbox-holder input {
        color: #555;
    }



.query-section {
    /* width: 20%; */
    display: inline-block;
    vertical-align: bottom;
}

.query-item {
    position: relative;
    margin-left: 8px;
    border: solid 1px #7bd34b;
    border-radius: 10px;
    padding: 2px 1px 2px;
    display: inline-flex;
    margin-bottom: 1rem;
}

    .query-item:hover {
        color: #7bd34b;
    }

    .query-item span {
        margin-left: 1.5em;
        cursor: pointer;
        white-space: nowrap;
        margin-right: 1rem;
    }

    .query-item::before {
        font-family: FontAwesome;
        content: "\f00c";
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        position: absolute;
        left: 0;
        margin-left: 5px;
    }

    .query-item:hover::before {
        font-family: FontAwesome;
        content: "\f00d";
        color: #7bd34b;
    }



.comment {
    font-size: 0.9em;
    padding: 1.5em;
}


.filter-widgets-container {
    position: relative;
}

.menu-container {
    color: #333;
    font-size: 0.85em;
    background: #fff;
    border: 1px solid #999;
    border-radius: 4px;
    overflow:hidden;
    width: 100%;
    min-width: 100px;
    max-width: 1004px;
    column-width: 200px;
    column-gap: 0;
    position: absolute;
    display: none;
    left: 1.75em;
    top: 3.25em;
    z-index: 10000;
}

    .menu-container > div.menu-filter {
        background-color: #fff;
        border: 0;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 0.5em;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
    }

        .menu-container > div.menu-filter span {
            color: #6d6d6d;
            left: 26px;
            position: absolute;
            cursor: default;
        }

        .menu-container > div.menu-filter::before {
            font-family: FontAwesome;
            content: "\f096";
            font-style: normal;
            font-weight: normal;
            color: #6d6d6d;
        }

        .menu-container > div.menu-filter.selected {
            background-color: #b2d9ff;
        }

            .menu-container > div.menu-filter.selected span {
                color: #0055a5;
            }

            .menu-container > div.menu-filter.selected::before {
                font-family: FontAwesome;
                content: "\f046";
                font-style: normal;
                font-weight: normal;
                color: #0055a5;
            }





.sliding-container {
    background: #fff;
    border: 2px solid #147adc;
    border-radius: 6px;
    font-size: 1.2em;
    color: #666;
    padding: 25px 15px;
    position: fixed;
    top: 3em;
    left: 102%;
    height: auto;
    max-height: calc(100% - 4em);
    overflow: auto;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
    background: linear-gradient(165deg, rgba(255,255,255,1) 60%, rgba(240,240,255,1) 100%);
}

.chain-links {
    width: 40em;
}

    .chain-links .close {
        float: right;
        margin: 0;
        margin-top: -1.0em;
        cursor: pointer;
    }

    .chain-links .vesselnumber {
        font-weight: bold;
    }

    .chain-links .supply-chain-title {
        font-weight: bold;
        color: #0055a5;
    }

.facility-details {
    width: 60em;
}

    .facility-details .close {
        float: right;
        margin: 0;
        margin-top: -1.0em;
        cursor: pointer;
    }

    .facility-details .detail-title {
        font-weight: bold;
        color: #0055a5;
    }

    .facility-details .details {
        width: 20%;
        border-right: 1px solid #f0f0ff;
        float: left;
    }

        .facility-details .details .detail-inner {
            width: 100%;
            /*height: 8em;*/
            height: 100%;
            background: #fff;
            padding: 1em;
            overflow: hidden;
        }

        .facility-details .details .detail-icon-holder {
            width: 60px;
            height: 100%;
            display: inline-block;
            float: left;
            margin: 0;
            margin-right: 1.5em;
        }

        .facility-details .details .detail-icon {
            width: 100%;
            height: auto;
            display: inline-block;
            cursor: default;
        }

        .facility-details .details .detail-label {
            font-weight: bold;
        }

        .facility-details .details .detail-tons {
            margin-top: 1em;
        }

/*    .facility-details .people {
        background: #f0f0ff;
    }*/

        .facility-details .people .person {
            width: 160px;
            font-size: 1.0em;
            color: #555;
            padding: 0 8px;
            margin: 0 1em;
            float: left;
        }

            .facility-details .people .person .name {
                font-weight: bold;
            }

            .facility-details .people .person .link {
                color: #0055A5;
            }

.facility-details .certificate {
    width: 135px;
    padding: 10px;
    float: right;
}

    .facility-details .certificate .certificate-icon {
        width: 120px;
        height: auto;
        display: none;
        cursor: pointer;
    }

        .facility-details .certificate .certificate-icon img {
            width: 100%;
            height: auto;
        }

.facility-details .col.thin {
    flex: 0 0 40%;
}

@media screen and (max-width: 820px) {
    table.responsive-table,
    table.responsive-table tr,
    table.responsive-table td {
        display: block;
    }

        table.responsive-table td:first-child {
            position: absolute;
            top: 5px;
            width: 130px;
        }

        table.responsive-table td:not(:first-child) {
            clear: both;
            margin-left: 130px;
            padding: 4px 20px 4px 90px;
            position: relative;
            text-align: left;
            width: 630px;
        }

            table.responsive-table td:not(:first-child):before {
                color: #91ced4;
                content: "";
                display: block;
                left: 0;
                position: absolute;
            }

        table.responsive-table td:nth-child(2):before {
            content: "Producer:";
        }

        table.responsive-table td:nth-child(3):before {
            content: "Country:";
        }

        table.responsive-table td:nth-child(4):before {
            content: "Expiration:";
        }

        table.responsive-table td:nth-child(5):before {
            content: "Species:";
        }

        table.responsive-table tr {
            padding: 10px 0;
            position: relative;
        }

            table.responsive-table tr:first-child {
                display: none;
            }

    .responsive-producers .fa-link {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .mapping-row {
        display: none;
    }

    .comment {
        font-size: 0.75em;
        padding: 0;
    }

    .responsive-header {
        background-color: transparent;
        color: #3f7f72;
        font-size: 2.4rem;
        font-weight: 700;
        padding: 0;
    }

    .responsive-producers .breadcrumbs {
        display: none;
    }

    table.responsive-table td:first-child {
        background-color: #c8e7ea;
        border-bottom: 1px solid #91ced4;
        border-radius: 10px 10px 0 0;
        position: relative;
        top: 0;
        transform: translateY(0);
        width: 100%;
    }

    table.responsive-table td:not(:first-child) {
        margin: 0;
        padding: 5px 1em;
        width: 100%;
        display:inline-block;
    }

        table.responsive-table td:not(:first-child):before {
            font-size: 0.8em;
            padding-top: 0.3em;
            position: relative;
        }

    table.responsive-table td:last-child {
        padding-bottom: 1rem !important;
    }

    table.responsive-table tr {
        background-color: white !important;
        border: 1px solid #6cbec6;
        border-radius: 10px;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
        margin: 0.5rem 0;
        padding: 0;
    }

    .responsive-producers {
        border: none;
        box-shadow: none;
        overflow: visible;
    }
}