:root {
    --bdl-gray: #BDBBBA;
    --bdl-dark-gray: #636363;
    --bdl-blue: #336195;
    --bdl-background-blue: rgba(51, 97, 149, 0.7);
    --bdl-dark-blue: #1D2B4D;
    --bdl-background-dark-blue: rgba(29, 43, 77, 0.7);
    --bdl-background-dark: rgba(20, 140, 140, 0.7);
    --bdl-dark: rgba(20, 140, 140, 0.7);
    --bdl-inventory: rgba(91, 94, 166, 1);
    --bdl-red: #B7472A;
}

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

.bdl-dark-gray {
    color: var(--bdl-dark-gray) !important;
}

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

.bdl-dark-blue {
    color: var(--bdl-dark-blue) !important;
}

.bdl-shipments {
    color: var(--bdl-blue) !important;
}

.bdl-collections {
    color: var(--bdl-red) !important;
}

.bdl-broker-transactions {
    color: var(--bdl-dark) !important;
}

.bdl-inventory-sheets {
    color: var(--bdl-inventory) !important;
}

.bdl-shipments-bg {
    background-color: var(--bdl-blue) !important;
}

.bdl-collections-bg {
    background-color: var(--bdl-red) !important;
}

.bdl-broker-transactions-bg {
    background-color: var(--bdl-background-dark) !important;
    color:#fff !important;
}

.bdl-inventory-sheets-bg {
    background-color: var(--bdl-inventory) !important;
    color:#fff !important;
}

.bdl-past-date {
    color: #F44336 !important;
}

.bdl-current-date {
    color: #2196F3 !important;
}

.bdl-future-date {
    color: inherit !important;
}

.v-toolbar__title span:first-child {
    font-weight: 900;
    font-size: 24px
}

.v-toolbar__title span:last-child {
    font-weight: 300;
}

select>option {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.v-list--dense {
    font-size: 13px;
}

.bdl-not-via-bdl,
.bdl-live-unload,
.outside-carrier-big,
.outside-carrier {
    position: relative;
}

.bdl-not-via-bdl::after,
.outside-carrier::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-width: 7.5px;
    border-style: solid;
    border-color: #4CAF50 transparent transparent #4CAF50;
}
.outside-carrier-big::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: #4CAF50 transparent transparent #4CAF50;
}

.bdl-not-via-bdl,
.bdl-live-unload,
.consolidated-invoice {
    position: relative;
}

.bdl-not-via-bdl::after,
.consolidated-invoice::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-width: 7.5px;
    border-style: solid;
    border-color: rgb(211, 211, 30) transparent transparent rgb(211, 211, 30);
}

.customer-pickup {
    position: relative;
}

.bdl-not-via-bdl::after,
.customer-pickup::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-width: 7.5px;
    border-style: solid;
    border-color: var(--bdl-blue) transparent transparent var(--bdl-blue);
}

.customer-pickup-consolidated::after {
    border-color: var(--bdl-blue) rgb(211, 211, 30) rgb(211, 211, 30) var(--bdl-blue);
}

.outside-driver {
    background-color:  rgba(237, 225, 222, 0.35)
    
}

.bdl-live-unload::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-width: 7.5px;
    border-style: solid;
    border-color: #E3CD05 transparent transparent #E3CD05;
}

.bdl-brokered-load {
    color: var(--bdl-blue);
    font-weight: 500 !important;
}

.v-data-table>.v-data-table__wrapper>table>tbody>tr>td {
    height: 40px !important;
    font-size: 13px;
}

.available-loads-table>.v-data-table__wrapper>table>tbody>tr>td {
    height: 52px !important;
}

.ghost .v-list-item__content {
    color: orange !important;
}

.fa,
.fas {
    display: inline-flex !important;
}

.dispatch-driver-drop-container {
    position: relative;
}

.dispatch-driver-drop-container .v-overlay {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dispatch-driver-actions .v-icon {
    font-size: 22px;
}

.dispatch-driver-actions .v-icon:hover {
    color: #2196F3;
}

.dispatch-driver-notes-form {
    background-color: white;
    position: absolute;
    top: 62px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: calc(100% - 62px);
}

.dispatch-driver-notes-list {
    height: 315px;
}

.unread-note {
    color: rgb(51, 97, 149);
    font-size: 20px;
}

@-webkit-keyframes arrow-down {
    0% {
        transform: translateX(0px) translateY(0px);
    }

    50% {
        opacity: 0;
        transform: translateX(-22px) translateY(22px);
    }

    51% {
        transform: translateX(22px) translateY(-22px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px) translateY(0px);
    }

}

@-webkit-keyframes arrow-up {
    0% {
        transform: translateX(0px) translateY(0px);
    }

    50% {
        opacity: 0;
        transform: translateX(22px) translateY(-22px);
    }

    51% {
        transform: translateX(-22px) translateY(22px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px) translateY(0px);
    }

}

.arrow-down {
    animation: arrow-down 1.5s infinite;
    animation-name: arrow-down;
}

.arrow-up {
    animation: arrow-up 1.5s infinite;
    animation-name: arrow-up;
}

#leaflet-noGeo-control {
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
}

.noGeo-list-container {
    width: 250px;
    height: 300px;
    overflow-y: scroll;
}

.wrapper {
    position: relative;
    width: 500px;
    height: 200px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    height: 200px;
}

.details-list>div:nth-of-type(odd) {
    background-color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}

.details-list .v-list-item {
    height: 55px !important;
}

