/* ===================================================================
    AUTOCOMPLETE
=================================================================== */
.autocomplete-suggestions {
    background: white;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    z-index: 51;
    box-shadow: 0 0 0.75rem rgb(18 38 63 / 20%);
    cursor: default;
    overflow-y: auto;
    overflow-x: initial;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-shadow: 0 0 0.75rem rgb(18 38 63 / 20%);
    -moz-box-shadow: 0 0 0.75rem rgb(18 38 63 / 20%);
    max-height: 500px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.autocomplete-suggestion {
    padding: 6px 10px;
    white-space: nowrap;
}

.autocomplete-no-suggestion {
    padding: 2px 5px;
}

.autocomplete-selected {
    background: #1f6bff;
    color: white;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #fd7e14;
}

.autocomplete-group {
    padding: 2px 5px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    display: block;
    border-bottom: 1px solid #000;
}

.autocomplete-input {
    position: relative;
    outline: none;
    cursor: text;
    margin: 0;
    display: block;
    width: 100%;
    padding: 0.46rem 0.5rem 0.46rem 2.2rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #a8b6d1;
    appearance: none;
    border-radius: 4px;
    z-index: 60 !important;
}

.autocomplete-input-icon {
    z-index: 61 !important;
}


/* ===================================================================
    NAVIGATION & TOPBAR
=================================================================== */
#page-topbar {
    width: 100% !important;
    padding: 0 calc(8px/4) !important;
    background-color: transparent !important;
    box-shadow: 0 0 0 #fff !important;
}

.topnav {
    background: transparent !important;
    padding: 0 calc(8px* .25) !important;
    box-shadow: 0 0 0 #fff !important;
}

    .topnav .navbar-nav .nav-link {
        font-size: 13px !important;
        padding: .5rem .75rem;
    }

        .topnav .navbar-nav .nav-link:focus,
        .topnav .navbar-nav .nav-link:hover {
            color: var(--bs-primary) !important;
            background-color: transparent;
        }

    .topnav .navbar-nav .nav-item .nav-link.active {
        color: var(--bs-gray-900) !important;
    }

    .topnav .navbar-nav .dropdown-item {
        color: #333;
    }

        .topnav .navbar-nav .dropdown-item:hover {
            color: var(--bs-gray-800) !important;
        }

    .topnav .navbar-nav .dropdown.active > a {
        color: var(--bs-primary) !important;
        background-color: transparent;
    }

.topnav-box {
    background: var(--bs-blue);
    padding: 0 5px;
    box-shadow: 0 0 .5rem rgba(31, 107, 255, .1) !important;
    border-radius: 0 0 5px 5px !important;
}

.navbar-header {
    background-color: #fff !important;
    box-shadow: 0 0 .5rem rgba(31, 107, 255, .1) !important;
    border-radius: 5px 5px 0 0;
}

.logo {
    line-height: 28px !important;
    padding-bottom: 5px !important;
}

.search-box .search-icon {
    line-height: 35px !important;
}


/* ===================================================================
    LAYOUT & STRUCTURE
=================================================================== */
body[data-layout=horizontal] .page-content {
    margin-top: calc(4px + 35px);
    padding: calc(35px + 8px / 2) calc(8px / 2) 35px calc(8px / 2) !important;
}

.body-custom-bg {
    background: url('../documents/uploads/ecology_10.jpg') no-repeat center center fixed;
    background-size: cover;
}

.card {
    --bs-card-spacer-y: .5rem !important;
    --bs-card-spacer-x: .75rem !important;
    --bs-card-border-width: 1px !important;
    --bs-card-border-color: #6197ff !important;
    --bs-card-cap-padding-y: .5rem !important;
    --bs-card-cap-padding-x: .75rem !important;
    box-shadow: 0 0 .8rem rgba(155, 127, 255, .1) !important;
}

.modal-content {
    border: 1px solid #6197ff !important;
}

.footer {
    padding: 0 calc(8px* .25) !important;
    left: 0 !important;
    background-color: transparent !important;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    color: #212837;
    background-color: #c9d2e3;
    border-radius: 5px;
}

.row > * {
    padding-right: 2px !important;
    padding-left: 2px !important;
}


/* ===================================================================
    DATATABLES
=================================================================== */
.seach-datatables {
    position: relative;
    outline: none;
    cursor: text;
    margin: 0;
    display: block;
    width: 100%;
    padding: 0.46rem 0.5rem 0.46rem 2.2rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #a8b6d1;
    appearance: none;
    border-radius: 4px;
}

div.dataTables_scrollBody {
    border-left: 0px !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 0 !important;
}

div.dataTables_processing > div:last-child > div {
    background: var(--bs-primary) !important;
}

