/*!
 * Ngorei NesxaUI  v1.1.5 (https://ngorei.com/)
 * Copyright 2024-2025 The Ngorei NesxaUI Authors
 * Licensed under MIT (https://github.com/ngorei/main/LICENSE)
 */

/*AND Grid*/
/*AND btn-group*/
/*AND Accordion*/
/*AND Alert*/
/*AND Badge*/
/*AND Media Object*/
/*AND breadcrumb*/
/*AND Card*/
/*AND Collapse*/
/*AND Dropdown*/
/*AND offcanvas*/
/*AND toast*/
/*AND tooltip*/
/*AND spinner*/
/*AND scrollspy*/
/*AND progress*/
/*AND nav-tabs*/
/*AND Form*/
/*AND Modal*/
/*AND Button*/
/*AND Navbar*/
/*AND Footer*/
/*AND Tabel*/
/*AND Lightbox*/
/*AND video*/
/*AND thumbnav*/
/*AND sticky*/
/*AND Stats*/
/*AND sortable*/
/*AND search*/
/*AND Images*/
/*AND Avatar*/
/*AND List Group*/
/*AND Menu*/
/*AND popover*/
/*AND Modal*/


:root {
  --nx-card-border-radius: 0.375rem;
  --nx-card-border-color: #dee2e6;
  --nx-card-bg: #fff;
  --nx-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --nx-card-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  --nx-card-spacing: 1.25rem;

  --nx-white: #ffffff;
  --nx-tabel-25: #f8f9fa;
  --nx-tabel-50: #f3f4f6;
  --nx-tabel-75: #e5e7eb;
  --nx-tabel-600: #4b5563;
  --nx-tabel-700: #374151;
  --nx-text-primary: #00d1b2;
  --nx-primary-dark: #242526;
}


