@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');

:root {
    --green: #4BAFB2;
    --light-green: #C2EDE0;
    --dark-blue: #1B3B69;
    --yellow: #FCC855;
    --orange: #FC8955;
    --blue: #1F8ED3;
    --light-gray: #F1F4FA;
    --gray: #BEC0DB;
    --dark-gray: #8F90A4;

    --yellow-gradient: linear-gradient(345.18deg, rgba(252, 200, 85, 0.97) -5.51%, rgba(248, 229, 91, 0.63) 104.2%);
    --green-gradient: linear-gradient(351.38deg, #59BD93 5.23%, rgba(89, 189, 147, 0.58) 105.18%);
    --orange-gradient: linear-gradient(344.53deg, #FC8955 8.23%, rgba(252, 200, 85, 0.97) 90.93%);
    --blue-gradient: linear-gradient(345.08deg, #1F8ED3 21.61%, rgba(31, 142, 211, 0.47) 100.6%);
}

body {
    font-family: 'Inter', sans-serif;
    /* min-width: fit-content; */
}

a:hover {
    text-decoration: none;
}

#bsr-sidebar {
    background-color: var(--dark-blue);
}

[class*=sidebar-dark-] .sidebar a {
    color: var(--gray);
}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover {
    background: linear-gradient(90deg, #4EA2AD 19.06%, #81DEC2 100%);
    color: #fff;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: rgba(31, 142, 211, 0.3);
    color: #fff;
}

#dash-menu.active,
#dash-menu.active:focus,
#dash-menu.active:hover {
    background: linear-gradient(90deg, #4EA2AD 19.06%, #81DEC2 100%);
    color: #fff;
}

.content-wrapper {
    background-color: var(--light-gray);
    /* min-width: 1200px; */
}

.wrapper {
    background-color: var(--light-gray);
}

[class*=sidebar-dark] .brand-link {
    color: #fff;
    border: none;
}

#main-footer {
    color: var(--dark-gray);
}

#main-footer a {
    color: var(--green);
}

/* ------- BUTTON STYLES -------------------------------- */

.filter-btn {
    padding: 0.3em 1em;
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 0.5em;
    transition: all 0.1s;
    display: inline-block;
}

.filter-btn:hover {
    background-color: #fff;
    color: var(--green);
}

.filter-btn.active {
    background-color: #fff;
    color: var(--green);
}

.filter-btn.active:hover {
    background-color: var(--light-gray);
    border: 2px solid var(--light-gray);
}

.green-btn {
    padding: 0.5em 1em;
    background-color: var(--green);
    color: #fff;
    border: 2px solid var(--green);
    border-radius: 0.5em;
    transition: all 0.1s;
    display: inline-block;
}

.green-btn:hover {
    background-color: #53bec2;
    border: 2px solid #53bec2;
    color: #fff;
}

.white-btn {
    padding: 0.5em 1em;
    background-color: transparent;
    color: var(--green);
    border: 2px solid var(--green);
    border-radius: 0.5em;
    transition: all 0.1s;
    display: inline-block;
}

.white-btn:hover {
    background-color: #53bec2;
    border: 2px solid #53bec2;
    color: #fff;
}


/* ------- DASHBOARD STYLES ----------------------------- */

.dash-wrapper {
    padding: 2rem;
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 2rem; */
    margin-bottom: 1rem;
}

.dash-header>h3 {
    color: var(--dark-blue);
    display: inline-block;
    margin: 0;
    z-index: 1000;
}

/* .dash-header>div>*:not(:first-child) {
    margin-left: 0.5rem;
} */

.dash-header>div>* {
    /* margin-left: 0.5rem; */
    margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
    .dash-header {
        flex-direction: column;
    }

    .dash-header>h3 {
        display: block;
        margin-bottom: 1rem;
    }
}

.dash-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
    grid-auto-rows: minmax(100px, auto);
}

.dash-stat {
    grid-column: span 2;
}

.dash-pie {
    grid-column: span 3;
}

.dash-line {
    grid-column: span 5;
}

@media (max-width: 1400px) {
    .dash-stat {
        grid-column: span 4;
    }
}

@media (max-width: 800px) {

    .dash-pie,
    .dash-line {
        grid-column: span 8;
    }
}

@media (max-width: 650px) {
    .dash-stat {
        grid-column: span 8;
    }
}

.dash-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.dash-title>span {
    color: var(--dark-blue);
    font-weight: 700;
}

canvas.dash-canvas {
    width: 100% !important;
    height: 300px;
}

.dash-opt {
    display: inline-block;
    font-size: 0;
}

.dash-opt>button {
    margin: 0;
    font-size: 0.80rem;

    padding: 0.3rem 0.5rem;

    border: 1px solid var(--green);
    border-right-width: 0;
    background-color: transparent;
    color: var(--green);
}

.dash-opt>button:hover {
    background-color: var(--green);
    color: #fff;
}

.dash-opt>button:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.dash-opt>button:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-right-width: 1px;
}

.dash-opt>button.active {
    color: #fff;
    background-color: var(--green);
}

.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0px 4px 15px -10px rgba(0, 0, 0, 0.25);
}

.stat {
    display: flex;
    align-items: center;
}

.stat-icon {
    color: #fff;
    display: inline-block;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
}

.stat-icon.yellow {
    background: var(--yellow-gradient);
}

.stat-icon.green {
    background: var(--green-gradient);
}

.stat-icon.orange {
    background: var(--orange-gradient);
}

.stat-icon.blue {
    background: var(--blue-gradient);
}

.stat-info {
    display: inline-block;
}

.stat-info>h4 {
    font-weight: 600;
    color: var(--dark-blue);
}

.stat-info>span {
    color: var(--dark-gray);
}

/* ------- */

.page-wrapper {
    padding: 2rem;
}


.dropdown {
    display: inline-block;

}

.dropdown>ul {
    position: absolute;
    z-index: 1000;
    background-color: #fff;
    right: 0;
    min-width: 200px;
    margin-top: 2px;
    border-radius: 5px;
    box-shadow: 0px 4px 15px -10px rgba(0, 0, 0, 0.467);
    border: 1px solid var(--gray);
    list-style-type: none;
    padding: 5px;
}

.dropdown>ul li {
    padding: 5px 10px;
    border-radius: 5px;
    color: var(--dark-blue);
}

.dropdown>ul li:hover {
    background-color: var(--light-green);
}