/*DI styles*/
:focus {
    outline: none !important;
    /*outline-color: transparent;
    outline-style: none;*/
}

:root {
    --input-color: #FBFBF9;
    /*--light-bg: #DFDCCF;*/
    --light-bg: #DFDFDF;
    --dark-bg: #666;
    --disabled-color: #666;
    --highlight-bg: #EFECCF;
    --alert-color: #D84800;
    --help-color: #FF9;
    --good-color: #00DB00;
    --primary-color: #058517;
    /*#A1C057;*/
    --submit-color: #00DB00;
    --warm-color: #DD8844;
}

body {
    font-family: 'OpenSans-Regular-pro', sans-serif;
    font-size: 14px;
    font-weight: 100;
    line-height: 1.5;
    min-width: 1550px;
}

p {
    line-height: 1.2;
}

a {
    color: var(--primary-color);
}

a:visited {
    color: var(--primary-color);
}

ul {
    padding: 0;
    margin: 0;
}

fieldset {
    border: 4px solid #FFF;
    padding: 4px;
}

legend {
    font-size: 16px;
}

.menu li,
.input-form li {
    list-style-type: none;
}

/* General */
@font-face {
    font-family: 'OpenSans-Regular';
    src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

strong {
    font-weight: bold;
}

h1 {
    font-family: Century Gothic, Verdana, Arial;
    font-size: 32px;
    font-weight: normal;
    margin: 0 0 0 5px;
    vertical-align: top;
}

h2 {
    font-size: 22px;
    margin: 0 0 0 5px;
}

h3 {
    font-size: 18px;
    margin: 0 0 0 5px;
}

h4 {
    font-size: 16px;
    margin: 0 0 0 5px;
}

h5 {
    border-bottom: dashed 1px #CCC;
    background-color: var(--light-bg);
    padding: 5px !important;
    margin: 5px 0;
}

.float-right {
    float: right;
}

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

.center {
    text-align: center;
}

.login-container {
    width: 500px;
    text-align: center;
    margin: 100px auto 0;
    border: 1px solid #ddd;
    padding: 20px;
}

.login-container img {
    width: 100px;
}


.bold {
    font-weight: bold;
}

.alert,
.error {
    color: var(--alert-color);
}

.urgent {
    /*    color: var(--alert-color);*/
    color: #fff;
    background-color: var(--alert-color);
}

.warm {
    color: var(--warm-color);
}

.good {
    color: var(--good-color) !important;
}

.disabled {
    color: var(--disabled-color) !important;
}

.loaded-inbound {
    color: #FFA500;
}


.loaded-outbound {
    color: var(--good-color);
}

.loaded-no-movement {
    color: fuchsia;
    color: var(--alert-color);
}

.unloaded {
    color: var(--dark-bg);
}

a.email-sent svg {
    color: green;
}

.email-sent,
.invoice-exported{
    color: green;
}

.email-unsent {
    color: red !important;
}

.email-modified,
.invoice-modified{
    color:  orange;
}

a.email-modified svg {
    color: orange;
}

.help {
    color: var(--help-color);
}

.highlight-bg td,
td.highlight-bg {
    background-color: var(--light-bg) !important;
}

td.summary {
    border-top: 1px solid #000;
}

.small-text {
    font-size: 14px;
}

.clear {
    clear: both;
}

.full-width {
    width: 100% !important;
}

.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

/*Nav */
#top-menu {
    background-color: #000;
}

nav ul {
    /*text-align: center;*/
    padding: 0;
    margin: 0;
}

nav li {
    list-style-type: none;
    display: inline-block;
    height: 20px;
    padding: 5px 0;
}

nav li a {
    padding: 3px;
    color: #FFF !important;
    margin: 0 10px;
    text-decoration: none;
}

nav li:hover {
    background-color: var(--dark-bg);
}



/* Header */
#header {
    min-height: 150px !important;
    height: 150px !important;
}

.header-image #title-area {
    margin: 10px 0 !important;
}

/*
#inner{

    max-width: 1200px;
    min-width: 800px;
}

#notification {
    background-color: var(--input-color);
    clear: both;
    width: 100%;
}

#sale-picker{
    width: 90%;
    margin: 0;
    padding: 0;
}

#sale-status table{
    width: 100%;

}


*/


/* Grid stuff */
.di-grid {
    clear: both;
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;

    width: auto;
    margin: auto;
}

.di-grid div {
    background-color: #ddd;
    padding: 10px;
    box-sizing: border-box;
}

/*.di-grid table,
.di-grid table.dataTable
{
    width: 100% !important;
}*/

.span-full {
    grid-column-end: span 12;
}

.span-half {
    grid-column-end: span 6;
}

.span-third {
    grid-column-end: span 4;
}

.span-two-third {
    grid-column-end: span 8;
}

.span-quarter {
    grid-column-end: span 3;
}

.span-three-quarter {
    grid-column-end: span 9;
}