.container {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}
.nx-container {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

/* Styling untuk grid demo */
.nx-row {
    margin-bottom: 0.5rem;
    display: flex;
    gap: 2px; /* Menggunakan gap sebagai pengganti margin */
}
/* Row Small */
.row-sm {
  margin-left: -10px;
  margin-right: -10px;
}

.row-sm > div {
  padding-left: 10px;
  padding-right: 10px;
}

/* Row Extra Small */
.row-xs {
  margin-left: -5px;
  margin-right: -5px;
}

.row-xs > div {
  padding-left: 5px;
  padding-right: 5px;
}

/* Row Extra Extra Small */
.row-xxs {
  margin-left: -1px;
  margin-right: -1px;
}

.row-xxs > div {
  padding-left: 1px;
  padding-right: 1px;
}

/* Small Devices (≥576px) */
@media (min-width: 576px) {
  .row-xs--sm {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .row-xs--sm > div {
    padding-left: 5px;
    padding-right: 5px;
  }

  .row-sm--sm {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row-sm--sm > div {
    padding-left: 10px;
    padding-right: 10px;
  }

  .row--sm {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .row--sm > div {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Medium Devices (≥768px) */
@media (min-width: 768px) {
  .row-xs--md {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .row-xs--md > div {
    padding-left: 5px;
    padding-right: 5px;
  }

  .row-sm--md {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row-sm--md > div {
    padding-left: 10px;
    padding-right: 10px;
  }

  .row--md {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .row--md > div {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Large Devices (≥992px) */
@media (min-width: 992px) {
  .row-xs--lg {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .row-xs--lg > div {
    padding-left: 5px;
    padding-right: 5px;
  }

  .row-sm--lg {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row-sm--lg > div {
    padding-left: 10px;
    padding-right: 10px;
  }

  .row--lg {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .row--lg > div {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Extra Large Devices (≥1200px) */
@media (min-width: 1200px) {
  .row-xs--xl {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .row-xs--xl > div {
    padding-left: 5px;
    padding-right: 5px;
  }

  .row-sm--xl {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row-sm--xl > div {
    padding-left: 10px;
    padding-right: 10px;
  }

  .row--xl {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .row--xl > div {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.nx-row > [class*="nx-col"] {
    padding: 0.1rem;
    /* margin dihapus karena sudah menggunakan gap */
}

/* Responsive container */
@media (min-width: 576px) {
    .nx-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .nx-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .nx-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .nx-container {
        max-width: 1140px;
    }
}

/* Tambahkan style untuk offset */
.nx-offset-4 {
    margin-left: 33.333333%;
}

/* Tambahkan breakpoint untuk responsif */
@media (min-width: 768px) {
    .nx-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .nx-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .nx-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}
/* Grid System */
    .nx-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.5rem;
        gap: 2px;
    }

    .nx-col {
        flex: 1 0 0%;
        min-width: 0;
    }

    /* Grid System Columns untuk Desktop */
    @media (min-width: 576px) {
        .nx-col-1 { width: calc(8.33333333% - 2px); }
        .nx-col-2 { width: calc(16.66666667% - 2px); }
        .nx-col-3 { width: calc(25% - 2px); }
        .nx-col-4 { width: calc(33.33333333% - 2px); }
        .nx-col-5 { width: calc(41.66666667% - 2px); }
        .nx-col-6 { width: calc(50% - 2px); }
        .nx-col-7 { width: calc(58.33333333% - 2px); }
        .nx-col-8 { width: calc(66.66666667% - 2px); }
        .nx-col-9 { width: calc(75% - 2px); }
        .nx-col-10 { width: calc(83.33333333% - 2px); }
        .nx-col-11 { width: calc(91.66666667% - 2px); }
        .nx-col-12 { width: calc(100% - 2px); }
    }

    /* Grid System Columns untuk Mobile */
    @media (max-width: 575.98px) {
        [class*="nx-col-"] {
            width: calc(100% - 2px) !important; /* Memaksa full width di mobile */
            flex: 0 0 100% !important;
        }
        
        /* Pengecualian untuk kolom yang lebih kecil di mobile */
        .nx-col-6[class*="nx-col-sm"],
        .nx-col-4[class*="nx-col-sm"],
        .nx-col-3[class*="nx-col-sm"] {
            width: calc(50% - 2px) !important; /* Membuat kolom setengah layar */
            flex: 0 0 50% !important;
        }
    }

    [class*="nx-col-"] {
        flex: 0 0 auto;
        width: var(--col-width);
    }

    .nx-col-1 { --col-width: calc(8.33333333% - 2px); }
    .nx-col-2 { --col-width: calc(16.66666667% - 2px); }
    .nx-col-3 { --col-width: calc(25% - 2px); }
    .nx-col-4 { --col-width: calc(33.33333333% - 2px); }
    .nx-col-5 { --col-width: calc(41.66666667% - 2px); }
    .nx-col-6 { --col-width: calc(50% - 2px); }
    .nx-col-7 { --col-width: calc(58.33333333% - 2px); }
    .nx-col-8 { --col-width: calc(66.66666667% - 2px); }
    .nx-col-9 { --col-width: calc(75% - 2px); }
    .nx-col-10 { --col-width: calc(83.33333333% - 2px); }
    .nx-col-11 { --col-width: calc(91.66666667% - 2px); }
    .nx-col-12 { --col-width: calc(100% - 2px); }

    /* Grid System untuk Mobile */
    @media (max-width: 576px) {
        .nx-col-1, .nx-col-2, .nx-col-3, .nx-col-4,
        .nx-col-5, .nx-col-6, .nx-col-7, .nx-col-8,
        .nx-col-9, .nx-col-10, .nx-col-11, .nx-col-12 {
            padding: 0.5rem;
        }

        /* Kolom spesifik untuk mobile */
        .nx-col-1 { width: calc(8.33333333% - 1rem); }
        .nx-col-2 { width: calc(16.66666667% - 1rem); }
        .nx-col-3 { width: calc(25% - 1rem); }
        .nx-col-4 { width: calc(33.33333333% - 1rem); }
        .nx-col-5 { width: calc(41.66666667% - 1rem); }
        .nx-col-6 { width: calc(50% - 1rem); }
        .nx-col-7 { width: calc(58.33333333% - 1rem); }
        .nx-col-8 { width: calc(66.66666667% - 1rem); }
        .nx-col-9 { width: calc(75% - 1rem); }
        .nx-col-10 { width: calc(83.33333333% - 1rem); }
        .nx-col-11 { width: calc(91.66666667% - 1rem); }
        .nx-col-12 { width: calc(100% - 1rem); }

        /* Mengatur gap yang lebih kecil untuk mobile */
        .nx-row {
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        /* Utility classes untuk mobile */
        .nx-hide-mobile {
            display: none !important;
        }
        
        .nx-show-mobile {
            display: block !important;
        }
        
        /* Mengatur margin dan padding yang lebih kecil */
        .nx-container {
            padding-right: 0.5rem;
            padding-left: 0.5rem;
        }
        
        .doc-section {
            margin-bottom: 1.5rem;
        }
    }

    /* Breakpoint untuk tablet */
    @media (min-width: 577px) and (max-width: 768px) {
        .nx-sm-1 { width: calc(8.33333333% - 1rem); }
        .nx-sm-2 { width: calc(16.66666667% - 1rem); }
        .nx-sm-3 { width: calc(25% - 1rem); }
        .nx-sm-4 { width: calc(33.33333333% - 1rem); }
        .nx-sm-5 { width: calc(41.66666667% - 1rem); }
        .nx-sm-6 { width: calc(50% - 1rem); }
        .nx-sm-7 { width: calc(58.33333333% - 1rem); }
        .nx-sm-8 { width: calc(66.66666667% - 1rem); }
        .nx-sm-9 { width: calc(75% - 1rem); }
        .nx-sm-10 { width: calc(83.33333333% - 1rem); }
        .nx-sm-11 { width: calc(91.66666667% - 1rem); }
        .nx-sm-12 { width: calc(100% - 1rem); }
    }
    /* Spacing untuk form groups */
    .nx-row + .nx-row {
        margin-top: 1.5rem;
    }

    /* Form dalam grid */
    .nx-col-12 .form-nexa,
    .nx-col-md-6 .form-nexa,
    .nx-col-md-4 .form-nexa {
        height: 100%;
    }

    /* Grid System untuk Medium Devices (md) */
    @media (min-width: 768px) {
        .nx-md-1 { width: calc(8.33333333% - 2px); }
        .nx-md-2 { width: calc(16.66666667% - 2px); }
        .nx-md-3 { width: calc(25% - 2px); }
        .nx-md-4 { width: calc(33.33333333% - 2px); }
        .nx-md-5 { width: calc(41.66666667% - 2px); }
        .nx-md-6 { width: calc(50% - 2px); }
        .nx-md-7 { width: calc(58.33333333% - 2px); }
        .nx-md-8 { width: calc(66.66666667% - 2px); }
        .nx-md-9 { width: calc(75% - 2px); }
        .nx-md-10 { width: calc(83.33333333% - 2px); }
        .nx-md-11 { width: calc(91.66666667% - 2px); }
        .nx-md-12 { width: calc(100% - 2px); }
    }

    /* Grid System untuk Large Devices (lg) */
    @media (min-width: 992px) {
        .nx-lg-1 { width: calc(8.33333333% - 2px); }
        .nx-lg-2 { width: calc(16.66666667% - 2px); }
        .nx-lg-3 { width: calc(25% - 2px); }
        .nx-lg-4 { width: calc(33.33333333% - 2px); }
        .nx-lg-5 { width: calc(41.66666667% - 2px); }
        .nx-lg-6 { width: calc(50% - 2px); }
        .nx-lg-7 { width: calc(58.33333333% - 2px); }
        .nx-lg-8 { width: calc(66.66666667% - 2px); }
        .nx-lg-9 { width: calc(75% - 2px); }
        .nx-lg-10 { width: calc(83.33333333% - 2px); }
        .nx-lg-11 { width: calc(91.66666667% - 2px); }
        .nx-lg-12 { width: calc(100% - 2px); }
    }

    /* Grid System untuk Extra Large Devices (xl) */
    @media (min-width: 1200px) {
        .nx-xl-1 { width: calc(8.33333333% - 2px); }
        .nx-xl-2 { width: calc(16.66666667% - 2px); }
        .nx-xl-3 { width: calc(25% - 2px); }
        .nx-xl-4 { width: calc(33.33333333% - 2px); }
        .nx-xl-5 { width: calc(41.66666667% - 2px); }
        .nx-xl-6 { width: calc(50% - 2px); }
        .nx-xl-7 { width: calc(58.33333333% - 2px); }
        .nx-xl-8 { width: calc(66.66666667% - 2px); }
        .nx-xl-9 { width: calc(75% - 2px); }
        .nx-xl-10 { width: calc(83.33333333% - 2px); }
        .nx-xl-11 { width: calc(91.66666667% - 2px); }
        .nx-xl-12 { width: calc(100% - 2px); }
    }

    /* Flex properties untuk mendukung flexbox layout */
    @media (min-width: 768px) {
        .nx-md-1 { flex: 0 0 8.33333333%; }
        .nx-md-2 { flex: 0 0 16.66666667%; }
        .nx-md-3 { flex: 0 0 25%; }
        .nx-md-4 { flex: 0 0 33.33333333%; }
        .nx-md-5 { flex: 0 0 41.66666667%; }
        .nx-md-6 { flex: 0 0 50%; }
        .nx-md-7 { flex: 0 0 58.33333333%; }
        .nx-md-8 { flex: 0 0 66.66666667%; }
        .nx-md-9 { flex: 0 0 75%; }
        .nx-md-10 { flex: 0 0 83.33333333%; }
        .nx-md-11 { flex: 0 0 91.66666667%; }
        .nx-md-12 { flex: 0 0 100%; }
    }

    @media (min-width: 992px) {
        .nx-lg-1 { flex: 0 0 8.33333333%; }
        .nx-lg-2 { flex: 0 0 16.66666667%; }
        .nx-lg-3 { flex: 0 0 25%; }
        .nx-lg-4 { flex: 0 0 33.33333333%; }
        .nx-lg-5 { flex: 0 0 41.66666667%; }
        .nx-lg-6 { flex: 0 0 50%; }
        .nx-lg-7 { flex: 0 0 58.33333333%; }
        .nx-lg-8 { flex: 0 0 66.66666667%; }
        .nx-lg-9 { flex: 0 0 75%; }
        .nx-lg-10 { flex: 0 0 83.33333333%; }
        .nx-lg-11 { flex: 0 0 91.66666667%; }
        .nx-lg-12 { flex: 0 0 100%; }
    }

    @media (min-width: 1200px) {
        .nx-xl-1 { flex: 0 0 8.33333333%; }
        .nx-xl-2 { flex: 0 0 16.66666667%; }
        .nx-xl-3 { flex: 0 0 25%; }
        .nx-xl-4 { flex: 0 0 33.33333333%; }
        .nx-xl-5 { flex: 0 0 41.66666667%; }
        .nx-xl-6 { flex: 0 0 50%; }
        .nx-xl-7 { flex: 0 0 58.33333333%; }
        .nx-xl-8 { flex: 0 0 66.66666667%; }
        .nx-xl-9 { flex: 0 0 75%; }
        .nx-xl-10 { flex: 0 0 83.33333333%; }
        .nx-xl-11 { flex: 0 0 91.66666667%; }
        .nx-xl-12 { flex: 0 0 100%; }
    }

/*AND GRID*/

/* Base button group styling */
.nx-btn-group {
  position: relative;
  display: inline-flex;
}

.nx-btn-group > .nx-btn {
  position: relative;
  flex: 1 1 auto;
  margin-left: -1px;
}

.nx-btn-group > .nx-btn:first-child {
  margin-left: 0;
}

/* Border radius untuk button yang berdekatan */
.nx-btn-group > .nx-btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.nx-btn-group > .nx-btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.nx-btn-group-vertical {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  vertical-align: middle;
}

.nx-btn-group-vertical > .nx-btn {
  width: 100%;
}

.nx-btn-group-vertical > .nx-btn:not(:first-child) {
  margin-top: -1px;
}

.nx-btn-group-vertical > .nx-btn:not(:last-child) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.nx-btn-group-vertical > .nx-btn:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Sizing */
.nx-btn-group-lg > .nx-btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
}

.nx-btn-group-sm > .nx-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Toolbar */
.nx-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nx-toolbar .nx-btn-group:last-child {
  margin-right: 0;
}

.nx-toolbar .nx-btn-group {
  display: inline-flex;
}

.nx-toolbar .nx-btn-group > .nx-btn {
  position: relative;
  margin-left: -1px;
}

.nx-toolbar .nx-btn-group > .nx-btn:first-child {
  margin-left: 0;
}

/* Color variations */
.nx-btn-group > .nx-btn-primary {
  background-color: #00d1b2;
  color: white;
  border-color: #00d1b2;
}

.nx-btn-group > .nx-btn-secondary {
  background-color: #475569;
  color: white;
  border-color: #475569;
}

/* Tambahkan style untuk dropdown */
.nx-dropdown {
  position: relative;
  display: inline-flex;
}

.nx-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 2.5rem !important;
  white-space: nowrap;
}

.nx-dropdown-toggle i {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s;
  pointer-events: none; /* Penting: mencegah ikon mengganggu klik */
}

.nx-dropdown-toggle.active i {
  transform: translateY(-50%) rotate(180deg);
}

.nx-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  display: none;
  min-width: 200px; /* Sedikit lebih lebar */
  padding: 0.5rem 0;
  margin-top: 2px;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0.25rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

.nx-dropdown-menu.show {
  display: block;
}

.nx-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  color: #212529;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.nx-dropdown-item:hover {
  background-color: #f8f9fa;
  color: #16181b;
  text-decoration: none;
}

/* Button group dengan dropdown */
.nx-btn-group .nx-dropdown {
  position: relative;
  display: inline-flex;
  margin-left: -1px;
}

.nx-btn-group .nx-dropdown .nx-btn {
  border-radius: 0;
  margin-left: 0;
  flex: 1 1 auto;
}

.nx-btn-group .nx-dropdown:last-child .nx-btn {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.nx-btn-group .nx-dropdown .nx-dropdown-menu {
  border-radius: 0.25rem;
  margin-top: 2px;
}

.nx-btn-group > .nx-btn:not(:last-child):not(.nx-dropdown-toggle),
.nx-btn-group > .nx-dropdown:not(:last-child) .nx-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.nx-btn-group > .nx-btn:not(:first-child),
.nx-btn-group > .nx-dropdown:not(:first-child) .nx-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.nx-btn-group .nx-dropdown .nx-btn {
  border-color: #dee2e6;
}

.nx-btn-group .nx-dropdown .nx-btn:hover {
  z-index: 1;
}

.nx-btn-group .nx-dropdown .nx-btn.active {
  z-index: 2;
}

/* Pastikan container tidak memotong dropdown */

.nx-btn-group,
.nx-dropdown {
  overflow: visible !important;
}
/*AND btn-group*/


  /* Accordion Base */
.nx-accordion {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  background: #fff;
}

.nx-accordion-item {
  border: 1px solid rgba(0,0,0,0.08);
  margin-bottom: -1px;
  transition: all 0.3s ease;
}

.nx-accordion-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.nx-accordion-item:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.nx-accordion-header {
  padding: 1.25rem;
  background: transparent;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: #2c3e50;
  transition: all 0.3s ease;
}

.nx-accordion-header:hover {
  background: rgba(0,0,0,0.02);
}

.nx-accordion-header .icon,
.nx-accordion-header .custom-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  transition: all 0.3s ease;
  font-size: 20px !important;
}

.nx-accordion-content {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  background: rgba(0,0,0,0.01);
}

.nx-accordion-content.active {
  padding: 1.25rem;
  max-height: 500px;
  opacity: 1;
}

/* Tema */
.nx-accordion.theme-primary .nx-accordion-header {
  color: var(--primary-color);
}

.nx-accordion.theme-primary .nx-accordion-item.active {
  border-color: var(--primary-color);
}

.nx-accordion.theme-primary .nx-accordion-header .icon,
.nx-accordion.theme-primary .nx-accordion-header .custom-icon {
  background: var(--primary-color);
  color: white;
}

/* Multiple Accordion */
.nx-accordion.multiple .nx-accordion-item.active {
  margin: 0.5rem 0;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Nested Accordion */
.nx-accordion-content .nx-accordion {
  margin-top: 1rem;
  box-shadow: none;
  border-left: 2px solid rgba(0,0,0,0.08);
  border-radius: 0;
  margin-left: 1rem;
}

/* Custom Icon */
.nx-accordion-header .custom-icon {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.nx-accordion-header .custom-icon.active {
  transform: rotate(45deg);
  background: var(--primary-color);
  color: white;
}

/* Animated Accordion */
.nx-accordion.animated .nx-accordion-item.active {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Disabled Accordion */
.nx-accordion-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(0,0,0,0.02);
}

.nx-accordion-item.disabled .nx-accordion-header {
  cursor: not-allowed;
  color: #999;
}

/* Sizes */
.nx-accordion.sm .nx-accordion-header {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.nx-accordion.sm .nx-accordion-content.active {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.nx-accordion.lg .nx-accordion-header {
  padding: 1.5rem;
  font-size: 1.125rem;
}

.nx-accordion.lg .nx-accordion-content.active {
  padding: 1.5rem;
  font-size: 1rem;
}

/* Hover Effects */
.nx-accordion-item:hover:not(.disabled) {
  background: rgba(0,0,0,0.01);
}

.nx-accordion-header:hover .icon,
.nx-accordion-header:hover .custom-icon {
  transform: scale(1.1);
}

/* Active State */
.nx-accordion-item.active .nx-accordion-header {
  font-weight: 600;
}

.nx-accordion-item.active .icon,
.nx-accordion-item.active .custom-icon {
  transform: rotate(180deg);
  background: var(--primary-color);
  color: white;
}

/* Custom icons variations */
.nx-accordion-header .material-icons.custom-icon.add {
  font-size: 18px !important;
}

/* Active state untuk Material Icons */
.nx-accordion-item.active .material-icons.icon {
  transform: rotate(180deg);
  background: var(--primary-color);
  color: white;
}

/* Hover effect untuk Material Icons */
.nx-accordion-header:hover .material-icons.icon {
  transform: scale(1.1);
  background: rgba(0,0,0,0.08);
}

/* Icon variations */
.nx-accordion.theme-primary .material-icons.icon {
  color: var(--primary-color);
}

.nx-accordion-item.active .material-icons.icon {
  background: var(--primary-color);
  color: white;
}
/*AND Accordion*/
/* Alert Dasar */
.nx-alert {
  position: relative;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.nx-alert-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}

.nx-alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.nx-alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.nx-alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

.nx-alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}

/* Alert dengan Judul */
.nx-alert-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Alert yang Dapat Ditutup */
.nx-alert-dismissible {
  padding-right: 3rem;
}

.nx-alert-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  cursor: pointer;
}

/* Alert dengan Ikon */
.nx-alert-icon {
  padding-left: 2.5rem;
}

.nx-alert-icon i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Alert dengan Link */
.nx-alert a {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
}

/* Alert dengan Tombol Aksi */
.nx-alert-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nx-alert-buttons {
  display: flex;
  gap: 0.5rem;
}

/* Alert dengan List */
.nx-alert-list {
  margin: 0.5rem 0 0;
  padding-left: 1.5rem;
}

/* Alert dengan Progress */
.nx-alert-progress {
  padding-bottom: 2.5rem;
  border-width: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nx-alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.nx-alert-title i {
  margin-right: 0.5rem;
  opacity: 0.8;
}


/* Badge in Progress */
.nx-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: bold;
}

.nx-badge-warning {
  background: #fff3cd;
  color: #664d03;
}

/* Alert Dark Mode */
.nx-dark {
  color: #fff;
}

.nx-dark.nx-alert-primary {
  background-color: #084298;
  border-color: #0a58ca;
}

.nx-dark.nx-alert-success {
  background-color: #0f5132;
  border-color: #146c43;
}

.nx-dark.nx-alert-warning {
  background-color: #664d03;
  border-color: #997404;
}

.nx-dark.nx-alert-danger {
  background-color: #842029;
  border-color: #b02a37;
}

.nx-dark.nx-alert-info {
  background-color: #055160;
  border-color: #087990;
}

/* Alert dengan Prioritas */
.nx-priority-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  margin-right: 0.75rem;
}

.nx-priority-high .nx-priority-indicator {
  background: #dc3545;
  color: white;
}

.nx-priority-medium .nx-priority-indicator {
  background: #ffc107;
  color: #000;
}

.nx-priority-low .nx-priority-indicator {
  background: #0dcaf0;
  color: #000;
}

/* Alert dengan Timer */
.nx-alert-timer {
  overflow: hidden;
}

.nx-timer-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: currentColor;
  opacity: 0.5;
  animation: timer-countdown 5s linear forwards;
}

@keyframes timer-countdown {
  from { width: 100%; }
  to { width: 0%; }
}

/* Responsive */
@media (max-width: 768px) {
  .nx-alert-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .nx-alert-buttons {
    margin-top: 1rem;
  }
}

/* Alert dengan Progress */
.nx-alert-progress {
  padding-bottom: 2.5rem;
}

.nx-alert-progress .nx-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  border-radius: 0 0 0.375rem 0.375rem;
}

.nx-alert-progress .nx-progress-bar {
  height: 0.5rem;
  font-size: 0.75rem;
  line-height: 0.5rem;
}
.nx-alert-progress .nx-progress-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.nx-alert-progress .nx-progress-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

.nx-alert-progress .nx-progress-icon {
  margin-right: 0.5rem;
}
/*AND Alert*/
 
/* Style untuk Badge */
.nx-badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    background-color: #e9ecef;
    color: #212529;
     margin: 0 5px;
}

/* Variasi Warna */
.nx-badge.nx-primary {
    background-color: #007bff;
    color: #fff;
}

.nx-badge.nx-success {
    background-color: #28a745;
    color: #fff;
}

.nx-badge.nx-warning {
    background-color: #ffc107;
    color: #212529;
}

.nx-badge.nx-danger {
    background-color: #dc3545;
    color: #fff;
}

.nx-badge.nx-info {
    background-color: #17a2b8;
    color: #fff;
}

/* Badge Pill */
.nx-badge.nx-pill {
    border-radius: 10rem;
    padding-right: 0.8em;
    padding-left: 0.8em;
}

/* Badge dalam Button */
.nx-btn .nx-badge {
    position: relative;
    top: -1px;
}


/* Badge Notifikasi Icon */
.nx-icon-badge {
    position: relative;
    display: inline-flex;
    /*align-items: center;*/
    justify-content: center;
    margin: 0 20px;
    padding: 8px;
}

.nx-icon-badge i {
    font-size: 24px;
    color: #495057;
}

/* Badge Dot (untuk notifikasi bell) */
.nx-badge.nx-badge-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    border-radius: 10px;
    border: 2px solid #fff;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
}

/* Badge Count (untuk email dan cart) */
.nx-badge.nx-badge-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    border-radius: 10px;
    border: 2px solid #fff;
}

/* Hover effect */
.nx-icon-badge:hover {
    cursor: pointer;
}

.nx-icon-badge:hover i {
    color: #000;
}

/* Badge Positioned */
.nx-position-relative {
    position: relative;
    display: block;
    margin-bottom: 15px;
}

.nx-box {
    background: #fff;
    border: 1px solid #dee2e6;
    padding: 15px;
    text-align: left;
    border-radius: 4px;
}

/* Posisi Badge */
.nx-badge.nx-positioned {
    position: absolute;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
}

/* Top Right */
.nx-badge.nx-top-right {
    top: -10px;
    right: -10px;
}

/* Top Left */
.nx-badge.nx-top-left {
    top: -10px;
    left: -10px;
}

/* Bottom Right */
.nx-badge.nx-bottom-right {
    bottom: -10px;
    right: -10px;
}

/* Bottom Left */
.nx-badge.nx-bottom-left {
    bottom: -10px;
    left: -10px;
}

/* Warna khusus untuk badge positioned */
.nx-badge.nx-positioned.nx-danger {
    background-color: #dc3545;
}

.nx-badge.nx-positioned.nx-primary {
    background-color: #007bff;
}

.nx-badge.nx-positioned.nx-success {
    background-color: #28a745;
}

.nx-badge.nx-positioned.nx-warning {
    background-color: #ffc107;
    color: #000;
}


.demo-box .nx-box {
    min-width: 200px;
    margin-bottom: 20px;
}

/* Animasi Counter */
.nx-badge.nx-animate {
    transition: all 0.3s ease;
}

.nx-badge.nx-animate:hover {
    transform: scale(1.1);
}

/* Status Indicator */
.nx-badge.nx-status {
    display: inline-flex;
    /*align-items: center;*/
    gap: 5px;
    padding: 0.4em 0.8em;
}

.nx-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.nx-status-online { background: #28a745; }
.nx-status-offline { background: #dc3545; }
.nx-status-away { background: #ffc107; }

/* Gradient Badges */
.nx-badge.nx-gradient-primary {
    background: linear-gradient(45deg, #007bff, #00c6ff);
    color: white;
}

.nx-badge.nx-gradient-success {
    background: linear-gradient(45deg, #28a745, #84cc16);
    color: white;
}

.nx-badge.nx-pattern {
    background-image: repeating-linear-gradient(45deg, #6c757d 0, #6c757d 3px, transparent 0, transparent 6px);
    background-color: #f8f9fa;
    color: #212529;
}

/* Badge Group */
.nx-badge-group {
    display: inline-flex;
    gap: 5px;
}

/* Badge Framework Inspired */
.nx-badge-framework {
    margin-top: 20px;
}

/* Soft Style (Terinspirasi Bootstrap) */
.nx-badge-framework h5 {
    margin-bottom: 10px;
}



/* Gradient Style (Terinspirasi Tailwind) */
.nx-badge-framework .nx-gradient-ocean {
    background: linear-gradient(45deg, #007bff, #00c6ff);
    color: white;
}

.nx-badge-framework .nx-gradient-sunset {
    background: linear-gradient(45deg, #ffc107, #ffa500);
    color: white;
}

.nx-badge-framework .nx-gradient-forest {
    background: linear-gradient(45deg, #28a745, #84cc16);
    color: white;
}

.nx-badge-framework .nx-gradient-aurora {
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    color: white;
}

.nx-badge-framework .nx-gradient-cosmic {
    background: linear-gradient(45deg, #dc3545, #ff6b6b);
    color: white;
}

/* Bordered Style (Terinspirasi UIkit) */
.nx-badge-framework .nx-border-blue {
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
}

.nx-badge-framework .nx-border-green {
    border: 1px solid #28a745;
    background-color: #28a745;
    color: white;
}

.nx-badge-framework .nx-border-red {
    border: 1px solid #dc3545;
    background-color: #dc3545;
    color: white;
}

.nx-badge-framework .nx-border-orange {
    border: 1px solid #ffc107;
    background-color: #ffc107;
    color: white;
}

.nx-badge-framework .nx-border-purple {
    border: 1px solid #9a00ff;
    background-color: #9a00ff;
    color: white;
}

/* Modern Style (Terinspirasi Bulma) */
.nx-badge-framework .nx-modern-dark {
    background-color: #333;
    color: white;
}

.nx-badge-framework .nx-modern-success {
    background-color: #28a745;
    color: white;
}

.nx-badge-framework .nx-modern-info {
    background-color: #17a2b8;
    color: white;
}

.nx-badge-framework .nx-modern-warning {
    background-color: #ffc107;
    color: white;
}

/* Framework Inspired Badges */

/* Soft Style */
.nx-badge[class*="nx-soft-"] {
    font-weight: 500;
    padding: 0.35em 0.8em;
    border-radius: 6px;
}

.nx-badge.nx-soft-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.nx-badge.nx-soft-green {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.nx-badge.nx-soft-red {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.nx-badge.nx-soft-yellow {
    background: rgba(234, 179, 8, 0.1);
    color: #ca8a04;
}

.nx-badge.nx-soft-purple {
    background: rgba(168, 85, 247, 0.1);
    color: #9333ea;
}

/* Gradient Style */
.nx-badge[class*="nx-gradient-"] {
    color: white;
    padding: 0.4em 1em;
    border-radius: 20px;
    font-weight: 600;
}

.nx-badge.nx-gradient-ocean {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.nx-badge.nx-gradient-sunset {
    background: linear-gradient(135deg, #f97316, #dc2626);
}

.nx-badge.nx-gradient-forest {
    background: linear-gradient(135deg, #22c55e, #15803d);
}

.nx-badge.nx-gradient-aurora {
    background: linear-gradient(135deg, #6366f1, #a855f7);
}

.nx-badge.nx-gradient-cosmic {
    background: linear-gradient(135deg, #3b82f6, #ec4899);
}

/* Bordered Style */
.nx-badge[class*="nx-border-"] {
    background: white;
    padding: 0.35em 0.8em;
    border: 2px solid;
    border-radius: 4px;
    font-weight: 600;
}

.nx-badge.nx-border-blue {
    border-color: #3b82f6;
    color: #2563eb;
}

.nx-badge.nx-border-green {
    border-color: #22c55e;
    color: #16a34a;
}

.nx-badge.nx-border-red {
    border-color: #ef4444;
    color: #dc2626;
}

.nx-badge.nx-border-orange {
    border-color: #f97316;
    color: #ea580c;
}

.nx-badge.nx-border-purple {
    border-color: #a855f7;
    color: #9333ea;
}

/* Modern Style */
.nx-badge[class*="nx-modern-"] {
    padding: 0.4em 0.8em;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    /*align-items: center;*/
    gap: 4px;
}

.nx-badge[class*="nx-modern-"] i {
    font-size: 0.85em;
}

.nx-badge.nx-modern-dark {
    background: #1f2937;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nx-badge.nx-modern-success {
    background: #059669;
    color: white;
    box-shadow: 0 2px 4px rgba(5,150,105,0.2);
}

.nx-badge.nx-modern-info {
    background: #0284c7;
    color: white;
    box-shadow: 0 2px 4px rgba(2,132,199,0.2);
}

.nx-badge.nx-modern-warning {
    background: #d97706;
    color: white;
    box-shadow: 0 2px 4px rgba(217,119,6,0.2);
}

/* Hover Effects */
.nx-badge[class*="nx-soft-"]:hover,
.nx-badge[class*="nx-border-"]:hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

.nx-badge[class*="nx-gradient-"]:hover {
    filter: brightness(1.1);
    transition: filter 0.2s ease;
}

.nx-badge[class*="nx-modern-"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

/* Badge Sizes */
.nx-badge-sm {
    font-size: 65%;
    padding: 0.2em 0.5em;
}

.nx-badge {
    font-size: 75%;
    padding: 0.25em 0.6em;
}

.nx-badge-lg {
    font-size: 85%;
    padding: 0.3em 0.7em;
}

/* Pill badge sizes */
.nx-badge.nx-pill.nx-badge-sm {
    padding-right: 0.6em;
    padding-left: 0.6em;
}

.nx-badge.nx-pill {
    padding-right: 0.8em;
    padding-left: 0.8em;
}

.nx-badge.nx-pill.nx-badge-lg {
    padding-right: 1em;
    padding-left: 1em;
}




/*AND Badge*/
/* Media Object Base */

.nx-media {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.nx-media-img {
  margin-right: 1rem;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
}

.nx-media-body {
  flex: 1;
}

.nx-media-body h5 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.nx-media-body p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

/* Media Object Alignment */
.nx-media-center {
  align-items: center;
}

.nx-media-bottom {
  align-items: flex-end;
}

/* Media Object Sizes */
.nx-media-sm .nx-media-img {
  width: 48px;
  height: 48px;
}

.nx-media-lg .nx-media-img {
  width: 96px;
  height: 96px;
}

/* Media Object Responsive */
@media (max-width: 576px) {
  .nx-media {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .nx-media-img {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

/* Media Object Border */
.nx-media-bordered {
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

/* Media Object Hover Effect */
.nx-media-hover:hover {
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}

/* Media Object Right Position */
.nx-media.nx-media-right {
  flex-direction: row-reverse !important;
}

.nx-media.nx-media-right .nx-media-img {
  margin-right: 0;
  margin-left: 1rem;
}

/* Responsive untuk media-right */
@media (max-width: 576px) {
  .nx-media.nx-media-right {
    flex-direction: column !important;
    text-align: center;
  }
  
  .nx-media.nx-media-right .nx-media-img {
    margin-left: 0;
    margin-top: 1rem;
    margin-bottom: 0;
  }
}

/* Media Object Position */
.nx-media-right {
  justify-content: flex-end;
  text-align: right;
}

.nx-media-right .nx-media-body {
  margin-right: 1rem;
  margin-left: 0;
  order: -1;
}

/* Responsive untuk media position */
@media (max-width: 576px) {
  .nx-media-right {
    justify-content: center;
    text-align: center;
  }
  
  .nx-media-right .nx-media-body {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

/* Media Object Position */
.nx-media-text-right {
  text-align: right;
}

.nx-media-text-right .nx-media-body {
  text-align: right;
}

/* Responsive untuk text alignment */
@media (max-width: 576px) {
  .nx-media-text-right {
    text-align: center;
  }
  
  .nx-media-text-right .nx-media-body {
    text-align: center;
  }
}

/* Media Object Text Position with Image Position */
.nx-media-text-left {
  text-align: left;
}

.nx-media-text-left .nx-media-body {
  text-align: left;
}

.nx-media-reverse {
  flex-direction: row-reverse;
}

.nx-media-reverse .nx-media-img {
  margin-right: 0;
  margin-left: 1rem;
}

/* Responsive untuk text-left dengan reverse */
@media (max-width: 576px) {
  .nx-media-text-left {
    text-align: center;
  }
  
  .nx-media-text-left .nx-media-body {
    text-align: center;
  }

  .nx-media-reverse .nx-media-img {
    margin-left: 0;
    margin-top: 1rem;
  }
}

/* Media Object Nesting */
.nx-media .nx-media {
  margin-top: 1rem;
  margin-left: 3rem;
}

/* Media Object Badge */
.nx-media-img-wrapper {
  position: relative;
}

.nx-media-badge  {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 0.25rem 0.5rem;
  background-color: #dc3545;
  color: white;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

/*AND Media Object*/



.nx-breadcrumb {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background-color: #f8f9fa;
    border-radius: 4px;
    margin: 10px 0;
}

.nx-breadcrumb-item {
    display: flex;
    align-items: center;
    color: #6c757d;
}

.nx-breadcrumb-item:not(:last-child)::after {
    content: "/";
    margin: 0 8px;
    color: #6c757d;
}

.nx-breadcrumb-item a {
    color: #0d6efd;
    text-decoration: none;
}

.nx-breadcrumb-item a:hover {
    text-decoration: underline;
}

.nx-breadcrumb-item.active {
    color: #212529;
}

/* Variasi Warna */
.nx-breadcrumb.dark {
    background-color: #343a40;
}

.nx-breadcrumb.dark .nx-breadcrumb-item {
    color: #fff;
}

.nx-breadcrumb.dark .nx-breadcrumb-item a {
    color: #9ec5fe;
}

/* Custom Separator */
.nx-breadcrumb.separator-arrow .nx-breadcrumb-item:not(:last-child)::after {
    content: "→";
    margin: 0 8px;
}

/* Ukuran */
.nx-breadcrumb.small {
    font-size: 0.875rem;
    padding: 4px 12px;
}

.nx-breadcrumb.large {
    font-size: 1.25rem;
    padding: 12px 20px;
}

/* Variasi Warna */
.nx-breadcrumb.primary {
    background-color: #0d6efd;
}

.nx-breadcrumb.primary .nx-breadcrumb-item,
.nx-breadcrumb.primary .nx-breadcrumb-item a {
    color: #fff;
}

.nx-breadcrumb.success {
    background-color: #198754;
}

.nx-breadcrumb.success .nx-breadcrumb-item,
.nx-breadcrumb.success .nx-breadcrumb-item a {
    color: #fff;
}

/* Breadcrumb dengan Icon */
.nx-breadcrumb-item i {
    margin-right: 5px;
}

/* Breadcrumb dengan Background Gradient */
.nx-breadcrumb.gradient {
    background: linear-gradient(45deg, #0d6efd, #0dcaf0);
}

.nx-breadcrumb.gradient .nx-breadcrumb-item,
.nx-breadcrumb.gradient .nx-breadcrumb-item a {
    color: #fff;
}

/* Breadcrumb dengan Border */
.nx-breadcrumb.bordered {
    border: 1px solid #dee2e6;
    background-color: transparent;
}

/* Breadcrumb dengan Shadow */
.nx-breadcrumb.shadow {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Breadcrumb Rounded */
.nx-breadcrumb.rounded-pill {
    border-radius: 50rem;
}

/* Breadcrumb dengan Hover Effect */
.nx-breadcrumb.hover-effect .nx-breadcrumb-item a:hover {
    color: #0a58ca;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Breadcrumb Responsive */
@media (max-width: 576px) {
    .nx-breadcrumb.responsive {
        flex-wrap: wrap;
    }
    
    .nx-breadcrumb.responsive .nx-breadcrumb-item {
        margin: 2px 0;
    }
}

/* Modern Breadcrumb Styles */
.nx-breadcrumb.modern {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(231, 231, 231, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nx-breadcrumb.modern .nx-breadcrumb-item:not(:last-child)::after {
    content: "›";
    font-size: 1.2em;
    margin: 0 10px;
    color: #9ca3af;
}

/* Floating Style */
.nx-breadcrumb.floating {
    position: relative;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.nx-breadcrumb.floating:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Minimal Style */
.nx-breadcrumb.minimal {
    background: none;
    padding: 8px 0;
}

.nx-breadcrumb.minimal .nx-breadcrumb-item:not(:last-child)::after {
    content: "•";
    font-weight: bold;
    color: #d1d5db;
}

/* Neumorphism Style */
.nx-breadcrumb.neumorphic {
    background: #f0f0f0;
    box-shadow: 5px 5px 10px #d9d9d9, 
                -5px -5px 10px #ffffff;
    border: none;
}

/* Animated Separator */
.nx-breadcrumb.animated .nx-breadcrumb-item:not(:last-child)::after {
    content: "→";
    transition: transform 0.2s;
}

.nx-breadcrumb.animated:hover .nx-breadcrumb-item:not(:last-child)::after {
    transform: translateX(3px);
}

/* Card Style */
.nx-breadcrumb.card-style {
    background: white;
    border-radius: 10px;
    padding: 12px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
                0 1px 2px rgba(0, 0, 0, 0.06);
}

.nx-breadcrumb.card-style .nx-breadcrumb-item a {
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.nx-breadcrumb.card-style .nx-breadcrumb-item a:hover {
    background-color: #f3f4f6;
    text-decoration: none;
}
/*AND breadcrumb*/




/* Base Card Styles */
.nx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--nx-card-bg);
  border: 1px solid var(--nx-card-border-color);
  border-radius: var(--nx-card-border-radius);
  margin-bottom: 1rem;
}

.nx-card-header {
  padding: var(--nx-card-spacing);
  border-bottom: 1px solid var(--nx-card-border-color);
  background-color: rgb(0 0 0 / 0%);
}

.nx-card-body {
  padding: var(--nx-card-spacing);
  flex: 1 1 auto;
}

.nx-card-footer {
  padding: var(--nx-card-spacing);
  border-top: 1px solid var(--nx-card-border-color);
  background-color: rgb(0 0 0 / 0%);
}

.nx-card-title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1a202c;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.nx-card-text {
  margin-bottom: 1rem;
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 400;
}

/* Card Variants */
.nx-card-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  border: none;
  color: white;
}

.nx-card-gradient .nx-card-title,
.nx-card-gradient .nx-card-text {
  color: white;
  opacity: 0.9;
}

.nx-card-floating {
  border: none;
  box-shadow: var(--nx-card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nx-card-floating:hover {
  transform: translateY(-5px);
  box-shadow: var(--nx-card-hover-shadow);
}

.nx-card-borderless {
  border: none;
  background: #f8fafc;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.nx-card-borderless .nx-card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.nx-card-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Card Groups */
.nx-card-group {
  display: flex;
  gap: 1rem;
}

.nx-card-group .nx-card {
  flex: 1;
  margin-bottom: 0;
}

/* Card dengan Image */
.nx-card-img-top {
  width: 100%;
  height: auto;
  border-top-left-radius: calc(var(--nx-card-border-radius) - 1px);
  border-top-right-radius: calc(var(--nx-card-border-radius) - 1px);
}

/* Horizontal Card */
.nx-card-horizontal {
  flex-direction: row;
}

.nx-card-horizontal .nx-card-side {
  flex: 0 0 33.333333%;
}

.nx-card-horizontal .nx-card-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 0;
  border-bottom-left-radius: calc(var(--nx-card-border-radius) - 1px);
}

/* Interactive Cards */
.nx-card-flip {
  perspective: 1000px;
  height: 200px;
}

.nx-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.nx-card-flip:hover .nx-card-inner {
  transform: rotateY(180deg);
}

.nx-card-front,
.nx-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--nx-card-border-radius);
}

.nx-card-back {
  transform: rotateY(180deg);
  background-color: #4f46e5;
  color: white;
}

/* Style untuk teks dalam card interaktif */
.nx-card-back .nx-card-title,
.nx-card-back .nx-card-text {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.nx-card-back .nx-card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.nx-card-back .nx-card-text {
  opacity: 0.95;
}

/* Style untuk card front */
.nx-card-front {
  background-color: var(--nx-card-bg);
}

/* Style untuk card back */
.nx-card-back {
  transform: rotateY(180deg);
  background-color: #4f46e5;
}

.nx-card-back .nx-card-title,
.nx-card-back .nx-card-text,
.nx-card-back .nx-card-body {
  color: white !important;
}

.nx-card-back .nx-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}




/* Card dengan Overlay */
.nx-card-overlay {
  position: relative;
  overflow: hidden;
}

.nx-card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--nx-card-spacing);
  background: linear-gradient(to bottom, 
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.95) 100%
  );
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}

/* Style khusus untuk teks dalam overlay */
.nx-card-overlay .nx-card-title {
  color: #ffffff !important;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  position: relative;
  z-index: 2;
}

.nx-card-overlay .nx-card-text {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  margin-bottom: 0;
  font-size: 1rem;
  position: relative;
  z-index: 2;
}

/* Efek hover untuk card overlay */
.nx-card-overlay:hover .nx-card-img-overlay {
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.95) 100%
  );
}

/* Card List Style */
.nx-card-list .nx-card-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--nx-primary);
  padding: 1rem;
}

/* Card Expandable */
.nx-card-expandable .nx-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nx-card-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
}

/* Card Grid */
.nx-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Untuk card dengan background gelap */
.nx-card-gradient .nx-card-text,
.nx-card-overlay .nx-card-text {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Untuk card dengan background terang */
.nx-card-floating .nx-card-text,
.nx-card-borderless .nx-card-text,
.nx-card-glass .nx-card-text {
  color: #1f2937;
}

/* Untuk card dengan list style */
.nx-card-list .nx-card-text {
  color: #4b5563;
  margin-bottom: 0.5rem;
}

/* Untuk card dengan hover effect */
.nx-card-floating:hover .nx-card-text {
  color: #111827;
}

/* Untuk card dengan background gelap */
.nx-card-gradient .nx-card-title,
.nx-card-overlay .nx-card-title {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  font-weight: 600;
}

/* Untuk card dengan background terang */
.nx-card-floating .nx-card-title,
.nx-card-borderless .nx-card-title,
.nx-card-glass .nx-card-title {
  color: #111827;
  font-weight: 600;
}

/* Untuk card dengan list style */
.nx-card-list .nx-card-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #2d3748;
}

/* Untuk card dengan hover effect */
.nx-card-floating:hover .nx-card-title {
  color: #000;
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

/* Untuk card dengan expandable */
.nx-card-expandable .nx-card-title {
  margin-bottom: 0;
  font-size: 1.1rem;
}

/* Untuk card dengan grid */
.nx-card-grid .nx-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2d3748;
}

/* Responsive Styles */
@media (max-width: 768px) {
  /* Card Groups */
  .nx-card-group {
    flex-direction: column;
    gap: 1rem;
  }

  /* Card Grid */
  .nx-card-grid {
    grid-template-columns: 1fr;
  }

  /* Horizontal Cards */
  .nx-card-horizontal {
    flex-direction: column;
  }

  .nx-card-horizontal .nx-card-side {
    flex: 0 0 200px;
  }

  .nx-card-horizontal .nx-card-side img {
    border-top-right-radius: calc(var(--nx-card-border-radius) - 1px);
    border-bottom-left-radius: 0;
  }

  /* Card dengan Gambar */
  .nx-card-img-top {
    height: 200px;
    object-fit: cover;
  }

  
  /* Table Responsive */
  .nx-table-responsive {
    margin: 0 -1rem;
    padding: 0 1rem;
    overflow-x: auto;
  }

  /* Card Title dan Text */
  .nx-card-title {
    font-size: 1.1rem;
  }

  .nx-card-text {
    font-size: 0.9rem;
  }

  /* Card Flip */
  .nx-card-flip {
    height: 250px;
  }
}

/* Untuk layar sangat kecil */
@media (max-width: 480px) {
  .nx-card-body {
    padding: 1rem;
  }

  .nx-card-header,
  .nx-card-footer {
    padding: 0.75rem 1rem;
  }

  /* Card Groups dan Grid dengan margin yang lebih kecil */
  .nx-card-group,
  .nx-card-grid {
    gap: 0.75rem;
    margin-top: 0.75rem;
  }

  /* Mengatur ukuran gambar untuk mobile */
  .nx-card-img-top,
  .nx-card-horizontal .nx-card-side {
    height: 180px;
  }


}

/* Status Cards */
.nx-card-status {
  position: relative;
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
}

.nx-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* Status Variants */
.nx-status-success {
  border-left-color: #10b981;
}

.nx-status-warning {
  border-left-color: #f59e0b;
}

.nx-status-error {
  border-left-color: #ef4444;
}

.nx-status-info {
  border-left-color: #3b82f6;
}

.nx-status-success .nx-status-indicator {
  background-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.nx-status-warning .nx-status-indicator {
  background-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.nx-status-error .nx-status-indicator {
  background-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.nx-status-info .nx-status-indicator {
  background-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}



/* Tabbed Cards */
.nx-card-tabs .nx-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--nx-card-border-color);
  gap: 1rem;
}

.nx-tabs li {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  color: #6b7280;
}

.nx-tabs li:hover {
  color: #4f46e5;
}

.nx-tabs li.active {
  border-bottom-color: #4f46e5;
  color: #4f46e5;
  font-weight: 500;
}

.nx-tab-content {
  display: none;
  padding: 1rem 0;
}

.nx-tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Timeline Cards */
.nx-card-timeline {
  position: relative;
  padding-left: 2rem;
}

.nx-card-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #e5e7eb 0%, #6366f1 100%);
}

.nx-card-timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.nx-timeline-dot {
  width: 12px;
  height: 12px;
  background-color: #6366f1;
  border-radius: 50%;
  position: absolute;
  left: -2.3rem;
  top: 1.5rem;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #6366f1;
  transition: all 0.3s ease;
}

.nx-card-timeline-item:hover {
  transform: translateX(5px);
}

.nx-card-timeline-item:hover .nx-timeline-dot {
  transform: scale(1.2);
  background-color: #4f46e5;
}

/* Hover Effects */
.nx-card-status:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.nx-card-progress:hover .nx-progress-bar {
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .nx-card-timeline {
    padding-left: 1.5rem;
  }
  
  .nx-timeline-dot {
    left: -1.8rem;
  }
  
  .nx-tabs {
    flex-wrap: wrap;
  }
  
  .nx-tabs li {
    flex: 1 1 auto;
    text-align: center;
  }
}
/*AND Card*/
  /* Container styles */
  .carousel-container {
    margin: 20px 0;
  }
  .carousel-preview {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  /* Carousel base styles */
  .nx-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
  }

  .nx-carousel-inner {
    position: relative;
    width: 100%;
    height: 400px;
  }

  /* Carousel items */
  .nx-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, 
                visibility 1s ease-in-out,
                transform 1s ease-in-out;
    transform: scale(1.1);
  }

  .nx-carousel-item.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }

  .nx-carousel-item.preparing {
    opacity: 0;
    visibility: visible;
    transform: scale(0.9);
  }

  .nx-carousel-item.fade-out {
    opacity: 0;
    transform: scale(1.1);
  }

  .nx-carousel-item.fade-in {
    opacity: 1;
    transform: scale(1);
  }

  /* Optimasi performa animasi */
  .nx-carousel-item {
    will-change: opacity, transform;
    backface-visibility: hidden;
    perspective: 1000px;
  }

  /* Pastikan gambar tidak blur saat transformasi */
  .nx-carousel-item img {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Tambahkan efek blur saat transisi */
  .nx-carousel-item.fade-out,
  .nx-carousel-item.preparing {
    filter: blur(3px);
  }

  .nx-carousel-item.active,
  .nx-carousel-item.fade-in {
    filter: blur(0);
    transition: opacity 1s ease-in-out, 
                visibility 1s ease-in-out,
                transform 1s ease-in-out,
                filter 1s ease-in-out;
  }

  .nx-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Navigation buttons */
  .nx-carousel-prev,
  .nx-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
  }

  .nx-carousel-prev:hover,
  .nx-carousel-next:hover {
    background: rgba(0, 0, 0, 0.8);
  }

  .nx-carousel-prev {
    left: 10px;
  }

  .nx-carousel-next {
    right: 10px;
  }

  /* Caption styles */
  .nx-carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    text-align: center;
  }

  .nx-carousel-caption h5 {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
  }

  .nx-carousel-caption p {
    margin: 0;
    font-size: 1rem;
  }

  /* Indicators */
  .nx-carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
  }

  .nx-carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease;
  }

  .nx-carousel-indicators button.active {
    background: white;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .nx-carousel-inner {
      height: 300px;
    }

    .nx-carousel-caption {
      padding: 10px;
    }

    .nx-carousel-caption h5 {
      font-size: 1rem;
    }

    .nx-carousel-caption p {
      font-size: 0.875rem;
    }

    .nx-carousel-prev,
    .nx-carousel-next {
      padding: 10px;
      width: 35px;
      height: 35px;
      font-size: 14px;
    }
  }

  /* Tambahkan CSS untuk loading state */
  .nx-carousel-item.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nx-carousel-item.loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top-color: #666;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* CSS untuk progress bar */
  .nx-carousel-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.3);
  }

  .nx-carousel-progress .progress-bar {
    width: 0;
    height: 100%;
    background: white;
    transition: width 5s linear;
  }

  .nx-carousel-progress.active .progress-bar {
    width: 100%;
  }

  /* Mobile Optimization Styles */
  .nx-carousel-mobile {
    touch-action: pan-y pinch-zoom;
  }

  .nx-carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  .nx-carousel-overlay .swipe-hint {
    color: white;
    font-size: 1.2rem;
    padding: 10px 20px;
    background: rgba(0,0,0,0.5);
    border-radius: 20px;
    animation: fadeInOut 2s infinite;
  }

  @keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }

  /* Hide swipe hint after first interaction */
  .nx-carousel-mobile.interacted .nx-carousel-overlay {
    opacity: 0;
    pointer-events: none;
  }

  /* Mobile-specific indicator styles */
  .nx-carousel-indicators.mobile {
    bottom: 10px;
  }

  .nx-carousel-indicators.mobile button {
    width: 30px;
    height: 4px;
    border-radius: 2px;
  }

  /* Touch feedback */
  .nx-carousel-mobile .nx-carousel-item {
    transition: transform 0.3s ease-out;
  }

  .nx-carousel-mobile .nx-carousel-item.swiping {
    transition: none;
  }

  /* Improved touch targets */
  @media (max-width: 767px) {
    .nx-carousel-mobile .nx-carousel-prev,
    .nx-carousel-mobile .nx-carousel-next {
      min-width: 44px; /* Minimum touch target size */
      min-height: 44px;
    }
    
    .nx-carousel-indicators.mobile button {
      min-width: 44px;
      margin: 0 4px;
    }
  }

  /* Gesture hint styles */
  .gesture-hint {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background: rgba(0,0,0,0.6);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .nx-carousel-mobile:not(.interacted) .gesture-hint {
    opacity: 1;
  }

  /* Autoplay Controls */
  .nx-carousel-play-toggle {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.3s ease;
  }

  .nx-carousel-play-toggle:hover {
    background: rgba(0, 0, 0, 0.8);
  }

  /* Progress bar animation */
  @keyframes progress {
    from { width: 0; }
    to { width: 100%; }
  }

  .nx-carousel-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.3);
  }

  .nx-carousel-progress .progress-bar {
    height: 100%;
    background: white;
    width: 0;
  }

  .nx-carousel-progress.active .progress-bar {
    animation: progress var(--interval, 3000ms) linear;
  }

  /* Pause on hover styles */
  .nx-carousel-pause-hover:hover .progress-bar {
    animation-play-state: paused;
  }
/* AND carousel */

.nx-collapse {
  display: none;
}

.nx-collapse.show {
  display: block;
}

.nx-collapse-btn {
  cursor: pointer;
  padding: 10px 15px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 5px;
  width: 100%;
  text-align: left;
}

.nx-collapse-btn:hover {
  background: #e5e5e5;
}

.nx-collapse-content {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* Style untuk Accordion */
.nx-accordion-item {
  margin-bottom: 5px;
}

/* Style untuk Custom Collapse */
.nx-custom-collapse-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
}

.nx-custom-collapse-content {
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Style untuk Animated Collapse */
.nx-collapse.animated {
  transition: all 0.3s ease-out;
  max-height: 0;
  overflow: hidden;
}

.nx-collapse.animated.show {
  max-height: 500px;
}

/* Style untuk Nested Collapse */
.nx-nested-collapse {
  margin-left: 20px;
}

/* Custom Style Variants */
.nx-collapse-btn.nx-primary {
  background: #007bff;
  color: white;
  border: none;
}

.nx-collapse-btn.nx-success {
  background: #28a745;
  color: white;
  border: none;
}

.nx-collapse-btn.nx-danger {
  background: #dc3545;
  color: white;
  border: none;
}

.nx-collapse-btn.nx-warning {
  background: #ffc107;
  color: #000;
  border: none;
}

.nx-collapse-btn.nx-info {
  background: #17a2b8;
  color: white;
  border: none;
}

/* Custom Content Styles */
.nx-collapse-content.nx-bordered {
  border: 2px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nx-collapse-content.nx-rounded {
  border-radius: 15px;
  background: #f8f9fa;
}

.nx-collapse-content.nx-shadow {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border: none;
}

/*AND Collapse*/


  .nx-dropdown {
    position: relative;
    display: inline-block;
  }

  .nx-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 4px;
  }

  .nx-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .nx-dropdown-content a:hover {
    background-color: #f1f1f1;
  }

  .nx-dropdown:hover .nx-dropdown-content {
    display: block;
  }

  /* Arah dropdown */
  .nx-dropdown-top {
    bottom: 100%;
    margin-bottom: 5px;
  }

  .nx-dropdown-right {
    top: 0;
    left: 100%;
    margin-left: 5px;
  }

  .nx-dropdown-left {
    top: 0;
    right: 100%;
    margin-right: 5px;
  }



  /* Style untuk dropdown dengan pembatas */
  .nx-dropdown-divider {
    border-bottom: 1px solid #e9ecef;
    margin: 0.5rem 0;
  }

  /* Style untuk header dropdown */
  .nx-dropdown-header {
    padding: 8px 16px;
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 600;
  }

  /* Style untuk item nonaktif */
  .nx-dropdown-content a.disabled {
    color: #6c757d;
    pointer-events: none;
    background-color: transparent;
  }

  /* Style untuk dropdown dengan klik */
  .nx-dropdown-content.show {
    display: block;
  }
/*AND Dropdown*/
.nx-offcanvas {
  position: fixed;
  background: white;
  z-index: 49050;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

.nx-offcanvas[data-position="left"] {
  top: 0;
  left: 0;
  height: 100%;
  width: 300px;
  transform: translateX(-100%);
}

.nx-offcanvas[data-position="right"] {
  top: 0;
  right: 0;
  height: 100%;
  width: 300px;
  transform: translateX(100%);
}

.nx-offcanvas[data-position="top"] {
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  transform: translateY(-100%);
}

.nx-offcanvas[data-position="bottom"] {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  transform: translateY(100%);
}

.nx-offcanvas.show {
  visibility: visible;
  transform: translate(0, 0);
}

.nx-offcanvas-header {
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nx-offcanvas-body {
  padding: 1rem;
}

.nx-offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

.nx-offcanvas-backdrop.show {
  opacity: 1;
  visibility: visible;
}
/*AND offcanvas*/
.nx-toast {
  position: relative;
  min-width: 250px;
  padding: 15px;
  margin-bottom: 10px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: none;
}

.nx-toast.show {
  opacity: 1;
  display: block;
}

.toast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 5px;
}

.nx-toast-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.nx-toast-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.nx-toast-warning {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

/* Posisi Toast */
.toast-container.top-right {
  top: 20px;
  right: 20px;
  bottom: auto;
}

.toast-container.top-left {
  top: 20px;
  left: 20px;
  right: auto;
  bottom: auto;
}

.toast-container.bottom-left {
  bottom: 20px;
  left: 20px;
  right: auto;
}

/* Animasi */
.fade-animation {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.fade-animation.show {
  opacity: 1;
}

.slide-animation {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.slide-animation.show {
  transform: translateX(0);
}

/* Progress Bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.7);
  width: 0;
  transition: width linear;
}

/* Stacking */
.toast-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast-stack {
  position: relative;
  transition: transform 0.3s ease-in-out;
}

/* Notifikasi Style Toast */
.notifikasi-toast {
  max-width: 350px;
  padding: 12px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.notifikasi-toast .toast-content {
  display: flex;
  gap: 12px;
}

.notifikasi-toast .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.notifikasi-toast .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notifikasi-toast .notification-content {
  flex: 1;
}

.notifikasi-toast .notification-text {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.4;
}

.notifikasi-toast .notification-time {
  display: block;
  color: #65676B;
  font-size: 12px;
  margin-top: 4px;
}

.notifikasi-toast .notification-actions {
  display: flex;
  gap: 8px;
}

.notifikasi-toast .nx-btn.nx-sm {
  padding: 4px 12px;
  font-size: 13px;
}

.notifikasi-toast .nx-btn.nx-light {
  background: #E4E6EB;
  color: #050505;
}

.notifikasi-toast .nx-btn.nx-light:hover {
  background: #D8DADF;
} 
/*AND toast*/
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 1000;
}

[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Posisi */
[data-tooltip]:not([data-position])::before,
[data-tooltip][data-position="top"]::before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
}

[data-tooltip][data-position="bottom"]::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
}

[data-tooltip][data-position="left"]::before {
  right: 100%;
  top: 50%;
  transform: translateX(-10px) translateY(-50%);
}

[data-tooltip][data-position="right"]::before {
  left: 100%;
  top: 50%;
  transform: translateX(10px) translateY(-50%);
}

/* Tema */
[data-tooltip][data-theme="primary"]::before {
  background-color: #0d6efd;
  color: #fff;
}

[data-tooltip][data-theme="success"]::before {
  background-color: #198754;
  color: #fff;
}

[data-tooltip][data-theme="warning"]::before {
  background-color: #ffc107;
  color: #000;
}

[data-tooltip][data-theme="danger"]::before {
  background-color: #dc3545;
  color: #fff;
}

/* Animasi hover */
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

[data-tooltip]:not([data-position]):hover::before,
[data-tooltip][data-position="top"]:hover::before {
  transform: translateX(-50%) translateY(-6px);
}

[data-tooltip][data-position="bottom"]:hover::before {
  transform: translateX(-50%) translateY(6px);
}

[data-tooltip][data-position="left"]:hover::before {
  transform: translateX(-6px) translateY(-50%);
}

[data-tooltip][data-position="right"]:hover::before {
  transform: translateX(6px) translateY(-50%);
}

/* Ukuran */
[data-tooltip][data-size="sm"]::before {
  font-size: 12px;
  padding: 4px 8px;
}

[data-tooltip][data-size="md"]::before {
  font-size: 14px;
  padding: 6px 12px;
}

[data-tooltip][data-size="lg"]::before {
  font-size: 16px;
  padding: 8px 16px;
}

/* Animasi */
[data-tooltip][data-animation="fade"]::before {
  transition: opacity 0.3s ease-in-out;
}

[data-tooltip][data-animation="slide"]::before {
  transition: all 0.3s ease-in-out;
}

[data-tooltip][data-animation="zoom"]::before {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(0.9);
}

[data-tooltip][data-animation="zoom"]:hover::before {
  transform: scale(1);
}

/* HTML Content */
[data-tooltip][data-html="true"]::before {
  white-space: normal;
  max-width: 200px;
  line-height: 1.4;
}

/* Custom Tooltip Style */
.custom-tooltip[data-tooltip]::before {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Event Control */
[data-tooltip][data-show="true"]::before {
  opacity: 1;
  visibility: visible;
} 
/*AND tooltip*/
.nx-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 0.25rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.nx-spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2rem;
}

.nx-spinner-lg {
  width: 3rem;
  height: 3rem;
  border-width: 0.3rem;
}

.nx-spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: currentColor;
  border-radius: 50%;
  animation: spinner-grow 0.75s linear infinite;
}

.nx-spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

.nx-spinner-grow-lg {
  width: 3rem;
  height: 3rem;
}

/* Warna spinner */
.nx-spinner-primary, .nx-spinner-grow.nx-spinner-primary {
  color: #00d1b2;
}

.nx-spinner-secondary, .nx-spinner-grow.nx-spinner-secondary {
  color: #64748B;
}

.nx-spinner-success, .nx-spinner-grow.nx-spinner-success {
  color: #107C10;
}

.nx-spinner-danger, .nx-spinner-grow.nx-spinner-danger {
  color: #E81123;
}

.nx-spinner-warning, .nx-spinner-grow.nx-spinner-warning {
  color: #FFB900;
}

.nx-spinner-info, .nx-spinner-grow.nx-spinner-info {
  color: #0078D4;
}

.nx-spinner-light, .nx-spinner-grow.nx-spinner-light {
  color: #F1F5F9;
}

.nx-spinner-dark, .nx-spinner-grow.nx-spinner-dark {
  color: #333333;
}

.nx-spinner-white, .nx-spinner-grow.nx-spinner-white {
  color: #ffffff;
}

/* Tambahan warna dari button.css */
.nx-spinner-blue, .nx-spinner-grow.nx-spinner-blue {
  color: #0078D4;
}

.nx-spinner-purple, .nx-spinner-grow.nx-spinner-purple {
  color: #5C2D91;
}

.nx-spinner-teal, .nx-spinner-grow.nx-spinner-teal {
  color: #00B294;
}

.nx-spinner-green, .nx-spinner-grow.nx-spinner-green {
  color: #107C10;
}

.nx-spinner-system, .nx-spinner-grow.nx-spinner-system {
  color: #E6E6E6;
}

.nx-spinner-error, .nx-spinner-grow.nx-spinner-error {
  color: #E81123;
}

.nx-spinner-accent, .nx-spinner-grow.nx-spinner-accent {
  color: #0078D4;
}

.nx-spinner-accent-light, .nx-spinner-grow.nx-spinner-accent-light {
  color: #F0F0F0;
}

.nx-spinner-modern, .nx-spinner-grow.nx-spinner-modern {
  color: #333333;
}

.nx-spinner-link, .nx-spinner-grow.nx-spinner-link {
  color: #6366F1;
}

.nx-spinner-ghost, .nx-spinner-grow.nx-spinner-ghost {
  color: #00E5BE;
}

.nx-spinner-black, .nx-spinner-grow.nx-spinner-black {
  color: #212529;
}

/* Hover state untuk spinner yang interaktif */
.nx-spinner[role="button"]:hover,
.nx-spinner-grow[role="button"]:hover {
  opacity: 0.8;
}

/* Tambahan untuk grup spinner jika diperlukan */
.nx-spinner-group {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}

/* Styling untuk demo */
.spinner-demo {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

/*.preview-box button {
  margin-right: 1rem;
}
*/
/* Menambahkan style untuk teks putih */
.text-white {
  color: #fff;
}

/* Menambahkan margin untuk jarak antara spinner dan teks */
.nx-spinner + .text-white,
.nx-spinner-grow + .text-white {
  margin-left: 0.75rem;
} 
/*AND spinner*/
/* Styles untuk navigasi scrollspy */
.scrollspy-nav {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
}

/* Styles untuk link navigasi */
.nx-nav-pills .nx-nav-link {
  color: #6c757d;
  padding: 0.5rem 1rem;
  margin: 0.25rem 0;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
}

/* Hover state untuk link navigasi */
.nx-nav-pills .nx-nav-link:hover {
  background-color: #e9ecef;
  color: #495057;
}

/* Link aktif */
.nx-nav-pills .nx-nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}

/* Container scrollspy */
.scrollspy-example {
  background-color: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Styles untuk section dalam scrollspy */
.scrollspy-example section {
  padding: 1.5rem;
  border-bottom: 1px solid #dee2e6;
}

.scrollspy-example section:last-child {
  border-bottom: none;
}

/* Heading dalam section */
.scrollspy-example h5 {
  color: #212529;
  margin-bottom: 1rem;
}

/* Paragraf dalam section */
.scrollspy-example p {
  color: #6c757d;
  line-height: 1.6;
}

/* Custom scrollbar untuk scrollspy container */
.scrollspy-example::-webkit-scrollbar {
  width: 6px;
}

.scrollspy-example::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.scrollspy-example::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.scrollspy-example::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Animasi smooth untuk perubahan active state */
.nx-nav-link {
  position: relative;
  transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .scrollspy-nav {
    margin-bottom: 1rem;
  }
  
  .scrollspy-example {
    height: 250px;
  }
} 

/* Styles untuk scrollspy horizontal */
.scrollspy-nav-horizontal {
  background-color: #f8f9fa;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
}

.scrollspy-nav-horizontal .nx-nav {
  display: flex;
  gap: 1rem;
}

/* Styles untuk list group scrollspy */
.nx-list-group-scrollspy {
  border-radius: 0.375rem;
  overflow: hidden;
}

.nx-list-group-scrollspy .nx-list-group-item {
  border-left: 3px solid transparent;
  transition: all 0.2s ease-in-out;
}

.nx-list-group-scrollspy .nx-list-group-item.active {
  border-left-color: #0d6efd;
  background-color: rgba(13, 110, 253, 0.1);
}

/* Styles untuk offset scrollspy */
.scrollspy-offset-example {
  position: relative;
  padding-top: 60px; /* Sesuaikan dengan tinggi navbar */
}

.scrollspy-offset-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 10px;
  border-bottom: 1px solid #dee2e6;
  z-index: 1020;
}

/* Pastikan container scrollspy memiliki ruang untuk offset */
.scrollspy-offset-example .scrollspy-example {
  margin-top: 10px;
  height: calc(300px - 60px); /* Kurangi height dengan tinggi navbar */
}

/* Styles untuk navigasi pills */
.nx-nav {
  display: flex;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.nx-nav-pills {
  gap: 0.5rem;
}

.nx-nav-pills .nx-nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #6c757d;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.nx-nav-pills .nx-nav-link:hover {
  color: #495057;
  background-color: #e9ecef;
}

.nx-nav-pills .nx-nav-link.active {
  color: #fff;
  background-color: #0d6efd;
}

/* Vertical pills */
.nx-nav-pills.nx-flex-column {
  flex-direction: column;
}

.nx-nav-pills.nx-flex-column .nx-nav-link {
  margin-bottom: 0.25rem;
  text-align: left;
  width: 100%;
}

/* Horizontal pills dalam navbar */
.scrollspy-nav-horizontal .nx-nav-pills {
  flex-direction: row;
  justify-content: flex-start;
  padding: 0.5rem;
}

/* List group styles */
.nx-list-group-scrollspy {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  overflow: hidden;
}

.nx-list-group-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: none;
  border-bottom: 1px solid #dee2e6;
  color: #495057;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.nx-list-group-item:last-child {
  border-bottom: none;
}

.nx-list-group-item:hover {
  background-color: #f8f9fa;
  color: #212529;
}

.nx-list-group-item.active {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

/* Reset button styles */
button.nx-nav-link,
button.nx-list-group-item {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nx-nav-pills {
    flex-wrap: wrap;
  }
  
  .scrollspy-nav-horizontal .nx-nav-pills {
    justify-content: center;
  }
} 
/*AND scrollspy*/
/* Progress Bar Container */
.nx-progress {
    display: flex;
    height: 1rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

/* Progress Bar */
.nx-progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-color: #0078D4;
    transition: width 0.3s ease;
    font-size: 0.75rem;
}

/* Warna Progress Bar - Windows Basic Colors */
.nx-progress-bar.nx-bg-primary {
    background-color: #0078D4; /* Windows Blue */
}

.nx-progress-bar.nx-bg-success {
    background-color: #107C10; /* Windows Green */
}

.nx-progress-bar.nx-bg-warning {
    background-color: #00B294; /* Windows Teal */
    color: #fff; /* Mengubah warna teks menjadi putih untuk kontras yang lebih baik */
}

.nx-progress-bar.nx-bg-danger {
    background-color: #5C2D91; /* Windows Purple */
}

/* Progress Bar Striped */
.nx-progress-bar.nx-progress-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

/* Progress Bar Animation */
.nx-progress-bar.nx-progress-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0;
    }
    to {
        background-position: 0 0;
    }
}

/* Ukuran Progress Bar */
.nx-progress.nx-progress-sm {
    height: 0.5rem;
}

.nx-progress.nx-progress-lg {
    height: 1.5rem;
}

/* Progress Bar dengan Label */
.nx-progress-bar.with-label {
    min-width: 2rem;
    padding: 0 0.5rem;
}

/* Progress Bar Rounded */
.nx-progress.nx-progress-rounded {
    border-radius: 1rem;
}

.nx-progress.nx-progress-rounded .nx-progress-bar {
    border-radius: 1rem;
}

/* Background Variations */
.nx-progress.nx-bg-light {
    background-color: #f8f9fa;
}

.nx-progress.nx-bg-dark {
    background-color: #343a40;
}

.nx-progress.nx-bg-gradient {
    background: linear-gradient(45deg, #0078D4, #00B294);
    background-size: 200% 200%;
}

/* Vertical Progress */
.demo-progress-vertical {
    display: flex;
    gap: 1rem;
    height: 200px;
    align-items: flex-end;
}

.nx-progress-vertical {
    width: 1rem;
    height: 200px;
    display: inline-flex;
    flex-direction: column-reverse;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    overflow: hidden;
}

.nx-progress-vertical .nx-progress-bar {
    width: 100%;
    height: 0;
    transition: height 0.3s ease;
    writing-mode: vertical-lr;
    text-align: center;
    padding: 0.5rem 0;
}

/* Interactive Progress */

.nx-btn {
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
}

.nx-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.nx-btn-primary {
    background-color: #0078D4;
    color: white;
}

.nx-btn-primary:hover {
    background-color: #006CBE;
}

/*.mb-3 {
    margin-bottom: 1rem;
}
*/
/* Progress Bar Gradient */
.nx-progress-bar.nx-bg-gradient {
    background: linear-gradient(45deg, #0078D4, #00B294);
    background-size: 200% 200%;
    animation: gradientShift 2s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Progress Bar dengan Icon */
.nx-progress-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
    line-height: 1;
}

.nx-progress-icon i {
    font-size: 0.875rem;
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon Animation */
.fa-spin {
    animation: fa-spin 2s linear infinite;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Progress Bar dengan Icon Alignment */
.nx-progress-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0.5rem;
}

/* Progress Bar dengan Tooltip */
.nx-progress-bar[data-tooltip] {
    position: relative;
    cursor: pointer;
}

.nx-progress-bar[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

.nx-progress-bar[data-tooltip]:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

.nx-progress-bar[data-tooltip]:hover:before,
.nx-progress-bar[data-tooltip]:hover:after {
    opacity: 1;
    visibility: visible;
}



/* Progress Bar Stack */
.nx-progress-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nx-progress-stack .nx-progress {
    margin-bottom: 0;
}

/* Custom Animation */
.nx-progress-bar.custom-animation {
    position: relative;
    overflow: hidden;
}

.nx-progress-bar.custom-animation:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Progress Bar dengan Background Pattern */
.nx-progress-bar.pattern {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.1) 10px,
        rgba(255, 255, 255, 0.1) 20px
    );
}

/* Progress Bar dengan Shadow */
.nx-progress.with-shadow {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.nx-progress-bar.with-shadow {
    box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

/* Progress Bar dengan Border */
.nx-progress.with-border {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Progress Bar dengan Glow Effect */
.nx-progress-bar.with-glow {
    animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0% { box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); }
    50% { box-shadow: 0 0 20px rgba(0, 120, 212, 0.5); }
    100% { box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); }
}

/* Progress Bar dengan Text Overflow */
.nx-progress-bar.text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Progress Bar dengan Transition */
.nx-progress-bar.smooth-transition {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Progress Bar dengan Hover Effect */
.nx-progress-bar.hover-effect:hover {
    filter: brightness(1.1);
    cursor: pointer;
}

/* Progress Bar dengan Focus State */
.nx-progress.focusable:focus-within {
    outline: 2px solid rgba(0, 120, 212, 0.5);
    outline-offset: 2px;
}

/* Warna Progress Bar - Windows Basic Colors (Short Version) */
.nx-win-blue {
    background-color: #0078D4 !important; /* Windows Blue */
}

.nx-win-purple {
    background-color: #5C2D91 !important; /* Windows Purple */
}

.nx-win-teal {
    background-color: #00B294 !important; /* Windows Teal */
}

.nx-win-green {
    background-color: #107C10 !important; /* Windows Green */
} 
/*AND progress*/
.nx-nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nx-nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nx-nav-tabs .nx-nav-item {
  margin-bottom: -1px;
}

.nx-nav-tabs .nx-nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  padding: 0.5rem 1rem;
}

.nx-nav-tabs .nx-nav-link:hover {
/*  border-color: #e9ecef #e9ecef #dee2e6;*/
}

.nx-nav-tabs .nx-nav-link.active {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

.nx-nav-pills .nx-nav-link {
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
}

.nx-nav-pills .nx-nav-link.active {
  color: #fff;
  background-color: #007bff;
}

.nx-tab-content > .nx-tab-pane {
  display: none;
}

.nx-tab-content > .active {
  display: block;
}

/* Tambahan CSS untuk alignment dan styles */
.nx-nav-justified {
  width: 100%;
}

.nx-nav-justified .nx-nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.nx-nav-fill .nx-nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nx-justify-content-center {
  justify-content: center !important;
}

.nx-justify-content-end {
  justify-content: flex-end !important;
}

.nx-justify-content-between {
  justify-content: space-between !important;
}

.nx-flex-column {
  flex-direction: column !important;
}

.nx-nav-link i {
  margin-right: 5px;
}

.mb-3 {
  margin-bottom: 1rem;
}

/* Modern styling untuk navigasi */
.nx-nav {
  --nav-link-color: #4a5568;
  --nav-link-hover-color: #2d3748;
  --nav-link-active-color: #3182ce;
  --nav-link-active-bg: #ebf8ff;
  --nav-border-color: #e2e8f0;
}

.nx-nav-link {
  color: var(--nav-link-color);
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: 0.375rem;
}

.nx-nav-link:hover {
  color: var(--nav-link-hover-color);
/*  background-color: #f7fafc;*/
  text-decoration: none;
}

/* Modern Tabs */
.nx-nav-tabs {
  border-bottom: 2px solid var(--nav-border-color);
  gap: 0.5rem;
}

.nx-nav-tabs .nx-nav-link {
  margin-bottom: -2px;
  border: none;
  position: relative;
}

.nx-nav-tabs .nx-nav-link.active {
  color: var(--nav-link-active-color);
  background-color: transparent;
  border: none;
}

.nx-nav-tabs .nx-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--nav-link-active-color);
  border-radius: 2px 2px 0 0;
}

/* Modern Pills */
.nx-nav-pills .nx-nav-link {
  background-color: transparent;
  border: 1px solid transparent;
}

.nx-nav-pills .nx-nav-link.active {
  color: #fff;
  background-color: var(--nav-link-active-color);
  box-shadow: 0 4px 6px -1px rgba(49, 130, 206, 0.1), 0 2px 4px -1px rgba(49, 130, 206, 0.06);
}

/* Modern Vertical Nav */
.nx-nav.nx-flex-column {
  gap: 0.5rem;
}

.nx-nav.nx-flex-column .nx-nav-link {
  border-radius: 0.5rem;
}

/* Modern Justified & Fill */
.nx-nav-justified .nx-nav-link,
.nx-nav-fill .nx-nav-link {
  text-align: center;
}

/* Modern Alignment Styles */
.nx-justify-content-center,
.nx-justify-content-end,
.nx-justify-content-between {
  gap: 0.5rem;
}

/*AND nav-tabs*/

 
    .form-nexa label {
        display: inline-block;
        margin-bottom: 0.1rem;
        font-weight: 500;
        color: #212529;
        font-size:12px;
    }

    /* Control styles */
    [class*="form-nexa-control"] {
        display: block;
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #e0e0e0;
        transition: all 0.2s ease-in-out;
    }

    [class*="form-nexa-control"]:hover {
        border-color: #999999; /* Mengganti dari #b0b0b0 */
        background-color: #fafafa;
    }

    /* Menghapus outline biru default browser dan mempertahankan border color */
    [class*="form-nexa-control"]:focus {
        outline: none !important;
        border-color: #e0e0e0 !important; /* Menggunakan warna border default */
        box-shadow: none !important; /* Menghilangkan box-shadow */
    }

    /* Menghapus outline biru untuk semua input */
    input:focus,
    select:focus,
    textarea:focus,
    button:focus {
        outline: none !important;
        border-color: #e0e0e0 !important;
        box-shadow: none !important;
    }

    /* Menghapus outline biru untuk button */
    .form-nexa-btn:focus,
    .btn:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Menghapus outline biru untuk modal button */
    .nx-modal-footer .btn:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Menghapus outline biru untuk select */
    select.form-nexa-control:focus {
        outline: none !important;
        border-color: #e0e0e0 !important;
        box-shadow: none !important;
    }

    /* Dark mode adjustments */
    @media (prefers-color-scheme: dark) {
        [class*="form-nexa-control"]:focus,
        input:focus,
        select:focus,
        textarea:focus,
        button:focus {
            border-color: #404040 !important; /* Menggunakan warna border dark mode default */
            box-shadow: none !important;
        }
    }

    /* States - Hanya untuk class is-valid dan is-invalid */
    .is-invalid {
        border-color: #f44336;
    }

    .is-valid {
        border-color: #4caf50;
    }

    /* Readonly state */
    [readonly] {
        background-color: #e9ecef;
        opacity: 1;
    }

    .form-nexa-group {
        position: relative;
        margin-bottom: 1rem;
    }

    .form-nexa-icon {
        position: relative;
    }

    .form-nexa-icon input {
        padding-left: 2.1rem;
    }

    .form-nexa-icon i {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
    }

    /* Tambahan style untuk textarea */
    textarea.form-nexa-control {
        min-height: 100px;
        resize: vertical;
    }
    
    /* Style untuk select */
    select.form-nexa-control {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
        padding-right: 2.25rem;
    }
    
    /* Pesan validasi */
    .form-nexa-feedback {
        display: none;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875em;
    }
    
    .is-invalid ~ .invalid-feedback {
        display: block;
        color: #f44336;
    }
    
    .is-valid ~ .valid-feedback {
        display: block;
        color: #4caf50;
    }
    
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        [class*="form-nexa-control"] {
            background-color: #1e1e1e;
            border-color: #404040;
            color: #e0e0e0;
        }
        
        [class*="form-nexa-control"]:hover {
            background-color: #252525;
            border-color: #505050;
        }
        
        [class*="form-nexa-control"]:focus {
            background-color: #1e1e1e;
            border-color: #666666; /* Mengganti dari warna biru */
            box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.25); /* Menambahkan box-shadow dengan warna abu-abu */
        }
        
        .form-nexa-control::placeholder {
            color: #6c757d;
        }
        
        .form-nexa label {
            color: #e0e0e0;
        }
        
        .form-nexa-control:disabled,
        .form-nexa-control[readonly] {
            background-color: #1a1d20;
        }
        
        .form-nexa-control:focus {
            border-color: #fff;
        }
    }

    .form-nexa-row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -0.5rem;
        margin-left: -0.5rem;
    }
    
    .form-nexa-col {
        flex: 1 0 0%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    /* Grid System Columns */
    .form-nx-col-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-3 {
        flex: 0 0 auto;
        width: 25%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-6 {
        flex: 0 0 auto;
        width: 50%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-9 {
        flex: 0 0 auto;
        width: 75%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .form-nx-col-12 {
        flex: 0 0 auto;
        width: 100%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    /* Responsive Grid */
    @media (max-width: 576px) {
        [class*="form-nx-col-"] {
            width: 100%;
        }
    }

    /* Responsive Utilities */
    /* Hide elements */
    .form-nexa-hide-xs {
        @media (max-width: 576px) { display: none !important; }
    }
    
    .form-nexa-hide-sm {
        @media (min-width: 577px) and (max-width: 768px) { display: none !important; }
    }
    
    .form-nexa-hide-md {
        @media (min-width: 769px) and (max-width: 992px) { display: none !important; }
    }
    
    .form-nexa-hide-lg {
        @media (min-width: 993px) { display: none !important; }
    }
    
    /* Stack elements */
    .form-nexa-stack-xs {
        @media (max-width: 576px) {
            flex-direction: column !important;
            > * {
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
        }
    }
    
    /* Responsive spacing */
    @media (max-width: 576px) {
        .form-nexa-spacing-xs {
            margin-bottom: 1rem !important;
        }
    }
    
    /* Responsive text alignment */
    .form-nexa-text-center-xs {
        @media (max-width: 576px) { text-align: center !important; }
    }
    
    .form-nexa-text-left-xs {
        @media (max-width: 576px) { text-align: left !important; }
    }
    
    .form-nexa-text-right-xs {
        @media (max-width: 576px) { text-align: right !important; }
    }
    
    /* Responsive input sizes */
    @media (max-width: 576px) {
        .form-nexa-control-responsive {
            font-size: 16px !important; /* Prevent zoom on iOS */
            padding: 0.5rem !important;
        }
    }
    
    /* Responsive input groups */
    @media (max-width: 576px) {
        .form-nexa-input-group-stack {
            flex-direction: column !important;
            
            > * {
                width: 100% !important;
                margin-left: 0 !important;
                border-radius: 0 !important;
            }
            
            > :first-child {
                border-top-left-radius: 4px !important;
                border-top-right-radius: 4px !important;
            }
            
            > :last-child {
                border-bottom-left-radius: 4px !important;
                border-bottom-right-radius: 4px !important;
            }
        }
    }
    
    /* Responsive order */
    @media (max-width: 576px) {
        .form-nexa-order-first-xs { order: -1 !important; }
        .form-nexa-order-last-xs { order: 999 !important; }
    }

    /* Floating Label */
    .form-nexa-floating {
        position: relative;
        margin-bottom: 1rem;
    }

    .form-nexa-floating .form-nexa-control {
/*      min-height: 3.5rem;*/
/*      padding: 1rem 0.75rem;*/
    }

    .form-nexa-floating label {
        position: absolute;
        top: 50%;
        left: 0.75rem;
        transform: translateY(-50%);
        pointer-events: none;
        transition: all 0.2s ease-in-out;
        color: #757575;
        padding: 0 0.25rem;
        margin: 0;
        background-color: transparent;
        z-index: 2;
    }

    .form-nexa-floating .form-nexa-control:focus ~ label,
    .form-nexa-floating .form-nexa-control:not(:placeholder-shown) ~ label {
        top: 0;
        transform: translateY(-50%) scale(0.85);
        background-color: #fff;
    }

    /* Dark mode untuk floating label */
    @media (prefers-color-scheme: dark) {
        .form-nexa-floating label {
            color: #adb5bd;
        }
        
        .form-nexa-floating .form-nexa-control:focus ~ label,
        .form-nexa-floating .form-nexa-control:not(:placeholder-shown) ~ label {
            color: #999999;
            background-color: #1e1e1e;
        }
    }
    .form-nexa-control-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.4;
        height: calc(1.4em + 0.5rem + 2px);
        min-height: unset;
    }
    /* Ukuran large untuk floating label */
    .form-nexa-control-lg {
        padding: 0.75rem 1rem;
        font-size: 1.125rem;
        line-height: 1.5;
        height: calc(1.5em + 1.5rem + 2px);
    }
    /* Ukuran small untuk floating label */
    .form-nexa-floating .form-nexa-control-sm {
        min-height: 2.5rem;
        padding: 0.5rem 0.75rem;
    }

    /* Ukuran large untuk floating label */
    .form-nexa-floating .form-nexa-control-lg {
        min-height: 4rem;
        padding: 1.25rem 0.75rem;
    }

    /* Input Group */
    .form-nexa-input-group {
        display: flex;
        align-items: stretch;
    }

    .form-nexa-input-group-text {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        color: #212529;
        transition: all 0.2s ease-in-out;
    }

    .form-nexa-input-group-text:hover {
        border-color: #b0b0b0;
        background-color: #fafafa;
    }

    /* Memperbaiki border yang tumpang tindih */
    .form-nexa-input-group > * {
        margin-left: -1px;  /* Mengurangi gap antar elemen */
    }

    .form-nexa-input-group > :first-child {
        margin-left: 0;  /* Reset margin untuk elemen pertama */
    }

    /* Hover dan Focus state */
    .form-nexa-input-group-text:hover {
        background-color: #f8f9fa;
    }

    .form-nexa-input-group .form-nexa-control:focus {
        z-index: 1;  /* Memastikan border focus selalu di atas */
    }

    .form-nexa-input-group-text:active {
        border-color: #2196f3;
        background-color: #fff;
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .form-nexa-input-group-text {
            background-color: #1e1e1e;
            border-color: #404040;
            color: #e0e0e0;
        }
        
        .form-nexa-input-group-text:hover {
            background-color: #252525;
            border-color: #505050;
        }
        
        .form-nexa-input-group-text:active {
            background-color: #1e1e1e;
            border-color: #2196f3;
        }
    }

    .form-nexa-input-group > .form-nexa-control {
        flex: 1 1 auto;
    }

    /* Tambahkan border-radius yang tepat */
    .form-nexa-input-group > :first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .form-nexa-input-group > :last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-nexa-input-group > :not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    /* Dark mode tambahan */
    @media (prefers-color-scheme: dark) {
        .form-nexa-input-group-text {
            background-color: #2b3035;
            border-color: #495057;
            color: #e9ecef;
        }
    }

    /* Checkbox & Radio */
    .form-nexa-check,
    .form-nexa-radio {
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 1.75rem;
        margin-bottom: 0.75rem;
        cursor: pointer;
    }

    .form-nexa-check-input,
    .form-nexa-radio-input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Custom Checkbox */
    .form-nexa-check-input ~ .form-nexa-check-label::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 1.25rem;
        background-color: #fff;
        border: 2px solid #e0e0e0;
        transition: all 0.2s ease-in-out;
    }

    .form-nexa-check-input:checked ~ .form-nexa-check-label::before {
        background-color: #2196f3;
        border-color: #2196f3;
    }

    .form-nexa-check-input:checked ~ .form-nexa-check-label::after {
        content: "";
        position: absolute;
        left: 0.4rem;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 0.45rem;
        height: 0.85rem;
        border: solid white;
        border-width: 0 2px 2px 0;
    }

    /* Custom Radio */
    .form-nexa-radio-input ~ .form-nexa-radio-label::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 1.25rem;
        background-color: #fff;
        border: 2px solid #e0e0e0;
        border-radius: 50%;
        transition: all 0.2s ease-in-out;
    }

    .form-nexa-radio-input:checked ~ .form-nexa-radio-label::after {
        content: "";
        position: absolute;
        left: 0.375rem;
        top: 50%;
        transform: translateY(-50%);
        width: 0.5rem;
        height: 0.5rem;
        background-color: #fff;
        border-radius: 50%;
    }

    .form-nexa-radio-input:checked ~ .form-nexa-radio-label::before {
        background-color: #2196f3;
        border-color: #2196f3;
    }

    /* Hover Effects */
    .form-nexa-check-input:not(:disabled) ~ .form-nexa-check-label:hover::before,
    .form-nexa-radio-input:not(:disabled) ~ .form-nexa-radio-label:hover::before {
        border-color: #2196f3;
    }

    /* Focus Effects */
    .form-nexa-check-input:focus ~ .form-nexa-check-label::before,
    .form-nexa-radio-input:focus ~ .form-nexa-radio-label::before {
        box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
    }

    /* Disabled State */
    .form-nexa-check-input:disabled ~ .form-nexa-check-label,
    .form-nexa-radio-input:disabled ~ .form-nexa-radio-label {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
        .form-nexa-check-input ~ .form-nexa-check-label::before,
        .form-nexa-radio-input ~ .form-nexa-radio-label::before {
            background-color: #1e1e1e;
            border-color: #404040;
        }

        .form-nexa-check-input:checked ~ .form-nexa-check-label::before,
        .form-nexa-radio-input:checked ~ .form-nexa-radio-label::before {
            background-color: #2196f3;
            border-color: #2196f3;
        }

        .form-nexa-check-label,
        .form-nexa-radio-label {
            color: #e0e0e0;
        }
    }

    /* Range Slider */
    .form-nexa-range {
        width: 100%;
        height: 1.5rem;
        padding: 0;
        background-color: transparent;
        appearance: none;
    }

    .form-nexa-range::-webkit-slider-thumb {
        appearance: none;
        width: 1rem;
        height: 1rem;
        background: #0d6efd;
        border: 0;
        transition: background-color .15s ease-in-out;
    }

    /* Dark mode tambahan */
    @media (prefers-color-scheme: dark) {
        .form-nexa-input-group-text {
            background-color: #1a1d20;
            border-color: #495057;
            color: #e9ecef;
        }
        
        .form-nexa-floating input:focus ~ label,
        .form-nexa-floating input:not(:placeholder-shown) ~ label {
            background: #2b3035;
            color: #e9ecef;
        }
    }

    /* Floating Label dengan Icon */
    .form-nexa-floating .form-nexa-icon {
        position: relative;
    }

    .form-nexa-floating .form-nexa-icon i {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
        z-index: 2;
    }

    .form-nexa-floating .form-nexa-icon input {
        padding-left: 2.5rem;
    }

    .form-nexa-floating .form-nexa-icon label {
        left: 2.5rem; /* Sesuaikan dengan lebar icon */
    }

    /* Dark mode untuk floating label dengan icon */
    @media (prefers-color-scheme: dark) {
        .form-nexa-floating .form-nexa-icon i {
            color: #adb5bd;
        }
        
        .form-nexa-floating .form-nexa-icon input:focus ~ i,
        .form-nexa-floating .form-nexa-icon input:not(:placeholder-shown) ~ i {
            color: #999999;
        }
    }

    /* File Input Modern */
    .form-nexa-file {
        position: relative;
        width: 100%;
    }

    .form-nexa-file-input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .form-nexa-file-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        background-color: #f8f9fa;
        border: 2px dashed #e0e0e0;
        border-radius: 4px;
        transition: all 0.2s ease-in-out;
    }

    .form-nexa-file-label i {
        font-size: 2rem;
        color: #666666; /* Mengganti dari #2196f3 */
        margin-bottom: 0.5rem;
    }

    .form-nexa-file-text {
        margin-bottom: 0.5rem;
        color: #757575;
    }

    .form-nexa-file-button {
        padding: 0.5rem 1.5rem;
        background-color: #666666; /* Mengganti dari #2196f3 */
        color: white;
        border-radius: 4px;
        transition: all 0.2s ease-in-out;
    }

    /* Hover state */
    .form-nexa-file-input:hover + .form-nexa-file-label {
        border-color: #666666; /* Mengganti dari #2196f3 */
        background-color: #fff;
    }

    .form-nexa-file-input:hover + .form-nexa-file-label .form-nexa-file-button {
        background-color: #555555; /* Mengganti dari #1976d2 */
    }

    /* Focus state */
    .form-nexa-file-input:focus + .form-nexa-file-label {
        border-color: #666666; /* Mengganti dari #2196f3 */
        box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.1);
    }

    /* Drag state */
    .form-nexa-file-label.drag-active {
        background-color: #f0f0f0; /* Mengganti dari #e3f2fd */
        border-color: #666666; /* Mengganti dari #2196f3 */
    }

    /* File list */
    .form-nexa-file-list {
        margin-top: 1rem;
    }

    .form-nexa-file-item {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        background-color: #f8f9fa;
        border: 1px solid #e0e0e0;
        margin-bottom: 0.5rem;
        border-radius: 4px;
    }

    .form-nexa-file-item i {
        margin-right: 0.5rem;
        color: #666666; /* Mengganti dari #2196f3 */
    }

    .form-nexa-file-item-name {
        flex: 1;
    }

    .form-nexa-file-item-remove {
        cursor: pointer;
        color: #f44336;
        padding: 0.25rem;
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .form-nexa-file-label {
            background-color: #1e1e1e;
            border-color: #404040;
        }
        
        .form-nexa-file-text {
            color: #adb5bd;
        }
        
        .form-nexa-file-input:hover + .form-nexa-file-label {
            background-color: #252525;
            border-color: #2196f3;
        }
        
        .form-nexa-file-label.drag-active {
            background-color: #2c3034; /* Mengganti dari #0d47a1 */
        }
        
        .form-nexa-file-item {
            background-color: #1e1e1e;
            border-color: #404040;
            color: #e0e0e0;
        }
    }


    /* Responsive Form Grid */
    @media (max-width: 576px) {
        .nx-row > [class*="nx-col-"] {
            margin-bottom: 1rem;
        }
        
        .form-nexa-icon input {
            font-size: 16px; /* Mencegah zoom di iOS */
        }
        
        .form-nexa label {
            font-size: 0.9rem;
        }
    }
  /* Tambahkan CSS berikut untuk mengatur posisi ikon password-toggle */
    .form-nexa-icon {
        position: relative;
    }

    .password-toggle {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 2;
    }

    /* Tambahkan padding kanan pada input password untuk memberi ruang pada ikon */
    .form-nexa-icon input[type="password"] {
        padding-right: 35px;
    }

    /* Style khusus untuk password-toggle di form floating */
    .form-nexa-floating .form-nexa-icon .password-toggle {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 4;
    }

    /* Pastikan input password pada floating form memiliki padding yang cukup */
    .form-nexa-floating .form-nexa-icon input[type="password"] {
        padding-right: 35px;
    }

    /* Tambahkan style khusus untuk form floating password toggle */
    .form-nexa-floating .password-toggle {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 5;
        color: #6c757d;
    }

    /* Pastikan input password memiliki padding yang cukup */
    .form-nexa-floating input[type="password"] {
        padding-right: 35px !important;
    }

    /* Pastikan container memiliki position relative */
    .form-nexa-floating .form-nexa-icon {
        position: relative !important;
    }

    /* Tambahkan hover effect */
    .form-nexa-floating .password-toggle:hover {
        color: #2196f3;
    }

    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .form-nexa-floating .password-toggle {
            color: #adb5bd;
        }
        
        .form-nexa-floating .password-toggle:hover {
            color: #2196f3;
        }
    }

    /* Style untuk Input Group Responsive dengan Icon */
    .form-nexa-input-group-icon {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }

    .form-nexa-input-group-icon .form-nexa-input-group-text {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        color: #212529;
        gap: 0.5rem;
    }

    /* Atur border radius untuk elemen pertama */
    .form-nexa-input-group-icon .form-nexa-input-group-text:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
    }

    /* Atur border radius untuk elemen terakhir */
    .form-nexa-input-group-icon .form-nexa-input-group-text:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
    }

    /* Atur border untuk input di tengah */
    .form-nexa-input-group-icon .form-nexa-control {
        border-radius: 0;
        border-right: none;
        border-left: none;
        /* Hapus validasi otomatis */
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        outline: -webkit-focus-ring-color auto 0px !important;
    }

    /* Hapus style validasi */
    .form-nexa-input-group-icon .form-nexa-control:valid {
        border-color: #e0e0e0 !important;
        background-color: #fff !important;
        box-shadow: none !important;
    }

    .form-nexa-input-group-icon .form-nexa-control:invalid {
        border-color: #e0e0e0 !important;
        background-color: #fff !important;
        box-shadow: none !important;
    }

    /* Hover state */
    .form-nexa-input-group-icon .form-nexa-input-group-text:hover {
        border-color: #b0b0b0;
        background-color: #fafafa;
    }

    /* Focus state */
    .form-nexa-input-group-icon .form-nexa-control:focus {
        color: #212529;
        background-color: #fff;
        border-color: #b0b0b0;
        outline: 0;
        box-shadow: none;
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .form-nexa-input-group-icon .form-nexa-input-group-text {
            background-color: #1e1e1e;
            border-color: #404040;
            color: #e0e0e0;
        }

        .form-nexa-input-group-icon .form-nexa-input-group-text:hover {
            background-color: #252525;
            border-color: #505050;
        }
    }

    /* Responsive styling */
    @media (max-width: 768px) {
        .form-nexa-input-group-icon.form-nexa-input-group-stack {
            flex-direction: column;
            gap: 0.5rem;
        }

        .form-nexa-input-group-icon.form-nexa-input-group-stack .form-nexa-input-group-text,
        .form-nexa-input-group-icon.form-nexa-input-group-stack .form-nexa-control {
            width: 100%;
            border-radius: 0.25rem;
            border: 1px solid #e0e0e0;
        }
    }
    
    /* Select dengan Icon */
    .form-nexa-select-icon {
        position: relative;
    }

    .form-nexa-select-icon i {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
        z-index: 1;
        pointer-events: none;
    }

    .form-nexa-select-icon select {
        padding-left: 2.5rem;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
    }

    /* Dark mode untuk select dengan icon */
    @media (prefers-color-scheme: dark) {
        .form-nexa-select-icon i {
            color: #adb5bd;
        }
        
        .form-nexa-select-icon select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        }
        
        .form-nexa-select-icon select:focus ~ i {
            color: #999999;
        }
    }

    /* Hover state */
    .form-nexa-select-icon:hover i {
        color: #999999;
    }

    /* Focus state */
    .form-nexa-select-icon select:focus ~ i {
        color: #999999;
    }
    
    /* Input Sizes */
    .form-nexa-control-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.4;
        height: calc(1.4em + 0.5rem + 2px);
        min-height: unset;
    }

    /* Input Large - untuk konsistensi */
    .form-nexa-control-lg {
        padding: 0.75rem 1rem;
        font-size: 1.125rem;
        line-height: 1.5;
        height: calc(1.5em + 1.5rem + 2px);
    }

    /* Base input untuk perbandingan */
    [class*="form-nexa-control"] {
        height: calc(1.5em + 1rem + 2px);
    }

    /* Switch/Toggle */
    .form-nexa-switch {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 24px;
        margin: 0;
    }

    .form-nexa-switch-input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .form-nexa-switch-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e0e0e0;
        transition: .4s;
        border-radius: 24px;
    }

    .form-nexa-switch-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    /* Checked state */
    .form-nexa-switch-input:checked + .form-nexa-switch-slider {
        background-color: #666666;
    }

    .form-nexa-switch-input:checked + .form-nexa-switch-slider:before {
        transform: translateX(24px);
    }

    /* Focus state */
    .form-nexa-switch-input:focus + .form-nexa-switch-slider {
        box-shadow: 0 0 1px #666666;
    }

    /* Disabled state */
    .form-nexa-switch-input:disabled + .form-nexa-switch-slider {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: #ccc;
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .form-nexa-switch-slider {
            background-color: #404040;
        }
        
        .form-nexa-switch-slider:before {
            background-color: #e0e0e0;
        }
        
        .form-nexa-switch-input:checked + .form-nexa-switch-slider {
            background-color: #666666;
        }
        
        .form-nexa-switch-input:disabled + .form-nexa-switch-slider {
            background-color: #333;
        }
    }

    /* Switch container */
    .form-nexa-switch-container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .form-nexa-switch-label {
        cursor: pointer;
        user-select: none;
        color: #212529;
    }

    /* Disabled label */
    .form-nexa-switch-input:disabled ~ .form-nexa-switch-label {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Dark mode untuk label */
    @media (prefers-color-scheme: dark) {
        .form-nexa-switch-label {
            color: #e0e0e0;
        }
    }
    
    /* Date Picker Styles */
    .form-nexa-date {
        margin-bottom: 1rem;
    }

    .form-nexa-date input[type="date"],
    .form-nexa-date input[type="datetime-local"],
    .form-nexa-date input[type="month"],
    .form-nexa-date input[type="time"],
    .form-nexa-date input[type="week"] {
        padding-right: 2.5rem;
        min-height: calc(1.5em + 0.75rem + 2px);
    }

    /* Menyembunyikan icon default dari browser */
    .form-nexa-date input::-webkit-calendar-picker-indicator {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
    }

    /* Custom icon styling */
    .form-nexa-date .form-nexa-icon i {
        color: #6c757d;
        pointer-events: none;
    }

    /* Hover state */
    .form-nexa-date .form-nexa-control:hover {
        border-color: #b0b0b0;
    }

    .form-nexa-date .form-nexa-control:hover + i {
        color: #666666; /* Mengganti dari #2196f3 */
    }

    /* Focus state */
    .form-nexa-date .form-nexa-control:focus {
        border-color: #666666;
        box-shadow: 0 0 0 0.2rem rgba(102, 102, 102, 0.25);
    }

    .form-nexa-date .form-nexa-control:focus + i {
        color: #666666; /* Mengganti dari #2196f3 */
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .form-nexa-date .form-nexa-icon i {
            color: #adb5bd;
        }

        .form-nexa-date .form-nexa-control {
            background-color: #1e1e1e;
            border-color: #404040;
            color: #e0e0e0;
        }

        .form-nexa-date .form-nexa-control:hover {
            background-color: #252525;
            border-color: #505050;
        }

        .form-nexa-date .form-nexa-control:focus {
            background-color: #1e1e1e;
            border-color: #666666;
        }
    }

    /* Responsive styling */
    @media (max-width: 576px) {
        .form-nexa-date input[type="date"],
        .form-nexa-date input[type="datetime-local"],
        .form-nexa-date input[type="month"],
        .form-nexa-date input[type="time"],
        .form-nexa-date input[type="week"] {
            font-size: 16px; /* Mencegah zoom di iOS */
        }
    }
    
    /* Text Editor Styles */
    .form-nexa-editor {
        margin-bottom: 1.5rem;
    }

    .form-nexa-editor label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #212529;
    }

    .form-nexa-editor-control {
        width: 100%;
        min-height: 200px;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        background-color: #fff;
    }

    /* Quill specific styles */
    .ql-toolbar.ql-snow {
        border-color: #e0e0e0 !important;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background-color: #f8f9fa;
    }

    .ql-container.ql-snow {
        border-color: #e0e0e0 !important;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        font-family: inherit;
    }

    .ql-editor {
        min-height: 150px;
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .form-nexa-editor label {
            color: #e0e0e0;
        }

        .form-nexa-editor-control {
            background-color: #1a1d20;
            border-color: #404040;
        }

        .ql-toolbar.ql-snow {
            background-color: #2b3035;
            border-color: #404040 !important;
        }

        .ql-container.ql-snow {
            border-color: #404040 !important;
        }

        .ql-snow .ql-stroke {
            stroke: #e0e0e0;
        }

        .ql-snow .ql-fill {
            fill: #e0e0e0;
        }

        .ql-snow .ql-picker {
            color: #e0e0e0;
        }

        .ql-snow .ql-picker-options {
            background-color: #2b3035;
            border-color: #404040;
        }

        .ql-editor {
            color: #e0e0e0;
        }
    }

    /* Responsive */
    @media (max-width: 576px) {
        .ql-toolbar.ql-snow {
            flex-wrap: wrap;
        }
        
        .ql-toolbar.ql-snow .ql-formats {
            margin-right: 0;
            margin-bottom: 4px;
        }
    }
    
    /* Form Wizard Styles */
    .form-nexa-wizard {
        margin-bottom: 2rem;
    }

    .form-nexa-wizard-progress {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2rem;
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* Progress Line */
    .form-nexa-wizard-progress::before {
        content: '';
        position: absolute;
        top: 24px;
        left: 0;
        right: 0;
        height: 2px;
        background: #e9ecef;
        z-index: 1;
    }

    .form-nexa-wizard-progress-step {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        text-align: center;
    }

    .step-number {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #e9ecef;
        color: #adb5bd;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
    }

    .step-text {
        color: #adb5bd;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.3s ease;
        margin-top: 0.5rem;
    }

    /* Active State */
    .form-nexa-wizard-progress-step.active .step-number {
        background: #666666;
        border-color: #666666;
        color: #fff;
        box-shadow: 0 0 0 4px rgba(102, 102, 102, 0.15);
    }

    .form-nexa-wizard-progress-step.active .step-text {
        color: #666666;
    }

    /* Completed State */
    .form-nexa-wizard-progress-step.completed .step-number {
        background: #fff;
        border-color: #666666;
        color: #666666;
    }

    .form-nexa-wizard-progress-step.completed .step-text {
        color: #6c757d;
    }

    /* Progress Line Fill */
    .form-nexa-wizard-progress-step.completed::after {
        content: '';
        position: absolute;
        top: 24px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #666666;
        z-index: 1;
    }

    /* Form Steps */
    .form-nexa-wizard-step {
        display: none;
        animation: fadeIn 0.5s ease;
    }

    .form-nexa-wizard-step.active {
        display: block;
    }

    /* Navigation Buttons */
    .form-nexa-wizard-buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
        gap: 1rem;
    }

    .form-nexa-btn {
        padding: 0.75rem 1.5rem;
        border-radius: 4px;
        font-weight: 500;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .form-nexa-btn.primary {
        background: #666666;
        border: 1px solid #666666;
        color: #fff;
    }

    .form-nexa-btn.primary:hover {
        background: #555555;
        border-color: #444444;
    }

    .form-nexa-btn.secondary {
        background: #fff;
        border: 1px solid #dee2e6;
        color: #6c757d;
    }

    .form-nexa-btn.secondary:hover {
        background: #f8f9fa;
        border-color: #c5c9cd;
    }

    .form-nexa-btn:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
        .form-nexa-wizard-progress::before {
            background: #2c3034;
        }

        .step-number {
            background: #1a1d20;
            border-color: #2c3034;
            color: #adb5bd;
        }

        .step-text {
            color: #adb5bd;
        }

        /* Active State - Dark */
        .form-nexa-wizard-progress-step.active .step-number {
            background: #666666;
            border-color: #666666;
            color: #fff;
            box-shadow: 0 0 0 4px rgba(102, 102, 102, 0.25);
        }

        /* Completed State - Dark */
        .form-nexa-wizard-progress-step.completed .step-number {
            background: #1a1d20;
            border-color: #666666; /* Mengganti dari #0d6efd */
            color: #666666; /* Mengganti dari #0d6efd */
        }

        .form-nexa-btn.secondary {
            background: #1a1d20;
            border-color: #2c3034;
            color: #adb5bd;
        }

        .form-nexa-btn.secondary:hover {
            background: #2c3034;
            border-color: #373b3e;
        }
    }

    /* Responsive */
    @media (max-width: 576px) {
        .form-nexa-wizard-progress {
            margin-bottom: 1.5rem;
        }

        .step-number {
            width: 36px;
            height: 36px;
            font-size: 1rem;
        }

        .step-text {
            font-size: 0.75rem;
        }

        .form-nexa-wizard-progress::before,
        .form-nexa-wizard-progress-step.completed::after {
            top: 18px;
        }

        .form-nexa-wizard-buttons {
            flex-direction: column;
        }

        .form-nexa-btn {
            width: 100%;
        }
    }
    
    /* Search Option Styles */
    .form-nexa-search {
        margin-bottom: 1.5rem;
    }

    .form-nexa-search-container {
        position: relative;
    }

    .form-nexa-search-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        margin-top: 0.25rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: none;
        z-index: 1000;
    }

    .form-nexa-search-container.active .form-nexa-search-dropdown {
        display: block;
    }

    .form-nexa-search-items {
        max-height: 200px;
        overflow-y: auto;
    }

    .form-nexa-search-item {
        padding: 0.75rem 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
    }

    .form-nexa-search-item:hover {
        background: #f8f9fa;
    }

    .form-nexa-search-item i {
        color: #6c757d;
        font-size: 1rem;
    }

    /* Multiple Search Tags */
    .form-nexa-search-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.375rem;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        background: #fff;
    }

    .form-nexa-search-tag {
        background: #e9ecef;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
    }

    .form-nexa-search-tag-remove {
        cursor: pointer;
        color: #6c757d;
    }

    .form-nexa-search-tag-remove:hover {
        color: #dc3545;
    }

    .form-nexa-search-input-container {
        flex: 1;
        min-width: 100px;
    }

    .form-nexa-search-input {
        border: none;
        outline: none;
        padding: 0.25rem;
        width: 100%;
        background: transparent;
    }

    /* No Results */
    .form-nexa-search-no-results {
        padding: 0.75rem 1rem;
        color: #6c757d;
        text-align: center;
    }

    /* Loading State */
    .form-nexa-search-loading {
        padding: 0.75rem 1rem;
        text-align: center;
        color: #6c757d;
    }

    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
        .form-nexa-search-dropdown {
            background: #1a1d20;
            border-color: #2c3034;
        }

        .form-nexa-search-item:hover {
            background: #2c3034;
        }

        .form-nexa-search-item i {
            color: #adb5bd;
        }

        .form-nexa-search-tags {
            background: #1a1d20;
            border-color: #2c3034;
        }

        .form-nexa-search-tag {
            background: #2c3034;
            color: #e9ecef;
        }

        .form-nexa-search-tag-remove {
            color: #adb5bd;
        }

        .form-nexa-search-tag-remove:hover {
            color: #dc3545;
        }

        .form-nexa-search-input {
            color: #e9ecef;
        }

        .form-nexa-search-no-results,
        .form-nexa-search-loading {
            color: #adb5bd;
        }
    }

    /* Responsive */
    @media (max-width: 576px) {
        .form-nexa-search-tags {
            padding: 0.25rem;
        }

        .form-nexa-search-tag {
            font-size: 0.75rem;
        }
    }
    /* Dark mode untuk file input */
@media (prefers-color-scheme: dark) {
    .form-nexa-file-input:hover + .form-nexa-file-label {
        background-color: #252525;
        border-color: #666666; /* Mengganti dari #2196f3 */
    }
    
    .form-nexa-file-label.drag-active {
        background-color: #2c3034; /* Mengganti dari #0d47a1 */
    }
}

/* Dark mode untuk wizard completed state */
@media (prefers-color-scheme: dark) {
    .form-nexa-wizard-progress-step.completed .step-number {
        background: #1a1d20;
        border-color: #666666; /* Mengganti dari #0d6efd */
        color: #666666; /* Mengganti dari #0d6efd */
    }
}

/* Input border focus di dark mode */
@media (prefers-color-scheme: dark) {
    .form-nexa-control:focus {
        border-color: #666666; /* Mengganti dari #fff */
    }
}

/* Form input border di dark mode */
@media (prefers-color-scheme: dark) {
    .form-nexa-floating input:focus ~ label,
    .form-nexa-floating input:not(:placeholder-shown) ~ label {
        background: #2b3035;
        color: #999999; /* Mengganti dari #e9ecef */
    }
}
.form-nexa.form-error input:not([type="file"]),
.form-nexa.form-error select,
.form-nexa.form-error textarea {
    border-color: #ff4444;
}

.form-nexa .error-message {
    color: #ff4444;
    font-size: 0.8em;
    margin-top: 4px;
}


.form-nexa input:focus,
.form-nexa select:focus,
.form-nexa textarea:focus {
    outline: none;
    border-color: #4CAF50;
}

.form-nexa.form-error input:focus,
.form-nexa.form-error select:focus,
.form-nexa.form-error textarea:focus {
    border-color: #ff4444;
}
.form-nexa-icon #iconLeft{
    position: absolute;
    left: calc(100% - 30px); /* Menggunakan calc untuk posisi dari kiri */
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
}
/*AND Form*/
  .nx-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .nx-modal.show {
    opacity: 1;
  }

  .nx-modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 0;
    width: 50%;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transform: translateY(-20px);
    transition: transform 0.3s ease-in-out;
  }

  .nx-modal.show .nx-modal-content {
    transform: translateY(0);
  }

  /* Responsivitas untuk layar mobile */
  @media (max-width: 768px) {
    .nx-modal-content {
      width: 90%;
      margin: 20% auto;
    }
  }

  .nx-modal-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nx-modal-body {
    padding: 1rem;
  }

  .nx-modal-footer {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .nx-close {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
    margin-left: 8px;
  }

  /* Modern X icon using pseudo-elements */
  .nx-close::before,
  .nx-close::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: all 0.2s ease;
  }

  .nx-close::before {
    transform: rotate(45deg);
  }

  .nx-close::after {
    transform: rotate(-45deg);
  }

  /* Hover effect */
  .nx-close:hover {
    background-color: rgba(0,0,0,0.05);
    color: #333;
  }

  /* Active/Click effect */
  .nx-close:active {
    background-color: rgba(0,0,0,0.1);
    transform: scale(0.95);
  }

  /* Remove default text content */
  .nx-close span {
    display: none;
  }

  /* Focus state */
  .nx-close:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    .nx-close {
      color: #999;
    }
    
    .nx-close:hover {
      background-color: rgba(255,255,255,0.1);
      color: #fff;
    }
    
    .nx-close:active {
      background-color: rgba(255,255,255,0.15);
    }
  }

  /* Tambahan untuk aksesibilitas focus */
  .nx-modal:focus,
  .nx-modal-content:focus,
  .nx-close:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }

  /* Tambahan untuk keyboard navigation */
  .nx-modal-footer .btn:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0066cc;
  }

  /* Modal Sizes */
  .nx-modal-sm .nx-modal-content {
    width: 300px;
  }

  .nx-modal-lg .nx-modal-content {
    width: 800px;
  }

  .nx-modal-fullscreen {
    padding: 0;
  }

  .nx-modal-fullscreen .nx-modal-content {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }

  /* Modal Variations */
  .nx-modal-centered .nx-modal-content {
    margin: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    max-height: 90vh;
    width: 50%;
  }

  /* Responsive untuk modal centered */
  @media (max-width: 768px) {
    .nx-modal-centered .nx-modal-content {
      width: 90%;
      max-height: 80vh;
    }
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .nx-modal-lg .nx-modal-content {
      width: 90%;
    }
    
    .nx-modal-sm .nx-modal-content {
      width: 80%;
    }
  }

  /* Scrollable Modal */
  .nx-modal-scrollable .nx-modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }

  .nx-modal-scrollable .nx-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Static Modal */
  .nx-modal-static .nx-modal-content {
    animation: modalShake 0.3s ease-in-out;
  }

  @keyframes modalShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }

  /* Tambahkan animasi untuk modal */
  .nx-modal {
    transition: opacity 0.3s ease-in-out;
  }

  .nx-modal-content {
    transition: transform 0.3s ease-in-out;
  }

  .nx-modal.show .nx-modal-content {
    transform: translateY(0);
  }

  /* Modal Animations */
  .nx-modal-fade {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .nx-modal-fade.show {
    opacity: 1;
  }

  .nx-modal-slide .nx-modal-content {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
  }

  .nx-modal-slide.show .nx-modal-content {
    transform: translateY(0);
  }

  .nx-modal-zoom .nx-modal-content {
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }

  .nx-modal-zoom.show .nx-modal-content {
    transform: scale(1);
    opacity: 1;
  }

  /* Keyboard Events Styling */
  kbd {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.875em;
  }

  /* Alert Styling untuk Callbacks */
  .alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
  }

  .alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
  }

  .alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
  }

  /* Accessibility Styles */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Focus Styles */
  .nx-modal *:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }

  /* High Contrast Mode Support */
  @media (forced-colors: active) {
    .nx-modal-content {
      border: 2px solid ButtonText;
    }
    
    .nx-close {
      border: 1px solid ButtonText;
    }
  }

  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .nx-modal,
    .nx-modal-content {
      transition: none;
    }
  }

  /* Modal Interactions */
  .nx-modal-draggable .nx-modal-content {
    position: fixed;
    margin: 0;
    transform: none;
    transition: none;
    width: auto;
    max-width: 90%;
    max-height: 90vh;
  }

  .nx-modal-draggable .nx-modal-header {
    cursor: move;
    user-select: none;
    padding: 1rem;
    background: #f8f9fa;
  }

  .nx-modal-draggable .nx-modal-content.dragging {
    opacity: 0.95;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  }

  .nx-modal-resizable .nx-modal-content {
    position: relative;
    resize: both;
    overflow: auto;
    min-width: 300px;
    min-height: 200px;
  }

  .nx-modal-resizable .nx-modal-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, #ddd 50%);
  }

  /* Modal Stacking */
  .nx-modal-stacking {
    z-index: 1050;
  }

  .nx-modal-stacking.active {
    z-index: 1051;
  }

  .nx-modal-stacking .nx-modal-content {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }

  /* Custom Animations */
  .nx-modal-custom-animation {
    --animation-duration: 0.5s;
    --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Flip Animation */
  .nx-modal-custom-animation.flip .nx-modal-content {
    transform: perspective(1000px) rotateX(-90deg);
    transition: transform var(--animation-duration) var(--animation-timing);
  }

  .nx-modal-custom-animation.flip.show .nx-modal-content {
    transform: perspective(1000px) rotateX(0);
  }

  /* Swing Animation */
  .nx-modal-custom-animation.swing .nx-modal-content {
    transform: rotateY(-70deg);
    transition: transform var(--animation-duration) var(--animation-timing);
  }

  .nx-modal-custom-animation.swing.show .nx-modal-content {
    transform: rotateY(0);
  }

  /* Bounce Animation */
  @keyframes modalBounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-30px);
    }
    60% {
      transform: translateY(-15px);
    }
  }

  .nx-modal-custom-animation.bounce .nx-modal-content {
    animation: modalBounce var(--animation-duration) var(--animation-timing);
  }

  /* Transition Timing */
  .nx-modal-transition-timing.ease .nx-modal-content {
    transition-timing-function: ease;
  }

  .nx-modal-transition-timing.ease-in .nx-modal-content {
    transition-timing-function: ease-in;
  }

  .nx-modal-transition-timing.ease-out .nx-modal-content {
    transition-timing-function: ease-out;
  }

  .nx-modal-transition-timing.ease-in-out .nx-modal-content {
    transition-timing-function: ease-in-out;
  }

  /* Special Effects */
  .nx-modal-effects.blur {
    backdrop-filter: blur(5px);
  }

  .nx-modal-effects.glass .nx-modal-content {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .nx-modal-effects.neon .nx-modal-content {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5),
                0 0 20px rgba(0, 123, 255, 0.3),
                0 0 30px rgba(0, 123, 255, 0.1);
  }

  .nx-modal-effects.shadow-pulse .nx-modal-content {
    animation: shadowPulse 2s infinite;
  }

  @keyframes shadowPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
  }

  /* Modal Themes */
  .nx-modal-themes {
    --modal-primary: #0d6efd;
    --modal-secondary: #6c757d;
    --modal-success: #198754;
    --modal-danger: #dc3545;
    --modal-warning: #ffc107;
    --modal-info: #0dcaf0;
    --modal-light: #f8f9fa;
    --modal-dark: #212529;
  }

  /* Theme: Light */
  .nx-modal-themes.theme-light .nx-modal-content {
    background: var(--modal-light);
    color: var(--modal-dark);
  }

  .nx-modal-themes.theme-light .nx-modal-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }

  /* Theme: Dark */
  .nx-modal-themes.theme-dark .nx-modal-content {
    background: var(--modal-dark);
    color: #fff;
  }

  .nx-modal-themes.theme-dark .nx-modal-header {
    background: #2c3034;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .nx-modal-themes.theme-dark .nx-close {
    color: #fff;
  }

  /* Theme: Colorful */
  .nx-modal-themes.theme-primary .nx-modal-header {
    background: var(--modal-primary);
    color: #fff;
  }

  .nx-modal-themes.theme-success .nx-modal-header {
    background: var(--modal-success);
    color: #fff;
  }

  /* Custom Layouts */
  .nx-modal-layouts.layout-sidebar .nx-modal-content {
    display: flex;
    max-width: 900px;
  }

  .nx-modal-layouts.layout-sidebar .nx-modal-sidebar {
    width: 250px;
    background: #f8f9fa;
    padding: 1rem;
    border-right: 1px solid #dee2e6;
  }

  .nx-modal-layouts.layout-sidebar .nx-modal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Layout: Split */
  .nx-modal-layouts.layout-split .nx-modal-body {
    display: flex;
    gap: 1rem;
  }

  .nx-modal-layouts.layout-split .split-left,
  .nx-modal-layouts.layout-split .split-right {
    flex: 1;
    padding: 1rem;
  }

  /* Layout: Tabs */
  .nx-modal-layouts.layout-tabs .nx-modal-body {
    padding: 0;
  }

  .nx-modal-tab-nav {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 1rem 0;
    background: #f8f9fa;
  }

  .nx-modal-tab {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
  }

  .nx-modal-tab.active {
    background: #fff;
    border-color: #dee2e6;
    color: var(--modal-primary);
  }

  .nx-modal-tab-content {
    padding: 1rem;
  }

  .nx-modal-tab-pane {
    display: none;
  }

  .nx-modal-tab-pane.active {
    display: block;
  }

  /* Additional Components */
  .nx-modal-components .nx-modal-toolbar {
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    gap: 0.5rem;
  }

  .nx-modal-components .nx-modal-sidebar-toggle {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
  }

  .nx-modal-components .nx-modal-search {
    position: relative;
    flex: 1;
  }



  .nx-modal-components .nx-modal-search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
  }

  /* Status Bar */
  .nx-modal-components .nx-modal-statusbar {
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: #6c757d;
  }

  /* Breadcrumbs */
  .nx-modal-components .nx-modal-breadcrumb {
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
  }

  .nx-modal-breadcrumb ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
  }

  .nx-modal-breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 0.5rem;
    color: #6c757d;
  }

  /* Performance Optimizations */
  .nx-modal-placeholder {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
  }

  .nx-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  /* Optimize animations */
  @media (prefers-reduced-motion: reduce) {
    .nx-modal * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Optimize rendering */
  .nx-modal {
    will-change: opacity;
    contain: content;
  }

  .nx-modal-content {
    will-change: transform;
    contain: layout style paint;
  }

  /* Memory optimization indicators */
  .nx-modal.optimized::after {
    content: '✓';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #28a745;
    font-size: 0.875rem;
  }

  /* Mobile & Touch Optimizations */

  /* Touch Gestures */
  .nx-modal-touch {
    touch-action: none; /* Prevent browser handling of touch events */
  }

  .nx-modal-touch .nx-modal-content {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    overscroll-behavior: contain; /* Prevent scroll chaining */
  }

  /* Swipe to Close */
  .nx-modal-swipeable .nx-modal-content {
    transform: translateY(0);
    transition: transform 0.3s ease-out;
    will-change: transform;
  }

  .nx-modal-swipeable.swiping .nx-modal-content {
    transition: none;
  }

  .nx-modal-swipeable.swipe-close .nx-modal-content {
    transform: translateY(100%);
  }

  /* Mobile Responsive Adjustments */
  @media (max-width: 576px) {
    .nx-modal-content {
      width: 100% !important;
      margin: 0;
      border-radius: 0;
      min-height: 100%;
    }
    
    .nx-modal-centered .nx-modal-content {
      min-height: auto;
      border-radius: 8px;
      margin: 1rem;
      width: calc(100% - 2rem) !important;
    }
    
    .nx-modal-bottom-sheet .nx-modal-content {
      position: fixed;
      bottom: 0;
      border-radius: 16px 16px 0 0;
      max-height: 90vh;
    }
    
    /* Adjust header for better touch targets */
    .nx-modal-header {
      padding: 1rem;
      min-height: 56px;
    }
    
    .nx-close {
      padding: 12px;
      font-size: 24px;
    }
    
    /* Adjust footer for better touch targets */
    .nx-modal-footer {
      padding: 1rem;
       gap: 1rem;
    }
    
    .nx-modal-footer .btn {
      flex: 1;
      padding: 12px;
      font-size: 16px;
    }
  }

  /* Mobile Performance Optimizations */
  @media (max-width: 576px) {
    .nx-modal {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      perspective: 1000;
      transform: translateZ(0);
    }
    
    .nx-modal * {
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Safe Area Support */
  @supports(padding: max(0px)) {
    .nx-modal-content {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  /* Optimasi Draggable Modal */
  .nx-modal-draggable .nx-modal-content {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  .nx-modal-draggable .nx-modal-content.gpu-accelerated {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .nx-modal-draggable .nx-modal-content.dragging {
    cursor: grabbing !important;
    user-select: none;
  }

  /* Optimasi untuk header saat drag */
  .nx-modal-draggable .nx-modal-header {
    cursor: grab;
    touch-action: none;
  }

  .nx-modal-draggable .nx-modal-header:active {
    cursor: grabbing;
  }

  /* Draggable Modal Styling */
  .nx-modal-draggable .nx-modal-content {
    position: fixed;
    margin: 0;
    transform: none;
    transition: none;
    width: auto;
    max-width: 90%;
    max-height: 90vh;
  }

  .nx-modal-draggable .nx-modal-header {
    cursor: move;
    user-select: none;
    padding: 1rem;
    background: #f8f9fa;
  }

  .nx-modal-draggable .nx-modal-content.dragging {
    opacity: 0.95;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  }

  /* Snap indicators */
  .nx-modal-draggable .nx-modal-content::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 2px dashed transparent;
    pointer-events: none;
    transition: border-color 0.2s;
  }

  .nx-modal-draggable .nx-modal-content.dragging::before {
    border-color: rgba(0,0,0,0.1);
  }

  /* Override jQuery UI styles */
  .ui-draggable {
    will-change: transform;
  }

  .ui-draggable-dragging {
    transition: none !important;
    z-index: 1100 !important;
  }

  /* Window Controls - Modern Style */
  .nx-modal-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
    position: absolute;
    right: 32px;
  }

  /* Base style untuk semua tombol controls */
  .nx-modal-controls button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
  }

  /* Modern icons menggunakan pseudo-elements */
  .nx-btn-minimize::before {
    content: '';
    width: 12px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .nx-btn-maximize::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .nx-btn-restore::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 1px;
    position: absolute;
    top: 45%;
    left: 45%;
  }

  .nx-btn-restore::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 1px;
    position: absolute;
    top: 55%;
    left: 55%;
    background: white;
    z-index: 1;
  }

  /* Hover effects */
  .nx-modal-controls button:hover {
    background-color: rgba(0,0,0,0.05);
    color: #333;
  }

  /* Active/Click effects */
  .nx-modal-controls button:active {
    background-color: rgba(0,0,0,0.1);
    transform: scale(0.95);
  }

  /* Focus effects */
  .nx-modal-controls button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    .nx-modal-controls button {
      color: #999;
    }
    
    .nx-modal-controls button:hover {
      background-color: rgba(255,255,255,0.1);
      color: #fff;
    }
    
    .nx-modal-controls button:active {
      background-color: rgba(255,255,255,0.15);
    }

    .nx-btn-restore::after {
      background: #333;
    }
  }

  .nx-modal-header .nx-close {
    margin-left: 8px;
  }

  .nx-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0.75rem 1rem;
  }

  .nx-modal-header h5 {
    margin: 0;
    flex: 1;
  }

  /* State Classes */
  .nx-modal.minimized .nx-modal-content {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 300px !important;
    height: auto !important;
  }

  .nx-modal.minimized .nx-modal-body,
  .nx-modal.minimized .nx-modal-footer {
    display: none;
  }

  .nx-modal.maximized {
    padding: 0 !important;
  }

  .nx-modal.maximized .nx-modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .nx-modal.maximized .nx-modal-body {
    height: calc(100vh - var(--header-height) - var(--footer-height));
    overflow-y: auto;
    padding: 1rem;
  }

  .nx-modal.maximized .nx-modal-header {
    border-radius: 0;
    padding: 1rem;
  }

  .nx-modal.maximized .nx-modal-footer {
    padding: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
  }

  /* Transisi untuk animasi smooth */
  .nx-modal-content {
    transition: all 0.3s ease-in-out;
  }

  /* Default state - untuk restore */
  .nx-modal-content {
    position: relative;
    width: 50%;
    margin: 10% auto;
    max-width: 90%;
    max-height: 90vh;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
  }

  .nx-modal-body {
    height: auto;
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    padding: 1rem;
  }

  .nx-modal-footer {
    position: relative;
    bottom: auto;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
  }

  /* Multiple Modals */
  .nx-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .nx-modal-backdrop.show {
    opacity: 1;
  }

  /* Adjust spacing for stacked modals */
  .nx-modal-stacking:not(:first-of-type) {
    margin-top: 2rem;
    margin-left: 2rem;
  }

  /* Visual indication for active modal */
  .nx-modal-stacking.active .nx-modal-content {
    border: 2px solid #0d6efd;
  }

  /* Improve focus management */
  .nx-modal-stacking:focus {
    outline: none;
  }

  .nx-modal-stacking.active:focus .nx-modal-content {
    box-shadow: 0 0 0 3px rgba(13,110,253,0.25);
  }

  /* Modal Settings */
  .nx-modal-no-backdrop {
    background-color: transparent;
  }

  .nx-modal:not(.nx-modal-has-footer) .nx-modal-footer {
/*    display: none;*/
  }

  /* Animation Settings */
  .nx-modal-fade {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .nx-modal-fade.show {
    opacity: 1;
  }

  .nx-modal-slide {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }

  .nx-modal-slide.show {
    transform: translateY(0);
  }

  /* Position Settings */
  .nx-modal-centered .nx-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Window Controls Styling */
  .nx-modal-header.has-controls {
    display: flex;
    align-items: center;
    padding-right: 80px; /* Ruang untuk controls */
  }

  .nx-modal-header.has-controls h5 {
    flex: 1;
    margin: 0;
  }

  .nx-modal-controls {
    display: flex;
    gap: 8px;
    margin-right: 8px;
    position: absolute;
    right: 40px;
  }

  .nx-modal-controls button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #666;
    transition: all 0.2s ease;
  }

  .nx-modal-controls button:hover {
    background-color: rgba(0,0,0,0.05);
  }

  .nx-modal-controls button:active {
    background-color: rgba(0,0,0,0.1);
  }

  /* Dark mode */
  @media (prefers-color-scheme: dark) {
    .nx-modal-controls button {
      color: #999;
    }
    
    .nx-modal-controls button:hover {
      background-color: rgba(255,255,255,0.1);
    }
    
    .nx-modal-controls button span span {
      background-color: #333 !important;
    }
  }

.nx-modal-child {
    background-color: rgba(0,0,0,0.6);
}

/* Animasi untuk modal bertingkat */
.nx-modal-child .nx-modal-content {
    margin: 5% auto;
  
}
/*AND Modal*/
/* Base animation duration and fill mode */
[class*="nx-animated-"] {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-duration: 1s;
  animation-fill-mode: both
}

/* Animation modifiers */
.nx-animated-infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.nx-animated-delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}

