@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --main-color: purple;
    --second-color: orange;

    --bmz-primary: #0d6efd;
    --bmz-secondary: #6c757d;
    --bmz-success: #198754;
    --bmz-danger: rgb(195, 47, 61);
    --bmz-warning: #ffc107;
    --bmz-info: #0dcaf0;
    --bmz-light: #f8f9fa;
    --bmz-dark: #212529;
}

* {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgba(0, 0, 0, 0.5);
}

h1, h2, h3, h4 {
    color: var(--main-color);

}

form h1, form h2, form h3, form h4 {
    border-bottom: 2px solid var(--second-color);
}

h4 { font-size: 1.1em; }
h3 { font-size: 1.2em; }
h2 { font-size: 1.3em; }
h1 { font-size: 1.4em; }
/* *************************
   Full Page Overlay
 */
.overlay {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1051; /* Above Bootstrap's modal overlay */

    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: darkgrey;
    /*top: 25%;
    left: 25%;
    transform: translate(-25%, -25%); */
    padding: 15px;
}

.overlay.active {
    display: block; /* Show overlay */
    opacity: 1;
}

/* Ensure .btn-close is visible on the dark background */
.overlay-btn-close {
    filter: invert(1);
}

.custom-overlay {
 /*   margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px; */

    background-color: lightgrey;

    padding: 10px;
}

.form-buttons {
    border-top: 2pt solid black;
}

/* *************************
   Menu Bar Styling
   ************************* */
@media (min-width: 768px) {
    .sidebar .offcanvas-lg {
        position: sticky;
        top: 48px;
    }

    .navbar-search {
        display: block;
    }
}

.sidebar .nav-link {
    font-size: .875rem;
    font-weight: 500;
}

.sidebar .nav-link.active {
    color: #2470dc;
}

.sidebar-heading {
    font-size: .75rem;
}

.sidebar {
    min-height: 100vh;
}

/*
 * Navbar
 */

.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
    padding: .75rem 1rem;
}

/* *************************
   Dashboard Styling
   ************************* */

section#dashboard .card:hover {
    background-color: lightgrey;
}


.dashboard-header {
    border-bottom: 2px lightgrey solid;
    margin-bottom: 4px;
}

.dashboard-header h1 {
    font-size: 20px;
    line-height: 18px;
}

.dashboard-header h2 {
    font-size: 16px;
    line-height: 18px;
}

/* Dashboard: Widgets */
.dashboard-widgets {
    border-bottom: 2px lightgrey solid;
    margin-bottom: 4px;
    padding: 10px 0;
}

/* Dashboard:: Data Table */
.dashboard-data-table td, .dashboard-data-table th {
    padding-top: 10px;
    padding-bottom: 10px;

}

.dashboard-data-table th, .dashboard-data-table tfoot tr td {
    background-color: rgb(248, 249, 250);
    border: 1pt solid rgb(222, 226, 230);
}

.dashboard-data-table i.active {
    font-weight: 900;
    color: black;

}

#dashboard_table tbody tr td .off-page-link {
    margin-left: 5px;
    font-weight: bolder;
    color: var(--main-color);
    text-decoration: underline;

}

#dashboard_table tbody tr td {
    vertical-align: middle;
}


/* *************************
   Information Panel Settings
   ************************* */

.alert-bmz-danger {
    background-color: var(--bmz-danger) !important;
    color: white !important;
}

.alert-bmz-danger p, .alert-bmz-danger btn {
    color: white !important;
}

.alert-bmz-warning {
    background-color: var(--bmz-warning) !important;
    color: white !important;
}

.alert-bmz-warning p, .alert-bmz-warning btn {
    color: white !important;
}

.alert-bmz-success {
    background-color: var(--bmz-success) !important;
    color: white !important;
}

.alert-bmz-success p, .alert-bmz-success btn {
    color: white !important;
}

/*
Button Icons
 */
.btn-primary i,
.btn-success i,
.btn-success i,
.btn-danger i,
.btn-dark i {
    color: rgb(255, 255, 255);
}

.btn-warning i,
.btn-info i,
.btn-light i {
    color: rgb(0, 0, 0);
}


