:root {
    --tablegray: 210, 24%, 98%, 1;
    --gradient: linear-gradient(to top left, #091e3a, #2f80ed, #2d9ee0);
    --background2: 231, 26%, 94%, 1;
    --topsidemenu: 231, 78%, 98%, 1;
    --graycustom: 215, 21%, 54%, 1;
    --royalbluehover: 231, 100%, 95%, 1;
    --borderlight: 230, 11%, 89%, 1;
    --primarybleudefrance: 214, 84%, 56%, 1;
    --bodytextcolor: 216, 18%, 34%, 1;
    --placeholderColor: 0, 0%, 46%, 1;
    --borderSuperLight: 215, 70%, 75%, .06;
    --greenTransparent: 192, 57%, 9%, 1;
    --redTransparent: 322, 23%, 9%, 1;
    --orangeTransparent: 8, 15%, 11%, 1;
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 214, 84%, 56%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 217, 16%, 84%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: .5rem
}

.dark {
    --tablegray: 210, 29%, 46%, .02;
    --background2: 212, 71%, 4%, 1;
    --topsidemenu: 217, 44%, 7%, 1;
    --graycustom: 216, 22%, 53%, 1;
    --royalbluehover: 214, 84%, 56%, .1;
    --borderlight: 213, 30%, 13%, 1;
    --primarybleudefrance: 214, 84%, 56%, 1;
    --bodytextcolor: 217, 19%, 67%, 1;
    --placeholderColor: 0, 0%, 46%, 1;
    --borderSuperLight: 215, 70%, 75%, .06;
    --greenTransparent: 192, 57%, 9%, 1;
    --redTransparent: 322, 23%, 9%, 1;
    --orangeTransparent: 8, 15%, 11%, 1;
    --gradient: linear-gradient(to top left, #2d9ee0, #2f80ed, #091e3a);
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 214, 84%, 56%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217, 34%, 17%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%
}

.bg-card {
    background-color: hsl(var(--card)) !important;
}

.bg-card {
    background-color: hsl(var(--card))
}
.bg-primary {
    background-color: hsl(var(--primary))
}
.bg-secondary {
    background-color: hsl(var(--secondary))
}
.border-muted-foreground {
    border-color: hsl(var(--muted-foreground))
}
ul.sidebar-tree {
    list-style-type: none;
}
ul.sidebar-tree li a {
    list-style-type: none;
    border-left: 1px solid hsl(var(--muted-foreground));
    margin-left: 6px;
}
ul.sidebar-tree li a:before {
    display: none !important;
}

/* FORCE: Override fixed sidebar positioning to create proper layout */
.app-menu {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 280px !important;
    height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: auto !important;
    float: left !important;
}

/* FORCE: Create proper flex layout for the main container */
.flex.min-h-screen {
    display: flex !important;
    min-height: 100vh !important;
    flex-direction: row !important;
}

/* FORCE: Sidebar container styling */
.sidebar-container {
    width: 280px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* FORCE: Main content area styling */
.main-content-area {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* FORCE: Remove any hidden classes */
.app-menu.hidden,
.app-menu.md\:block {
    display: block !important;
}

/* FORCE: Ensure content flows properly */
.container-fluid {
    margin-left: 0 !important;
    width: 100% !important;
}

/* FORCE: Mobile responsive */
@media (max-width: 768px) {
    .app-menu {
        position: relative !important;
        width: 280px !important;
        height: 100vh !important;
        display: block !important;
    }
    
    .flex.min-h-screen {
        display: flex !important;
        flex-direction: row !important;
    }
    
    .sidebar-container {
        width: 280px !important;
        flex-shrink: 0 !important;
    }
    
    .main-content-area {
        flex: 1 !important;
        min-width: 0 !important;
    }
}
.dropdown-button:not(.show):before {
    transform: rotate(90deg);
}
.dropdown-button.show:before {
    transform: rotate(180deg);
}
.wsus__terms_condition_text p {
    color: white;
}
.wsus__terms_condition_text span, .wsus__terms_condition_text strong, .wsus__terms_condition_text li {
    color: white !important;
}
.w-fit {
    width: fit-content;
}
.toggle-switch {
    width: 36px;
    height: 20px;
    background-color: #d1d5db;
    border-radius: 9999px;
    position: relative;
    transition: background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 2px;
}

.toggle-dot {
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 9999px;
    position: absolute;
    left: 2px;
    transition: transform 0.2s ease-in-out;
}

input:checked + .toggle-switch {
    background-color: #3b82f6;
}

input:checked + .toggle-switch .toggle-dot {
    transform: translateX(16px);
}
.bg-muted {
    background-color: hsl(var(--muted));
}
.bg-border {
    background-color: hsl(var(--border));
}

#page-topbar {
    padding-left: 16.25rem !important;
}
.bg-background2 {
    background-color: hsla(var(--background2)) !important;
}
.border-primarybleudefrance {
    border: 1px solid hsla(var(--primarybleudefrance)) !important;
}
.hover\:cursor-pointer {
    cursor: pointer;
}
.h-80vh {
    height: 80vh;
}
@media(min-width: 768px) {
    .md\:grid-cols-\[2fr_1fr\] {
        grid-template-columns: 2fr 1fr !important;
    }
    .sm\:max-h-\[50px\] {
        max-height: 50px
    }

    .sm\:max-h-\[calc\(100\%-10rem\)\] {
        max-height: calc(100% - 10rem)
    }
    .sm\:max-h-\[calc\(100\%-1rem\)\] {
        max-height: calc(100% - 1rem)
    }

    .sm\:min-h-10 {
        min-height: 2.5rem
    }
}
.overflow-auto {
    overflow: auto;
}
.max-w-\[556px\] {
    max-width: 556px
}
.bg-background {
    background-color: hsl(var(--background))
}
.w-90 {
    width: 90%;
}
.text-primary {
    color: hsl(var(--primary))
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground))
}

.text-primarybleudefrance {
    color: hsla(var(--primarybleudefrance))
}
[data-modal-target="eventInfoModal"] {
    overflow: hidden;
}
.outline-primary-foreground {
    outline-color: hsl(var(--primary-foreground));
}
.h-\[200px\] {
    height: 200px
}
.d-none {
    display: none !important;
}
.coming-soon-click:not(.coming-soon-active) .coming-soon-container {
    display: none;
}
.coming-soon-click.coming-soon-active {
    align-items: flex-start;
}
.inline-flex {
    display: inline-flex;
}
.min-w-full {
    min-width: 100%;
}
.whitespace-nowrap {
    white-space: nowrap;
}
.flex-auto {
    flex: 1 1 auto;
}
.mt-9 {
    margin-top: 2.25rem;
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.bg-destructive {
    background-color: hsl(var(--destructive))
}

.bg-destructive-foreground {
    background-color: hsl(var(--destructive-foreground))
}
.w-4 svg {
    width: 4px;
}
.bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity))
}
.w-\[8px\] {
    width: 8px
}
.h-\[8px\] {
    height: 8px
}
.backdrop-overlay {
    backdrop-filter: blur(5px) !important;
}
.track-area {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.text-small {
    font-size: 0.8em;
}
.d-block {
    display: block;
}
.funnel.svg-funnel-js {
    width: 100%;
}
.mega-menu-subdropdown {
    height: 200px;
    top: 0px;
    width: fit-content;
    max-height: fit-content;
    overflow-y: scroll;
    min-width: 200px;
}
.css-9a5t {
    flex: 1 1 0%;
}
.xl\:min-w-80 {
    min-width: 20rem;
}
.w-\[18px\] {
    width: 18px;
}
.min-w-\[18px\] {
    min-width: 18px;
}
.h-\[18px\] {
    height: 18px;
}
.rounded-full {
    border-radius: 9999px;
}
.overflow-hidden {
    overflow: hidden;
}
.mr-2 {
    margin-right: 0.5rem;
}

/* handle layout */
.control-active {
    color: #ffffff;
    background: #3082ed;
}
.grid {
    display: grid;
    gap: 10px;
    transition: all 0.3s ease-in-out;
}

.grid[data-layout-set="list"] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid[data-layout-set="grid"] {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.grid-item {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.grid[data-layout-set="list"] .grid-item {
    transform: translateY(10px);
    opacity: 0;
}

.grid[data-layout-set="grid"] .grid-item {
    transform: translateY(0);
    opacity: 1;
}
/* Fix for stack index of funnel js sublabels */
.svg-funnel-js__container path {
    position: absolute;
    z-index: 100 !important;
}
.svg-funnel-js__container {
    display: block;
    position: relative;
    height: 400px !important;
}
.svg-funnel-js__container svg {
    position: absolute;
    z-index: 100 !important;
    top: 65px;
}
.svg-funnel-js__labels, .svg-funnel-js__labels * {
    z-index: 0 !important;
}
#funnel-tooltip {
    position: absolute;
    display: none;
    background: white;
    color: #6c757d;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1000;
}
div#funnel-tooltip span {
    color: #222222;
    font-weight: bold;
}
.svg-funnel-js:not(.svg-funnel-js--vertical) {
    padding-bottom: 56px !important;
}
.label__segment-percentages {
    display: none !important;
}
.svg-funnel-js__label {
    border-left-color: rgb(208, 213, 221) !important;
}
.text-md {
    height: 1rem;
}
/**/
[role="tabpanel"][data-state="inactive"] {
    display: none;
}
.page-wrapper {
    padding-bottom: 100px;
}
.flex-wrap .flex-auto {
    flex: 1;
}
.text-destructive {
    color: hsl(var(--destructive))
}
.border-destructive {
    border-color: hsl(var(--destructive))
}
.hover\:bg-destructive:hover {
    background-color: hsl(var(--destructive))
}
.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.bg-accent {
    background-color: hsl(var(--accent))
}
.dropdown-scroll {
    height: 200px;
    overflow: hidden;
    overflow-y: scroll;
}
.max-h-\[70vh\] {
    max-height: 70vh
}
.max-w-70 {
    max-width: 70%;
    margin: auto;
}
.border-l {
    border-left: 1px solid rgb(208, 213, 221);
}
* ::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

* ::-webkit-scrollbar-track {
    background: hsl(var(--background))
}

* ::-webkit-scrollbar-thumb {
    background: hsl(var(--primary));
    border-radius: 8px
}

* ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary))
}
* ::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

