/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.dataTables_length {
    padding-left: 20px;
}
.dataTables_info {
    padding-left: 20px;
}
.dataTables_paginate {
    padding-right: 20px;
}


.breadcrumb-item > a {
    color: #ffe102 !important;
    text-decoration: none;
}

.main-menu.menu-light .navigation > li.active > a {
    background: #ffe102 !important;
    box-shadow: 0 0 10px 1px #ffe102 !important;
    color: black;
}

.main-menu.menu-light .navigation > li ul .active > a {
    background: #ffe102 !important;
    box-shadow: 0 0 10px 1px #ffe102 !important;
    color: black;
}

.dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content .active a {
    background: #ffe102 !important;
    box-shadow: 0 0 10px 1px #ffe102 !important;
    color: #2a2e30 !important;
}

.flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange, .flatpickr-calendar .flatpickr-day.startRange:hover, .flatpickr-calendar .flatpickr-day.endRange:hover {
    color: #fff;
    background : #ffe102 !important;
    border-color : #ffe102 !important;
}

.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected:hover {
    background : #ffe102 !important;
    border-color : #ffe102 !important;
}

.form-control:focus {
    border-color : #ffe102 !important;
}

.select2-container--classic .select2-results__option[aria-selected='true'], .select2-container--default .select2-results__option[aria-selected='true'] {
    background-color: #ffe102 !important;
    color: #fff !important;
}

.select2-container--classic.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #ffe102 !important;
    outline: 0;
}

classic .select2-results__option--highlighted, .select2-container--default .select2-results__option--highlighted {
    color: #ffe102 !important;
}

.select2-container--classic .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus {
    outline: 0;
    color: #ffe102 !important;
}

.select2-container--classic .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus {
    outline: 0;
    border-color: #ffe102 !important;
    box-shadow: 0 0 10px 1px #ffe102 !important;
}

.dataTables_scrollBody {
    overflow-y: unset !important;
}
.email-field {
    padding-left: 5px !important;
}

.inner-loader {
    opacity: 0.3;
    z-index: 9;
    left: 0;
    top: 50px;
    width: 100%;
    height: 88%;
    position: absolute;
    background-color: black;
}

.small-loader {
    background-color: white !important;
    opacity: 0.7 !important;
}

.small-loader .spinner {
    box-shadow: 0 0 10px 5px lightgray;
    border-top-color: #ffe102 !important;
    /*background-color: #40574b;*/
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    width: 60px;
    height: 60px;
    display: inline-block;
    border-width: 4px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.car-notification {
    position: relative;
    display: inline-block;
    border-radius: 2px;
}
.car-notification .badge {
    position: absolute;
    top: -10px;
    right: -20px;
    padding: 5px 9px;
    border-radius: 50%;
    background: red;
    color: white;
}

.multi-anpr-main {
    max-width: 65%;
}

/*Media query*/
@media (min-width: 320px) and (max-width: 1024px) {
    .multi-anpr-main {
        max-width: 100%;
    }
    .multi-anpr-section {
        overflow-x: scroll;
    }
}
.inactive-status {
    opacity: .4;
}
.order-menu {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}
.order-menu > a {
    padding: 10px 15px 10px 15px;
}
#late-order {
    background-color: #d31111;
    color: #fff;
}
.addon-options :disabled {
    background-color: lightgrey !important;
}

.pending-notification {
    position: relative;
    display: inline-block;
    border-radius: 2px;
}
.pending-notification .pending-user {
    top: -10px;
    margin-left: 30px;
    padding: 5px 7px;
    background: red;
    color: white;
    font-size: 12px;
    box-shadow: 1px 2px 5px 4px lightgreen;
}

.collapse-pending-notification > .pending-user {
    top: -5px;
    margin-left: -25px;
    padding: 0px 3px;
    /*border-radius: 50%;*/
    background: red;
    color: white;
    position: absolute;
    font-size: 12px;
    box-shadow: 1px 2px 5px 4px lightgreen;
}

.bootstrap-tagsinput {
    width: 100%;
    height: 38px;
}
.bootstrap-tagsinput .label-info {
    background-color: #ffe102;
}
.bootstrap-tagsinput .label {
    display: inline;
    padding: 0.4em 0.6em 0.6em;
    font-size: 85%;
    font-weight: 700;
    line-height: 1;
    color: #5e5873;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}
.order-detail-section {
    padding: 1rem 2rem;
    vertical-align: middle;
    border-bottom: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
}
.big-row {
    text-align: right;
}
.right-order-section:after, .right-order-section:before {
    box-sizing: border-box !important;
}
.left-border {
    border-left: 1px solid lightgrey;
}
.separator {
    width: 100%; height: 1px; margin-top: 20px;
    border-bottom: 1px solid lightgrey;
}