#sidePanel{
    background-color: var(--surface-color);
    border-style: solid;
    border-width: 1.5pt;
    border-color: var(--border-color);
    border-radius: 7.5pt;
    padding: 10pt;
    overflow-x: hidden;
    overflow-y: auto;

    display:flex;
    flex-direction: column;
}

#sidePanelSiteDataItem{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10pt;
    font-size: 18pt;
    padding: 10pt;
    margin-bottom: 0;
}

#sidePanelLogo{
    width: 30pt;
    height: 30pt;
    border-radius: 50%;
    object-fit: cover;
}

#sidePanelSiteDataItem span{
    transform: translateY(1.75px);
}

#sidePanelHrTop{
    margin-bottom: 10pt;
}

#sidePanelOptionsList{
    list-style: none;
    padding: 0;
}

.sidePanelOptionsListElement{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10pt;
    padding: 10pt;
    margin-bottom: 15pt;
    border-radius: 7.5pt;
    font-size: 14pt;

    border-bottom-style: solid;
    border-bottom-width: 1.5pt;
    border-bottom-color: var(--border-color);
}

.sidePanelOptionsListElement:hover{
    background-color: var(--surface-color-hover);
    cursor: pointer;
}

.sidePanelOptionsListElement:active{
    transform: scale(0.98);
}

.sidePanelOptionsListElementActive {
    view-transition-name: sidePanelOptionsListElementActive;

    border-left-style: solid;
    border-width: 2pt;
    border-color: var(--accent-primary);
    box-shadow: -4px 0 5px -4px var(--accent-primary);
    background-color: var(--surface-color-hover);
    border-bottom-style: none !important;
}
.sidePanelUserItem{
    display:flex;
    flex-direction: row;
    align-items: center;
    gap: 4pt;
    justify-content: space-between;
    padding: 10pt;
    margin-top: auto;
    font-weight: bold;
}

.sidePanelIconActive{
    color: var(--accent-primary) !important;
}

#logoutButton{
    transition: transform 0.2s ease;
}

#logoutButton:hover{
    cursor: pointer;
    transform: scale(1.1);
}

#logoutButton:active{
    transform: scale(0.9);
}