.button {
  display: block;
  background: none !important;
  width: 100%;
  padding: 0px;
  outline: none;
  border: none;
  margin: 10px 0;
  box-shadow: none;
  border-radius: 7px;
}
.button:hover,
.button:active {
  box-shadow: none;
}

.container {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: inherit;
  padding: 18px 10px 18px 20px;
  cursor: pointer;
}

.container:hover {
  background-color: var(--component-hover);
}

.icon_container {
  position: absolute;
  height: 25px;
  width: 25px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon_container svg {
  fill: var(--text-color-secondary) !important;
}

.container.active {
  background-color: rgba(32, 101, 209, 0.16);
}
.container.active:hover {
  background-color: var(--component-hover);
}

.container.active .icon_container svg {
  fill: rgb(32, 101, 209) !important;
}

.list_item {
  margin-left: 50px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color-secondary);
}

.container.active .list_item {
  color: rgb(32, 101, 209);
}

.expand {
  background: none;
  border: none;
  outline: none;
  color: var(--text-color);
  height: 15px;
  width: 15px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.expand.expand_on {
  transform: translateY(-50%) rotate(90deg);
}

.list_point {
  display: block;
  height: 4px;
  width: 4px;
  background: var(--text-color-secondary);
}

.nested_links {
  max-height: 0px;
  overflow: hidden;
  transition: all 0.3s ease-out;
}
.nested_links.active {
  max-height: 160px;
}

.nested_links .button {
  margin: 5px 0px;
}

.nested_links .container {
  padding: 13px 10px 13px 20px;
}

.nested_links .list_item {
  text-transform: capitalize;
}

.list_point.active {
  height: 5.5px;
  width: 5.5px;
  background: var(--component-color);
}

.list_item.active {
  color: var(--text-color);
  font-weight: 600;
}