/* Slide In */
.slide-in {
    position: absolute;
    right: 0;
    top: 0;
    min-height: 100vh;
    min-width: 100%;
    width: 100%;
    z-index: 2000;
    background-color: #ccc;
    padding: 8px;
}

/* Small devices (landscape phones, 576 px and up) */
@media (min-width: 576px) {
    .slide-in {
        min-width: 100%;
        width: 100%
    }
}

/* Medium devices (tablets, 768 px and up) */
@media (min-width: 768px) {
    .slide-in {
        min-width: 75%;
        width: 75%;
    }
}

/* Large devices (desktops, 992 px and up) */
@media (min-width: 992px) {
    .slide-in {
        min-width: 60%;
        width: 60%;
    }
}

/* X-Large devices (large desktops, 1200 px and up) */
@media (min-width: 1200px) {
    .slide-in {
        min-width: 40%;
        width: 40%;
    }
}


/* Card Overwrite */
.card-header, .card-header > .row > .col {

}

.card-header .card-bomzitit * {
    font-size: .875rem;
    background-color: rgb(86, 61, 124) !important;
    color: white !important;
}

.card-bomzitit .card-body {
    min-height: 150px;
}

.card-bomzitit div.card-header * { /*div i { */
    color: lightgray;
}

.card-footer {
    border-top: 2pt solid rgb(86, 61, 124) !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}

.card-footer .btn {
    min-width: 100px !important;
}



/* File Uploader */
:root {
    --colorPrimaryNormal: #00b3bb;
    --colorPrimaryDark: #00979f;
    --colorPrimaryGlare: #00cdd7;
    --colorPrimaryHalf: #80d9dd;
    --colorPrimaryQuarter: #bfecee;
    --colorPrimaryEighth: #dff5f7;
    --colorPrimaryPale: #f3f5f7;
    --colorPrimarySeparator: #f3f5f7;
    --colorPrimaryOutline: #dff5f7;
    --colorButtonNormal: #00b3bb;
    --colorButtonHover: #00cdd7;
    --colorLinkNormal: #00979f;
    --colorLinkHover: #00cdd7;
}

.upload_dropZone {
    color: #0f3c4b;
    background-color: var(--colorPrimaryPale, #c8dadf);
    outline: 2px dashed var(--colorPrimaryHalf, #c1ddef);
    outline-offset: -12px;
    transition: outline-offset 0.2s ease-out,
    outline-color 0.3s ease-in-out,
    background-color 0.2s ease-out;
}

.upload_dropZone.highlight {
    outline-offset: -4px;
    outline-color: var(--colorPrimaryNormal, #0576bd);
    background-color: var(--colorPrimaryEighth, #c8dadf);
}

.upload_svg {
    fill: var(--colorPrimaryNormal, #0576bd);
}

.btn-upload {
    color: #fff;
    background-color: var(--colorPrimaryNormal);
}

.btn-upload:hover,
.btn-upload:focus {
    color: #fff;
    background-color: var(--colorPrimaryGlare);
}

.upload_img {
    width: calc(33.333% - (2rem / 3));
    object-fit: contain;
}

.table-link {
    color: var(--main-color);
    text-decoration: underline;
}

.table-link:hover {
    cursor: pointer;
    color: var(--second-color);
}

.bmz-active-icon {
    color: var(--main-color);
    padding-right: 5px;
}

.bmz-inactive-icon {
    color: #c8dadf;
}

.bmz_uppercase {
    text-transform: uppercase;
}

.typeahead-results {
    z-index: 1999;
    overflow-y: scroll;
    background-color: white;
    position: absolute;
    padding-left: 10px;
    margin-left: 10px;
}

.autocomplete-result:hover {
    text-decoration: underline;
    background-color: var(--bmz-secondary);
}

.bmz-panel-height-small {
    min-height: 100px;
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.bmz-panel-height-medium {
    min-height: 200px;
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.bmz-panel-height-large {
    min-height: 400px;
    max-height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.bmz-panel-height-xl {
    min-height: 800px;
    max-height: 800px;
    overflow-y: scroll;
    overflow-x: hidden;
}

div.alert .fa-triangle-exclamation {
    color: red;
    font-weight: bold;
    font-size: 1.5em;
}

div.alert .fa-circle-exclamation {
    color: orange;
    font-weight: bold;
    font-size: 1.5em;
}