:root {
    /*background*/
    --dark-main-background: #2B2B2B;
    --dark-background-1: rgba(255,255,255,0.04);
    --dark-background-2: rgba(255,255,255,0.08);
    /*white*/
    --dark-white-1: white;
    /*gray*/
    --dark-gray-1: var(--gray-3); /* disabled text */
    --dark-gray-2: #a0a0a0; /*var(--gray-4); */
    --dark-gray-3: #525252;
    --dark-gray-4: #38383D;
    --dark-gray-5: #1C1C1C; /* Hintergrund Menuebaum */
    /*black*/
    --black: black;
    /*blue*/
    --dark-blue-1: #80BDFF;
    --dark-blue-2: #2E4456; /*Grid hover*/
    /*green*/
    --dark-valid: #00cc00; /* valid */
    --dark-valid-active: #006600;
    /*orange, brown*/
    --dark-warning: #ffaf33;
    --dark-warning-active: #995d00;
    /*red*/
    --dark-red-1: #FC5964;
    --dark-error: #FB5660;
    /* Limitierte Funktion - nur der Akzent. Hintergrund und Rahmen bleiben im
       Dark Theme neutral (--dark-background-1 / --dark-border-1), so wie bei
       allen anderen Hinweistypen auch. Gedämpftes Amber statt des grellen
       --dark-warning: es soll ins Auge fallen, aber nicht nach Störung
       aussehen. */
    --dark-licence: #E0BC7E;
    /*textcolors*/
    --dark-textcolor-1: white;
    --dark-textcolor-2: black;
    --dark-logo: white;
    /*border*/
    --dark-border-1: rgba(255,255,255,.25);
    /*Shadow*/
    --dark-shadow-1: 0 0 0 0.25rem rgba(128, 180, 217, 0.25);
    --dark-shadow-2: #454343;
    /*AgGrid*/
    --dark-row-hover: #507791;
    --dark-row-select: #334B5B;

    --dark-info: var(--dark-blue-1);
}

.tng-dark-theme .none-color {
    color: var(--dark-gray-5);
}

.tng-dark-theme .error-color {
    color: var(--dark-error);
}

.tng-dark-theme .warning-color {
    color: var(--dark-warning);
}

.tng-dark-theme .valid-color {
    color: var(--dark-valid);
}

.tng-dark-theme .info-color{
    color: var(--dark-info);
}