/*!
 * Not Idea UI 2.2.5 (https://not-idea-ui.netlify.app/)
*/
@tailwind components;
@layer components {
  .footer .footer-top,
  .footer .footer-bottom {
    @apply px-8 py-6;
  }
  .footer .footer-top {
    @apply py-12 bg-slate-500 flex items-start justify-between flex-wrap gap-y-8 lg:gap-0;
  }
  .footer .footer-top .footer-item {
    @apply basis-full w-full md:basis-[calc(50%-20px)] md:w-[calc(50%-20px)] lg:basis-[calc(25%-20px)] lg:w-[calc(25%-20px)];
  }
  .footer .footer-bottom {
    @apply bg-slate-800;
  }
  .footer .copyright {
    @apply mb-0 text-white;
  }
  .footer .footer-menu {
    @apply space-x-2;
  }
  .footer .footer-menu a {
    @apply inline-block text-white hover:text-yellow-500 font-semibold transition-all duration-400 ease-in-out;
  }
  .footer .social-media {
    @apply flex space-x-2;
  }
  .footer .social-media a {
    @apply inline-block text-white hover:text-yellow-500 font-semibold transition-all duration-400 ease-in-out;
  }
  .footer .has-menu,
  .footer .has-media,
  .footer .has-media-menu {
    @apply flex flex-wrap justify-between;
  }
  .form {
    @apply p-8 rounded bg-white;
  }
  .double-field {
    @apply grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-5 md:gap-x-8;
  }
  .double-field > .field {
    @apply mb-0;
  }
  .double-field:not(:last-child) {
    @apply mb-4;
  }
  .is-primary {
    @apply accent-primary-700;
  }
  .is-secondary {
    @apply accent-secondary-700;
  }
  .is-tertiary {
    @apply accent-tertiary-700;
  }
  .field:not(:last-child) {
    @apply mb-4;
  }
  .field.field-button {
    @apply mt-6;
  }
  .field .label {
    @apply mb-1 block font-semibold;
  }
  .field .input,
  .field .textarea,
  .field .select-inner,
  .field .input-file {
    @apply w-full text-gray-800 px-5 py-2 rounded bg-gray-100 border border-gray-200/60 outline-none focus:border-primary-400 transition-all duration-300 ease-in-out;
  }
  .field .input[disabled],
  .field .textarea[disabled],
  .field .select-inner[disabled],
  .field .input-file[disabled] {
    @apply cursor-not-allowed;
  }
  .field .input.error,
  .field .textarea.error,
  .field .select-inner.error,
  .field .input-file.error {
    @apply border-red-500 text-red-500/90 bg-red-500/20;
  }
  .field .input.error::placeholder,
  .field .textarea.error::placeholder,
  .field .select-inner.error::placeholder,
  .field .input-file.error::placeholder {
    @apply text-red-500/90;
  }
  .field .input.success,
  .field .textarea.success,
  .field .select-inner.success,
  .field .input-file.success {
    @apply text-green-600/90 border-green-500 bg-green-500/20;
  }
  .field .input.success::placeholder,
  .field .textarea.success::placeholder,
  .field .select-inner.success::placeholder,
  .field .input-file.success::placeholder {
    @apply text-green-500/90;
  }
  .field .input.warning,
  .field .textarea.warning,
  .field .select-inner.warning,
  .field .input-file.warning {
    @apply text-yellow-500/90 border-yellow-500 bg-yellow-500/10;
  }
  .field .input.warning::placeholder,
  .field .textarea.warning::placeholder,
  .field .select-inner.warning::placeholder,
  .field .input-file.warning::placeholder {
    @apply text-yellow-500/90;
  }
  .field .input.is-flat,
  .field .textarea.is-flat,
  .field .select-inner.is-flat,
  .field .input-file.is-flat {
    @apply rounded-none;
  }
  .field .input.is-full-rounded,
  .field .textarea.is-full-rounded,
  .field .select-inner.is-full-rounded,
  .field .input-file.is-full-rounded {
    @apply rounded-full;
  }
  .field .input.is-small,
  .field .textarea.is-small,
  .field .select-inner.is-small,
  .field .input-file.is-small {
    @apply text-sm py-1 px-3;
  }
  .field .input.is-large,
  .field .textarea.is-large,
  .field .select-inner.is-large,
  .field .input-file.is-large {
    @apply text-xl py-3 px-6;
  }
  .field .textarea {
    @apply resize-y min-h-24 max-h-32;
  }
  .field .textarea.is-full-rounded {
    @apply rounded-3xl;
  }
  .field .textarea.is-small {
    @apply min-h-[4rem] h-20 max-h-28;
  }
  .field .textarea.is-large {
    @apply min-h-[6rem] h-40 max-h-52;
  }
  .field .input-file {
    @apply p-2 cursor-pointer;
  }
  .field .input-file:hover {
    @apply bg-primary-600 text-white;
  }
  .field .radio-group,
  .field .check-group {
    @apply flex flex-wrap;
  }
  .field .radio-group > *:not(:last-child),
  .field .check-group > *:not(:last-child) {
    @apply mr-3;
  }
  .field .checkbox,
  .field .radio {
    @apply cursor-pointer;
  }
  .field .checkbox .label,
  .field .radio .label {
    @apply font-body inline-block font-normal ml-2 cursor-pointer;
  }
  .field .checkbox.is-toggle,
  .field .radio.is-toggle {
    @apply cursor-auto relative;
  }
  .field .checkbox.is-toggle input,
  .field .radio.is-toggle input {
    @apply absolute -z-[1] opacity-0;
  }
  .field .checkbox.is-toggle .label,
  .field .radio.is-toggle .label {
    @apply align-middle relative w-[4.5rem] h-8 m-0 px-2 py-1 bg-gray-100 rounded-2xl transition-all duration-300 ease-in-out;
  }
  .field .checkbox.is-toggle .label::before,
  .field .radio.is-toggle .label::before {
    @apply absolute z-1 left-2 content-[""] block h-6 w-6 bg-gray-400 rounded-full transition-all duration-300 ease-in-out;
  }
  .field .checkbox.is-toggle .label-text,
  .field .radio.is-toggle .label-text {
    @apply align-middle cursor-pointer;
  }
  .field .checkbox.is-toggle input:checked + .label,
  .field .radio.is-toggle input:checked + .label {
    @apply bg-primary-300/40;
  }
  .field .checkbox.is-toggle input:checked + .label::before,
  .field .radio.is-toggle input:checked + .label::before {
    @apply left-10 bg-primary-600;
  }
  .field .checkbox.is-toggle input:disabled + .label,
  .field .radio.is-toggle input:disabled + .label {
    @apply bg-gray-100/70 cursor-not-allowed;
  }
  .field .checkbox.is-toggle input:disabled + .label::before,
  .field .radio.is-toggle input:disabled + .label::before {
    @apply bg-gray-400/50 cursor-not-allowed;
  }
  .field .checkbox.is-toggle.is-secondary input:checked + .label,
  .field .radio.is-toggle.is-secondary input:checked + .label {
    @apply bg-secondary-300/40;
  }
  .field .checkbox.is-toggle.is-secondary input:checked + .label::before,
  .field .radio.is-toggle.is-secondary input:checked + .label::before {
    @apply bg-secondary-600;
  }
  .field .checkbox.is-toggle.is-tertiary input:checked + .label,
  .field .radio.is-toggle.is-tertiary input:checked + .label {
    @apply bg-tertiary-300/40;
  }
  .field .checkbox.is-toggle.is-tertiary input:checked + .label::before,
  .field .radio.is-toggle.is-tertiary input:checked + .label::before {
    @apply bg-tertiary-600;
  }
  .field .error-message,
  .field .success-message,
  .field .warning-message,
  .field .desc {
    @apply text-sm mt-1;
  }
  .field .desc {
    @apply text-gray-500 font-normal;
  }
  .field .error-message {
    @apply text-red-500/90;
  }
  .field .success-message {
    @apply text-green-500/90;
  }
  .field .warning-message {
    @apply text-yellow-500/90;
  }
  .has-icon .input-icon {
    @apply relative;
  }
  .has-icon .input-icon .icon {
    @apply inline-block text-gray-500 w-6 h-6 absolute left-2 top-2;
  }
  .has-icon .input-icon .input {
    @apply pl-10;
  }
  .has-icon.to-right .icon {
    @apply left-auto right-2;
  }
  .has-icon.to-right .input {
    @apply pl-5 pr-10;
  }
  .has-button .input-button {
    @apply flex;
  }
  .has-button .input-button .input {
    @apply rounded-tr-none rounded-br-none;
  }
  .has-button .input-button .button {
    @apply rounded-tl-none rounded-bl-none;
  }
  .has-button .input-float-button {
    @apply relative;
  }
  .has-button .input-float-button button, .has-button .input-float-button .button {
    @apply absolute right-4 z-1 top-1/2 -translate-y-1/2;
  }
  .has-select .input-select {
    @apply flex;
  }
  .has-select .input-select .select-inner {
    @apply rounded-tr-none rounded-br-none w-3/12 pl-2 pr-0 bg-white/90;
  }
  .has-select .input-select .input {
    @apply rounded-tl-none rounded-bl-none;
  }
  .has-select-button .input-select-button {
    @apply flex;
  }
  .has-select-button .input-select-button .select-inner {
    @apply rounded-tr-none rounded-br-none w-auto flex-1 pl-2 pr-0 bg-white/90;
  }
  .has-select-button .input-select-button .input {
    @apply rounded-none;
  }
  .has-select-button .input-select-button .button {
    @apply rounded-tl-none rounded-bl-none;
  }
  .field-select {
    @apply relative inline-block w-auto;
  }
  .field-select .select-items {
    @apply p-4 bg-white/40 backdrop-blur-sm border border-slate-50 rounded w-full absolute left-0 -z-1 opacity-0 min-h-[90px] max-h-[200px] overflow-y-scroll transition-all duration-300 ease-in-out;
  }
  .field-select .select-items li {
    @apply p-2 cursor-pointer transition-all duration-300 ease-in-out hover:bg-slate-100/70;
  }
  .field-select .select-items li:not(:last-child) {
    @apply border-b border-slate-200;
  }
  .field-select .select-search:focus ~ .select-items {
    @apply z-20 opacity-100;
  }
  .navbar {
    @apply relative flex items-center justify-between flex-wrap w-full px-8 py-4 shadow-base bg-white;
  }
  .navbar .logo {
    @apply w-9/12;
  }
  .navbar .logo a {
    @apply text-2xl font-bold hover:text-primary-700 transition-all duration-400 ease-in-out;
  }
  .navbar > .menu {
    @apply absolute -z-1 -top-full bg-gray-50 md:bg-transparent opacity-0 left-0 w-full rounded shadow flex-col list-none divide-y-2 divide-slate-100 transition-all duration-500 ease-in-out;
  }
  .navbar > .menu .nav-link {
    @apply no-underline cursor-pointer p-2 block text-gray-700 font-semibold transition-all duration-400 ease-in-out;
  }
  .navbar > .menu .nav-link:hover, .navbar > .menu .nav-link.is-active {
    @apply text-primary-700;
  }
  .navbar > .menu button:not(.is-button-icon), .navbar > .menu .button:not(.is-button-icon),
  .navbar > .menu .field {
    @apply w-[-moz-available] w-[-webkit-fill-available] block m-1;
  }
  .navbar > .menu .has-submenu .submenu {
    @apply bg-slate-100 px-4 divide-y;
  }
  .navbar > .menu .has-submenu .submenu .nav-link {
    @apply font-medium px-6 py-2 whitespace-normal text-sm md:text-base;
  }
  .navbar > .menu .has-submenu:hover .submenu {
    @apply z-1 opacity-100;
  }
  .navbar > .menu.menu-icons {
    @apply left-auto right-0 w-auto space-y-4 p-2;
  }
  .navbar > .menu.is-opened {
    @apply z-1 top-full opacity-100;
  }
  .navbar > .menu.enter-left {
    @apply top-full w-6/12 -left-full;
  }
  .navbar > .menu.enter-left.is-opened {
    @apply z-1 left-0 opacity-100;
  }
  .navbar > .menu.enter-right {
    @apply top-full w-6/12 -right-full left-[initial];
  }
  .navbar > .menu.enter-right.is-opened {
    @apply z-1 right-0 opacity-100;
  }
  .navbar > .menu .dropdown,
  .navbar > .menu .dropdown-wrap {
    @apply w-auto;
  }
  .navbar > .menu ul {
    @apply list-none;
  }
  .navbar .menu-icon {
    @apply text-3xl text-gray-800 transition-all duration-400 ease-in-out;
  }
  .navbar .menu-icon:hover {
    @apply text-primary-500;
  }
  .navbar .burger-menu {
    @apply cursor-pointer ml-auto mr-4 p-2 bg-primary-50 shadow rounded-md transition-all duration-400 ease-in-out;
  }
  .navbar .burger-menu span {
    @apply block bg-primary-700 w-7 h-1 rounded-md transition-all duration-400 ease-in-out;
  }
  .navbar .burger-menu span:not(:last-child) {
    @apply mb-1;
  }
  .navbar .burger-menu span:first-child, .navbar .burger-menu span:last-child {
    @apply transform rotate-0;
  }
  .navbar .burger-menu:hover, .navbar .burger-menu.is-active {
    @apply bg-primary-700;
  }
  .navbar .burger-menu:hover span, .navbar .burger-menu.is-active span {
    @apply bg-white;
  }
  .navbar .burger-menu.is-active span:nth-child(2) {
    @apply opacity-0;
  }
  .navbar .burger-menu.is-active span:first-child {
    @apply rotate-45 translate-y-2;
  }
  .navbar .burger-menu.is-active span:last-child {
    @apply -rotate-45 -translate-y-2;
  }
  .navbar.is-sticky {
    @apply sticky top-0 bg-white/70 backdrop-blur;
  }
  .topbar {
    @apply px-8 py-2 bg-slate-800 flex flex-col flex-wrap lg:flex-row items-center justify-between;
  }
  .topbar .slogan-topbar {
    @apply mb-0 text-sm text-white;
  }
  .topbar .topbar-menu {
    @apply space-x-4 flex flex-wrap;
  }
  .topbar .topbar-menu .topbar-link {
    @apply no-underline text-white text-sm font-medium transition-all duration-400 ease-in-out;
  }
  .topbar .topbar-menu .topbar-link:hover {
    @apply text-secondary-700;
  }
  @screen lg {
    .navbar .logo {
      @apply w-3/12;
    }
    .navbar .menu {
      @apply z-auto relative top-0 opacity-100 w-auto flex flex-row items-center text-right rounded-none shadow-none space-x-4 space-y-0 mt-0 divide-y-0;
    }
    .navbar .menu .has-submenu {
      @apply relative;
    }
    .navbar .menu .has-submenu .submenu {
      @apply shadow-md bg-white divide-y divide-slate-100 absolute -z-1 opacity-0 top-full left-1/2 -translate-x-1/2 text-left transition-all duration-300 ease-in-out;
    }
    .navbar .menu .has-submenu .submenu .nav-link {
      @apply text-base font-medium px-6 py-2;
    }
    .navbar .menu .has-submenu:hover .submenu {
      @apply z-1 opacity-100;
    }
    .navbar .menu.enter-left, .navbar .menu.enter-right {
      @apply relative inset-0 w-auto;
    }
    .navbar .burger-menu {
      @apply hidden;
    }
    .navbar.is-filled .menu .nav-link {
      @apply px-4 py-1 bg-slate-50 rounded;
    }
    .navbar.is-filled .menu .nav-link:hover, .navbar.is-filled .menu .nav-link.is-active {
      @apply bg-primary-500 text-white;
    }
    .navbar.is-filled .menu .has-submenu .submenu {
      @apply my-2 space-y-2;
    }
    .navbar.is-underline .menu .nav-link {
      @apply relative;
    }
    .navbar.is-underline .menu .nav-link::after {
      content: " ";
      width: calc(100% - 10px);
      @apply -translate-x-1/2 left-1/2 rounded block absolute bottom-0 h-1 bg-transparent transition-all duration-400 ease-in-out;
    }
    .navbar.is-underline .menu .nav-link:hover, .navbar.is-underline .menu .nav-link.is-active {
      @apply text-primary-800;
    }
    .navbar.is-underline .menu .nav-link:hover::after, .navbar.is-underline .menu .nav-link.is-active::after {
      @apply bg-primary-800;
    }
    .navbar.is-underline .menu .has-submenu .submenu li:last-child {
      @apply mb-2;
    }
  }
  @screen tablet {
    .navbar .open-sidebar {
      @apply hidden;
    }
  }
  .sidebar {
    @apply flex flex-col h-auto overflow-y-auto text-gray-800 bg-white shadow-base overflow-hidden p-6 transition-all duration-500 ease-in-out;
  }
  .sidebar .sidebar-head {
    @apply flex flex-wrap items-center justify-between;
  }
  .sidebar .sidebar-head h4 {
    @apply font-semibold w-auto;
  }
  .sidebar .sidebar-head .close-sidebar {
    @apply cursor-pointer transform transition-all duration-400 ease-in-out;
  }
  .sidebar .sidebar-head .close-sidebar:hover {
    @apply text-primary-900;
  }
  .sidebar .sidebar-head .close-sidebar.close {
    @apply rotate-180;
  }
  .sidebar h5 {
    @apply mb-3;
  }
  .sidebar .sidebar-nav {
    @apply list-none p-0;
  }
  .sidebar .sidebar-nav .sidebar-item {
    @apply no-underline font-semibold p-1 flex flex-wrap items-center transition-all duration-400 ease-in-out;
  }
  .sidebar .sidebar-nav .sidebar-item .sidebar-icon {
    @apply mr-2;
  }
  .sidebar .sidebar-nav .sidebar-item .sidebar-icon .tooltip {
    @apply hidden;
  }
  .sidebar .sidebar-nav .sidebar-item:hover, .sidebar .sidebar-nav .sidebar-item.is-active {
    @apply text-primary-600;
  }
  .sidebar .sidebar-nav .has-submenu .sidebar-submenu {
    @apply list-none p-0 relative -z-1 scale-y-0 h-0 opacity-0 bg-slate-100 mt-1 rounded-sm transition duration-300 ease-in-out;
  }
  .sidebar .sidebar-nav .has-submenu .sidebar-submenu .sidebar-item {
    @apply font-medium text-base px-4 py-2;
  }
  .sidebar .sidebar-nav .has-submenu .sidebar-submenu .sidebar-item:hover, .sidebar .sidebar-nav .has-submenu .sidebar-submenu .sidebar-item.is-active {
    @apply text-secondary-600;
  }
  .sidebar .sidebar-nav .has-submenu .sidebar-submenu li {
    @apply mb-0;
  }
  .sidebar .sidebar-nav .has-submenu .sidebar-item:focus + .sidebar-submenu,
  .sidebar .sidebar-nav .has-submenu .sidebar-item.is-active + .sidebar-submenu {
    @apply scale-100 h-auto z-1 opacity-100;
  }
  .sidebar .sidebar-nav.semi-transparent .sidebar-item {
    @apply bg-primary-50/20 px-5 py-2 rounded;
  }
  .sidebar .sidebar-nav.semi-transparent .sidebar-item .sidebar-icon {
    @apply mr-2;
  }
  .sidebar .sidebar-nav.semi-transparent .sidebar-item .sidebar-icon .tooltip {
    @apply hidden;
  }
  .sidebar .sidebar-nav.semi-transparent .sidebar-item:hover, .sidebar .sidebar-nav.semi-transparent .sidebar-item.is-active {
    @apply bg-primary-50 text-primary-900;
  }
  .sidebar .sidebar-nav.semi-transparent .sidebar-item.is-active {
    @apply border-l-6 border-primary-500;
  }
  .sidebar .sidebar-nav .sidebar-text {
    @apply w-auto;
  }
  .sidebar .sidebar-nav li:not(:last-child) {
    @apply mb-2;
  }
  .sidebar .sidebar-foot {
    @apply mt-auto pt-4 border-t border-slate-200/50;
  }
  .sidebar .sidebar-divider {
    @apply my-4 border-t border-slate-200/30;
  }
  .sidebar .menu-title {
    @apply mb-2 font-sans text-sm font-medium uppercase text-slate-300;
  }
  .sidebar.rounded-links .sidebar-nav {
    @apply space-y-3;
  }
  .sidebar.rounded-links .sidebar-nav .sidebar-item {
    @apply p-3 text-slate-200 rounded-lg font-medium;
  }
  .sidebar.rounded-links .sidebar-nav .sidebar-item .sidebar-icon {
    @apply mr-2;
  }
  .sidebar.rounded-links .sidebar-nav .sidebar-item .sidebar-icon .tooltip {
    @apply hidden;
  }
  .sidebar.rounded-links .sidebar-nav .sidebar-item:hover, .sidebar.rounded-links .sidebar-nav .sidebar-item.is-active {
    @apply bg-slate-100 text-slate-700;
  }
  .sidebar.rounded-links .sidebar-nav .has-submenu .sidebar-submenu {
    @apply space-y-1  rounded bg-secondary-900 p-1;
  }
  .sidebar.rounded-links .sidebar-nav .has-submenu .sidebar-submenu .sidebar-item {
    @apply bg-transparent font-normal text-base px-4 py-1;
  }
  .sidebar.rounded-links .sidebar-nav .has-submenu .sidebar-submenu .sidebar-item.is-active, .sidebar.rounded-links .sidebar-nav .has-submenu .sidebar-submenu .sidebar-item:hover {
    @apply text-tertiary-600;
  }
  .sidebar.is-primary {
    @apply bg-primary-700;
  }
  .sidebar.is-primary .sidebar-head {
    @apply text-white;
  }
  .sidebar.is-primary .sidebar-nav .sidebar-item {
    @apply text-slate-200;
  }
  .sidebar.is-secondary {
    @apply bg-secondary-700;
  }
  .sidebar.is-secondary .sidebar-head {
    @apply text-white;
  }
  .sidebar.is-secondary .sidebar-nav .sidebar-item {
    @apply text-slate-200;
  }
  .sidebar.is-tertiary {
    @apply bg-tertiary-700;
  }
  .sidebar.is-tertiary .sidebar-head {
    @apply text-white;
  }
  .sidebar.is-tertiary .sidebar-nav .sidebar-item {
    @apply text-slate-200;
  }
  @screen tablet {
    .sidebar.is-closed {
      width: 5%;
      @apply px-2 py-6;
    }
    .sidebar.is-closed .sidebar-head {
      @apply justify-center relative pt-2;
    }
    .sidebar.is-closed h4, .sidebar.is-closed h5 {
      @apply w-0 opacity-0 absolute -z-1 transition-all duration-300 ease-in-out;
    }
    .sidebar.is-closed .sidebar-nav .sidebar-item {
      @apply px-3 justify-center;
    }
    .sidebar.is-closed .sidebar-nav .sidebar-item .sidebar-text {
      @apply w-0 opacity-0 absolute -z-1 transition-all duration-300 ease-in-out;
    }
    .sidebar.is-closed .sidebar-nav .sidebar-item .sidebar-icon {
      @apply mr-0;
    }
    .sidebar.is-closed .sidebar-nav .sidebar-item .sidebar-icon .tooltip {
      @apply inline-block;
    }
  }
  @screen max-md {
    .sidebar {
      @apply absolute w-64 h-full top-0 z-20 -left-100 transition-all duration-500 ease-in-out;
    }
    .sidebar.is-sidebar-open {
      @apply left-0  w-64;
    }
    .sidebar .close-sidebar {
      @apply hidden;
    }
  }
  .table-container {
    -webkit-overflow-scrolling: touch;
    @apply max-w-full overflow-auto overflow-y-hidden rounded-md;
  }
  .table-container.table-shadow {
    @apply rounded shadow-base;
  }
  .table-container::-webkit-scrollbar {
    @apply h-2;
  }
  .table-container::-webkit-scrollbar-track {
    @apply bg-slate-100;
  }
  .table-container::-webkit-scrollbar-thumb {
    @apply rounded bg-slate-500;
  }
  .table-container::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-700;
  }
  /***** Table *****/
  table,
  .table {
    @apply bg-gray-100 w-full max-w-full overflow-hidden;
  }
  table thead,
  .table thead {
    @apply bg-gray-200/70 text-left;
  }
  table thead.has-background,
  .table thead.has-background {
    @apply bg-primary-700;
  }
  table thead.has-background th,
  .table thead.has-background th {
    @apply text-white;
  }
  table tbody.tbody tr,
  .table tbody.tbody tr {
    @apply bg-primary-100 bg-opacity-30;
  }
  table tbody.tbody tr:nth-child(even),
  .table tbody.tbody tr:nth-child(even) {
    @apply bg-primary-200 bg-opacity-30;
  }
  table tbody.tbody tr.tr-link,
  .table tbody.tbody tr.tr-link {
    @apply cursor-pointer transition-all duration-400 ease-in-out;
  }
  table tbody.tbody tr.tr-link:hover,
  .table tbody.tbody tr.tr-link:hover {
    @apply bg-opacity-60;
  }
  table.is-bordered,
  .table.is-bordered {
    @apply border border-gray-200;
  }
  table.is-bordered thead,
  .table.is-bordered thead {
    @apply border-b border-gray-200;
  }
  table.is-bordered tr:not(:last-child),
  .table.is-bordered tr:not(:last-child) {
    @apply border-b border-gray-200;
  }
  table.is-bordered td:not(:last-child), table.is-bordered th:not(:last-child),
  .table.is-bordered td:not(:last-child),
  .table.is-bordered th:not(:last-child) {
    @apply border-r border-gray-200;
  }
  table.is-bottom-bordered thead,
  table.is-bottom-bordered tr:not(:last-child),
  .table.is-bottom-bordered thead,
  .table.is-bottom-bordered tr:not(:last-child) {
    @apply border-b border-gray-200;
  }
  table.is-smooth,
  .table.is-smooth {
    @apply bg-slate-50;
  }
  table.is-smooth thead,
  .table.is-smooth thead {
    @apply bg-sky-100;
  }
  table.is-smooth thead,
  table.is-smooth tr:not(:last-child),
  .table.is-smooth thead,
  .table.is-smooth tr:not(:last-child) {
    @apply border-b border-slate-200/50;
  }
  table tr,
  .table tr {
    @apply outline-none border-0;
  }
  table tr:nth-child(2n),
  .table tr:nth-child(2n) {
    @apply bg-transparent;
  }
  table td, table th,
  .table td,
  .table th {
    @apply px-5 py-2 whitespace-nowrap border-0;
  }
  .question {
    @apply bg-white overflow-hidden rounded;
  }
  .question summary {
    @apply text-xl font-medium flex items-center justify-between px-10 py-6 shadow-sm cursor-pointer hover:bg-primary-700/5 transition duration-400 ease-in-out list-none;
  }
  .question summary i, .question summary svg {
    @apply h-6 w-6 transform transition duration-[400] ease-in-out;
  }
  .question .summary {
    @apply border-l-4 border-primary-700 p-8 bg-slate-100/70 text-gray-700;
  }
  .question[open] summary i, .question[open] summary svg {
    @apply rotate-180;
  }
  .accordions.simple-accordions {
    @apply divide-slate-100 divide-y-2;
  }
  .accordions.simple-accordions .accordion {
    @apply bg-transparent rounded-none;
  }
  .accordions.simple-accordions .accordion .accordion-head {
    @apply border-0 transition-all duration-300 ease-in-out;
  }
  .accordions.simple-accordions .accordion .accordion-head:focus, .accordions.simple-accordions .accordion .accordion-head:hover {
    @apply bg-white;
  }
  .accordions.simple-accordions .accordion .accordion-content {
    @apply border-0 bg-slate-50;
  }
  .accordions.light-accordions {
    @apply divide-y;
  }
  .accordions.light-accordions .accordion {
    @apply bg-transparent rounded-none;
  }
  .accordions.light-accordions .accordion .accordion-head {
    @apply border-0 justify-start space-x-2;
  }
  .accordions.light-accordions .accordion .accordion-head .open {
    @apply flex justify-center items-center p-0 w-8 h-8 rounded-full;
  }
  .accordions.light-accordions .accordion .accordion-head:focus, .accordions.light-accordions .accordion .accordion-head:hover {
    @apply bg-transparent;
  }
  .accordions.light-accordions .accordion .accordion-head:focus .open, .accordions.light-accordions .accordion .accordion-head:hover .open {
    @apply bg-white;
  }
  .accordions.light-accordions .accordion .accordion-content {
    @apply border-0 bg-transparent;
  }
  .accordions.rounded-accordions {
    @apply space-y-2;
  }
  .accordions.rounded-accordions .accordion {
    @apply bg-transparent;
  }
  .accordions.rounded-accordions .accordion .accordion-head {
    @apply border-0 bg-white rounded-full;
  }
  .accordions.rounded-accordions .accordion .accordion-head:focus, .accordions.rounded-accordions .accordion .accordion-head:hover {
    @apply bg-slate-50;
  }
  .accordions.rounded-accordions .accordion .accordion-content {
    @apply bg-gray-50 rounded;
  }
  .accordion {
    @apply bg-white rounded-md overflow-hidden;
  }
  .accordion .accordion-head {
    @apply gap-x-1 w-full outline-none border-b cursor-pointer border-gray-300/25 px-6 py-3 flex flex-wrap justify-between items-center;
  }
  .accordion .accordion-head .title {
    @apply text-left font-semibold basis-10/12 w-10/12;
  }
  .accordion .accordion-head .open, .accordion .accordion-head .close {
    @apply basis-1/12  w-1/12 transform px-2 cursor-pointer rounded transition-all duration-500 ease-in-out;
  }
  .accordion .accordion-head .open.rotate, .accordion .accordion-head .close.rotate {
    @apply rotate-180;
  }
  .accordion .accordion-head .open {
    @apply text-2xl;
  }
  .accordion.focused .accordion-head:focus {
    @apply bg-primary-50/10;
  }
  .accordion.focused .accordion-head:focus + .accordion-content {
    @apply opacity-100 h-full py-6 z-10;
  }
  .accordion.focused .accordion-head:focus .open {
    @apply transform rotate-180;
  }
  .accordion .accordion-content {
    @apply relative bg-gray-100/50 px-6 py-0 opacity-0 border-l-4 border-primary-700 transition-all duration-300 ease-in-out;
    z-index: -1;
    height: 0px;
  }
  .accordion .accordion-content.is-active {
    @apply opacity-100 h-full py-6 z-10;
  }
  .alert {
    @apply overflow-hidden rounded bg-gray-200 p-5 shadow-alert relative flex;
  }
  .alert .icon {
    @apply w-8 md:w-12 basis-8 md:basis-12;
  }
  .alert p {
    @apply mb-0 ml-2;
  }
  .alert.is-primary {
    @apply bg-primary-600 text-white;
  }
  .alert.is-secondary {
    @apply bg-secondary-600 text-white;
  }
  .alert.is-tertiary {
    @apply bg-tertiary-600 text-white;
  }
  .alert.is-danger {
    @apply bg-red-500 text-white;
  }
  .alert.is-warning {
    @apply bg-yellow-400 text-gray-700;
  }
  .alert.is-success {
    @apply bg-green-500 text-white;
  }
  .alert.is-info {
    @apply bg-sky-500 text-white;
  }
  .alert.is-flat {
    @apply rounded-none;
  }
  .alert.is-flat .close-alert {
    @apply rounded-none;
  }
  .alert.is-full-rounded {
    @apply rounded-2xl;
  }
  .alert.is-full-rounded .close-alert {
    @apply rounded-2xl;
  }
  .alert.is-semi-transparent {
    @apply bg-opacity-80;
  }
  .alert.has-left-border {
    @apply border-l-4 border-gray-400;
  }
  .alert.has-left-border.is-primary {
    @apply border-primary-700;
  }
  .alert.has-left-border.is-secondary {
    @apply border-secondary-700;
  }
  .alert.has-left-border.is-tertiary {
    @apply border-tertiary-700;
  }
  .alert.has-left-border.is-danger {
    @apply border-red-700;
  }
  .alert.has-left-border.is-warning {
    @apply border-yellow-600;
  }
  .alert.has-left-border.is-success {
    @apply border-green-700;
  }
  .alert.has-left-border.is-info {
    @apply border-sky-700;
  }
  .alert .close-alert {
    @apply inline-block w-6 h-6 cursor-pointer rounded p-1 absolute right-4 top-4 z-10 transition-all duration-400 ease-in-out;
  }
  .alert .close-alert svg {
    @apply block;
  }
  .alert .close-alert:hover {
    @apply bg-red-700 text-white;
  }
  .alert .close-button {
    @apply flex items-center justify-center w-10 bg-gray-300 hover:bg-gray-400 text-gray-600 ml-auto -my-5 -mr-5 transition-all duration-200 ease-in-out;
  }
  .alert .close-button svg,
  .alert .close-button i {
    @apply w-6 h-6;
  }
  .alert.is-primary .close-button {
    @apply bg-primary-700 hover:bg-primary-800 text-white;
  }
  .alert.is-secondary .close-button {
    @apply bg-secondary-700 hover:bg-secondary-800 text-white;
  }
  .alert.is-tertiary .close-button {
    @apply bg-tertiary-700 hover:bg-tertiary-800 text-white;
  }
  .alert.is-danger .close-button {
    @apply bg-red-600 hover:bg-red-700 text-white;
  }
  .alert.is-warning .close-button {
    @apply bg-yellow-500 hover:bg-yellow-600 text-white;
  }
  .alert.is-success .close-button {
    @apply bg-green-600 hover:bg-green-700 text-white;
  }
  .alert.is-info .close-button {
    @apply bg-sky-600 hover:bg-sky-700 text-white;
  }
  .state {
    @apply inline-block px-4 py-1 font-normal bg-gray-200 rounded;
  }
  .state.is-primary {
    @apply bg-primary-700 text-white;
  }
  .state.is-primary.semi-transparent {
    @apply bg-opacity-20 text-primary-700;
  }
  .state.is-secondary {
    @apply bg-secondary-700 text-white;
  }
  .state.is-secondary.semi-transparent {
    @apply bg-opacity-20 text-secondary-700;
  }
  .state.is-tertiary {
    @apply bg-tertiary-700 text-white;
  }
  .state.is-tertiary.semi-transparent {
    @apply bg-opacity-20 text-tertiary-700;
  }
  .state.is-danger {
    @apply bg-red-500 text-white;
  }
  .state.is-danger.semi-transparent {
    @apply bg-opacity-20 text-red-600;
  }
  .state.is-warning {
    @apply bg-yellow-400 text-white;
  }
  .state.is-warning.semi-transparent {
    @apply bg-opacity-20 text-yellow-600;
  }
  .state.is-success {
    @apply bg-green-500 text-white;
  }
  .state.is-success.semi-transparent {
    @apply bg-opacity-20 text-green-600;
  }
  .state.is-info {
    @apply bg-sky-500 text-white;
  }
  .state.is-info.semi-transparent {
    @apply bg-opacity-20 text-sky-600;
  }
  .state.is-white {
    @apply bg-white text-gray-700;
  }
  .state.is-white.semi-transparent {
    @apply bg-opacity-20;
  }
  .state.is-gray {
    @apply bg-gray-300 text-gray-700;
  }
  .state.is-gray.semi-transparent {
    @apply bg-opacity-20;
  }
  .state.is-dark {
    @apply bg-black text-white;
  }
  .state.is-dark.semi-transparent {
    @apply bg-opacity-20 text-gray-700;
  }
  .state.is-outlined {
    @apply bg-transparent text-gray-600 border-2 border-gray-600;
  }
  .state.is-primary-outline {
    @apply text-primary-700 border-2 border-primary-700 bg-transparent;
  }
  .state.is-secondary-outline {
    @apply text-secondary-700 border-2 border-secondary-700 bg-transparent;
  }
  .state.is-tertiary-outline {
    @apply text-tertiary-700 border-2 border-tertiary-700 bg-transparent;
  }
  .state.is-danger-outline {
    @apply text-red-500 border-2 border-red-500 bg-transparent;
  }
  .state.is-warning-outline {
    @apply text-yellow-400 border-2 border-yellow-400 bg-transparent;
  }
  .state.is-success-outline {
    @apply text-green-500 border-2 border-green-500 bg-transparent;
  }
  .state.is-info-outline {
    @apply text-sky-500 border-2 border-sky-500 bg-transparent;
  }
  .state.is-white-outline {
    @apply text-white border-2 border-white bg-transparent;
  }
  .state.is-gray-outline {
    @apply text-gray-400 border-2 border-gray-400 bg-transparent;
  }
  .state.is-dark-outline {
    @apply text-black border-2 border-black bg-transparent;
  }
  .state.has-icon {
    @apply inline-flex flex-wrap items-center;
  }
  .state.has-icon span {
    @apply flex items-center;
  }
  .state .icon {
    @apply ml-1 w-5 h-5;
  }
  .state.is-flat {
    @apply rounded-none;
  }
  .state.is-circle {
    @apply rounded-full;
  }
  .state.is-small {
    @apply text-sm  px-2;
  }
  .state.is-large {
    @apply text-lg  px-6 py-2;
  }
  .breadcrumb {
    @apply w-fit;
  }
  .breadcrumb ul {
    @apply list-none p-0 m-0 flex flex-wrap items-center space-x-2;
  }
  .breadcrumb ul li:not(:first-child)::before {
    @apply content-["/"] mr-2 inline-block text-gray-400;
  }
  .breadcrumb ul li .breadcrumb-link {
    @apply text-sky-500 hover:text-sky-600 transition-all duration-300 ease-in-out;
  }
  .breadcrumb ul li .breadcrumb-link.is-active {
    @apply text-gray-500 pointer-events-none;
  }
  .breadcrumb.has-dots ul {
    @apply list-disc space-x-6;
  }
  .breadcrumb.has-dots ul li:not(:first-child) {
    @apply pl-1;
  }
  .breadcrumb.has-dots ul li::marker {
    @apply text-gray-400;
  }
  .breadcrumb.has-dots ul li:first-child {
    @apply list-none;
  }
  .breadcrumb.has-dots ul li::before {
    @apply hidden;
  }
  .breadcrumb.has-arrows li:not(:first-child)::before {
    @apply content-[">"];
  }
  .button {
    @apply bg-gray-200 hover:bg-gray-300 border-2 border-gray-200 border-solid hover:border-gray-300 rounded px-5 py-2 text-gray-700 inline-block cursor-pointer transition-all duration-400 ease-in-out;
  }
  .button.button-primary {
    @apply bg-primary-700 border-primary-700 text-white;
  }
  .button.button-primary:hover {
    @apply bg-primary-800 border-primary-800;
  }
  .button.button-primary.semi-transparent {
    @apply bg-primary-500 border-primary-300 bg-opacity-20 border-opacity-20 text-primary-700;
  }
  .button.button-primary.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-primary.link {
    @apply bg-transparent border-transparent text-primary-700;
  }
  .button.button-primary.link:hover {
    @apply bg-primary-700 border-primary-700 text-white;
  }
  .button.button-primary-outline {
    @apply border-primary-700 text-primary-700 bg-transparent;
  }
  .button.button-primary-outline:hover {
    @apply bg-primary-700 text-white;
  }
  .button.button-primary-flat {
    @apply bg-primary-700 border-primary-700 text-white rounded-none;
  }
  .button.button-primary-flat:hover {
    @apply bg-primary-700;
  }
  .button.button-primary-flat.semi-transparent {
    @apply bg-primary-500 border-primary-300 bg-opacity-20 border-opacity-20 text-primary-700;
  }
  .button.button-primary-flat.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-primary-flat.link {
    @apply bg-transparent border-transparent text-primary-700;
  }
  .button.button-primary-flat.link:hover {
    @apply bg-primary-700 border-primary-700 text-white;
  }
  .button.button-primary-flat-outline {
    @apply border-primary-700 text-primary-700 bg-transparent rounded-none;
  }
  .button.button-primary-flat-outline:hover {
    @apply bg-primary-700 text-white;
  }
  .button.button-primary-rounded {
    @apply bg-primary-700 border-primary-700 rounded-3xl text-white;
  }
  .button.button-primary-rounded:hover {
    @apply bg-primary-800 border-primary-800;
  }
  .button.button-primary-rounded.semi-transparent {
    @apply bg-primary-500 border-primary-300 bg-opacity-20 border-opacity-20 text-primary-700;
  }
  .button.button-primary-rounded.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-primary-rounded.link {
    @apply bg-transparent border-transparent text-primary-700;
  }
  .button.button-primary-rounded.link:hover {
    @apply bg-primary-700 border-primary-700 text-white;
  }
  .button.button-primary-rounded-outline {
    @apply border-primary-700 text-primary-700 bg-transparent rounded-3xl;
  }
  .button.button-primary-rounded-outline:hover {
    @apply bg-primary-700 border-primary-700 text-white;
  }
  .button.button-secondary {
    @apply bg-secondary-700 border-secondary-700 text-white;
  }
  .button.button-secondary:hover {
    @apply bg-secondary-800 border-secondary-800;
  }
  .button.button-secondary.semi-transparent {
    @apply bg-secondary-500 border-secondary-300 bg-opacity-20 border-opacity-20 text-secondary-700;
  }
  .button.button-secondary.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-secondary.link {
    @apply bg-transparent border-transparent text-secondary-700;
  }
  .button.button-secondary.link:hover {
    @apply bg-secondary-700 border-secondary-700 text-white;
  }
  .button.button-secondary-outline {
    @apply border-secondary-700 text-secondary-700 bg-transparent;
  }
  .button.button-secondary-outline:hover {
    @apply bg-secondary-700 text-white;
  }
  .button.button-secondary-flat {
    @apply bg-secondary-700 border-secondary-700 text-white rounded-none;
  }
  .button.button-secondary-flat:hover {
    @apply bg-secondary-800 border-secondary-800;
  }
  .button.button-secondary-flat.semi-transparent {
    @apply bg-secondary-500 border-secondary-300 bg-opacity-20 border-opacity-20 text-secondary-700;
  }
  .button.button-secondary-flat.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-secondary-flat.link {
    @apply bg-transparent border-transparent text-secondary-700;
  }
  .button.button-secondary-flat.link:hover {
    @apply bg-secondary-700 border-secondary-700 text-white;
  }
  .button.button-secondary-flat-outline {
    @apply border-secondary-700 text-secondary-700 bg-transparent rounded-none;
  }
  .button.button-secondary-flat-outline:hover {
    @apply bg-secondary-700 text-white;
  }
  .button.button-secondary-rounded {
    @apply bg-secondary-700 border-secondary-700 rounded-3xl text-white;
  }
  .button.button-secondary-rounded:hover {
    @apply bg-secondary-800 border-secondary-800;
  }
  .button.button-secondary-rounded.semi-transparent {
    @apply bg-secondary-500 border-secondary-300 bg-opacity-20 border-opacity-20 text-secondary-700;
  }
  .button.button-secondary-rounded.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-secondary-rounded.link {
    @apply bg-transparent border-transparent text-secondary-700;
  }
  .button.button-secondary-rounded.link:hover {
    @apply bg-secondary-700 border-secondary-700 text-white;
  }
  .button.button-secondary-rounded-outline {
    @apply border-secondary-700 text-secondary-700 bg-transparent rounded-3xl;
  }
  .button.button-secondary-rounded-outline:hover {
    @apply bg-secondary-700 border-secondary-700 text-white;
  }
  .button.button-tertiary {
    @apply bg-tertiary-700 border-tertiary-700 text-white;
  }
  .button.button-tertiary:hover {
    @apply bg-tertiary-800 border-tertiary-800;
  }
  .button.button-tertiary.semi-transparent {
    @apply bg-tertiary-500 border-tertiary-300 bg-opacity-20 border-opacity-20 text-tertiary-700;
  }
  .button.button-tertiary.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-tertiary.link {
    @apply bg-transparent border-transparent text-tertiary-700;
  }
  .button.button-tertiary.link:hover {
    @apply bg-tertiary-700 border-tertiary-700 text-white;
  }
  .button.button-tertiary-outline {
    @apply border-tertiary-700 text-tertiary-700 bg-transparent;
  }
  .button.button-tertiary-outline:hover {
    @apply bg-tertiary-700 text-white;
  }
  .button.button-tertiary-flat {
    @apply bg-tertiary-700 border-tertiary-700 text-white rounded-none;
  }
  .button.button-tertiary-flat:hover {
    @apply bg-tertiary-800 border-tertiary-800;
  }
  .button.button-tertiary-flat.semi-transparent {
    @apply bg-tertiary-500 border-tertiary-300 bg-opacity-20 border-opacity-20 text-tertiary-700;
  }
  .button.button-tertiary-flat.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-tertiary-flat.link {
    @apply bg-transparent border-transparent text-tertiary-700;
  }
  .button.button-tertiary-flat.link:hover {
    @apply bg-tertiary-700 border-tertiary-700 text-white;
  }
  .button.button-tertiary-flat-outline {
    @apply border-tertiary-700 text-tertiary-700 bg-transparent rounded-none;
  }
  .button.button-tertiary-flat-outline:hover {
    @apply bg-tertiary-700 text-white;
  }
  .button.button-tertiary-rounded {
    @apply bg-tertiary-700 border-tertiary-700 rounded-3xl text-white;
  }
  .button.button-tertiary-rounded:hover {
    @apply bg-tertiary-800 border-tertiary-800;
  }
  .button.button-tertiary-rounded.semi-transparent {
    @apply bg-tertiary-500 border-tertiary-300 bg-opacity-20 border-opacity-20 text-tertiary-700;
  }
  .button.button-tertiary-rounded.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-tertiary-rounded.link {
    @apply bg-transparent border-transparent text-tertiary-700;
  }
  .button.button-tertiary-rounded.link:hover {
    @apply bg-tertiary-700 border-tertiary-700 text-white;
  }
  .button.button-tertiary-rounded-outline {
    @apply border-tertiary-700 text-tertiary-700 bg-transparent rounded-3xl;
  }
  .button.button-tertiary-rounded-outline:hover {
    @apply bg-tertiary-700 border-tertiary-700 text-white;
  }
  .button.button-danger {
    @apply bg-red-500 border-red-500 text-white;
  }
  .button.button-danger:hover {
    @apply bg-red-600 border-red-600;
  }
  .button.button-danger.semi-transparent {
    @apply bg-red-500 border-red-300 bg-opacity-20 border-opacity-20 text-red-700;
  }
  .button.button-danger.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-danger.link {
    @apply bg-transparent border-transparent text-red-500;
  }
  .button.button-danger.link:hover {
    @apply bg-red-500 border-red-500 text-white;
  }
  .button.button-danger-outline {
    @apply border-red-500 text-red-500 bg-transparent;
  }
  .button.button-danger-outline:hover {
    @apply bg-red-500 text-white;
  }
  .button.button-danger-flat {
    @apply bg-red-500 border-red-500 text-white rounded-none;
  }
  .button.button-danger-flat:hover {
    @apply bg-red-600 border-red-600;
  }
  .button.button-danger-flat.semi-transparent {
    @apply bg-red-500 border-red-300 bg-opacity-20 border-opacity-20 text-red-700;
  }
  .button.button-danger-flat.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-danger-flat.link {
    @apply bg-transparent border-transparent text-red-500;
  }
  .button.button-danger-flat.link:hover {
    @apply bg-red-500 border-red-500 text-white;
  }
  .button.button-danger-flat-outline {
    @apply border-red-500 text-red-500 bg-transparent rounded-none;
  }
  .button.button-danger-flat-outline:hover {
    @apply bg-red-500 text-white;
  }
  .button.button-danger-rounded {
    @apply bg-red-500 border-red-500 rounded-3xl text-white;
  }
  .button.button-danger-rounded:hover {
    @apply bg-red-600 border-red-600;
  }
  .button.button-danger-rounded.semi-transparent {
    @apply bg-red-500 border-red-300 bg-opacity-20 border-opacity-20 text-red-700;
  }
  .button.button-danger-rounded.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-danger-rounded.link {
    @apply bg-transparent border-transparent text-red-500;
  }
  .button.button-danger-rounded.link:hover {
    @apply bg-red-500 border-red-500 text-white;
  }
  .button.button-danger-rounded-outline {
    @apply border-red-500 text-red-500 bg-transparent rounded-3xl;
  }
  .button.button-danger-rounded-outline:hover {
    @apply bg-red-500 border-red-500 text-white;
  }
  .button.button-warning {
    @apply bg-yellow-400 border-yellow-400 text-white;
  }
  .button.button-warning:hover {
    @apply bg-yellow-500 border-yellow-500;
  }
  .button.button-warning.semi-transparent {
    @apply bg-yellow-500 border-yellow-300 bg-opacity-20 border-opacity-20 text-yellow-700;
  }
  .button.button-warning.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-warning.link {
    @apply bg-transparent border-transparent text-yellow-500;
  }
  .button.button-warning.link:hover {
    @apply bg-yellow-500 border-yellow-500 text-white;
  }
  .button.button-warning-outline {
    @apply border-yellow-400 text-yellow-400 bg-transparent;
  }
  .button.button-warning-outline:hover {
    @apply bg-yellow-400 text-white;
  }
  .button.button-warning-flat {
    @apply bg-yellow-400 border-yellow-400 text-white rounded-none;
  }
  .button.button-warning-flat:hover {
    @apply bg-yellow-500 border-yellow-500;
  }
  .button.button-warning-flat.semi-transparent {
    @apply bg-yellow-500 border-yellow-300 bg-opacity-20 border-opacity-20 text-yellow-700;
  }
  .button.button-warning-flat.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-warning-flat.link {
    @apply bg-transparent border-transparent text-yellow-500;
  }
  .button.button-warning-flat.link:hover {
    @apply bg-yellow-500 border-yellow-500 text-white;
  }
  .button.button-warning-flat-outline {
    @apply border-yellow-400 text-yellow-400 bg-transparent rounded-none;
  }
  .button.button-warning-flat-outline:hover {
    @apply bg-yellow-400 text-white;
  }
  .button.button-warning-rounded {
    @apply bg-yellow-400 border-yellow-400 rounded-3xl text-white;
  }
  .button.button-warning-rounded:hover {
    @apply bg-yellow-500 border-yellow-500;
  }
  .button.button-warning-rounded.semi-transparent {
    @apply bg-yellow-500 border-yellow-300 bg-opacity-20 border-opacity-20 text-yellow-700;
  }
  .button.button-warning-rounded.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-warning-rounded.link {
    @apply bg-transparent border-transparent text-yellow-500;
  }
  .button.button-warning-rounded.link:hover {
    @apply bg-yellow-500 border-yellow-500 text-white;
  }
  .button.button-warning-rounded-outline {
    @apply border-yellow-400 text-yellow-400 bg-transparent rounded-3xl;
  }
  .button.button-warning-rounded-outline:hover {
    @apply bg-yellow-400 border-yellow-400 text-white;
  }
  .button.button-success {
    @apply bg-green-500 border-green-500 text-white;
  }
  .button.button-success:hover {
    @apply bg-green-600 border-green-600;
  }
  .button.button-success.semi-transparent {
    @apply bg-green-500 border-green-300 bg-opacity-20 border-opacity-20 text-green-700;
  }
  .button.button-success.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-success.link {
    @apply bg-transparent border-transparent text-green-500;
  }
  .button.button-success.link:hover {
    @apply bg-green-500 border-green-500 text-white;
  }
  .button.button-success-outline {
    @apply border-green-500 text-green-500 bg-transparent;
  }
  .button.button-success-outline:hover {
    @apply bg-green-500 text-white;
  }
  .button.button-success-flat {
    @apply bg-green-500 border-green-500 text-white rounded-none;
  }
  .button.button-success-flat:hover {
    @apply bg-green-600 border-green-600;
  }
  .button.button-success-flat.semi-transparent {
    @apply bg-green-500 border-green-300 bg-opacity-20 border-opacity-20 text-green-700;
  }
  .button.button-success-flat.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-success-flat.link {
    @apply bg-transparent border-transparent text-green-500;
  }
  .button.button-success-flat.link:hover {
    @apply bg-green-500 border-green-500 text-white;
  }
  .button.button-success-flat-outline {
    @apply border-green-500 text-green-500 bg-transparent rounded-none;
  }
  .button.button-success-flat-outline:hover {
    @apply bg-green-500 text-white;
  }
  .button.button-success-rounded {
    @apply bg-green-500 border-green-500 rounded-3xl text-white;
  }
  .button.button-success-rounded:hover {
    @apply bg-green-500 border-green-500;
  }
  .button.button-success-rounded.semi-transparent {
    @apply bg-green-500 border-green-300 bg-opacity-20 border-opacity-20 text-green-700;
  }
  .button.button-success-rounded.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-success-rounded.link {
    @apply bg-transparent border-transparent text-green-500;
  }
  .button.button-success-rounded.link:hover {
    @apply bg-green-500 border-green-500 text-white;
  }
  .button.button-success-rounded-outline {
    @apply border-green-500 text-green-500 bg-transparent rounded-3xl;
  }
  .button.button-success-rounded-outline:hover {
    @apply bg-green-500 border-green-500 text-white;
  }
  .button.button-info {
    @apply bg-blue-500 border-blue-500 text-white;
  }
  .button.button-info:hover {
    @apply bg-blue-600 border-blue-600;
  }
  .button.button-info.semi-transparent {
    @apply bg-blue-500 border-blue-300 bg-opacity-20 border-opacity-20 text-blue-700;
  }
  .button.button-info.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-info.link {
    @apply bg-transparent border-transparent text-blue-500;
  }
  .button.button-info.link:hover {
    @apply bg-blue-500 border-blue-500 text-white;
  }
  .button.button-info-outline {
    @apply border-blue-500 text-blue-500 bg-transparent;
  }
  .button.button-info-outline:hover {
    @apply bg-blue-500 text-white;
  }
  .button.button-info-flat {
    @apply bg-blue-500 border-blue-500 text-white rounded-none;
  }
  .button.button-info-flat:hover {
    @apply bg-blue-600 border-blue-600;
  }
  .button.button-info-flat.semi-transparent {
    @apply bg-blue-500 border-blue-300 bg-opacity-20 border-opacity-20 text-blue-700;
  }
  .button.button-info-flat.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-info-flat.link {
    @apply bg-transparent border-transparent text-blue-500;
  }
  .button.button-info-flat.link:hover {
    @apply bg-blue-500 border-blue-500 text-white;
  }
  .button.button-info-flat-outline {
    @apply border-blue-500 text-blue-500 bg-transparent rounded-none;
  }
  .button.button-info-flat-outline:hover {
    @apply bg-blue-500 text-white;
  }
  .button.button-info-rounded {
    @apply bg-blue-500 border-blue-500 rounded-3xl text-white;
  }
  .button.button-info-rounded:hover {
    @apply bg-blue-600 border-blue-600;
  }
  .button.button-info-rounded.semi-transparent {
    @apply bg-blue-500 border-blue-300 bg-opacity-20 border-opacity-20 text-blue-700;
  }
  .button.button-info-rounded.semi-transparent:hover {
    @apply bg-opacity-50 border-opacity-50;
  }
  .button.button-info-rounded.link {
    @apply bg-transparent border-transparent text-blue-500;
  }
  .button.button-info-rounded.link:hover {
    @apply bg-blue-500 border-blue-500 text-white;
  }
  .button.button-info-rounded-outline {
    @apply border-blue-500 text-blue-500 bg-transparent rounded-3xl;
  }
  .button.button-info-rounded-outline:hover {
    @apply bg-blue-500 border-blue-500 text-white;
  }
  .button.button-gray {
    @apply bg-gray-500 border-gray-500 text-white;
  }
  .button.button-gray:hover {
    @apply bg-gray-700 border-gray-700;
  }
  .button.button-gray.semi-transparent {
    @apply bg-gray-400 border-gray-400 bg-opacity-20 border-opacity-20 text-gray-700;
  }
  .button.button-gray.semi-transparent:hover {
    @apply bg-opacity-70 border-opacity-70;
  }
  .button.button-gray.link {
    @apply bg-transparent border-transparent text-gray-700;
  }
  .button.button-gray.link:hover {
    @apply bg-gray-700 border-gray-700 text-white;
  }
  .button.button-gray-outline {
    @apply border-gray-500 text-gray-500 bg-transparent;
  }
  .button.button-gray-outline:hover {
    @apply bg-gray-700 border-gray-700 text-white;
  }
  .button.button-gray-flat {
    @apply bg-gray-500 border-gray-500 text-white rounded-none;
  }
  .button.button-gray-flat:hover {
    @apply bg-gray-700 border-gray-700;
  }
  .button.button-gray-flat.semi-transparent {
    @apply bg-gray-400 border-gray-400 bg-opacity-20 border-opacity-20 text-gray-700;
  }
  .button.button-gray-flat.semi-transparent:hover {
    @apply bg-opacity-70 border-opacity-70;
  }
  .button.button-gray-flat.link {
    @apply bg-transparent border-transparent text-gray-700;
  }
  .button.button-gray-flat.link:hover {
    @apply bg-gray-700 border-gray-700 text-white;
  }
  .button.button-gray-flat-outline {
    @apply border-gray-500 text-gray-500 bg-transparent rounded-none;
  }
  .button.button-gray-flat-outline:hover {
    @apply bg-gray-700 border-gray-700 text-white;
  }
  .button.button-gray-rounded {
    @apply bg-gray-500 border-gray-500 rounded-3xl text-white;
  }
  .button.button-gray-rounded:hover {
    @apply bg-gray-700 border-gray-700;
  }
  .button.button-gray-rounded.semi-transparent {
    @apply bg-gray-400 border-gray-400 bg-opacity-20 border-opacity-20 text-gray-700;
  }
  .button.button-gray-rounded.semi-transparent:hover {
    @apply bg-opacity-70 border-opacity-70;
  }
  .button.button-gray-rounded.link {
    @apply bg-transparent border-transparent text-gray-700;
  }
  .button.button-gray-rounded.link:hover {
    @apply bg-gray-700 border-gray-700 text-white;
  }
  .button.button-gray-rounded-outline {
    @apply border-gray-500 text-gray-500 bg-transparent rounded-3xl;
  }
  .button.button-gray-rounded-outline:hover {
    @apply bg-gray-700 border-gray-700 text-white;
  }
  .button.button-dark {
    @apply bg-zinc-700 border-zinc-700 text-white;
  }
  .button.button-dark:hover {
    @apply bg-zinc-900 border-zinc-900;
  }
  .button.button-dark.semi-transparent {
    @apply bg-zinc-500 border-zinc-500 bg-opacity-20 border-opacity-20 text-zinc-900;
  }
  .button.button-dark.semi-transparent:hover {
    @apply bg-opacity-70 border-opacity-70;
  }
  .button.button-dark.link {
    @apply bg-transparent border-transparent text-zinc-900;
  }
  .button.button-dark.link:hover {
    @apply bg-zinc-900 border-zinc-900 text-white;
  }
  .button.button-dark-outline {
    @apply border-zinc-700 text-zinc-700 bg-transparent;
  }
  .button.button-dark-outline:hover {
    @apply bg-zinc-900 border-zinc-900 text-white;
  }
  .button.button-dark-flat {
    @apply bg-zinc-700 border-zinc-700 text-white rounded-none;
  }
  .button.button-dark-flat:hover {
    @apply bg-zinc-900 border-zinc-900;
  }
  .button.button-dark-flat.semi-transparent {
    @apply bg-zinc-500 border-zinc-500 bg-opacity-20 border-opacity-20 text-zinc-900;
  }
  .button.button-dark-flat.semi-transparent:hover {
    @apply bg-opacity-70 border-opacity-70;
  }
  .button.button-dark-flat.link {
    @apply bg-transparent border-transparent text-zinc-900;
  }
  .button.button-dark-flat.link:hover {
    @apply bg-zinc-900 border-zinc-900 text-white;
  }
  .button.button-dark-flat-outline {
    @apply border-zinc-700 text-zinc-700 bg-transparent rounded-none;
  }
  .button.button-dark-flat-outline:hover {
    @apply bg-zinc-900 border-zinc-900 text-white;
  }
  .button.button-dark-rounded {
    @apply bg-zinc-700 border-zinc-700 rounded-3xl text-white;
  }
  .button.button-dark-rounded:hover {
    @apply bg-zinc-900 border-zinc-900;
  }
  .button.button-dark-rounded.semi-transparent {
    @apply bg-zinc-500 border-zinc-500 bg-opacity-20 border-opacity-20 text-zinc-900;
  }
  .button.button-dark-rounded.semi-transparent:hover {
    @apply bg-opacity-70 border-opacity-70;
  }
  .button.button-dark-rounded.link {
    @apply bg-transparent border-transparent text-zinc-900;
  }
  .button.button-dark-rounded.link:hover {
    @apply bg-zinc-900 border-zinc-900 text-white;
  }
  .button.button-dark-rounded-outline {
    @apply border-zinc-700 text-zinc-700 bg-transparent rounded-3xl;
  }
  .button.button-dark-rounded-outline:hover {
    @apply bg-zinc-900 border-zinc-900 text-white;
  }
  .button.is-small {
    @apply text-sm px-3 py-1;
  }
  .button.is-large {
    @apply text-xl px-6 py-3;
  }
  .button.has-icon svg {
    @apply w-5 h-5 inline-block;
  }
  .button.is-button-icon {
    @apply inline-flex items-center justify-center p-1 w-8 h-8 rounded-full leading-none;
  }
  .button.is-button-icon.is-small {
    @apply w-6 h-6 text-sm;
  }
  .button.is-button-icon.is-large {
    @apply w-10 h-10 text-2xl;
  }
  .button.is-button-icon i, .button.is-button-icon span {
    @apply leading-none;
  }
  .button[disabled] {
    @apply pointer-events-auto opacity-70 cursor-not-allowed hover:bg-opacity-70 hover:border-opacity-70;
  }
  .link {
    @apply no-underline inline-block text-slate-400 hover:text-slate-600 transition-all duration-400 ease-in-out;
  }
  .link.is-primary {
    @apply text-primary-400;
  }
  .link.is-primary:hover {
    @apply text-primary-500;
  }
  .link.is-secondary {
    @apply text-secondary-400;
  }
  .link.is-secondary:hover {
    @apply text-secondary-500;
  }
  .link.is-tertiary {
    @apply text-tertiary-400;
  }
  .link.is-tertiary:hover {
    @apply text-tertiary-500;
  }
  .link.is-info {
    @apply text-blue-400;
  }
  .link.is-info:hover {
    @apply text-blue-500;
  }
  .link.is-danger {
    @apply text-red-400;
  }
  .link.is-danger:hover {
    @apply text-red-500;
  }
  .link.is-warning {
    @apply text-yellow-400;
  }
  .link.is-warning:hover {
    @apply text-yellow-500;
  }
  .link.is-success {
    @apply text-green-400;
  }
  .link.is-success:hover {
    @apply text-green-500;
  }
  .link.is-white {
    @apply text-white;
  }
  .link.is-white:hover {
    @apply text-gray-200;
  }
  .link.is-gray {
    @apply text-gray-400;
  }
  .link.is-gray:hover {
    @apply text-gray-600;
  }
  .link.is-dark {
    @apply text-gray-700;
  }
  .link.is-dark:hover {
    @apply text-gray-900;
  }
  .link.is-small {
    @apply text-sm;
  }
  .link.is-large {
    @apply text-xl;
  }
  .card {
    @apply bg-white shadow rounded overflow-hidden;
  }
  .card .card-header {
    aspect-ratio: 16/9;
    @apply overflow-hidden;
  }
  .card .card-header img {
    @apply object-center object-cover w-full h-full;
  }
  .card .card-header.has-category {
    @apply relative;
  }
  .card .card-header.has-category .card-category {
    @apply absolute z-1 top-4 right-4 bg-primary-700 rounded-xl px-6 py-1 text-white text-sm;
  }
  .card .card-content {
    @apply p-6;
  }
  .card .card-content .top-header {
    @apply flex flex-wrap gap-4 justify-between mb-4;
  }
  .card .card-content .top-header .multi-items {
    @apply flex flex-wrap gap-2;
  }
  .card .card-content .top-header .multi-items > * {
    @apply text-gray-400 font-light leading-none inline-block content-[""];
  }
  .card .card-content .top-header .multi-items > *:nth-child(n+2) {
    @apply before:align-middle before:mr-2 before:inline-block before:w-1 before:h-1 before:rounded-full before:bg-gray-300;
  }
  .card .card-content .top-header .info {
    @apply text-gray-400;
  }
  .card .card-content .top-header .price {
    @apply font-bold;
  }
  .card .card-content .card-title {
    @apply text-2xl text-primary-700 font-semibold mb-2;
  }
  .card .card-content p {
    @apply break-words;
  }
  .card .card-content p:not(:last-child) {
    @apply mb-5;
  }
  .card .card-footer {
    @apply flex flex-wrap items-center justify-between border-t border-gray-200/50 p-6;
  }
  .card.card-image {
    @apply relative bg-cover bg-center bg-no-repeat h-48;
  }
  .card.card-image .card-content {
    @apply absolute left-0 bottom-0 w-full text-white p-4 bg-black/50;
  }
  .card.card-image .card-content .card-title {
    @apply text-white text-lg;
  }
  .card.card-image .card-content p {
    @apply mb-0 text-sm leading-none;
  }
  .card.card-image .card-category {
    @apply absolute right-2 top-2 text-white px-4 py-1 bg-primary-700 rounded-3xl text-sm;
  }
  .card.card-user {
    @apply p-4;
  }
  .card.card-user .card-head {
    @apply flex flex-wrap;
  }
  .card.card-user .card-head h5 {
    @apply font-semibold text-primary-900;
  }
  .card.card-user .card-head p {
    @apply text-sm text-gray-500;
  }
  .card.card-user .card-head .user-profile {
    @apply w-10 h-10 overflow-hidden rounded-full shadow mr-2;
  }
  .card.card-user .card-content {
    @apply py-4 px-0;
  }
  .card.card-user .card-footer {
    @apply pt-4 pb-0 px-0;
  }
  .card.card-profile {
    @apply relative;
  }
  .card.card-profile .card-head {
    @apply px-5 pt-5 pb-2;
  }
  .card.card-profile .card-head .card-name {
    @apply text-2xl font-bold;
  }
  .card.card-profile .card-head .card-name small {
    @apply text-base font-normal block text-gray-600;
  }
  .card.card-profile .card-content {
    @apply px-5 pt-1 pb-5 z-5 relative;
  }
  .card.card-profile .card-content p {
    @apply text-gray-500 mb-2;
  }
  .card.card-profile::after {
    @apply content-[""] absolute -top-14 -right-14 z-1 block w-56 h-56 rounded-bl-full bg-gradient-to-tr from-secondary-200 to-secondary-700;
  }
  .card.card-team {
    @apply relative;
  }
  .card.card-team .card-header {
    @apply aspect-auto h-auto px-6 pt-6;
  }
  .card.card-team .card-header .card-image {
    @apply text-center relative z-1;
  }
  .card.card-team .card-header .card-image .card-inner-image {
    @apply mx-auto mb-4 w-40 h-40 rounded-full overflow-hidden;
  }
  .card.card-team .card-header .card-image figcaption {
    @apply text-xl font-bold;
  }
  .card.card-team .card-header::before {
    @apply content-[""] block absolute top-0 left-0 right-0 h-[7.25rem] bg-gradient-to-t from-primary-500 to-primary-800;
  }
  .card.card-team .card-content {
    @apply text-gray-600;
  }
  .card.card-team .card-content p {
    @apply mb-2;
  }
  .card.b-space {
    @apply p-5;
  }
  .card.b-space .card-header {
    @apply rounded-lg mb-4;
  }
  .card.b-space .card-content {
    @apply p-0;
  }
  .card.b-space:not(:has(.card-even)) .card-header {
    @apply mb-4;
  }
  .card.card-even {
    @apply flex flex-wrap gap-5;
  }
  .card.card-even:is(.b-space) .card-header {
    @apply mb-0;
  }
  .card.card-even .card-header {
    @apply w-full sm:w-5/12 md:w-4/12 overflow-hidden rounded-lg;
  }
  .card.card-even .card-header img {
    @apply object-cover object-center;
  }
  .card.card-even .card-content {
    @apply md:flex-1;
  }
  .card.card-hover {
    @apply relative;
  }
  .card.card-hover .card-image {
    @apply h-60 overflow-hidden;
  }
  .card.card-hover .card-image img {
    @apply h-4/6 absolute inset-0 w-full object-cover object-center transition-all duration-300 ease-in-out;
  }
  .card.card-hover .card-content {
    @apply z-1 relative transition-all duration-300 ease-in-out;
  }
  .card.card-hover:hover img {
    @apply h-full;
  }
  .card.card-hover:hover .card-content {
    @apply bg-white/50 backdrop-blur-sm;
  }
  .card.card-image-hover {
    @apply relative h-[35rem];
  }
  .card.card-image-hover .card-image {
    @apply transition-all duration-400 ease-in-out;
  }
  .card.card-image-hover .card-content {
    @apply absolute left-0 -bottom-32 bg-black/20 text-white backdrop-blur transition-all duration-400 ease-in-out;
  }
  .card.card-image-hover .card-content .card-title {
    @apply mb-5 text-white;
  }
  .card.card-image-hover .card-content p, .card.card-image-hover .card-content a {
    @apply opacity-0 transition-all duration-400 ease-in-out;
  }
  .card.card-image-hover:hover .card-image {
    @apply scale-150 rotate-12;
  }
  .card.card-image-hover:hover .card-content {
    @apply bottom-0;
  }
  .card.card-image-hover:hover .card-content p, .card.card-image-hover:hover .card-content a {
    @apply opacity-100;
  }
  .card.card-animated-hover {
    @apply p-4 h-[22rem] md:h-80 overflow-visible transition-all duration-300 ease-in-out;
  }
  .card.card-animated-hover * {
    @apply transition-all duration-300 ease-in-out;
  }
  .card.card-animated-hover .card-image {
    @apply relative z-1 w-full h-48 overflow-hidden rounded;
  }
  .card.card-animated-hover .card-content {
    @apply px-0 py-5;
  }
  .card.card-animated-hover .card-content *:not(.card-title) {
    @apply opacity-0;
  }
  .card.card-animated-hover:hover .card-image {
    @apply -mt-20;
  }
  .card.card-animated-hover:hover *:not(.card-title) {
    @apply opacity-100;
  }
  .card.card-product {
    @apply relative;
  }
  .card.card-product .card-image {
    @apply relative h-72 md:h-96 overflow-hidden;
  }
  .card.card-product .card-image img {
    @apply w-full h-full object-cover object-center;
  }
  .card.card-product .card-image .price {
    @apply absolute right-0 bottom-0 z-1 px-4 py-2 bg-primary-500 text-white rounded-tl;
  }
  .card.card-product .card-image .like {
    @apply absolute right-2 top-2 z-1 p-1 bg-black/30 hover:bg-black/50 w-12 h-12 backdrop-blur text-white grid place-content-center text-xl rounded-full cursor-pointer transition-all duration-300 ease-in-out;
  }
  .card.card-product .price {
    @apply font-bold text-xl text-primary-600;
  }
  .card.card-product .hover-buttons {
    @apply absolute z-10 flex flex-col -right-full top-0 bg-black/20 backdrop-blur-sm py-4 px-2 rounded-bl space-y-2 transition-all duration-300 ease-in-out;
  }
  .card.card-product .hover-buttons a {
    @apply text-white p-2 rounded transition-all duration-300 ease-in-out leading-none;
  }
  .card.card-product .hover-buttons .add-to-bag {
    @apply hover:bg-primary-500;
  }
  .card.card-product .hover-buttons .see-details {
    @apply hover:bg-secondary-500;
  }
  .card.card-product .hover-buttons .like {
    @apply hover:bg-red-500;
  }
  .card.card-product .hover-buttons svg,
  .card.card-product .hover-buttons i {
    @apply text-xl leading-none;
  }
  .card.card-product.clean-card {
    @apply shadow-none bg-transparent;
  }
  .card.card-product.clean-card .card-header {
    @apply rounded-lg mb-4;
  }
  .card.card-product.clean-card .card-content {
    @apply p-0;
  }
  .card.card-product.clean-card .card-content .card-title {
    @apply text-3xl text-gray-700;
  }
  .card.card-product.clean-card .card-content .card-title:has(a) {
    @apply hover:text-primary-600 transition-all;
  }
  .card.card-product.clean-card .card-content p {
    @apply text-gray-400 mb-8;
  }
  .card.card-product.clean-card .card-footer {
    @apply border-0 p-0;
  }
  .card.card-product:has(.hover-buttons):hover .hover-buttons {
    @apply right-0;
  }
  .slider,
  .carousel {
    @apply relative;
  }
  .content-slider {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    aspect-ratio: 16/9;
    @apply flex overflow-x-scroll w-full;
  }
  .content-slider .slide {
    scroll-snap-align: center;
    aspect-ratio: 16/9;
    @apply text-white h-full grid place-content-center;
  }
  .content-slider::-webkit-scrollbar {
    display: none;
  }
  .dots {
    @apply w-full absolute bottom-5 flex flex-wrap justify-center mt-5;
  }
  .dots .dot {
    @apply inline-block rounded-full w-4 h-4 mx-1 bg-gray-500/80 shadow-md cursor-pointer transition-all ease-in-out duration-400 transform scale-100;
  }
  .dots .dot:hover, .dots .dot.active {
    transform: scale(1.25);
    @apply bg-secondary-700 scale-125;
  }
  .btn-slide {
    @apply transform -translate-y-1/2 cursor-pointer bg-gray-500 bg-opacity-20 w-10 h-10 rounded-md transition-all duration-400 ease-in-out absolute top-1/2;
  }
  .btn-slide:hover {
    @apply bg-opacity-50;
  }
  .btn-slide.prev {
    @apply left-5;
  }
  .btn-slide.next {
    @apply right-5;
  }
  .content-carousel {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    @apply flex overflow-x-auto w-full;
  }
  .content-carousel .carousel-item {
    scroll-snap-align: start;
    @apply text-white h-32 grid place-content-center;
    width: calc(25% - 10px);
    flex: 0 0 calc(25% - 10px);
  }
  .content-carousel::-webkit-scrollbar {
    display: none;
  }
  .btn-carousel {
    @apply transform -translate-y-1/2 cursor-pointer bg-gray-500 bg-opacity-20 w-10 h-10 rounded-md transition-all duration-400 ease-in-out absolute top-1/2;
  }
  .btn-carousel:hover {
    @apply bg-opacity-50;
  }
  .btn-carousel.prev {
    @apply left-5;
  }
  .btn-carousel.next {
    @apply right-5;
  }
  .comment {
    @apply bg-white shadow rounded;
  }
  .comment .comment-head {
    @apply relative p-6 flex flex-wrap items-center;
  }
  .comment .comment-head .image {
    @apply w-16 h-16 mr-2;
  }
  .comment .comment-head .name {
    @apply font-semibold;
  }
  .comment .comment-head .profession {
    @apply text-sm text-gray-500 mb-0 leading-none;
  }
  .comment .comment-head .date {
    @apply absolute top-4 right-4 z-1 text-gray-400 text-sm;
  }
  .comment .comment-content {
    @apply p-6 border-t border-b border-gray-200/50;
  }
  .comment .comment-footer {
    @apply p-6 flex flex-wrap justify-end space-x-4;
  }
  .comment .comment-respond {
    @apply ml-10 border-l border-gray-300/50 bg-gray-100;
  }
  .dropdown {
    @apply relative bg-white rounded-sm shadow-sm cursor-pointer;
  }
  .dropdown .dropdown-wrap {
    @apply p-2 inline-block w-full transition-all duration-200 ease-linear hover:bg-gray-50;
  }
  .dropdown .dropdown-wrap .dropdown-text {
    @apply flex items-center justify-between w-full transition-all duration-200 ease-linear;
  }
  .dropdown .dropdown-wrap:hover .dropdown-text, .dropdown .dropdown-wrap:focus .dropdown-text, .dropdown .dropdown-wrap:focus-within .dropdown-text {
    @apply text-primary-600;
  }
  .dropdown .dropdown-wrap .dropdown-wrap-icon {
    @apply inline-block transform transition-all duration-300 ease-in-out;
  }
  .dropdown .dropdown-content {
    @apply -z-1 bg-white w-40 overflow-hidden absolute left-0 md:left-[initial] right-0 bottom-auto mt-1 rounded-md shadow-lg opacity-0 transition-all duration-500 ease-in-out list-none;
  }
  .dropdown .dropdown-content .dropdown-item {
    @apply no-underline bg-transparent block text-left text-gray-700 px-4 py-2 transition-all duration-400 ease-in-out w-full;
  }
  .dropdown .dropdown-content .dropdown-item:hover {
    @apply bg-primary-500 text-white;
  }
  .dropdown .dropdown-content .dropdown-divider {
    @apply my-2 mx-6 border-t-2 border-gray-200;
  }
  .dropdown .dropdown-content .dropdown-title {
    @apply font-semibold px-4 my-2 text-xs text-gray-600/50 uppercase;
  }
  .dropdown .dropdown-content.is-fade-up {
    top: 200%;
  }
  .dropdown .user-dropdown,
  .dropdown .wrap-text {
    @apply flex items-center justify-between w-full;
  }
  .dropdown .user-dropdown:hover, .dropdown .user-dropdown:focus, .dropdown .user-dropdown:focus-within,
  .dropdown .wrap-text:hover,
  .dropdown .wrap-text:focus,
  .dropdown .wrap-text:focus-within {
    @apply text-primary-600;
  }
  .dropdown svg {
    @apply ml-2 transition-all duration-200 ease-in-out;
  }
  .dropdown.is-focused:focus .dropdown-content, .dropdown.is-hovered:hover .dropdown-content {
    @apply opacity-100 z-10;
  }
  .dropdown.is-focused:focus .dropdown-content.is-fade-up, .dropdown.is-hovered:hover .dropdown-content.is-fade-up {
    top: 100%;
  }
  .dropdown.is-focused:focus svg,
  .dropdown.is-focused:focus .user-dropdown svg, .dropdown.is-hovered:hover svg,
  .dropdown.is-hovered:hover .user-dropdown svg {
    @apply rotate-180;
  }
  .dropdown.is-focused:focus {
    @apply outline-1 outline-blue-500 outline;
  }
  .dropdown.has-large-text .dropdown-content {
    @apply w-auto;
  }
  .dropdown.has-large-text .dropdown-content .dropdown-item, .dropdown.has-large-text .dropdown-content button {
    @apply whitespace-nowrap;
  }
  .dropdown.dropdown-primary .dropdown-wrap {
    @apply hover:bg-primary-50;
  }
  .dropdown.dropdown-primary .dropdown-content .dropdown-item:hover {
    @apply bg-primary-600 text-white;
  }
  .dropdown.dropdown-secondary .dropdown-wrap {
    @apply hover:bg-secondary-50;
  }
  .dropdown.dropdown-secondary .dropdown-wrap:hover .dropdown-text, .dropdown.dropdown-secondary .dropdown-wrap:focus .dropdown-text, .dropdown.dropdown-secondary .dropdown-wrap:focus-within .dropdown-text {
    @apply text-secondary-600;
  }
  .dropdown.dropdown-secondary .dropdown-content .dropdown-item:hover {
    @apply bg-secondary-600 text-white;
  }
  .dropdown.dropdown-tertiary .dropdown-wrap {
    @apply hover:bg-tertiary-50;
  }
  .dropdown.dropdown-tertiary .dropdown-wrap:hover .dropdown-text, .dropdown.dropdown-tertiary .dropdown-wrap:focus .dropdown-text, .dropdown.dropdown-tertiary .dropdown-wrap:focus-within .dropdown-text {
    @apply text-tertiary-600;
  }
  .dropdown.dropdown-tertiary .dropdown-content .dropdown-item:hover {
    @apply bg-tertiary-600 text-white;
  }
  .gallery {
    @apply grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-5;
  }
  .gallery.is-squared > .image-gallery {
    @apply aspect-square;
  }
  .gallery.is-squared > .image-gallery img {
    @apply w-full h-full object-center object-cover;
  }
  .masonry-gallery {
    @apply space-y-5 gap-x-5;
  }
  .gallery .image-gallery,
  .masonry-gallery .image-gallery {
    @apply h-fit;
  }
  .gallery .image-gallery.is-rounded,
  .masonry-gallery .image-gallery.is-rounded {
    @apply rounded overflow-hidden shadow;
  }
  .gallery .image-gallery.is-large-rounded,
  .masonry-gallery .image-gallery.is-large-rounded {
    @apply rounded-2xl overflow-hidden shadow;
  }
  .image {
    @apply overflow-hidden;
  }
  .image.is-rounded {
    @apply rounded;
  }
  .image.is-circle {
    @apply rounded-full;
  }
  .image.is-shadow {
    @apply shadow-md;
  }
  .image figcaption {
    @apply px-2 pt-1;
  }
  .image.float-caption {
    @apply relative;
  }
  .image.float-caption figcaption {
    @apply absolute left-0 right-0 bottom-0 z-10 p-4 bg-black/60 text-white;
  }
  .list {
    @apply pl-4;
  }
  .list.disordered {
    @apply list-disc;
  }
  .list.disordered ul {
    @apply list-circle pl-6;
  }
  .list.ordered {
    @apply list-decimal;
  }
  .list.ordered ol {
    @apply list-decimal pl-6;
  }
  .list.list-separation {
    @apply divide-y divide-gray-300 space-y-2;
  }
  .list.list-separation li {
    @apply pt-2;
  }
  .list.list-bg {
    @apply space-y-1 list-none;
  }
  .list.list-bg li {
    @apply bg-gray-100 rounded px-4 py-1;
  }
  .list.todo-list {
    @apply space-y-1 list-none;
  }
  .list.todo-list li {
    @apply px-2 py-1 flex items-center gap-4 flex-wrap bg-gray-50;
  }
  .list.todo-list li .field {
    @apply mb-0;
  }
  .list.todo-list li.completed > * {
    @apply text-gray-400 line-through;
  }
  .backdrop {
    @apply -z-1 opacity-0 overflow-y-auto flex items-start justify-center absolute inset-0 bg-black/20 backdrop-filter backdrop-blur-[2px] transition-all duration-200 ease-in-out;
  }
  .modal-wrap {
    @apply fixed inset-0 flex items-center justify-center -z-1 h-screen overflow-hidden transition-all duration-200 ease-in-out;
  }
  .modal-wrap.is-opened {
    @apply z-[201];
  }
  .modal-wrap.is-opened .backdrop, .modal-wrap.is-opened .modal {
    @apply z-10 opacity-100;
  }
  .modal-wrap:is(.modal-right) {
    @apply justify-end;
  }
  .modal-wrap:is(.modal-right) .modal {
    @apply flex flex-col relative -right-full m-0 w-10/12 sm:w-8/12 md:w-6/12 lg:w-5/12 duration-400;
  }
  .modal-wrap:is(.modal-right) .modal .modal-footer {
    @apply mt-auto;
  }
  .modal-wrap:is(.modal-right).is-opened .modal {
    @apply z-10 right-0 opacity-100;
  }
  .modal-wrap:is(.modal-left) {
    @apply justify-start;
  }
  .modal-wrap:is(.modal-left) .modal {
    @apply flex flex-col relative -left-full m-0 h-full w-10/12 sm:w-8/12 md:w-6/12 lg:w-5/12 duration-400;
  }
  .modal-wrap:is(.modal-left) .modal .modal-footer {
    @apply mt-auto;
  }
  .modal-wrap:is(.modal-left).is-opened .modal {
    @apply z-10 left-0 opacity-100;
  }
  .modal-wrap:is(.modal-cta) .modal {
    @apply overflow-hidden rounded-lg shadow-2xl p-0 flex flex-wrap m-4 h-fit md:h-[30rem] w-11/12 sm:w-10/12 md:w-8/12;
  }
  .modal-wrap:is(.modal-cta) .modal .modal-image {
    @apply basis-4/12 w-4/12 hidden sm:inline-block object-cover object-center;
  }
  .modal-wrap:is(.modal-cta) .modal .modal-image img {
    @apply h-full;
  }
  .modal-wrap:is(.modal-cta) .modal .modal-content {
    @apply flex-1 p-8 relative;
  }
  .modal-wrap:is(.modal-cta) .modal .modal-close {
    @apply absolute right-2 top-2 z-10 rounded-full p-1 text-gray-600 hover:text-white hover:bg-red-500 inline-block transition-all duration-300 ease-in-out;
  }
  .modal {
    @apply max-h-[95%] overflow-y-auto my-10 w-10/12 sm:w-8/12 md:w-6/12 lg:w-4/12 relative z-20 bg-white rounded p-8 opacity-0 transition-all duration-200 ease-in-out;
  }
  .modal .modal-head {
    @apply flex flex-wrap items-center justify-between mb-4 pb-4 border-b border-gray-100;
  }
  .modal .modal-head .modal-title {
    @apply font-semibold;
  }
  .modal .modal-head .modal-close {
    @apply hover:text-red-500;
  }
  .modal-footer {
    @apply space-x-4 flex flex-wrap justify-end border-t border-gray-100 mt-4 pt-4;
  }
  .dialog {
    @apply w-full relative z-1 p-8 shadow-base;
  }
  .pagination,
  .pages-list,
  .page-prev,
  .page-next {
    @apply flex flex-wrap justify-center items-center;
  }
  .pagination.is-rounded .page-prev,
  .pagination.is-rounded .page-next,
  .pagination.is-rounded .page-link {
    @apply rounded;
  }
  .pagination.is-circle .page-prev,
  .pagination.is-circle .page-next,
  .pagination.is-circle .page-link {
    @apply rounded-full;
  }
  .pagination.is-group .pages-list {
    @apply space-x-0 divide-x-[1px] divide-gray-200;
  }
  .pagination.is-group .page-prev,
  .pagination.is-group .page-next {
    @apply mx-0;
  }
  .pagination.is-group .page-prev {
    @apply border-r-[1px] border-gray-200 rounded-bl rounded-tl;
  }
  .pagination.is-group .page-next {
    @apply border-l-[1px] border-gray-200 rounded-br rounded-tr;
  }
  .page-prev,
  .page-next,
  .page-link {
    @apply bg-white px-4 cursor-pointer py-2 shadow-sm transition-all duration-400 ease-in-out;
  }
  .page-prev:hover, .page-prev.is-active,
  .page-next:hover,
  .page-next.is-active,
  .page-link:hover,
  .page-link.is-active {
    @apply bg-primary-700 text-white;
  }
  .page-prev.is-disabled,
  .page-next.is-disabled,
  .page-link.is-disabled {
    @apply bg-gray-100 cursor-not-allowed text-gray-500;
  }
  .page-prev.is-active.is-disabled,
  .page-next.is-active.is-disabled,
  .page-link.is-active.is-disabled {
    @apply bg-primary-700 text-white;
  }
  .pages-list {
    @apply space-x-2 p-0 list-none;
  }
  .page-link {
    @apply inline-block;
  }
  .page-prev {
    @apply mr-4;
  }
  .page-next {
    @apply ml-4;
  }
  .progress {
    @apply relative bg-slate-200 border-0 block h-4 rounded-full overflow-hidden w-full transition-all duration-300 ease-in-out;
  }
  .progress .inner-progress {
    @apply text-sm leading-tight text-right text-white pr-2 rounded-full absolute top-0 bottom-0 left-0 z-1 bg-slate-400 transition-all duration-300 ease-in-out;
  }
  .progress::-webkit-progress-bar {
    @apply bg-slate-300;
  }
  .progress::-webkit-progress-value {
    @apply bg-slate-600 rounded-full;
  }
  .progress.is-primary {
    @apply bg-primary-100;
  }
  .progress.is-primary .inner-progress {
    @apply bg-primary-700;
  }
  .progress.is-primary::-webkit-progress-bar {
    @apply bg-primary-100;
  }
  .progress.is-primary::-webkit-progress-value {
    @apply bg-primary-700;
  }
  .progress.is-secondary {
    @apply bg-secondary-100;
  }
  .progress.is-secondary .inner-progress {
    @apply bg-secondary-700;
  }
  .progress.is-secondary::-webkit-progress-bar {
    @apply bg-secondary-100;
  }
  .progress.is-secondary::-webkit-progress-value {
    @apply bg-secondary-700;
  }
  .progress.is-tertiary {
    @apply bg-tertiary-100;
  }
  .progress.is-tertiary .inner-progress {
    @apply bg-tertiary-700;
  }
  .progress.is-tertiary::-webkit-progress-bar {
    @apply bg-tertiary-100;
  }
  .progress.is-tertiary::-webkit-progress-value {
    @apply bg-tertiary-600;
  }
  .progress.is-danger {
    @apply bg-red-100;
  }
  .progress.is-danger .inner-progress {
    @apply bg-red-500;
  }
  .progress.is-danger::-webkit-progress-bar {
    @apply bg-red-100;
  }
  .progress.is-danger::-webkit-progress-value {
    @apply bg-red-500;
  }
  .progress.is-warning {
    @apply bg-yellow-100;
  }
  .progress.is-warning .inner-progress {
    @apply bg-yellow-500;
  }
  .progress.is-warning::-webkit-progress-bar {
    @apply bg-yellow-100;
  }
  .progress.is-warning::-webkit-progress-value {
    @apply bg-yellow-500;
  }
  .progress.is-success {
    @apply bg-green-100;
  }
  .progress.is-success .inner-progress {
    @apply bg-green-500;
  }
  .progress.is-success::-webkit-progress-bar {
    @apply bg-green-100;
  }
  .progress.is-success::-webkit-progress-value {
    @apply bg-green-500;
  }
  .progress.is-info {
    @apply bg-sky-100;
  }
  .progress.is-info .inner-progress {
    @apply bg-sky-500;
  }
  .progress.is-info::-webkit-progress-bar {
    @apply bg-sky-100;
  }
  .progress.is-info::-webkit-progress-value {
    @apply bg-sky-500;
  }
  .progress.is-small {
    @apply h-2;
  }
  .progress.is-large {
    @apply h-6;
  }
  .tabs-wrapper .tabs-lists {
    @apply p-0 list-none flex flex-wrap flex-col md:flex-row;
  }
  .tabs-wrapper .tab-link {
    @apply inline-block w-full text-lg px-4 py-2 cursor-pointer transition-all duration-500 ease-in-out bg-slate-100;
  }
  .tabs-wrapper .tab-link.is-active, .tabs-wrapper .tab-link:hover {
    @apply no-underline bg-primary-700 text-white;
  }
  .tabs-wrapper.is-underline .tab-link {
    @apply border-b-4 border-gray-100 bg-transparent;
  }
  .tabs-wrapper.is-underline .tab-link.is-active, .tabs-wrapper.is-underline .tab-link:hover {
    @apply text-primary-700 border-primary-700;
  }
  .tabs-wrapper.is-left-border .tab-link {
    @apply border-l-4 border-gray-100 bg-transparent;
  }
  .tabs-wrapper.is-left-border .tab-link.is-active, .tabs-wrapper.is-left-border .tab-link:hover {
    @apply text-primary-700 border-primary-700;
  }
  .tabs-wrapper.is-semi-transparent .tab-link {
    @apply bg-slate-100 text-gray-700;
  }
  .tabs-wrapper.is-semi-transparent .tab-link.is-active, .tabs-wrapper.is-semi-transparent .tab-link:hover {
    @apply bg-primary-300/40 text-primary-800;
  }
  .tabs-wrapper.is-rounded .tabs-lists {
    @apply space-y-2 md:space-y-0 md:space-x-2 mb-1;
  }
  .tabs-wrapper.is-rounded .tab-link {
    @apply bg-slate-100 text-gray-700 rounded-xl;
  }
  .tabs-wrapper.is-rounded .tab-link.is-active, .tabs-wrapper.is-rounded .tab-link:hover {
    @apply bg-primary-300/40 text-primary-800;
  }
  .tabs-wrapper.clean-underline .tabs-lists {
    @apply md:border-b-4 mb-0;
  }
  .tabs-wrapper.clean-underline .tabs-lists .tab-link {
    @apply font-medium text-base bg-transparent transition-all ease-in-out duration-200 relative;
  }
  .tabs-wrapper.clean-underline .tabs-lists .tab-link::after {
    @apply content-[""] h-1 w-full rounded-md -bottom-1 absolute left-0 right-0 bg-transparent transition-all ease-in-out duration-200;
  }
  .tabs-wrapper.clean-underline .tabs-lists .tab-link.is-active, .tabs-wrapper.clean-underline .tabs-lists .tab-link:hover {
    @apply text-primary-700;
  }
  .tabs-wrapper.clean-underline .tabs-lists .tab-link.is-active::after, .tabs-wrapper.clean-underline .tabs-lists .tab-link:hover::after {
    @apply bg-primary-700;
  }
  .tabs-wrapper.clean-underline .tabs-content .tab-content {
    @apply bg-transparent p-5 rounded-none;
  }
  .tabs-wrapper .tabs-content .tab-content {
    @apply p-6 bg-gray-100;
  }
  @media only screen and (max-width: 575px) {
    .tabs-wrapper .tabs-lists {
      @apply overflow-auto;
    }
  }
  .tooltip {
    @apply text-gray-600 border-0 inline-block relative cursor-help;
  }
  .tooltip::after {
    @apply max-w-[100vw] w-max content-[attr(data-tooltip)] transition-all duration-200 ease-in-out text-center absolute -z-1 px-2 py-1 shadow-sm bg-gray-50 rounded-md opacity-0;
  }
  .tooltip.to-top::after {
    @apply left-0 bottom-[110%] md:-translate-x-1/2 md:left-1/2;
  }
  .tooltip.to-right::after {
    @apply -translate-y-1/2 top-1/2 left-[110%];
  }
  .tooltip.to-bottom::after {
    @apply top-[110%] -translate-x-1/2 left-1/2;
  }
  .tooltip.to-left::after {
    @apply -translate-y-1/2 top-1/2 right-[110%];
  }
  .tooltip:hover::after, .tooltip:focus::after {
    @apply opacity-100 z-10;
  }
  .tooltip.is-filled {
    @apply px-4 py-2 rounded bg-gray-200;
  }
  .tooltip.is-filled.is-rounded {
    @apply rounded-full;
  }
  .tooltip.is-filled.is-flat {
    @apply rounded-none;
  }
  .tooltip.is-filled.is-primary {
    @apply bg-primary-100 text-primary-700;
  }
  .tooltip.is-filled.is-secondary {
    @apply bg-secondary-100 text-secondary-700;
  }
  .tooltip.is-filled.is-tertiary {
    @apply bg-tertiary-100 text-tertiary-700;
  }
  .tooltip.is-filled.is-info {
    @apply bg-blue-100 text-blue-500;
  }
  .tooltip.is-filled.is-danger {
    @apply bg-red-100 text-red-500;
  }
  .tooltip.is-filled.is-warning {
    @apply bg-yellow-100 text-yellow-500;
  }
  .tooltip.is-filled.is-success {
    @apply bg-green-100 text-green-500;
  }
  .tooltip.is-filled.is-white {
    @apply bg-gray-50 text-gray-700;
  }
  .tooltip.is-filled.is-gray {
    @apply bg-gray-100 text-gray-500;
  }
  .tooltip.is-filled.is-dark {
    @apply bg-gray-900 text-gray-100;
  }
  .tooltip.is-primary {
    @apply text-primary-700;
  }
  .tooltip.is-primary::after {
    @apply bg-primary-50 text-primary-700 shadow-primary-100;
  }
  .tooltip.is-secondary {
    @apply text-secondary-700;
  }
  .tooltip.is-secondary::after {
    @apply bg-secondary-50 text-secondary-700 shadow-secondary-100;
  }
  .tooltip.is-tertiary {
    @apply text-tertiary-700;
  }
  .tooltip.is-tertiary::after {
    @apply bg-tertiary-50 text-tertiary-700 shadow-tertiary-100;
  }
  .tooltip.is-info {
    @apply text-blue-500;
  }
  .tooltip.is-info::after {
    @apply bg-blue-50 text-blue-700 shadow-blue-100;
  }
  .tooltip.is-danger {
    @apply text-red-500;
  }
  .tooltip.is-danger::after {
    @apply bg-red-50 text-red-700 shadow-red-100;
  }
  .tooltip.is-warning {
    @apply text-yellow-500;
  }
  .tooltip.is-warning::after {
    @apply bg-yellow-50 text-yellow-700 shadow-yellow-100;
  }
  .tooltip.is-success {
    @apply text-green-500;
  }
  .tooltip.is-success::after {
    @apply bg-green-50 text-green-700 shadow-green-100;
  }
  .tooltip.is-white {
    @apply text-white;
  }
  .tooltip.is-white::after {
    @apply bg-gray-50 text-gray-700 shadow-gray-100;
  }
  .tooltip.is-gray {
    @apply text-gray-500;
  }
  .tooltip.is-gray::after {
    @apply bg-gray-50 text-gray-700 shadow-gray-100;
  }
  .tooltip.is-dark {
    @apply text-gray-700;
  }
  .tooltip.is-dark::after {
    @apply bg-gray-100 text-gray-700 shadow-gray-100;
  }
}