.details-list .v-text-field {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

.details-list .v-input__slot {
    margin-bottom: 3px !important;
}

.details-list .v-list-item__content {
    padding: 3px 0 !important;
    flex: 1 1 100%;
}

.driver-tooltip {
    padding: 0px !important;
}

.v-overlay {
    z-index: 100;
}

.v-toolbar--fixed {
    z-index: 99 !important;
}

.v-btn--floating,
.v-tooltip {
    z-index: 98;
}

.slide-leave-active,
.slide-enter-active,
.slide-up-leave-active,
.slide-up-enter-active {
    transition: 0.3s;
}

.slide-enter,
.slide-leave-to {
    transform: translate(-100%, 0);
}

.slide-up-enter,
.slide-up-leave-to {
    transform: translate(0, 100%);
}

.error-field {
    color: #FF5252;
}

.error-field a {
    color: #FF5252 !important;
}

.error-msg {
    font-size: 12px;
}

.v-input__append-outer,
.v-input__prepend-outer {
    margin-top: 0px;
}

.paymentInput {
    height: 32px;
    line-height: 20px;
    padding: 8px 0px;
    width: 100%;
    margin: 16px 0;
    font-size: 15px;
    border: 0px;
}

.v-small-dialog__activator {
    border-bottom: 1px solid #ccc;
}

.grade-setting-item {
    cursor: pointer;
    color: black;
    background-color: #e0e0e0;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
}

.over {
    font-weight: bold;
    color: var(--bdl-red);
}

.v-text-field.right input {
    text-align: right;
}

.required:after {
    content: "*";
    font-weight: bold;
    color: red;
    margin-left: 6px;
}

.check-popup {
    padding: 0;
    width: 28em;
}

.check-title {
    background-color: #fb8c00;
    padding: 14px;
    color: #000000be;
    text-align: left;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 10px;
    padding-left: 24px;
    font-family: Roboto, sans-serif;
    line-height: 1.5;
    font-size: 1.25rem;
}

.check-html-container {
    color: rgb(71 85 105);
    padding: 1.25em 14px;
    padding-left: 24px;
    text-align: left;
    margin: 0;
    border-bottom: 1px solid rgb(209 213 219);
    font-family: Roboto, sans-serif;
}

.check-actions {
    width: 100%;
    justify-content: flex-end;
    padding: 0.25em 0.75em;
    margin: 0;
    gap: 0.5em;
}

.confirm-button {
    background-color: #fb8c00 !important;
    color: white !important;
    text-transform: uppercase;
    font-weight: bold;
}

.deny-button {
    background-color: transparent !important;
    color: #fb8c00 !important;
    text-transform: uppercase;
    font-weight: bold;
}

.button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grade-sheets-details-list>div:nth-of-type(odd) {
    /* background-color: #e0e0e0 !important; */
    border-color: #e0e0e0 !important;
}

.grade-sheets-details-list .v-list-item {
    height: 55px !important;
}

.grade-sheets-details-list .v-text-field {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

.grade-sheets-details-list .v-input__slot {
    margin-bottom: 3px !important;
}

.grade-sheets-details-list .v-list-item__content {
    padding: 3px 0 !important;
    flex: 1 1 100%;
}

.grade-sheet-border {
    border-style: solid;
    border-width: thin;
    border-color: #F0F0F0;
}

html {
    overflow-y: auto;
}

.application {
    font-family: 'Orbitron', sans-serif;
    text-align: center;
}

.calculator-shell {
    max-width: 500px;
}

.formula {
    height: 20px;
}

.formula-input input {
    /* ako je linija ispod odkomentirana pravi problem u safari browser-u */
    /* font-size: 2rem; */
    text-align: right;
}

.navigation {
    /* display: flex; */
    /* flex-flow: row wrap; */
    /* justify-content: flex-end; */
    margin-top: 20px;
    display: flex;
    list-style: none;
    margin: 0;
    /* background: deepskyblue; */
}

.navigation a {
    text-decoration: none;
    display: block;
    padding: 1em;
    color: white;
}

.center {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding-left: 20px;
}

.center a {
    text-decoration: none;
    display: block;
    padding: 1em;
    color: white;
}

.preserve-case {
    text-transform: none;
}
.required-before:before {
    content: "*";
    font-weight: bold;
    color: red;
    margin-left: 6px;
}
div:has(> div.required-before) {
    margin-left: -13px;
}
.list-icon.active i{
    color: #336195 !important
}
.grid-icon.active i{
    color: #336195 !important
}
.po-list-icon.active i{
    color: #B7472A !important
}
.po-grid-icon.active i{
    color: #B7472A !important
}
.filter-outside-carrier {
    background-color:  rgba(237, 225, 222, 0.35);
    width: 116%;
    padding: 16px;
    margin: 0 -16px;
}

.filter-consolidated {
    width: 110%;
    padding: 10px;
    margin: 0 -10px;
}
.filter-consolidated::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-width: 7.5px;
    border-style: solid;
    border-color: rgb(211, 211, 30) transparent transparent rgb(211, 211, 30);
}
.filter-customer-pickup {
    width: 110%;
    padding: 10px;
    margin: 0 -10px;
}
.filter-customer-pickup::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-width: 7.5px;
    border-style: solid;
    border-color: var(--bdl-blue) transparent transparent var(--bdl-blue);
}
.list-item-label {
    max-width: 260px;
}

@media screen and (max-height: 693px) {
    #footer {
        z-index: 1; 
    }

    #loginForm {
        z-index: 10;
        position: relative;
    }

    #resetForm {
        z-index: 10;
        position: relative;
    }

    #chooseSiteForm {
        z-index: 10;
        position: relative;
    }
}