/** Side bar **/
.sidebar {
    .navbar {
        background-color: #292d38 ;
        border: none;        
    }

    .nav-scrollable {
        background-color: #484f61;
        padding-top: 20px;

        
        .nav-link-icon, .nav-link-arrow {
            color: #ffffff;
        }
        
        .nav-link-text {
            color: #ffffff;
        }
    }.nav-link.active {
            background-color: aquamarine;
        }
}

.navbar-brand-text {
    color: #FFFFFF;
}



/** Start page **/
.start.page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Black with 50% transparency */
    z-index: 1; /* Ensure the overlay is on top of the background image */
}

.start.page .panel {
    width: 400px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center; 
    z-index: 2;
    border-radius: 20px;
    padding: 40px;

    .contents {
        display: flex;
        flex-direction: column;
        justify-content: center;    /* Center the middle div vertically */
        align-items: center;        /* Center horizontally */
        width: 100%;
        height: 100%;
        position: relative;
        
        .title {
            font-size: 50px;
            letter-spacing: 0px;
            font-weight: 700;
            font-family: "Inter", serif;
            padding-bottom: 50px;
            width: 100%;
            justify-content: left;
            line-height: 1em;
        }
        
        .controls {
            position: absolute;
            bottom: 0;
            width: 100%;
            align-self: flex-end;   /* Align at the bottom */           
        }
    }
}

/** Grids **/
.gridFilters {
    padding-bottom: 20px;
}

/* this page-title styles don't seem to work in the scoped CSS */
.page-title .toolbar a {
    text-decoration: none !important;
    color: #fa5424;
    font-weight: 700;
}

.page-title .links a {
    text-decoration: none !important;
    color: #1c2b36;
    font-weight: 700;
}