.niotDarkTheme {
    /* Superficies */
    --color-background-primary-deep: #000421;
    --color-background-primary: #060A25; /* Cor padrão para plano de fundo. Base*/
    --color-background-secondary: #13132E; /* Cor secundária para plano de fundo. Superficies elevadas. Destaque */
    --color-background-tertiary: #1C2248; /* Cor terciaria para superficies. Interações, inputs, botões */
    --color-background-fourth: #2B315C;
    --color-background-hover: rgba(38, 95, 255, 0.25); /* Cor para Hover state */
    --color-background-active: #172258; /* Cor apra Active state. Interação */
    --color-background-backdrop: #3d405eb3;
    --drop-shadow: drop-shadow(0px 0px 8px rgba(30, 50, 86, 1));
    --drop-shadow-color: rgba(30, 50, 86, 1);
    --color-background-hover-secondary: #1d1d3b;
    --bg-glass-color-20: rgba(15, 23, 42, 0.2); /* Azul escuro translúcido */
    --bg-glass-color-40: rgba(15, 23, 42, 0.4); /* Azul escuro translúcido */
    --bg-glass-color-60: rgba(15, 23, 42, 0.6); /* Azul escuro translúcido */


    /* Overlay | PopupFade */
    --color-background-overlay: rgba(134, 149, 215, 0.2);

    /* Tipografia */
    --color-text-primary: #FAFAFA; /* Texto padrão, sem formatação especifica. Body text, Headers*/
    --color-text-secondary: #D3D3DB; /* Textos secundários, como notas, quotes */
    --color-text-tertiary: #798090; /* Letrinhas miudas, legendas */
    --color-text-highlight: #265FFF; /*Cor para destaque de textos, links*/
    --color-text-input: #D7DCEB; /*Cara para texto em inputs */

    /* Contornos */
    --color-outline-white: 1px solid #fafafa;
    --color-outline-primary: 1px solid #265FFF;
    --color-outline-secondary: 1px solid #2B315C;
    --color-outline-secondary-variable: #2B315C;
    --color-outline-tertiary: 1px solid #595f8a;
    --color-outline-tertiary-variable: #595f8a;


    /* Cor do scroll */
    --scroll-thumb-color: #152264; /* Boa visibilidade sobre o fundo #060A25 */
    --scroll-track-color: #222742;

    /* Cores para uso geral */
    /* Cada tema pode ter suas próprias cores se necessário */
    --node-blue: #265fff;
    --node-blue-rgb: 38, 95, 255;
    --node-dark-blue:#060A25;
    --node-dark-blue-rgb: 6, 10, 37;
    --node-red: #FF405C;
    --node-red-rgb: 242, 74, 70;
    --node-pink: #EF3A9D;
    --node-pink-rgb: 239, 58, 157;
    --node-purple: #741CFF;
    --node-purple-rgb: 139, 87, 221;
    --node-lima: #62ff36;
    --node-lima-rgb: 98, 255, 54;
    --node-green: #2AD0A0;
    --node-green-rgb: 42, 208, 160;
    --node-yellow: #FFF540;
    --node-yellow-rgb: 255, 245, 64;
    --node-orange: #FF7E3E;
    --node-orange-rgb: 255, 126, 62;
    --node-white: #FAFAFA;
    --node-white-rgb: 250, 250, 250;
    --node-black: #000000;
    --node-dark-gray: #1E1E1E;
    --node-teal: #40C6FF;
    --node-teal-rgb: 64, 198, 255;
    --node-default: #cacbcf;
    --node-default-rgb: 202, 203, 207;
    --node-default-drop: #2b2e45;
    

    /* Components */

    /*text input*/
    --bg-textInput-color: rgba(14, 15, 19, 0.6);

    /*card*/
    --bg-card-color: rgba(6, 10, 37, 0.6);
    --shadow-card: 4px 4px 18px 0px rgba(4,5,27,1);
}
  
