#sidebar {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    height: calc(100vh - var(--height-medium-large) - var(--height-large) - 10px);
    width: 800px;
    max-width: 30vw;
    min-width: 250px;
    text-align: center;
    padding: 10px 0px var(--height-large) 0px;
    z-index: 10;
}

.filler {
    height: 75px;
}

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    width: inherit;
    max-width: inherit;
    min-width: inherit;
    padding: var(--height-medium) 0px var(--height-medium) 0px;
    z-index: 15;
}

#new_event_button {
    max-width: 80%;
    transition: all 0.3s ease;
}

#new_event_button:hover {
    transform: scale(1.05);
}

#sidebar .item:hover {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    transform: translateX(5px);
    cursor: pointer;
}

#sidebar .item:active {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(2px);
}

#sidebar .item.selected {
    background: linear-gradient(135deg, rgba(41, 171, 226, 0.3), rgba(107, 180, 240, 0.2));
    border-left: 3px solid #29ABE2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media screen and (max-width: 900px) {
    #sidebar .item .content {
        display: none;
        width: 0px;
    }
    #sidebar .item {
        display: block;
        border-radius: 50px 0px 0px 50px;
    }
}

@media screen and (max-width: 900px) {
    #sidebar {
        width: auto;
        min-width: auto;
        max-width: auto;
    }
    #footer {
        width: 100px;
    }
    #new_event_button {
        border-radius: 50%;
        width: 60px;
        height: 60px;
    }
}

@media screen and (max-width: 500px) {
    #sidebar {
        display: none;
    }
}