: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));

    --sketchZIndex1: 100;
    --sketchZIndex2: 200;
    --sketchZIndex3: 300;
    --sketchZIndex4: 400;
    --sketchZIndex5: 500;

    --sketchZIndexLookup: var(--sketchZIndex1);

    /* kleurdefinities */
    --sketchColorError: #842029;
    --sketchColorInfo: #454647;

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

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

    --sketchColorSecondary: #ffffff;
    --sketchColorSecondaryDark: #cccccc;
    --sketchColorSecondaryExtraDark: #999999;
    --sketchColorSecondaryExtraLight: #ffffff;
    --sketchColorSecondaryLight: #ffffff;

    --sketchColorTertiary: #000000;
    --sketchColorTertiaryDark: #000000;
    --sketchColorTertiaryExtraDark: #000000;
    --sketchColorTertiaryExtraLight: #000000;
    --sketchColorTertiaryLight: #000000;
    
    --sketchColorSuccess: #0f5132;    
    --sketchColorWhite: #ffffff;    
    --sketchColorOnTopMenu: #ffffff;
    --sketchColorLink: #003366;
    --sketchColorLinkHover: #656565;
    --sketchColorText: #000000;
    --sketchColorWarning: #977404;
    --sketchColorEmtpyingField: #800000;

    --taskbar-height: 40px;

    --sketchColorBorder: var(--sketchColorNeutralDark);
    --sketchColorInputDisabled: var(--sketchColorNeutralExtraDark);
    --sketchColorLinkActive: var(--sketchColorLinkHover);
    --sketchColorHeading:var(--sketchColorPrimaryLight);
    --sketchColorNavbar: var(--sketchColorTextOnButtonPrimary);
    --sketchColorNavbarActive: var(--sketchColorTextOnButtonPrimary);
    --sketchColorPaginationButton: var(--sketchColorPrimaryExtraDark);
    --sketchColorPaginationButtonCurrent: var(--sketchColorWhite);
    --sketchColorPaginationButtonHover: var(--sketchColorPrimaryDark);
    --sketchColorPaginationNavButton: var(--sketchColorWhite);
    --sketchColorPaginationNavButtonDisabled: var(--sketchColorSecondaryDark);
    --sketchColorPaginationNavButtonHover: var(--sketchColorWhite);
    --sketchColorTableHead: var(--sketchColorPrimary);
    --sketchColorTextOnButtonPrimary: var(--sketchColorWhite);
    --sketchColorTextOnButtonPrimaryDisabled: var(--sketchColorNeutralDark);
    --sketchColorTextOnButtonPrimaryHover: var(--sketchColorWhite);
    --sketchColorTextOnButtonSecondary: var(--sketchColorPrimary);
    --sketchColorTextOnButtonSecondaryDisabled: var(--sketchColorSecondaryDark);
    --sketchColorTextOnButtonSecondaryHover: var(--sketchColorPrimaryDark);
    --sketchColorTextOnButtonTertiary: var(--sketchColorPrimary);
    --sketchColorTextOnButtonTertiaryDisabled: var(--sketchColorSecondaryDark);
    --sketchColorTextOnButtonTertiaryHover: var(--sketchColorPrimaryDark);    
    
    --sketchBackgroundColorBody: #ffffff;
    --sketchBackgroundColorButtonPrimary: var(--sketchColorPrimary);
    --sketchBackgroundColorButtonPrimaryDisabled: var(--sketchColorNeutral);
    --sketchBackgroundColorButtonPrimaryHover: var(--sketchColorPrimaryLight);
    --sketchBackgroundColorButtonSecondary: var(--sketchColorSecondary);
    --sketchBackgroundColorButtonSecondaryDisabled: var(--sketchColorSecondary);
    --sketchBackgroundColorButtonSecondaryHover: var(--sketchColorNeutral);
    --sketchBackgroundColorButtonTertiary: var(--sketchColorWhite);
    --sketchBackgroundColorButtonTertiaryDisabled: var(--sketchColorWhite);
    --sketchBackgroundColorButtonTertiaryHover: var(--sketchColorWhite);    
    --sketchBackgroundColorError: #fae0e0;
    --sketchBackgroundColorInfo: #d8e9fc;
    --sketchBackgroundColorSuccess: #bed8cc;
    --sketchBackgroundColorInputDisabled: #f6f5f5;
    --sketchBackgroundColorNavbar: var(--sketchColorPrimary);
    --sketchBackgroundColorNavbarActive: var(--sketchColorPrimaryLight);
    --sketchBackgroundColorPaginationButtonCurrent: var(--sketchColorPrimary);
    --sketchBackgroundColorPaginationButtonHover: var(--sketchColorNeutral);
    --sketchBackgroundColorPaginationNavButton: var(--sketchColorSecondaryDark);
    --sketchBackgroundColorPaginationNavButtonDisabled: var(--sketchColorWhite);
    --sketchBackgroundColorPaginationNavButtonHover: var(
        --sketchColorSecondaryExtraDark
    );
    --sketchBackgroundColorTopMenu: var(--sketchColorPrimary);
    --sketchBackgroundColorWarning: #f9f0d4;
    --sketchBackgroundColorTableHead:var(--sketchColorPrimaryExtraLight);
    --sketchBackgroundColorTableFoot: var(--sketchBackgroundColorTableHead);
    --sketchBackgroundColorTableHover: rgb(246 246 246);

    --sketchBorderButtonPrimary: .5px solid var(--sketchColorPrimary);
    --sketchBorderButtonPrimaryDisabled: .5px solid var(--sketchColorPrimaryDark);
    --sketchBorderButtonPrimaryHover: .5px solid var(--sketchColorPrimaryExtraLight);
    --sketchBorderButtonSecondary: .5px solid var(--sketchColorPrimary);
    --sketchBorderButtonSecondaryDisabled: .5px solid var(--sketchColorSecondaryDark);
    --sketchBorderButtonSecondaryHover: .5px solid var(--sketchColorPrimary);
    --sketchBorderButtonTertiary: none;
    --sketchBorderButtonTertiaryDisabled: none;
    --sketchBorderButtonTertiaryHover: 0.5px solid var(--sketchColorPrimaryDark);
    --sketchBorderInput: 1px solid var(--sketchColorSecondaryDark);
    --sketchBorderPaginationButton: 0.5px solid var(--sketchColorSecondaryExtraDark);
    --sketchBorderSearchResult: .5px solid #E5E5E5;
    --sketchBorderSection: 1px solid #dbdbdb;
    --sketchBorderTable: 1px solid #ebebeb;
    --sketchBorderTableHead: .5px solid var(--sketchColorPrimary);
    --sketchBorderTableRow: .5px solid var(--sketchColorSecondaryExtraDark);

    --sketchBorderRadius: 5px;
    --sketchBorderRadiusButtonPrimary: 5px;
    --sketchBorderRadiusButtonSecondary: 5px;
    --sketchBorderRadiusButtonTertiary: 5px;
    --sketchBorderRadiusImage: var(--sketchBorderRadius);
    --sketchBorderRadiusInput: 8px;
    --sketchBorderRadiusSection: var(--sketchBorderRadius);

    --sketchBoxShadowSearchResult: 0px 2px 8px 0px #E5E5E5;
    --sketchBoxShadowSection: 0 2px 4px rgba(0, 0, 0, 0.1);

    --sketchFontFamily: Verdana, Helvetica, sans-serif;
    --sketchFontFamilyHeading: "League Spartan", Verdana, Helvetica, sans-serif;
    --sketchFontFamilyInput: monospace;
    --sketchFontSize: 10pt;
    --sketchFontSizeBodyCopy: 10pt;
    --sketchFontSizeBodyCopyBig: 12pt;
    --sketchFontSizeBodyCopyBold: 10pt;
    --sketchFontSizeFootnote: 8pt;
    --sketchFontSizeLabel: 9pt;
    --sketchFontSizeHeading1: 2rem;
    --sketchFontSizeHeading2: 1.8rem;
    --sketchFontSizeHeading3: 1.6rem;
    --sketchFontSizeHeading4: 1.5rem;
    --sketchFontSizeHeading5: 1.4rem;
    --sketchFontSizeHeading6: 1.3rem;
    --sketchFontStyleBodyCopy: normal;
    --sketchFontStyleBodyCopyBig: normal;
    --sketchFontStyleBodyCopyBold: normal;
    --sketchFontStyleFootnote: italic;
    --sketchFontStyleLabel: normal;
    --sketchFontStyleHeading1: normal;
    --sketchFontStyleHeading2: normal;
    --sketchFontStyleHeading3: normal;
    --sketchFontStyleHeading4: normal;
    --sketchFontStyleHeading5: normal;
    --sketchFontStyleHeading6: normal;
    --sketchFontWeightBodyCopy: 400;
    --sketchFontWeightBodyCopyBig: 400;
    --sketchFontWeightBodyCopyBold: 700;
    --sketchFontWeightFootnote: 400;
    --sketchFontWeightLabel: 400;
    --sketchFontWeightHeading1: bold;
    --sketchFontWeightHeading2: bold;
    --sketchFontWeightHeading3: bold;
    --sketchFontWeightHeading4: 400;
    --sketchFontWeightHeading5: 400;
    --sketchFontWeightHeading6: 400;
    --sketchFontSizeLabel: 10pt;

    --sketchInputHeight: 22px;
    
    --sketchTextDecorationLink: none;
    
    --sketchPaddingButtonPrimary: 1px 6px;
    --sketchPaddingButtonSecondary: 1px 6px;
    --sketchPaddingButtonTertiary: 1px 6px;
    --sketchPaddingInput: 0px var(--sketchSpacing2);
    --sketchPaddingSelect: 0px var(--sketchSpacing1);
    
    --sketchSpacingTableCell: var(--sketchSpacing2) var(--sketchSpacing3);

    --navbar-height: 78px;
}