/** Body */
body {
    @apply font-body text-sm md:text-base text-gray-500 bg-gray-50 leading-normal dark:bg-[#0a0e19] dark:text-gray-400;
}

/** Paragraph */
p {
    @apply mb-[15px] leading-[1.8];

    &:last-child {
        @apply mb-0;
    }
}

/** Heading */
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1,
.display-6,
.display-5,
.display-4,
.display-3,
.display-2,
.display-1 {
    @apply text-black font-bold leading-tight mb-[10px] dark:text-white;
}

.h6,
h6,
.display-6 {
    @apply text-base;
}

.h5,
h5,
.display-5 {
    @apply text-md md:text-lg;
}

.h4,
h4,
.display-4 {
    @apply text-xl;
}

.h3,
h3,
.display-3 {
    @apply text-2xl;
}

.h2,
h2,
.display-2 {
    @apply text-3xl;
}

.h1,
h1,
.display-1 {
    @apply text-4xl;
}

/** Sidebar */
.sidebar-area {
    @apply w-[260px] ltr:-left-full ltr:xl:left-0 rtl:-right-full rtl:xl:right-0;

    .burger-menu {
        @apply opacity-0 invisible;
    }

    .accordion {
        @apply rtl:pr-[15px];

        .accordion-item {
            .accordion-button {
                &.toggle {
                    &::before {
                        content: "\ea6e";
                        @apply top-1/2 -translate-y-1/2 ltr:right-[5px] rtl:left-[5px] absolute text-gray-500 dark:text-gray-400 transition-all text-[19px] font-[remixicon] mt-px;
                    }

                    &.open {
                        &::before {
                            content: "\ea4e";
                            @apply text-black dark:text-white;
                        }
                    }
                }

                &.open,
                &.active {
                    @apply bg-gray-50 dark:bg-[#15203c];

                    i {
                        @apply text-black dark:text-white;
                    }
                }

                &:hover {
                    i {
                        @apply text-black dark:text-white;
                    }
                }
            }

            .accordion-collapse {
                .sidebar-sub-menu {
                    .sidemenu-item {
                        .sidemenu-link {
                            &::after {
                                content: "";
                                @apply top-1/2 -translate-y-1/2 ltr:left-[18px] rtl:right-[18px] w-[10px] h-[10px] rounded-full transition-all absolute border border-gray-500 dark:border-gray-400;
                            }

                            &.toggle {
                                &::before {
                                    content: "\ea6e";
                                    @apply top-1/2 -translate-y-1/2 ltr:right-[13px] rtl:left-[13px] absolute text-gray-500 dark:text-gray-400 transition-all text-[19px] font-[remixicon];
                                }

                                &.open {
                                    &::before {
                                        content: "\ea4e";
                                        @apply text-black dark:text-white;
                                    }
                                }
                            }

                            &.open,
                            &.active {
                                @apply bg-gray-50 text-primary-500 dark:bg-[#15203c];
                            }

                            &:hover {
                                &::after {
                                    @apply border-primary-500;
                                }

                                &.toggle {
                                    &::before {
                                        @apply text-primary-500;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .simplebar-track {
        @apply rtl:right-auto rtl:left-0;
    }

    .simplebar-scrollbar {
        @apply ltr:right-0 rtl:right-auto rtl:left-0;
    }

    .simplebar-offset {
        @apply ltr: !left-0;
    }

    &.active {
        @apply ltr:left-0 rtl:right-0 xl:ltr:-left-full xl:rtl:-right-full;

        .burger-menu {
            @apply opacity-100 visible;
        }
    }
}

/** Header */
.header-area {
    @apply left-[15px] right-[15px] md:left-[25px] md:right-[25px] ltr:xl:left-[285px] rtl:xl:right-[285px];

    .hide-sidebar-toggle {
        &.active {
            @apply text-primary-500;
        }
    }

    .connected-apps-menu {
        .connected-apps-dropdown {
            @apply opacity-0 invisible;
        }

        &:has(.active)>.connected-apps-dropdown {
            @apply opacity-100 visible;
        }
    }

    .language-menu {
        .language-menu-dropdown {
            @apply opacity-0 invisible;
        }

        &:has(.active)>.language-menu-dropdown {
            @apply opacity-100 visible;
        }
    }

    .profile-menu {
        .profile-menu-dropdown {
            @apply opacity-0 invisible;
        }

        &:has(.active)>.profile-menu-dropdown {
            @apply opacity-100 visible;
        }
    }

    .notifications-menu {
        .notifications-menu-dropdown {
            @apply opacity-0 invisible;
        }

        &:has(.active)>.notifications-menu-dropdown {
            @apply opacity-100 visible;
        }
    }

    .settings-menu {
        .settings-menu-dropdown {
            @apply opacity-0 invisible;
        }

        .rtl-mode-toggle {
            span {
                span {
                    @apply left-[5px];
                }
            }

            &:hover {
                span {
                    span {
                        @apply bg-primary-500;
                    }
                }
            }

            &.open {
                span {
                    span {
                        @apply bg-primary-500 left-[17px];
                    }
                }
            }
        }

        &:has(.active)>.settings-menu-dropdown {
            @apply opacity-100 visible;
        }
    }

    &.active {
        @apply ltr:left-[15px] rtl:right-[15px] md:ltr:left-[25px] md:rtl:right-[25px];
    }
}

/** Main Content */
.main-content {
    @apply pt-[90px] px-[15px] md:pt-[95px] md:pl-[25px] md:pr-[25px] ltr:xl:pl-[285px] rtl:xl:pr-[285px];

    &.active {
        @apply ltr:pl-[15px] md:ltr:pl-[25px] rtl:pr-[15px] md:rtl:pr-[25px];
    }
}

/** Card */
.trezo-card {
    .trezo-card-dropdown {
        .trezo-card-dropdown-menu {
            @apply opacity-0 invisible;
        }

        &:has(.active)>.trezo-card-dropdown-menu {
            @apply opacity-100 visible;
        }
    }

    .trezo-card-content {
        .without-border {
            tbody {
                tr {
                    &:last-child {
                        td {
                            @apply border-0 pb-px !important;
                        }
                    }
                }
            }
        }

        .market-price-statistics {
            .trezo-card-dropdown {
                .trezo-card-dropdown-menu {
                    @apply opacity-0 invisible;
                }

                &:has(.active)>.trezo-card-dropdown-menu {
                    @apply opacity-100 visible;
                }
            }
        }

        .cryptocurrency-types {
            .trezo-card-dropdown-menu {
                @apply opacity-0 invisible;
            }

            &:has(.active)>.trezo-card-dropdown-menu {
                @apply opacity-100 visible;
            }
        }

        .chat-sidebar-tab-content {
            .tab-pane {
                @apply hidden;

                .chat-users-list {
                    &::-webkit-scrollbar {
                        @apply w-[2px] h-[2px];
                    }

                    &::-webkit-scrollbar-track {
                        @apply bg-white rounded-[50px] dark:bg-[#0C1427];
                    }

                    &::-webkit-scrollbar-thumb {
                        @apply bg-[#B5C3D7] rounded-[50px] dark:bg-[#ffffff1a];
                    }
                }

                &.active {
                    @apply block;
                }
            }
        }

        .chat-body {
            direction: rtl;

            &::-webkit-scrollbar {
                @apply w-[2px] h-[2px];
            }

            &::-webkit-scrollbar-track {
                @apply bg-white rounded-[50px] dark:bg-[#0C1427];
            }

            &::-webkit-scrollbar-thumb {
                @apply bg-[#B5C3D7] rounded-[50px] dark:bg-[#ffffff1a];
            }

            ul {
                li {
                    direction: ltr;
                }
            }
        }

        abbr {
            @apply cursor-help;
        }

        .line-numbers {
            &.language-markup {
                text-shadow: unset;
                @apply rtl:text-right dark:bg-dark dark:text-white;

                .language-markup {
                    text-shadow: unset;
                    @apply dark:text-white;
                }
            }
        }

        .nft-card {
            .bid-btn {
                @apply opacity-0;
            }

            &:hover {
                .bid-btn {
                    @apply opacity-100;
                }
            }
        }
    }

    .products-tab-content {
        .tab-pane {
            @apply hidden;

            &.active {
                @apply block;
            }
        }
    }

    #ourTopCoursesSlides {
        .swiper {
            .swiper-pagination {
                @apply w-auto bottom-[10px] rtl:left-auto rtl:right-0;

                .swiper-pagination-bullet {
                    @apply w-[5px] h-[5px] transition-all rounded-full bg-white mt-0 mb-0 ltr:ml-0 rtl:mr-0 ltr:mr-[5px] rtl:ml-[5px] opacity-100;

                    &.swiper-pagination-bullet-active {
                        @apply bg-orange-300;
                    }
                }
            }
        }
    }

    #upcomingEventsSlides {
        .swiper-pagination {
            @apply w-auto bottom-auto top-0 ltr:left-auto ltr:right-0;

            .swiper-pagination-bullet {
                @apply w-[7px] h-[7px] transition-all rounded-full bg-gray-100 mt-0 mb-0 ltr:ml-0 rtl:mr-0 ltr:mr-[4px] rtl:ml-[4px] opacity-100;

                &.swiper-pagination-bullet-active {
                    @apply bg-primary-500;
                }
            }
        }
    }

    #cryptocurrencyWatchlistSlides {
        .swiper-button-box {
            @apply mt-[20px] md:mt-0 md:absolute ltr:right-0 rtl:left-0 -top-[50px];

            .swiper-button-next,
            .swiper-button-prev {
                @apply relative left-0 right-0 top-0 w-[31px] h-[31px] inline-block rounded-sm border border-gray-100 dark:border-[#172036] text-center leading-[29px] text-[22px] transition-all text-gray-500 dark:text-gray-400 hover:bg-primary-500 hover:text-white hover:border-primary-500 mt-0 mx-[2px];

                &::after {
                    @apply hidden;
                }

                &:first-child {
                    @apply ltr:ml-0 rtl:mr-0;
                }

                &:last-child {
                    @apply ltr:mr-0 rtl:ml-0;
                }
            }
        }
    }

    #schoolUpcomingEventsSlides {
        .swiper-pagination {
            @apply w-auto bottom-auto -top-[36px] md:-top-[40px] ltr:left-auto ltr:right-0 rtl:left-0 rtl:right-auto;

            .swiper-pagination-bullet {
                @apply w-[5px] h-[5px] transition-all rounded-full bg-primary-100 mt-0 mb-0 ltr:ml-0 rtl:mr-0 ltr:mr-[5px] rtl:ml-[5px] opacity-100;

                &.swiper-pagination-bullet-active {
                    @apply bg-primary-500 w-[24px];
                }
            }
        }
    }

    #topCollectionsSlides {
        .swiper {
            .swiper-pagination {
                @apply mt-[15px] w-auto relative top-0 bottom-0 left-0 ltr:text-left rtl:text-right;

                .swiper-pagination-bullet {
                    @apply w-[8px] h-[8px] transition-all rounded-full bg-gray-200 dark:bg-gray-800 mt-0 mb-0 ltr:ml-0 rtl:mr-0 ltr:mr-[5px] rtl:ml-[5px] opacity-100;

                    &.swiper-pagination-bullet-active {
                        @apply bg-orange-300;
                    }
                }
            }
        }
    }

    &#featuredNftArtworksSlides,
    #featuredNftArtworksSlides {

        .swiper-button-next,
        .swiper-button-prev {
            &::after {
                @apply hidden;
            }
        }
    }

    #recentPropertySlides,
    #customerReviewsSlides {
        .swiper {
            .swiper-pagination {
                @apply mt-[15px] w-auto relative top-0 bottom-0 left-0 ltr:text-left rtl:text-right;

                .swiper-pagination-bullet {
                    @apply w-[8px] h-[8px] transition-all rounded-full bg-gray-200 dark:bg-gray-800 mt-0 mb-0 ltr:ml-0 rtl:mr-0 ltr:mr-[5px] rtl:ml-[5px] opacity-100;

                    &.swiper-pagination-bullet-active {
                        @apply bg-primary-500;
                    }
                }
            }
        }
    }
}

.toc-accordion {
    .toc-accordion-item {
        .toc-accordion-button {
            &.open {
                i {
                    &::before {
                        content: "\ea78";
                    }
                }
            }
        }
    }
}

/** Apexcharts */
html[dir="rtl"] {
    .sidebar-area {
        .accordion {
            .accordion-item {
                .accordion-button {
                    &.toggle {
                        &::before {
                            content: "\ea64";
                        }

                        &.open {
                            &::before {
                                content: "\ea4e";
                            }
                        }
                    }
                }

                .accordion-collapse {
                    .sidebar-sub-menu {
                        .sidemenu-item {
                            .sidemenu-link {
                                &.toggle {
                                    &::before {
                                        content: "\ea64";
                                    }

                                    &.open {
                                        &::before {
                                            content: "\ea4e";
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .apexcharts-canvas {
        direction: ltr;
    }

    .swiper {
        direction: ltr;

        .swiper-slide {
            direction: rtl;
        }
    }

    #fullCalendar {
        &.fc {
            direction: rtl;
            @apply text-right;
        }
    }

    .ql-toolbar {
        &.ql-snow {
            .ql-picker {
                &:not(.ql-color-picker) {
                    &:not(.ql-icon-picker) {
                        svg {
                            @apply right-auto left-0;
                        }
                    }
                }
            }
        }
    }

    .trezo-card {
        .trezo-card-content {
            .chat-body {
                direction: ltr;

                ul {
                    li {
                        direction: rtl;
                    }
                }
            }
        }
    }
}

.apexcharts-canvas {

    .apexcharts-legend-text,
    .apexcharts-title-text {
        @apply font-body !important;
    }

    .apexcharts-tooltip-series-group {
        @apply text-left pl-[12px] pr-[12px];

        &.apexcharts-active {
            @apply pb-0;
        }

        &:last-child {
            @apply pb-[4px];
        }
    }

    .apexcharts-tooltip {
        * {
            @apply font-body !important;
        }

        &.apexcharts-theme-light {
            @apply rounded-md border border-gray-100 bg-white shadow-3xl dark:bg-[#172036] dark:border-[#172036] dark:shadow-none;

            .apexcharts-tooltip-title {
                @apply py-[9px] px-[12px] mb-[5px] bg-gray-50 text-black rounded-t-md text-sm font-semibold border-b-0 border-gray-100 dark:bg-[#0C1427] dark:text-white;
            }
        }

        &.apexcharts-theme-dark {
            .apexcharts-tooltip-series-group {
                @apply bg-white dark:bg-black !important;
            }
        }
    }

    .apexcharts-tooltip-text-y-label,
    .apexcharts-tooltip-text-goals-value,
    .apexcharts-tooltip-text-y-value,
    .apexcharts-tooltip-text-z-value {
        @apply text-black dark:text-white ml-0;
    }

    .apexcharts-tooltip-marker {
        @apply w-[10px] h-[10px] mr-[6px];
    }

    .apexcharts-text {
        @apply font-body !important;

        tspan {
            @apply font-body !important;
        }
    }

    .apexcharts-xaxistooltip {
        @apply border-0 -mt-[1px] text-black bg-white shadow-3xl dark:text-white dark:bg-[#15203c] dark:shadow-none;

        .apexcharts-xaxistooltip-text {
            @apply font-body text-sm font-semibold !important;
        }

        &::before,
        &::after {
            @apply hidden;
        }
    }

    .apexcharts-toolbar {
        @apply text-right mt-[2px] z-[4] p-0;

        .apexcharts-reset-icon {
            @apply mr-[5px];
        }

        .apexcharts-menu-icon {
            svg {
                @apply fill-black transition-all;
            }

            &:hover {
                svg {
                    @apply fill-primary-500;
                }
            }
        }
    }

    .apexcharts-menu {
        @apply p-[5px] min-w-[125px] text-left rounded-md border border-gray-100 bg-white shadow-3xl dark:shadow-none dark:bg-[#172036] dark:border-[#172036];

        .apexcharts-menu-item {
            @apply transition-all rounded-[3px] px-[8px] py-[5px] text-sm;

            &:hover {
                @apply text-primary-500 dark:bg-[#0A0E19];
            }
        }
    }

    .apexcharts-xcrosshairs,
    .apexcharts-ycrosshairs {
        @apply fill-[#DDE4FF] dark:fill-[#172036];
    }

    .apexcharts-gridline {
        @apply dark:stroke-[#172036];
    }

    .apexcharts-toolbar {
        .apexcharts-menu-icon {
            svg {
                @apply dark:fill-white;
            }

            &:hover {
                svg {
                    @apply dark:fill-primary-500;
                }
            }
        }
    }

    .apexcharts-legend-text,
    .apexcharts-title-text {
        @apply dark:text-gray-400 !important;
    }

    .apexcharts-text {
        @apply dark:fill-gray-400;

        &.apexcharts-datalabel-value {
            @apply dark:fill-white;
        }

        &.apexcharts-point-annotation-label {
            @apply dark:fill-white;
        }
    }

    .apexcharts-pie-area {
        @apply dark:stroke-[#0C1427];
    }

    .apexcharts-yaxis,
    .apexcharts-grid-borders {
        line {
            @apply dark:stroke-[#172036];
        }
    }

    .apexcharts-xaxis-tick {
        @apply dark:stroke-[#172036];
    }

    .apexcharts-track {
        .apexcharts-radialbar-area {
            @apply dark:stroke-[#172036];
        }
    }

    .apexcharts-radar-series {
        &.apexcharts-plot-series {

            line,
            polygon {
                @apply dark:fill-[#0C1427];
                @apply dark:stroke-[#172036];
            }

            polygon {
                &:nth-child(odd) {
                    @apply dark:fill-[#172036];
                }
            }
        }
    }

    .apexcharts-pie {

        line,
        circle {
            @apply dark:stroke-[#172036];
        }
    }

    .apexcharts-radialbar-hollow {
        @apply dark:fill-[#0a0e19];
    }
}

#ecommerceTotalOrdersChart,
#ecommerceTotalCustomersChart,
#ecommerceTotalRevenueChart {
    .apexcharts-grid-borders {
        line {
            @apply dark:stroke-[#0c1427];
        }
    }
}

#marketingPerformanceOverviewChart {
    .apexcharts-canvas {
        .apexcharts-tooltip-series-group {
            &.apexcharts-active {
                @apply pb-[8px];
            }
        }
    }
}

/** Table */
.table-responsive {
    -webkit-overflow-scrolling: touch;

    tbody {
        tr {
            &:first-child {
                td {
                    @apply border-t border-gray-100 dark:border-[#172036];
                }
            }
        }
    }

    &::-webkit-scrollbar {
        -webkit-appearance: none;
        @apply w-[6px] h-[6px];
    }

    &::-webkit-scrollbar-thumb {
        @apply bg-black rounded-md cursor-pointer;
    }

    &::-webkit-scrollbar-track {
        @apply bg-gray-50 rounded-md;
    }
}

/** Checkbox */
.form-check {
    input {
        &[type=checkbox] {
            -webkit-appearance: none;
            @apply border-[2px] border-black dark:border-white relative rounded-[2px] h-[15px] w-[15px] disabled:opacity-[.35];

            &::before {
                content: '';
                border: solid transparent;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg) translate(-50%, -50%);
                @apply absolute w-[4px] h-[10px] -mt-px -mr-[.5px] -ml-px top-1/2 right-1/2;
            }

            &:checked {
                @apply bg-black;

                &::before {
                    @apply border-white;
                }
            }

            &:disabled~label {
                @apply opacity-[.35];
            }
        }
    }
}

/** Add New Popup */
.add-new-popup {
    background-color: rgba(0, 0, 0, 0.5);
    @apply opacity-0 invisible ltr:md:-mr-[15px] rtl:md:-ml-[15px];

    .popup-dialog {
        @apply -translate-y-[20px];
    }

    &.active {
        @apply opacity-100 visible;

        .popup-dialog {
            @apply translate-y-0;
        }
    }
}

/** Working Schedule Calendar */
#workingScheduleCalendar {

    #prevBtn,
    #nextBtn {
        i {
            @apply rtl:-scale-x-[1];
        }
    }

    .calendar {
        div {
            @apply w-[32px] h-[32px] cursor-pointer leading-[31px] rounded-full mx-auto my-[7.5px];
        }

        .days {
            @apply w-auto h-auto leading-normal my-0 text-black dark:text-white font-medium mb-[6px];
        }

        .today {
            @apply bg-primary-500 text-white;
        }
    }
}

/** Breadcrumb */
.breadcrumb {
    .breadcrumb-item {
        &::before {
            content: "\ea6e";
            font-family: remixicon;
            @apply font-normal text-lg top-1/2 -translate-y-1/2 absolute ltr:-right-[22px] rtl:-left-[22px] mt-px;
        }

        &:last-child {
            &::before {
                @apply hidden;
            }
        }
    }
}

/** Full Calendar */
#fullCalendar {
    &.fc {
        .fc-toolbar-title {
            @apply text-lg;
        }

        .fc-today-button {
            @apply transition-all capitalize text-primary-500 border-0 ltr:mr-[10px] rtl:ml-[10px] shadow-none h-auto p-0 bg-white dark:bg-[#0c1427];

            &:disabled {
                @apply text-gray-500 dark:text-gray-400 opacity-50;
            }
        }

        .fc-button-group {
            @apply ltr:ml-[12px] rtl:ml-0 rtl:mr-[12px];

            .fc-button {
                @apply p-0 w-[35px] h-[35px] shadow-none rounded-sm inline-block text-black dark:text-white bg-white dark:bg-[#0c1427] transition-all border border-gray-100 dark:border-[#172036] hover:bg-primary-500 hover:border-primary-500 hover:text-white mx-[5px] ltr:first:ml-0 rtl:first:mr-0 ltr:last:mr-0 rtl:last:ml-0;

                .fc-icon {
                    @apply rtl:-scale-x-[1];
                }
            }
        }

        .fc-toolbar {
            &.fc-header-toolbar {
                @apply mb-[20px] md:mb-[25px];
            }
        }

        .fc-col-header-cell {
            @apply font-medium bg-primary-50 border-0 dark:bg-[#15203c];
        }

        .fc-col-header-cell-cushion {
            @apply py-[13px] px-[15px] text-black dark:text-white;
        }

        .fc-scrollgrid {
            @apply border-gray-100 dark:border-[#172036];
        }

        td,
        th {
            @apply border-gray-100 dark:border-[#172036];
        }

        .fc-daygrid-day-top {
            @apply text-black dark:text-white pt-[15px] ltr:pr-[15px] rtl:pl-[15px] rtl:flex-row;
        }

        .fc-h-event {
            @apply p-[10px] rounded-none ml-0 mr-0 mt-[12px] text-sm bg-primary-500 border border-primary-500;

            .fc-event-title {
                @apply leading-[1.3] p-0 whitespace-break-spaces;
            }
        }

        tr {
            &:nth-child(2) {
                .fc-h-event {
                    @apply bg-info-500 border-info-500;
                }
            }

            &:nth-child(3) {
                .fc-h-event {
                    @apply bg-warning-500 border-warning-500;
                }
            }

            &:nth-child(4) {
                .fc-h-event {
                    @apply bg-success-500 border-success-500;
                }
            }

            &:nth-child(5) {
                .fc-h-event {
                    @apply bg-danger-500 border-danger-500;
                }
            }

            &:nth-child(6) {
                .fc-h-event {
                    @apply bg-secondary-500 border-secondary-500;
                }
            }
        }
    }
}

/** Rich Text Editor */
.ql-toolbar {
    &.ql-snow {
        @apply border-gray-100 dark:border-[#172036] bg-primary-50 dark:bg-[#15203c] rounded-t-md;

        .ql-picker {
            @apply dark:text-white;
        }

        .ql-stroke {
            @apply dark:stroke-white;
        }

        .ql-picker-options {
            @apply dark:bg-black;
        }

        button {
            @apply text-black dark:text-white;

            &:hover {
                @apply text-primary-500;
            }
        }
    }
}

.ql-container {
    &.ql-snow {
        @apply border-gray-100 dark:border-[#172036] rounded-b-md;

        .ql-editor {
            p {
                @apply text-base text-black dark:text-white;
            }
        }
    }
}

/** Custom Tooltip */
.custom-tooltip {
    @apply relative;

    .tooltip-text {
        @apply invisible w-auto bg-black text-white text-center rounded-sm py-[5px] px-[10px] absolute z-[1] bottom-[127%] ltr:left-1/2 rtl:right-1/2 opacity-0 transition ltr:-translate-x-1/2 rtl:translate-x-1/2 text-sm font-medium whitespace-nowrap;

        &::after {
            content: "";
            border-color: #3A4252 transparent transparent transparent;
            @apply absolute top-full left-1/2 ltr:-ml-[5px] rtl:-mr-[5px] border-[5px];
        }
    }

    &.bottom-tooltip {
        .tooltip-text {
            @apply top-[127%] bottom-auto;

            &::after {
                border-color: transparent transparent #3A4252 transparent;
                @apply top-auto bottom-full;
            }
        }
    }
}

/** Custom Popover */
.custom-popover {
    @apply relative;

    .popover-text {
        @apply invisible w-auto bg-black text-white text-center rounded-sm py-[5px] px-[10px] absolute z-[1] bottom-[127%] ltr:left-1/2 rtl:right-1/2 opacity-0 transition ltr:-translate-x-1/2 rtl:translate-x-1/2 text-sm font-medium whitespace-nowrap;

        &::after {
            content: "";
            border-color: #3A4252 transparent transparent transparent;
            @apply absolute top-full left-1/2 ltr:-ml-[5px] rtl:-mr-[5px] border-[5px];
        }
    }

    &:focus {
        .popover-text {
            @apply opacity-100 visible;
        }
    }

    &.bottom-popover {
        .popover-text {
            @apply top-[127%] bottom-auto;

            &::after {
                border-color: transparent transparent #3A4252 transparent;
                @apply top-auto bottom-full;
            }
        }
    }
}

/** Product Details Tabs */
.trezo-tabs {
    .navs {
        .nav-item {
            .nav-link {
                &::before {
                    content: '';
                    @apply left-0 right-0 bottom-0 h-[2px] absolute transition-all bg-primary-500 opacity-0;
                }

                &.active {
                    @apply text-primary-500;

                    &::before {
                        @apply opacity-100;
                    }
                }
            }
        }
    }

    .products-list-navs {
        .nav-item {
            .nav-link {

                &:hover,
                &.active {
                    @apply bg-primary-500 text-white;
                }
            }
        }
    }

    .tab-content {
        .tab-pane {
            @apply hidden;

            &.active {
                @apply block;
            }
        }
    }

    &.product-details-tabs {
        .navs {
            .nav-item {
                .nav-link {
                    &::before {
                        @apply h-[1px];
                    }

                    &.active {
                        @apply bg-white text-black dark:text-white dark:bg-[#15203c];
                    }
                }
            }
        }
    }

    .chat-sidebar-navs {
        .nav-item {
            .nav-link {
                &::before {
                    content: '';
                    @apply absolute ltr:left-0 rtl:right-0 w-[0] bottom-0 h-[2px] transition-all bg-primary-500;
                }

                &.active,
                &:hover {
                    @apply text-primary-500;

                    &::before {
                        @apply w-full;
                    }
                }
            }
        }
    }

    .overview-navs {
        .nav-item {
            .nav-link {
                &.active {
                    @apply bg-primary-500 text-white;

                    h5 {
                        @apply text-white;
                    }

                    span {
                        @apply text-white;

                        i {
                            @apply text-white;
                        }
                    }

                    img {
                        @apply hidden;

                        &:last-child {
                            @apply block;
                        }
                    }
                }
            }

            &:nth-child(2) {
                .nav-link {
                    &.active {
                        @apply bg-purple-500;
                    }
                }
            }

            &:nth-child(3) {
                .nav-link {
                    &.active {
                        @apply bg-orange-500;
                    }
                }
            }
        }
    }

    .campaigns-navs {
        .nav-item {
            .nav-link {

                &.active,
                &:hover {
                    @apply text-primary-600;
                }
            }
        }
    }

    .nfts-navs {
        .nav-item {
            .nav-link {

                &.active,
                &:hover {
                    @apply text-primary-600;
                }
            }
        }
    }
}

/** Radio */
.form-radio {
    input {
        &[type=radio] {
            @apply accent-black dark:accent-white;

            &:disabled~label {
                @apply opacity-[.35];
            }
        }
    }
}

/** Front Page Navbar */
#navbar {
    &.is-sticky {
        @apply z-[999] bg-white dark:bg-dark;
    }

    #navbar-burger-menu {
        &.active {
            span {
                &:first-child {
                    transform-origin: 10% 10%;
                    @apply rotate-[45deg];
                }

                &:nth-child(2) {
                    opacity: 0;
                }

                &:last-child {
                    transform-origin: 10% 90%;
                    @apply -rotate-[45deg];
                }
            }
        }
    }

    #navbar-collapse {
        &.active {
            @apply block;
        }
    }
}

/** Front Page Team Slides */
#frontPageTeamSlides {

    .swiper-button-prev,
    .swiper-button-next {
        &::after {
            @apply hidden;
        }
    }
}

/** Click to See/Hide Code */
.click-to-show-hide-code {
    @apply hidden;

    &.active {
        @apply block;
    }
}

/** Pagination */
#dataTablePagination {
    li {
        button {
            &.active {
                @apply bg-primary-500 text-white border-primary-500;
            }

            &.disabled {
                @apply pointer-events-none opacity-50;
            }
        }
    }
}

/** Price Range Slider */
.range-slider,
.range-slider2 {

    .number-group,
    .number-group2 {

        .number-input,
        .number-input2 {

            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                @apply appearance-none;
            }
        }
    }

    .range-group,
    .range-group2 {

        .range-input,
        .range-input2 {
            @apply w-full absolute ltr:left-0 rtl:right-0 bottom-0 appearance-none focus:outline-0;

            &::-webkit-slider-runnable-track {
                animation: .2s;
                @apply bg-gray-100 dark:bg-[#0a0e19] w-full h-[3px] cursor-pointer shadow-none border-0;
            }

            &::-webkit-slider-thumb {
                @apply w-[18px] h-[18px] relative z-[2] rounded-full cursor-pointer -mt-[8px] bg-primary-500 appearance-none;
            }

            &::-moz-range-track {
                animation: .2s;
                @apply w-full h-[3px] cursor-pointer bg-gray-100 dark:bg-[#0a0e19] shadow-none border-0;
            }

            &::-moz-range-thumb {
                @apply w-[18px] h-[18px] relative z-[2] rounded-full cursor-pointer -mt-[8px] bg-primary-500 appearance-none border border-primary-500;
            }

            &::-ms-track {
                animation: .2s;
                color: transparent;
                background: transparent;
                border-color: transparent;
                @apply w-full h-[5px] cursor-pointer;
            }

            &::-ms-fill-lower,
            &::-ms-fill-upper {
                @apply bg-primary-500 border-0 shadow-none;
            }

            &::-ms-thumb {
                @apply cursor-pointer bg-primary-500 rounded-full w-[18px] h-[18px] relative z-[2];
            }
        }
    }
}