.nx-animated-delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s
}

.nx-animated-delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s
}

.nx-animated-delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s
}

.nx-animated-delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s
}

.nx-animated-fast {
  -webkit-animation-duration: .8s;
  animation-duration: .8s
}

.nx-animated-faster {
  -webkit-animation-duration: .5s;
  animation-duration: .5s
}

.nx-animated-slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s
}

.nx-animated-slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s
}

/* Animation keyframes tetap sama */
@-webkit-keyframes bounce {

    0%,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translateZ(0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@keyframes bounce {

    0%,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translateZ(0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

/* Animation classes */
.nx-animated-bounce {
    -webkit-animation-name: bounce;
    -webkit-transform-origin: center bottom;
    animation-name: bounce;
    transform-origin: center bottom
}

@-webkit-keyframes flash {

    0%,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

@keyframes flash {

    0%,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

.nx-animated-flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.nx-animated-pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.nx-animated-rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes shake {

    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shake {

    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.nx-animated-shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.nx-animated-headShake {
    -webkit-animation-name: headShake;
    -webkit-animation-timing-function: ease-in-out;
    animation-name: headShake;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.nx-animated-swing {
    -webkit-animation-name: swing;
    -webkit-transform-origin: top center;
    animation-name: swing;
    transform-origin: top center
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.nx-animated-tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.nx-animated-wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes jello {

    0%,
    11.1%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

@keyframes jello {

    0%,
    11.1%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

.nx-animated-jello {
    -webkit-animation-name: jello;
    -webkit-transform-origin: center;
    animation-name: jello;
    transform-origin: center
}

@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.nx-animated-heartBeat {
    -webkit-animation-duration: 1.3s;
    -webkit-animation-name: heartBeat;
    -webkit-animation-timing-function: ease-in-out;
    animation-duration: 1.3s;
    animation-name: heartBeat;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    to {
        -webkit-transform: scaleX(1);
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    to {
        -webkit-transform: scaleX(1);
        opacity: 1;
        transform: scaleX(1)
    }
}

.nx-animated-bounceIn {
    -webkit-animation-duration: .75s;
    -webkit-animation-name: bounceIn;
    animation-duration: .75s;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        -webkit-transform: translate3d(0, -3000px, 0);
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        -webkit-transform: translate3d(0, 25px, 0);
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInDown {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        -webkit-transform: translate3d(0, -3000px, 0);
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        -webkit-transform: translate3d(0, 25px, 0);
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.nx-animated-bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        -webkit-transform: translate3d(-3000px, 0, 0);
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        -webkit-transform: translate3d(25px, 0, 0);
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        -webkit-transform: translate3d(-3000px, 0, 0);
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        -webkit-transform: translate3d(25px, 0, 0);
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.nx-animated-bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        -webkit-transform: translate3d(3000px, 0, 0);
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        -webkit-transform: translate3d(-25px, 0, 0);
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        -webkit-transform: translate3d(3000px, 0, 0);
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        -webkit-transform: translate3d(-25px, 0, 0);
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.nx-animated-bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        -webkit-transform: translate3d(0, 3000px, 0);
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        -webkit-transform: translate3d(0, -20px, 0);
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        -webkit-transform: translate3d(0, 3000px, 0);
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        -webkit-transform: translate3d(0, -20px, 0);
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.nx-animated-bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
}

.nx-animated-bounceOut {
    -webkit-animation-duration: .75s;
    -webkit-animation-name: bounceOut;
    animation-duration: .75s;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        -webkit-transform: translate3d(0, -20px, 0);
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    to {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        -webkit-transform: translate3d(0, -20px, 0);
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    to {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.nx-animated-bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    20% {
        -webkit-transform: translate3d(20px, 0, 0);
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }

    to {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes bounceOutLeft {
    20% {
        -webkit-transform: translate3d(20px, 0, 0);
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }

    to {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.nx-animated-bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    20% {
        -webkit-transform: translate3d(-20px, 0, 0);
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }

    to {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes bounceOutRight {
    20% {
        -webkit-transform: translate3d(-20px, 0, 0);
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }

    to {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.nx-animated-bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        -webkit-transform: translate3d(0, 20px, 0);
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }

    to {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        -webkit-transform: translate3d(0, 20px, 0);
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }

    to {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.nx-animated-bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.nx-animated-fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.nx-animated-fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    0% {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInDownBig {
    0% {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.nx-animated-fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.nx-animated-fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInLeftBig {
    0% {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.nx-animated-fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.nx-animated-fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    0% {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInRightBig {
    0% {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.nx-animated-fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.nx-animated-fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    0% {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInUpBig {
    0% {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.nx-animated-fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.nx-animated-fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 100%, 0);
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 100%, 0);
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

.nx-animated-fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.nx-animated-fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(-100%, 0, 0);
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(-100%, 0, 0);
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

.nx-animated-fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.nx-animated-fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0);
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0);
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

.nx-animated-fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.nx-animated-fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, -100%, 0);
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, -100%, 0);
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

.nx-animated-fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.nx-animated-fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes flip {
    0% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        animation-timing-function: ease-out;
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)
    }

    40% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out;
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)
    }

    50% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)
    }

    80% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg)
    }

    to {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)
    }
}

@keyframes flip {
    0% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        animation-timing-function: ease-out;
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)
    }

    40% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out;
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)
    }

    50% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)
    }

    80% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg)
    }

    to {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)
    }
}

.animated.flip {
    -webkit-animation-name: flip;
    -webkit-backface-visibility: visible;
    animation-name: flip;
    backface-visibility: visible
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateX(-20deg)
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        opacity: 1;
        transform: perspective(400px) rotateX(10deg)
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateX(-20deg)
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        opacity: 1;
        transform: perspective(400px) rotateX(10deg)
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.nx-animated-flipInX {
    -webkit-animation-name: flipInX;
    -webkit-backface-visibility: visible !important;
    animation-name: flipInX;
    backface-visibility: visible !important
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateY(90deg)
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateY(-20deg)
    }

    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        opacity: 1;
        transform: perspective(400px) rotateY(10deg)
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateY(90deg)
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateY(-20deg)
    }

    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        opacity: 1;
        transform: perspective(400px) rotateY(10deg)
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.nx-animated-flipInY {
    -webkit-animation-name: flipInY;
    -webkit-backface-visibility: visible !important;
    animation-name: flipInY;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        opacity: 1;
        transform: perspective(400px) rotateX(-20deg)
    }

    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        opacity: 1;
        transform: perspective(400px) rotateX(-20deg)
    }

    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }
}

.nx-animated-flipOutX {
    -webkit-animation-duration: .75s;
    -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    animation-duration: .75s;
    animation-name: flipOutX;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        opacity: 1;
        transform: perspective(400px) rotateY(-15deg)
    }

    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
        transform: perspective(400px) rotateY(90deg)
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        opacity: 1;
        transform: perspective(400px) rotateY(-15deg)
    }

    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
        transform: perspective(400px) rotateY(90deg)
    }
}

.nx-animated-flipOutY {
    -webkit-animation-duration: .75s;
    -webkit-animation-name: flipOutY;
    -webkit-backface-visibility: visible !important;
    animation-duration: .75s;
    animation-name: flipOutY;
    backface-visibility: visible !important
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) skewX(-30deg)
    }

    60% {
        -webkit-transform: skewX(20deg);
        opacity: 1;
        transform: skewX(20deg)
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) skewX(-30deg)
    }

    60% {
        -webkit-transform: skewX(20deg);
        opacity: 1;
        transform: skewX(20deg)
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.nx-animated-lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOut {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) skewX(30deg)
    }
}

@keyframes lightSpeedOut {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) skewX(30deg)
    }
}

