/* variables */
:root {
    --color1: rgb(100,100,100);
    --color2: rgb(250, 250, 240);
    --color3: rgb(10, 10, 10);
    --color4: rgb(250,250,250);
    --color5: rgb(255,255,255);
    --color6: rgb(240,240,240);
    --color7: rgb(243,161,8);
    --color8: rgb(37,84,255);
    --color9: rgb(80,80,80);
    --color10: rgb(90,90,90);
    --color11: rgb(231, 0, 11);

    --boxShadow1: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
}

:root[theme="dark"] {
    --boxShadow1: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);

    dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }
}
/* end: variables */

.color1 {
    color: var(--color1);
    fill: var(--color1);
}

:root[theme="dark"] .darkColor1 {
    color: var(--color1);
    fill: var(--color1);
}


.color2 {
    color: var(--color2);
    fill: var(--color2);
}

:root[theme="dark"] .darkColor2 {
    color: var(--color2);
    fill: var(--color2);
}

.color3 {
    color: var(--color3);
    fill: var(--color3);
}

:root[theme="dark"] .darkColor3 {
    color: var(--color3);
    fill: var(--color3);
}

.color4 {
    color: var(--color4);
    fill: var(--color4);
}

:root[theme="dark"] .darkColor4 {
    color: var(--color4);
    fill: var(--color4);
}

.color5 {
    color: var(--color5);
    fill: var(--color5);
}

:root[theme="dark"] .darkColor5 {
    color: var(--color5);
    fill: var(--color5);
}

.color6 {
    color: var(--color6);
    fill: var(--color6);
}

:root[theme="dark"] .darkColor6 {
    color: var(--color6);
    fill: var(--color6);
}

.color7 {
    color: var(--color7);
    fill: var(--color7);
}

:root[theme="dark"] .darkColor7 {
    color: var(--color7);
    fill: var(--color7);
}

.color8 {
    color: var(--color8);
    fill: var(--color8);
}

:root[theme="dark"] .darkColor8 {
    color: var(--color8);
    fill: var(--color8);
}

.color9 {
    color: var(--color9);
    fill: var(--color9);
}

:root[theme="dark"] .darkColor9 {
    color: var(--color9);
    fill: var(--color9);
}

.color10 {
    color: var(--color10);
    fill: var(--color10);
}

:root[theme="dark"] .darkColor10 {
    color: var(--color10);
    fill: var(--color10);
}

.color11 {
    color: var(--color11);
    fill: var(--color11);
}

:root[theme="dark"] .darkColor11 {
    color: var(--color11);
    fill: var(--color11);
}

.backgroundColor1 {
    background-color: var(--color1);
}

:root[theme="dark"] .darkBackgroundColor1 {
    background-color: var(--color1);
}

.backgroundColor2 {
    background-color: var(--color2);
}

:root[theme="dark"] .darkBackgroundColor2 {
    background-color: var(--color2);
}

.backgroundColor3 {
    background-color: var(--color3);
}

:root[theme="dark"] .darkBackgroundColor3 {
    background-color: var(--color3);
}

.backgroundColor4 {
    background-color: var(--color4);
}

:root[theme="dark"] .darkBackgroundColor4 {
    background-color: var(--color4);
}

.backgroundColor5 {
    background-color: var(--color5);
}

:root[theme="dark"] .darkBackgroundColor5 {
    background-color: var(--color5);
}

.backgroundColor6 {
    background-color: var(--color6);
}

:root[theme="dark"] .darkBackgroundColor6 {
    background-color: var(--color6);
}

.backgroundColor7 {
    background-color: var(--color7);
}

:root[theme="dark"] .darkBackgroundColor7 {
    background-color: var(--color7);
}

.backgroundColor8 {
    background-color: var(--color8);
}

:root[theme="dark"] .darkBackgroundColor8 {
    background-color: var(--color8);
}

.backgroundColor9 {
    background-color: var(--color9);
}

:root[theme="dark"] .darkBackgroundColor9 {
    background-color: var(--color9);
}

.backgroundColor10 {
    background-color: var(--color10);
}

:root[theme="dark"] .darkBackgroundColor10 {
    background-color: var(--color10);
}

.backgroundColor11 {
    background-color: var(--color11);
}

:root[theme="dark"] .darkBackgroundColor11 {
    background-color: var(--color11);
}

.borderColor1 {
    border-color: var(--color1);
}

:root[theme="dark"] .darkBorderColor1 {
    border-color: var(--color1);
}

.borderColor2 {
    border-color: var(--color2);
}

:root[theme="dark"] .darkBorderColor2 {
    border-color: var(--color2);
}

.borderColor3 {
    border-color: var(--color3);
}

:root[theme="dark"] .darkBorderColor3 {
    border-color: var(--color3);
}

.borderColor4 {
    border-color: var(--color4);
}

:root[theme="dark"] .darkBorderColor4 {
    border-color: var(--color4);
}

.borderColor5 {
    border-color: var(--color5);
}

:root[theme="dark"] .darkBorderColor5 {
    border-color: var(--color5);
}

.borderColor6 {
    border-color: var(--color6);
}

:root[theme="dark"] .darkBorderColor6 {
    border-color: var(--color6);
}

.borderColor7 {
    border-color: var(--color7);
}

:root[theme="dark"] .darkBorderColor7 {
    border-color: var(--color7);
}

.borderColor8 {
    border-color: var(--color8);
}

:root[theme="dark"] .darkBorderColor8 {
    border-color: var(--color8);
}

.borderColor9 {
    border-color: var(--color9);
}

:root[theme="dark"] .darkBorderColor9 {
    border-color: var(--color9);
}

.borderColor10 {
    border-color: var(--color10);
}

:root[theme="dark"] .darkBorderColor10 {
    border-color: var(--color10);
}

.borderColor11 {
    border-color: var(--color11);
}

:root[theme="dark"] .darkBorderColor11 {
    border-color: var(--color11);
}