.dataTables_scrollHeadInner,
.dataTables_scrollFootInner {
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.table {
    --bs-table-bg: transparent !important;
}

table.dataTable.table-hover > tbody > tr:hover > .child-tabs {
    box-shadow: 0 0 0 0 rgb(0 0 0) !important;
    background-color: transparent !important;
}

table.table-bordered.dataTable th:first-child,
table.table-bordered.dataTable td:first-child {
    border-left-width: 0px !important;
}

table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child {
    border-right-width: 0px !important;
}

table tr:first-child th:first-child {
    border-top-left-radius: 6px !important;
}

table tr:first-child th:last-child {
    border-top-right-radius: 6px !important;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 6px !important;
}

table tr:last-child td:last-child,
table tr:last-child {
    border-bottom-right-radius: 6px !important;
}

.table-hide {
    display: none !important;
}

.table-default {
    --bs-table-bg: #1f6bff42 !important;
}

.table-primary.no-border-row,
.table-primary.no-border-row td {
    border: none !important;
}

.table > :not(caption) > * > * {
    padding: .4rem .25rem;
}

.child-tabs {
    background-color: #fff !important;
    border-top: solid 1px !important;
    border-bottom: solid 1px !important;
    border-color: #657eae !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .child-tabs .page-link {
        padding: 0.45rem 0.65rem !important;
    }

/* DataTables Buttons */
div.dt-button-collection .dt-button-active:after {
    content: '●' !important;
    font-weight: 900 !important;
    color: var(--bs-blue) !important;
}


/* ===================================================================
    FORMS & INPUTS
=================================================================== */
label {
    margin-bottom: 0.2rem !important;
    font-weight: 600 !important;
}

.form-control {
    color: #212837 !important;
}

    .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #869ac0 !important;
        opacity: 1; /* Firefox */
    }

.form-control-checkbox {
    display: block;
    width: 100%;
    padding: 0.47rem 0rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    border: 0 solid white;
}

.form-control-disable {
    pointer-events: none !important;
    background: #ebeef4 !important;
}

.icon-group-text {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: #3c4e71;
    text-align: center;
    white-space: nowrap;
    background-color: #dae0ec;
    border: 1px solid #a8b6d1;
    border-radius: 0.25rem;
}

/* Hide Arrows/Spinners from input[type=number] */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Hide Icon Datalist Input */
input::-webkit-calendar-picker-indicator {
    opacity: 0;
}


/* ===================================================================
    SELECT2
=================================================================== */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    height: auto !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #869ac0 !important;
    border-radius: 0.3rem;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 1.5 !important;
        font-size: .8125rem !important;
        font-weight: 400 !important;
        color: #212837 !important;
        padding: 0.47rem 0.75rem !important;
        vertical-align: middle !important;
        margin: 0 0.75rem 0 0 !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        position: absolute !important;
        height: 34px !important;
        width: 32px !important;
    }

.select2-container--default .select2-selection--multiple {
    border: 1px solid #869ac0 !important;
    vertical-align: middle !important;
    min-height: 36.53px !important;
    padding: 0.25rem 0.45rem !important;
    border-radius: 0.3rem;
}

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        line-height: 2.0 !important;
        font-size: .8125rem !important;
        font-weight: 400 !important;
        color: #212837 !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        color: #212837 !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        background-color: #ebeef4 !important;
        border: 1px solid #869ac0 !important;
        vertical-align: middle !important;
        padding-top: 2px;
    }

.select2-container .select2-search--inline .select2-search__field {
    color: #212837 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    height: 19.5px !important;
    vertical-align: middle !important;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 300px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    color: #212837;
}

.select2-search__field::-webkit-input-placeholder,
.select2-search__field::placeholder {
    color: #869ac0 !important;
    opacity: 1; /* Firefox */
}


/* ===================================================================
    SWEET ALERT 2
=================================================================== */
.swal2-icon.swal2-success {
    border-color: #40d81d !important;
    color: #028824 !important;
}

    .swal2-icon.swal2-success .swal2-success-ring {
        border: 0.25em solid rgba(64, 216, 29,0.3) !important;
    }

.swal2-icon.swal2-error {
    border-color: #e6180d !important;
    color: #e6180d !important;
}

.swal2-icon.swal2-warning {
    border-color: #fc0 !important;
    color: #fc0 !important;
}

.swal2-icon.swal2-info {
    border-color: #30beff !important;
    color: #30beff !important;
}

.swal2-icon.swal2-question {
    border-color: #3c4e71 !important;
    color: #3c4e71 !important;
}


/* ===================================================================
    BUTTONS & PAGINATION
=================================================================== */
.btn-group.nav {
    display: inline-flex !important;
}

.btn-group .nav-link {
    padding: 0.4rem 1rem !important;
    background-color: white !important;
    border: solid 1px !important;
    border-color: #869ac0 !important;
    color: #212837 !important;
}

