html, body, #__next {
    height: 100%;

    /*font-family: "Work Sans" !important;*/
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

/************SWARM VARIABLES**************/
/*****https://mycolor.space/?hex=%23FF3E77&sub=1*****/
:root {
    --white: #fff;
    --white-hover: rgba(0, 0, 0, 0.2);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-80: rgba(255, 255, 255, 0.4);
    --white-90: rgba(255, 255, 255, 0.3);
    --disabled-color: rgba(255, 255, 255, 0.25);
    --background-55: rgba(0, 0, 0, 0.55);
    --black: rgba(1, 0, 0, 0.85);
    --telePrompterBackground: linear-gradient(-180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%) transparent;
    --telePrompterShadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
    --cardShadow: 0 0 8px rgba(0, 0, 0, 0.45);
    --sceneTitleBackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    --darkButtonBackground: rgba(255, 255, 255, 0.035);
    --cardBackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)) no-repeat;
    --cardBackgroundHover: rgba(0, 0, 0, 0.25);
  
    --cardWidth: max(calc(18vh * 1.333), 120px);
    --cardHeight: 18dvh;

    --primary-color-grad1: #7421FC;
    --primary-color-grad2: #7421FC ;
    --secondary-color-grad1: #7421FC;
    --secondary-color-grad2: #7421FC;
    --line-color: var(--white-90); 
    --primary-gradient: linear-gradient(90deg, var(--primary-color-grad1) var(--primary-color-grad2));
    --secondary-gradient: linear-gradient(90deg, var(--secondary-color-grad1) var(--secondary-color-grad2));
    --background-hover: var(--primary-color);
    --sidebar-background: #191B1F; 
    --sidebar-background-hover: rgba(6, 14, 43, 0.3); 
    --listview-background: #F0F2F5;
    --listview-background-lighter: #f3f3f3;
    --listview-background-darker: rgba(225, 225, 225, 0.4);
    --background-faded: #D7DADD;
  
    --primary-color: #7421FC;
    --primary-color-80: #8758F9;
    --primary-color-60: #9170F9;
    --primary-color-40: #A18BFC;
    --primary-color-20: var(--listview-background);
  
    --destructive-color: #F3025D;
    --destructive-color-80: #DF025A;
  
  
    --secondary-color: #7421FC;
    --secondary-color-80: #8758F9;
    --secondary-color-60: #9170F9;
    --secondary-color-40: #f8f8f8;
    --secondary-color-20: #f8f8f8;

    --pricing-sidebar-color: var(--sidebar-background);
  
    --secondary-color-faded: #058BDD;
    --secondary-color-light: rgba(5, 150, 221, 0.85);
    --secondary-gray: #8E8E8E;
    --secondary-gray-light: #F0F2F5;
    --secondary-gray-light2: #e5eaee;
  
    --text-link-color: var(--primary-color);
    --text-color: #4e5266;
    --text-color-dark: rgba(0, 0, 0, 0.85);
    --background-color: #d0dae4;
    --default-icon-color: #7bd3c8;
    --editable-active-color: #F0F2F5;
    --offwhite-color: rgba(225, 225, 225, 0.1);
  
    --blankslate-heading-color: rgba(0, 0, 0, 0.85);
    --blankslate-subheading-color: rgba(0, 0, 0, 0.5);
  
    --accent-color-yellow: #fff;
    --accent-color-yellow-20: #fff;
    --accent-color-yellow-darker: #fff;
  
    --accent-color-green: #00A86B ;
    --accent-color-green-darker: rgb(21, 168, 154) ;
    --accent-color-green-80: #57C3B6;
    --accent-color-green-60: #66D2C8 ; 
    --accent-color-green-40: #AFE1DB;
    --accent-color-green-20: #D7F1ED; 

    --accent-orange: #FA8264;
    --accent-yellow: #E8C723;
    --accent-blue: #088BDE;
    --highlight-color: rgba(240, 245, 255, 1);
    --highlight-color-lighter: rgba(240, 245, 255, 0.8); /*approx. #f0f5ff at 80% opacity on white*/
    --fire-color: #F97316;
    --fire-color-80: #FED7AA; /*80% of fire-color*/
    
    --leftnav: #191B1F; 
    --scene-background: #2B2E31;
    --card-scene-background: #232527;
    --feed-background: var(--scene-background);
    --chat-background: var(--scene-background);
    --topnav-background: #191B1F;
    --topnav-background-80: #2B2E31;
  
    --fontFamily: "Work Sans"; 
  
    --buttonBackgroundDarkOpaque: rgba(0,0,0,0.35);

    /*--card-shadow:  0 1px 2px -2px rgba(255, 255, 255, 0.25), 0 3px 6px 0 rgba(255, 255, 255, 0.20), 0 5px 12px 4px rgba(255, 255, 255, 0.15);*/
    --card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);

  
  
    /*** PROMPTS ***/
    --promptButtonColor: var(--primary-color);
    --promptButtonColorLight: var(--primary-color-80);
    --promptButtonColorLighter: var(--primary-color-60);
    --promptChoiceButtonColor:  rgba(10, 10, 10, 0.2);
    --promptChoiceButtonColorHover: rgba(255, 255, 255, 0.2);


    --promptTextColor: var(--white);
    --promptBackgroundColor: var(--leftnav);
    --promptBackgroundColorLight: var( --background-color);
    --promptTextBackgroundColor: unset;
    --promptTextFontFamily: inherit;
    --promptTitleColor: white;
  
    /*** WALL OF LOVE ***/
  
    --wolCarouselHeight: 500px;
    --wolCarouseDotsColor: var(  --text-color);
    --wolFeedWidth: 25vw;
    --wolFontFamily: inherit;
    --wolFontForTextPosts: 'Helvetica Neue', Roboto, 'Segoe UI', Calibri, sans-serif;
    --wolFontSize: 1.25rem;
    --wolFontSizeTitle: 1.6rem;
    --wolTitleColor: inherit;
    --wolBackgroundColor: transparent;
    --wolPrimaryColor: var(--primary-color);
    --wolSecondaryColor: var(--secondary-color);
  
    --wolDarkModeBackground: rgb(21, 32, 43);
    --wolDarkModeColor: rgb(247, 249, 249);
    --wolDarkModeColor-80: rgba(139,152,165);
  
    --wolDarkModeBorderColor: rgb(21, 32, 43);

    --wolPlaceholderBackground: var(--card-scene-background);


    /*****STORE*****/
    --store-background-color: inherit;
    --store-text-color: inherit;
    /*--store-border-color: var(--secondary-gray);*/
    --store-primary-color: inherit;
    --store-card-background-color: var(--card-scene-background);
    /*****TOPIC PALETTE*****/
    /* Six fixed chip colours, keyed by name in lib/topicColors.js.
     *
     * Defined ONCE, outside any theme block, so a topic is the same colour in light mode and
     * dark. They were themed per mode at first — pale tint with dark text in light, dark tint
     * with pale text in dark — and the inversion made the same topic read as two different
     * things depending on the viewer's theme. A topic's colour is its identity, so it is a
     * fixed sticker on whatever ground it lands on. Every fg/bg pair clears 4.5:1, and that
     * ratio is internal to the chip, so it holds on either surface.
     *
     * Deliberately NOT built on --primary-color / --accent-color-green either: both are
     * rewritten per white-label domain, which would make "purple" render red on a red-branded
     * space. */
    --topic-purple-bg: #EDE6FE;
    --topic-purple-fg: #3D1A8F;
    --topic-purple-dot: #7421FC;

    --topic-green-bg: #D7F1ED;
    --topic-green-fg: #0B5E47;
    --topic-green-dot: #00A86B;

    --topic-orange-bg: #FDE4DC;
    --topic-orange-fg: #9A3412;
    --topic-orange-dot: #FA8264;

    --topic-yellow-bg: #FDF1C7;
    --topic-yellow-fg: #854D0E;
    --topic-yellow-dot: #E0A400;

    --topic-blue-bg: #DBEAFE;
    --topic-blue-fg: #1E40AF;
    --topic-blue-dot: #3A8EE0;

    --topic-slate-bg: #EEF0F3;
    --topic-slate-fg: #4E5266;
    --topic-slate-dot: #8E8E8E;

    /* The cover-image fallback for an event with NO topic. Fixed for the same reason: it sits
       beside topic-coloured tiles in the same list, and a neutral that flipped with the theme
       would be the one tile that changed character. Distinct from slate by its border. */
    --topic-neutral-bg: #F4F6F8;
    --topic-neutral-fg: #4E5266;
    --topic-neutral-border: #DFE3E8;

  }



  /*****LIGHT MODE*****/


  .light-mode {
    --white: rgba(0, 0, 0, 0.85);
    --white-60: rgba(0, 0, 0, 0.6);
    --white-80: rgba(0, 0, 0, 0.7);
    --white-90: rgba(0, 0, 0, 0.15);
    --disabled-color: rgba(0, 0, 0, 0.45);
    --background-55: rgba(255, 255, 255, 0.75);
    --white-hover: #F8F9FA;
    --black: rgba(0, 0, 0, 0.05);
    --textPromptBackground: none;
    --textPromptShadow: none;
    --cardShadow: 0 0 5px rgba(0, 0, 0, 0.1);
    --sceneTitleBackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    --darkButtonBackground: rgba(255, 255, 255, 0.8);
    --cardBackground: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)) no-repeat;
    --cardBackgroundHover: rgba(0, 0, 0, 0.25);

    --primary-color-grad1: #7421FC;
    --primary-color-grad2: #7421FC ;
    --secondary-color-grad1: #7421FC;
    --secondary-color-grad2: #7421FC;
    --line-color: #e4e7eb; 
    --primary-gradient: linear-gradient(90deg, var(--primary-color-grad1) var(--primary-color-grad2));
    --secondary-gradient: linear-gradient(90deg, var(--secondary-color-grad1) var(--secondary-color-grad2));
    --background-hover: var(--primary-color);
    --sidebar-background: #fff; 
    --sidebar-background-hover: var(--white-hover); 
    --listview-background: #F8F9FA;
    --listview-background-lighter: #f3f3f3;
    --listview-background-darker: rgba(225, 225, 225, 0.4);
    --background-faded: #e4e7eb;
  
    --primary-color: #7421FC;
    --primary-color-80: #8758F9;
    --primary-color-60: #9170F9;
    --primary-color-40: #A18BFC;
    --primary-color-20: var(--listview-background);;
  
    --destructive-color: #F3025D;
    --destructive-color-80: #DF025A;
  
  
    --secondary-color: #7421FC;
    --secondary-color-80: #8758F9;
    --secondary-color-60: #9170F9;
    --secondary-color-40: #f8f8f8;
    --secondary-color-20: #f8f8f8;

    --pricing-sidebar-color: var(--sidebar-background);
  
    --secondary-color-faded: #058BDD;
    --secondary-color-light: rgba(5, 150, 221, 0.85);
    --secondary-gray: #e4e7eb;
    /*--secondary-gray-light: #000;*/
    --secondary-gray-light2: rgba(0, 0, 0, 0.75);
  
    --text-link-color: var(--primary-color);
    --text-color: #4e5266;
    --text-color-dark: rgba(0, 0, 0, 0.85);
    --background-color: #d0dae4;
    --default-icon-color: #7bd3c8;
    --editable-active-color: #F0F2F5;
    --offwhite-color: rgba(225, 225, 225, 0.1);
  
    --blankslate-heading-color: rgba(0, 0, 0, 0.85);
    --blankslate-subheading-color: rgba(0, 0, 0, 0.5);
  
    --accent-color-yellow: #fff;
    --accent-color-yellow-20: #fff;
    --accent-color-yellow-darker: #fff;
  
    --accent-color-green: #00A86B ;
    --accent-color-green-darker: rgb(21, 168, 154) ;
    --accent-color-green-80: #57C3B6;
    --accent-color-green-60: #66D2C8 ; 
    --accent-color-green-40: #AFE1DB;
    --accent-color-green-20: #D7F1ED; 
    
    --leftnav: #fff; 
    --scene-background: #F8F9FA;
    --card-scene-background: #FFFFFF;
    --feed-background: var(--scene-background);
    --chat-background: var(--scene-background);
    --topnav-background: #fff;
    --topnav-background-80: #F8F9FA;
  
    --fontFamily: "Work Sans";
  
    --buttonBackgroundDarkOpaque: rgba(0,0,0,0.35);
  
    --card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);


    --promptChoiceButtonColor:  var(--primary-color);
    --promptChoiceButtonColorHover: var(--primary-color-80);

    --wolPlaceholderBackground: var(--secondary-gray-light);
    --wolDarkModeBackground: #fff;
    --wolDarkModeColor: rgba(0, 0, 0, 0.85);
    --wolDarkModeColor-80: rgba(83,100,113);
  
    --wolDarkModeBorderColor: #eee #ddd #bbb;

    /*****STORE*****/
    --store-background-color: inherit;
    --store-text-color: inherit;
   /* --store-border-color: var(--secondary-gray);*/
    --store-primary-color: inherit;
    --store-card-background-color: var(--card-scene-background);

  }
/*
  .ant-btn-round.ant-btn-lg{
    border-radius: 10px !important;
  }*/

.ant-switch-checked{
    background-color: var(--text-color-dark) !important;
    color: var(--white);
}

.ant-switch-unchecked{
    background-color: var(--white-hover) !important;
    color: var(--white);
}

.ant-switch-inner{
    color: white !important;
}

.ant-card-hoverable:hover{
  box-shadow: var(--card-shadow) !important;
 
}

.ant-card-hoverable:hover .ant-avatar{
  filter: brightness(1.1);
}