:root {
    --color-dark-blue: #0F4473;
}

.nav-icons {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-bottom: 2px solid #fff;
}

.slide-item {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 600ms;
    -webkit-transition: opacity 600ms;
    opacity: 0;
    width: 100%;
}

.visually-show {
    opacity: 1 !important;
    transition: opacity 600ms;
}

.show-graph {
    display: flex;
}

.nav-icon {
    height: 50px;
}

.nav-icon:hover {
    cursor: pointer;
}

.nav-icon line, .nav-icon circle, .nav-icon path {
    stroke: #fff;
}

.nav-icon circle, .nav-icon polygon, .nav-icon rect.rect {
    fill: #fff;
}

.nav-icon:hover line, .nav-icon:hover circle, .nav-icon:hover path {
    stroke: var(--color-dark-blue);
}

.nav-icon:hover circle, .nav-icon:hover polygon, .nav-icon:hover path, .nav-icon:hover rect.rect {
    fill: var(--color-dark-blue);
}

.nav-icon.active-icon line, .nav-icon.active-icon circle, .nav-icon.active-icon path {
    stroke: var(--color-dark-blue);
}

.nav-icon.active-icon circle, .nav-icon.active-icon polygon, .nav-icon.active-icon path, .nav-icon.active-icon rect.rect {
    fill: var(--color-dark-blue);
}