* ::-webkit-scrollbar-track {
    background: hsl(var(--background))
}

* ::-webkit-scrollbar-thumb {
    background: hsl(var(--primary));
    border-radius: 8px
}

* ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary))
}
.bg-border {
    background-color: hsl(var(--border))
}
.h-\[1px\] {
    height: 1px
}
.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}
.flex-fix {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.css-ijj25t {
    max-width: 21rem;
    flex: 0 0 auto !important;
}

.no-overflow {
    overflow-x: clip;
}

@media (min-width: 1280px) {
    .css-ijj25t {
        min-width: 20rem;
    }
}
.css-9a52tt {
    max-height: fit-content;
    padding-bottom: 100px;
}
#dateRangePicker {
    width: 210px !important;
}
.bg-muted-foreground {
    background-color: hsl(var(--muted-foreground))
}

.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed
}

.disabled\:opacity-20:disabled {
    opacity: .2 !important;
}

.disabled\:opacity-50:disabled {
    opacity: .5 !important;
}
.top-\[13px\] {
    top: 13px !important;
}
.right-\[13px\] {
    right: 13px !important;
}
.right-\[10px\] {
    right: 10px !important;
}
.fit-content {
    width: fit-content;
    min-width: fit-content;
}
.w-28 {
    width: 7rem
}
.h-28 {
    height: 7rem
}
.account-details .form-control.w-full {
    width: 100% !important;
    min-width: 100% !important;
}
.account-details .iti--allow-dropdown {
    width: 100%;
}
.w-\[12px\] {
    width: 12px;
}

