@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
    }
}

@layer components {
    body{
        position: relative;
        z-index: 1;
        --tw-bg-opacity: 1;
        background-color: rgb(241 245 249 / var(--tw-bg-opacity));
        font-family: Satoshi, sans-serif;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        --tw-text-opacity: 1;
        color: rgb(100 116 139 / var(--tw-text-opacity));
    }

    .text-bodydark {
        --tw-text-opacity: 1;
        color: rgb(174 183 192 / var(--tw-text-opacity));
    }

    .bg-black{
        --tw-bg-opacity: 1;
        background-color: rgb(28 36 52 / var(--tw-bg-opacity)) !important;
    }

    .dark .dark\:bg-boxdark {
        --tw-bg-opacity: 1;
        background-color: rgb(36 48 63 / var(--tw-bg-opacity)) !important;
    }

    @keyframes glow {
        0%, 100% {
            box-shadow: 0 0 5px 1px rgba(128, 64, 240, 0.6);
        }
        50% {
            box-shadow: 0 0 20px 3px rgba(128, 64, 240, 0.9);
        }
    }

    .shadow-glow {
        animation: glow 2s ease-in-out infinite;
    }

    .text-xxs {
        font-size: 0.65rem;
    }

    button.disabled {
        background: gainsboro;
        cursor: not-allowed;
    }

    @keyframes glow-animation-2 {
        0% {
            box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
        }
        100% {
            box-shadow: 0 0 25px rgba(0, 255, 0, 1);
        }
    }

    @keyframes glow-animation-3 {
        0% {
            box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
        }
        100% {
            box-shadow: 0 0 25px rgba(255, 0, 0, 1);
        }
    }

    @keyframes progress {
        0% {
            width: 0%;
        }
        100% {
            width: 100%;
        }
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: 0.7;
        }
        50% {
            transform: scale(1.2);
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 0.7;
        }
    }

    #chatbox {
        scrollbar-width: thin;
        scrollbar-color: #6b7280 #e5e7eb;
    }

    #chatbox::-webkit-scrollbar {
        width: 8px;
    }

    #chatbox::-webkit-scrollbar-thumb {
        background-color: #6b7280;
        border-radius: 4px;
    }

    #chatbox::-webkit-scrollbar-thumb:hover {
        background-color: #4b5563;
    }

    #chatbox::-webkit-scrollbar-track {
        background-color: #e5e7eb;
    }

    .mobile-line {
        display: none;
    }

    .g-recaptcha {
        height: 78px;
    }

    @media (max-width: 768px) {
        #chatContainer {
            width: 100%;
            max-width: 100%;
            right: 0;
            left: 0;
            margin: auto;
            bottom: 0;

        }
        main {
            padding: 0 0 55px 0;
        }
    }

    @media screen and (max-width: 360px) {
        .hp-label, .xp-label {
            display: none !important;
        }
    }

    @media screen and (max-width: 1535px) {
        .top {
            margin-bottom: -0rem!important;
        }
    }
    @media screen and (min-width: 1400px) {
        .top {
            padding: 0!important;
        }
    }

    @media screen and (max-width: 1279px) {
        .left-column-mobile {
            height: auto !important;
            border-right-width: 0px !important;
        }

        .register-section {
            display: none;
        }

        .mobile-line {
            display: block;
        }
    }

    @media screen and (max-width: 420px) {
        .g-recaptcha {
            transform: scale(0.77);
            -webkit-transform: scale(0.77);
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
        }
    }
}

@layer utilities {
    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .chat-height {
        @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
    }
    .inbox-height {
        @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
    }
}

/* third-party libraries CSS */

.tableCheckbox:checked ~ div span {
    @apply opacity-100;
}
.tableCheckbox:checked ~ div {
    @apply border-primary bg-primary;
}

.apexcharts-legend-text {
    @apply !text-body dark:!text-bodydark;
}
.apexcharts-text {
    @apply !fill-body dark:!fill-bodydark;
}
.apexcharts-xcrosshairs {
    @apply !fill-stroke dark:!fill-strokedark;
}
.apexcharts-gridline {
    @apply !stroke-stroke dark:!stroke-strokedark;
}
.apexcharts-series.apexcharts-pie-series path {
    @apply dark:!stroke-transparent;
}
.apexcharts-legend-series {
    @apply !inline-flex gap-1.5;
}
.apexcharts-tooltip.apexcharts-theme-light {
    @apply dark:!border-strokedark dark:!bg-boxdark;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    @apply dark:!border-strokedark dark:!bg-meta-4;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    @apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1;
}
.apexcharts-xaxistooltip-bottom:after {
    @apply !border-b-gray dark:!border-b-meta-4;
}
.apexcharts-xaxistooltip-bottom:before {
    @apply !border-b-gray dark:!border-b-meta-4;
}
.apexcharts-xaxistooltip-bottom {
    @apply !rounded !border-none !bg-gray !text-xs !font-medium !text-black dark:!text-white;
}
.apexcharts-tooltip-series-group {
    @apply !pl-1.5;
}

.flatpickr-wrapper {
    @apply w-full;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    @apply fill-primary;
}
.flatpickr-calendar.arrowTop:before {
    @apply dark:!border-b-boxdark;
}
.flatpickr-calendar.arrowTop:after {
    @apply dark:!border-b-boxdark;
}
.flatpickr-calendar {
    @apply !p-6 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto;
}
.flatpickr-day {
    @apply dark:!text-bodydark dark:hover:!border-meta-4 dark:hover:!bg-meta-4;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    @apply !top-7 dark:!fill-white dark:!text-white;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
    @apply !left-7;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
    @apply !right-7;
}
span.flatpickr-weekday,
.flatpickr-months .flatpickr-month {
    @apply dark:!fill-white dark:!text-white;
}
.flatpickr-day.inRange {
    @apply dark:!shadow-7;
    box-shadow: -5px 0 0 #eff4fb, 5px 0 0 #eff4fb;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    @apply border-gray bg-gray dark:!border-meta-4 dark:!bg-meta-4;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.selected,
.flatpickr-day.endRange {
    @apply dark:!text-white;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #3c50e0;
    @apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
    box-shadow: -10px 0 0 #3c50e0;
}

.map-btn .jvm-zoom-btn {
    @apply flex h-7.5 w-7.5 items-center justify-center rounded border border-stroke bg-white px-0 pt-0 pb-0.5 text-2xl leading-none text-body hover:border-primary hover:bg-primary hover:text-white dark:border-strokedark dark:text-bodydark dark:hover:border-primary dark:hover:text-white;
}
.mapOne .jvm-zoom-btn {
    @apply left-auto top-auto bottom-0;
}
.mapOne .jvm-zoom-btn.jvm-zoomin {
    @apply right-10;
}
.mapOne .jvm-zoom-btn.jvm-zoomout {
    @apply right-0;
}
.mapTwo .jvm-zoom-btn {
    @apply top-auto bottom-0;
}
.mapTwo .jvm-zoom-btn.jvm-zoomin {
    @apply left-0;
}
.mapTwo .jvm-zoom-btn.jvm-zoomout {
    @apply left-10;
}

.taskCheckbox:checked ~ .box span {
    @apply opacity-100;
}
.taskCheckbox:checked ~ p {
    @apply line-through;
}
.taskCheckbox:checked ~ .box {
    @apply border-primary bg-primary dark:border-primary;
}
[x-cloak] {
    display: none !important;
}