.niotLightTheme {
    /* Superficies */
    --color-background-primary-deep: #fff;
    --color-background-primary: #fafafa; /* Cor padrão para plano de fundo. Base*/
    --color-background-secondary: #F1F3F6; /* Cor secundária para plano de fundo. Superficies elevadas. Destaque */
    --color-background-tertiary: #E0E7F2; /* Cor terciaria para superficies. Interações, inputs, botões */
    --color-background-fourth: #d0d4e2;
    --color-background-hover: rgba(228, 235, 244, 0.4); /* Cor para Hover state */
    --color-background-active: #E4EBF4; /* Cor apra Active state. Interação */
    --color-background-backdrop: rgba(57, 73, 109, 0.25);
    --drop-shadow: drop-shadow(0px 0px 8px rgba(192, 206, 226,0.6));
    --drop-shadow-color: rgba(192, 206, 226,0.6);
    --color-background-hover-secondary:   #F0F3FB;
    --bg-glass-color-20: rgba(255, 255, 255, 0.25); /* Branco translúcido leve */
    --bg-glass-color-40: rgba(255, 255, 255, 0.45); /* Branco translúcido leve */


    /* Overlay | PopupFade */
    --color-background-overlay: rgba(40, 40, 80, 0.20);


    /* Tipografia */
    --color-text-primary: #060A25; /* Texto padrão, sem formatação especifica. Body text, Headers*/
    --color-text-secondary: #39496D; /* Textos secundários, como notas, quotes */
    --color-text-tertiary: #798090; /* Letrinhas miudas, legendas */
    --color-text-highlight: #265FFF; /*Cor para destaque de textos, links */
    --color-text-input: #485260; /*Cara para texto em inputs */

     /* Contornos */
    --color-outline-white: 1px solid #fafafa;
    --color-outline-primary: 1px solid #265FFF;
    --color-outline-secondary: 1px solid #D7DCEB;
    --color-outline-secondary-variable: #D7DCEB;
    --color-outline-tertiary: 1px solid #B7BCCB;
    --color-outline-tertiary-variable: #B7BCCB;  

    /* Cor do scroll */
    --scroll-thumb-color: #C2CAD9; /* Contrasta bem com o fundo #FAFAFA */
    --scroll-track-color: #eaeaea;

    /* Cores para uso geral */
    /* Cada tema pode ter suas próprias cores se necessário */
    --node-blue: #265fff;
    --node-blue-rgb: 38, 95, 255;
    --node-dark-blue:#060A25;
    --node-dark-blue-rgb: 6, 10, 37;
    --node-red: #FF405C;
    --node-red-rgb: 242, 74, 70;
    --node-pink: #EF3A9D;
    --node-pink-rgb: 239, 58, 157;
    --node-purple: #741CFF;
    --node-purple-rgb: 139, 87, 221;
    --node-lima: #62ff36;
    --node-lima-rgb: 98, 255, 54;
    --node-green: #2AD0A0;
    --node-green-rgb: 42, 208, 160;
    --node-yellow: #FFF540;
    --node-yellow-rgb: 255, 245, 64;
    --node-orange: #FF7E3E;
    --node-orange-rgb: 255, 126, 62;
    --node-white: #FAFAFA;
    --node-white-rgb: 250, 250, 250;
    --node-black: #000000;
    --node-dark-gray: #1E1E1E;
    --node-teal: #40C6FF;
    --node-teal-rgb: 64, 198, 255;
    --node-default: #cacbcf;
    --node-default-rgb: 202, 203, 207;
    --node-default-drop: #f3f3f4;

    /* Components */

    /* text input */
    --bg-textInput-color: #F1F3F6;
    /* card */
    --bg-card-color: rgba(241, 243, 246, 0.6);
    --shadow-card: 0px 2px 12px 0px rgba(21,0,53,0.15)
}


