::selection {
  background-color: color-mix(in srgb, oklch(58.8% 0.158 241.966) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-sky-600) 90%, transparent);
  }
  color: var(--color-white);
}

.feature ul {	
    list-style-type: disc;
}

.feature li {
    margin-left: 20px;
    margin-bottom: 10px;
}

.feature li:last-child {
    margin-bottom: 0;
}

.feature p {
    margin-bottom: 10px;
}

.truncate {
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

.mw-160 {
  max-width: 160px;
}

.sidebar-nav {
  & li {
    &.account-menu {
      &.active, &:hover {
        & .navbar-link {
          color: var(--color-sky-600) !important;
        }
      }
    }
  }
}

@layer utilities {
  .focus\:border-indigo-600 {
    &:focus {
      border-color: var(--color-sky-600);
    }
  }
}

@layer utilities {
  .fill-green-600\/5 {
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-green-600) 5%, transparent);
    }
  }

  .fill-sky-600\/5 {
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-sky-600) 5%, transparent);
    }
  }

  .fill-red-600\/5 {
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-red-600) 5%, transparent);
    }
  }

  .fill-orange-600\/5 {
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-orange-600) 5%, transparent);
    }
  }
}

#topnav {
  &.nav-sticky {
    & .navigation-menu {
      &.nav-light {
        & > li {
          &:hover, &.active {
            & > a {
              color: var(--color-sky-600) !important;
            }
          }
        }
      }
    }
  }
}

#topnav {
  & .has-submenu {
    & .submenu {
      & .has-submenu {
        &:hover {
          & > .submenu-arrow {
            border-color: var(--color-sky-600);
          }
        }
      }
    }
  }
}

#topnav {
  & .has-submenu {
    & .submenu {
      & .has-submenu {
        &:hover {
          & > .submenu-arrow {
            &:where(.dark, .dark *) {
              border-color: var(--color-sky-600);
            }
          }
        }
      }
    }
  }
}

@media (min-width: 992px) {
  #topnav {
    & .navigation-menu {
      & > li {
        & .submenu {
          & li {
            & a {
              &:hover {
                color: var(--color-sky-600) !important;
                &:where(.dark, .dark *) {
                  color: var(--color-sky-600) !important;
                }
              }
            }
          }
        }
      }
    }
  }
}