.h-\[12px\] {
    height: 12px;
}
#tracking-script-container pre {
    background: #7c8aa329;
    padding: 5px;
    color: #3c3c3c !important;
    word-break: break-all;
    overflow: hidden;
    overflow-x: scroll;
}
#tracking-script-container pre * {
    color: #3c3c3c !important;
}
#tracking-script-code {
    width: 100% !important;
    word-break: break-all;
}
.flatpickr-dropdown .dropdown-menu {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    left: -5px !important;
    top: 30px;

}
.flatpickr-dropdown .dropdown-item {
    width: 100% !important;
}
[disabled] {
    opacity: 0.4;
}
.flex-tracking {
    max-width: 40rem;
    flex-grow: 1 !important;
}
.video-area {
    flex: 1 auto !important;
    flex-grow: 1 !important;
}
.css-9a52tt {
    max-width: 69% !important;
}
.h-fit {
    height: fit-content;
}
[data-has-admin-rights]:not([data-has-admin-rights="1"]), [data-has-admin-rights]:not([data-has-admin-rights="1"]) * {
    opacity: 0.4;
    pointer-events: none;
}
.grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 640px) { /* sm breakpoint */
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sm\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.font-bit-small-buttons button {
    font-size: 0.8em ;
}
.rounded-3xl {
    border-radius: 1.5rem;
}

.grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem; /* Adjust spacing */
}