.btn-group .btn.active {
    background-color: var(--bs-primary) !important;
    border: solid 1px !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

.btn-edit-custom {
    padding: 0.47rem 0.4rem !important;
}

.btn-edit-custom-cancel {
    padding: 0.47rem 0.5rem !important;
}

.btn-indigo {
    --bs-btn-color: #fff;
    --bs-btn-bg: #640df3;
    --bs-btn-border-color: #640df3;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5a0adb;
    --bs-btn-hover-border-color: #5a0adb;
    --bs-btn-focus-shadow-rgb: 220,82,150;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5009c3;
    --bs-btn-active-border-color: #5009c3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #640df3;
    --bs-btn-disabled-border-color: #640df3;
}

.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ff9500;
    --bs-btn-border-color: #ff9500;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e68600;
    --bs-btn-hover-border-color: #e68600;
    --bs-btn-focus-shadow-rgb: 220,82,150;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #cc7700;
    --bs-btn-active-border-color: #cc7700;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ff9500;
    --bs-btn-disabled-border-color: #ff9500;
}

.btn-teal {
    --bs-btn-color: #fff;
    --bs-btn-bg: #20c997;
    --bs-btn-border-color: #20c997;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1fc794;
    --bs-btn-hover-border-color: #1fc794;
    --bs-btn-focus-shadow-rgb: 220,82,150;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1cb084;
    --bs-btn-active-border-color: #1cb084;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #20c997;
    --bs-btn-disabled-border-color: #20c997;
}

.btn-default {
    --bs-btn-bg: var(--bs-gray-300) !important;
    --bs-btn-hover-bg: var(--bs-gray-400) !important;
}

.editable-buttons .btn-sm {
    --bs-btn-padding-y: .42rem;
    --bs-btn-padding-x: .25rem;
}

.pagination {
    --bs-pagination-border-radius: 0 !important;
}

.page-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 13px !important;
}

.page-item:first-child .page-link {
    border-top-left-radius: .3rem !important;
    border-bottom-left-radius: .3rem !important;
}

.page-item:last-child .page-link {
    border-top-right-radius: .3rem !important;
    border-bottom-right-radius: .3rem !important;
}


/* ===================================================================
    HELPERS & UTILITIES
=================================================================== */
hr {
    height: 1px !important;
    background-color: #4d6593 !important;
    margin: 0.8rem 0 !important;
}

.fade {
    transition: opacity .1s ease !important;
}

.datepicker {
    z-index: 1099 !important;
}

.img-details {
    max-width: 100%;
    height: 100%;
    background-color: #ebeef4 !important;
}

.img-orders {
    height: 68px;
    background-color: transparent !important;
}

/* Borders */
.border-custom-f {
    border: 1px solid #6197ff;
}

.border-custom-t {
    border: 1px solid #6197ff;
}

.border-custom-h {
    border: 0px solid var(--bs-primary);
}

/* Typography & Colors */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #212837;
}

.text-indigo {
    color: var(--bs-indigo) !important;
}

.text-purple {
    color: var(--bs-purple) !important;
}

.text-pink {
    color: var(--bs-pink) !important;
}

.text-orange {
    color: var(--bs-orange) !important;
}

.text-teal {
    color: var(--bs-teal) !important;
}

.text-cyan {
    color: var(--bs-cyan) !important;
}

.bg-indigo {
    color: var(--bs-indigo) !important;
}

.bg-orange {
    color: var(--bs-orange) !important;
}

.bg-teal {
    color: var(--bs-teal) !important;
}

/* Apex Charts */
.apex-charts text {
    fill: var(--bs-gray-900) !important;
}


/* ===================================================================
    MEDIA QUERIES
=================================================================== */

/* Min-width: 1200px */
@media (min-width: 1200px) {
    body[data-layout=horizontal] .navbar-header {
        max-width: 100% !important;
    }
}

/* Min-width: 992px */
@media(min-width: 992px) {
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:focus,
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:hover {
        color: var(--bs-gray-800) !important;
        background-color: transparent !important;
    }

    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav > .dropdown.active > a {
        color: var(--bs-gray-900) !important;
        background-color: transparent !important;
    }

    .topnav .navbar-nav .nav-item:first-of-type .nav-link {
        padding-left: .75rem;
    }

    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link {
        color: #fff;
    }
}

/* Max-width: 992px */
@media (max-width: 992px) {
    .navbar-header {
        box-shadow: 0 0 .5rem rgba(31, 107, 255, .1) !important;
        border-radius: 5px !important;
    }

    body[data-layout=horizontal] .page-content {
        margin-top: 0 !important;
    }

    .topnav .navbar-nav .nav-link {
        padding: .75rem !important;
    }

    .dropdown-menu {
        --bs-dropdown-item-padding-y: .75rem !important;
    }

    .topnav-box {
        background: var(--bs-gray-100) !important;
    }
}

/* Max-width: 991.98px */
@media (max-width: 991.98px) {
    .topnav {
        max-height: 100% !important;
    }
}