.nx-animated-lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-name: lightSpeedOut;
    animation-timing-function: ease-in
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform: rotate(-200deg);
        -webkit-transform-origin: center;
        opacity: 0;
        transform: rotate(-200deg);
        transform-origin: center
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: center;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: center
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform: rotate(-200deg);
        -webkit-transform-origin: center;
        opacity: 0;
        transform: rotate(-200deg);
        transform-origin: center
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: center;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: center
    }
}

.nx-animated-rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: left bottom
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: left bottom
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: left bottom
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: left bottom
    }
}

.nx-animated-rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: right bottom
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: right bottom
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: right bottom
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: right bottom
    }
}

.nx-animated-rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: left bottom
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: left bottom
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: left bottom
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: left bottom
    }
}

.nx-animated-rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: right bottom
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: right bottom
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: right bottom
    }

    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: right bottom
    }
}

.nx-animated-rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        opacity: 1;
        transform-origin: center
    }

    to {
        -webkit-transform: rotate(200deg);
        -webkit-transform-origin: center;
        opacity: 0;
        transform: rotate(200deg);
        transform-origin: center
    }
}

@keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        opacity: 1;
        transform-origin: center
    }

    to {
        -webkit-transform: rotate(200deg);
        -webkit-transform-origin: center;
        opacity: 0;
        transform: rotate(200deg);
        transform-origin: center
    }
}