/* Forms */
button,
.btn,
input button,
input .btn {
    color: #FFF;
    background-color: var(--primary-color) !important;
    padding: 10px 15px;
    border: none;
    height: 35px;
    font-size: 14px;
    display: inline-block;
    border-radius: 8px;
}

table a.btn {
    color: #FFF !important;
    background-color: var(--primary-color) !important;
    padding: 2px 15px;
    border: none;
    height: auto;
    font-size: 12px;
    display: inline-block;
    border-radius: 4px;
}

button.ui-button {
    background-color: var(--primary-color) !important;
    color: #000 !important;
}

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

a.btn {
    height: 15px !important;
    color: #FFF !important;
    text-decoration: none !important;
    margin-left: 10px;
}


input,
select,
checkbox,
textarea,
.chosen-container,
.select2-container {
    background-color: var(--input-color) !important;
    width: 150px !important;
    /*float: right;*/
    border: 1px #BBB solid;
    font-size: 14px;
}

input.input-sm {
    width: 50px !important;
}

select {
    width: 155px !important;
}

input[type="submit"] {
    background-color: var(--submit-color);
    width: 120px !important;
}

.input-form .submit {
    float: left;
}

.input-form .delete {
    margin-left: 40px;
}

.btn-danger,
.btn-alert,
input .btn-danger,
input .btn-alert,
input[type="submit"] .btn-danger,
input[type="submit"] .btn-alert {
    background-color: var(--alert-color) !important;
}

.btn-help,
input .btn-help,
input[type="submit"] .btn-help {
    background-color: var(--help-color) !important;
}

label {
    font-weight: bold;
    display: inline-block;
    width: 180px;
}




.select2-container .select2-selection--single {
    height: 20px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 20px !important;
    font-size: 14px;
}


.chosen-container div {
    background-color: inherit;
    padding: 0;
    margin: 0;
}

.chosen-container {
    padding: 0 !important;
    margin: 0;
}

.chosen-container .chosen-results,
.select2-results__options {
    overflow-x: inherit !important;
    /*overflow-y: inherit !important;*/
}





/* Tables */
table button,
table .btn {
    color: #000 !important;
    background-color: transparent !important;
    padding: 0;
    border: none;
    height: 25px;
    display: inline !important;
    border-radius: 8px;
    margin: 0;
    cursor: pointer;
}

/*table .btn-danger {
    background-color: var(--alert-color);
}*/
/*table form,
table .input-form .delete{
    margin: 0;
    display: inline;
}*/

.table {
    border-spacing: 1px !important;
    font-size: 12px;
    width: 100%;
}


.container-table {
    display: block;
    overflow: auto;
    max-height: 800px;
    min-height: 800px;
    width: 100% !important;
}

.container-table thead {
    position: sticky;
    top: 0;
}

.container-table thead th {
    border: 1px #333 solid;
}

.container-table select,
.container-table .chosen-container {
    width: 80px !important;
    font-size: 10px;
}

.planning-table {
    width: 60%;
    margin: auto;
}

.schedule-table {
    table-layout: fixed;
    width: 100%;
}

.schedule-table th,
.schedule-table td {
    height: 20px !important;
    overflow: hidden;
    border-bottom: 1px dashed #CCC;
}

.schedule-table tr.section-end td {
    /*height: 2px !important;
    background-color: #999;
    padding: 0 !important;
    margin: 0 !important;*/
    height: 0 !important;
    border-bottom: 3px solid #999;
}

tr.section-start {
    border-top: 1px solid #ccc;
}

tr {
    background-color: #fff;
}

tr:hover {
    background-color: #E1E1E1 !important;
}

.no-wrap-table tbody>tr>td {
    white-space: nowrap;
}

/*
table td {
    min-height: 30px;
    height: 30px;
    overflow:auto;
}

table th {
    height: 30px;
}
*/
table input {
    width: auto !important;
}

tr.superheader th {
    background-color: var(--primary-color) !important;
    border: solid 1px #666;
    font-size: 18px;
}

th {
    background-color: #DDD !important;
    padding: 4px !important;
    text-align: left;
    border: solid 1px #666;
}

th.section-end,
td.section-end {
    border-right: solid 1px #666;
}

th.actions {
    max-width: 180px !important;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 2px 8px !important;
}

th,
td {
    /*background-color: #fbfbf9;*/
    padding-left: 5px !important;
    padding-right: 5px !important;
    border-color: #BBB;
}

tr.current {
    font-weight: bold;
    border: 1px solid #9c1d3d;
}

table {
    margin-bottom: 0 !important;
    /*font-size: 14px;*/
}

#ajax-container table {
    width: 100% !important;
}

.search th input {
    width: 100%;
    margin: 0;
}

#delete-confirm {
    display: none;
}

.section {
    border: 1px dotted #EEE;
    padding: 10px;
    margin-top: 10px;
    /*    background-color: #F9F9F9;    */
    background-color: #BBB !important;
}