:root {
    /* Contornos */
    --color-outline-4th: 1px solid #485260;       
    --color-outline-5th: 1px solid #FF405C;       
    --color-outline-6th: 1px solid #2AD0A0;          
    --color-outline-7th: 1px solid #741CFF;           
    --color-outline-8th: 1px solid #FF17A2;         
    --color-outline-9th: 1px solid #FF7E3E;            
    --color-outline-10th: 1px solid #00AFDF;
    --color-outline-11th: 1px solid #FFA500;
    --color-outline-12th: 1px solid #D31FFF;
    

    /* TAGs (Horário, Intervalo, Interrupção e etc.) */
    --color-tag-bg-red: #FF405C33;
    --color-tag-bg-green: #2AD0A033;
    --color-tag-bg-purple: #741CFF33;
    --color-tag-bg-pink: #FF17A233;
    --color-tag-bg-orange: #FF7E3E33;
    --color-tag-bg-cyan: #00AFDF33;
    --color-tag-bg-yellow: #FFA50033;
    --color-tag-bg-blue: #265fff33;
  
    /* Botões de Navegação do Menu */
    --color-LeftMenu-bg-default: #223256;               
    --color-LeftMenu-bg-default-shadow: #39496DCC;       
    --color-LeftMenu-bg-dashboard: #FF405C;              
    --color-LeftMenu-bg-dashboard-shadow: #FF405CCC;     
    --color-LeftMenu-bg-nodeAiFlow: #D31FFF;
    --color-LeftMenu-bg-nodeAiFlow-shadow: #D31FFFCC;   
    --color-LeftMenu-bg-event: #2AD0A0;                   
    --color-LeftMenu-bg-event-shadow: #2AD0A0CC;         
    --color-LeftMenu-bg-device: #741CFF;               
    --color-LeftMenu-bg-device-shadow: #741CFFCC;        
    --color-LeftMenu-bg-integration:#FF17A2;             
    --color-LeftMenu-bg-integration-shadow:#FF17A2CC;    
    --color-LeftMenu-bg-user: #FF7E3E;                  
    --color-LeftMenu-bg-user-shadow: #FF7E3ECC;          
    --color-LeftMenu-bg-dataset: #00AFDF;
    --color-LeftMenu-bg-dataset-shadow: #00AFDFCC;
    --color-LeftMenu-bg-uploader: #FFA500;
    --color-LeftMenu-bg-uploader-shadow: #FFA500CC;
    --color-LeftMenu-bg-nprompt: #265fff;
    --color-LeftMenu-bg-nprompt-shadow: #265fffCC;
    --color-LeftMenu-bg-docViewer: #4ECC00;
    --color-LeftMenu-bg-docViewer-shadow: #4ECC00CC; 
    --color-LeftMenu-bg-light: #F0F3FB;                 
    --color-LeftMenu-bg-light-shadow: #C8D1FFCC;        
    --color-LeftMenu-bg-dark: #172258;                
    --color-LeftMenu-bg-dark-shadow: #3E54C2CC;

    --nstudio-white: #fff;
    --nstudio-blue: #1E5BFF;
    --nstudio-dark-blue:#060A25;
    --nstudio-purple: #7A2CFF;
    --nstudio-pink: #FF1FA8;
    --nstudio-orange: #FF8A3D;

    --gradient-nstudio-main:
    radial-gradient(at 80% 20%, rgba(255, 138, 61, 0.95) 0%, rgba(255, 138, 61, 0) 50%),
    radial-gradient(at 20% 30%, rgba(11, 92, 255, 0.95) 0%, rgba(11, 92, 255, 0) 50%),
    radial-gradient(at 50% 50%, rgba(106, 43, 255, 1) 0%, rgba(106, 43, 255, 0) 45%),
    radial-gradient(at 70% 80%, rgba(255, 43, 179, 0.95) 0%, rgba(255, 43, 179, 0) 50%),
    radial-gradient(at 30% 75%, rgba(196, 252, 215, 0.9) 0%, rgba(61, 255, 223, 0) 55%),
    radial-gradient(at 50% 50%, rgba(106, 43, 255, 1) 0%, rgba(106, 43, 255, 0) 45%);
  
  }


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Space Grotesk, sans-serif;
}

.AppScreen {
    display: flex;
    flex-direction: column;
    margin: 0px;
    height: 100%;
    max-height: 100%;
    width: 100%;
}

.AppBody {
    display: flex;
    flex-direction: column;
    margin: 0px;
    height: 100vh;
    max-height: 100%;
    width: 100vw; 
    overflow-y: auto;
    background-color: var(--color-background-primary-deep);
}

@media (max-width: 768px) {
    .AppBody {
      -ms-overflow-style: none;  /* IE e Edge antigo */
      scrollbar-width: none;     /* Firefox */
    }
  
    .AppBody::-webkit-scrollbar {
      display: none;             /* Chrome, Safari, Edge */
    }
  }