:root {
    /* Surface https://colorffy.com/dark-theme-generator?colors=09cb2f-121212 */
    --mss-surface-color: #080a0d;
    --mss-surface-a10-color: #282828;
    --mss-surface-a20-color: #3f3f3f;
    --mss-surface-a30-color: #575757;
    --mss-surface-a40-color: #717171;
    --mss-surface-a50-color: #8b8b8b;
    /* Text */
    --mss-text-color: rgba(255, 255, 255, 0.8);
    --mss-text-a10-color: rgba(255, 255, 255, 0.4);
    --mss-selected-text-color: #FFFFFF;
    /* primary */
    --mss-primary-color: #3B82F6;
    --mss-sucess-color: #04ad3b;
    --mss-warnning-color: #B28400;
    /* icon */
    --mss-icon-color: #09ac15;
    --mss-icon-a10-color: #42b639;
    --mss-icon-a20-color: #60bf53;
    --mss-icon-a30-color: #7ac96c;
    /* Radzen */
    --rz-tree-node-padding: 0.25rem;
    --rz-tree-node-hover-background-color: var(--mss-surface-a10-color);
    --rz-tree-node-hover-color: var(--mss-text-color);
    --rz-tree-node-selected-background-color: var(--mss-surface-a30-color);
    --rz-tree-node-selected-color: var(--mss-selected-text-color);
}

.mss-main-body {
    font-family: Roboto, sans-serif;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--mss-surface-color);
    color: var(--mss-text-color);
}

.rz-dialog {
    background-color: var(--mss-surface-color);
    color: var(--mss-text-color);
    border: 1px solid var(--mss-surface-a30-color);
}

.rz-dialog-wrapper {
    background-color: var(--mss-surface-color);
}

.rz-dialog-content {
    background-color: var(--mss-surface-color);
    color: var(--mss-text-color);
}

.rz-dialog-titlebar {
    background-color: var(--mss-surface-a10-color);
    color: var(--mss-selected-text-color);
    border-bottom: 1px solid var(--mss-surface-a30-color);
}

.rz-dialog-titlebar-close {
    color: var(--mss-text-color);
}

.rz-dialog-titlebar-close:hover {
    background-color: var(--mss-surface-a30-color);
}

.rz-html-editor {
    background-color: var(--mss-surface-a10-color);
    border-color: var(--mss-surface-a30-color);
}

.rz-html-editor-content {
    background-color: var(--mss-surface-color);
    color: var(--mss-text-color);
}

.rz-html-editor .rz-html-editor-toolbar {
    background-color: var(--mss-surface-a20-color);
    border-color: var(--mss-surface-a30-color);
}

.rz-html-editor .rz-html-editor-toolbar .rz-button {
    color: var(--mss-text-color);
}

.rz-html-editor .rz-html-editor-toolbar .rz-button:hover {
    background-color: var(--mss-surface-a30-color);
}

.rz-textbox {
    background-color: var(--mss-surface-a10-color);
    color: var(--mss-text-color);
    border-color: var(--mss-surface-a30-color);
}

.rz-textbox::placeholder {
    color: var(--mss-text-a10-color);
}