remix-ui-vertical-icons-panel.css

.remixui_homeIcon {
    /* display: block; */
    width: 42px;
    height: 42px;
    cursor: pointer;
    justify-content: space-between;
    align-self: center;
}
  .remixui_homeIcon:hover {
    box-shadow: 0px 0px 14px -7px;
  }

  .remixui_homeIcon svg path {
    fill: var(--primary);
  }
  .remixui_homeIcon svg polygon {
    fill: var(--primary);
  }
  .remixui_icons {
    display: flex;
    flex-flow: column nowrap;
  }
  .remixui_icon:hover {
    box-shadow: 0px 0px 14px -7px;
  }

  .remixui_icon {
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    align-items: center;
     animation: highlight 2s forwards ;
  }

  @keyframes highlight {
    from {background-color: var(--secondary);}
    to {background-color: transparent;}
  }

  .remixui_icon img {
    width: 28px;
    height: 28px;
    padding: 4px;
    filter: invert(0.5);
  }

  .remixui_icon .selected-dark {
    filter: invert(1) grayscale(1);
  }

  .remixui_icon .selected-light {
    filter: invert(0) grayscale(1);
  }

  .remixui_icon svg {
    width: 28px;
    height: 28px;
    padding: 4px;
  }
  .remixui_icon[title='Settings'] {
    order: 5;
    align-self: center;
    bottom: 0;
  }
  .remixui_status {
    position: relative;
    bottom: 0;
    right: 0;
    left: 12px;
    top: -13px;
  }
  .remixui_statusCheck {
    font-size: 1.2em;
  }
  .remixui_statusWithBG {
    border-radius: 8px;
    background-color: var(--danger);
    color: var(--light);
    font-size: 12px;
    height: 15px;
    text-align: center;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
  }

  .remixui_verticalIconContextcontainer {
    display: block;
    position: fixed;
    border-radius: 2px;
    z-index: 1000;
    box-shadow: 0 0 4px var(--dark);
  }
  .remixui_verticalIconContextcontainer:focus {
    outline: 0;
  }
  .remixui_liitem {
    padding: 2px;
    padding-left: 6px;
    cursor: pointer;
    color: var(--text-dark);
    background-color: var(--light);
  }
  .remixui_liitem:hover {
    background-color: var(--secondary);
  }

  .remixui_scrollbar {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox hide scrollbar */
    -ms-overflow-style: none;
  }
  .remixui_requiredSection {
    text-align: center;
  }
  .remixui_scrollable-container {
    flex-basis: 510px;
    flex-grow: 2;
    text-align: center;
    margin-top: -6px;
    /* border-bottom: 3px solid #3f4455; */
  }
  .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
    display: none;
  }
  .remixui_hide-scroll {
    overflow-x: 'hidden';
  }
  .remixui_default-icons-container {
    border-bottom: 2px solid #3f4455;
    text-align: center;
  }
  .remixui_icon-chevron {
    z-index: 1000;
    cursor: pointer;
    align-items: center;
  }

  .remixui_settings {
    flex-basis: 50px;
  }

  .remixui_icons_height {
    height: 97vh;
  }

  #menuitems {
    list-style: none;
    margin: 0px;
  }

  .remixui_plugins-list-tooltip {
    min-width: 200px;
    max-width: 300px;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease-in-out;
  }

  .remixui_plugin-names-tooltip ul li {
    text-transform: capitalize;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }