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-80: rgba(255, 255, 255, 0.4);
    --white-90: rgba(255, 255, 255, 0.3);
    --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: #D7DADD; 
    --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; 
    
    --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: inherit;
    --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);
  }



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


  .light-mode {
    --white: rgba(0, 0, 0, 0.85);
    --white-80: rgba(0, 0, 0, 0.7);
    --white-90: rgba(0, 0, 0, 0.15);
    --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);
}