/* styles.css */
body {
    background: #f5f5f5;
}

.scrollspy-example {
    position: relative;
    /* height: 100vh; */
    overflow-y: auto;
    overflow-x: hidden;
}

.background-radial-gradient {
    min-height: 100vh;
    background-color: hsl(218, 41%, 15%);
    background-image: radial-gradient(650px circle at 0% 0%,
            hsl(218, 41%, 35%) 15%,
            hsl(218, 41%, 30%) 35%,
            hsl(218, 41%, 20%) 75%,
            hsl(218, 41%, 19%) 80%,
            transparent 100%),
        radial-gradient(1250px circle at 100% 100%,
            hsl(218, 41%, 45%) 15%,
            hsl(218, 41%, 30%) 35%,
            hsl(218, 41%, 20%) 75%,
            hsl(218, 41%, 19%) 80%,
            transparent 100%);
}

#radius-shape-1 {
    height: 220px;
    width: 220px;
    top: -60px;
    left: -130px;
    background: radial-gradient(#44006b, #ad1fff);
    overflow: hidden;
}

#radius-shape-2 {
    border-radius: 38% 62% 63% 37% / 70% 33% 67% 30%;
    bottom: -60px;
    right: -110px;
    width: 300px;
    height: 300px;
    background: radial-gradient(#44006b, #ad1fff);
    overflow: hidden;
}

.bg-glass {
    background-color: hsla(0, 0%, 100%, 0.9) !important;
    backdrop-filter: saturate(200%) blur(25px);
}

.nav-link {
    color: #333;
    text-decoration: none;
}

/* CSS Untuk Dashboard */
#side_nav {
    /* background: #000; */
    min-width: 250px;
    max-width: 250px;
    transition: all 0.3s;
}

.content {
    min-height: 100vh;
    width: 100%;
}

hr.h-color {
    background: #eee;
    height: 2px;
    border: none;
    margin: 0;
}

.sidebar li.active {
    background: #ffffff;
    border-radius: 8px;
}

.sidebar li.active a,
.sidebar li.active a:hover {
    color: #000;
}

.sidebar li a {
    color: #fff;
}

.sidebar li.active .collapse li.actived {
    background-color: hsl(219, 41%, 30%);
    border-radius: 8px;
}

.sidebar li.active .collapse li.actived a,
.sidebar li.active .collapse li.actived a:hover {
    color: #fff;
}

#icondropdown i {
    transition: transform 0.3s ease-in-out;
}

#map {
    height: 450px;
}

@media (max-width: 767px) {
    #side_nav {
        margin-left: -250px;
        position: fixed;
        min-height: 100vh;
        z-index: 1;
    }

    #side_nav.active {
        margin-left: 0;
    }

    .scrollspy-example {
        position: relative;
        height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
}