:root {
    /*Spacing variables*/
    --sketchSpacingRatio: 1; /* allows for scaling up or down spacings */
    --sketchSpacing1: calc(0.2rem * var(--sketchSpacingRatio));
    --sketchSpacing2: calc(0.4rem * var(--sketchSpacingRatio));
    --sketchSpacing3: calc(0.6rem * var(--sketchSpacingRatio));
    --sketchSpacing4: calc(0.8rem * var(--sketchSpacingRatio));
    --sketchSpacing5: calc(0.9rem * var(--sketchSpacingRatio));
    --sketchSpacing6: calc(1rem * var(--sketchSpacingRatio));
    --sketchSpacing7: calc(1.3rem * var(--sketchSpacingRatio));
    --sketchSpacing8: calc(2rem * var(--sketchSpacingRatio));
    --sketchSpacing9: calc(3rem * var(--sketchSpacingRatio));
    --sketchSpacing10: calc(4rem * var(--sketchSpacingRatio));

    --sketchFontSizeHeading1: 2rem;
    --sketchFontSizeHeading2: 1.6rem;
    --sketchFontSizeHeading3: 1.4rem;
    --sketchFontSizeHeading4: 1.2rem;
    --sketchFontSizeHeading5: 1.1rem;
    --sketchFontSizeHeading6: 1rem;

    --sketchFontWeightHeading1: bold;
    --sketchFontWeightHeading2: bold;
    --sketchFontWeightHeading3: bold;
    --sketchFontWeightHeading4: normal;
    --sketchFontWeightHeading5: normal;
    --sketchFontWeightHeading6: normal;

    --taskbar-height: 40px;
    --sketchColorOnTopMenu: #ffffff;

    --sketchColorNeutral: #d6d6d6;
    --sketchColorNeutralLight: #f1f1f1;
    --sketchColorNeutralExtraLight: #f4f4f4;
    --sketchColorNeutralDark: #bebebe;
    --sketchColorNeutralExtraDark: #8e8e8e;

    --sketchColorPrimary: #004466;
    --sketchColorPrimaryLight: #006699;
    --sketchColorPrimaryExtraLight: #d8e9f3;
    --sketchColorPrimaryDark: #003d5b;
    --sketchColorPrimaryExtraDark: #003651;

    --sketchColorError: #eb3e4d;
    --sketchColorHeading: var(--sketchColorPrimaryLight);
    --sketchColorInfo: #003366;
    --sketchColorLink: #003366;
    --sketchColorLinkHover: #656565;
    --sketchColorLinkActive: var(--sketchColorLinkHover);
    --sketchColorTextOnPrimary: #ffffff;
    --sketchColorPrimaryButton: #ffffff;
    --sketchColorPrimaryButtonHover: #ffffff;
    --sketchColorNavbar: var(--sketchColorTextOnPrimary);
    --sketchColorNavbarActive: var(--sketchColorTextOnPrimary);
    --sketchColorText: #000000;
    --sketchColorSecondaryButton: var(--sketchColorPrimary);
    --sketchColorSecondaryButtonHover: var(--sketchColorPrimaryLight);
    --sketchColorSuccess: #0f5132;
    --sketchColorTextOnSecondaryDisabled: var(--sketchColorSecondaryButton);
    --sketchColorWarning: #977404;
    --sketchColorEmtpyingField: #800000;

    --sketchBackgroundColorModal: var(--sketchColorNeutralLight);
    --sketchBackgroundColorTopMenu: var(--sketchColorPrimary);
    --sketchBackgroundColorBody: #ffffff;
    --sketchBackgroundColorError: #fae0e0;
    --sketchBackgroundColorInfo: #d8e9fc;
    --sketchBackgroundColorPrimary: var(--sketchColorPrimary);
    --sketchBackgroundColorPrimaryHover: var(--sketchColorPrimaryLight);
    --sketchBackgroundColorButtonPrimary: var(--sketchColorPrimary);
    --sketchBackgroundColorButtonPrimaryHover: var(--sketchColorPrimaryLight);
    --sketchBackgroundColorNavbar: var(--sketchColorPrimary);
    --sketchBackgroundColorNavbarActive: var(--sketchColorPrimaryLight);
    --sketchBackgroundColorButtonSecondary: #ffffff;
    --sketchBackgroundColorButtonSecondaryDisabled: var(--sketchColorNeutral);
    --sketchBackgroundColorButtonSecondaryHover: #ffffff;
    --sketchBackgroundColorSuccess: #bed8cc;
    --sketchBackgroundColorTaskbar: var(--sketchColorPrimary);
    --sketchBackgroundColorWarning: #f9f0d4;
    --sketchColorOnTaskbar: var(--sketchColorTextOnPrimary);
    --sketchColorBorder: #ccc;

    --sketchBorderButtonSecondary: 1px solid var(--sketchColorSecondaryButton);
    --sketchBorderInput: 1px solid #ccc;
    --sketchBorderSection: 1px solid #dbdbdb;
    --sketchBorderRadius: 5px;
    --sketchBorderRadiusButton: var(--sketchBorderRadius);
    --sketchBorderRadiusSection: var(--sketchBorderRadius);
    --sketchBorderRadiusInput: var(--sketchBorderRadius);
    --sketchBorderRadiusImage: var(--sketchBorderRadius);

    --sketchBoxShadowButton: 2px 4px 4px rgba(0, 0, 0, 0.1);
    --sketchBoxShadowSection: 0 2px 4px rgba(0, 0, 0, 0.1);

    --sketchFontFamily: Verdana, Helvetica, sans-serif;
    --sketchFontFamilyHeading: "League Spartan", Verdana, Helvetica, sans-serif;
    --sketchFontFamilyInput: monospace;
    --sketchFontSizeDefault: 10pt;
    --sketchFontSizeLabel: 10pt;
    --sketchFontSizeButton: 10pt;
    --sketchFontWeightHeading1-3: 600;

    --sketchInputHeight: 22px;

    --sketchLinkDecoration: none;

    --sketchPaddingInput: 1px 2px;
    --sketchPaddingButton: 1px 6px;
    --sketchPaddingNavbarItems: var(--sketchSpacing3);

    /* Variables related to tables */
    --sketchSpacingTableHead: calc(0.5rem * var(--sketchSpacingRatio)) 0;
    --sketchSpacingTableCell: var(--sketchSpacing3);
    --sketchBackgroundColorTableHead: var(--sketchColorPrimaryExtraLight);
    --sketchColorTableHead: var(--sketchColorPrimary);
    --sketchBackgroundColorTableFoot: var(--sketchBackgroundColorTableHead);
    --sketchBorderTable: 1px solid #ebebeb;
    --sketchBackgroundColorTableHover: rgb(246 246 246);
}