.nx-animated-rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform-origin: left bottom
    }

    to {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: left bottom
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform-origin: left bottom
    }

    to {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: left bottom
    }
}

.nx-animated-rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform-origin: right bottom
    }

    to {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: right bottom
    }
}

@keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform-origin: right bottom
    }

    to {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: right bottom
    }
}

.nx-animated-rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform-origin: left bottom
    }

    to {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: left bottom
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform-origin: left bottom
    }

    to {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: left bottom
    }
}

.nx-animated-rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform-origin: right bottom
    }

    to {
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: right bottom
    }
}

@keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform-origin: right bottom
    }

    to {
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: right bottom
    }
}

.nx-animated-rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight
}

@-webkit-keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform-origin: top left
    }

    20%,
    60% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(80deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform: rotate(80deg);
        transform-origin: top left
    }

    40%,
    80% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(60deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1;
        transform: rotate(60deg);
        transform-origin: top left
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        opacity: 0;
        transform: translate3d(0, 700px, 0)
    }
}

@keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform-origin: top left
    }

    20%,
    60% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(80deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform: rotate(80deg);
        transform-origin: top left
    }

    40%,
    80% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(60deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1;
        transform: rotate(60deg);
        transform-origin: top left
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        opacity: 0;
        transform: translate3d(0, 700px, 0)
    }
}

.nx-animated-hinge {
    -webkit-animation-duration: 2s;
    -webkit-animation-name: hinge;
    animation-duration: 2s;
    animation-name: hinge
}

@-webkit-keyframes jackInTheBox {
    0% {
        -webkit-transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        opacity: 0;
        transform: scale(.1) rotate(30deg);
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes jackInTheBox {
    0% {
        -webkit-transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        opacity: 0;
        transform: scale(.1) rotate(30deg);
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
        transform: scale(1)
    }
}

.nx-animated-jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox
}

@-webkit-keyframes rollIn {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes rollIn {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.nx-animated-rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
}

@keyframes rollOut {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
}

.nx-animated-rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

.nx-animated-zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0)
    }
}

@keyframes zoomInDown {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0)
    }
}

.nx-animated-zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0)
    }
}

@keyframes zoomInLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0)
    }
}

.nx-animated-zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0)
    }
}

@keyframes zoomInRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0)
    }
}

.nx-animated-zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0)
    }
}

@keyframes zoomInUp {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0)
    }
}

.nx-animated-zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

.nx-animated-zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes zoomOutDown {
    40% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0)
    }

    to {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom
    }
}

@keyframes zoomOutDown {
    40% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0)
    }

    to {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom
    }
}

.nx-animated-zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown
}

@-webkit-keyframes zoomOutLeft {
    40% {
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }

    to {
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0);
        transform-origin: left center
    }
}

@keyframes zoomOutLeft {
    40% {
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }

    to {
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0);
        transform-origin: left center
    }
}

.nx-animated-zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft
}

@-webkit-keyframes zoomOutRight {
    40% {
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }

    to {
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0);
        transform-origin: right center
    }
}

@keyframes zoomOutRight {
    40% {
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }

    to {
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0);
        transform-origin: right center
    }
}

.nx-animated-zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight
}

@-webkit-keyframes zoomOutUp {
    40% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0)
    }

    to {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom
    }
}

@keyframes zoomOutUp {
    40% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0)
    }

    to {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom
    }
}

.nx-animated-zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp
}

@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.nx-animated-slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.nx-animated-slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.nx-animated-slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.nx-animated-slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: hidden
    }
}

@keyframes slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: hidden
    }
}

.nx-animated-slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: hidden
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: hidden
    }
}

.nx-animated-slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: hidden
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: hidden
    }
}

.nx-animated-slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: hidden
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: hidden
    }
}

.nx-animated-slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

@media (prefers-reduced-motion) {
    [class*="nx-animated-"] {
        -webkit-animation: unset !important;
        -webkit-transition: none !important;
        animation: unset !important;
        transition: none !important
    }
}
/*AND animated*/


  .right-sidebar-grid {
    padding: 10px;
    background-color: #f8f9fa;
    border-left: 1px solid #dee2e6;
  }
  .nx-navbar {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .nx-nav-brand {
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
    margin-right: 2rem;
  }
  .nx-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nx-nav-item {
    margin-right: 1.5rem;
  }
  .nx-nav-link {
    text-decoration: none;
    color: #333;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
  }

  .nx-nav-search {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  .nx-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
  }
  .nx-nav-dropdown {
    position: relative;
  }
  .nx-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem 0;
    min-width: 160px;
    display: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .nx-nav-dropdown:hover .nx-nav-dropdown-menu {
    display: block;
  }
  .nx-nav-dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: #333;
    text-decoration: none;
  }
  .nx-nav-dropdown-item:hover {
    background-color: #f8f9fa;
    color: #007bff;
  }
  @media (max-width: 768px) {
    .nx-nav-toggle {
      display: block;
      margin-left: auto;
      background: none;
      border: none;
      color: inherit;
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0.5rem;
    }
    
    .nx-nav-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: inherit;
      padding: 1rem;
      flex-direction: column;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .nx-nav-menu.active {
      display: flex;
    }
    
    .nx-nav-item {
      margin: 0.5rem 0;
      width: 100%;
    }

    .nx-nav-link {
      display: block;
      width: 100%;
    }

    .nx-nav-search {
      display: none;
    }

    .nx-nav-search.active {
      display: flex;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      padding: 1rem;
      background-color: inherit;
    }

    .nx-search-container {
      width: 100%;
    }

    /* Dropdown responsif */
    .nx-nav-dropdown-menu {
      position: static;
      background: transparent;
      border: none;
      box-shadow: none;
      padding-left: 1rem;
    }

    .nx-nav-dropdown-item {
      color: inherit;
    }
  }
  .nx-search-container {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    min-width: 240px;
    margin-left: auto;
  }
  
  .nx-search-input {
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    padding: 4px;
    outline: none;
    font-size: 0.875rem;
  }
  
  .nx-search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  
  .nx-search-shortcut {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-left: 8px;
    user-select: none;
  }

  /* Override navbar background for search example */
  #navbar-with-search + p + .nx-navbar {
    background-color: #1a1a1a;
  }
  
  #navbar-with-search + p + .nx-navbar .nx-nav-brand,
  #navbar-with-search + p + .nx-navbar .nx-nav-link {
    color: #fff;
  }

  /* Navbar Centered */
  .nx-navbar-centered {
    justify-content: center;
    padding: 1rem 2rem;
  }

  .nx-navbar-centered .nx-nav-brand {
    position: absolute;
    left: 1rem;
  }

  .nx-navbar-centered .nx-nav-menu {
    margin: 0 auto;
    justify-content: center;
  }

  /* Navbar dengan Button */
  .nx-btn-nav {
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-left: 1rem;
  }

  .nx-btn-primary {
    background-color: #007bff;
    color: #fff;
  }

  .nx-btn-primary:hover {
    background-color: #0056b3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  /* Navbar dengan Logo */
  .nx-nav-logo {
    height: 32px;
    width: auto;
    vertical-align: middle;
    margin-right: 0.5rem;
  }

  .nx-nav-brand-with-logo {
    display: flex;
    align-items: center;
  }

  /* Navbar Dark Mode */
  .nx-navbar-dark {
    background-color: #1a1a1a;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .nx-navbar-dark .nx-nav-brand,
  .nx-navbar-dark .nx-nav-link {
    color: rgba(255,255,255,0.9);
  }

  .nx-navbar-dark .nx-nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
  }

  /* Navbar Transparan */
  .nx-navbar-transparent {
    background-color: transparent;
    box-shadow: none;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .nx-navbar-transparent .nx-nav-brand,
  .nx-navbar-transparent .nx-nav-link {
    color: rgba(255,255,255,0.9);
  }

  .nx-navbar-transparent .nx-nav-link:hover {
    background-color: rgba(255,255,255,0.1);
  }

  /* Navbar Fixed */
  .nx-navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease;
  }

  .nx-navbar-fixed-top.hide {
    transform: translateY(-100%);
  }

  /* Notifikasi */
  .nx-nav-notification {
    position: relative;
    margin-left: auto;
  }
  .nx-notification-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none;
    margin-top: 0.5rem;
    z-index: 1000;
  }

  .nx-nav-notification:hover .nx-notification-menu {
    display: block;
  }

  .nx-notification-header {
    padding: 1rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nx-notification-header h6 {
    margin: 0;
    font-weight: 600;
  }

  .nx-notification-clear {
    color: #007bff;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .nx-notification-body {
    max-height: 360px;
    overflow-y: auto;
  }

  .nx-notification-item {
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s ease;
  }

  .nx-notification-item:hover {
    background-color: #f8f9fa;
  }

  .nx-notification-content {
    flex: 1;
  }

  .nx-notification-content p {
    margin: 0;
    color: #333;
    font-size: 0.875rem;
  }

  .nx-notification-content small {
    color: #666;
    font-size: 0.75rem;
  }

  /* Icon untuk notifikasi */
  .nx-icon {
    font-size: 1.35rem;
    line-height: 1;
  }

  .nx-icon-bell::before {
    content: "";
  }

  /* Posisi Menu Navbar */
  .nx-nav-menu-left {
    margin-right: auto;
  }

  .nx-nav-menu-center {
    margin: 0 auto;
  }

  .nx-nav-menu-right {
    margin-left: auto;
  }

  /* Navbar dengan menu di tengah dan brand di kiri */
  .nx-navbar-menu-center {
    position: relative;
    justify-content: center;
  }

  .nx-navbar-menu-center .nx-nav-brand {
/*    position: absolute;
    left: 1rem;*/
  }

  .nx-navbar-menu-center .nx-nav-menu {
    margin: 0 auto;
  }

  /* Navbar dengan menu di kanan dan brand di kiri */
  .nx-navbar-menu-right {
    justify-content: space-between;
  }

  .nx-navbar-menu-right .nx-nav-menu {
    margin-left: auto;
  }

  /* Dark Navbar untuk Search Example */
  .nx-navbar-search {
    background-color: #1a1a1a;
  }

  .nx-navbar-search .nx-nav-brand,
  .nx-navbar-search .nx-nav-link {
    color: rgba(255, 255, 255, 0.9);
  }

  .nx-navbar-search .nx-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
/*AND Navbar*/
.nx-footer {
  background: #f8f9fa;
  padding: 2rem 1rem;
  margin-top: 2rem;
}

.nx-footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.nx-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.nx-footer-col h5 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.nx-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nx-footer-col ul li {
  margin-bottom: 0.5rem;
}

.nx-footer-col a {
  color: #666;
  text-decoration: none;
}

.nx-footer-col a:hover {
  color: #333;
  text-decoration: underline;
}

/* Footer dengan Media Sosial */
.nx-social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.nx-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.3s ease;
}

.nx-social-icon:hover {
  background: #333;
  color: #fff;
}

/* Footer dengan Newsletter */
.nx-newsletter {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.nx-newsletter-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.nx-input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Footer Dark Mode */
.nx-footer-dark {
  background: #222;
  color: #fff;
}

.nx-footer-dark a {
  color: #fff;
}

.nx-footer-dark a:hover {
  color: #ddd;
}

/* Footer Sticky */
.nx-footer-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(248, 249, 250, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-top: 0;
}

.nx-footer-sticky .nx-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

/* Footer Responsif */
.nx-footer-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.nx-footer-brand {
  flex: 1;
  min-width: 250px;
}

.nx-footer-brand h4 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.nx-footer-brand p {
  color: #666;
  line-height: 1.6;
}

.nx-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  flex: 2;
}

.nx-footer-section {
  min-width: 180px;
}

.nx-footer-section h5 {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1.2rem;
  position: relative;
}

.nx-footer-section h5::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 40px;
  height: 2px;
  background: #2196F3;
}

.nx-footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nx-footer-section ul li {
  margin-bottom: 0.8rem;
}

.nx-footer-section a {
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.nx-footer-section a:hover {
  color: #2196F3;
  transform: translateX(5px);
}

/* Footer Kustom */
.nx-footer-custom {
  position: relative;
  background: linear-gradient(45deg, #2196F3, #3F51B5);
  color: white;
  overflow: hidden;
}

.nx-footer-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: url('path/to/wave.svg') repeat-x;
  animation: wave 10s linear infinite;
}

.nx-footer-logo img {
  max-width: 150px;
  margin-bottom: 1rem;
}

@keyframes wave {
  0% { background-position-x: 0; }
  100% { background-position-x: 1000px; }
}

/* Responsive Design */
@media (max-width: 768px) {
  .nx-footer-responsive {
    flex-direction: column;
    gap: 3rem;
    padding: 2rem 1rem;
  }
  
  .nx-footer-brand {
    text-align: center;
  }
  
  .nx-footer-links {
    flex-direction: column;
    gap: 2rem;
  }
  
  .nx-footer-section {
    text-align: center;
    min-width: 100%;
  }
  
  .nx-footer-section h5::after {
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
  }
  
  .nx-footer-sticky .nx-footer-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .nx-footer-responsive {
    padding: 1.5rem 1rem;
  }
  
  .nx-footer-brand h4 {
    font-size: 1.3rem;
  }
  
  .nx-footer-section {
    padding: 0 1rem;
  }
}
/*AND Footer*/


/* Style dasar untuk tabel */
table,.nx-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background-color: var(--nx-white);
  border: 1px solid var(--nx-tabel-75);
}

/* Style untuk header tabel */
thead {
  background-color: var(--nx-tabel-25);
}

th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--nx-tabel-75);
/*  color: var(--nx-text-primary);*/
}

/* Style untuk sel tabel */
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--nx-tabel-75);
/*  color: var(--nx-text-primary);*/
}

/* Style untuk baris terakhir */
tbody tr:last-child td {
  border-bottom: none;
}

/* Style untuk kolom pertama */
td:first-child {
  font-weight: 500;
  color: var(--nx-tabel-700);
}

/* Style untuk tabel dengan border */
.nx-table-bordered th,
.nx-table-bordered td {
  border: 1px solid var(--nx-tabel-75);
}

/* Style untuk tabel bergaris */
.nx-table-striped tbody tr:nth-child(odd) {
  background-color: var(--nx-tabel-25);
}

/* Style untuk tabel responsif */
.nx-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Style untuk tabel compact */
.nx-table-compact th,
.nx-table-compact td {
  padding: 8px 12px;
}

/* Style untuk tabel dokumentasi */
.nx-table-docs {
  border: 1px solid var(--nx-tabel-75);
}

.nx-table-docs td:first-child {
  width: 200px;
}

/* Hover Effect */
.nx-table-hover tbody tr:hover {
  background-color: rgba(0,0,0,0.05);
}

/* Header Berwarna */
.nx-table-header-primary thead {
  background-color: var(--nx-primary);
  color: white;
}

/* Ukuran Tabel */
.nx-table-sm td,
.nx-table-sm th {
  padding: 0.3rem;
}

.nx-table-lg td,
.nx-table-lg th {
  padding: 1rem;
}

/* Status Rows */
.nx-table-success {
  background-color: rgba(40, 167, 69, 0.1);
}

.nx-table-warning {
  background-color: rgba(255, 193, 7, 0.1);
}

.nx-table-danger {
  background-color: rgba(220, 53, 69, 0.1);
}

/* Pagination */
.nx-table-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.nx-pagination-numbers {
  display: flex;
  gap: 0.25rem;
}

/* Sortable Table */
.nx-table-sortable th.sortable {
  cursor: pointer;
  position: relative;
}

.nx-table-sortable th.sortable:hover {
  background-color: rgba(0,0,0,0.05);
}

