.navigation {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.navigation .navigation-top {
  flex: 1 1 auto;
}

.navigation .navigation-bottom {
  flex-grow: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.navigation-item-container.navigation-item-selected {
  background: rgba( 200, 200, 200 ,  1 );
  background: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border-left: 4px solid rgba(0, 120, 212, 1);
  border-left: 4px solid var(--communication-background,rgba(0, 120, 212, 1));
}

.navigation-item, .navigation-item:active, .navigation-item:hover, .navigation-item:focus {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-align: initial;
  border-radius: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  flex-direction: row;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  padding: 0 15px;
}

a.navigation-item, a.navigation-item:visited, a.navigation-item:active, a.navigation-item:focus, a.navigation-item:hover {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  text-decoration: none;
}

.navigation-item-selected a.navigation-item, .navigation-item-selected a.navigation-item:visited, .navigation-item-selected a.navigation-item:active, .navigation-item-selected a.navigation-item:focus, .navigation-item-selected a.navigation-item:hover {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.navigation-item-selected .navigation-item {
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
}

.navigation-item .navigation-item-title {
  flex-grow: 1;
  text-align: left;
}

.navigation-item .navigation-item-icon {
  min-width: 16px;
  margin-right: 5px;
}

.navigation-item .navigation-item-expand button, .navigation-item .navigation-item-expand button:active, .navigation-item .navigation-item-expand button:hover, .navigation-item .navigation-item-expand button:focus {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-align: initial;
  border-radius: 0;
}

.navigation-items {
  padding: 0;
  margin: 0;
  list-style: none;
}

.navigation-item-children-container {
  overflow: hidden;
  position: relative;
}

.navigation-item-children {
  transition: margin-top 0.2s cubic-bezier(0, 0.87, 0.77, 1), opacity linear 0.1s;
  opacity: 0;
}

.expanded .navigation-item-children {
  margin-top: 0px !important;
  opacity: 1;
}

.navigation-item-level-1 {
  padding-left: 15px;
}

.navigation-item-level-2 {
  padding-left: 30px;
}

.navigation-item-level-3 {
  padding-left: 45px;
}

.navigation-item-level-4 {
  padding-left: 60px;
}

.navigation-item-level-5 {
  padding-left: 75px;
}