.ui-widget {
    font-family: inherit !important;
    font-size: inherit !important;
}


/* Banner */

#banner {
    margin: 20px 0;
}

#banner img {
    height: 100px;
}

#banner #sale-stats {
    padding-right: 30px;
}


/* Top Menu */
#top-menu {
    padding: 2px 5px !important;
}


/* Home */
#home a {
    text-decoration: none;
    border-bottom: dotted 1px #BBB;
}

#entity-input {
    background-color: #fff;
}

#notification,
#notification td {
    background-color: var(--highlight-bg);
    height: auto;
}

#notification:empty {
    display: none;
}

#login div {
    background-color: #FFF;
}

#login img {
    /*width: 50%;*/
    height: auto;
}


ul ul li {
    margin-left: 15px;
}

#report-menu ul li ul {
    padding: 5px;
    background-color: var(--highlight-bg);
}

#report-menu ul li ul a {
    color: #000;
}

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

#transaction-index table {
    font-size: 13px;
}

#support-ticket table {
    width: 100%;
}

#support-ticket .info {
    width: 100%;
    background-color: #f7e1b5;
    padding: 10px;
}

#support-ticket .activity {
    width: 100%;
    background-color: #FFF;
    padding: 10px;
}


table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.mce-btn button {
    background-color: #ddd !important;
}

.mce-primary {
    background-color: #FFF !important;
}

.mce-textbox:focus,
.mce-textbox.mce-focus {
    border-color: #DDD !important;
}

.di-grid div.mce-panel,
.di-grid div.mce-panel div {
    padding: 0;
}

#dropzone-container {
    margin: 20px 0;
    background-color: #f7e1b5;
    height: 50px;
    border: dashed 1px;
    padding: 10px;
}

#dropzone-thumbnails li {
    padding: 10px 0;
    display: inline-block;
    width: 130px;
    border: 1px dotted #666;
    text-align: center;
    font-size: 14px
}

#dropzone-thumbnails input {
    margin: 8px 0;
}

h1 a,
h2 a {
    font-weight: lighter;
}


.dataTables_wrapper label {
    display: inline;
}

.dataTables_filter input {
    /*max-width: 70px;*/
}

#support-ticket-index {
    min-width: 1300px;
}

.detail-list {
    border-bottom: 1px dotted #666;
    display: block;
}

.detail-list form {
    padding: 0;
    margin: 0;
    height: 10px;
}

.detail-list form button {
    color: #000;
    height: 12px;
    float: right;
    background-color: transparent !important;
}


#main-menu ul,
#container-info ul {
    list-style-type: none;
}

#banner h1 {
    font-size: 50px;
    font-family: 'Lato', serif;
}

#banner img {
    vertical-align: sub;
    height: 80px;
}

.fee-total,
.charge-total,
.pickup-column {
    background-color: var(--help-color) !important;
    font-weight: bold;
}

.delivery-column {
    background-color: var(--good-color) !important;
    font-weight: bold;
}


.info-box {
    grid-column-start: 11;
    grid-column-end: 13;
    background-color: #fff !important;
}



.section {
    border: 1px dotted #333;
}

tr.complete td,
td.complete {
    text-decoration: line-through;
}

.draggable svg.fa-arrows {
    color: #BBB !important;
    padding-right: 5px;
}

.draggable {
    background-color: #FFFFE0;
    /*background-image: linear-gradient(45deg, #fafafa 25%, #e6e9eb 25%, #e6e9eb 50%, #fafafa 50%, #fafafa 75%, #e6e9eb 75%, #e6e9eb 100%);
    background-size: 10px 10px;*/
    /*position: relative;*/
    /*
    background-image: linear-gradient(90deg, rgba(100,80,80,.2) 40%, transparent 0),
    linear-gradient(rgba(100,80,80,.2) 40%, transparent 0);
    background-size: 2px 2px;*/
    /* background-image: radial-gradient(ellipse  4px 4px , #BEDB39, #BEDB39 25%, #1F8A70 25%);
     background-size: 2px 2px;*/
}

/*td.draggable {
    cursor: move;
    outline: 1px #888 dotted;
    outline-offset: -3px;
    opacity: 100;
}*/

td.droppable,
td.truck-droppable {
    outline: 3px #fff solid;
    outline-offset: -4px;

    background-image: linear-gradient(45deg, #fafafa 25%, #e6e9eb 25%, #e6e9eb 50%, #fafafa 50%, #fafafa 75%, #e6e9eb 75%, #e6e9eb 100%);
    background-size: 10px 10px;
}


.ui-draggable-dragging {
    z-index: 100 !important;
    background-color: #EEE !important;
}





/*
.fa-grip-vertical {
    content: "\f087";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    position: absolute;
    font-size: 30px;
    color: lightblue;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -200px;
    z-index: 1;
}*/