.nav-group {
  font-weight: 600;
  color: var(--nx-tabel-600);
  padding: 0.5rem 0 0.25rem 0;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Filter */
.nx-table-filter {
  margin-bottom: 1rem;
}

.nx-table-filter .nx-input {
  width: 100%;
  max-width: 300px;
}

/* Selectable */
.nx-table-selectable th:first-child,
.nx-table-selectable td:first-child {
  width: 40px;
  text-align: center;
}

/* Nested Table */
.nx-table-nested .nested-row {
  background-color: var(--nx-tabel-50);
}

.nx-table-nested .nested-row.hidden {
  display: none;
}

.toggle-nested {
  padding: 0;
  width: 24px;
  height: 24px;
  line-height: 1;
}

/* Custom Table */
.nx-table-custom .product-cell {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nx-table-custom .product-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.nx-table-custom .product-name {
  font-weight: 500;
}

.nx-table-custom .product-category {
  font-size: 0.875rem;
  color: var(--nx-tabel-600);
}

.nx-table-custom .action-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
/*AND Tabel*/
.nx-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.nx-lightbox-overlay.active {
  display: flex;
  opacity: 1;
}

.nx-lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.nx-lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.nx-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  cursor: pointer;
}

.nx-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  cursor: pointer;
  padding: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.nx-lightbox-nav:hover {
  background: rgba(255,255,255,0.2);
}

.nx-lightbox-prev {
  left: 20px;
}

.nx-lightbox-next {
  right: 20px;
}

.material-icons {
  font-size: 24px;
  user-select: none;
}

.nx-lightbox-nav .material-icons {
  font-size: 36px;
}

/* Masonry Layout */
.nx-lightbox-masonry {
  columns: 3 200px;
  column-gap: 15px;
  padding: 20px 0;
}

.nx-lightbox-masonry .nx-lightbox-item {
  break-inside: avoid;
  margin-bottom: 15px;
}

.nx-lightbox-masonry img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* Hover Effect dengan Info */
.nx-hover-info {
  position: relative;
  overflow: hidden;
}

.nx-lightbox-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.nx-hover-info:hover .nx-lightbox-info {
  transform: translateY(0);
}

.nx-lightbox-info h6 {
  margin: 0 0 5px 0;
  font-size: 16px;
}

.nx-lightbox-info p {
  margin: 0;
  font-size: 14px;
}

.nx-lightbox-info .material-icons {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* Strip Thumbnail */
.nx-lightbox-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nx-lightbox-main img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.nx-lightbox-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 5px 0;
}

.nx-lightbox-thumbs img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.nx-lightbox-thumbs img:hover,
.nx-lightbox-thumbs img.active {
  opacity: 1;
}

.nx-lightbox-overlay.active .nx-lightbox-content {
  transform: scale(1);
} 
/*AND Lightbox*/
.nx-video {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  background-color: #000;
}

.nx-video-responsive {
  width: 100%;
  max-width: 100%;
  height: auto;
}



.video-wrapper {
  position: relative;
  width: 100%;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.video-wrapper:hover .video-overlay {
  opacity: 1;
}

.video-overlay h3 {
  margin: 0;
  font-size: 1.5em;
}

.video-overlay p {
  margin: 10px 0 0;
}

.video-custom-controls {
  position: relative;
  width: 100%;
}

.custom-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-controls .nx-btn {
  background: transparent;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.custom-controls .timeline {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
}

/* YouTube iframe styles */
iframe.nx-video {
  aspect-ratio: 16/9;
  border: none;
}

.video-wrapper iframe.nx-video-responsive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
}

/* Video Background */
.video-bg-container {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.nx-video-background {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.video-bg-content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding: 20px;
}

/* Video Playlist */
.video-playlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.playlist-controls {
  display: flex;
  gap: 10px;
}

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

.playlist-items li {
  padding: 10px;
  cursor: pointer;
  background: #f5f5f5;
  margin-bottom: 5px;
}

.playlist-items li.active {
  background: #e0e0e0;
}

/* YouTube Parameter List */
.parameter-list {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.parameter-list h5 {
  margin-top: 0;
  margin-bottom: 10px;
}

.parameter-list ul {
  margin: 0;
  padding-left: 20px;
}

.parameter-list li {
  margin-bottom: 5px;
}

.parameter-list code {
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Navigation Categories */
.nav-category {
  font-weight: bold;
  color: #666;
  padding: 10px 0 5px;
  margin-top: 15px;
  border-top: 1px solid #eee;
}

.nav-category:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
} 
/*AND video*/
.nx-thumbnav {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 0;
  list-style: none;
}

.nx-thumbnav > li {
  flex: 0 0 auto;
}

.nx-thumbnav img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  transition: 0.2s ease;
}

.nx-thumbnav a:hover img {
  opacity: 0.7;
}

.nx-thumbnav-vertical {
  flex-direction: column;
}

.nx-thumbnav-caption {
  display: block;
  text-align: center;
  margin-top: 5px;
  font-size: 0.875rem;
  color: #666;
}

.nx-thumbnav-item {
  text-decoration: none;
}

.nx-thumbnav .nx-active img {
  border: 2px solid #0066cc;
}

.nx-thumbnav-small img {
  width: 60px;
  height: 60px;
}

.nx-thumbnav-large img {
  width: 100px;
  height: 100px;
}
/*AND thumbnav*/
.nx-sticky {
  position: sticky;
  z-index: 100;
}

/* Sticky Left & Right */
.nx-sticky-left {
  position: sticky;
  left: 0;
  float: left;
}

.nx-sticky-right {
  position: sticky;
  right: 0;
  float: right;
}

.sticky-wrapper {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 20px;
}

.content-middle {
  flex: 1;
  min-width: 500px;
  padding: 20px;
  background: #f8f8f8;
}

/* Container Demo */
.sticky-container-demo {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 15px;
}

.demo-content {
  height: 600px;
  padding: 20px;
  background: #f8f8f8;
}

/* Z-Index Demo */
.z-index-1 {
  z-index: 1;
}

.z-index-2 {
  z-index: 2;
}

/* Responsive Sticky */
@media (max-width: 768px) {
  .nx-sticky-responsive {
    position: static;
  }
}

/* Demo Styling */
.demo-sticky {
  height: 200px;
  overflow-y: auto;
  background: #f0f0f0;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  padding: 15px;
}

.demo-sticky-horizontal {
  overflow-x: auto;
  background: #f0f0f0;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.sticky-content {
  background: white;
  padding: 15px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Animasi */
.nx-sticky.is-sticky {
  transition: all 0.3s ease;
}
/*AND sticky*/
/* Base styles */
.nx-stats {
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nx-stats-colored {
  color: white;
}

/* Color variations */
.nx-stats-win-blue { background-color: #0078D4; }
.nx-stats-win-success { background-color: #107C10; }
.nx-stats-win-warning { background-color: #FFB900; color: black; }
.nx-stats-win-error { background-color: #E81123; }

/* Stats dengan Icon */
.nx-stats-with-icon {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nx-stats-with-icon i {
  font-size: 2rem;
}

/* Stats dengan Trend */
.nx-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nx-stats-trend-up {
  color: #107C10;
  font-weight: 500;
}

.nx-stats-trend-down {
  color: #E81123;
  font-weight: 500;
}

/* Stats Group */
.nx-stats-group {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nx-stats-item {
  flex: 1;
  text-align: center;
}

.nx-stats-divider {
  width: 1px;
  height: 40px;
  background: #e0e0e0;
  margin: 0 1rem;
}

/* Stats dengan Progress */
.nx-stats-progress-header {
  margin-bottom: 1rem;
}

.nx-stats-progress-bar {
  height: 6px;
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.nx-stats-progress-bar.light {
  background: rgba(255,255,255,0.2);
}

.nx-stats-progress-fill {
  height: 100%;
  background: #0078D4;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.nx-stats-colored .nx-stats-progress-fill {
  background: rgba(255,255,255,0.9);
}

/* Stats dengan Chart */
.nx-stats-chart-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.nx-stats-mini-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 40px;
}

.nx-stats-sparkline-bar {
  width: 4px;
  background: #0078D4;
  border-radius: 2px;
}

.nx-stats-colored .nx-stats-sparkline-bar {
  background: rgba(255,255,255,0.9);
}

/* Stats Grid */
.nx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.nx-stats-grid-item {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nx-stats-grid-item i {
  font-size: 2rem;
  color: #0078D4;
  margin-bottom: 0.5rem;
}

.nx-stats-grid-item h4 {
  margin: 0.5rem 0;
  font-size: 1.5rem;
}

.nx-stats-grid-item p {
  margin: 0;
  color: #666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nx-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .nx-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Progress Bar Styles */
.nx-stats-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.nx-stats-animated {
  animation: nx-stats-progress-stripes 1s linear infinite;
}

@keyframes nx-stats-progress-stripes {
  from { background-position: 1rem 0; }
  to { background-position: 0 0; }
}

/* Progress Bar Sizes */
.nx-stats-progress-sm {
  height: 4px;
}

.nx-stats-progress-lg {
  height: 8px;
}

/* Progress Bar Rounded */
.nx-stats-progress-rounded {
  border-radius: 1rem;
}

.nx-stats-progress-rounded .nx-stats-progress-fill {
  border-radius: 1rem;
}

/* Progress Bar Gradient */
.nx-stats-progress-gradient .nx-stats-progress-fill {
  background: linear-gradient(45deg, #0078D4, #00B294);
}

/* Progress Bar with Label */
.nx-stats-progress-label {
  position: relative;
}

.nx-stats-progress-label span {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: white;
}

/* Progress Bar Stack */
.nx-stats-progress-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nx-stats-progress-item {
  width: 100%;
}

.nx-stats-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: #666;
}

/* Gradient Progress Styles */
.nx-stats-progress-gradient {
  background: linear-gradient(45deg, #0078D4, #00B294);
}

.nx-stats-progress-gradient-alt {
  background: linear-gradient(45deg, #5C2D91, #0078D4);
}

/* Hover Effects */
.nx-stats-progress-bar:hover .nx-stats-progress-fill {
  opacity: 0.9;
}

.nx-stats-progress-gradient:hover,
.nx-stats-progress-gradient-alt:hover {
  background-size: 200% 200%;
  animation: gradientShift 2s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Progress Bar with Icon */
.nx-stats-progress-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nx-stats-progress-with-icon i {
  font-size: 1rem;
  color: inherit;
}

/* Card Stats Styles */
.nx-stats-card {
  display: flex;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.nx-stats-shadow-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.nx-stats-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-right: 1rem;
}

.nx-bg-soft-blue {
  background-color: rgba(0,120,212,0.1);
  color: #0078D4;
}

.nx-bg-soft-success {
  background-color: rgba(16,124,16,0.1);
  color: #107C10;
}

.nx-stats-card-content {
  flex: 1;
}

.nx-stats-card-trend {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Modern Color Stats Styles */
.nx-stats-modern {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
}

.nx-stats-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.nx-stats-modern.nx-stats-win-blue {
  background: linear-gradient(135deg, #0078D4, #00A2F3);
}

.nx-stats-modern.nx-stats-win-success {
  background: linear-gradient(135deg, #107C10, #13A10E);
}

.nx-stats-modern.nx-stats-win-warning {
  background: linear-gradient(135deg, #FFB900, #FFD452);
}

.nx-stats-modern.nx-stats-win-error {
  background: linear-gradient(135deg, #E81123, #FF4343);
}

.nx-stats-modern-icon {
  margin-bottom: 1rem;
}

.nx-stats-modern-icon i {
  font-size: 1.75rem;
  opacity: 0.9;
}

.nx-stats-modern-content {
  position: relative;
  z-index: 1;
}

.nx-stats-modern-content h3 {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.nx-stats-modern-content p {
  margin: 0.25rem 0 0;
  opacity: 0.9;
  font-size: 0.875rem;
}

.nx-stats-modern-decoration {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 100px;
  height: 100px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  pointer-events: none;
}

.nx-stats-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.nx-stats-modern:hover::before {
  opacity: 1;
}

/* Khusus untuk warning yang menggunakan teks gelap */
.nx-stats-modern.nx-stats-win-warning {
  color: #000;
}

.nx-stats-modern.nx-stats-win-warning .nx-stats-modern-decoration {
  background: rgba(0,0,0,0.05);
}

/* Comparison Stats */
.nx-stats-comparison {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nx-stats-comparison-divider {
  width: 1px;
  height: 50px;
  background: rgba(0,0,0,0.1);
}

.nx-stats-comparison-previous {
  opacity: 0.7;
}

/* Radial Progress Stats */
.nx-stats-radial {
  text-align: center;
}

.nx-stats-radial-progress {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem;
}

.nx-stats-radial-outer {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#0078D4 75%, #f0f0f0 0);
}

.nx-stats-radial-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nx-stats-radial-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0078D4;
}

/* List Stats Styles */
.nx-stats-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nx-stats-list-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nx-stats-list-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.nx-stats-list-content {
  flex: 1;
}

.nx-stats-list-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* Comparison Cards Styles */
.nx-stats-comparison-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.nx-stats-comparison-card {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Info Cards Styles */
.nx-stats-info-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nx-stats-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.nx-stats-info-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nx-stats-info-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nx-stats-info-value {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.nx-stats-info-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
}

/* Grid Cards Styles */
.nx-stats-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.nx-stats-grid-card {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.nx-stats-grid-card:hover {
  transform: translateY(-3px);
}

.nx-stats-grid-card-icon {
  margin-bottom: 1rem;
  color: #0078D4;
}

.nx-stats-grid-card-footer {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Enhanced Comparison Cards */
.nx-stats-comparison-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.nx-stats-comparison-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.nx-badge-soft-blue {
  background: rgba(0,120,212,0.1);
  color: #0078D4;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
}

.nx-badge-soft-gray {
  background: rgba(102,102,102,0.1);
  color: #666;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
}

.nx-badge-pulse {
  position: relative;
  background: #10B981;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
}

.nx-badge-pulse::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  animation: pulse 2s infinite;
}

/* Enhanced Info Cards */
.nx-stats-info-subtitle {
  color: #666;
  font-size: 0.875rem;
  margin: 0;
}

.nx-stats-info-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.nx-stats-info-metric {
  position: relative;
}

.nx-stats-info-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.nx-btn-soft {
  background: rgba(0,0,0,0.05);
  color: #666;
  border: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.nx-btn-soft:hover {
  background: rgba(0,0,0,0.1);
  color: #000;
}

/* Enhanced Grid Cards */
.nx-stats-grid-card-hover {
  position: relative;
  overflow: hidden;
}

.nx-stats-grid-card-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0), rgba(255,255,255,0.1), rgba(255,255,255,0));
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.nx-stats-grid-card-hover:hover::before {
  transform: translateX(100%);
}

.nx-stats-grid-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.nx-stats-grid-card-chart {
  margin: 1rem 0;
  height: 40px;
}

.nx-stats-grid-card-actions {
  position: absolute;
  top: 1rem;
  right: 1rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.nx-stats-grid-card-hover:hover .nx-stats-grid-card-actions {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulse {
  0% { transform: translateY(-50%) scale(1); opacity: 1; }
  50% { transform: translateY(-50%) scale(1.5); opacity: 0.5; }
  100% { transform: translateY(-50%) scale(1); opacity: 1; }
}

/* Stats Group Style 2 */
.nx-stats-group-vertical {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nx-stats-item-v2 {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
}

.nx-stats-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0,120,212,0.1);
  color: #0078D4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.nx-stats-item-content {
  flex: 1;
}

.nx-stats-item-content h4 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.nx-stats-item-content p {
  margin: 0.25rem 0;
  color: #666;
}

.nx-stats-item-trend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.nx-stats-divider-v2 {
  height: 1px;
  background: #e0e0e0;
  margin: 0.5rem 0;
}

/* Stats Group Style 3 */
.nx-stats-group-modern {
  display: flex;
  gap: 1.5rem;
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.nx-stats-item-v3 {
  flex: 1;
}

.nx-stats-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.nx-stats-item-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
}

.nx-stats-item-title i {
  color: #0078D4;
}

.nx-stats-divider-v3 {
  width: 1px;
  background: #e0e0e0;
}

.nx-stats-mini-chart {
  margin-top: 1rem;
  height: 30px;
}

/* Stats Group Style 4 */
.nx-stats-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.nx-stats-item-v4 {
  position: relative;
  padding: 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.nx-stats-item-v4:hover {
  transform: translateY(-5px);
}

.nx-stats-item-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0078D4, #00A2F3);
}

.nx-stats-item-bg.success {
  background: linear-gradient(90deg, #107C10, #13A10E);
}

.nx-stats-item-v4 .nx-stats-item-icon {
  margin-bottom: 1rem;
}

.nx-stats-item-v4 .nx-stats-item-content {
  text-align: center;
}

.nx-stats-item-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

/* Modern Glass Effect */
.nx-stats-glass-effect {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nx-stats-glass-effect:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.nx-stats-card-blur {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, 
    rgba(0, 120, 212, 0.1), 
    transparent 70%);
  filter: blur(20px);
  z-index: -1;
}

.nx-icon-ring {
  position: absolute;
  width: 200%;
  height: 200%;
  border: 2px solid rgba(0, 120, 212, 0.2);
  border-radius: 50%;
  animation: ring-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.nx-badge-glow {
  background: linear-gradient(135deg, #0078D4, #00A2F3);
  animation: badge-glow 2s ease-in-out infinite alternate;
}

/* Modern Group Styles */
.nx-stats-group-modern {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95), 
    rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  border-radius: 16px;
}

.nx-stats-item-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, 
    rgba(0, 120, 212, 0.1), 
    transparent 70%);
  filter: blur(20px);
  z-index: -1;
}

.nx-icon-pulse {
  position: absolute;
  inset: -25%;
  border: 2px solid rgba(0, 120, 212, 0.2);
  border-radius: 50%;
  animation: pulse 2s ease-out infinite;
}

.nx-progress-shine {
  background: linear-gradient(90deg, #0078D4, #00A2F3);
  background-size: 200% auto;
  animation: shine 2s linear infinite;
}

/* Animations */
@keyframes ring-pulse {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.2); opacity: 0; }
}

@keyframes badge-glow {
  from { box-shadow: 0 0 10px rgba(0, 120, 212, 0.5); }
  to { box-shadow: 0 0 20px rgba(0, 120, 212, 0.8); }
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

@keyframes shine {
  to { background-position: 200% center; }
}

/* Area Chart Styles */
.nx-stats-area-chart {
  width: 100%;
  height: 40px;
  margin: 1rem 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .nx-stats-glass-effect:hover {
    transform: translateY(-4px);
  }
  
  .nx-stats-group-modern {
    padding: 1rem;
  }
}

/* Profile Stats Styles */
.nx-stats-profile {
  padding: 1.5rem;
}

.nx-stats-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.nx-stats-avatar {
  position: relative;
  width: 64px;
  height: 64px;
}

.nx-stats-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nx-stats-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.nx-stats-avatar-status.online {
  background-color: #10B981;
}

.nx-stats-avatar-status.offline {
  background-color: #6B7280;
}

.nx-stats-profile-info {
  flex: 1;
}

.nx-stats-profile-info h4 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.nx-stats-profile-info p {
  margin: 0.25rem 0 0;
  color: #666;
  font-size: 0.875rem;
}

.nx-stats-profile-metrics {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.nx-stats-metric {
  flex: 1;
  text-align: center;
}

.nx-stats-metric h5 {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
  font-weight: normal;
}

.nx-stats-metric span {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Modern Profile Stats */
.nx-stats-profile-modern {
  padding: 0;
  overflow: hidden;
}

.nx-stats-profile-cover {
  height: 80px;
  background: linear-gradient(45deg, #0078D4, #00A2F3);
}

.nx-stats-profile-content {
  position: relative;
  padding: 0 1.5rem 1.5rem;
  margin-top: -40px;
  text-align: center;
}

.nx-stats-avatar-large {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
}

.nx-stats-avatar-large img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.nx-stats-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: #FFB900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  color: #000;
  font-size: 0.75rem;
}

.nx-stats-profile-badges {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.nx-stats-profile-modern .nx-stats-profile-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.nx-stats-profile-modern .nx-stats-metric span {
  font-size: 1.5rem;
  color: #0078D4;
}

.nx-stats-profile-modern .nx-stats-metric small {
  display: block;
  color: #666;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Profile Stats Compact Style */
.nx-stats-profile-compact {
  padding: 1.25rem;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f5f7fa);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.nx-stats-profile-wrapper {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.nx-stats-avatar-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
}

.nx-stats-avatar-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.nx-stats-avatar-indicator {
  position: absolute;
  bottom: -8px;
  right: -8px;
  background: #fff;
  padding: 2px;
  border-radius: 6px;
}

.nx-badge-pro {
  background: linear-gradient(135deg, #0078D4, #00B294);
  color: white;
  font-size: 0.625rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.nx-stats-profile-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nx-stats-verified-badge {
  color: #0078D4;
  font-size: 1rem;
}

.nx-stats-profile-tags {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.nx-tag {
  background: rgba(0,120,212,0.1);
  color: #0078D4;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.nx-progress-gradient {
  background: linear-gradient(90deg, #0078D4, #00B294);
  border-radius: 6px;
}

/* Team Profile Stats Style */
.nx-stats-profile-team {
  padding: 1.5rem;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.nx-stats-team-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.nx-stats-team-avatars {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nx-stats-avatar-stack {
  display: flex;
  align-items: center;
}

.nx-stats-avatar-stack img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nx-stats-avatar-stack img:first-child {
  margin-left: 0;
}

.nx-stats-avatar-more {
  width: 40px;
  height: 40px;
  background: #f0f2f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #666;
  margin-left: -10px;
  border: 2px solid #fff;
}

.nx-badge-active {
  background: rgba(16,185,129,0.1);
  color: #10B981;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
}

.nx-stats-team-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.nx-stats-metric-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 12px;
  transition: transform 0.2s;
}

.nx-stats-metric-card:hover {
  transform: translateY(-2px);
}

.nx-stats-metric-icon {
  width: 40px;
  height: 40px;
  background: rgba(0,120,212,0.1);
  color: #0078D4;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.nx-stats-metric-icon.success {
  background: rgba(16,185,129,0.1);
  color: #10B981;
}

.nx-stats-metric-data {
  flex: 1;
}

.nx-stats-metric-data h5 {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

.nx-stats-metric-data span {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: #000;
}

/*AND Stats*/
.nx-sortable {
  min-height: 50px;
}

.nx-sortable .handle {
  cursor: move;
  margin-right: 10px;
  color: #666;
}

.nx-sortable.nested .nested-child {
  margin-left: 20px;
  margin-top: 10px;
}

.nx-sortable-item {
  background: #f5f5f5;
  padding: 10px;
  margin: 5px 0;
  cursor: move;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.nx-sortable-item:hover {
  background: #eee;
}

.sortable-placeholder {
  border: 1px dashed #ccc;
  background: #f9f9f9;
  height: 40px;
  margin: 5px 0;
}

.sortable-dragging {
  opacity: 0.5;
}

.nx-sortable-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 15px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.nx-sortable-grid-item {
  background: #f8f9fa;
  padding: 25px 20px;
  text-align: center;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  cursor: move;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  font-size: 1.1em;
  color: #333;
  font-weight: 500;
}

.nx-sortable-grid-item:hover {
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  transform: translateY(-2px);
  border-color: #adb5bd;
}

.nx-sortable-grid-item.sortable-ghost {
  background: #e9ecef;
  border: 2px dashed #6c757d;
  box-shadow: none;
}

.nx-sortable-grid-item.sortable-drag {
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  opacity: 0.9;
  z-index: 1000;
}

@media (max-width: 992px) {
  .nx-sortable-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .nx-sortable-grid-item {
    padding: 20px 15px;
    min-height: 70px;
    font-size: 1em;
  }
}

@media (max-width: 576px) {
  .nx-sortable-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .nx-sortable-grid-item {
    padding: 15px;
    min-height: 60px;
  }
} 
/*AND sortable*/
.nx-search {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 400px;
}

.nx-search input {
  border: none;
  outline: none;
  width: 100%;
  padding: 0 8px;
  font-size: 14px;
}

.nx-search-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0 4px;
}

.nx-search-btn:hover {
  color: #333;
}

/* Outline variant */
.nx-search-outline {
  box-shadow: none;
  border: 1px solid #ddd;
}

.nx-search-outline:focus-within {
  border-color: #007bff;
}

/* Size variants */
.nx-search-sm {
  padding: 4px 8px;
  font-size: 12px;
}

.nx-search-sm input {
  font-size: 12px;
}

.nx-search-lg {
  padding: 12px 16px;
  font-size: 16px;
}

.nx-search-lg input {
  font-size: 16px;
}

/* Autocomplete styles */
.nx-search-autocomplete {
  position: relative;
}

.nx-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: none;
}

.nx-search-autocomplete.active .nx-search-suggestions {
  display: block;
}

.nx-search-item {
  padding: 8px 12px;
  cursor: pointer;
}

.nx-search-item:hover {
  background: #f5f5f5;
}

/* Clear button styles */
.nx-search-with-clear .nx-search-clear {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 0 4px;
  display: none;
}

.nx-search-with-clear.has-value .nx-search-clear {
  display: block;
}

.nx-search-clear:hover {
  color: #666;
}

/* Loading state styles */
.nx-search-loading {
  opacity: 0.7;
}

.nx-search-loading input,
.nx-search-loading button {
  cursor: not-allowed;
}

.nx-search-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #ddd;
  border-top-color: #007bff;
  border-radius: 50%;
  margin: 0 8px;
  animation: search-spin 0.8s linear infinite;
}

@keyframes search-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Disabled state */
.nx-search input:disabled {
  background: #f5f5f5;
}

.nx-search button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/*AND search*/
.nx-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.nx-img-rounded {
  border-radius: 8px;
}

.nx-img-circle {
  border-radius: 50%;
}



.nx-img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}

.nx-img-fluid {
  max-width: 100%;
  height: auto;
}

/* Image Filters */
.nx-img-grayscale {
  filter: grayscale(100%);
}

.nx-img-blur {
  filter: blur(3px);
}

.nx-img-sepia {
  filter: sepia(100%);
}


/* Hover Effects */
.nx-img-hover-zoom {
  transition: transform 0.3s ease;
}

.nx-img-hover-zoom:hover {
  transform: scale(1.1);
}

.nx-img-hover-brightness {
  transition: filter 0.3s ease;
}

.nx-img-hover-brightness:hover {
  filter: brightness(1.2);
}

.nx-img-hover-rotate {
  transition: transform 0.3s ease;
}

.nx-img-hover-rotate:hover {
  transform: rotate(5deg);
}

/* Overlay */
.nx-img-overlay-container {
  position: relative;
  overflow: hidden;
}

.nx-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  color: white;
}

.nx-img-overlay-container:hover .nx-img-overlay {
  height: 100%;
}

.nx-img-overlay h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
}

.nx-img-overlay p {
  margin: 0;
  font-size: 0.875rem;
}

/*AND Images*/
/* Gaya dasar avatar */
.nx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e2e8f0;
  position: relative;
}

/* Ukuran avatar */
.nx-avatar-xs {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.nx-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.nx-avatar-md {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.nx-avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

.nx-avatar-xl {
  width: 96px;
  height: 96px;
  font-size: 36px;
}

/* Avatar dengan gambar */
.nx-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}

/* Avatar dengan inisial */
.nx-avatar-initial {
  color: #ffffff;
  background-color: #4f46e5;
  text-transform: uppercase;
  font-weight: 500;
}

/* Avatar dengan status */
.nx-avatar-status {
  position: relative;
}

.nx-avatar-status::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 0;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  border: 1px solid #fff;
  transform: translate(10%, 10%);
}

/* Warna status */
.nx-avatar-online::after {
  background-color: #22c55e;
}

.nx-avatar-offline::after {
  background-color: #9ca3af;
}

.nx-avatar-busy::after {
  background-color: #ef4444;
}

.nx-avatar-away::after {
  background-color: #f59e0b;
}

/* Avatar grup */
.nx-avatar-group {
  display: inline-flex;
}

.nx-avatar-group .nx-avatar {
  margin-left: -0.5rem;
  border: 2px solid #ffffff;
}

.nx-avatar-group .nx-avatar:first-child {
  margin-left: 0;
}

/* Avatar dengan border */
.nx-avatar-bordered {
  border: 2px solid #e2e8f0;
}

/* Avatar dengan badge */
.nx-avatar-badge {
  position: relative;
}

.nx-avatar-badge::after {
  content: attr(data-badge);
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background-color: #ef4444;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}

/* Mode gelap */
.nx-dark .nx-avatar {
  background-color: #374151;
}

.nx-dark .nx-avatar-group .nx-avatar {
  border-color: #1f2937;
}

.nx-dark .nx-avatar-bordered {
  border-color: #374151;
}

/* Tambahkan spacing untuk container demo */
.avatar-demo {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

/* Mode gelap - penyesuaian border */
.nx-dark .nx-avatar-status::after {
  border-color: #1f2937;
}

/* Avatar dengan Border */
.nx-avatar-border {
  padding: 2px;
}

.nx-border-primary {
  background-color: #4f46e5;
}

.nx-border-success {
  background-color: #22c55e;
}

.nx-border-danger {
  background-color: #ef4444;
}

/* Avatar dengan Tooltip */
.nx-avatar-tooltip {
  position: relative;
}

.nx-avatar-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background-color: #1f2937;
  color: #ffffff;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.nx-avatar-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
  bottom: calc(100% + 5px);
}

/* Avatar Stack */
.nx-avatar-stack {
  display: inline-flex;
  align-items: center;
}

.nx-avatar-stack .nx-avatar {
  margin-left: -1rem;
  border: 2px solid #ffffff;
  transition: transform 0.2s ease;
}

.nx-avatar-stack .nx-avatar:first-child {
  margin-left: 0;
}

.nx-avatar-stack .nx-avatar:hover {
  transform: translateY(-5px);
}

.nx-avatar-more {
  background-color: #e5e7eb;
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Avatar Skeleton */
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.nx-avatar-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Dark Mode */
.nx-dark .nx-avatar-badge::after {
  border-color: #1f2937;
}

.nx-dark .nx-avatar-stack .nx-avatar {
  border-color: #1f2937;
}

.nx-dark .nx-avatar-more {
  background-color: #374151;
  color: #e5e7eb;
}

.nx-dark .nx-avatar-skeleton {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}
/*AND Avatar*/
.nx-list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 0.25rem;
}

.nx-list-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  margin-bottom: -1px;
}

.nx-list-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.nx-list-item:last-child {
  margin-bottom: 0;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.nx-list-item.active {
  z-index: 2;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

a.nx-list-item {
  color: #495057;
  text-decoration: none;
}

a.nx-list-item:hover {
  background-color: #f8f9fa;
  text-decoration: none;
}

a.nx-list-item.active:hover {
  background-color: #0056b3;
}

/* Disabled state */
.nx-list-item.disabled,
.nx-list-item:disabled {
  pointer-events: none;
  background-color: #e9ecef;
  color: #6c757d;
}

/* Flush variant */
.nx-list-group-flush {
  border-radius: 0;
}

.nx-list-group-flush .nx-list-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.nx-list-group-flush .nx-list-item:first-child {
  border-top: 0;
}

/* Contextual variants */
.nx-list-primary {
  background-color: #cce5ff;
  color: #004085;
}

.nx-list-success {
  background-color: #d4edda;
  color: #155724;
}

.nx-list-danger {
  background-color: #f8d7da;
  color: #721c24;
}

.nx-list-warning {
  background-color: #fff3cd;
  color: #856404;
}

/* Badge support */
.nx-list-item.d-flex {
  display: flex !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.align-items-center {
  align-items: center !important;
}

/* List with Image */
.nx-list-item-action {
  width: 100%;
  text-align: left;
  transition: all 0.2s ease;
}

.nx-list-item-action:hover {
  background-color: #f8f9fa;
  transform: translateX(5px);
}

.nx-list-media {
  display: flex;
  align-items: flex-start;
  padding: 0.5rem 0;
}

.nx-list-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 1rem;
  object-fit: cover;
}

.nx-list-content {
  flex: 1;
  min-width: 0;
}

.nx-list-title {
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: #212529;
}

.nx-list-text {
  margin-bottom: 0.25rem;
  color: #6c757d;
  font-size: 0.875rem;
}

.nx-list-time {
  color: #adb5bd;
  font-size: 0.75rem;
}

/* Hover effect untuk list dengan gambar */
.nx-list-item-action:hover .nx-list-title {
  color: #007bff;
}

.nx-list-item-action:hover .nx-list-img {
  transform: scale(1.05);
  transition: transform 0.2s ease;
} 
/*AND List Group*/

    /* Styling untuk scrollbar */
    .page-gridnav-grid::-webkit-scrollbar {
        width: 0; /* Sembunyikan scrollbar secara default */
        transition: width 0.3s ease;
    }

    .page-gridnav-grid:hover::-webkit-scrollbar {
        width: 6px; /* Tampilkan scrollbar saat hover */
    }

    .page-gridnav-grid::-webkit-scrollbar-track {
        background: transparent;
    }

    .page-gridnav-grid::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 3px;
    }

    /* gridnavigation styling */
    .gridnav {
        list-style: none;
        padding: 0;
        margin: 0;
        direction: ltr;
    }

    .gridnav li {
        margin-top: 2px;
    }

    .gridnav > li > a {
         color: #666;
        font-weight: 500;
        font-size: 13px;
        padding: 2px 12px;
        display: block;
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

    .gridnav > li > a:hover,
    .gridnav > li > a.active {
        background: #f6f8fa;
        color: #666666;
    }

    /* Sub menu styling */
    .gridnav ul {
        list-style: none;
        padding: 0;
        margin: 2px 0 8px 0;
    }

    .gridnav ul li a {
        color: #666;
        font-size: 13px;
        padding: 4px 12px 4px 24px;
        display: block;
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

    .gridnav ul li a:hover,
    .gridnav ul li a.active {
        background: #f6f8fa;
        color: #666666;
    }

    /* Active state styles */
    .gridnav li > a.active {
        background-color: #f0f0f0;
        color: #666666;
        font-weight: 600;
    }
    
    .gridnav ul li > a.active {
        background-color: #f0f0f0;
        color: #666666;
        font-weight: 500;
    }
    
    /* Parent active state when child is active */
    .gridnav li.active > a {
        background-color: #f0f0f0;
        color: #666666;
        font-weight: 600;
    }


/* Modal Fullscreen */
.nx-modal-fullscreen {
  padding: 0 !important;
}

.nx-modal-fullscreen .nx-modal-content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
}

.nx-modal-fullscreen .nx-modal-header {
  border-radius: 0;
  padding: 1rem 1.5rem;
}

.nx-modal-fullscreen .nx-modal-body {
  height: calc(100vh - 120px); /* Mengurangi tinggi header dan footer */
  overflow-y: auto;
}

.nx-modal-fullscreen .nx-modal-footer {
  border-radius: 0;
  padding: 1rem 1.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
}

/* Dark mode untuk modal fullscreen */
@media (prefers-color-scheme: dark) {
  .nx-modal-fullscreen .nx-modal-content {
    background-color: #1a1d20;
  }
  
  .nx-modal-fullscreen .nx-modal-footer {
    background-color: #1a1d20;
  }
}

/* Modal Base Styles */
.nx-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1050;
}

/* Modal Content */
.nx-modal-content {
  position: relative;
  background-color: #fff;
  margin: 1.75rem auto;
  padding: 0;
  width: 100%;
  max-width: 500px;
  border-radius: 0.3rem;
  display: flex;
  flex-direction: column;
  min-height: 200px; /* Tambahkan ini */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Tambahkan ini */
}

/* Modal Header */
.nx-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

/* Modal Body */
.nx-modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
  overflow-y: auto;
  min-height: 100px; /* Tambahkan ini */
}

/* Modal Footer */
.nx-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  gap: 0.5rem;
  background: #fff; /* Tambahkan ini */
  position: relative; /* Tambahkan ini */
  z-index: 1; /* Tambahkan ini */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .nx-modal-content {
    background-color: #1a1d20;
    color: #e0e0e0;
  }
  
  .nx-modal-header,
  .nx-modal-footer {
    border-color: #2c3034;
  }
  .nx-modal-footer {
    background-color: #1a1d20; /* Tambahkan ini */
  }
}

/* Modal Show Animation */
.nx-modal.show {
  display: flex; /* Ganti dari block ke flex */
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Close Button */
.nx-close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  padding: 0;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.nx-close:hover {
  opacity: .75;
}

/* Dark mode for close button */
@media (prefers-color-scheme: dark) {
  .nx-close {
    color: #fff;
    text-shadow: none;
  }
}

/* Modal Sizes */
.nx-modal-sm .nx-modal-content {
  max-width: 300px;
}

.nx-modal-lg .nx-modal-content {
  max-width: 800px;
}

/* Vertical centering */
.nx-modal {
  display: none;
  align-items: center; /* Tambahkan ini */
  justify-content: center; /* Tambahkan ini */
  padding: 1rem; /* Tambahkan ini */
}

.nx-modal.show {
  display: flex; /* Ganti dari block ke flex */
}

/* Button styles in modal footer */
.nx-modal-footer .btn {
  min-width: 80px;
  margin-left: 0.5rem;
}

.nx-modal-footer .btn:first-child {
  margin-left: 0;
}

/* Ensure buttons are visible in dark mode */
@media (prefers-color-scheme: dark) {
  .nx-modal-footer .btn-secondary {
    background-color: #2c3034;
    border-color: #373b3e;
    color: #e0e0e0;
  }
  
  .nx-modal-footer .btn-primary {
    background-color: #666666;
    border-color: #555555;
    color: #fff;
  }
}

/* Modal Styles */
.nx-modal-footer .btn-primary {
    background-color: #666666;
    border-color: #555555;
    color: #fff;
}

.nx-modal-footer .btn-primary:hover {
    background-color: #555555;
    border-color: #444444;
}

/* Modal Dark Mode */
@media (prefers-color-scheme: dark) {
    .nx-modal-footer .btn-primary {
        background-color: #666666;
        border-color: #555555;
        color: #fff;
    }
    
    .nx-modal-footer .btn-primary:hover {
        background-color: #555555;
        border-color: #444444;
    }
    
    .nx-modal-footer .btn-secondary {
        background-color: #2c3034;
        border-color: #373b3e;
        color: #e0e0e0;
    }
    
    .nx-modal-footer .btn-secondary:hover {
        background-color: #373b3e;
        border-color: #444444;
    }
}

/* Modal Focus States */
.nx-modal-content:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.25);
}

.nx-modal .btn:focus {
    box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.25);
}

/* Modal Close Button */
.nx-close:hover {
    color: #666666;
    opacity: 1;
}

/* Modal Backdrop */
.nx-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
/*AND Modal*/
/* Base styles untuk semua button */
[class*="nx-btn-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    text-align: center;
    font-weight: 500;
    line-height: 1.4;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); */
    position: relative;
    overflow: hidden;
}

/* Ripple effect - efek unik saat diklik */
[class*="nx-btn-"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease-out, height 0.3s ease-out;
}

/*[class*="nx-btn-"]:active::before {
    width: 200%;
    height: 200%;
}
*/
/* Color variations dengan gradien halus */
.nx-btn-primary {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    color: white;
    --btn-focus-color: 59, 130, 246;
}

/*.nx-btn-primary:hover {
    background: linear-gradient(135deg, #2563EB, #1D4ED8);
}
*/
.nx-btn-danger {
    background-color:#E81123;
/*    background: linear-gradient(135deg, #FF4081 0%, #F50057 100%);*/
    color: white;
    --btn-focus-color: 255, 64, 129;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: none;
}

/* Loading state yang modern */
.nx-btn-loading {
    position: relative;
    cursor: wait;
}

.nx-btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: nexa-spin 0.6s linear infinite;
}

@keyframes nexa-spin {
    to { transform: rotate(360deg); }
}


/* Icon integration yang dinamis */
.icon-button {
    gap: 8px;
}


/* Ghost button dengan efek hover yang unik */
.nx-btn-ghost {
    background: transparent;
    border: 1.5px solid currentColor;
    color: #00E5BE;
}

.nx-btn-ghost:hover {
    background: rgba(0, 229, 190, 0.1);
    border-color: #00E5BE;
}




/* Color variations */
.nx-btn-white {
    background: linear-gradient(to bottom, #ffffff, #f8f9fa);
    color: #000000;
    border: 1px solid #e9ecef;
}

.nx-btn-light {
    background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
    color: #495057;
}

.nx-btn-dark {
    background: linear-gradient(135deg, #495057, #343a40);
    color: #fff;
}

.nx-btn-black {
    background: linear-gradient(135deg, #212529, #000000);
    color: #fff;
}

.nx-btn-text {
    background: transparent;
    color: #00E5BE;
    padding: 0;
    text-decoration: none;
    position: relative;
}

.nx-btn-text::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.nx-btn-text:hover::after {
    transform: scaleX(1);
}

.nx-btn-ghost {
    background-color: transparent;
    color: #485fc7;
    text-decoration: none;
    border: 1px solid #485fc7;
}

.nx-btn-primary {
    background-color: #00d1b2;
    color: #fff;
}

.nx-btn-link {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: white;
    --btn-focus-color: 99, 102, 241;
}

.nx-btn-link:hover {
    background: linear-gradient(135deg, #4F46E5, #4338CA);
}

.nx-btn-info {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
    color: white;
    --btn-focus-color: 14, 165, 233;
}

.nx-btn-info:hover {
    background: linear-gradient(135deg, #0284C7, #0369A1);
}

.nx-btn-success {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    --btn-focus-color: 16, 185, 129;
}

.nx-btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

.nx-btn-warning {
    background: linear-gradient(135deg, #FCC419, #F59F00);
    color: #000;
}


.nx-btn-danger:active {
    transform: none;
}

.nx-btn-danger:focus {
    outline: none;
    box-shadow: none;
}

/* Hover effects */
/*[class*="nx-btn-"]:hover:not(.nx-btn-text):not(.nx-btn-ghost) {
    opacity: 0.9;
}*/

.nx-btn-text:hover {
    color: #000000;
}

.nx-btn-ghost:hover {
    background-color: #485fc7;
    color: #fff;
}

.mt-4 {
    margin-top: 2rem;
}

/* Button types styling */
.example-buttons {
    margin: 1.5rem 0;
}

/* Make input buttons look consistent with other buttons */
input[type="submit"].nx-btn-primary,
input[type="reset"].nx-btn-primary {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
}



/* Make sure anchor buttons have proper alignment */
a[class*="nx-btn-"] {
    text-decoration: none;
}

/* Ensure all button types have same height */
[class*="nx-btn-"] {
/*    height: 2.5rem;
    line-height: 1.8;*/
    box-sizing: border-box;
}

/* Ensure input buttons have proper padding */
input[type="submit"][class*="nx-btn-"],
input[type="reset"][class*="nx-btn-"] {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Button sizes */
.nx-btn-primary.is-small {
    font-size: 0.75rem;
    height: 2rem;
    padding: 0 0.75rem;
}



.nx-btn-primary.is-normal {
    font-size: 1rem;
    height: 2.5rem;
    padding: 0 1.25rem;
}

.nx-btn-primary.is-medium {
    font-size: 1.25rem;
    height: 3rem;
    padding: 0 1.5rem;
}

.nx-btn-primary.is-large {
    font-size: 1.5rem;
    height: 3.5rem;
    padding: 0 2rem;
}

/* Make sure all sizes work with all button types */
[class*="nx-btn-"].is-small {
    font-size: 0.75rem;
    height: 2rem;
    padding: 0 0.75rem;
}

[class*="nx-btn-"].is-normal {
    font-size: 1rem;
    height: 2.5rem;
    padding: 0 1.25rem;
}

[class*="nx-btn-"].is-medium {
    font-size: 1.25rem;
    height: 3rem;
    padding: 0 1.5rem;
}

[class*="nx-btn-"].is-large {
    font-size: 1.5rem;
    height: 3.5rem;
    padding: 0 2rem;
}

/* Base button style */
.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e4e7;
    border-radius: 8px;
    background-color: white;
    color: #18181b;
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 1.5;
    position: relative;
    vertical-align: top;
/*    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.15s ease;*/
}

/* Button sizes */
.nx-btn.is-small {
    font-size: 0.875rem;
    height: 2.25rem;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
}

.nx-btnX {
    font-size: 0.9375rem;
    height: 2.5rem;
    padding: 0.5rem 1rem;
}

.nx-btn.is-normal {
    font-size: 1rem;
    height: 2.75rem;
    padding: 0.625rem 1.25rem;
}

.nx-btn.is-medium {
    font-size: 1.125rem;
    height: 3rem;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
}

.nx-btn.is-large {
    font-size: 1.25rem;
    height: 3.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
}


/* Focus state */
.nx-btn:focus {
    outline: none;
    box-shadow: none;
}
/* Active state */
.nx-btn:active {
    background-color: #f4f4f5;
    border-color: #e4e4e7;
    transform: none;
    box-shadow: none;
}
/* Icon styling */
.nx-btn-success i,
.nx-btn-danger i {
    font-size: 16px;
}

/* Active state */
.nx-btn-success:active,
.nx-btn-danger:active {
    transform: none;
}

/* Focus state */
.nx-btn-success:focus,
.nx-btn-danger:focus {
    outline: none;
    box-shadow: none;
}

.nx-btn-danger:focus {
    box-shadow: none;
}


/* Loading States */
.nx-btn-primary.loading {
    position: relative;
    cursor: wait;
    opacity: 0.8;
}

.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Custom Buttons */
.nx-btn-custom {
    background-color: var(--button-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
}

.nx-btn-custom.gradient {
    background: linear-gradient(45deg, #667eea, #764ba2);
}

.nx-btn-custom.outline {
    background: transparent;
    border: 2px solid var(--button-color);
    color: var(--button-color);
}

/* Responsive Button */
@media (max-width: 768px) {
    .nx-btn-primary.responsive {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Best Practices Section */
.best-practice-example {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.text-success {
    color: #198754;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.text-danger {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}



/* Button dengan icon */
.nx-btn-success.with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Menambah jarak antara icon dan text */
}

.nx-btn-success.with-icon i {
    font-size: 16px;
    margin-right: 4px; /* Backup spacing jika gap tidak didukung */
}

.nx-btn-success.with-icon span {
    line-height: 1;
}

/* Button dengan icon styling */
.icon-button {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* Mengurangi jarak antara icon dan text */
    padding: 8px 16px;
    height: 32px; /* Mengurangi tinggi button */
    border-radius: 4px; /* Mengurangi border radius */
}

.icon-button i {
    font-size: 14px; /* Mengurangi ukuran icon */
}

.icon-button span {
    line-height: 1;
    font-size: 14px;
}

/* Success button dengan icon */
.nx-btn-success.icon-button {
    background-color: #00E5BE;
    color: white;
    box-shadow: none;
    transition: none;
}

/* Danger button dengan icon */
.nx-btn-danger.icon-button {

    color: white;
    box-shadow: none;
    transition: none;
}

/* Hover effects dengan shadow */
.nx-btn-success.icon-button:hover,
.nx-btn-danger.icon-button:hover {
    transform: none;
    box-shadow: none;
}

/* Active state dengan shadow */
.nx-btn-success.icon-button:active,
.nx-btn-danger.icon-button:active {
    transform: none;
    box-shadow: none;
}


/* Custom buttons */
.nx-btn-custom {
    box-shadow: none;
    transition: none;
}

/* Loading state buttons */
.nx-btn-primary.loading,
.nx-btn-primary.loading-text {
    box-shadow: none;
    transition: none;
}

/* Menghapus style yang tidak diperlukan */
.nx-btn-success.with-icon,
.nx-btn-danger.with-icon,
.nx-btn-success i,
.nx-btn-danger i {
    gap: 4px;
    font-size: 14px;
}

/* Color variations dengan gradien modern */
.nx-btn-white {
    background: linear-gradient(to bottom, #ffffff, #f8f9fa);
    color: #000000;
    border: 1px solid #e9ecef;
}

.nx-btn-light {
    background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
    color: #495057;
}

.nx-btn-dark {
    background: linear-gradient(135deg, #495057, #343a40);
    color: #fff;
}

.nx-btn-black {
    background: linear-gradient(135deg, #212529, #000000);
    color: #fff;
}

.nx-btn-text {
    background: transparent;
    color: #00E5BE;
    padding: 0;
    text-decoration: none;
    position: relative;
}

.nx-btn-text::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.nx-btn-text:hover::after {
    transform: scaleX(1);
}

.nx-btn-link {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: white;
    --btn-focus-color: 99, 102, 241;
}

.nx-btn-link:hover {
    background: linear-gradient(135deg, #4F46E5, #4338CA);
}

.nx-btn-info {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
    color: white;
    --btn-focus-color: 14, 165, 233;
}

.nx-btn-info:hover {
    background: linear-gradient(135deg, #0284C7, #0369A1);
}

.nx-btn-warning {
    background: linear-gradient(135deg, #FCC419, #F59F00);
    color: #000;
}

/* Loading states yang lebih modern */
.nx-btn-loading {
    position: relative;
    cursor: wait;
}

.nx-btn-loading .spinner {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.nx-btn-loading .spinner::before,
.nx-btn-loading .spinner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation: pulse 1.8s ease-in-out infinite;
}

.nx-btn-loading .spinner::before {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}

.nx-btn-loading .spinner::after {
    width: 75%;
    height: 75%;
    background-color: rgba(255, 255, 255, 0.7);
    top: 12.5%;
    left: 12.5%;
    animation-delay: 0.2s;
}

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.5; }
}

/* Disabled state yang lebih modern */
[class*="nx-btn-"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
}

[class*="nx-btn-"]:disabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: shine 1.5s infinite;
}

@keyframes shine {
    to { transform: translateX(100%); }
}

/* Custom size variations */
.nx-btn-custom.size-xs {
    padding: 4px 8px;
    font-size: 12px;
    height: 24px;
}

.nx-btn-custom.size-xl {
    padding: 16px 32px;
    font-size: 18px;
    height: 56px;
}

/* Outline variations */
[class*="nx-btn-"].outline {
    background: transparent;
    border: 2px solid currentColor;
}

.nx-btn-primary.outline {
    color: #00E5BE;
}

.nx-btn-danger.outline {
    color: #FF4081;
}

/* Icon only buttons */
.nx-btn-icon-only {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nx-btn-icon-only i {
    font-size: 18px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [class*="nx-btn-"] {
        padding: 8px 16px;
    }
    
    .nx-btn-icon-only {
        width: 32px;
        height: 32px;
    }
}

/* Focus visible untuk aksesibilitas */
[class*="nx-btn-"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Active state yang lebih responsif */
[class*="nx-btn-"]:active {
    transform: none;
}



/* Full Width Button Styles */
[class*="nx-btn-"].full-width {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

/* Rounded Corner Variations */
[class*="nx-btn-"].rounded-xl {
    border-radius: 1rem;
}

[class*="nx-btn-"].rounded-full {
    border-radius: 9999px;
}

/* Full Width dengan Icon */
[class*="nx-btn-"].full-width.icon-button {
    justify-content: center;
    gap: 0.75rem;
}

[class*="nx-btn-"].full-width.icon-button i {
    transition: transform 0.2s ease;
}

[class*="nx-btn-"].full-width.icon-button:hover i {
    transform: translateX(4px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [class*="nx-btn-"].full-width {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    [class*="nx-btn-"].full-width.icon-button {
        gap: 0.5rem;
    }
}

/* Hover effect khusus untuk full width */
[class*="nx-btn-"].full-width:hover {
    transform: none;
    box-shadow: none;
}

[class*="nx-btn-"].full-width:active {
    transform: none;
    box-shadow: none;
}

/* Windows Button Styles */
[class*="nx-btn-win-"] {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    border-radius: 4px;
    transition: none;
}

/* Windows Basic Colors */
.nx-btn-win-blue {
    background-color: #0078D4;
    color: white;
}

.nx-btn-win-purple {
    background-color: #5C2D91;
    color: white;
}

.nx-btn-win-teal {
    background-color: #00B294;
    color: white;
}

.nx-btn-win-green {
    background-color: #107C10;
    color: white;
}

/* Windows System Colors */
.nx-btn-win-system {
    background-color: #E6E6E6;
    color: #000000;
    border: 1px solid #CCCCCC;
}

.nx-btn-win-error {
    background-color: #E81123;
    color: white;
}

.nx-btn-win-warning {
    background-color: #FFB900;
    color: black;
}

.nx-btn-win-success {
    background-color: #107C10;
    color: white;
}

/* Windows Accent Buttons */
.nx-btn-win-accent {
    background-color: #0078D4;
    color: white;
    font-weight: 500;
}

.nx-btn-win-accent-light {
    background-color: #F0F0F0;
    color: #0078D4;
    border: 1px solid #0078D4;
}

/* Windows Modern Style */
.nx-btn-win-modern {
    background-color: #333333;
    color: white;
    padding: 8px 20px;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Menghapus hover states */
[class*="nx-btn-win-"]:hover {
    filter: none;
    transform: none;
}

/* Menghapus active states */
[class*="nx-btn-win-"]:active {
    filter: none;
    transform: none;
}

/* Menghapus focus states */
[class*="nx-btn-win-"]:focus {
    outline: none;
    outline-offset: 0;
}

/* Menghapus disabled states yang tidak perlu */
[class*="nx-btn-win-"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: inherit;
    color: inherit;
    border-color: inherit;
}

/* Icon Styling */
[class*="nx-btn-win-"].icon-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

[class*="nx-btn-win-"].icon-button i {
    font-size: 16px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    [class*="nx-btn-win-"] {
        padding: 6px 16px;
        font-size: 14px;
    }
}

/* Secondary Button Styles */
.nx-btn-secondary {
    background: linear-gradient(135deg, #64748B, #475569);
    color: white;
    border: none;
}

.nx-btn-secondary:hover {
    background: linear-gradient(135deg, #64748B, #475569);
    transform: none;
}

.nx-btn-secondary:active {
    background: linear-gradient(135deg, #64748B, #475569);
    transform: none;
}

.nx-btn-secondary-light {
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
    color: #475569;
    border: 1px solid #CBD5E1;
}

.nx-btn-secondary-light:hover {
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
    color: #475569;
}

.nx-btn-secondary-dark {
    background: linear-gradient(135deg, #334155, #1E293B);
    color: white;
    border: none;
}

.nx-btn-secondary-dark:hover {
    background: linear-gradient(135deg, #334155, #1E293B);
}

.nx-btn-secondary-outline {
    background: transparent;
    color: #64748B;
    border: 2px solid #64748B;
}

.nx-btn-secondary-outline:hover {
    background: transparent;
    border-color: #64748B;
}

/* Menghapus focus states */
[class*="nx-btn-secondary"]:focus {
    outline: none;
    box-shadow: none;
}

/* Menghapus active states */
[class*="nx-btn-secondary"]:active {
    transform: none;
}

/* Loading states untuk secondary buttons */
[class*="nx-btn-secondary"].loading {
    position: relative;
    color: transparent;
}

[class*="nx-btn-secondary"].loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

/* Size variations untuk secondary buttons */
[class*="nx-btn-secondary"].is-small {
    font-size: 0.75rem;
    height: 2rem;
    padding: 0 0.75rem;
}

[class*="nx-btn-secondary"].is-medium {
    font-size: 1.25rem;
    height: 3rem;
    padding: 0 1.5rem;
}

[class*="nx-btn-secondary"].is-large {
    font-size: 1.5rem;
    height: 3.5rem;
    padding: 0 2rem;
}

/* Default style */
.nx-btn-dark.responsive {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* Tablet */
@media (max-width: 768px) {
    .nx-btn-dark.responsive {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .nx-btn-dark.responsive {
        padding: 0.5rem;
        font-size: 0.75rem;
        width: 100%;
        display: block;
        margin-bottom: 0.5rem;
    }
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (forced-colors: active) {
    .nx-btn-dark.high-contrast {
        border: 2px solid currentColor;
    }
}

@media (prefers-contrast: high) {
    .nx-btn-dark.high-contrast {
        border: 2px solid currentColor;
        background: transparent;
        color: currentColor;
    }
}

.custom-size-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    height: 24px;
}

.custom-size-xl {
    font-size: 1.25rem;
    padding: 0.75rem 1.5rem;
    height: 48px;
}

.nx-btn-error {
    border: 1px solid #ff4444 !important;
    position: relative;
}
/*AND Button*/
.nx-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
}

.nx-menu li {
  margin: 0;
  position: relative;
}

.nx-menu a {
  text-decoration: none;
  color: #333;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.nx-menu a:hover {
  background-color: #f0f0f0;
  color: #000;
}

/* Vertical Menu */
.nx-menu.vertical {
  flex-direction: column;
  width: max-content;
}

.nx-menu.vertical a {
  padding: 0.75rem 1.5rem;
}

/* Dropdown Menu */
.nx-menu .dropdown {
  position: relative;
}

.nx-menu .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
  z-index: 1000;
}

.nx-menu .dropdown:hover .dropdown-content {
  display: block;
}

.nx-menu .dropdown-content a {
  padding: 0.75rem 1rem;
  display: block;
}

/* Menu dengan Ikon */
.nx-menu .icon {
  width: 1.2em;
  height: 1.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Menu dengan Badge */
.nx-menu .badge {
  background: #ff4757;
  color: white;
  padding: 0.2em 0.6em;
  border-radius: 10px;
  font-size: 0.75em;
  margin-left: 0.5em;
}

/* Menu dengan Divider */
.nx-menu .divider {
  border-bottom: 1px solid #eee;
  margin: 0.5rem 0;
}

/* Menu dengan Status */
.nx-menu .active {
  background-color: #007bff;
  color: white;
}

.nx-menu .disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Responsive Menu */
@media (max-width: 768px) {
  .nx-menu.responsive {
    flex-direction: column;
    width: 100%;
  }
  
  .nx-menu.responsive .dropdown-content {
    position: static;
    box-shadow: none;
    padding-left: 1rem;
  }
}


/* Menu dengan Ikon */
.nx-menu .material-icons {
  font-size: 20px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

/* Menu dengan Submenu */
.nx-menu .has-submenu {
  position: relative;
}

.nx-menu .has-submenu > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nx-menu .submenu-icon {
  font-size: 18px;
  margin-left: 4px;
}

.nx-menu .submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
  z-index: 1000;
  list-style: none;
  padding: 0.5rem 0;
}

/* First level submenu */
.nx-menu > li > .submenu {
  left: 0;
  top: 100%;
}

.nx-menu .has-submenu:hover > .submenu {
  display: block;
}

.nx-menu .submenu a {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Responsive submenu */
@media (max-width: 768px) {
  .nx-menu.responsive .submenu {
    position: static;
    box-shadow: none;
    padding-left: 1.5rem;
    background: transparent;
  }
  
  .nx-menu.responsive .has-submenu > a {
    flex-wrap: wrap;
  }
}

/* Menu Horizontal */
.nx-menu.horizontal {
  width: 100%;
  justify-content: space-between;
}

.nx-menu.horizontal > li {
  flex: 0 1 auto;
}

/* Mega Menu */
.nx-menu .mega-menu {
  position: static;
}

.nx-menu .mega-content {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  background: white;
  padding: 2rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
}

.nx-menu .mega-menu:hover .mega-content {
  display: block;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.mega-column h5 {
  margin: 0 0 1rem;
  color: #333;
  font-size: 1rem;
}

.mega-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-column ul li {
  margin: 0.5rem 0;
}

.mega-promo {
  text-align: center;
}

.mega-promo img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* Menu dengan Pencarian */
.nx-menu .search-box {
  position: relative;
  margin: 0 1rem;
}

.nx-menu .search-input {
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
  width: 200px;
}

.nx-menu .search-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

/* Menu dengan Filter */
.nx-menu .filter-group {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #f5f5f5;
  border-radius: 4px;
}

.nx-menu .filter-item {
  padding: 0.25rem 0.75rem;
  background: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nx-menu .filter-item.active {
  background: #007bff;
  color: white;
}

/* Menu dengan Tema */
.nx-menu.theme-dark {
  background: #333;
}

.nx-menu.theme-dark a {
  color: white;
}

.nx-menu.theme-dark a:hover {
  background: #444;
}

/* Menu dengan Animasi */
.nx-menu.animated a {
  position: relative;
  overflow: hidden;
}

.nx-menu.animated a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: all 0.3s ease;
}

.nx-menu.animated a:hover::after {
  width: 100%;
  left: 0;
}

/* Menu dengan Gambar */
.nx-menu .menu-image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 0.5rem;
  object-fit: cover;
}
/*AND Menu*/
/* Gaya dasar popover */
.nx-popover {
  position: relative;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

/* Tingkatkan z-index saat hover */
.nx-popover:hover {
  z-index: 9999;
}

.nx-popover .popover-content {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  background: white;
  width: 320px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  pointer-events: none;
  display: none;
  padding: 0;
  margin: 0;
}

/* Posisi right dengan z-index */
.nx-popover[data-position="right"] {
  position: relative;
  z-index: 1;
}

.nx-popover[data-position="right"]:hover {
  z-index: 9999;
}

.nx-popover[data-position="right"] .popover-content {
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  z-index: 9999;
}

/* Hover area untuk right */
.nx-popover[data-position="right"]::after {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 100%;
  width: 20px;
  z-index: 9998;
}

/* Posisi popover */
.nx-popover[data-position="top"] .popover-content {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
}

.nx-popover[data-position="bottom"] .popover-content {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
}

.nx-popover[data-position="left"] .popover-content {
  top: 50%;
  right: calc(100% + 10px);
  left: auto;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
}

/* Panah popover */
.nx-popover[data-position] .popover-content::after {
  content: '';
  position: absolute;
  border: 8px solid transparent;
  z-index: 9998;
}

.nx-popover[data-position="top"] .popover-content::after {
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: white;
}

.nx-popover[data-position="right"] .popover-content::after {
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: white;
}

.nx-popover[data-position="bottom"] .popover-content::after {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: white;
}

.nx-popover[data-position="left"] .popover-content::after {
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: white;
}

/* Hover state */
.nx-popover:hover .popover-content {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  display: block;
}

/* Tambahkan hover untuk popover content */
.nx-popover .popover-content:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  display: block;
}

/* Tambahkan area hover */
.nx-popover::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  bottom: -10px;
  z-index: 9997;
}

/* Header popover */
.popover-header {
  padding: 16px;
  display: flex;
  border-bottom: 1px solid #e4e6eb;
}

.popover-header .nx-avatar {
  width: 60px;
  height: 60px;
  margin-right: 12px;
}

.user-info h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1c1e21;
}

.user-role {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: #65676b;
}

/* Body popover */
.popover-body {
  padding: 12px 16px;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  padding: 8px 0 16px;
  border-bottom: 1px solid #e4e6eb;
}

.stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-weight: 600;
  color: #1c1e21;
}

.stat-label {
  font-size: 0.8rem;
  color: #65676b;
}

/* Avatar kecil */
.nx-avatar-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Preview box */
/*.preview-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 200px;
  padding: 2rem;
  gap: 20px;
}*/

/* Notification Popover */
.notification-popover {
  width: 320px;
}

.notification-popover .popover-header {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  background: #f8f9fa;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.notification-popover .popover-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.notification-popover .badge {
  background: #1877f2;
  color: white;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
}

.notification-popover .popover-body {
  padding: 0;
}

.notification-item {
  display: flex;
  padding: 8px 12px;
  border-bottom: 1px solid #e4e6eb;
  transition: background-color 0.2s;
  gap: 10px;
}

.notification-item:hover {
  background-color: #f0f2f5;
}

.notification-item .nx-avatar-sm {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.notification-content p {
  margin: 0;
  font-size: 0.85rem;
  color: #1c1e21;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-time {
  font-size: 0.7rem;
  color: #65676b;
  margin-top: 2px;
}

.popover-footer {
  padding: 6px 12px;
  text-align: center;
  border-top: 1px solid #e4e6eb;
  background: #f8f9fa;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.view-all {
  color: #1877f2;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

.view-all:hover {
  text-decoration: underline;
}

/* Tooltip Styles */
.nx-tooltip {
  position: relative;
  display: inline-block;
}

.nx-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 9999;
}

.nx-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 9998;
}

.nx-tooltip[data-tooltip-icon]::before {
  content: attr(data-tooltip-icon) " " attr(data-tooltip);
}

.nx-tooltip:hover::before,
.nx-tooltip:hover::after {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* Menu Popover Styles */
.menu-popover {
  width: 120px;
  padding: 8px 0;
}

.menu-item {
  display: flex;
  padding: 8px 16px;
  color: #1c1e21;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s;
  font-size: 0.9rem;
  gap: 12px;
}

.menu-item:hover {
  background-color: #f0f2f5;
}

.menu-item i {
  font-size: 1.1rem;
  width: 16px;
  text-align: center;
  color: #65676b;
  flex-shrink: 0;
  margin-right: 0;
}

.menu-item span {
  flex: 1;
  font-size: 0.9rem;
  color: #1c1e21;
  line-height: 1.2;
}

.menu-item.danger {
  color: #dc3545;
}

.menu-item.danger i,
.menu-item.danger span {
  color: #dc3545;
}

.menu-divider {
  height: 1px;
  background-color: #e4e6eb;
  margin: 8px 0;
}

/* Hover states untuk semua posisi */
.nx-popover[data-position]:hover .popover-content {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  display: block;
}

/* Reset padding dan margin global */
.nx-popover .popover-content {
  padding: 0;
  margin: 0;
}

/* Hover area khusus untuk right dan left */
.nx-popover[data-position="right"]::after,
.nx-popover[data-position="left"]::after {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  width: 20px;
  z-index: 9997;
}

.nx-popover[data-position="right"]::after {
  left: 100%;
}

.nx-popover[data-position="left"]::after {
  right: 100%;
}
/*AND popover*/
  .nx-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .nx-modal.show {
    opacity: 1;
  }

  .nx-modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 0;
    width: 50%;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transform: translateY(-20px);
    transition: transform 0.3s ease-in-out;
  }

  .nx-modal.show .nx-modal-content {
    transform: translateY(0);
  }

  /* Responsivitas untuk layar mobile */


  .nx-modal-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nx-modal-body {
    padding: 1rem;
  }

  .nx-modal-footer {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .nx-close {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
    margin-left: 8px;
  }

  /* Modern X icon using pseudo-elements */
  .nx-close::before,
  .nx-close::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: all 0.2s ease;
  }

  .nx-close::before {
    transform: rotate(45deg);
  }

  .nx-close::after {
    transform: rotate(-45deg);
  }

  /* Hover effect */
  .nx-close:hover {
    background-color: rgba(0,0,0,0.05);
    color: #333;
  }

  /* Active/Click effect */
  .nx-close:active {
    background-color: rgba(0,0,0,0.1);
    transform: scale(0.95);
  }

  /* Remove default text content */
  .nx-close span {
    display: none;
  }

  /* Focus state */
  .nx-close:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    .nx-close {
      color: #999;
    }
    
    .nx-close:hover {
      background-color: rgba(255,255,255,0.1);
      color: #fff;
    }
    
    .nx-close:active {
      background-color: rgba(255,255,255,0.15);
    }
  }

  /* Tambahan untuk aksesibilitas focus */
  .nx-modal:focus,
  .nx-modal-content:focus,
  .nx-close:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }

  /* Tambahan untuk keyboard navigation */
  .nx-modal-footer .btn:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0066cc;
  }

  /* Modal Sizes */
  .nx-modal-sm .nx-modal-content {
    width: 300px;
  }

  .nx-modal-lg .nx-modal-content {
    width: 800px;
  }

  .nx-modal-fullscreen {
    padding: 0;
    z-index: 41000;
  }

  .nx-modal-fullscreen .nx-modal-content {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }

  /* Modal Variations */
  .nx-modal-centered .nx-modal-content {
    margin: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    max-height: 90vh;
    width: 50%;
  }

  /* Responsive untuk modal centered */
  @media (max-width: 768px) {
    .nx-modal-centered .nx-modal-content {
      width: 90%;
      max-height: 80vh;
    }
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .nx-modal-lg .nx-modal-content {
      width: 90%;
    }
    
    .nx-modal-sm .nx-modal-content {
      width: 80%;
    }
  }

  /* Scrollable Modal */
  .nx-modal-scrollable .nx-modal-content {
    max-height:60vh;
    display: flex;
    flex-direction: column;
  }



 .nx-modal-body::-webkit-scrollbar {
    width: 5px;

  }

.nx-modal-body::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 8px;
  }

 .nx-modal-body::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }





  .nx-modal-scrollable .nx-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Static Modal */
  .nx-modal-static .nx-modal-content {
    animation: modalShake 0.3s ease-in-out;
  }

  @keyframes modalShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }

  /* Tambahkan animasi untuk modal */
  .nx-modal {
    transition: opacity 0.3s ease-in-out;
  }

  .nx-modal-content {
    transition: transform 0.3s ease-in-out;
  }

  .nx-modal.show .nx-modal-content {
    transform: translateY(0);
  }

  /* Modal Animations */
  .nx-modal-fade {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .nx-modal-fade.show {
    opacity: 1;
  }

  .nx-modal-slide .nx-modal-content {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
  }

  .nx-modal-slide.show .nx-modal-content {
    transform: translateY(0);
  }

  .nx-modal-zoom .nx-modal-content {
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }

  .nx-modal-zoom.show .nx-modal-content {
    transform: scale(1);
    opacity: 1;
  }

  /* Keyboard Events Styling */
  kbd {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.875em;
  }

  /* Alert Styling untuk Callbacks */
  .alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
  }

  .alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
  }

  .alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
  }

  /* Accessibility Styles */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Focus Styles */
  .nx-modal *:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }

  /* High Contrast Mode Support */
  @media (forced-colors: active) {
    .nx-modal-content {
      border: 2px solid ButtonText;
    }
    
    .nx-close {
      border: 1px solid ButtonText;
    }
  }

  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .nx-modal,
    .nx-modal-content {
      transition: none;
    }
  }

  /* Modal Interactions */
  .nx-modal-draggable .nx-modal-content {
    position: fixed;
    margin: 0;
    transform: none;
    transition: none;
    width: auto;
    max-width: 90%;
    max-height: 90vh;
  }

  .nx-modal-draggable .nx-modal-header {
    cursor: move;
    user-select: none;
    padding: 1rem;
    background: #f8f9fa;
  }

  .nx-modal-draggable .nx-modal-content.dragging {
    opacity: 0.95;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  }

  .nx-modal-resizable .nx-modal-content {
    position: relative;
    resize: both;
    overflow-y: hidden;
/*    overflow: auto;*/
    min-width: 300px;
    min-height: 200px;
  }


  .nx-modal-resizable .nx-modal-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, #ddd 50%);
  }

  /* Modal Stacking */
  .nx-modal-stacking {
    z-index: 1050;
  }

  .nx-modal-stacking.active {
    z-index: 1051;
  }

  .nx-modal-stacking .nx-modal-content {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }

  /* Custom Animations */
  .nx-modal-custom-animation {
    --animation-duration: 0.5s;
    --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Flip Animation */
  .nx-modal-custom-animation.flip .nx-modal-content {
    transform: perspective(1000px) rotateX(-90deg);
    transition: transform var(--animation-duration) var(--animation-timing);
  }

  .nx-modal-custom-animation.flip.show .nx-modal-content {
    transform: perspective(1000px) rotateX(0);
  }

  /* Swing Animation */
  .nx-modal-custom-animation.swing .nx-modal-content {
    transform: rotateY(-70deg);
    transition: transform var(--animation-duration) var(--animation-timing);
  }

  .nx-modal-custom-animation.swing.show .nx-modal-content {
    transform: rotateY(0);
  }

  /* Bounce Animation */
  @keyframes modalBounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-30px);
    }
    60% {
      transform: translateY(-15px);
    }
  }

  .nx-modal-custom-animation.bounce .nx-modal-content {
    animation: modalBounce var(--animation-duration) var(--animation-timing);
  }

  /* Transition Timing */
  .nx-modal-transition-timing.ease .nx-modal-content {
    transition-timing-function: ease;
  }

  .nx-modal-transition-timing.ease-in .nx-modal-content {
    transition-timing-function: ease-in;
  }

  .nx-modal-transition-timing.ease-out .nx-modal-content {
    transition-timing-function: ease-out;
  }

  .nx-modal-transition-timing.ease-in-out .nx-modal-content {
    transition-timing-function: ease-in-out;
  }

  /* Special Effects */
  .nx-modal-effects.blur {
    backdrop-filter: blur(5px);
  }

  .nx-modal-effects.glass .nx-modal-content {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .nx-modal-effects.neon .nx-modal-content {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5),
                0 0 20px rgba(0, 123, 255, 0.3),
                0 0 30px rgba(0, 123, 255, 0.1);
  }

  .nx-modal-effects.shadow-pulse .nx-modal-content {
    animation: shadowPulse 2s infinite;
  }

  @keyframes shadowPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
  }

  /* Modal Themes */
  .nx-modal-themes {
    --modal-primary: #0d6efd;
    --modal-secondary: #6c757d;
    --modal-success: #198754;
    --modal-danger: #dc3545;
    --modal-warning: #ffc107;
    --modal-info: #0dcaf0;
    --modal-light: #f8f9fa;
    --modal-dark: #212529;
  }

  /* Theme: Light */
  .nx-modal-themes.theme-light .nx-modal-content {
    background: var(--modal-light);
    color: var(--modal-dark);
  }

  .nx-modal-themes.theme-light .nx-modal-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }

  /* Theme: Dark */
  .nx-modal-themes.theme-dark .nx-modal-content {
    background: var(--modal-dark);
    color: #fff;
  }

  .nx-modal-themes.theme-dark .nx-modal-header {
    background: #2c3034;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .nx-modal-themes.theme-dark .nx-close {
    color: #fff;
  }

  /* Theme: Colorful */
  .nx-modal-themes.theme-primary .nx-modal-header {
    background: var(--modal-primary);
    color: #fff;
  }

  .nx-modal-themes.theme-success .nx-modal-header {
    background: var(--modal-success);
    color: #fff;
  }

  /* Custom Layouts */
  .nx-modal-layouts.layout-sidebar .nx-modal-content {
    display: flex;
    max-width: 900px;
  }

  .nx-modal-layouts.layout-sidebar .nx-modal-sidebar {
    width: 250px;
    background: #f8f9fa;
    padding: 1rem;
    border-right: 1px solid #dee2e6;
  }

  .nx-modal-layouts.layout-sidebar .nx-modal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Layout: Split */
  .nx-modal-layouts.layout-split .nx-modal-body {
    display: flex;
    gap: 1rem;
  }

  .nx-modal-layouts.layout-split .split-left,
  .nx-modal-layouts.layout-split .split-right {
    flex: 1;
    padding: 1rem;
  }

  /* Layout: Tabs */
  .nx-modal-layouts.layout-tabs .nx-modal-body {
    padding: 0;
  }

  .nx-modal-tab-nav {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 1rem 0;
    background: #f8f9fa;
  }

  .nx-modal-tab {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
  }

  .nx-modal-tab.active {
    background: #fff;
    border-color: #dee2e6;
    color: var(--modal-primary);
  }

  .nx-modal-tab-content {
    padding: 1rem;
  }

  .nx-modal-tab-pane {
    display: none;
  }

  .nx-modal-tab-pane.active {
    display: block;
  }

  /* Additional Components */
  .nx-modal-components .nx-modal-toolbar {
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    gap: 0.5rem;
  }

  .nx-modal-components .nx-modal-sidebar-toggle {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
  }

  .nx-modal-components .nx-modal-search {
    position: relative;
    flex: 1;
  }



  .nx-modal-components .nx-modal-search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
  }

  /* Status Bar */
  .nx-modal-components .nx-modal-statusbar {
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: #6c757d;
  }

  /* Breadcrumbs */
  .nx-modal-components .nx-modal-breadcrumb {
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
  }

  .nx-modal-breadcrumb ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
  }

  .nx-modal-breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 0.5rem;
    color: #6c757d;
  }

  /* Performance Optimizations */
  .nx-modal-placeholder {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
  }

  .nx-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  /* Optimize animations */
  @media (prefers-reduced-motion: reduce) {
    .nx-modal * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Optimize rendering */
  .nx-modal {
    will-change: opacity;
    contain: content;
  }

  .nx-modal-content {
    will-change: transform;
    contain: layout style paint;
  }

  /* Memory optimization indicators */
  .nx-modal.optimized::after {
    content: '✓';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #28a745;
    font-size: 0.875rem;
  }

  /* Mobile & Touch Optimizations */

  /* Touch Gestures */
  .nx-modal-touch {
    touch-action: none; /* Prevent browser handling of touch events */
  }

  .nx-modal-touch .nx-modal-content {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    overscroll-behavior: contain; /* Prevent scroll chaining */
  }

  /* Swipe to Close */
  .nx-modal-swipeable .nx-modal-content {
    transform: translateY(0);
    transition: transform 0.3s ease-out;
    will-change: transform;
  }

  .nx-modal-swipeable.swiping .nx-modal-content {
    transition: none;
  }

  .nx-modal-swipeable.swipe-close .nx-modal-content {
    transform: translateY(100%);
  }

  /* Mobile Responsive Adjustments */
  @media (max-width: 576px) {
    .nx-modal-content {
      width: 100% !important;
      margin: 0;
      border-radius: 0;
      min-height: 100%;
    }
    
    .nx-modal-centered .nx-modal-content {
      min-height: auto;
      border-radius: 8px;
      margin: 1rem;
      width: calc(100% - 2rem) !important;
    }
    
    .nx-modal-bottom-sheet .nx-modal-content {
      position: fixed;
      bottom: 0;
      border-radius: 16px 16px 0 0;
      max-height: 90vh;
    }
    
    /* Adjust header for better touch targets */
    .nx-modal-header {
      padding: 1rem;
      min-height: 56px;
    }
    
    .nx-close {
      padding: 12px;
      font-size: 24px;
    }
    
    /* Adjust footer for better touch targets */
    .nx-modal-footer {
      padding: 1rem;
       gap: 1rem;
    }
    
    .nx-modal-footer .btn {
      flex: 1;
      padding: 12px;
      font-size: 16px;
    }
  }

  /* Mobile Performance Optimizations */
  @media (max-width: 576px) {
    .nx-modal {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      perspective: 1000;
      transform: translateZ(0);
    }
    
    .nx-modal * {
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Safe Area Support */
  @supports(padding: max(0px)) {
    .nx-modal-content {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  /* Optimasi Draggable Modal */
  .nx-modal-draggable .nx-modal-content {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  .nx-modal-draggable .nx-modal-content.gpu-accelerated {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .nx-modal-draggable .nx-modal-content.dragging {
    cursor: grabbing !important;
    user-select: none;
  }

  /* Optimasi untuk header saat drag */
  .nx-modal-draggable .nx-modal-header {
    cursor: grab;
    touch-action: none;
  }

  .nx-modal-draggable .nx-modal-header:active {
    cursor: grabbing;
  }

  /* Draggable Modal Styling */
  .nx-modal-draggable .nx-modal-content {
    position: fixed;
    margin: 0;
    transform: none;
    transition: none;
    width: auto;
    max-width: 90%;
    max-height: 90vh;
  }

  .nx-modal-draggable .nx-modal-header {
    cursor: move;
    user-select: none;
    padding: 1rem;
    background: #f8f9fa;
  }

  .nx-modal-draggable .nx-modal-content.dragging {
    opacity: 0.95;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  }

  /* Snap indicators */
  .nx-modal-draggable .nx-modal-content::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 2px dashed transparent;
    pointer-events: none;
    transition: border-color 0.2s;
  }

  .nx-modal-draggable .nx-modal-content.dragging::before {
    border-color: rgba(0,0,0,0.1);
  }

  /* Override jQuery UI styles */
  .ui-draggable {
    will-change: transform;
  }

  .ui-draggable-dragging {
    transition: none !important;
    z-index: 1100 !important;
  }

  /* Window Controls - Modern Style */
  .nx-modal-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
    position: absolute;
    right: 32px;
  }

  /* Base style untuk semua tombol controls */
  .nx-modal-controls button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
  }

  /* Modern icons menggunakan pseudo-elements */
  .nx-btn-minimize::before {
    content: '';
    width: 12px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .nx-btn-maximize::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .nx-btn-restore::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 1px;
    position: absolute;
    top: 45%;
    left: 45%;
  }

  .nx-btn-restore::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 1px;
    position: absolute;
    top: 55%;
    left: 55%;
    background: white;
    z-index: 1;
  }

  /* Hover effects */
  .nx-modal-controls button:hover {
    background-color: rgba(0,0,0,0.05);
    color: #333;
  }

  /* Active/Click effects */
  .nx-modal-controls button:active {
    background-color: rgba(0,0,0,0.1);
    transform: scale(0.95);
  }

  /* Focus effects */
  .nx-modal-controls button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    .nx-modal-controls button {
      color: #999;
    }
    
    .nx-modal-controls button:hover {
      background-color: rgba(255,255,255,0.1);
      color: #fff;
    }
    
    .nx-modal-controls button:active {
      background-color: rgba(255,255,255,0.15);
    }

    .nx-btn-restore::after {
      background: #333;
    }
  }

  .nx-modal-header .nx-close {
    margin-left: 8px;
  }

  .nx-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0.75rem 1rem;
  }

  .nx-modal-header h5 {
    margin: 0;
    flex: 1;
  }

  /* State Classes */
  .nx-modal.minimized .nx-modal-content {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 300px !important;
    height: auto !important;
  }

  .nx-modal.minimized .nx-modal-body,
  .nx-modal.minimized .nx-modal-footer {
    display: none;
  }

  .nx-modal.maximized {
    padding: 0 !important;
    z-index:50000;
  }

  .nx-modal.maximized .nx-modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .nx-modal.maximized .nx-modal-body {
    height: calc(100vh - var(--header-height) - var(--footer-height));
    overflow-y: auto;
    padding: 1rem;
  }

  .nx-modal.maximized .nx-modal-header {
    border-radius: 0;
    padding: 1rem;
  }

  .nx-modal.maximized .nx-modal-footer {
    padding: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
  }

  /* Transisi untuk animasi smooth */
  .nx-modal-content {
    transition: all 0.3s ease-in-out;
  }

  /* Default state - untuk restore */
  .nx-modal-content {
    position: relative;
    width: 50%;
    margin: 10% auto;
    max-width: 90%;
    max-height: 90vh;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
  }

  .nx-modal-body {
    height: auto;
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    padding: 1rem;
  }

  .nx-modal-footer {
    position: relative;
    bottom: auto;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
  }

  /* Multiple Modals */
  .nx-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .nx-modal-backdrop.show {
    opacity: 1;
  }

  /* Adjust spacing for stacked modals */
  .nx-modal-stacking:not(:first-of-type) {
    margin-top: 2rem;
    margin-left: 2rem;
  }

  /* Visual indication for active modal */
  .nx-modal-stacking.active .nx-modal-content {
    border: 2px solid #0d6efd;
  }

  /* Improve focus management */
  .nx-modal-stacking:focus {
    outline: none;
  }

  .nx-modal-stacking.active:focus .nx-modal-content {
    box-shadow: 0 0 0 3px rgba(13,110,253,0.25);
  }

  /* Modal Settings */
  .nx-modal-no-backdrop {
    background-color: transparent;
  }

  .nx-modal:not(.nx-modal-has-footer) .nx-modal-footer {
/*    display: none;*/
  }

  /* Animation Settings */
  .nx-modal-fade {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .nx-modal-fade.show {
    opacity: 1;
  }

  .nx-modal-slide {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }

  .nx-modal-slide.show {
    transform: translateY(0);
  }

  /* Position Settings */
  .nx-modal-centered .nx-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Window Controls Styling */
  .nx-modal-header.has-controls {
    display: flex;
    align-items: center;
    padding-right: 80px; /* Ruang untuk controls */
  }

  .nx-modal-header.has-controls h5 {
    flex: 1;
    margin: 0;
  }

  .nx-modal-controls {
    display: flex;
    gap: 8px;
    margin-right: 8px;
    position: absolute;
    right: 40px;
  }

  .nx-modal-controls button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #666;
    transition: all 0.2s ease;
  }

  .nx-modal-controls button:hover {
    background-color: rgba(0,0,0,0.05);
  }

  .nx-modal-controls button:active {
    background-color: rgba(0,0,0,0.1);
  }

  /* Dark mode */
  @media (prefers-color-scheme: dark) {
    .nx-modal-controls button {
      color: #999;
    }
    
    .nx-modal-controls button:hover {
      background-color: rgba(255,255,255,0.1);
    }
    
    .nx-modal-controls button span span {
      background-color: #333 !important;
    }
  }
/*AND Modal*/

/*ANDanimated*/
/* Scroll Dasar */
.nx-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

/* Scroll Horizontal */
.nx-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}

/* Styling Scrollbar */
.nx-scroll::-webkit-scrollbar,
.nx-scroll-x::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.nx-scroll::-webkit-scrollbar-track,
.nx-scroll-x::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.nx-scroll::-webkit-scrollbar-thumb,
.nx-scroll-x::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.nx-scroll::-webkit-scrollbar-thumb:hover,
.nx-scroll-x::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Custom Scroll Styles */
.nx-scroll-rounded::-webkit-scrollbar {
  width: 12px;
}

.nx-scroll-rounded::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 10px;
}

.nx-scroll-rounded::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
  border: 3px solid #f0f0f0;
}

.nx-scroll-rounded::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Hidden Scrollbar */
.nx-scroll-hidden {
  -ms-overflow-style: none !important;  /* IE and Edge */
  scrollbar-width: none !important;     /* Firefox */
  overflow-y: auto;
}

.nx-scroll-hidden::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;  /* Chrome, Safari and Opera */
}

/* Auto Hide Scroll */
.nx-scroll-autohide {
  overflow-y: auto;
}

.nx-scroll-autohide::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

.nx-scroll-autohide::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.3s;
}

.nx-scroll-autohide:hover::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 136, 0.5);
}

.nx-scroll-autohide:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(136, 136, 136, 0.8);
}

/* Error Alert Styles - Khusus untuk buttonD.html */
.ngorei-alert {
    position: relative;
    min-width: 600px;
    max-width: 800px;
    padding: 20px;
    background: #1F2937;
    color: #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 20px 0;
    animation: slideInRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.ngorei-alert-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ngorei-alert-icon {
    width: 32px;
    height: 32px;
    background: #FEE2E2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ngorei-alert-title {
    font-weight: 500;
    font-size: 16px;
}

.ngorei-alert-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #374151;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    width: 32px;
    height: 32px;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ngorei-alert-close:hover {
    background: #4B5563;
    color: #F3F4F6;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Code Section Styling */
.ngorei-alert-code {
    margin-bottom: 16px;
    padding: 16px;
    background: #374151;
    border-radius: 8px;
    overflow-x: auto;
}

.code-section {
    display: flex;
    flex-direction: column;
    font-family: "Fira Code", Consolas, Monaco, monospace;
    font-size: 14px;
    line-height: 1.5;
    min-width: 100%;
    width: max-content;
}

.code-line {
    display: flex;
    align-items: flex-start;
    color: #E5E7EB;
}

.line-number {
    color: #6B7280;
    text-align: right;
    padding: 0 12px;
    min-width: 40px;
    user-select: none;
    border-right: 1px solid #4B5563;
}

.line-content {
    padding: 0 12px;
    white-space: pre;
    flex: 1;
}

.error-line {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.error-line .line-number {
    color: #EF4444;
}

/* Error Info Section */
.ngorei-alert-info {
    padding: 16px;
    background: #374151;
    border-radius: 8px;
}

.ngorei-alert-problem,
.ngorei-alert-solution {
    margin-bottom: 12px;
}

.ngorei-alert-label {
    color: #93C5FD;
    font-weight: 500;
    margin-bottom: 4px;
}

.ngorei-alert-solution .ngorei-alert-label {
    color: #6EE7B7;
}

.ngorei-alert-text {
    color: #E5E7EB;
}

@keyframes slideInRight {
    0% { 
        transform: translateX(100%);
        opacity: 0;
    }
    100% { 
        transform: translateX(0);
        opacity: 1;
    }
}
.d-flex {
    display: flex !important
}

.align-items-center {
    align-items: center !important
}
h1,h2,h3,h4,h5,h6{
  margin-bottom: 0px;
}
p {
    margin-top: 0;
    margin-bottom: 0rem
}
    .terminal {
      background-color: #1e1e1e;
      border-radius: 8px;
      overflow: hidden;
      font-family: monospace;
      margin: 0px 0;
      margin-bottom: 10px;
    }

    .terminal-header {
      background-color: #2d2d2d;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
    }

    .terminal-copy-btn {
      background: transparent;
      border: 1px solid #666;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
    }

    .terminal-content {
      padding: 12px;
      color: white;
      line-height: 1.5;
    }

    .terminal-code-btn {
      display: block;
      width: 100%;
      padding: 10px;
      background: #2d2d2d;
      color: #e06c75;
      border: none;
      border-top: 1px solid #3d3d3d;
      cursor: pointer;
      font-family: monospace;
      font-size: 14px;
      text-align: center;
    }

    .terminal-code-btn:hover {
      background: #3d3d3d;
    }

    /* Warna ikon bahasa pemrograman */
    .terminal-header .fa-html5 {
      color: #e34f26;
    }
    .terminal-header .fa-css3-alt {
      color: #264de4;
    }
    .terminal-header .fa-js {
      color: #f7df1e;
    }
    .terminal-header .fa-python {
      color: #3776ab;
    }
    .terminal-header .fa-php {
      color: #777bb4;
    }
    .terminal-header .fa-java {
      color: #007396;
    }
    .terminal-header .fa-react {
      color: #61dafb;
    }
    .terminal-header .fa-vuejs {
      color: #4fc08d;
    }
    .terminal-header .fa-angular {
      color: #dd0031;
    }
    .terminal-header .fa-node-js {
      color: #339933;
    }
    .terminal-header .fa-sass {
      color: #cc6699;
    }

 .text-left {
  text-align: left !important; }

.text-right {
  text-align: right !important; }

.text-center {
  text-align: center !important; }



.demo-section {
    margin-top:30px;
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #f8f9fa;
}

.demo-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #666;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/*!
 * Quill Editor v1.3.6
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-bubble.ql-toolbar:after,
.ql-bubble .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-bubble.ql-toolbar button,
.ql-bubble .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-bubble.ql-toolbar button svg,
.ql-bubble .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-bubble.ql-toolbar button:active:hover,
.ql-bubble .ql-toolbar button:active:hover {
  outline: none;
}
.ql-bubble.ql-toolbar input.ql-image[type=file],
.ql-bubble .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-bubble.ql-toolbar button:hover,
.ql-bubble .ql-toolbar button:hover,
.ql-bubble.ql-toolbar button:focus,
.ql-bubble .ql-toolbar button:focus,
.ql-bubble.ql-toolbar button.ql-active,
.ql-bubble .ql-toolbar button.ql-active,
.ql-bubble.ql-toolbar .ql-picker-label:hover,
.ql-bubble .ql-toolbar .ql-picker-label:hover,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active,
.ql-bubble.ql-toolbar .ql-picker-item:hover,
.ql-bubble .ql-toolbar .ql-picker-item:hover,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected {
  color: #fff;
}
.ql-bubble.ql-toolbar button:hover .ql-fill,
.ql-bubble .ql-toolbar button:hover .ql-fill,
.ql-bubble.ql-toolbar button:focus .ql-fill,
.ql-bubble .ql-toolbar button:focus .ql-fill,
.ql-bubble.ql-toolbar button.ql-active .ql-fill,
.ql-bubble .ql-toolbar button.ql-active .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #fff;
}
.ql-bubble.ql-toolbar button:hover .ql-stroke,
.ql-bubble .ql-toolbar button:hover .ql-stroke,
.ql-bubble.ql-toolbar button:focus .ql-stroke,
.ql-bubble .ql-toolbar button:focus .ql-stroke,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar button:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,
.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #fff;
}
@media (pointer: coarse) {
  .ql-bubble.ql-toolbar button:hover:not(.ql-active),
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) {
    color: #ccc;
  }
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #ccc;
  }
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #ccc;
  }
}
.ql-bubble {
  box-sizing: border-box;
}
.ql-bubble * {
  box-sizing: border-box;
}
.ql-bubble .ql-hidden {
  display: none;
}
.ql-bubble .ql-out-bottom,
.ql-bubble .ql-out-top {
  visibility: hidden;
}
.ql-bubble .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-bubble .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-bubble .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-bubble .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-bubble .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-bubble .ql-stroke {
  fill: none;
  stroke: #ccc;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-bubble .ql-stroke-miter {
  fill: none;
  stroke: #ccc;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-bubble .ql-fill,
.ql-bubble .ql-stroke.ql-fill {
  fill: #ccc;
}
.ql-bubble .ql-empty {
  fill: none;
}
.ql-bubble .ql-even {
  fill-rule: evenodd;
}
.ql-bubble .ql-thin,
.ql-bubble .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-bubble .ql-transparent {
  opacity: 0.4;
}
.ql-bubble .ql-direction svg:last-child {
  display: none;
}
.ql-bubble .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-bubble .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-bubble .ql-editor h1 {
  font-size: 2em;
}
.ql-bubble .ql-editor h2 {
  font-size: 1.5em;
}
.ql-bubble .ql-editor h3 {
  font-size: 1.17em;
}
.ql-bubble .ql-editor h4 {
  font-size: 1em;
}
.ql-bubble .ql-editor h5 {
  font-size: 0.83em;
}
.ql-bubble .ql-editor h6 {
  font-size: 0.67em;
}
.ql-bubble .ql-editor a {
  text-decoration: underline;
}
.ql-bubble .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-bubble .ql-editor code,
.ql-bubble .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-bubble .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-bubble .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-bubble .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-bubble .ql-editor img {
  max-width: 100%;
}
.ql-bubble .ql-picker {
  color: #ccc;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-bubble .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-bubble .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-bubble .ql-picker-options {
  background-color: #444;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-bubble .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-label {
  color: #777;
  z-index: 2;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #777;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #777;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-bubble .ql-color-picker,
.ql-bubble .ql-icon-picker {
  width: 28px;
}
.ql-bubble .ql-color-picker .ql-picker-label,
.ql-bubble .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-bubble .ql-color-picker .ql-picker-label svg,
.ql-bubble .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-bubble .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-bubble .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-bubble .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-bubble .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-bubble .ql-picker.ql-header {
  width: 98px;
}
.ql-bubble .ql-picker.ql-header .ql-picker-label::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-bubble .ql-picker.ql-font {
  width: 108px;
}
.ql-bubble .ql-picker.ql-font .ql-picker-label::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-bubble .ql-picker.ql-size {
  width: 98px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-bubble .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-bubble .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-bubble .ql-toolbar .ql-formats {
  margin: 8px 12px 8px 0px;
}
.ql-bubble .ql-toolbar .ql-formats:first-child {
  margin-left: 12px;
}
.ql-bubble .ql-color-picker svg {
  margin: 1px;
}
.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,
.ql-bubble .ql-color-picker .ql-picker-item:hover {
  border-color: #fff;
}
.ql-bubble .ql-tooltip {
  background-color: #444;
  border-radius: 25px;
  color: #fff;
}
.ql-bubble .ql-tooltip-arrow {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: " ";
  display: block;
  left: 50%;
  margin-left: -6px;
  position: absolute;
}
.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
  border-bottom: 6px solid #444;
  top: -6px;
}
.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow {
  border-top: 6px solid #444;
  bottom: -6px;
}
.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor {
  display: block;
}
.ql-bubble .ql-tooltip.ql-editing .ql-formats {
  visibility: hidden;
}
.ql-bubble .ql-tooltip-editor {
  display: none;
}
.ql-bubble .ql-tooltip-editor input[type=text] {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  height: 100%;
  outline: none;
  padding: 10px 20px;
  position: absolute;
  width: 100%;
}
.ql-bubble .ql-tooltip-editor a {
  top: 10px;
  position: absolute;
  right: 20px;
}
.ql-bubble .ql-tooltip-editor a:before {
  color: #ccc;
  content: "\D7";
  font-size: 16px;
  font-weight: bold;
}
.ql-container.ql-bubble:not(.ql-disabled) a {
  position: relative;
  white-space: nowrap;
}
.ql-container.ql-bubble:not(.ql-disabled) a::before {
  background-color: #444;
  border-radius: 15px;
  top: -5px;
  font-size: 12px;
  color: #fff;
  content: attr(href);
  font-weight: normal;
  overflow: hidden;
  padding: 5px 15px;
  text-decoration: none;
  z-index: 1;
}
.ql-container.ql-bubble:not(.ql-disabled) a::after {
  border-top: 6px solid #444;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  top: 0;
  content: " ";
  height: 0;
  width: 0;
}
.ql-container.ql-bubble:not(.ql-disabled) a::before,
.ql-container.ql-bubble:not(.ql-disabled) a::after {
  left: 0;
  margin-left: 50%;
  position: absolute;
  transform: translate(-50%, -100%);
  transition: visibility 0s ease 200ms;
  visibility: hidden;
}
.ql-container.ql-bubble:not(.ql-disabled) a:hover::before,
.ql-container.ql-bubble:not(.ql-disabled) a:hover::after {
  visibility: visible;
}
/*!
 * Quill Editor v1.3.6
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  border: 1px solid #ccc;
}
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
    color: #f8f8f2;
    background: none;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 1em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
    padding-top: 0em;
    padding-left: 1em;
    overflow: auto;
    overflow-x: hidden; /* Mencegah scroll horizontal */
    border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background:#27282200;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #8292a2;
}

.token.punctuation {
    color: #f8f8f2;
}

.token.namespace {
    opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
    color: #f92672;
}

.token.boolean,
.token.number {
    color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
    color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
    color: #e6db74;
}

.token.keyword {
    color: #66d9ef;
}

.token.regex,
.token.important {
    color: #fd971f;
}

.token.important,
.token.bold {
    font-weight: bold;
}
.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

pre code.hljs{display:block;overflow-x:auto;padding:0em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
 .hljs {
            color: #abb2bf;
        }
        
        .hljs-keyword {
            color: #c678dd;
        }
        
        .hljs-string {
            color: #98c379;
        }
        
        .hljs-comment {
            color: #5c6370;
            font-style: italic;
        }

    /*  ui-logger  */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    #ui-logger::-webkit-scrollbar {
        width: 6px;
    }
    #ui-logger::-webkit-scrollbar-track {
        background: #333;
    }
    #ui-logger::-webkit-scrollbar-thumb {
        background: #666;
        border-radius: 3px;
    }