/************   Dark   **************/
.dark {

    /* brand */
    --color-primary: #0EADD7;

    /* background layer */
    --color-bg-primary: #1D1D1D;
    --color-bg-secondary: #262626;
    --color-bg-tertiary: #323232;

    /* border */
    --color-default-border: #3F3F3F;
    --color-active-border: #DFDFDF;
    --color-separator: #3F3F3F;

    /* text */
    --color-title: #FFFFFF;
    --color-subtitle: #D1D1D1;
    --color-disabled-text: #B2B2B2;
    --color-text-on-primary-button: #FFFFFF;
    --color-blue-text: #7FE4F9;

    /* Button states */
    --color-active-button: var(--color-primary);
    --color-deactivate: #3F3F3F;
    --color-hover-selected-pressing-button: #0086B4;
    --color-hover-selected-pressing-button-opacity: rgba(0, 134, 180, 0.12);
    --color-loading-button: var(--color-primary);

    /* shadow */
    --color-shadow-100: #000000;

    /* layout */
    --color-layout: rgba(0, 0, 0, 0.48);

    /* color icon */
    --color-icon: var(--color-title);

    /* status */
    --color-success: #85DD9B;
    --color-info: #83BFF2;
    --color-warning: #E5B800;
    --color-danger: #FF8983;

    --color-success-08: #3E5B45;
    --color-blue-08: rgba(131, 191, 242, 0.08);
    --color-warning-08: #5C4A00;
    --color-danger-08: #663734;

}