.hp-navigator {
    display: flex; 
    color: var(--text-color); 
    font-size: 0.7em;
    user-select: none;    
    margin-bottom: 0.8em; 
    height: fit-content;
}

.hp-navigator.bottom {
    width: 12em
}

.hp-navigator-container {    
    background-color: var(--dark-grey); 
    width:100%; 
    text-align: center; 
    padding: 0.3em 0.5em 0.5em 0.5em;
    border-radius: 0.3em;
    position: relative;
}

.hp-navigator-modality {
    color: var(--primary); 
    font-weight: bold;
    font-size: 1.1em;
}

.hp-navigator-views {
    display: flex; 
    align-items: center;
}

.hp-navigator-views i {
    cursor: pointer; 
    margin-top: 0.2em;
}

.hp-navigator-separator {
    border-top: 1px solid var(--secondary); 
    padding:0.5em 0.5em 0.2em 0.5em;
    margin-top: 0.3em;
}

.hp-navigator-central {
    width: 100%; 
    cursor: pointer;    
}

.hp-navigator-current-view {
    font-weight: bold; 
    cursor: pointer;
}

.hp-navigator-item {
    font-weight: normal; 
    padding: 0.3em; 
    cursor: pointer;   
}

.hp-navigator-item.selected {
    background-color: var(--secondary);  
}

.hp-navigator-item:hover {
    background-color: var(--secondary);  
}

.hp-navigator-dropdown {
    margin-top: 0.7em;
    border-radius: 0.3em;
    box-shadow: black 0px 0.7em 3em 0.5em;
    background-color: var(--grey);
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
}

.hp-navigator-dropdown.bottom {
    bottom: 5em;
}

.hp-navigator-arrow {
    width: 1em;
    cursor: pointer;
}