@media (max-width: 640px) { /* sm breakpoint */
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.event-tabs {
    display: flex;
    background-color: rgba(229, 231, 235, 0.5); /* Tailwind gray-300 with transparency */
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.tab-button {
    flex: 1;
    padding: 0.4rem 0.4rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 500;
    color: #4B5563; /* Tailwind gray-600 */
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 0.375rem;
}

.tab-button:hover {
    background-color: rgba(209, 213, 219, 0.5); /* Tailwind gray-400 with transparency */
}

.tab-button.active {
    background-color: #ffffff;
    color: #1F2937; /* Tailwind gray-800 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.w-\[35rem\] {
    width: 35rem;
}
.overflow-y-scroll {
    overflow-y: scroll;
}
.max-h-200 {
    max-height: 200px;
}
.min-h-200 {
    max-height: 200px;
}
[data-show-section][role="tab"].active {
    background-color: white;
    color: var(--foreground-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cursor-grab {
    cursor: grab;
}

.pricing-card-width {
    min-width: 250px !important;
}
.min-width-pricing-container {
    width: calc(100%) !important;
    overflow-x: auto !important;
}
.gap-12 {
    gap: 12rem !important;
}
@media (min-width: 1024px) {
    .lg\:w-2\/5 {
        width: 40%;
    }
}

/* shimmer */
@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: 200px 0;
    }
}

.skeleton {
    background: linear-gradient(to right, #e0e0e0 0%, #f5f5f5 50%, #e0e0e0 100%);
    background-size: 400px 100%;
    animation: shimmer 1.5s infinite linear;
}

@media (max-width: 820px) {
    .sm-min-w-100 {
        min-width: 100% !important;
        max-width: unset !important;
    }
}
@media(max-width: 820px) {
    #funnel-tooltip {
        display: none;
    }
}
@media(max-width: 768px) {
    header#page-topbar {
        padding-left: 0px !important;
        margin-left: 0px;
    }
}
@media (max-width: 768px) {
    .flatpickr-calendar {
        animation: none !important;
        transition: none !important;
    }
}

@media(max-width: 768px) {
    .flatpickr-calendar {
         transform: scale(0.6);
         left: -110px !important;
         top: 106px !important;
    }
    .flatpickr-calendar .flatpickr-predefined-ranges {
         display: none;
    }
}
@media(max-width: 768px) {
    .event-modal-data-area {
        overflow-y: auto !important;
        height: 700px !important;
    }
}
.sidebar-expand-btn {
    position: fixed;
    left: 1rem;
    bottom: 2rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1e293b;
    color: white;
    border-radius: 9999px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    z-index: 500;
}

.sidebar-expand-btn:hover {
    background-color: #334155;
    transform: scale(1.1);
}

.mobile-show {
    display: none;
}

@media (max-width: 768px) {
    .mobile-show {
        display: flex;
    }
}

@media (min-width: 768px) {
    .mobile-show {
        display: none;
    }
}
.sidebar-expand-btn[data-sidebar-active="true"] {
    /* right: 45px; */
    left: unset !important;
}
.sidebar-expand-btn[data-sidebar-active="false"] .sidebar-expand-btn-expanded {
    display: none;
}
.sidebar-expand-btn[data-sidebar-active="true"] .sidebar-expand-btn-not-expanded {
    display: none;
}
@media(max-width: 768px) {
    .app-menu {
        left: -100%;
    }
}
@media (min-width: 1024px) {
    .lg-min-w-100 {
        width: 100% !important;
    }
}
@media(max-width: 768px) {
    .sm\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        height: fit-content;
    }
}
@media(max-width: 768px) {
    .sm\:gap-3 {
        gap: 3rem !important;
    }
    .sm\:p-none {
        padding: unset !important;
    }
}
.onboarding-logout-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -10 !important;
}