@charset "UTF-8";
/*!

stylesheet for 'blueFire', generated on Wed, 09 Jul 2025 14:15:50 +0000 -- DO NOT EDIT

*/
html {
  --wcfButtonBackground: rgba(220, 220, 221, 1);
  --wcfButtonBackground-rgb: 220 220 221;
  --wcfButtonBackgroundActive: rgba(152, 152, 152, 1);
  --wcfButtonBackgroundActive-rgb: 152 152 152;
  --wcfButtonDisabledBackground: rgba(223, 223, 223, 1);
  --wcfButtonDisabledBackground-rgb: 223 223 223;
  --wcfButtonDisabledText: rgba(165, 165, 165, 1);
  --wcfButtonDisabledText-rgb: 165 165 165;
  --wcfButtonPrimaryBackground: rgba(0, 75, 130, 1);
  --wcfButtonPrimaryBackground-rgb: 0 75 130;
  --wcfButtonPrimaryBackgroundActive: rgba(1, 67, 114, 1);
  --wcfButtonPrimaryBackgroundActive-rgb: 1 67 114;
  --wcfButtonPrimaryText: rgba(255, 255, 255, 1);
  --wcfButtonPrimaryText-rgb: 255 255 255;
  --wcfButtonPrimaryTextActive: rgba(255, 255, 255, 1);
  --wcfButtonPrimaryTextActive-rgb: 255 255 255;
  --wcfButtonText: rgba(33, 33, 33, 1);
  --wcfButtonText-rgb: 33 33 33;
  --wcfButtonTextActive: rgba(255, 255, 255, 1);
  --wcfButtonTextActive-rgb: 255 255 255;
  --wcfContentBackground: rgba(250, 250, 250, 1);
  --wcfContentBackground-rgb: 250 250 250;
  --wcfContentBorder: rgba(0, 75, 130, 1);
  --wcfContentBorder-rgb: 0 75 130;
  --wcfContentBorderInner: rgba(224, 224, 224, 1);
  --wcfContentBorderInner-rgb: 224 224 224;
  --wcfContentContainerBackground: rgba(255, 255, 255, 1);
  --wcfContentContainerBackground-rgb: 255 255 255;
  --wcfContentContainerBorder: rgba(236, 241, 247, 1);
  --wcfContentContainerBorder-rgb: 236 241 247;
  --wcfContentDimmedLink: rgba(52, 73, 94, 1);
  --wcfContentDimmedLink-rgb: 52 73 94;
  --wcfContentDimmedLinkActive: rgba(52, 73, 94, 1);
  --wcfContentDimmedLinkActive-rgb: 52 73 94;
  --wcfContentDimmedText: rgba(113, 117, 122, 1);
  --wcfContentDimmedText-rgb: 113 117 122;
  --wcfContentHeadlineBorder: rgba(238, 238, 238, 1);
  --wcfContentHeadlineBorder-rgb: 238 238 238;
  --wcfContentHeadlineLink: rgba(44, 62, 80, 1);
  --wcfContentHeadlineLink-rgb: 44 62 80;
  --wcfContentHeadlineLinkActive: rgba(44, 62, 80, 1);
  --wcfContentHeadlineLinkActive-rgb: 44 62 80;
  --wcfContentHeadlineText: rgba(44, 62, 80, 1);
  --wcfContentHeadlineText-rgb: 44 62 80;
  --wcfContentLink: rgba(80, 80, 80, 1);
  --wcfContentLink-rgb: 80 80 80;
  --wcfContentLinkActive: rgba(56, 124, 214, 1);
  --wcfContentLinkActive-rgb: 56 124 214;
  --wcfContentText: rgba(58, 58, 61, 1);
  --wcfContentText-rgb: 58 58 61;
  --wcfDropdownBackground: rgba(255, 255, 255, 1);
  --wcfDropdownBackground-rgb: 255 255 255;
  --wcfDropdownBackgroundActive: rgba(238, 238, 238, 1);
  --wcfDropdownBackgroundActive-rgb: 238 238 238;
  --wcfDropdownBorderInner: rgba(238, 238, 238, 1);
  --wcfDropdownBorderInner-rgb: 238 238 238;
  --wcfDropdownLink: rgba(33, 33, 33, 1);
  --wcfDropdownLink-rgb: 33 33 33;
  --wcfDropdownLinkActive: rgba(33, 33, 33, 1);
  --wcfDropdownLinkActive-rgb: 33 33 33;
  --wcfDropdownText: rgba(33, 33, 33, 1);
  --wcfDropdownText-rgb: 33 33 33;
  --wcfEditorButtonBackground: rgba(0, 75, 130, 1);
  --wcfEditorButtonBackground-rgb: 0 75 130;
  --wcfEditorButtonBackgroundActive: rgba(1, 67, 114, 1);
  --wcfEditorButtonBackgroundActive-rgb: 1 67 114;
  --wcfEditorButtonText: rgba(255, 255, 255, 1);
  --wcfEditorButtonText-rgb: 255 255 255;
  --wcfEditorButtonTextActive: rgba(255, 255, 255, 1);
  --wcfEditorButtonTextActive-rgb: 255 255 255;
  --wcfEditorButtonTextDisabled: rgba(165, 165, 165, 1);
  --wcfEditorButtonTextDisabled-rgb: 165 165 165;
  --wcfEditorTableBorder: rgba(221, 221, 221, 1);
  --wcfEditorTableBorder-rgb: 221 221 221;
  --wcfFontLineHeight: 1.48;
  --wcfFontSizeDefault: 15px;
  --wcfFontSizeHeadline: 18px;
  --wcfFontSizeSection: 23px;
  --wcfFontSizeSmall: 12px;
  --wcfFontSizeTitle: 28px;
  --wcfFooterBackground: rgba(29, 40, 49, 1);
  --wcfFooterBackground-rgb: 29 40 49;
  --wcfFooterBoxBackground: rgba(236, 236, 236, 1);
  --wcfFooterBoxBackground-rgb: 236 236 236;
  --wcfFooterBoxHeadlineLink: rgba(44, 62, 80, 1);
  --wcfFooterBoxHeadlineLink-rgb: 44 62 80;
  --wcfFooterBoxHeadlineLinkActive: rgba(44, 62, 80, 1);
  --wcfFooterBoxHeadlineLinkActive-rgb: 44 62 80;
  --wcfFooterBoxHeadlineText: rgba(44, 62, 80, 1);
  --wcfFooterBoxHeadlineText-rgb: 44 62 80;
  --wcfFooterBoxLink: rgba(45, 98, 168, 1);
  --wcfFooterBoxLink-rgb: 45 98 168;
  --wcfFooterBoxLinkActive: rgba(56, 124, 214, 1);
  --wcfFooterBoxLinkActive-rgb: 56 124 214;
  --wcfFooterBoxText: rgba(44, 62, 80, 1);
  --wcfFooterBoxText-rgb: 44 62 80;
  --wcfFooterCopyrightBackground: rgba(25, 34, 42, 1);
  --wcfFooterCopyrightBackground-rgb: 25 34 42;
  --wcfFooterCopyrightLink: rgba(217, 220, 222, 1);
  --wcfFooterCopyrightLink-rgb: 217 220 222;
  --wcfFooterCopyrightLinkActive: rgba(255, 255, 255, 1);
  --wcfFooterCopyrightLinkActive-rgb: 255 255 255;
  --wcfFooterCopyrightText: rgba(217, 220, 222, 1);
  --wcfFooterCopyrightText-rgb: 217 220 222;
  --wcfFooterHeadlineLink: rgba(255, 255, 255, 1);
  --wcfFooterHeadlineLink-rgb: 255 255 255;
  --wcfFooterHeadlineLinkActive: rgba(255, 255, 255, 1);
  --wcfFooterHeadlineLinkActive-rgb: 255 255 255;
  --wcfFooterHeadlineText: rgba(233, 235, 236, 1);
  --wcfFooterHeadlineText-rgb: 233 235 236;
  --wcfFooterLink: rgba(255, 255, 255, 1);
  --wcfFooterLink-rgb: 255 255 255;
  --wcfFooterLinkActive: rgba(255, 255, 255, 1);
  --wcfFooterLinkActive-rgb: 255 255 255;
  --wcfFooterText: rgba(217, 220, 222, 1);
  --wcfFooterText-rgb: 217 220 222;
  --wcfHeaderBackground: rgba(25, 34, 42, 1);
  --wcfHeaderBackground-rgb: 25 34 42;
  --wcfHeaderText: rgba(255, 255, 255, 1);
  --wcfHeaderText-rgb: 255 255 255;
  --wcfHeaderLink: rgba(255, 255, 255, 1);
  --wcfHeaderLink-rgb: 255 255 255;
  --wcfHeaderLinkActive: rgba(255, 255, 255, 1);
  --wcfHeaderLinkActive-rgb: 255 255 255;
  --wcfHeaderMenuBackground: rgba(0, 75, 130, 1);
  --wcfHeaderMenuBackground-rgb: 0 75 130;
  --wcfHeaderMenuLinkBackground: rgba(0, 114, 185, 1);
  --wcfHeaderMenuLinkBackground-rgb: 0 114 185;
  --wcfHeaderMenuLinkBackgroundActive: rgba(1, 67, 114, 1);
  --wcfHeaderMenuLinkBackgroundActive-rgb: 1 67 114;
  --wcfHeaderMenuLink: rgba(255, 255, 255, 1);
  --wcfHeaderMenuLink-rgb: 255 255 255;
  --wcfHeaderMenuLinkActive: rgba(255, 255, 255, 1);
  --wcfHeaderMenuLinkActive-rgb: 255 255 255;
  --wcfHeaderMenuDropdownBackground: rgba(0, 114, 185, 1);
  --wcfHeaderMenuDropdownBackground-rgb: 0 114 185;
  --wcfHeaderMenuDropdownBackgroundActive: rgba(0, 75, 130, 1);
  --wcfHeaderMenuDropdownBackgroundActive-rgb: 0 75 130;
  --wcfHeaderMenuDropdownLink: rgba(255, 255, 255, 1);
  --wcfHeaderMenuDropdownLink-rgb: 255 255 255;
  --wcfHeaderMenuDropdownLinkActive: rgba(255, 255, 255, 1);
  --wcfHeaderMenuDropdownLinkActive-rgb: 255 255 255;
  --wcfHeaderSearchBoxBackground: rgba(59, 60, 60, 1);
  --wcfHeaderSearchBoxBackground-rgb: 59 60 60;
  --wcfHeaderSearchBoxBackgroundActive: rgba(70, 72, 72, 1);
  --wcfHeaderSearchBoxBackgroundActive-rgb: 70 72 72;
  --wcfHeaderSearchBoxText: rgba(255, 255, 255, 1);
  --wcfHeaderSearchBoxText-rgb: 255 255 255;
  --wcfHeaderSearchBoxTextActive: rgba(255, 255, 255, 1);
  --wcfHeaderSearchBoxTextActive-rgb: 255 255 255;
  --wcfHeaderSearchBoxPlaceholder: rgba(207, 207, 207, 1);
  --wcfHeaderSearchBoxPlaceholder-rgb: 207 207 207;
  --wcfHeaderSearchBoxPlaceholderActive: rgba(207, 207, 207, 1);
  --wcfHeaderSearchBoxPlaceholderActive-rgb: 207 207 207;
  --wcfInputBackground: rgba(241, 246, 251, 1);
  --wcfInputBackground-rgb: 241 246 251;
  --wcfInputBackgroundActive: rgba(241, 246, 251, 1);
  --wcfInputBackgroundActive-rgb: 241 246 251;
  --wcfInputBorder: rgba(176, 200, 224, 1);
  --wcfInputBorder-rgb: 176 200 224;
  --wcfInputBorderActive: rgba(41, 128, 185, 1);
  --wcfInputBorderActive-rgb: 41 128 185;
  --wcfInputDisabledBackground: rgba(245, 245, 245, 1);
  --wcfInputDisabledBackground-rgb: 245 245 245;
  --wcfInputDisabledBorder: rgba(174, 176, 179, 1);
  --wcfInputDisabledBorder-rgb: 174 176 179;
  --wcfInputDisabledText: rgba(125, 130, 100, 1);
  --wcfInputDisabledText-rgb: 125 130 100;
  --wcfInputLabel: rgba(59, 109, 169, 1);
  --wcfInputLabel-rgb: 59 109 169;
  --wcfInputText: rgba(58, 58, 61, 1);
  --wcfInputText-rgb: 58 58 61;
  --wcfInputTextActive: rgba(58, 58, 61, 1);
  --wcfInputTextActive-rgb: 58 58 61;
  --wcfInputPlaceholder: rgba(169, 169, 169, 1);
  --wcfInputPlaceholder-rgb: 169 169 169;
  --wcfInputPlaceholderActive: rgba(204, 204, 204, 1);
  --wcfInputPlaceholderActive-rgb: 204 204 204;
  --wcfLayoutFixedWidth: 1200px;
  --wcfLayoutMaxWidth: 2800px;
  --wcfLayoutMinWidth: 1000px;
  --wcfNavigationBackground: rgba(237, 237, 237, 1);
  --wcfNavigationBackground-rgb: 237 237 237;
  --wcfNavigationLink: rgba(58, 58, 61, 1);
  --wcfNavigationLink-rgb: 58 58 61;
  --wcfNavigationLinkActive: rgba(58, 58, 61, 1);
  --wcfNavigationLinkActive-rgb: 58 58 61;
  --wcfNavigationText: rgba(170, 170, 170, 1);
  --wcfNavigationText-rgb: 170 170 170;
  --wcfPageThemeColor: rgba(25, 34, 42, 1);
  --wcfPageThemeColor-rgb: 25 34 42;
  --wcfSidebarBackground: rgba(236, 241, 247, 1);
  --wcfSidebarBackground-rgb: 236 241 247;
  --wcfSidebarDimmedLink: rgba(44, 62, 80, 1);
  --wcfSidebarDimmedLink-rgb: 44 62 80;
  --wcfSidebarDimmedLinkActive: rgba(44, 62, 80, 1);
  --wcfSidebarDimmedLinkActive-rgb: 44 62 80;
  --wcfSidebarDimmedText: rgba(127, 140, 141, 1);
  --wcfSidebarDimmedText-rgb: 127 140 141;
  --wcfSidebarHeadlineLink: rgba(44, 62, 80, 1);
  --wcfSidebarHeadlineLink-rgb: 44 62 80;
  --wcfSidebarHeadlineLinkActive: rgba(44, 62, 80, 1);
  --wcfSidebarHeadlineLinkActive-rgb: 44 62 80;
  --wcfSidebarHeadlineText: rgba(44, 62, 80, 1);
  --wcfSidebarHeadlineText-rgb: 44 62 80;
  --wcfSidebarLink: rgba(38, 113, 166, 1);
  --wcfSidebarLink-rgb: 38 113 166;
  --wcfSidebarLinkActive: rgba(22, 81, 124, 1);
  --wcfSidebarLinkActive-rgb: 22 81 124;
  --wcfSidebarText: rgba(58, 58, 61, 1);
  --wcfSidebarText-rgb: 58 58 61;
  --wcfStatusErrorBackground: rgba(242, 222, 222, 1);
  --wcfStatusErrorBackground-rgb: 242 222 222;
  --wcfStatusErrorBorder: rgba(235, 204, 204, 1);
  --wcfStatusErrorBorder-rgb: 235 204 204;
  --wcfStatusErrorLink: rgba(132, 53, 52, 1);
  --wcfStatusErrorLink-rgb: 132 53 52;
  --wcfStatusErrorLinkActive: rgba(132, 53, 52, 1);
  --wcfStatusErrorLinkActive-rgb: 132 53 52;
  --wcfStatusErrorText: rgba(169, 68, 66, 1);
  --wcfStatusErrorText-rgb: 169 68 66;
  --wcfStatusInfoBackground: rgba(217, 237, 247, 1);
  --wcfStatusInfoBackground-rgb: 217 237 247;
  --wcfStatusInfoBorder: rgba(188, 223, 241, 1);
  --wcfStatusInfoBorder-rgb: 188 223 241;
  --wcfStatusInfoLink: rgba(36, 82, 105, 1);
  --wcfStatusInfoLink-rgb: 36 82 105;
  --wcfStatusInfoLinkActive: rgba(36, 82, 105, 1);
  --wcfStatusInfoLinkActive-rgb: 36 82 105;
  --wcfStatusInfoText: rgba(49, 112, 143, 1);
  --wcfStatusInfoText-rgb: 49 112 143;
  --wcfStatusSuccessBackground: rgba(223, 240, 216, 1);
  --wcfStatusSuccessBackground-rgb: 223 240 216;
  --wcfStatusSuccessBorder: rgba(208, 233, 198, 1);
  --wcfStatusSuccessBorder-rgb: 208 233 198;
  --wcfStatusSuccessLink: rgba(43, 84, 44, 1);
  --wcfStatusSuccessLink-rgb: 43 84 44;
  --wcfStatusSuccessLinkActive: rgba(43, 84, 44, 1);
  --wcfStatusSuccessLinkActive-rgb: 43 84 44;
  --wcfStatusSuccessText: rgba(60, 118, 61, 1);
  --wcfStatusSuccessText-rgb: 60 118 61;
  --wcfStatusWarningBackground: rgba(252, 248, 227, 1);
  --wcfStatusWarningBackground-rgb: 252 248 227;
  --wcfStatusWarningBorder: rgba(250, 242, 204, 1);
  --wcfStatusWarningBorder-rgb: 250 242 204;
  --wcfStatusWarningLink: rgba(102, 81, 44, 1);
  --wcfStatusWarningLink-rgb: 102 81 44;
  --wcfStatusWarningLinkActive: rgba(102, 81, 44, 1);
  --wcfStatusWarningLinkActive-rgb: 102 81 44;
  --wcfStatusWarningText: rgba(138, 109, 59, 1);
  --wcfStatusWarningText-rgb: 138 109 59;
  --wcfTabularBoxBackgroundActive: rgba(242, 242, 242, 1);
  --wcfTabularBoxBackgroundActive-rgb: 242 242 242;
  --wcfTabularBoxBorderInner: rgba(238, 238, 238, 1);
  --wcfTabularBoxBorderInner-rgb: 238 238 238;
  --wcfTabularBoxHeadline: rgba(0, 75, 130, 1);
  --wcfTabularBoxHeadline-rgb: 0 75 130;
  --wcfTabularBoxHeadlineActive: rgba(0, 114, 185, 1);
  --wcfTabularBoxHeadlineActive-rgb: 0 114 185;
  --wcfTextShadowDark: rgba(0, 0, 0, .8);
  --wcfTextShadowDark-rgb: 0 0 0;
  --wcfTextShadowLight: rgba(255, 255, 255, .8);
  --wcfTextShadowLight-rgb: 255 255 255;
  --wcfTooltipBackground: rgba(0, 0, 0, .8);
  --wcfTooltipBackground-rgb: 0 0 0;
  --wcfTooltipText: rgba(255, 255, 255, 1);
  --wcfTooltipText-rgb: 255 255 255;
  --wcfUserMenuBackground: rgba(255, 255, 255, 1);
  --wcfUserMenuBackground-rgb: 255 255 255;
  --wcfUserMenuBackgroundActive: rgba(239, 239, 239, 1);
  --wcfUserMenuBackgroundActive-rgb: 239 239 239;
  --wcfUserMenuText: rgba(58, 58, 61, 1);
  --wcfUserMenuText-rgb: 58 58 61;
  --wcfUserMenuTextActive: rgba(58, 58, 61, 1);
  --wcfUserMenuTextActive-rgb: 58 58 61;
  --wcfUserMenuTextDimmed: rgba(108, 108, 108, 1);
  --wcfUserMenuTextDimmed-rgb: 108 108 108;
  --wcfUserMenuIndicator: rgba(0, 75, 130, 1);
  --wcfUserMenuIndicator-rgb: 0 75 130;
  --wcfUserMenuBorder: rgba(221, 221, 221, 1);
  --wcfUserMenuBorder-rgb: 221 221 221;
  --wcfSidebarBorder: rgba(236, 241, 247, 0);
  --wcfSidebarBorder-rgb: 236 241 247;
  --wcfHeaderMenuDropdownBorder: rgba(0, 114, 185, 1);
  --wcfHeaderMenuDropdownBorder-rgb: 0 114 185;
  --wcfFontFamily: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", Arial, sans-serif;
  --wcfFontFamilyMonospace: ui-monospace, Menlo, Monaco, "Cascadia Mono",
        "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
        "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  --wcfBorderRadius: 4px;
  --wcfBorderRadiusContainer: 8px;
  --wcfBoxShadow: rgb(0 0 0 / 20%) 0 12px 28px 0, rgb(0 0 0 / 10%) 0 2px 4px 0;
  --wcfBoxShadowCard: rgb(0 0 0 / 10%) 0 12px 28px 0, rgb(0 0 0 / 5%) 0 2px 4px 0;
}
html[data-color-scheme="dark"] {
  --wcfButtonBackground: rgba(61, 61, 61, 1);
  --wcfButtonBackground-rgb: 61 61 61;
  --wcfButtonBackgroundActive: rgba(48, 48, 48, 1);
  --wcfButtonBackgroundActive-rgb: 48 48 48;
  --wcfButtonDisabledBackground: rgba(38, 39, 42, 1);
  --wcfButtonDisabledBackground-rgb: 38 39 42;
  --wcfButtonDisabledText: rgba(112, 115, 118, 1);
  --wcfButtonDisabledText-rgb: 112 115 118;
  --wcfButtonPrimaryBackground: rgba(0, 75, 130, 1);
  --wcfButtonPrimaryBackground-rgb: 0 75 130;
  --wcfButtonPrimaryBackgroundActive: rgba(1, 67, 114, 1);
  --wcfButtonPrimaryBackgroundActive-rgb: 1 67 114;
  --wcfButtonPrimaryText: rgba(231, 236, 245, 1);
  --wcfButtonPrimaryText-rgb: 231 236 245;
  --wcfButtonPrimaryTextActive: rgba(231, 236, 245, 1);
  --wcfButtonPrimaryTextActive-rgb: 231 236 245;
  --wcfButtonText: rgba(230, 231, 234, 1);
  --wcfButtonText-rgb: 230 231 234;
  --wcfButtonTextActive: rgba(230, 231, 234, 1);
  --wcfButtonTextActive-rgb: 230 231 234;
  --wcfContentBackground: rgba(26, 29, 33, 1);
  --wcfContentBackground-rgb: 26 29 33;
  --wcfContentBorder: rgba(0, 75, 130, 1);
  --wcfContentBorder-rgb: 0 75 130;
  --wcfContentBorderInner: rgba(54, 55, 59, 1);
  --wcfContentBorderInner-rgb: 54 55 59;
  --wcfContentContainerBackground: rgba(34, 37, 41, 1);
  --wcfContentContainerBackground-rgb: 34 37 41;
  --wcfContentContainerBorder: rgba(54, 55, 59, 1);
  --wcfContentContainerBorder-rgb: 54 55 59;
  --wcfContentDimmedLink: rgba(52, 73, 94, 1);
  --wcfContentDimmedLink-rgb: 52 73 94;
  --wcfContentDimmedLinkActive: rgba(52, 73, 94, 1);
  --wcfContentDimmedLinkActive-rgb: 52 73 94;
  --wcfContentDimmedText: rgba(138, 140, 143, 1);
  --wcfContentDimmedText-rgb: 138 140 143;
  --wcfContentHeadlineBorder: rgba(54, 55, 59, 1);
  --wcfContentHeadlineBorder-rgb: 54 55 59;
  --wcfContentHeadlineLink: rgba(209, 210, 211, 1);
  --wcfContentHeadlineLink-rgb: 209 210 211;
  --wcfContentHeadlineLinkActive: rgba(158, 158, 158, 1);
  --wcfContentHeadlineLinkActive-rgb: 158 158 158;
  --wcfContentHeadlineText: rgba(209, 210, 211, 1);
  --wcfContentHeadlineText-rgb: 209 210 211;
  --wcfContentLink: rgba(255, 255, 255, 1);
  --wcfContentLink-rgb: 255 255 255;
  --wcfContentLinkActive: rgba(56, 124, 214, 1);
  --wcfContentLinkActive-rgb: 56 124 214;
  --wcfContentText: rgba(209, 210, 211, 1);
  --wcfContentText-rgb: 209 210 211;
  --wcfDropdownBackground: rgba(34, 37, 41, 1);
  --wcfDropdownBackground-rgb: 34 37 41;
  --wcfDropdownBackgroundActive: rgba(44, 49, 59, 1);
  --wcfDropdownBackgroundActive-rgb: 44 49 59;
  --wcfDropdownBorderInner: rgba(54, 55, 59, 1);
  --wcfDropdownBorderInner-rgb: 54 55 59;
  --wcfDropdownLink: rgba(209, 210, 211, 1);
  --wcfDropdownLink-rgb: 209 210 211;
  --wcfDropdownLinkActive: rgba(239, 239, 239, 1);
  --wcfDropdownLinkActive-rgb: 239 239 239;
  --wcfDropdownText: rgba(209, 210, 211, 1);
  --wcfDropdownText-rgb: 209 210 211;
  --wcfEditorButtonBackground: rgba(47, 57, 76, 1);
  --wcfEditorButtonBackground-rgb: 47 57 76;
  --wcfEditorButtonBackgroundActive: rgba(37, 45, 60, 1);
  --wcfEditorButtonBackgroundActive-rgb: 37 45 60;
  --wcfEditorButtonText: rgba(230, 231, 234, 1);
  --wcfEditorButtonText-rgb: 230 231 234;
  --wcfEditorButtonTextActive: rgba(230, 231, 234, 1);
  --wcfEditorButtonTextActive-rgb: 230 231 234;
  --wcfEditorButtonTextDisabled: rgba(118, 125, 137, 1);
  --wcfEditorButtonTextDisabled-rgb: 118 125 137;
  --wcfEditorTableBorder: rgba(221, 221, 221, 1);
  --wcfEditorTableBorder-rgb: 221 221 221;
  --wcfFooterBackground: rgba(29, 40, 49, 1);
  --wcfFooterBackground-rgb: 29 40 49;
  --wcfFooterBoxBackground: rgba(26, 34, 45, 1);
  --wcfFooterBoxBackground-rgb: 26 34 45;
  --wcfFooterBoxHeadlineLink: rgba(209, 210, 211, 1);
  --wcfFooterBoxHeadlineLink-rgb: 209 210 211;
  --wcfFooterBoxHeadlineLinkActive: rgba(255, 255, 255, 1);
  --wcfFooterBoxHeadlineLinkActive-rgb: 255 255 255;
  --wcfFooterBoxHeadlineText: rgba(209, 210, 211, 1);
  --wcfFooterBoxHeadlineText-rgb: 209 210 211;
  --wcfFooterBoxLink: rgba(38, 113, 166, 1);
  --wcfFooterBoxLink-rgb: 38 113 166;
  --wcfFooterBoxLinkActive: rgba(22, 81, 124, 1);
  --wcfFooterBoxLinkActive-rgb: 22 81 124;
  --wcfFooterBoxText: rgba(158, 158, 158, 1);
  --wcfFooterBoxText-rgb: 158 158 158;
  --wcfFooterCopyrightBackground: rgba(25, 34, 42, 1);
  --wcfFooterCopyrightBackground-rgb: 25 34 42;
  --wcfFooterCopyrightLink: rgba(182, 184, 185, 1);
  --wcfFooterCopyrightLink-rgb: 182 184 185;
  --wcfFooterCopyrightLinkActive: rgba(217, 220, 222, 1);
  --wcfFooterCopyrightLinkActive-rgb: 217 220 222;
  --wcfFooterCopyrightText: rgba(182, 184, 185, 1);
  --wcfFooterCopyrightText-rgb: 182 184 185;
  --wcfFooterHeadlineLink: rgba(209, 210, 211, 1);
  --wcfFooterHeadlineLink-rgb: 209 210 211;
  --wcfFooterHeadlineLinkActive: rgba(255, 255, 255, 1);
  --wcfFooterHeadlineLinkActive-rgb: 255 255 255;
  --wcfFooterHeadlineText: rgba(209, 210, 211, 1);
  --wcfFooterHeadlineText-rgb: 209 210 211;
  --wcfFooterLink: rgba(255, 255, 255, 1);
  --wcfFooterLink-rgb: 255 255 255;
  --wcfFooterLinkActive: rgba(255, 255, 255, 1);
  --wcfFooterLinkActive-rgb: 255 255 255;
  --wcfFooterText: rgba(158, 158, 158, 1);
  --wcfFooterText-rgb: 158 158 158;
  --wcfHeaderBackground: rgba(25, 34, 42, 1);
  --wcfHeaderBackground-rgb: 25 34 42;
  --wcfHeaderText: rgba(209, 210, 211, 1);
  --wcfHeaderText-rgb: 209 210 211;
  --wcfHeaderLink: rgba(209, 210, 211, 1);
  --wcfHeaderLink-rgb: 209 210 211;
  --wcfHeaderLinkActive: rgba(255, 255, 255, 1);
  --wcfHeaderLinkActive-rgb: 255 255 255;
  --wcfHeaderMenuBackground: rgba(0, 75, 130, 1);
  --wcfHeaderMenuBackground-rgb: 0 75 130;
  --wcfHeaderMenuLinkBackground: rgba(0, 114, 185, 1);
  --wcfHeaderMenuLinkBackground-rgb: 0 114 185;
  --wcfHeaderMenuLinkBackgroundActive: rgba(1, 67, 114, 1);
  --wcfHeaderMenuLinkBackgroundActive-rgb: 1 67 114;
  --wcfHeaderMenuLink: rgba(255, 255, 255, 1);
  --wcfHeaderMenuLink-rgb: 255 255 255;
  --wcfHeaderMenuLinkActive: rgba(255, 255, 255, 1);
  --wcfHeaderMenuLinkActive-rgb: 255 255 255;
  --wcfHeaderMenuDropdownBackground: rgba(0, 114, 185, 1);
  --wcfHeaderMenuDropdownBackground-rgb: 0 114 185;
  --wcfHeaderMenuDropdownBackgroundActive: rgba(0, 75, 130, 1);
  --wcfHeaderMenuDropdownBackgroundActive-rgb: 0 75 130;
  --wcfHeaderMenuDropdownLink: rgba(224, 227, 230, 1);
  --wcfHeaderMenuDropdownLink-rgb: 224 227 230;
  --wcfHeaderMenuDropdownLinkActive: rgba(229, 231, 234, 1);
  --wcfHeaderMenuDropdownLinkActive-rgb: 229 231 234;
  --wcfHeaderSearchBoxBackground: rgba(59, 60, 60, 1);
  --wcfHeaderSearchBoxBackground-rgb: 59 60 60;
  --wcfHeaderSearchBoxBackgroundActive: rgba(70, 72, 72, 1);
  --wcfHeaderSearchBoxBackgroundActive-rgb: 70 72 72;
  --wcfHeaderSearchBoxText: rgba(255, 255, 255, 1);
  --wcfHeaderSearchBoxText-rgb: 255 255 255;
  --wcfHeaderSearchBoxTextActive: rgba(255, 255, 255, 1);
  --wcfHeaderSearchBoxTextActive-rgb: 255 255 255;
  --wcfHeaderSearchBoxPlaceholder: rgba(207, 207, 207, 1);
  --wcfHeaderSearchBoxPlaceholder-rgb: 207 207 207;
  --wcfHeaderSearchBoxPlaceholderActive: rgba(207, 207, 207, 1);
  --wcfHeaderSearchBoxPlaceholderActive-rgb: 207 207 207;
  --wcfInputBackground: rgba(26, 29, 33, 1);
  --wcfInputBackground-rgb: 26 29 33;
  --wcfInputBackgroundActive: rgba(26, 29, 33, 1);
  --wcfInputBackgroundActive-rgb: 26 29 33;
  --wcfInputBorder: rgba(87, 88, 86, 1);
  --wcfInputBorder-rgb: 87 88 86;
  --wcfInputBorderActive: rgba(173, 174, 175, 1);
  --wcfInputBorderActive-rgb: 173 174 175;
  --wcfInputDisabledBackground: rgba(34, 37, 41, 1);
  --wcfInputDisabledBackground-rgb: 34 37 41;
  --wcfInputDisabledBorder: rgba(56, 56, 57, 1);
  --wcfInputDisabledBorder-rgb: 56 56 57;
  --wcfInputDisabledText: rgba(118, 119, 121, 1);
  --wcfInputDisabledText-rgb: 118 119 121;
  --wcfInputLabel: rgba(144, 164, 174, 1);
  --wcfInputLabel-rgb: 144 164 174;
  --wcfInputText: rgba(209, 210, 211, 1);
  --wcfInputText-rgb: 209 210 211;
  --wcfInputTextActive: rgba(209, 210, 211, 1);
  --wcfInputTextActive-rgb: 209 210 211;
  --wcfInputPlaceholder: rgba(122, 123, 125, 1);
  --wcfInputPlaceholder-rgb: 122 123 125;
  --wcfInputPlaceholderActive: rgba(122, 123, 125, 1);
  --wcfInputPlaceholderActive-rgb: 122 123 125;
  --wcfNavigationBackground: rgba(31, 41, 51, 1);
  --wcfNavigationBackground-rgb: 31 41 51;
  --wcfNavigationLink: rgba(179, 182, 185, 1);
  --wcfNavigationLink-rgb: 179 182 185;
  --wcfNavigationLinkActive: rgba(205, 207, 208, 1);
  --wcfNavigationLinkActive-rgb: 205 207 208;
  --wcfNavigationText: rgba(179, 182, 185, 1);
  --wcfNavigationText-rgb: 179 182 185;
  --wcfPageThemeColor: rgba(25, 34, 42, 1);
  --wcfPageThemeColor-rgb: 25 34 42;
  --wcfSidebarBackground: rgba(25, 34, 42, 1);
  --wcfSidebarBackground-rgb: 25 34 42;
  --wcfSidebarDimmedLink: rgba(80, 113, 145, 1);
  --wcfSidebarDimmedLink-rgb: 80 113 145;
  --wcfSidebarDimmedLinkActive: rgba(104, 139, 172, 1);
  --wcfSidebarDimmedLinkActive-rgb: 104 139 172;
  --wcfSidebarDimmedText: rgba(135, 135, 135, 1);
  --wcfSidebarDimmedText-rgb: 135 135 135;
  --wcfSidebarHeadlineLink: rgba(209, 210, 211, 1);
  --wcfSidebarHeadlineLink-rgb: 209 210 211;
  --wcfSidebarHeadlineLinkActive: rgba(158, 158, 158, 1);
  --wcfSidebarHeadlineLinkActive-rgb: 158 158 158;
  --wcfSidebarHeadlineText: rgba(209, 210, 211, 1);
  --wcfSidebarHeadlineText-rgb: 209 210 211;
  --wcfSidebarLink: rgba(38, 113, 166, 1);
  --wcfSidebarLink-rgb: 38 113 166;
  --wcfSidebarLinkActive: rgba(22, 81, 124, 1);
  --wcfSidebarLinkActive-rgb: 22 81 124;
  --wcfSidebarText: rgba(209, 210, 211, 1);
  --wcfSidebarText-rgb: 209 210 211;
  --wcfStatusErrorBackground: rgba(116, 38, 30, 1);
  --wcfStatusErrorBackground-rgb: 116 38 30;
  --wcfStatusErrorBorder: rgba(139, 46, 36, 1);
  --wcfStatusErrorBorder-rgb: 139 46 36;
  --wcfStatusErrorLink: rgba(201, 170, 165, 1);
  --wcfStatusErrorLink-rgb: 201 170 165;
  --wcfStatusErrorLinkActive: rgba(201, 170, 165, 1);
  --wcfStatusErrorLinkActive-rgb: 201 170 165;
  --wcfStatusErrorText: rgba(201, 170, 165, 1);
  --wcfStatusErrorText-rgb: 201 170 165;
  --wcfStatusInfoBackground: rgba(12, 81, 92, 1);
  --wcfStatusInfoBackground-rgb: 12 81 92;
  --wcfStatusInfoBorder: rgba(14, 97, 110, 1);
  --wcfStatusInfoBorder-rgb: 14 97 110;
  --wcfStatusInfoLink: rgba(171, 191, 196, 1);
  --wcfStatusInfoLink-rgb: 171 191 196;
  --wcfStatusInfoLinkActive: rgba(171, 191, 196, 1);
  --wcfStatusInfoLinkActive-rgb: 171 191 196;
  --wcfStatusInfoText: rgba(171, 191, 196, 1);
  --wcfStatusInfoText-rgb: 171 191 196;
  --wcfStatusSuccessBackground: rgba(0, 94, 70, 1);
  --wcfStatusSuccessBackground-rgb: 0 94 70;
  --wcfStatusSuccessBorder: rgba(0, 113, 84, 1);
  --wcfStatusSuccessBorder-rgb: 0 113 84;
  --wcfStatusSuccessLink: rgba(180, 203, 195, 1);
  --wcfStatusSuccessLink-rgb: 180 203 195;
  --wcfStatusSuccessLinkActive: rgba(180, 203, 195, 1);
  --wcfStatusSuccessLinkActive-rgb: 180 203 195;
  --wcfStatusSuccessText: rgba(180, 203, 195, 1);
  --wcfStatusSuccessText-rgb: 180 203 195;
  --wcfStatusWarningBackground: rgba(122, 78, 9, 1);
  --wcfStatusWarningBackground-rgb: 122 78 9;
  --wcfStatusWarningBorder: rgba(146, 94, 11, 1);
  --wcfStatusWarningBorder-rgb: 146 94 11;
  --wcfStatusWarningLink: rgba(221, 209, 194, 1);
  --wcfStatusWarningLink-rgb: 221 209 194;
  --wcfStatusWarningLinkActive: rgba(221, 209, 194, 1);
  --wcfStatusWarningLinkActive-rgb: 221 209 194;
  --wcfStatusWarningText: rgba(221, 209, 194, 1);
  --wcfStatusWarningText-rgb: 221 209 194;
  --wcfTabularBoxBackgroundActive: rgba(30, 33, 36, 1);
  --wcfTabularBoxBackgroundActive-rgb: 30 33 36;
  --wcfTabularBoxBorderInner: rgba(54, 55, 59, 1);
  --wcfTabularBoxBorderInner-rgb: 54 55 59;
  --wcfTabularBoxHeadline: rgba(0, 119, 204, 1);
  --wcfTabularBoxHeadline-rgb: 0 119 204;
  --wcfTabularBoxHeadlineActive: rgba(0, 114, 185, 1);
  --wcfTabularBoxHeadlineActive-rgb: 0 114 185;
  --wcfTextShadowDark: rgba(0, 0, 0, .8);
  --wcfTextShadowDark-rgb: 0 0 0;
  --wcfTextShadowLight: rgba(255, 255, 255, .8);
  --wcfTextShadowLight-rgb: 255 255 255;
  --wcfTooltipBackground: rgba(0, 0, 0, .8);
  --wcfTooltipBackground-rgb: 0 0 0;
  --wcfTooltipText: rgba(255, 255, 255, 1);
  --wcfTooltipText-rgb: 255 255 255;
  --wcfUserMenuBackground: rgba(34, 37, 41, 1);
  --wcfUserMenuBackground-rgb: 34 37 41;
  --wcfUserMenuBackgroundActive: rgba(44, 49, 59, 1);
  --wcfUserMenuBackgroundActive-rgb: 44 49 59;
  --wcfUserMenuText: rgba(209, 210, 211, 1);
  --wcfUserMenuText-rgb: 209 210 211;
  --wcfUserMenuTextActive: rgba(239, 239, 239, 1);
  --wcfUserMenuTextActive-rgb: 239 239 239;
  --wcfUserMenuTextDimmed: rgba(149, 152, 156, 1);
  --wcfUserMenuTextDimmed-rgb: 149 152 156;
  --wcfUserMenuIndicator: rgba(49, 138, 220, 1);
  --wcfUserMenuIndicator-rgb: 49 138 220;
  --wcfUserMenuBorder: rgba(54, 55, 59, 1);
  --wcfUserMenuBorder-rgb: 54 55 59;
  --wcfSidebarBorder: rgba(57, 65, 77, 1);
  --wcfSidebarBorder-rgb: 57 65 77;
  --wcfHeaderMenuDropdownBorder: rgba(0, 114, 185, 1);
  --wcfHeaderMenuDropdownBorder-rgb: 0 114 185;
}
/**
 * Parts taken from
 * http://meyerweb.com/eric/tools/css/reset/ 
 * v2.0 | 20110126
 * License: none (public domain)
 * modifyed to meet the needs of WoltLab
 */
html, body, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, big, cite, code, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, canvas, embed, figure, figcaption, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}
img {
  border: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
  content: "";
  content: none;
}
address {
  font-style: normal;
}
/**
 * sane box-sizing value for all elements
 * 
 * https://css-tricks.com/box-sizing/
 */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
  min-width: 0;
}
details * {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
[hidden] {
  display: none !important;
}
/* shortcuts */
.clearfix::before, .clearfix::after {
  display: table;
  content: "";
}
.clearfix::after {
  clear: both;
}
/** @deprecated 3.0 - please use the native properties directly */
/** /deprecated */
/* See https://github.com/saadeghi/browser-hack-sass-mixins */
/*--- Only Safari ≥ 9 (Non iOS) ---*/
/* smartphone */
/* tablet (portrait) */
/* smartphone + tablet (portrait) */
/* tablet (portrait) + tablet (landscape) + desktop */
/* tablet (portrait) + tablet (landscape) */
/* tablet (landscape) */
/* smartphone + tablet (portrait) + tablet (landscape) */
/* tablet (landscape) + desktop */
/* desktop */
/* Font Family: Open Sans
 * Designed by: Steve Matteson
 * License: OFL
 */
@font-face {
  /* Copyright: Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans) */
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-weight: 300 800;
  font-stretch: 75 100;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("../font/families/Open%20Sans/OpenSans%5Bwdth%2Cwght%5D.woff2?v=1728421031") format("woff2 supports variations"), url("../font/families/Open%20Sans/OpenSans%5Bwdth%2Cwght%5D.woff2?v=1728421031") format("woff2-variations"), url("../font/families/Open%20Sans/OpenSans%5Bwdth%2Cwght%5D.woff2?v=1728421031") format("woff2");
}
@font-face {
  /* Copyright: Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans) */
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-weight: 300 800;
  font-stretch: 75 100;
  src: local("Open Sans Italic"), local("OpenSans-Italic"), url("../font/families/Open%20Sans/OpenSans-Italic%5Bwdth%2Cwght%5D.woff2?v=1728421031") format("woff2 supports variations"), url("../font/families/Open%20Sans/OpenSans-Italic%5Bwdth%2Cwght%5D.woff2?v=1728421031") format("woff2-variations"), url("../font/families/Open%20Sans/OpenSans-Italic%5Bwdth%2Cwght%5D.woff2?v=1728421031") format("woff2");
}
woltlab-suite-preload:root {
  --woltlab-suite-preload: preload_dummy("../font/families/Open%20Sans/OpenSans%5Bwdth%2Cwght%5D.woff2?v=1728421031", "font", 1, "");
}
.codeBox {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: var(--wcfBorderRadius);
  clear: both;
  margin: 1em 0;
  padding: 10px;
  position: relative;
}
.codeBox.collapsed .codeBoxCode {
  max-height: 200px;
  overflow: hidden;
}
.codeBox.collapsed > .toggleButton {
  bottom: 0;
  left: 0;
  padding-bottom: 10px;
  position: absolute;
  right: 0;
  z-index: 1;
}
.codeBox.collapsed > .toggleButton::before {
  background-image: linear-gradient(to top, rgba(var(--wcfContentBackground-rgb) / 0.9), rgba(var(--wcfContentBackground-rgb) / 0));
  content: "";
  height: 60px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -60px;
}
.codeBox .codeBoxHeader {
  align-items: center;
  background-color: var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0 0;
  display: flex;
  margin: -10px -10px 0;
  /* required to avoid layout jumping caused by the dynamically added 24px button */
  min-height: 24px;
  padding: 10px 10px 10px;
  position: sticky;
  top: 50px;
  z-index: 1;
}
.codeBox .codeBoxHeader > .codeBoxHeadline {
  flex: 1 1 auto;
  margin-right: 10px;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .codeBox .codeBoxHeader > .codeBoxHeadline {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .codeBox .codeBoxHeader > .codeBoxHeadline {
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .codeBox .codeBoxHeader > .codeBoxHeadline {
    overflow: auto;
    white-space: nowrap;
  }
}
.codeBox .codeBoxHeader .toggleButton, .codeBox .codeBoxHeader button {
  flex: 0 0 auto;
}
.codeBox .codeBoxCode {
  position: relative;
  padding-left: 7ch;
}
.codeBox .codeBoxCode > code {
  display: block;
  overflow-x: auto;
  font-family: var(--wcfFontFamilyMonospace);
  font-size: 14px;
}
.codeBox .codeBoxCode > code .codeBoxLine {
  display: block;
}
.codeBox .codeBoxCode > code .codeBoxLine > a {
  margin-left: -7ch;
  overflow: hidden;
  position: absolute;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* No one has line numbers greater than 999999 */
  width: 6ch;
}
.codeBox .codeBoxCode > code .codeBoxLine > a::before {
  content: attr(title);
}
.codeBox .codeBoxCode > code .codeBoxLine > span {
  tab-size: 4;
  white-space: pre;
  /* Prevent empty lines from collapsing. */
}
.codeBox .codeBoxCode > code .codeBoxLine > span:empty {
  display: inline-block;
}
@media screen and (min-width: 769px), print {
  .codeBox .codeBoxCode > code .codeBoxLine > span {
    white-space: pre-wrap;
    word-break: break-all;
  }
}
.codeBox .codeBoxCode > code .codeBoxLine:target {
  background-color: #ff6;
}
.codeBox > .toggleButton {
  background-color: rgba(var(--wcfContentBackground-rgb) / 0.9);
  border-radius: 0 0 var(--wcfBorderRadius) var(--wcfBorderRadius);
  cursor: pointer;
  display: block;
  padding: 10px 20px 0 10px;
  text-align: center;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .codeBox > .toggleButton {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .codeBox > .toggleButton {
    font-size: 12px;
  }
}
.quoteBoxContent .codeBox .codeBoxHeader {
  /*
		The quote box has its own stacking context, causing the `top` value
	    to be relative to the quote box and not the document body.
	    See https://community.woltlab.com/thread/293105-quelltext-innerhalb-eines-zitates-wird-teilweise-abgeschnitten/
	*/
  top: 0;
}
.anchorFixedHeader:not(.disableAnchorFixedHeader):target .codeBoxHeader {
  top: -30px;
  /* see wsc31.scss */
}
.dialogContent .codeBox .codeBoxHeader {
  /* Prevent the header being sticky inside dialogs, which doesn't really work.  */
  position: static;
}
html[data-color-scheme="light"] {
  /* PrismJS 1.29.0
	https://prismjs.com/download.html#themes=prism */
  /**
	* prism.js default theme for JavaScript, CSS and HTML
	* Based on dabblet (http://dabblet.com)
	* @author Lea Verou
	*/
}
html[data-color-scheme="light"] .prism-token.prism-comment, html[data-color-scheme="light"] .prism-token.prism-prolog, html[data-color-scheme="light"] .prism-token.prism-doctype, html[data-color-scheme="light"] .prism-token.prism-cdata {
  color: slategray;
}
html[data-color-scheme="light"] .prism-token.prism-punctuation {
  color: #999;
}
html[data-color-scheme="light"] .prism-token.prism-namespace {
  opacity: 0.7;
}
html[data-color-scheme="light"] .prism-token.prism-property, html[data-color-scheme="light"] .prism-token.prism-tag, html[data-color-scheme="light"] .prism-token.prism-boolean, html[data-color-scheme="light"] .prism-token.prism-number, html[data-color-scheme="light"] .prism-token.prism-constant, html[data-color-scheme="light"] .prism-token.prism-symbol, html[data-color-scheme="light"] .prism-token.prism-deleted {
  color: #905;
}
html[data-color-scheme="light"] .prism-token.prism-selector, html[data-color-scheme="light"] .prism-token.prism-attr-name, html[data-color-scheme="light"] .prism-token.prism-string, html[data-color-scheme="light"] .prism-token.prism-char, html[data-color-scheme="light"] .prism-token.prism-builtin, html[data-color-scheme="light"] .prism-token.prism-inserted {
  color: #690;
}
html[data-color-scheme="light"] .prism-token.prism-operator, html[data-color-scheme="light"] .prism-token.prism-entity, html[data-color-scheme="light"] .prism-token.prism-url, html[data-color-scheme="light"] .prism-language-css .prism-token.prism-string, html[data-color-scheme="light"] .prism-style .prism-token.prism-string {
  color: #9a6e3a;
  /* This background color was intended by the author of this theme. */
  background: rgba(255, 255, 255, 0.5);
}
html[data-color-scheme="light"] .prism-token.prism-atrule, html[data-color-scheme="light"] .prism-token.prism-attr-value, html[data-color-scheme="light"] .prism-token.prism-keyword {
  color: #07a;
}
html[data-color-scheme="light"] .prism-token.prism-function, html[data-color-scheme="light"] .prism-token.prism-class-name {
  color: #dd4a68;
}
html[data-color-scheme="light"] .prism-token.prism-regex, html[data-color-scheme="light"] .prism-token.prism-important, html[data-color-scheme="light"] .prism-token.prism-variable {
  color: #e90;
}
html[data-color-scheme="light"] .prism-token.prism-important, html[data-color-scheme="light"] .prism-token.prism-bold {
  font-weight: bold;
}
html[data-color-scheme="light"] .prism-token.prism-italic {
  font-style: italic;
}
html[data-color-scheme="light"] .prism-token.prism-entity {
  cursor: help;
}
html[data-color-scheme="dark"] {
  /* PrismJS 1.29.0
	https://prismjs.com/download.html#themes=prism-okaidia */
  /**
	* okaidia theme for JavaScript, CSS and HTML
	* Loosely based on Monokai textmate theme by http://www.monokai.nl/
	* @author ocodia
	*/
}
html[data-color-scheme="dark"] .prism-token.prism-comment, html[data-color-scheme="dark"] .prism-token.prism-prolog, html[data-color-scheme="dark"] .prism-token.prism-doctype, html[data-color-scheme="dark"] .prism-token.prism-cdata {
  color: #8292a2;
}
html[data-color-scheme="dark"] .prism-token.prism-punctuation {
  color: #f8f8f2;
}
html[data-color-scheme="dark"] .prism-token.prism-namespace {
  opacity: 0.7;
}
html[data-color-scheme="dark"] .prism-token.prism-property, html[data-color-scheme="dark"] .prism-token.prism-tag, html[data-color-scheme="dark"] .prism-token.prism-constant, html[data-color-scheme="dark"] .prism-token.prism-symbol, html[data-color-scheme="dark"] .prism-token.prism-deleted {
  color: #f92672;
}
html[data-color-scheme="dark"] .prism-token.prism-boolean, html[data-color-scheme="dark"] .prism-token.prism-number {
  color: #ae81ff;
}
html[data-color-scheme="dark"] .prism-token.prism-selector, html[data-color-scheme="dark"] .prism-token.prism-attr-name, html[data-color-scheme="dark"] .prism-token.prism-string, html[data-color-scheme="dark"] .prism-token.prism-char, html[data-color-scheme="dark"] .prism-token.prism-builtin, html[data-color-scheme="dark"] .prism-token.prism-inserted {
  color: #a6e22e;
}
html[data-color-scheme="dark"] .prism-token.prism-operator, html[data-color-scheme="dark"] .prism-token.prism-entity, html[data-color-scheme="dark"] .prism-token.prism-url, html[data-color-scheme="dark"] .prism-language-css .prism-token.prism-string, html[data-color-scheme="dark"] .prism-style .prism-token.prism-string, html[data-color-scheme="dark"] .prism-token.prism-variable {
  color: #f8f8f2;
}
html[data-color-scheme="dark"] .prism-token.prism-atrule, html[data-color-scheme="dark"] .prism-token.prism-attr-value, html[data-color-scheme="dark"] .prism-token.prism-function, html[data-color-scheme="dark"] .prism-token.prism-class-name {
  color: #e6db74;
}
html[data-color-scheme="dark"] .prism-token.prism-keyword {
  color: #66d9ef;
}
html[data-color-scheme="dark"] .prism-token.prism-regex, html[data-color-scheme="dark"] .prism-token.prism-important {
  color: #fd971f;
}
html[data-color-scheme="dark"] .prism-token.prism-important, html[data-color-scheme="dark"] .prism-token.prism-bold {
  font-weight: bold;
}
html[data-color-scheme="dark"] .prism-token.prism-italic {
  font-style: italic;
}
html[data-color-scheme="dark"] .prism-token.prism-entity {
  cursor: help;
}
.groupMention {
  background-color: var(--wcfSidebarBackground);
  border-radius: 2px;
  color: var(--wcfSidebarLink);
  padding: 1px 5px;
}
.groupMention::before {
  content: "@";
  /* Avoids breaks between the '@' and the group name, but still allows
		   wrapping inside the name itself */
  display: inline-block;
}
.groupMention:hover {
  color: var(--wcfSidebarLinkActive);
}
/* deprecated, legacy class */
.inlineCode, .ck-content *:not(pre) > code, kbd {
  background-color: white !important;
  border: 1px solid #c4c4c4 !important;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #444 !important;
  display: inline;
  font-family: var(--wcfFontFamilyMonospace);
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  overflow: auto;
  padding: 0.15em;
  text-decoration: none;
  word-break: break-word;
  word-wrap: break-word;
}
a:hover :is(.inlineCode, .ck-content *:not(pre) > code, kbd) {
  text-decoration: underline;
}
html[data-color-scheme="dark"] :is(.inlineCode, .ck-content *:not(pre) > code, kbd) {
  background-color: #3a3f49 !important;
  border-color: #546172 !important;
  color: #bdbdbd !important;
}
small kbd {
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  small kbd {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  small kbd {
    font-size: 12px;
  }
}
@supports (-webkit-overflow-scrolling: touch) {
  .inlineCode, .ck-content code, kbd {
    -webkit-box-decoration-break: initial;
  }
}
.mediaBBCode {
  display: inline-table;
  max-width: 100%;
}
.mediaBBCode .mediaBBCodeCaption {
  color: var(--wcfContentDimmedText);
  display: table-caption;
  caption-side: bottom;
  margin-top: 5px;
  text-align: center;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .mediaBBCode .mediaBBCodeCaption {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .mediaBBCode .mediaBBCodeCaption {
    font-size: 12px;
  }
}
.mediaBBCode .mediaBBCodeCaption .mediaBBCodeCaptionAlignment {
  display: inline-block;
  text-align: justify;
}
.mediaBBCode video {
  max-width: 100%;
  max-height: 72vh;
}
iframe.instagram-media {
  /* workaround for broken iframes without height on mobile */
  min-height: 530px;
  /* Prevent the <iframe> from overlapping adjacent elements. */
  position: relative !important;
}
.twitter-tweet > iframe {
  /* Workaround for ugly border in embedded tweets. */
  border-radius: 13px;
}
.mediaBBCodeContainerLeft {
  display: flex;
  justify-content: start;
}
.mediaBBCodeContainerRight {
  display: flex;
  justify-content: end;
}
.mediaBBCodeContainerCenter {
  display: flex;
  justify-content: center;
}
.quoteBox {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  border-left-width: 5px;
  border-radius: 0 var(--wcfBorderRadius) var(--wcfBorderRadius) 0;
  clear: both;
  column-gap: 5px;
  display: grid;
  font-style: normal;
  grid-template-areas: "icon title" "content content";
  grid-template-columns: 24px auto;
  margin: 2em 0 1em 0;
  overflow: hidden;
  padding: 15px 10px;
  row-gap: 10px;
}
.quoteBox.collapsed {
  position: relative;
}
.quoteBox.collapsed > .quoteBoxContent {
  overflow: hidden;
  max-height: 100px;
}
.quoteBox.collapsed > .toggleButton {
  bottom: 0;
  box-shadow: 0 -10px 50px 10px rgba(var(--wcfContentBackground-rgb) / 0.9);
  left: 0;
  padding-bottom: 10px;
  position: absolute;
  right: 0;
  z-index: 1;
}
.quoteBox > .toggleButton {
  background-color: rgba(var(--wcfContentBackground-rgb) / 0.9);
  cursor: pointer;
  display: block;
  grid-column: 1 / -1;
  padding: 10px 20px 0 10px;
  text-align: center;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .quoteBox > .toggleButton {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .quoteBox > .toggleButton {
    font-size: 12px;
  }
}
.quoteBoxTitle {
  align-self: center;
  color: var(--wcfContentDimmedText);
  grid-area: title;
}
.quoteBoxTitle a {
  color: inherit;
}
.quoteBoxTitle a:hover {
  color: inherit;
  text-decoration: underline;
}
.quoteBoxIcon {
  color: var(--wcfContentDimmedText);
  display: flex;
  grid-area: icon;
}
.quoteBoxContent {
  grid-area: content;
}
.quoteBoxContent > :first-child {
  margin-top: 0 !important;
}
.quoteBoxContent > :last-child {
  margin-bottom: 0 !important;
}
.spoilerBox {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: var(--wcfBorderRadius);
  margin: 1em 0;
}
.spoilerSummary {
  padding: 10px;
}
.spoilerBox[open] .spoilerContent {
  padding: 0 10px 10px 10px;
}
.spoilerContent > :first-child {
  margin-top: 0 !important;
}
.spoilerContent > :last-child {
  margin-bottom: 0 !important;
}
.ck.ck-content .mention, .userMention {
  background-color: var(--wcfSidebarBackground);
  border-radius: 2px;
  padding: 1px 5px;
}
.userMention::before {
  content: "@";
  /* avoids breaks between the '@' and the username, but still allows
		   wrapping inside the username itself */
  display: inline-block;
}
/* scale embedded videos to maximum width */
.videoContainer {
  display: block;
  overflow: hidden;
  padding-bottom: 56.25%;
  /* 9 / 16 */
  position: relative;
  text-align: left;
}
.videoContainer iframe, .videoContainer video {
  height: 100%;
  position: absolute;
  width: 100%;
}
.messageVideoContainer iframe {
  max-width: 100%;
}
dl:not(.plain) {
  display: block;
  /* The option */
}
dl:not(.plain):not(:first-child) {
  margin-top: 20px;
}
dl:not(.plain) > dt {
  color: var(--wcfInputLabel);
  display: block;
}
dl:not(.plain) > dt:not(:empty) {
  margin-bottom: 5px;
}
dl:not(.plain) > dd {
  display: block;
}
dl:not(.plain) > dd:not(:last-child) {
  margin-bottom: 20px;
}
dl:not(.plain) > dd > small:not(.innerError):not(.innerInfo):not(.innerSuccess):not(.innerWarning) {
  color: var(--wcfContentDimmedText);
  display: block;
  margin-top: 3px;
}
dl:not(.plain) > dd > label {
  display: block;
  /* indentation for checkbox descriptions */
}
dl:not(.plain) > dd > label + small:not(.innerError):not(.innerInfo):not(.innerSuccess):not(.innerWarning) {
  margin-left: 24px;
}
dl:not(.plain) > dd > label:not(:first-child) {
  margin-top: 5px;
}
dl:not(.plain) > dd.floated {
  display: flex;
  flex-wrap: wrap;
}
dl:not(.plain) > dd.floated > label {
  flex: 0 0 auto;
  margin: 0 10px 5px 0;
}
dl:not(.plain) > dd.floated > label:last-child {
  margin-right: 0;
}
dl:not(.plain) > dd.floated > label + small:not(.innerError):not(.innerInfo):not(.innerSuccess):not(.innerWarning) {
  margin-left: 0;
}
dl:not(.plain) > dd.floated small {
  flex: 1 1 100%;
}
dl:not(.plain).wide > dt {
  display: none;
}
dl:not(.plain) dt.checkboxList + dd::after, dl:not(.plain) dd.checkboxList::after {
  content: "";
  clear: both;
  display: table;
}
dl:not(.plain) dt.checkboxList + dd label, dl:not(.plain) dd.checkboxList label {
  float: left;
  clear: both;
}
dl:not(.plain) dt.checkboxList + dd small, dl:not(.plain) dd.checkboxList small {
  clear: both;
}
dl.floated > dd {
  display: flex;
  flex-wrap: wrap;
}
dl.floated > dd > label {
  flex: 0 0 auto;
  margin: 0 10px 5px 0;
}
dl.floated > dd > label:last-child {
  margin-right: 0;
}
dl.floated > dd > label:not(:first-child) {
  margin-top: 0;
}
dl.floated > dd > label + small:not(.innerError):not(.innerInfo):not(.innerSuccess):not(.innerWarning) {
  margin-left: 0;
}
dl.floated > dd small {
  flex: 1 1 100%;
}
dl.dataList {
  overflow: hidden;
}
dl.dataList::before, dl.dataList::after {
  display: table;
  content: "";
}
dl.dataList::after {
  clear: both;
}
dl.dataList > dt {
  clear: right;
  color: var(--wcfContentDimmedText);
  float: left;
  margin-right: 4px;
  text-align: left;
}
dl.dataList > dt:after {
  content: ":";
}
dl.dataList > dd {
  float: right;
  min-height: 20px;
  text-align: right;
}
dl.dataList > dd:not(:last-child) {
  margin-bottom: 3px;
}
dl.inlineDataList > dt {
  display: inline-block;
  vertical-align: middle;
}
dl.inlineDataList > dt:after {
  content: ":";
  padding-left: 1px;
}
dl.inlineDataList > dd {
  display: inline-block;
  vertical-align: middle;
}
dl.inlineDataList > dd:not(:last-of-type):after {
  content: ",";
  padding-left: 1px;
}
dl.statsDataList {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
dl.statsDataList > dt {
  color: var(--wcfContentDimmedText);
  flex: 0 0 60%;
  margin-left: 5px;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  dl.statsDataList > dt {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  dl.statsDataList > dt {
    font-size: 12px;
  }
}
dl.statsDataList > dd {
  flex: 0 0 auto;
  width: calc(40% - 5px);
  /* IE work-around */
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* remove `margin-top` for `<dl>` inside grid */
.row.rowColGap > dl {
  margin-top: 0;
}
/* makes an inline-list */
.inlineList {
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
}
.inlineList > li {
  flex: 0 1 auto;
}
.inlineList > li:not(:last-child) {
  margin-right: 5px;
}
.inlineList.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.inlineList.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
/* restores the native styling for lists */
.nativeList {
  margin: 1em 0 1em 40px;
}
.nativeList li {
  margin: 7px 0;
}
ul.nativeList {
  list-style-type: disc;
}
ol.nativeList {
  list-style-type: decimal;
}
/* tag cloud list */
.tagList {
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
  align-items: baseline;
  margin-bottom: -4px;
  margin-right: -8px;
}
.tagList > li {
  flex: 0 1 auto;
}
.tagList > li:not(:last-child) {
  margin-right: 5px;
}
.tagList.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.tagList.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
.tagList > li {
  margin-bottom: 4px;
  margin-right: 8px;
}
.tagList .tag {
  background-color: var(--wcfButtonBackground);
  clip-path: polygon(0 50%, 1em 0%, 100% 0%, 100% 100%, 1em 100%);
  color: var(--wcfButtonText);
  display: inline-block;
  margin-left: 11px;
  padding: 3px 6px 2px 2px;
  padding-left: calc(1em + 2px);
  position: relative;
  text-decoration: none;
  font-weight: 400;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .tagList .tag {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .tagList .tag {
    font-size: 12px;
  }
}
.tagList .tag:hover {
  background-color: var(--wcfButtonPrimaryBackgroundActive);
  color: var(--wcfButtonPrimaryTextActive);
  text-decoration: none;
}
.tagList .tagWeight1 {
  font-size: 12px;
}
.tagList .tagWeight2 {
  font-size: 14px;
}
.tagList .tagWeight3 {
  font-size: 16px;
}
.tagList .tagWeight4 {
  font-size: 18px;
}
.tagList .tagWeight5 {
  font-size: 20px;
}
.tagList .tagWeight6 {
  font-size: 23px;
}
.tagList .tagWeight7 {
  font-size: 28px;
}
/* list of smileys */
.smileyList {
  align-items: center;
  row-gap: 5px;
}
/* legacy styling (deprecated) */
ol.dataList, ul.dataList {
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
  font-weight: 400;
}
ol.dataList > li, ul.dataList > li {
  flex: 0 1 auto;
}
ol.dataList > li:not(:last-child), ul.dataList > li:not(:last-child) {
  margin-right: 5px;
}
ol.dataList.commaSeparated > li:not(:last-child):after, ul.dataList.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
ol.dataList.dotSeparated > li:not(:last-child):after, ul.dataList.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
@media screen and (min-width: 769px), print {
  ol.dataList, ul.dataList {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  ol.dataList, ul.dataList {
    font-size: 12px;
  }
}
ol.dataList > li:not(:last-child):after, ul.dataList > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
/* Font Awesome 6 Free: Regular */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block !important;
  src: url("../font/fa-regular-400.woff2?v=6.7.2") format("woff2");
}
/* Font Awesome 6 Free: Solid */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block !important;
  src: url("../font/fa-solid-900.woff2?v=6.7.2") format("woff2");
}
fa-brand, fa-icon {
  align-items: center;
  display: inline-flex;
  height: var(--icon-size);
  justify-content: center;
  pointer-events: none;
  width: calc(var(--icon-size) * 1.25);
}
fa-brand:not(:upgraded), fa-icon:not(:upgraded) {
  visibility: hidden !important;
}
fa-brand[hidden], fa-icon[hidden] {
  display: none;
}
fa-brand[size="16"], fa-icon[size="16"] {
  --font-size: 14px;
  --icon-size: 16px;
}
fa-brand[size="24"], fa-icon[size="24"] {
  --font-size: 18px;
  --icon-size: 24px;
}
fa-brand[size="32"], fa-icon[size="32"] {
  --font-size: 28px;
  --icon-size: 32px;
}
fa-brand[size="48"], fa-icon[size="48"] {
  --font-size: 42px;
  --icon-size: 48px;
}
fa-brand[size="64"], fa-icon[size="64"] {
  --font-size: 56px;
  --icon-size: 64px;
}
fa-brand[size="96"], fa-icon[size="96"] {
  --font-size: 84px;
  --icon-size: 96px;
}
fa-brand[size="128"], fa-icon[size="128"] {
  --font-size: 112px;
  --icon-size: 128px;
}
fa-brand[size="144"], fa-icon[size="144"] {
  --font-size: 130px;
  --icon-size: 144px;
}
fa-icon {
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-font-smoothing: antialiased !important;
  -webkit-user-select: none !important;
  font-family: var(--fa-font-family, "Font Awesome 6 Free") !important;
  font-size: var(--font-size) !important;
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: var(--fa-font-weight, 400) !important;
  line-height: 1 !important;
  text-rendering: auto !important;
  user-select: none !important;
}
fa-icon[solid] {
  font-weight: 900 !important;
}
[disabled] :is(fa-brand, fa-icon), .disabled :is(fa-brand, fa-icon) {
  opacity: 0.45;
}
/* @deprecated 6.0 Use the new icons instead, `.icon` is now just an easy-to-spot reminder. */
.icon, .fa-spinner {
  align-items: center;
  background-color: #f0c !important;
  border-radius: 3px;
  display: inline-flex;
  font-family: inherit !important;
  height: var(--icon-size);
  justify-content: center;
  width: var(--icon-size);
}
.icon::before, .fa-spinner::before {
  color: #fff !important;
  content: "?" !important;
  font-family: inherit !important;
  font-size: var(--font-size) !important;
}
.icon.icon16, .fa-spinner.icon16 {
  --font-size: 14px;
  --icon-size: 16px;
}
.icon.icon24, .fa-spinner.icon24 {
  --font-size: 18px;
  --icon-size: 24px;
}
.icon.icon32, .fa-spinner.icon32 {
  --font-size: 28px;
  --icon-size: 32px;
}
.icon.icon48, .fa-spinner.icon48 {
  --font-size: 42px;
  --icon-size: 48px;
}
.icon.icon64, .fa-spinner.icon64 {
  --font-size: 56px;
  --icon-size: 64px;
}
.icon.icon96, .fa-spinner.icon96 {
  --font-size: 84px;
  --icon-size: 96px;
}
.icon.icon128, .fa-spinner.icon128 {
  --font-size: 112px;
  --icon-size: 128px;
}
.icon.icon144, .fa-spinner.icon144 {
  --font-size: 130px;
  --icon-size: 144px;
}
fa-icon {
  --preset-black: #333;
  --preset-blue: #369;
  --preset-brown: #c63;
  --preset-green: #090;
  --preset-orange: #f90;
  --preset-pink: #f0c;
  --preset-purple: #c0f;
  --preset-red: #c00;
  --preset-yellow: #ff0;
}
html[data-color-scheme="dark"] fa-icon {
  --preset-black: #8c8c8c;
  --preset-blue: #478cd1;
  --preset-brown: #ad8476;
  --preset-green: #2ea336;
  --preset-orange: #f57c00;
  --preset-pink: #f23ac8;
  --preset-purple: #9c7bd5;
  --preset-red: #eb5c7b;
  --preset-yellow: #ffeb3b;
}
.green fa-icon {
  color: var(--preset-green);
}
.red fa-icon {
  color: var(--preset-red);
}
.black fa-icon {
  color: var(--preset-black);
}
.brown fa-icon {
  color: var(--preset-brown);
}
.orange fa-icon {
  color: var(--preset-orange);
}
.yellow fa-icon {
  color: var(--preset-yellow);
}
.blue fa-icon {
  color: var(--preset-blue);
}
.purple fa-icon {
  color: var(--preset-purple);
}
.pink fa-icon {
  color: var(--preset-pink);
}
/* default styling for all boxes */
.box {
  box-sizing: border-box;
}
.boxImage img {
  height: auto;
  max-width: 100%;
}
.boxTitle {
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .boxTitle {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .boxTitle {
    font-size: 18px;
  }
}
.boxTitle + .boxContent {
  margin-top: 20px;
}
.boxTitle .badge {
  top: -2px;
}
.boxContent + .boxContent {
  margin-top: 20px;
}
.boxContent + .boxTitle {
  margin-top: 30px;
}
.boxContent .section:first-child {
  margin-top: 0;
}
.boxContentSeparator {
  background-color: var(--wcfContentBorderInner);
  border: 0;
  height: 1px;
  margin: 30px auto;
  width: 60%;
}
/* styling for boxes in <hero> position */
@media screen and (max-width: 1024px) {
  .boxesHero .boxContainer {
    padding: 40px 0;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesHero .boxContainer {
    padding: 60px 0;
  }
}
.boxesHero .box {
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .boxesHero .box:not(:last-child) {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesHero .box:not(:last-child) {
    margin-bottom: 60px;
  }
}
.boxesHero .boxTitle {
  font-weight: 600;
  line-height: 1.05;
}
@media screen and (min-width: 769px), print {
  .boxesHero .boxTitle {
    font-size: var(--wcfFontSizeTitle);
  }
}
@media screen and (max-width: 768px) {
  .boxesHero .boxTitle {
    font-size: 23px;
  }
}
.boxesHero .boxWithImage {
  display: flex;
  flex-wrap: wrap;
}
.boxesHero .boxWithImage .boxImage, .boxesHero .boxWithImage .boxTitle, .boxesHero .boxWithImage .boxContent {
  flex: 0 0 100%;
}
.boxesHero .boxWithImage .boxImage {
  align-items: center;
  display: flex;
  justify-content: center;
  max-height: 750px;
  order: 3;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .boxesHero .boxWithImage .boxImage {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesHero .boxWithImage .boxImage {
    margin-top: 30px;
  }
}
/* styling for boxes in <headerBoxes> position */
.boxesHeaderBoxes {
  background-color: var(--wcfFooterBoxBackground);
  color: var(--wcfFooterBoxText);
}
.boxesHeaderBoxes a {
  color: var(--wcfFooterBoxLink);
}
.boxesHeaderBoxes a:hover {
  color: var(--wcfFooterBoxLinkActive);
}
.boxesHeaderBoxes .icon {
  color: var(--wcfFooterBoxText);
}
@media screen and (min-width: 545px), print {
  .boxesHeaderBoxes .boxContainer {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1024px) {
  .boxesHeaderBoxes .boxContainer {
    padding: 40px 0;
    margin-bottom: -40px;
    margin-left: -10px;
    margin-right: -10px;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesHeaderBoxes .boxContainer {
    padding: 60px 0;
    margin-bottom: -60px;
    margin-left: -15px;
    margin-right: -15px;
  }
}
.boxesHeaderBoxes .box {
  overflow: hidden;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (max-width: 1024px) {
  .boxesHeaderBoxes .box {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 545px) and (max-width: 1024px) {
  .boxesHeaderBoxes .box {
    flex: 0 0 50%;
    max-width: 50%;
    /* one item */
  }
  .boxesHeaderBoxes .box.boxFullWidth {
    flex-basis: 100%;
    max-width: 100%;
  }
  .boxesHeaderBoxes .box:first-child:nth-last-child(1) {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesHeaderBoxes .box {
    flex: 0 0 25%;
    margin-bottom: 60px;
    max-width: 25%;
    /* one item */
    /* two items */
    /* three items */
  }
  .boxesHeaderBoxes .box.boxFullWidth {
    flex-basis: 100%;
    max-width: 100%;
  }
  .boxesHeaderBoxes .box:first-child:nth-last-child(1) {
    flex-basis: 100%;
    max-width: 100%;
  }
  .boxesHeaderBoxes .box:first-child:nth-last-child(2), .boxesHeaderBoxes .box:first-child:nth-last-child(2) ~ .box {
    flex-basis: 50%;
    max-width: 50%;
  }
  .boxesHeaderBoxes .box:first-child:nth-last-child(3), .boxesHeaderBoxes .box:first-child:nth-last-child(3) ~ .box {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
}
.boxesHeaderBoxes .boxImage {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  max-height: 100px;
  overflow: hidden;
}
/* styling for boxes in <top>/<bottom> position */
@media screen and (max-width: 1024px) {
  .boxesTop .box, .boxesBottom .box {
    margin-bottom: 40px;
    margin-top: 40px;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesTop .box, .boxesBottom .box {
    margin-bottom: 60px;
    margin-top: 60px;
  }
}
.boxesTop .boxTitle, .boxesBottom .boxTitle {
  color: var(--wcfContentHeadlineText);
  font-weight: 600;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .boxesTop .boxTitle, .boxesBottom .boxTitle {
    font-size: var(--wcfFontSizeSection);
  }
}
@media screen and (max-width: 768px) {
  .boxesTop .boxTitle, .boxesBottom .boxTitle {
    font-size: 20px;
  }
}
.boxesTop .boxTitle a, .boxesBottom .boxTitle a {
  color: var(--wcfContentHeadlineLink);
}
.boxesTop .boxTitle a:hover, .boxesBottom .boxTitle a:hover {
  color: var(--wcfContentHeadlineLinkActive);
}
@media screen and (max-width: 544px) {
  .boxesTop .boxImage, .boxesBottom .boxImage {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    max-height: 100px;
    overflow: hidden;
  }
}
@media screen and (min-width: 545px), print {
  .boxesTop .boxImage, .boxesBottom .boxImage {
    width: 30%;
  }
  .boxesTop .boxWithImage::before, .boxesTop .boxWithImage::after, .boxesBottom .boxWithImage::before, .boxesBottom .boxWithImage::after {
    display: table;
    content: "";
  }
  .boxesTop .boxWithImage::after, .boxesBottom .boxWithImage::after {
    clear: both;
  }
  .boxesTop .boxWithImage:nth-child(odd) .boxImage, .boxesBottom .boxWithImage:nth-child(odd) .boxImage {
    float: left;
  }
  .boxesTop .boxWithImage:nth-child(even) .boxImage, .boxesBottom .boxWithImage:nth-child(even) .boxImage {
    float: right;
  }
}
@media screen and (min-width: 545px) and (max-width: 1024px) {
  .boxesTop .boxWithImage:nth-child(odd) .boxImage, .boxesBottom .boxWithImage:nth-child(odd) .boxImage {
    margin: 0 10px 10px 0;
  }
  .boxesTop .boxWithImage:nth-child(even) .boxImage, .boxesBottom .boxWithImage:nth-child(even) .boxImage {
    margin: 0 0 10px 10px;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesTop .boxWithImage:nth-child(odd) .boxImage, .boxesBottom .boxWithImage:nth-child(odd) .boxImage {
    margin: 0 20px 20px 0;
  }
  .boxesTop .boxWithImage:nth-child(even) .boxImage, .boxesBottom .boxWithImage:nth-child(even) .boxImage {
    margin: 0 0 20px 20px;
  }
}
.boxesTop {
  border-bottom: 1px solid var(--wcfContentBorderInner);
}
.boxesBottom {
  border-top: 1px solid var(--wcfContentBorderInner);
}
/* styling for boxes in <sidebarLeft>/<sidebarRight> position */
.boxesSidebarLeft, .boxesSidebarRight {
  color: var(--wcfSidebarText);
}
.boxesSidebarLeft a, .boxesSidebarRight a {
  color: var(--wcfSidebarLink);
}
.boxesSidebarLeft a:hover, .boxesSidebarRight a:hover {
  color: var(--wcfSidebarLinkActive);
}
@media screen and (min-width: 545px) and (max-width: 768px) {
  .boxesSidebarLeft > .boxContainer, .boxesSidebarRight > .boxContainer {
    --column-count: 2;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .boxesSidebarLeft > .boxContainer, .boxesSidebarRight > .boxContainer {
    --column-count: 3;
  }
}
@media screen and (min-width: 545px) and (max-width: 1024px) {
  .boxesSidebarLeft > .boxContainer, .boxesSidebarRight > .boxContainer {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(var(--column-count), 1fr);
  }
  .boxesSidebarLeft > .boxContainer > .box, .boxesSidebarRight > .boxContainer > .box {
    margin: 0 !important;
  }
}
.boxesSidebarLeft .icon, .boxesSidebarRight .icon {
  color: var(--wcfSidebarText);
}
.boxesSidebarLeft small, .boxesSidebarLeft .dimmed, .boxesSidebarRight small, .boxesSidebarRight .dimmed {
  color: var(--wcfSidebarDimmedText);
}
.boxesSidebarLeft small a, .boxesSidebarLeft .dimmed a, .boxesSidebarRight small a, .boxesSidebarRight .dimmed a {
  color: var(--wcfSidebarDimmedLink);
}
.boxesSidebarLeft small a:hover, .boxesSidebarLeft .dimmed a:hover, .boxesSidebarRight small a:hover, .boxesSidebarRight .dimmed a:hover {
  color: var(--wcfSidebarDimmedLinkActive);
}
.boxesSidebarLeft .boxTitle, .boxesSidebarRight .boxTitle {
  color: var(--wcfSidebarHeadlineText);
}
.boxesSidebarLeft .boxTitle a, .boxesSidebarRight .boxTitle a {
  color: var(--wcfSidebarHeadlineLink);
}
.boxesSidebarLeft .boxTitle a:hover, .boxesSidebarRight .boxTitle a:hover {
  color: var(--wcfSidebarHeadlineLinkActive);
}
.boxesSidebarLeft .box, .boxesSidebarRight .box {
  border-radius: var(--wcfBorderRadius);
}
.boxesSidebarLeft .box:not(.boxBorderless), .boxesSidebarRight .box:not(.boxBorderless) {
  background-color: var(--wcfSidebarBackground);
  border: 1px solid var(--wcfSidebarBorder);
}
@media screen and (max-width: 1024px) {
  .boxesSidebarLeft .box:not(.boxBorderless), .boxesSidebarRight .box:not(.boxBorderless) {
    padding: 20px 10px;
  }
  .boxesSidebarLeft .box:not(.boxBorderless) .boxMenu, .boxesSidebarRight .box:not(.boxBorderless) .boxMenu {
    margin-left: -10px;
    margin-right: -10px;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesSidebarLeft .box:not(.boxBorderless), .boxesSidebarRight .box:not(.boxBorderless) {
    padding: 20px;
  }
  .boxesSidebarLeft .box:not(.boxBorderless) .boxMenu, .boxesSidebarRight .box:not(.boxBorderless) .boxMenu {
    margin-left: -20px;
    margin-right: -20px;
  }
}
.boxesSidebarLeft .box:not(:first-child), .boxesSidebarRight .box:not(:first-child) {
  margin-top: 30px;
}
.boxesSidebarLeft .box.boxError .boxTitle, .boxesSidebarLeft .box.boxInfo .boxTitle, .boxesSidebarLeft .box.boxSuccess .boxTitle, .boxesSidebarLeft .box.boxWarning .boxTitle, .boxesSidebarRight .box.boxError .boxTitle, .boxesSidebarRight .box.boxInfo .boxTitle, .boxesSidebarRight .box.boxSuccess .boxTitle, .boxesSidebarRight .box.boxWarning .boxTitle {
  color: inherit;
}
.boxesSidebarLeft .box.boxError a:not(.button), .boxesSidebarLeft .box.boxInfo a:not(.button), .boxesSidebarLeft .box.boxSuccess a:not(.button), .boxesSidebarLeft .box.boxWarning a:not(.button), .boxesSidebarRight .box.boxError a:not(.button), .boxesSidebarRight .box.boxInfo a:not(.button), .boxesSidebarRight .box.boxSuccess a:not(.button), .boxesSidebarRight .box.boxWarning a:not(.button) {
  font-weight: 600;
}
.boxesSidebarLeft .box.boxError a:not(.button):hover, .boxesSidebarLeft .box.boxInfo a:not(.button):hover, .boxesSidebarLeft .box.boxSuccess a:not(.button):hover, .boxesSidebarLeft .box.boxWarning a:not(.button):hover, .boxesSidebarRight .box.boxError a:not(.button):hover, .boxesSidebarRight .box.boxInfo a:not(.button):hover, .boxesSidebarRight .box.boxSuccess a:not(.button):hover, .boxesSidebarRight .box.boxWarning a:not(.button):hover {
  text-decoration: underline;
}
.boxesSidebarLeft .box.boxError, .boxesSidebarRight .box.boxError {
  background-color: var(--wcfStatusErrorBackground);
  border-color: var(--wcfStatusErrorBorder);
  color: var(--wcfStatusErrorText);
}
.boxesSidebarLeft .box.boxError a:not(.button), .boxesSidebarRight .box.boxError a:not(.button) {
  color: var(--wcfStatusErrorLink);
}
.boxesSidebarLeft .box.boxError a:not(.button):hover, .boxesSidebarRight .box.boxError a:not(.button):hover {
  color: var(--wcfStatusErrorLinkActive);
}
.boxesSidebarLeft .box.boxInfo, .boxesSidebarRight .box.boxInfo {
  background-color: var(--wcfStatusInfoBackground);
  border-color: var(--wcfStatusInfoBorder);
  color: var(--wcfStatusInfoText);
}
.boxesSidebarLeft .box.boxInfo a:not(.button), .boxesSidebarRight .box.boxInfo a:not(.button) {
  color: var(--wcfStatusInfoLink);
}
.boxesSidebarLeft .box.boxInfo a:not(.button):hover, .boxesSidebarRight .box.boxInfo a:not(.button):hover {
  color: var(--wcfStatusInfoLinkActive);
}
.boxesSidebarLeft .box.boxSuccess, .boxesSidebarRight .box.boxSuccess {
  background-color: var(--wcfStatusSuccessBackground);
  border-color: var(--wcfStatusSuccessBorder);
  color: var(--wcfStatusSuccessText);
}
.boxesSidebarLeft .box.boxSuccess a:not(.button), .boxesSidebarRight .box.boxSuccess a:not(.button) {
  color: var(--wcfStatusSuccessLink);
}
.boxesSidebarLeft .box.boxSuccess a:not(.button):hover, .boxesSidebarRight .box.boxSuccess a:not(.button):hover {
  color: var(--wcfStatusSuccessLinkActive);
}
.boxesSidebarLeft .box.boxWarning, .boxesSidebarRight .box.boxWarning {
  background-color: var(--wcfStatusWarningBackground);
  border-color: var(--wcfStatusWarningBorder);
  color: var(--wcfStatusWarningText);
}
.boxesSidebarLeft .box.boxWarning a:not(.button), .boxesSidebarRight .box.boxWarning a:not(.button) {
  color: var(--wcfStatusWarningLink);
}
.boxesSidebarLeft .box.boxWarning a:not(.button):hover, .boxesSidebarRight .box.boxWarning a:not(.button):hover {
  color: var(--wcfStatusWarningLinkActive);
}
.boxesSidebarLeft .box .boxMenu .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuLink {
  align-items: flex-start;
  display: flex;
  padding: 5px 20px;
}
.boxesSidebarLeft .box .boxMenu .boxMenuLink .boxMenuLinkTitle, .boxesSidebarRight .box .boxMenu .boxMenuLink .boxMenuLinkTitle {
  flex: 1 1 auto;
}
.boxesSidebarLeft .box .boxMenu .boxMenuLink .badge, .boxesSidebarRight .box .boxMenu .boxMenuLink .badge {
  flex: 0 0 auto;
}
.boxesSidebarLeft .box .boxMenu li.active > .boxMenuLink, .boxesSidebarRight .box .boxMenu li.active > .boxMenuLink {
  background-color: var(--wcfContentBackground);
  color: var(--wcfContentLink);
}
.boxesSidebarLeft .box .boxMenu li.active > .boxMenuLink:hover, .boxesSidebarRight .box .boxMenu li.active > .boxMenuLink:hover {
  color: var(--wcfContentLinkActive);
}
.boxesSidebarLeft .box .boxMenu .boxMenuDepth1 .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuDepth1 .boxMenuLink {
  padding-left: 40px;
}
.boxesSidebarLeft .box .boxMenu .boxMenuDepth2 .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuDepth2 .boxMenuLink {
  padding-left: 60px;
}
.boxesSidebarLeft .box .boxMenu .boxMenuItem .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuItem .boxMenuLink {
  padding-left: 100px;
}
.boxesSidebarLeft .box .boxMenu .boxMenuItemDepth1 .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuItemDepth1 .boxMenuLink {
  padding-left: 20px;
}
.boxesSidebarLeft .box .boxMenu .boxMenuItemDepth2 .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuItemDepth2 .boxMenuLink {
  padding-left: 40px;
}
.boxesSidebarLeft .box .boxMenu .boxMenuItemDepth3 .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuItemDepth3 .boxMenuLink {
  padding-left: 60px;
}
.boxesSidebarLeft .box .boxMenu .boxMenuItemDepth4 .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuItemDepth4 .boxMenuLink {
  padding-left: 80px;
}
@media screen and (max-width: 544px) {
  .boxesSidebarLeft .boxImage, .boxesSidebarRight .boxImage {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    max-height: 100px;
    overflow: hidden;
  }
}
@media screen and (min-width: 545px) and (max-width: 1024px) {
  .boxesSidebarLeft .boxWithImage::before, .boxesSidebarLeft .boxWithImage::after, .boxesSidebarRight .boxWithImage::before, .boxesSidebarRight .boxWithImage::after {
    display: table;
    content: "";
  }
  .boxesSidebarLeft .boxWithImage::after, .boxesSidebarRight .boxWithImage::after {
    clear: both;
  }
  .boxesSidebarLeft .boxWithImage .boxTitle, .boxesSidebarLeft .boxWithImage .boxContent, .boxesSidebarRight .boxWithImage .boxTitle, .boxesSidebarRight .boxWithImage .boxContent {
    margin-left: calc(30% + 15px);
  }
  .boxesSidebarLeft .boxImage, .boxesSidebarRight .boxImage {
    float: left;
    width: 30%;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesSidebarLeft .boxImage, .boxesSidebarRight .boxImage {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    max-height: 100px;
    overflow: hidden;
  }
}
.boxesSidebarLeft .box .boxMenu li.active > .boxMenuLink {
  border-radius: var(--wcfBorderRadius);
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.boxesSidebarLeft .box .boxMenu .boxMenuDepth1 li.active > .boxMenuLink {
  padding-left: 30px;
}
.boxesSidebarLeft .box .boxMenu .boxMenuDepth2 li.active > .boxMenuLink {
  padding-left: 50px;
}
.boxesSidebarLeft .box .boxMenu li.active.boxMenuItemDepth2 .boxMenuLink {
  padding-left: 30px;
}
.boxesSidebarLeft .box .boxMenu li.active.boxMenuItemDepth3 .boxMenuLink {
  padding-left: 50px;
}
.boxesSidebarLeft .box .boxMenu li.active.boxMenuItemDepth4 .boxMenuLink {
  padding-left: 70px;
}
.boxesSidebarRight .box .boxMenu li.active > .boxMenuLink {
  border-radius: var(--wcfBorderRadius);
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.boxesSidebarRight .box .boxMenu li.active.boxMenuItemDepth2 .boxMenuLink {
  padding-left: 30px;
}
.boxesSidebarRight .box .boxMenu li.active.boxMenuItemDepth3 .boxMenuLink {
  padding-left: 50px;
}
.boxesSidebarRight .box .boxMenu li.active.boxMenuItemDepth4 .boxMenuLink {
  padding-left: 70px;
}
/* collapsible sidebar for mobile devices */
@media screen and (max-width: 1024px) {
  .main > .layoutBoundary {
    display: flex;
    flex-wrap: wrap;
  }
  .main > .layoutBoundary > .content {
    flex: 0 0 100%;
    order: 2;
  }
  .main > .layoutBoundary > .boxesSidebarLeft {
    order: 1;
  }
  .main > .layoutBoundary > .boxesSidebarRight {
    order: 3;
  }
  .boxesSidebarLeft {
    flex: 1 0 100%;
    pointer-events: none;
  }
  .boxesSidebarLeft > .boxContainer {
    pointer-events: all;
  }
  .boxesSidebarLeft:not(.open) {
    flex: 1 50%;
  }
  .boxesSidebarLeft:not(.open) > .boxContainer {
    display: none;
  }
  .boxesSidebarLeft::before {
    background-color: var(--wcfSidebarBackground);
    color: var(--wcfSidebarLink);
    content: attr(data-show-sidebar);
    display: block;
    padding: 10px 0;
    pointer-events: all;
    text-align: center;
  }
  .boxesSidebarLeft.open::before {
    content: attr(data-hide-sidebar);
    margin-bottom: 20px;
  }
  .boxesSidebarLeft.boxesSidebarLeftHasMenu::before {
    content: attr(data-show-navigation);
  }
  .boxesSidebarLeft.boxesSidebarLeftHasMenu.open::before {
    content: attr(data-hide-navigation);
  }
  .boxesSidebarRight {
    flex: 1 0 100%;
  }
}
/* styling for boxes in <contentTop>/<contentBottom> position */
.boxesContentTop .box:not(:first-child), .boxesContentBottom .box:not(:first-child) {
  margin-top: 40px;
}
.boxesContentTop .boxTitle, .boxesContentBottom .boxTitle {
  color: var(--wcfContentHeadlineText);
  font-weight: 600;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .boxesContentTop .boxTitle, .boxesContentBottom .boxTitle {
    font-size: var(--wcfFontSizeSection);
  }
}
@media screen and (max-width: 768px) {
  .boxesContentTop .boxTitle, .boxesContentBottom .boxTitle {
    font-size: 20px;
  }
}
.boxesContentTop .boxTitle a, .boxesContentBottom .boxTitle a {
  color: var(--wcfContentHeadlineLink);
}
.boxesContentTop .boxTitle a:hover, .boxesContentBottom .boxTitle a:hover {
  color: var(--wcfContentHeadlineLinkActive);
}
.boxesContentTop .box.boxInfo, .boxesContentBottom .box.boxInfo {
  background-color: var(--wcfStatusInfoBackground);
  border-color: var(--wcfStatusInfoBorder);
  color: var(--wcfStatusInfoText);
  padding: 20px;
  text-align: center;
}
.boxesContentTop .box.boxInfo a:not(.button), .boxesContentBottom .box.boxInfo a:not(.button) {
  color: var(--wcfStatusInfoLink);
  font-weight: 600;
}
.boxesContentTop .box.boxInfo a:not(.button):hover, .boxesContentBottom .box.boxInfo a:not(.button):hover {
  color: var(--wcfStatusInfoLinkActive);
  text-decoration: underline;
}
.boxesContentTop .box.boxInfo .formSubmit, .boxesContentBottom .box.boxInfo .formSubmit {
  margin-top: 20px;
}
@media screen and (max-width: 544px) {
  .boxesContentTop .boxImage, .boxesContentBottom .boxImage {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    max-height: 100px;
    overflow: hidden;
  }
}
@media screen and (min-width: 545px), print {
  .boxesContentTop .boxWithImage::before, .boxesContentTop .boxWithImage::after, .boxesContentBottom .boxWithImage::before, .boxesContentBottom .boxWithImage::after {
    display: table;
    content: "";
  }
  .boxesContentTop .boxWithImage::after, .boxesContentBottom .boxWithImage::after {
    clear: both;
  }
  .boxesContentTop .boxImage, .boxesContentBottom .boxImage {
    float: left;
    width: 30%;
  }
}
@media screen and (min-width: 545px) and (max-width: 1024px) {
  .boxesContentTop .boxImage, .boxesContentBottom .boxImage {
    margin: 0 10px 10px 0;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesContentTop .boxImage, .boxesContentBottom .boxImage {
    margin: 0 20px 20px 0;
  }
}
.boxesContentTop:not(:first-child) {
  margin-top: 40px;
}
.boxesContentBottom {
  margin-top: 40px;
}
/* styling for boxes in <footerBoxes> position */
.boxesFooterBoxes {
  background-color: var(--wcfFooterBoxBackground);
  color: var(--wcfFooterBoxText);
}
.boxesFooterBoxes a {
  color: var(--wcfFooterBoxLink);
}
.boxesFooterBoxes a:hover {
  color: var(--wcfFooterBoxLinkActive);
}
.boxesFooterBoxes .icon {
  color: var(--wcfFooterBoxText);
}
@media screen and (max-width: 768px) {
  .boxesFooterBoxes .boxContainer {
    display: flex;
    flex-direction: column;
    padding: 40px 0;
    row-gap: 40px;
  }
}
@media screen and (min-width: 769px), print {
  .boxesFooterBoxes .boxContainer {
    column-gap: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 60px 0;
    row-gap: 60px;
  }
}
@media screen and (min-width: 769px), print {
  .boxesFooterBoxes .box.boxFullWidth {
    grid-column: span 2;
  }
}
.boxesFooterBoxes .boxTitle {
  color: var(--wcfFooterBoxHeadlineText);
}
.boxesFooterBoxes .boxTitle a {
  color: var(--wcfFooterBoxHeadlineLink);
}
.boxesFooterBoxes .boxTitle a:hover {
  color: var(--wcfFooterBoxHeadlineLinkActive);
}
.boxesFooterBoxes .boxImage {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  max-height: 100px;
  overflow: hidden;
}
/* styling for boxes in <footer> position */
.boxesFooter {
  background-color: var(--wcfFooterBackground);
  color: var(--wcfFooterText);
  padding: 20px 0;
}
.boxesFooter .layoutBoundary {
  position: relative;
}
.boxesFooter .icon {
  color: var(--wcfFooterText);
}
.boxesFooter a {
  color: var(--wcfFooterLink);
}
.boxesFooter a:hover {
  color: var(--wcfFooterLinkActive);
  text-decoration: underline;
}
.boxesFooter .box:not(:first-child) {
  margin-top: 20px;
}
.boxesFooter .boxTitle {
  color: var(--wcfFooterHeadlineText);
}
.boxesFooter .boxTitle a {
  color: var(--wcfFooterHeadlineLink);
}
.boxesFooter .boxTitle a:hover {
  color: var(--wcfFooterHeadlineLinkActive);
}
@media screen and (max-width: 544px) {
  .boxesFooter .boxImage {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    max-height: 100px;
    overflow: hidden;
  }
}
@media screen and (min-width: 545px), print {
  .boxesFooter .boxWithImage::before, .boxesFooter .boxWithImage::after {
    display: table;
    content: "";
  }
  .boxesFooter .boxWithImage::after {
    clear: both;
  }
  .boxesFooter .boxImage {
    float: left;
    width: 30%;
  }
}
@media screen and (min-width: 545px) and (max-width: 1024px) {
  .boxesFooter .boxImage {
    margin: 0 10px 10px 0;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesFooter .boxImage {
    margin: 0 20px 20px 0;
  }
}
.boxesFooter .boxMenuLinkGroup .boxMenu > li > ol a {
  color: var(--wcfFooterText);
}
.styleChanger {
  position: absolute;
  right: 20px;
  z-index: 1;
}
.styleChanger button {
  color: var(--wcfFooterLink);
}
@media screen and (max-width: 1024px) {
  .styleChanger {
    right: 10px;
  }
}
@media (hover: hover) {
  .styleChanger button:hover {
    color: var(--wcfFooterLinkActive);
    text-decoration: underline;
  }
}
html[data-color-scheme="dark"] .page__colorScheme--light {
  display: none !important;
}
html:not([data-color-scheme="dark"]) .page__colorScheme--dark {
  display: none !important;
}
.boxesTop .boxMenu, .boxesBottom .boxMenu, .boxesFooter .boxMenu {
  display: inline-flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
.boxesTop .boxMenu > li, .boxesBottom .boxMenu > li, .boxesFooter .boxMenu > li {
  flex: 0 0 auto;
  padding-left: 10px;
  padding-right: 10px;
}
@media screen and (max-width: 1024px) {
  .boxesTop .boxMenu > li, .boxesBottom .boxMenu > li, .boxesFooter .boxMenu > li {
    margin-bottom: 10px;
    margin-top: 10px;
  }
}
.boxesTop .boxMenuLinkGroup:not(:first-child), .boxesBottom .boxMenuLinkGroup:not(:first-child), .boxesFooter .boxMenuLinkGroup:not(:first-child) {
  margin-top: 40px;
}
.boxesTop .boxMenuLinkGroup .boxMenu, .boxesBottom .boxMenuLinkGroup .boxMenu, .boxesFooter .boxMenuLinkGroup .boxMenu {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -20px;
}
.boxesTop .boxMenuLinkGroup .boxMenu .boxMenuLink, .boxesBottom .boxMenuLinkGroup .boxMenu .boxMenuLink, .boxesFooter .boxMenuLinkGroup .boxMenu .boxMenuLink {
  display: inline-block;
}
.boxesTop .boxMenuLinkGroup .boxMenu > li, .boxesBottom .boxMenuLinkGroup .boxMenu > li, .boxesFooter .boxMenuLinkGroup .boxMenu > li {
  margin-bottom: 20px;
}
@media screen and (min-width: 769px), print {
  .boxesTop .boxMenuLinkGroup .boxMenu > li, .boxesBottom .boxMenuLinkGroup .boxMenu > li, .boxesFooter .boxMenuLinkGroup .boxMenu > li {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media screen and (max-width: 768px) {
  .boxesTop .boxMenuLinkGroup .boxMenu > li, .boxesBottom .boxMenuLinkGroup .boxMenu > li, .boxesFooter .boxMenuLinkGroup .boxMenu > li {
    flex: 1 1 100%;
  }
}
.boxesTop .boxMenuLinkGroup .boxMenu > li > .boxMenuLink, .boxesBottom .boxMenuLinkGroup .boxMenu > li > .boxMenuLink, .boxesFooter .boxMenuLinkGroup .boxMenu > li > .boxMenuLink {
  font-weight: 400;
  line-height: 1.28;
  margin-bottom: 10px;
}
@media screen and (min-width: 769px), print {
  .boxesTop .boxMenuLinkGroup .boxMenu > li > .boxMenuLink, .boxesBottom .boxMenuLinkGroup .boxMenu > li > .boxMenuLink, .boxesFooter .boxMenuLinkGroup .boxMenu > li > .boxMenuLink {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .boxesTop .boxMenuLinkGroup .boxMenu > li > .boxMenuLink, .boxesBottom .boxMenuLinkGroup .boxMenu > li > .boxMenuLink, .boxesFooter .boxMenuLinkGroup .boxMenu > li > .boxMenuLink {
    font-size: 18px;
  }
}
.boxWithEditButton {
  position: relative;
}
.boxWithEditButton .boxEditButton {
  color: inherit;
  opacity: 0;
  position: absolute;
  top: 4px;
  transition: opacity 0.12s ease-in-out;
  right: 4px;
}
.boxWithEditButton .boxEditButton:hover {
  color: inherit;
}
.boxWithEditButton .boxEditButton > .icon {
  color: inherit;
}
html:not(.touch) .boxWithEditButton:hover .boxEditButton {
  opacity: 1;
}
.boxMenuResetFilter {
  margin-top: 10px;
}
.containerList > li {
  position: relative;
  transition: background-color 0.2s;
}
@media screen and (max-width: 1024px) {
  .containerList > li {
    padding: 10px 0;
  }
}
@media screen and (min-width: 1025px), print {
  .containerList > li {
    padding: 20px;
  }
}
.containerList > li:not(:last-child) {
  border-bottom: 1px solid var(--wcfContentBorderInner);
}
.containerList > li:first-child {
  border-top: 1px solid var(--wcfContentBorder);
}
.containerList > li:last-child {
  border-bottom: 1px solid var(--wcfContentBorder);
}
.containerList > li:hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
}
.containerList > li.showMore {
  text-align: center;
}
.containerList > li.showMore:hover {
  background-color: transparent;
}
.containerList > li .containerHeadline {
  position: relative;
}
.containerList > li .containerHeadline > .containerContentType {
  color: var(--wcfContentDimmedText);
  position: absolute;
  top: 5px;
  right: 0;
}
@media screen and (max-width: 544px) {
  .containerList > li .containerHeadline > .containerContentType {
    display: none;
  }
}
.containerList > li.containerListButtonGroup {
  text-align: right;
}
.containerList > li.containerListButtonGroup:hover {
  background-color: transparent;
}
.containerList > li.containerListButtonGroup > .buttonGroup, .containerList > li.containerListButtonGroup > .messageFooterButtons, .containerList > li.containerListButtonGroup > .messageFooterButtonsExtra {
  display: inline-flex;
}
.containerList > li.containerListButtonGroup > .buttonGroup:not(:first-child), .containerList > li.containerListButtonGroup > .messageFooterButtons:not(:first-child), .containerList > li.containerListButtonGroup > .messageFooterButtonsExtra:not(:first-child) {
  margin-left: 5px;
}
@media screen and (max-width: 1024px) {
  .containerList > li .hasMobileNavigation > .containerHeadline > h3 {
    padding-right: 30px;
  }
  .containerList > li .buttonGroupNavigation {
    position: absolute;
    right: 0;
    top: 14px;
  }
  .containerList > li .buttonGroupNavigation.open {
    left: 0;
    z-index: 10;
  }
  .containerList > li .buttonGroupNavigation.open > .buttonList {
    display: block;
    visibility: visible;
  }
  .containerList > li .buttonGroupNavigation > .dropdownLabel {
    left: calc(100% - 24px);
    position: relative;
  }
  .containerList > li .buttonGroupNavigation > .buttonList {
    background-color: var(--wcfDropdownBackground);
    border-radius: 4px;
    box-shadow: var(--wcfBoxShadow);
    color: var(--wcfDropdownText);
    display: none;
    min-width: 160px;
    padding: 4px 0;
    pointer-events: all;
    position: fixed;
    text-align: left;
    visibility: hidden;
    z-index: 450;
    position: static !important;
    top: 0;
  }
  .containerList > li .buttonGroupNavigation > .buttonList.dropdownMenuPageSearch {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .containerList > li .buttonGroupNavigation > .buttonList.dropdownOpen {
    display: block;
    visibility: visible;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li {
    display: block;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText), .containerList > li .buttonGroupNavigation > .buttonList li:focus-within:focus-visible, .containerList > li .buttonGroupNavigation > .buttonList li.dropdownList > li:hover:not(.dropdownDivider), .containerList > li .buttonGroupNavigation > .buttonList li.dropdownNavigationItem, .containerList > li .buttonGroupNavigation > .buttonList li.active {
    background-color: var(--wcfDropdownBackgroundActive);
    color: var(--wcfDropdownLinkActive);
  }
  .containerList > li .buttonGroupNavigation > .buttonList li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText) > :is(a, button), .containerList > li .buttonGroupNavigation > .buttonList li:focus-within:focus-visible > :is(a, button), .containerList > li .buttonGroupNavigation > .buttonList li.dropdownList > li:hover:not(.dropdownDivider) > :is(a, button), .containerList > li .buttonGroupNavigation > .buttonList li.dropdownNavigationItem > :is(a, button), .containerList > li .buttonGroupNavigation > .buttonList li.active > :is(a, button) {
    color: var(--wcfDropdownLinkActive);
  }
  .containerList > li .buttonGroupNavigation > .buttonList li.dropdownDivider {
    border-top: 1px solid var(--wcfDropdownBorderInner);
    margin: 4px 0;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li.dropdownText {
    padding: 6px 12px;
    font-weight: 400;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li.boxFlag {
    padding-top: 2px;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li.missingValue > span {
    padding-right: 40px;
    position: relative;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li.disabled {
    color: var(--wcfContentDimmedText);
  }
  .containerList > li .buttonGroupNavigation > .buttonList li.disabled > span {
    cursor: not-allowed !important;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li > :is(a, button, span) {
    clear: both;
    cursor: pointer;
    display: block;
    max-width: 350px;
    overflow: hidden;
    padding: 6px 12px;
    text-decoration: none;
    text-overflow: ellipsis;
    user-select: none;
    white-space: nowrap;
    word-wrap: normal;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li > :is(a, button, span) > div > h3 {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li > button {
    width: 100%;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li > :is(a, button) {
    color: var(--wcfDropdownLink);
  }
  .containerList > li .buttonGroupNavigation > .buttonList li > a > small {
    display: block;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li > :is(a, button) + span.badge {
    display: none;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li > .box16 {
    align-items: center;
    cursor: pointer;
    min-height: 0;
    padding: 5px 10px;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li > label {
    display: block;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li .containerHeadline {
    margin-bottom: 0;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li .containerHeadline > p {
    font-weight: 400;
  }
  .containerList > li .buttonGroupNavigation > .buttonList li .icon {
    color: inherit;
  }
  .containerList > li .buttonGroupNavigation > .buttonList .scrollableDropdownMenu {
    max-height: 300px;
    overflow: auto;
  }
  .containerList > li .buttonGroupNavigation > .buttonList .scrollableDropdownMenu.forceScrollbar {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .containerList > li .buttonGroupNavigation > .buttonList > li .invisible {
    display: inline;
    padding-left: 5px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .containerList > li .buttonGroupNavigation > .buttonList li.dropdownText {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 1024px) and (max-width: 768px) {
  .containerList > li .buttonGroupNavigation > .buttonList li.dropdownText {
    font-size: 12px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .containerList > li .buttonGroupNavigation > .buttonList li .containerHeadline > p {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 1024px) and (max-width: 768px) {
  .containerList > li .buttonGroupNavigation > .buttonList li .containerHeadline > p {
    font-size: 12px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .containerList > li .buttonGroupNavigation > .buttonList .dropdownMenu.pageHeaderSearchDropdown {
    transform: translateY(-10px);
  }
}
@media screen and (min-width: 1025px), print {
  .containerList > li .buttonGroupNavigation {
    opacity: 0;
    position: absolute;
    right: 20px;
    top: 15px;
    transition: opacity 0.12s;
  }
  .containerList > li .buttonGroupNavigation > .dropdownLabel {
    display: none;
  }
  .containerList > li .buttonGroupNavigation > ul {
    background-color: var(--wcfContentBackground);
    border-radius: var(--wcfBorderRadius);
    box-shadow: var(--wcfBoxShadowCard);
  }
  .containerList > li .buttonGroupNavigation > ul > li {
    margin-right: 0;
  }
  .containerList > li .buttonGroupNavigation > ul > li:not(:last-child) {
    border-right: 1px solid var(--wcfContentContainerBorder);
  }
  .containerList > li .buttonGroupNavigation > ul > li > a, .containerList > li .buttonGroupNavigation > ul > li > button {
    display: inline-block;
    padding: 3px 5px;
  }
  .containerList > li .buttonGroupNavigation > ul > li > a > fa-icon, .containerList > li .buttonGroupNavigation > ul > li > a > .invisible, .containerList > li .buttonGroupNavigation > ul > li > button > fa-icon, .containerList > li .buttonGroupNavigation > ul > li > button > .invisible {
    opacity: 0.5;
  }
  .containerList > li .buttonGroupNavigation > ul > li.active > a > fa-icon, .containerList > li .buttonGroupNavigation > ul > li.active > a > .invisible, .containerList > li .buttonGroupNavigation > ul > li.active > button > fa-icon, .containerList > li .buttonGroupNavigation > ul > li.active > button > .invisible, .containerList > li .buttonGroupNavigation > ul > li:hover > a > fa-icon, .containerList > li .buttonGroupNavigation > ul > li:hover > a > .invisible, .containerList > li .buttonGroupNavigation > ul > li:hover > button > fa-icon, .containerList > li .buttonGroupNavigation > ul > li:hover > button > .invisible {
    color: var(--wcfContentText);
    opacity: 1;
  }
  .containerList > li:hover .buttonGroupNavigation {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .containerList.doubleColumned > li + li, .containerList.tripleColumned > li + li {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px), print {
  .containerList.doubleColumned, .containerList.tripleColumned {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--wcfContentBorder);
    border-bottom: 1px solid var(--wcfContentBorder);
  }
  .containerList.doubleColumned > li, .containerList.tripleColumned > li {
    padding-right: 15px;
  }
  .containerList.doubleColumned > li .containerBoxContent, .containerList.tripleColumned > li .containerBoxContent {
    overflow: hidden;
  }
  .containerList.doubleColumned > li .containerBoxContent h3, .containerList.tripleColumned > li .containerBoxContent h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .containerList.doubleColumned > li:first-child, .containerList.tripleColumned > li:first-child {
    border-top: none;
  }
  .containerList.doubleColumned > li:last-child, .containerList.tripleColumned > li:last-child {
    border-bottom: none;
  }
  .containerList.doubleColumned > li {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .containerList.doubleColumned > li:nth-child(2n + 1):nth-last-child(-n + 2) {
    border-bottom: none;
  }
  .containerList.tripleColumned > li {
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% / 3);
  }
  .containerList.tripleColumned > li:nth-child(3n + 1):nth-last-child(-n + 3), .containerList.tripleColumned > li:nth-child(3n + 1):nth-last-child(-n + 3) ~ li {
    border-bottom: none;
  }
}
@media screen and (min-width: 1025px), print {
  html[data-color-scheme="dark"] .containerList > li .buttonGroupNavigation > ul {
    border: 1px solid var(--wcfContentContainerBorder);
  }
}
@media screen and (max-width: 768px) {
  .containerBoxList.doubleColumned > li + li, .containerBoxList.tripleColumned > li + li {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px), print {
  .containerBoxList.doubleColumned, .containerBoxList.tripleColumned {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -15px;
  }
  .containerBoxList.doubleColumned > li, .containerBoxList.tripleColumned > li {
    overflow: hidden;
    padding-right: 15px;
    margin-bottom: 15px;
  }
  .containerBoxList.doubleColumned > li .containerBoxContent, .containerBoxList.tripleColumned > li .containerBoxContent {
    overflow: hidden;
  }
  .containerBoxList.doubleColumned > li .containerBoxContent h3, .containerBoxList.tripleColumned > li .containerBoxContent h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .containerBoxList.doubleColumned > li {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .containerBoxList.tripleColumned > li {
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% / 3);
  }
}
.flexibleCategoryList {
  position: relative;
}
.flexibleCategoryList > li {
  margin-bottom: 14px;
}
.flexibleCategoryList > li > ol {
  margin-left: 21px;
}
.flexibleCategoryList > li > ol > li > ol {
  margin-bottom: 7px;
  margin-left: 21px;
}
.flexibleCategoryList > li > ol > li > ol > li {
  font-size: var(--wcfFontSizeSmall);
}
.containerListDisplayOptions {
  align-items: center;
  border-bottom: 2px solid currentColor;
  color: var(--wcfTabularBoxHeadline);
  display: flex;
}
.containerListSortOptions, .containerListActiveFilters, .containerListFilterOptions {
  padding: 5px 10px;
}
@media screen and (max-width: 768px) {
  .containerListActiveFilters {
    display: none;
  }
}
.containerListSortOptions {
  flex: 1 auto;
}
.containerListSortOptions > .dropdown {
  display: inline-flex;
  margin-left: 10px;
}
.containerListSortOptions fa-icon {
  color: var(--wcfTabularBoxHeadline);
}
.containerListActiveFilters, .containerListFilterOptions {
  flex: 0 auto;
}
@media screen and (min-width: 769px), print {
  /* Firefox */
  .flexibleCategoryList:not(.flexibleCategoryListDisabled) {
    /* WebKit */
    -webkit-column-count: 2;
    /* Firefox */
    -moz-column-count: 2;
    /* CSS 3 / Internet Explorer */
    column-count: 2;
  }
  .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li {
    /* WebKit */
    -webkit-column-break-inside: avoid;
    /* CSS 3 / Internet Explorer */
    break-inside: avoid;
  }
  .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li > ol > li > ol {
    font-size: 0;
  }
  .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li > ol > li > ol > li {
    display: inline-block;
    font-weight: 400;
  }
  @-moz-document url-prefix() {
    .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li {
      display: block;
      overflow: hidden;
    }
  }
}
@media screen and (min-width: 769px) and (min-width: 769px), print {
  .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li > ol > li > ol > li {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (min-width: 769px) and (max-width: 768px) {
  .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li > ol > li > ol > li {
    font-size: 12px;
  }
}
.styleListPreviewImage {
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .styleList > li {
    padding: 10px;
  }
}
/* style for content area */
/* content header */
.contentHeader, .boxHeadline {
  color: var(--wcfContentHeadlineText);
}
.contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 {
  font-weight: 600;
  line-height: 1.05;
}
@media screen and (min-width: 769px), print {
  .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 {
    font-size: var(--wcfFontSizeTitle);
  }
}
@media screen and (max-width: 768px) {
  .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 {
    font-size: 23px;
  }
}
.contentHeader .contentTitle .badge, .contentHeader > h1 .badge, .boxHeadline .contentTitle .badge, .boxHeadline > h1 .badge {
  top: -2px;
  line-height: var(--wcfFontLineHeight);
}
.contentHeader .contentTitle a, .contentHeader > h1 a, .boxHeadline .contentTitle a, .boxHeadline > h1 a {
  color: var(--wcfContentHeadlineLink);
}
.contentHeader .contentTitle a:hover, .contentHeader > h1 a:hover, .boxHeadline .contentTitle a:hover, .boxHeadline > h1 a:hover {
  color: var(--wcfContentHeadlineLinkActive);
}
.contentHeader {
  align-items: flex-start;
  display: flex;
  justify-content: flex-end;
  margin-top: -10px;
}
.contentHeader .contentHeaderIcon {
  flex: 0 0 64px;
  margin-right: 15px;
}
.contentHeader .contentHeaderTitle, .contentHeader > .contentTitle {
  flex: 1 auto;
  margin-top: 10px;
}
.contentHeader .contentHeaderNavigation {
  flex: 0 0 auto;
  margin-left: 15px;
  margin-top: 10px;
}
.contentHeader .contentHeaderDescription {
  color: var(--wcfContentDimmedText);
  margin-top: 5px;
}
.contentHeader .contentHeaderMetaData {
  color: var(--wcfContentDimmedText);
  margin-top: 5px;
}
.contentHeader .contentHeaderMetaData.inlineList > li:not(:last-child) {
  margin-right: 10px;
}
.contentHeader .contentHeaderMetaData > li a, .contentHeader .contentHeaderMetaData > li a:hover, .contentHeader .contentHeaderMetaData > li .icon {
  color: var(--wcfContentDimmedText);
}
.contentHeader .contentTitle + .inlineDataList {
  margin-top: 5px;
}
.contentHeader .inlineDataList {
  color: var(--wcfContentDimmedText);
}
.contentHeader .contentHeaderNavigation > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: -5px;
  margin-left: -5px;
  white-space: nowrap;
}
.contentHeader .contentHeaderNavigation .button {
  display: flex;
  margin-left: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 768px) {
  .contentHeader {
    flex-wrap: wrap;
  }
  .contentHeader .contentHeaderNavigation {
    flex-shrink: 1;
  }
  .contentHeader .contentHeaderIcon {
    display: none;
  }
}
@media screen and (min-width: 769px), print {
  .contentHeader .contentHeaderNavigation {
    max-width: 40%;
  }
}
/* legacy styling for sub headlines (deprecated; use .section > .sectionTitle instead) */
.boxHeadline.boxSubHeadline {
  margin-top: 40px;
  margin-bottom: 20px;
}
.boxHeadline.boxSubHeadline > h2 {
  color: var(--wcfContentHeadlineText);
  font-weight: 600;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .boxHeadline.boxSubHeadline > h2 {
    font-size: var(--wcfFontSizeSection);
  }
}
@media screen and (max-width: 768px) {
  .boxHeadline.boxSubHeadline > h2 {
    font-size: 20px;
  }
}
.boxHeadline.boxSubHeadline > h2 a {
  color: var(--wcfContentHeadlineLink);
}
.boxHeadline.boxSubHeadline > h2 a:hover {
  color: var(--wcfContentHeadlineLinkActive);
}
.boxHeadline.boxSubHeadline > h2 .badge {
  top: -2px;
}
/* content sections */
.section {
  margin-top: 40px;
}
.section > :first-child {
  margin-top: 0;
}
.section .sectionTitle {
  color: var(--wcfContentHeadlineText);
  font-weight: 600;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .section .sectionTitle {
    font-size: var(--wcfFontSizeSection);
  }
}
@media screen and (max-width: 768px) {
  .section .sectionTitle {
    font-size: 20px;
  }
}
.section .sectionTitle a {
  color: var(--wcfContentHeadlineLink);
}
.section .sectionTitle a:hover {
  color: var(--wcfContentHeadlineLinkActive);
}
.section .sectionTitle .badge {
  top: -2px;
}
.section .sectionDescription {
  color: var(--wcfContentDimmedText);
}
.section > .sectionHeader, .section > .sectionTitle {
  margin-bottom: 20px;
}
.section > .sectionHeader + .section, .section > .sectionTitle + .section {
  margin-top: 20px;
}
.section:not(.sectionContainerList) > .sectionHeader, .section:not(.sectionContainerList) > .sectionTitle {
  border-bottom: 1px solid var(--wcfContentBorderInner);
  padding-bottom: 10px;
}
.section.sectionContainerList > .sectionHeader, .section.sectionContainerList > .sectionTitle {
  margin-bottom: 10px;
}
.section.tabularBox > .sectionHeader, .section.tabularBox > .sectionTitle {
  border-color: var(--wcfContentBorder);
  margin-bottom: 0;
}
.section .section {
  margin-top: 30px;
}
.section .section:first-child {
  margin-top: 20px;
}
.section .section .sectionTitle {
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .section .section .sectionTitle {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .section .section .sectionTitle {
    font-size: 18px;
  }
}
.section .section > .sectionHeader, .section .section > .sectionTitle {
  margin-bottom: 15px;
}
/* fieldset styling (old sections / deprecated) */
fieldset {
  margin-top: 40px;
}
fieldset > legend {
  border-bottom: 1px solid var(--wcfContentBorderInner);
  color: var(--wcfContentHeadlineText);
  float: left;
  margin-bottom: 20px;
  padding-bottom: 10px;
  width: 100%;
  font-weight: 600;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  fieldset > legend {
    font-size: var(--wcfFontSizeSection);
  }
}
@media screen and (max-width: 768px) {
  fieldset > legend {
    font-size: 20px;
  }
}
fieldset > legend a {
  color: var(--wcfContentHeadlineLink);
}
fieldset > legend a:hover {
  color: var(--wcfContentHeadlineLinkActive);
}
fieldset > legend .badge {
  top: -2px;
}
fieldset > legend + * {
  clear: left;
}
fieldset > legend + small {
  color: var(--wcfContentDimmedText);
  position: relative;
  top: -12px;
}
.section fieldset {
  margin-top: 20px;
}
.section fieldset > legend {
  margin-bottom: 15px;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .section fieldset > legend {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .section fieldset > legend {
    font-size: 18px;
  }
}
/* styling for container headlines */
.containerHeadline > h3 {
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .containerHeadline > h3 {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .containerHeadline > h3 {
    font-size: 18px;
  }
}
.containerHeadline > h3 > .badge {
  top: -2px;
}
.containerHeadline ~ .containerContent {
  margin-top: 10px;
}
/* DEPRECATED: styling for content navigation area (containing pagination / page buttons) */
.contentNavigation + .section {
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .contentNavigation ul {
    margin-top: 30px;
  }
  .contentNavigation ul > li > .button {
    display: block;
    padding: 7px 10px;
    text-align: center;
  }
  .contentNavigation > nav:not(.pagination) > ul > li + li {
    margin-top: 10px;
  }
}
@media screen and (min-width: 769px), print {
  .contentNavigation {
    align-items: center;
    display: flex;
    justify-content: flex-end;
  }
  .contentNavigation > nav {
    flex: 0 0 auto;
    margin-top: 30px;
    order: 3;
  }
  .contentNavigation > nav.pagination {
    order: 1;
    flex: 1 1 auto;
  }
  .contentNavigation > nav.jsClipboardEditor {
    margin-right: 5px;
    order: 2;
  }
  .contentNavigation > nav + nav {
    flex: 0 0 auto;
  }
  .contentNavigation > nav:not(.pagination) {
    text-align: right;
  }
  .contentNavigation ul {
    display: inline-flex;
  }
  .contentNavigation ul > li {
    flex: 0 0 auto;
  }
  .contentNavigation ul > li:not(:last-child) {
    margin-right: 5px;
  }
}
.paginationTop {
  margin-top: 40px;
}
.paginationTop + .section {
  margin-top: 20px;
}
.paginationBottom {
  margin-top: 20px;
}
.contentFooter > .contentFooterNavigation {
  margin-top: 20px;
}
.contentFooter > .contentFooterNavigation > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: -5px;
  margin-left: -5px;
  white-space: nowrap;
}
.contentFooter > .contentFooterNavigation .button {
  display: block;
  margin-left: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (min-width: 545px), print {
  .contentFooter {
    display: flex;
  }
  .contentFooter > .paginationBottom {
    flex: 0 0 auto;
  }
  .contentFooter > .contentFooterNavigation {
    flex: 1 1 auto;
    margin-left: 20px;
  }
}
.contentInteraction {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
@media screen and (max-width: 544px) {
  .contentInteraction {
    flex-wrap: wrap;
  }
}
.contentInteractionPagination {
  flex: 0 0 auto;
}
.contentInteractionPagination.paginationTop {
  margin-top: 0;
}
@media screen and (max-width: 544px) {
  .contentInteractionPagination {
    flex: 0 0 100%;
  }
}
@media screen and (max-width: 544px) {
  body:not(.mobileShowPaginationTop) .contentInteractionPagination {
    display: none;
  }
  body.mobileShowPaginationTop .contentInteractionPagination + .contentInteractionButtonContainer {
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px) {
  .contentHeader + .contentInteraction {
    margin-top: 10px;
  }
}
.contentInteractionButtonContainer {
  align-self: center;
  display: flex;
  margin-left: auto;
}
.contentInteractionButtons {
  display: flex;
  flex: 0 auto;
  overflow: auto;
}
.contentInteractionButton {
  flex: 0 0 auto;
  overflow: hidden;
}
.contentInteractionButton:not(:first-child).button, .contentInteractionButton:not(:first-child) .button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.contentInteractionButton:not(:last-child).button, .contentInteractionButton:not(:last-child) .button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.contentInteractionButton:not(:first-child) {
  margin-left: 1px;
}
.contentInteractionShareButton {
  display: flex;
  flex: 1 0 auto;
  margin-left: 5px;
}
.contentInteractionDropdown {
  display: flex;
  flex: 1 0 auto;
  margin-left: 5px;
}
.contentInteractionDropdown .dropdownToggle {
  align-items: center;
  display: flex;
  white-space: nowrap;
}
.content .contentInteraction + .section, .content .contentInteraction + form {
  margin-top: 20px;
}
/* content navigation buttons */
@media screen and (max-width: 544px) {
  .contentHeader > .contentHeaderNavigation > ul > .button {
    display: block;
    padding: 7px 10px;
    text-align: center;
  }
  .contentHeader > .contentHeaderNavigation > ul > .button > .invisible {
    display: inline;
  }
}
@media screen and (max-width: 768px) {
  /* DEPRECATED */
  /* DEPRECATED */
  .contentNavigation > .pagination {
    display: none;
  }
  .section ~ .contentNavigation > .pagination {
    display: block;
  }
  .section ~ .contentNavigation > .pagination + nav {
    margin-top: 10px;
  }
}
/* sidebar galore */
@media screen and (min-width: 1025px), print {
  .sidebar + .content:not(:last-child) .contentHeaderNavigation {
    flex: 1 1 0%;
  }
  .sidebar + .content:not(:last-child) .contentHeaderNavigation > ul {
    flex-wrap: wrap !important;
    justify-content: flex-end;
  }
}
input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
  margin: 0;
  /* safari fix */
  background-color: var(--wcfInputBackground);
  border: 1px solid var(--wcfInputBorder);
  border-radius: var(--wcfBorderRadius);
  color: var(--wcfInputText);
  font-weight: 400;
  outline: none;
  padding: 4px 8px;
  font-family: var(--wcfFontFamily);
  line-height: var(--wcfFontLineHeight);
}
@media screen and (min-width: 769px), print {
  input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
    font-size: 14px;
  }
}
input[type="date"]:focus, input[type="date"]:hover, input[type="datetime"]:focus, input[type="datetime"]:hover, input[type="email"]:focus, input[type="email"]:hover, input[type="number"]:focus, input[type="number"]:hover, input[type="password"]:focus, input[type="password"]:hover, input[type="search"]:focus, input[type="search"]:hover, input[type="tel"]:focus, input[type="tel"]:hover, input[type="text"]:focus, input[type="text"]:hover, input[type="url"]:focus, input[type="url"]:hover, select:focus, select:hover, textarea:focus, textarea:hover {
  background-color: var(--wcfInputBackgroundActive);
  border-color: var(--wcfInputBorderActive);
  color: var(--wcfInputTextActive);
}
input[type="date"][disabled], input[type="date"].disabled, input[type="datetime"][disabled], input[type="datetime"].disabled, input[type="email"][disabled], input[type="email"].disabled, input[type="number"][disabled], input[type="number"].disabled, input[type="password"][disabled], input[type="password"].disabled, input[type="search"][disabled], input[type="search"].disabled, input[type="tel"][disabled], input[type="tel"].disabled, input[type="text"][disabled], input[type="text"].disabled, input[type="url"][disabled], input[type="url"].disabled, select[disabled], select.disabled, textarea[disabled], textarea.disabled {
  background-color: var(--wcfInputDisabledBackground) !important;
  border-color: var(--wcfInputDisabledBorder) !important;
  color: var(--wcfInputDisabledText) !important;
}
input[type="date"][readonly], input[type="datetime"][readonly], input[type="email"][readonly], input[type="number"][readonly], input[type="password"][readonly], input[type="search"][readonly], input[type="tel"][readonly], input[type="text"][readonly], input[type="url"][readonly], select[readonly], textarea[readonly] {
  color: var(--wcfInputDisabledText) !important;
}
/* set placeholder color */
input[type="date"]::placeholder, input[type="datetime"]::placeholder, input[type="email"]::placeholder, input[type="number"]::placeholder, input[type="password"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="text"]::placeholder, input[type="url"]::placeholder {
  color: var(--wcfInputPlaceholder);
}
input[type="date"]::placeholder:focus, input[type="date"]::placeholder:hover, input[type="datetime"]::placeholder:focus, input[type="datetime"]::placeholder:hover, input[type="email"]::placeholder:focus, input[type="email"]::placeholder:hover, input[type="number"]::placeholder:focus, input[type="number"]::placeholder:hover, input[type="password"]::placeholder:focus, input[type="password"]::placeholder:hover, input[type="search"]::placeholder:focus, input[type="search"]::placeholder:hover, input[type="tel"]::placeholder:focus, input[type="tel"]::placeholder:hover, input[type="text"]::placeholder:focus, input[type="text"]::placeholder:hover, input[type="url"]::placeholder:focus, input[type="url"]::placeholder:hover {
  color: var(--wcfInputPlaceholderActive);
}
input[type="date"][disabled], input[type="date"][readonly], input[type="datetime"][disabled], input[type="datetime"][readonly], input[type="email"][disabled], input[type="email"][readonly], input[type="number"][disabled], input[type="number"][readonly], input[type="password"][disabled], input[type="password"][readonly], input[type="search"][disabled], input[type="search"][readonly], input[type="tel"][disabled], input[type="tel"][readonly], input[type="text"][disabled], input[type="text"][readonly], input[type="url"][disabled], input[type="url"][readonly] {
  background-color: var(--wcfInputDisabledBackground) !important;
  border-color: var(--wcfInputDisabledBorder) !important;
  color: var(--wcfInputDisabledText) !important;
}
textarea::placeholder {
  color: var(--wcfInputPlaceholder);
}
textarea::placeholder:focus, textarea::placeholder:hover {
  color: var(--wcfInputPlaceholderActive);
}
input[type="search"], input[type="text"] {
  -webkit-appearance: none;
}
@media (pointer: coarse) {
  input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
    font-size: 16px;
    padding: 6px 8px;
  }
}
textarea {
  border-width: 1px;
  font-weight: 400;
  resize: vertical;
  vertical-align: top;
  width: 100%;
}
@media screen and (min-width: 769px), print {
  textarea {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  textarea {
    font-size: 14px;
  }
}
textarea[disabled], textarea[readonly] {
  background-color: var(--wcfInputDisabledBackground) !important;
  border-color: var(--wcfInputDisabledBorder) !important;
  color: var(--wcfInputDisabledText) !important;
}
input[disabled], textarea[disabled] {
  -webkit-text-fill-color: var(--wcfInputDisabledText);
  /* override safari font color change */
  -webkit-opacity: 1;
  /* override mobile safari opacity change affecting text color */
}
select {
  max-width: 100%;
}
select.fullWidth {
  width: 100%;
}
.formSubmit {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.formSubmit:not(:first-child) {
  margin-top: 30px;
}
@media screen and (max-width: 544px) {
  .formSubmit input[type="button"], .formSubmit input[type="reset"], .formSubmit input[type="submit"], .formSubmit .button, .formSubmit a.button {
    flex: 1 0 auto;
  }
}
.formSubmit.formSubmit.formSubmit + .section {
  /* Intentional selector to overwrite existing selector. */
  margin-top: 20px;
}
.inputAddon {
  column-gap: 5px;
  display: flex;
}
.inputAddon:not(:last-child) {
  margin-bottom: 5px;
}
.inputAddon > .inputPrefix, .inputAddon > .inputSuffix {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
}
.inputAddon input {
  flex: 1 auto;
}
.inputAddon input + .inputPrefix {
  margin-left: 5px;
}
.inputAddonTextarea {
  column-gap: 0;
  flex-wrap: wrap;
  row-gap: 5px;
}
.inputAddonTextarea > textarea {
  flex: 0 0 100%;
}
.inputAddonTextarea > .ck.ck-editor {
  flex: 0 0 100%;
  margin-top: 0 !important;
}
.inputAddon input.tiny, input.tiny {
  flex-grow: 0;
  width: 80px;
}
.inputAddon input.long, input.long {
  width: 100%;
}
@media screen and (max-width: 544px) {
  .inputAddon input.short, input.short {
    flex-grow: 0;
    width: 150px;
  }
  .inputAddon input.medium, input.medium {
    width: 100%;
  }
}
@media screen and (min-width: 545px), print {
  .inputAddon input.short, input.short {
    flex-grow: 0;
    min-width: 80px;
    width: 10%;
  }
  .inputAddon input.medium, input.medium {
    flex-grow: 0;
    min-width: 150px;
    width: 30%;
  }
}
.formError {
  --color-error: #c00;
}
.formError dt {
  color: var(--color-error) !important;
}
.formError input, .formError select, .formError textarea {
  border-color: var(--color-error) !important;
}
html[data-color-scheme="dark"] .formError {
  --color-error: #ff4747;
}
.formSuccess {
  --color-success: rgb(46, 139, 87);
}
.formSuccess dt {
  color: var(--color-success) !important;
}
.formSuccess input, .formSuccess select, .formSuccess textarea {
  border-color: var(--color-success) !important;
}
/* grid-based form controls */
.formGrid dt {
  display: none;
}
.formGrid select {
  width: 100%;
}
.formFieldRequired, .customOptionRequired {
  color: #cc0001 !important;
}
.formFieldRequiredNotice {
  color: var(--wcfContentDimmedText);
  margin-top: 20px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .formFieldRequiredNotice {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .formFieldRequiredNotice {
    font-size: 12px;
  }
}
html[data-color-scheme="dark"] :is(.formFieldRequired, .customOptionRequired) {
  color: #ff4444 !important;
}
/* password strength estimator */
.inputAddonPasswordStrength {
  align-items: flex-start;
}
.inputAddonPasswordStrength input.medium {
  align-self: stretch;
}
@media screen and (max-width: 544px) {
  .inputAddonPasswordStrength {
    flex-wrap: wrap;
  }
  .inputAddonPasswordStrength input:is(.medium, .long) {
    width: auto;
  }
}
.passwordStrengthRating {
  flex: 0 0 auto;
}
@media screen and (min-width: 545px), print {
  .passwordStrengthRating {
    margin-left: 10px;
  }
}
@media screen and (max-width: 544px) {
  .passwordStrengthRating {
    margin-top: 5px;
    width: 100%;
  }
}
.passwordStrengthScore {
  background-color: #e0e0e0;
  border-radius: 3px;
  display: block;
  height: 10px;
  overflow: hidden;
  position: relative;
}
.passwordStrengthScore::before {
  background-color: transparent;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  transition: background-color 0.12s linear, width 0.12s linear;
  width: 0;
}
.passwordStrengthScore[data-score="0"]::before {
  background-color: #dd2c00;
  width: 5%;
}
.passwordStrengthScore[data-score="1"]::before {
  background-color: #ff9100;
  width: 20%;
}
.passwordStrengthScore[data-score="2"]::before {
  background-color: #cddc39;
  width: 50%;
}
.passwordStrengthScore[data-score="3"]::before {
  background-color: #64dd17;
  width: 85%;
}
.passwordStrengthScore[data-score="4"]::before {
  background-color: #2e7d32;
  width: 100%;
}
.layoutBoundary {
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .layoutBoundary {
    padding: 0 10px;
    width: 100%;
  }
}
@media screen and (min-width: 1025px), print {
  .layoutBoundary {
    padding: 0 20px;
    min-width: var(--wcfLayoutMinWidth);
    max-width: var(--wcfLayoutMaxWidth);
  }
}
.invisible {
  display: none;
}
.grayscale {
  -webkit-filter: grayscale(1);
  filter: gray;
}
.monospace {
  font-family: var(--wcfFontFamilyMonospace) !important;
  font-size: 14px;
}
/* boxes with an image */
.box16 {
  display: flex;
}
.box16 > :first-child fa-icon {
  left: -2px;
  position: relative;
}
.box16 > :first-child:not(:last-child) {
  flex: 0 0 16px;
  margin-right: 5px;
}
.box16 > :last-child {
  flex: 1 1 auto;
  overflow: hidden;
}
.box24 {
  display: flex;
}
.box24 > :first-child fa-icon {
  left: -3px;
  position: relative;
}
.box24 > :first-child:not(:last-child) {
  flex: 0 0 24px;
  margin-right: 8px;
}
.box24 > :last-child {
  flex: 1 1 auto;
  overflow: hidden;
}
.box32 {
  display: flex;
}
.box32 > :first-child fa-icon {
  left: -4px;
  position: relative;
}
.box32 > :first-child:not(:last-child) {
  flex: 0 0 32px;
  margin-right: 10px;
}
.box32 > :last-child {
  flex: 1 1 auto;
  overflow: hidden;
}
.box48 {
  display: flex;
}
.box48 > :first-child fa-icon {
  left: -6px;
  position: relative;
}
.box48 > :first-child:not(:last-child) {
  flex: 0 0 48px;
  margin-right: 12px;
}
.box48 > :last-child {
  flex: 1 1 auto;
  overflow: hidden;
}
.box64 {
  display: flex;
}
.box64 > :first-child fa-icon {
  left: -8px;
  position: relative;
}
.box64 > :first-child:not(:last-child) {
  flex: 0 0 64px;
  margin-right: 15px;
}
.box64 > :last-child {
  flex: 1 1 auto;
  overflow: hidden;
}
.box96 {
  display: flex;
}
.box96 > :first-child fa-icon {
  left: -12px;
  position: relative;
}
.box96 > :first-child:not(:last-child) {
  flex: 0 0 96px;
  margin-right: 15px;
}
.box96 > :last-child {
  flex: 1 1 auto;
  overflow: hidden;
}
.box128 {
  display: flex;
}
.box128 > :first-child fa-icon {
  left: -16px;
  position: relative;
}
.box128 > :first-child:not(:last-child) {
  flex: 0 0 128px;
  margin-right: 20px;
}
.box128 > :last-child {
  flex: 1 1 auto;
  overflow: hidden;
}
.box256 {
  display: flex;
}
.box256 > :first-child fa-icon {
  left: -32px;
  position: relative;
}
.box256 > :first-child:not(:last-child) {
  flex: 0 0 256px;
  margin-right: 30px;
}
.box256 > :last-child {
  flex: 1 1 auto;
  overflow: hidden;
}
small, .small {
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  small, .small {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  small, .small {
    font-size: 12px;
  }
}
strong {
  font-weight: 600;
}
img {
  vertical-align: middle;
}
.elementPointer {
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateY(-100%);
}
.elementPointer.center {
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
}
.elementPointer.left {
  left: 4px;
}
.elementPointer.right {
  right: 4px;
}
.elementPointer.flipVertical {
  bottom: 0;
  top: auto;
  transform: translateY(100%);
}
.elementPointer.flipVertical.center {
  transform: translateX(-50%) translateY(100%);
}
.nativeList {
  margin: 1em 0 1em 40px;
}
.nativeList ul, .nativeList ol {
  margin-bottom: 0;
  margin-top: 0;
}
.nativeList li {
  margin: 5px 0;
}
ul.nativeList {
  list-style-type: disc;
}
ol.nativeList {
  list-style-type: decimal;
}
/* simulate native HTML styles for certain elements */
.htmlContent::before, .ck.ck-content.ck-editor__editable::before, .messageBody > .messageText::before, .messageSignature > div::before, .htmlContent::after, .ck.ck-content.ck-editor__editable::after, .messageBody > .messageText::after, .messageSignature > div::after {
  display: table;
  content: "";
}
.htmlContent::after, .ck.ck-content.ck-editor__editable::after, .messageBody > .messageText::after, .messageSignature > div::after {
  clear: both;
}
.htmlContent img, .ck.ck-content.ck-editor__editable img, .messageBody > .messageText img, .messageSignature > div img {
  height: auto;
  max-width: 100%;
}
.htmlContent > :first-child, .ck.ck-content.ck-editor__editable > :first-child, .messageBody > .messageText > :first-child, .messageSignature > div > :first-child {
  margin-top: 0 !important;
}
.htmlContent > :first-child:is(.messageFloatObjectLeft, .image-style-side-left, .messageFloatObjectRight, .image-style-side) + :is(p, ul, ol, h1, h2, h3, h4, h4, h6), .ck.ck-content.ck-editor__editable > :first-child:is(.messageFloatObjectLeft, .image-style-side-left, .messageFloatObjectRight, .image-style-side) + :is(p, ul, ol, h1, h2, h3, h4, h4, h6), .messageBody > .messageText > :first-child:is(.messageFloatObjectLeft, .image-style-side-left, .messageFloatObjectRight, .image-style-side) + :is(p, ul, ol, h1, h2, h3, h4, h4, h6), .messageSignature > div > :first-child:is(.messageFloatObjectLeft, .image-style-side-left, .messageFloatObjectRight, .image-style-side) + :is(p, ul, ol, h1, h2, h3, h4, h4, h6) {
  margin-top: 0 !important;
}
.htmlContent > :last-child, .ck.ck-content.ck-editor__editable > :last-child, .messageBody > .messageText > :last-child, .messageSignature > div > :last-child {
  margin-bottom: 0 !important;
}
.htmlContent p, .ck.ck-content.ck-editor__editable p, .messageBody > .messageText p, .messageSignature > div p {
  margin: 1em 0;
}
.htmlContent li > :first-child, .ck.ck-content.ck-editor__editable li > :first-child, .messageBody > .messageText li > :first-child, .messageSignature > div li > :first-child {
  margin-top: 0 !important;
}
.htmlContent li > :last-child, .ck.ck-content.ck-editor__editable li > :last-child, .messageBody > .messageText li > :last-child, .messageSignature > div li > :last-child {
  margin-bottom: 0 !important;
}
.htmlContent h1, .ck.ck-content.ck-editor__editable h1, .messageBody > .messageText h1, .messageSignature > div h1 {
  font-weight: 600;
  line-height: 1.05;
}
@media screen and (min-width: 769px), print {
  .htmlContent h1, .ck.ck-content.ck-editor__editable h1, .messageBody > .messageText h1, .messageSignature > div h1 {
    font-size: var(--wcfFontSizeTitle);
  }
}
@media screen and (max-width: 768px) {
  .htmlContent h1, .ck.ck-content.ck-editor__editable h1, .messageBody > .messageText h1, .messageSignature > div h1 {
    font-size: 23px;
  }
}
.htmlContent h2, .ck.ck-content.ck-editor__editable h2, .messageBody > .messageText h2, .messageSignature > div h2 {
  font-weight: 600;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .htmlContent h2, .ck.ck-content.ck-editor__editable h2, .messageBody > .messageText h2, .messageSignature > div h2 {
    font-size: var(--wcfFontSizeSection);
  }
}
@media screen and (max-width: 768px) {
  .htmlContent h2, .ck.ck-content.ck-editor__editable h2, .messageBody > .messageText h2, .messageSignature > div h2 {
    font-size: 20px;
  }
}
.htmlContent h3, .ck.ck-content.ck-editor__editable h3, .messageBody > .messageText h3, .messageSignature > div h3 {
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .htmlContent h3, .ck.ck-content.ck-editor__editable h3, .messageBody > .messageText h3, .messageSignature > div h3 {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .htmlContent h3, .ck.ck-content.ck-editor__editable h3, .messageBody > .messageText h3, .messageSignature > div h3 {
    font-size: 18px;
  }
}
.htmlContent h4, .ck.ck-content.ck-editor__editable h4, .messageBody > .messageText h4, .messageSignature > div h4 {
  font-weight: 600;
}
.htmlContent h1, .ck.ck-content.ck-editor__editable h1, .messageBody > .messageText h1, .messageSignature > div h1, .htmlContent h2, .ck.ck-content.ck-editor__editable h2, .messageBody > .messageText h2, .messageSignature > div h2, .htmlContent h3, .ck.ck-content.ck-editor__editable h3, .messageBody > .messageText h3, .messageSignature > div h3, .htmlContent h4, .ck.ck-content.ck-editor__editable h4, .messageBody > .messageText h4, .messageSignature > div h4, .htmlContent h5, .ck.ck-content.ck-editor__editable h5, .messageBody > .messageText h5, .messageSignature > div h5, .htmlContent h6, .ck.ck-content.ck-editor__editable h6, .messageBody > .messageText h6, .messageSignature > div h6 {
  margin: 1.5em 0 1em 0;
}
.htmlContent ul, .ck.ck-content.ck-editor__editable ul, .messageBody > .messageText ul, .messageSignature > div ul, .htmlContent ol, .ck.ck-content.ck-editor__editable ol, .messageBody > .messageText ol, .messageSignature > div ol {
  margin: 1em 0 1em 40px;
}
.htmlContent ul ul, .ck.ck-content.ck-editor__editable ul ul, .messageBody > .messageText ul ul, .messageSignature > div ul ul, .htmlContent ul ol, .ck.ck-content.ck-editor__editable ul ol, .messageBody > .messageText ul ol, .messageSignature > div ul ol, .htmlContent ol ul, .ck.ck-content.ck-editor__editable ol ul, .messageBody > .messageText ol ul, .messageSignature > div ol ul, .htmlContent ol ol, .ck.ck-content.ck-editor__editable ol ol, .messageBody > .messageText ol ol, .messageSignature > div ol ol {
  margin-bottom: 0;
  margin-top: 0;
}
.htmlContent ul li, .ck.ck-content.ck-editor__editable ul li, .messageBody > .messageText ul li, .messageSignature > div ul li, .htmlContent ol li, .ck.ck-content.ck-editor__editable ol li, .messageBody > .messageText ol li, .messageSignature > div ol li {
  margin: 5px 0;
}
.htmlContent ul, .ck.ck-content.ck-editor__editable ul, .messageBody > .messageText ul, .messageSignature > div ul {
  list-style-type: disc;
}
.htmlContent ol, .ck.ck-content.ck-editor__editable ol, .messageBody > .messageText ol, .messageSignature > div ol {
  list-style-type: decimal;
}
.htmlContent td > :first-child, .ck.ck-content.ck-editor__editable td > :first-child, .messageBody > .messageText td > :first-child, .messageSignature > div td > :first-child, .htmlContent th > :first-child, .ck.ck-content.ck-editor__editable th > :first-child, .messageBody > .messageText th > :first-child, .messageSignature > div th > :first-child {
  margin-top: 0 !important;
}
.htmlContent td > :last-child, .ck.ck-content.ck-editor__editable td > :last-child, .messageBody > .messageText td > :last-child, .messageSignature > div td > :last-child, .htmlContent th > :last-child, .ck.ck-content.ck-editor__editable th > :last-child, .messageBody > .messageText th > :last-child, .messageSignature > div th > :last-child {
  margin-bottom: 0 !important;
}
.htmlContent figure.image, .ck.ck-content.ck-editor__editable figure.image, .messageBody > .messageText figure.image, .messageSignature > div figure.image {
  clear: both;
  display: block;
  margin: 1em auto;
  max-width: 100%;
  min-width: 50px;
  text-align: center;
}
.htmlContent figure.image.image-style-side-left, .ck.ck-content.ck-editor__editable figure.image.image-style-side-left, .messageBody > .messageText figure.image.image-style-side-left, .messageSignature > div figure.image.image-style-side-left {
  float: left;
  margin: 0 20px 20px 0;
}
.htmlContent figure.image.image-style-side, .ck.ck-content.ck-editor__editable figure.image.image-style-side, .messageBody > .messageText figure.image.image-style-side, .messageSignature > div figure.image.image-style-side {
  float: right;
  margin: 0 0 20px 20px;
}
.containerContent hr, .htmlContent hr, .ck.ck-content.ck-editor__editable hr, .messageBody > .messageText hr, .messageSignature > div hr {
  border: 0;
  border-top: 1px solid var(--wcfContentBorderInner);
  height: 0;
}
.separatorLeft::before {
  color: var(--wcfContentText);
  content: "·";
  margin-right: 0.25em;
}
.separatorRight::after {
  color: var(--wcfContentText);
  content: "·";
  margin-left: 0.25em;
}
.pointer {
  cursor: pointer;
}
a.externalURL::after {
  content: " ↗";
  font-weight: normal !important;
  font-style: normal !important;
}
.visuallyHidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  width: 1px !important;
}
/* Hide the focus ring for mouse interactions, but support them for keyboard navigation.
   See https://github.com/WICG/focus-visible and https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}
summary {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
/*!
 * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*
 * Attention: This is a modified version containing only the sizes
 * "xs" (mobile) and "md" (desktop). Additionally the "push", "pull",
 * "first" and "last" classes have been left out.
 */
.row {
  display: flex;
  margin-right: -10px;
  margin-left: -10px;
  flex-wrap: wrap;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
.col-xs-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-xs-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-xs-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-xs-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-xs-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.col-xs-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col-xs-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-xs-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-xs-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col-xs-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-xs-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-xs-12 {
  flex: 0 0 100%;
}
.col-xs-offset-0 {
  margin-left: 0;
}
.col-xs-offset-1 {
  margin-left: 8.333333%;
}
.col-xs-offset-2 {
  margin-left: 16.666667%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-4 {
  margin-left: 33.333333%;
}
.col-xs-offset-5 {
  margin-left: 41.666667%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-7 {
  margin-left: 58.333333%;
}
.col-xs-offset-8 {
  margin-left: 66.666667%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-10 {
  margin-left: 83.333333%;
}
.col-xs-offset-11 {
  margin-left: 91.666667%;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
@media screen and (min-width: 769px), print {
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: none;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-pull-1 {
    right: 8.333333%;
  }
  .col-md-pull-2 {
    right: 16.666667%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-4 {
    right: 33.333333%;
  }
  .col-md-pull-5 {
    right: 41.666667%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-7 {
    right: 58.333333%;
  }
  .col-md-pull-8 {
    right: 66.666667%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-10 {
    right: 83.333333%;
  }
  .col-md-pull-11 {
    right: 91.666667%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-push-1 {
    left: 8.333333%;
  }
  .col-md-push-2 {
    left: 16.666667%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-4 {
    left: 33.333333%;
  }
  .col-md-push-5 {
    left: 41.666667%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-7 {
    left: 58.333333%;
  }
  .col-md-push-8 {
    left: 66.666667%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-10 {
    left: 83.333333%;
  }
  .col-md-push-11 {
    left: 91.666667%;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
  .col-md-offset-1 {
    margin-left: 8.333333%;
  }
  .col-md-offset-2 {
    margin-left: 16.666667%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.333333%;
  }
  .col-md-offset-5 {
    margin-left: 41.666667%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.333333%;
  }
  .col-md-offset-8 {
    margin-left: 66.666667%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.333333%;
  }
  .col-md-offset-11 {
    margin-left: 91.666667%;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
}
.row-xs-top {
  -ms-grid-row-align: flex-start;
  align-items: flex-start;
}
.row-xs-center {
  -ms-grid-row-align: center;
  align-items: center;
}
.row-xs-bottom {
  -ms-grid-row-align: flex-end;
  align-items: flex-end;
}
@media screen and (min-width: 769px), print {
  .row-md-top {
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
  }
  .row-md-center {
    -ms-grid-row-align: center;
    align-items: center;
  }
  .row-md-bottom {
    -ms-grid-row-align: flex-end;
    align-items: flex-end;
  }
}
.col-xs-top {
  align-self: flex-start;
}
.col-xs-center {
  align-self: center;
}
.col-xs-bottom {
  align-self: flex-end;
}
@media screen and (min-width: 769px), print {
  .col-md-top {
    align-self: flex-start;
  }
  .col-md-center {
    align-self: center;
  }
  .col-md-bottom {
    align-self: flex-end;
  }
}
/* vertical gap between wrapped columns */
.rowColGap {
  margin-bottom: -20px;
}
.rowColGap > .col-xs-1, .rowColGap > .col-xs-2, .rowColGap > .col-xs-3, .rowColGap > .col-xs-4, .rowColGap > .col-xs-5, .rowColGap > .col-xs-6, .rowColGap > .col-xs-7, .rowColGap > .col-xs-8, .rowColGap > .col-xs-9, .rowColGap > .col-xs-10, .rowColGap > .col-xs-11, .rowColGap > .col-xs-12, .rowColGap > .col-md-1, .rowColGap > .col-md-2, .rowColGap > .col-md-3, .rowColGap > .col-md-4, .rowColGap > .col-md-5, .rowColGap > .col-md-6, .rowColGap > .col-md-7, .rowColGap > .col-md-8, .rowColGap > .col-md-9, .rowColGap > .col-md-10, .rowColGap > .col-md-11, .rowColGap > .col-md-12 {
  margin-bottom: 20px !important;
}
.rowColGap:not(:first-child) {
  margin-top: 20px;
}
.gridList {
  display: grid;
  grid-auto-flow: row;
  row-gap: 20px;
}
.gridListItem {
  --padding: 10px;
  border-radius: 5px;
  display: grid;
  padding: var(--padding);
  position: relative;
}
.gridListItem:not(:first-child)::before {
  border-top: 1px solid var(--wcfContentBorderInner);
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -11px;
}
html:not(.touch) .gridListItem:hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
}
.gridListItemMessage {
  column-gap: 10px;
  grid-template-areas: "image title   type" "image meta    meta" "image content content";
  grid-template-columns: 48px auto minmax(0, min-content);
}
.gridListItemImage {
  grid-area: image;
}
.gridListItemTitle {
  grid-area: title;
}
.gridListItemMeta {
  color: var(--wcfContentDimmedText);
  grid-area: meta;
}
.gridListItemType {
  color: var(--wcfContentDimmedText);
  grid-area: type;
  justify-self: end;
}
.gridListItemContent {
  grid-area: content;
  margin-top: 10px;
}
@media screen and (max-width: 544px) {
  .gridListItem {
    padding: var(--padding) 0;
  }
  .gridListItemMessage {
    grid-template-areas: "image   title" "image   meta" "content content";
    grid-template-columns: 32px auto;
  }
  .gridListItemImage {
    position: relative;
    top: 4px;
  }
  .gridListItemImage .userAvatarImage {
    height: 32px;
    width: 32px;
  }
  .gridListItemLargeIcon {
    display: none;
  }
  .gridListItemMeta a {
    color: inherit;
    pointer-events: none;
  }
  .gridListItemType {
    display: none;
  }
}
@media screen and (min-width: 545px), print {
  .gridListItemSmallIcon {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .gridListItemTitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media screen and (min-width: 545px), print {
  .gridListItemTitle {
    font-weight: 400;
    line-height: 1.28;
  }
}
@media screen and (min-width: 545px) and (min-width: 769px), print {
  .gridListItemTitle {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (min-width: 545px) and (max-width: 768px) {
  .gridListItemTitle {
    font-size: 18px;
  }
}
@media screen and (min-width: 769px), print {
  .gridListItemTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
html.disableScrolling {
  overflow: hidden !important;
}
html.disableScrolling body {
  overflow: hidden !important;
}
@media screen and (min-width: 1025px), print {
  html.disableScrolling {
    padding-right: var(--scrollbar-width, 0);
  }
}
@media screen and (max-width: 1024px) {
  html.disableScrolling {
    /* Fix for the gap when using fullscreen dialogs and the navbar collapses.
		   See https://stackoverflow.com/questions/69589924/ios-15-minimized-address-bar-issue-with-fixed-position-full-screen-content */
    height: 100vh !important;
  }
  html.disableScrolling body {
    position: fixed !important;
  }
}
html, body {
  font-weight: 400;
  min-height: 100vh;
  overflow-x: clip;
  width: 100%;
  line-height: var(--wcfFontLineHeight);
}
@media screen and (min-width: 769px), print {
  html, body {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  html, body {
    font-size: 14px;
  }
}
html {
  overflow-y: scroll;
}
body {
  background-color: var(--wcfContentBackground);
  color: var(--wcfContentText);
  font-family: var(--wcfFontFamily);
  position: relative;
  word-wrap: break-word;
}
a {
  color: var(--wcfContentLink);
  cursor: pointer;
  text-decoration: none;
}
a:hover {
  color: var(--wcfContentLinkActive);
  text-decoration: none;
}
.pageContainer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* <select> fields placed inside a flexbox parent while containing
   long select options will cause an invisible page overflow, when
   one such option is selected. The <select> itself stays within the
   boundaries, but a scrollbar will appear. */
html.iOS select {
  overflow: hidden;
}
/* COLUMN LAYOUT */
.pageHeaderContainer, .boxesHeaderBoxes, .pageNavigation, .pageFooter, .boxesTop, .boxesBottom, .boxesFooterBoxes {
  flex: 0 0 auto;
}
.main {
  flex: 1 0 auto;
}
@media screen and (max-width: 544px) {
  .main {
    padding: 20px 0;
    width: 100%;
  }
}
@media screen and (min-width: 545px) and (max-width: 1024px) {
  .main {
    padding: 40px 0;
    width: 100%;
  }
}
@media screen and (min-width: 1025px), print {
  .main {
    padding: 60px 0;
  }
}
/* use flex-box to enforce a proper side-by-side layout on desktop */
@media screen and (min-width: 1025px), print {
  .main > div {
    display: flex;
  }
  .content {
    flex: 1 1 0px;
  }
  .content.content--sidebar-right {
    flex-basis: calc(100% - 340px);
    max-width: calc(100% - 340px);
  }
  .content.content--sidebar-right + .sidebar {
    margin-left: 30px;
  }
  .sidebar {
    flex: 0 0 310px;
    overflow: hidden;
  }
  .sidebar:first-child {
    margin-right: 30px;
  }
  .sidebar + .content {
    flex-basis: calc(100% - 340px);
    max-width: calc(100% - 340px);
  }
  .sidebar + .content:not(:last-child) {
    flex-basis: calc(100% - 680px);
    max-width: calc(100% - 680px);
  }
}
/* mobile arranges the sidebar and content vertically:
   
   <leftSidebar> <content> <rightSidebar>
   
   becomes:
   
   <leftSidebar>
   <content>
   <rightSidebar>
*/
@media screen and (max-width: 1024px) {
  .sidebar + .content, .content + .sidebar {
    margin-top: 30px;
  }
}
.sideBySide {
  margin-top: 20px;
}
@media screen and (min-width: 769px), print {
  .sideBySide {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .sideBySide > .section {
    display: table-cell;
    vertical-align: top;
    width: 49%;
  }
  .sideBySide > .section + .section {
    padding-left: 2%;
  }
}
.sideBySide.templateDiff {
  --templateDiff-added-background: #90ee90;
  --templateDiff-added-color: inherit;
  --templateDiff-removed-background: #ffb6c1;
  --templateDiff-removed-color: inherit;
}
.sideBySide.templateDiff li {
  margin: 0;
}
.sideBySide.templateDiff .templateDiff--added {
  background-color: var(--templateDiff-added-background);
  color: var(--templateDiff-added-color);
}
.sideBySide.templateDiff .templateDiff--removed {
  background-color: var(--templateDiff-removed-background);
  color: var(--templateDiff-removed-color);
}
html[data-color-scheme="dark"] .sideBySide.templateDiff {
  --templateDiff-added-background: #172810;
  --templateDiff-added-color: #4f9c51;
  --templateDiff-removed-background: #281010;
  --templateDiff-removed-color: #d95654;
}
.inlineItems {
  display: flex;
  flex-wrap: wrap;
}
.inlineItems .inlineItem {
  flex: 0 1 auto;
}
.inlineItems .inlineItem:not(:last-child) {
  margin-right: 5px;
}
.inlineItems.commaSeparated .inlineItem:not(:last-child)::after {
  content: ",";
  padding-left: 1px;
}
.inlineItems.dotSeparated .inlineItem:not(:last-child)::after {
  content: "·";
  margin-left: 5px;
}
#pageOverlayContainer {
  pointer-events: none;
}
#pageOverlayContainer > *:not(.dropdownMenuContainer) {
  pointer-events: all;
}
.pageFooterCopyright {
  background-color: var(--wcfFooterCopyrightBackground);
  color: var(--wcfFooterCopyrightText);
  text-align: center;
}
@media screen and (min-width: 769px), print {
  .pageFooterCopyright {
    padding: 20px 0;
  }
}
@media screen and (max-width: 768px) {
  .pageFooterCopyright {
    padding: 20px 0;
    font-weight: 400;
  }
}
@media screen and (max-width: 768px) and (min-width: 769px) {
  .pageFooterCopyright {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .pageFooterCopyright {
    font-size: 12px;
  }
}
.pageFooterCopyright > .layoutBoundary > div:not(:first-child) {
  margin-top: 10px;
}
.pageFooterCopyright a {
  color: var(--wcfFooterCopyrightLink);
}
.pageFooterCopyright a:hover {
  color: var(--wcfFooterCopyrightLinkActive);
  text-decoration: underline;
}
.pageHeaderContainer {
  background-color: var(--wcfHeaderBackground);
  color: var(--wcfHeaderText);
  z-index: 100;
  /* reserved space for `.pageHeaderPanel` */
  padding-top: 50px;
}
.pageHeaderContainer a {
  color: var(--wcfHeaderLink);
}
.pageHeaderContainer a:hover {
  color: var(--wcfHeaderLinkActive);
}
.pageHeaderContainer .icon {
  color: var(--wcfHeaderText);
}
.pageHeaderPanel {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 300;
}
.pageHeaderPanel > .layoutBoundary {
  display: flex;
}
@media screen and (min-width: 1025px), print {
  .pageHeaderPanel {
    background-color: var(--wcfHeaderMenuBackground);
  }
}
@media screen and (min-width: 1025px), print {
  html.disableScrolling .pageHeaderPanel {
    right: var(--scrollbar-width, 0);
  }
}
.pageHeaderFacade:first-child {
  margin-top: -50px;
}
.pageHeaderFacade > .layoutBoundary {
  align-items: center;
  display: flex;
}
@media screen and (min-width: 1025px), print {
  .pageHeaderFacade > .layoutBoundary {
    align-items: center;
    padding-bottom: 30px;
    padding-top: 30px;
  }
}
/* MAIN MENU */
.mainMenu {
  position: relative;
}
.mainMenu .boxMenu {
  display: flex;
  overflow: hidden;
}
.mainMenu .boxMenu > li {
  flex: 0 0 auto;
}
.mainMenu .boxMenu > li:first-child {
  transition: margin-left 0.24s ease-in-out;
}
.mainMenu .boxMenu > li > a {
  background-color: var(--wcfHeaderMenuLinkBackground);
  align-items: center;
  color: var(--wcfHeaderMenuLink);
  display: flex;
  height: 50px;
  padding: 0 15px;
}
.mainMenu .boxMenu > li > a > span {
  flex: 0 0 auto;
}
.mainMenu .boxMenu > li > a > .boxMenuLinkOutstandingItems {
  margin-left: 5px;
}
.mainMenu .boxMenu > li > span {
  cursor: default;
}
.mainMenu .boxMenu > li.active > a, .mainMenu .boxMenu > li:hover > a {
  background-color: var(--wcfHeaderMenuLinkBackgroundActive);
  color: var(--wcfHeaderMenuLinkActive);
}
.mainMenu .boxMenu > .boxMenuHasChildren:hover .boxMenuDepth1, .mainMenu .boxMenu > .boxMenuHasChildren > a[aria-expanded="true"] ~ .boxMenuDepth1 {
  visibility: visible;
}
.mainMenu .boxMenu .boxMenuDepth1 {
  background-color: var(--wcfHeaderMenuDropdownBackground);
  border: 1px solid var(--wcfHeaderMenuDropdownBorder);
  border-radius: 0 0 var(--wcfBorderRadius) var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadow);
  padding: 5px 0;
  position: absolute;
  visibility: hidden;
}
@media screen and (min-width: 769px), print {
  .mainMenu .boxMenu .boxMenuDepth1 {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  .mainMenu .boxMenu .boxMenuDepth1 {
    font-size: 14px;
  }
}
.mainMenu .boxMenu .boxMenuDepth1 > li > a {
  color: var(--wcfHeaderMenuDropdownLink);
}
.mainMenu .boxMenu .boxMenuDepth1 > li > a, .mainMenu .boxMenu .boxMenuDepth1 > li > span {
  display: block;
  padding: 7px 20px;
  white-space: nowrap;
}
.mainMenu .boxMenu .boxMenuDepth1 > li.active > a, .mainMenu .boxMenu .boxMenuDepth1 > li > a:hover {
  background-color: var(--wcfHeaderMenuDropdownBackgroundActive);
  color: var(--wcfHeaderMenuDropdownLinkActive);
  text-decoration: none;
}
.mainMenu .boxMenu .boxMenuDepth2 li > a {
  color: var(--wcfHeaderMenuDropdownLink);
  display: block;
  padding: 5px 20px 5px 40px;
  white-space: nowrap;
}
.mainMenu .boxMenu .boxMenuDepth2 li.active > a, .mainMenu .boxMenu .boxMenuDepth2 li > a:hover {
  background-color: var(--wcfHeaderMenuDropdownBackgroundActive);
  color: var(--wcfHeaderMenuDropdownLinkActive);
  text-decoration: none;
}
.mainMenu .mainMenuShowPrevious, .mainMenu .mainMenuShowNext {
  align-items: center;
  display: flex;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.24s linear, visibility 0s linear 0.24s;
  visibility: hidden;
  width: 50px;
}
.mainMenu .mainMenuShowPrevious.active, .mainMenu .mainMenuShowNext.active {
  opacity: 1;
  transition-delay: 0s;
  visibility: visible;
}
.mainMenu .mainMenuShowPrevious {
  background: linear-gradient(to left, rgba(var(--wcfHeaderMenuBackground-rgb) / 0) 0%, var(--wcfHeaderMenuBackground) 75%);
  left: 0;
}
.mainMenu .mainMenuShowNext {
  background: linear-gradient(to right, rgba(var(--wcfHeaderMenuBackground-rgb) / 0) 0%, var(--wcfHeaderMenuBackground) 75%);
  justify-content: flex-end;
  right: 0;
}
@media screen and (min-width: 1025px), print {
  .mainMenu {
    flex: 1;
    margin-right: 20px;
  }
}
/* Hack for a font rendering issue in Safari on menu hover */
/* user panel */
.userPanel {
  flex: 0 0 auto;
}
.userPanel > ul {
  display: flex;
  justify-content: flex-end;
}
.userPanel > ul > li {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  /* ringing animation for notification icon */
}
.userPanel > ul > li > a {
  align-items: center;
  background-color: var(--wcfHeaderMenuLinkBackground);
  color: var(--wcfHeaderMenuLink);
  display: flex;
  flex: 0 0 auto;
  height: 50px;
  padding: 0 15px;
  position: relative;
  /* hide icon label */
  /* special styling for update badge */
}
.userPanel > ul > li > a .iconWrapper {
  align-items: center;
  display: flex;
  height: 50px;
}
.userPanel > ul > li > a > span:not(.icon):not(.badge):not(.iconWrapper) {
  display: none;
}
.userPanel > ul > li > a > .badgeUpdate {
  box-shadow: -1px 2px 3px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(225, 225, 225, 0.3);
  left: 35px;
  padding: 1px 6px;
  position: absolute;
  top: 4px;
  z-index: 101;
}
.userPanel > ul > li > a .icon {
  color: var(--wcfHeaderMenuLink);
}
.userPanel > ul > li.dropdownOpen > a, .userPanel > ul > li.open > a, .userPanel > ul > li:hover > a {
  background-color: var(--wcfHeaderMenuLinkBackgroundActive);
  color: var(--wcfHeaderMenuLinkActive);
}
.userPanel > ul > li.dropdownOpen > a .icon, .userPanel > ul > li.open > a .icon, .userPanel > ul > li:hover > a .icon {
  color: var(--wcfHeaderMenuLinkActive);
}
.userPanel > ul > li#userNotifications:not([data-count="0"]) > a > .icon {
  animation: fa-bell-ring 5s ease 10s 6;
  transform-origin: 50% 0;
}
/* LOGO */
@media screen and (min-width: 1025px), print {
  .pageHeaderLogo {
    flex: 1 1 auto;
  }
  .pageHeaderLogo .pageHeaderLogoLarge {
    height: auto;
    max-width: 100%;
  }
  .pageHeaderLogo .pageHeaderLogoSmall {
    display: none;
  }
  .pageHeaderLogo > a {
    display: block;
    padding: 10px 0;
  }
}
@media screen and (max-width: 1024px) {
  .pageHeaderLogo .pageHeaderLogoLarge {
    display: none;
  }
  .pageHeaderLogo .pageHeaderLogoSmall {
    max-height: 30px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
  }
}
/* SEARCH AREA */
.pageHeaderSearch {
  display: none;
  position: fixed;
}
@media screen and (min-width: 1025px), print {
  .pageHeaderSearchMobile, .pageHeaderMenuMobile, .userPanelLoginLink, .pageHeaderUserMobile {
    display: none;
  }
}
.searchBarOpen .pageHeaderSearch {
  display: block;
  /* required for Edge */
  z-index: 100;
}
.pageHeaderSearchInputContainer {
  display: flex;
  /* Increases the specificity to overrule the CSS for <button>. */
}
.pageHeaderSearchInputContainer .pageHeaderSearchType {
  display: flex;
}
.pageHeaderSearchInputContainer .pageHeaderSearchType > .button {
  align-items: center;
  background-color: var(--wcfHeaderMenuLinkBackground);
  border-radius: 0 0 0 2px;
  color: var(--wcfHeaderMenuLink);
  display: flex;
  justify-content: space-between;
  max-width: 200px;
  min-width: 130px;
  padding: 4px 8px;
  position: relative;
  text-align: left;
}
.pageHeaderSearchInputContainer .pageHeaderSearchType > .button > .pageHeaderSearchTypeLabel {
  flex: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pageHeaderSearchInputContainer .pageHeaderSearchType > .button:hover, .pageHeaderSearchInputContainer .pageHeaderSearchType.dropdownOpen > .button {
  background-color: var(--wcfHeaderMenuLinkBackgroundActive);
  color: var(--wcfHeaderMenuLinkActive);
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput {
  background-color: var(--wcfHeaderSearchBoxBackground);
  border-radius: 0;
  border-width: 0;
  color: var(--wcfHeaderSearchBoxText);
  padding-bottom: 8px;
  padding-top: 8px;
  width: 250px;
  /* set placeholder color, do not chain these with a comma
		   as an unrecognized value causes the instruction to be
		   discarded in entirety */
  /* remove broken cancel-button (webkit) */
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput:focus, .pageHeaderSearchInputContainer .pageHeaderSearchInput:hover {
  background-color: var(--wcfHeaderSearchBoxBackgroundActive);
  color: var(--wcfHeaderSearchBoxTextActive);
  /* set placeholder color, do not chain these with a comma
			   as an unrecognized value causes the instruction to be
			   discarded in entirety */
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput:focus::-webkit-input-placeholder, .pageHeaderSearchInputContainer .pageHeaderSearchInput:hover::-webkit-input-placeholder {
  /* WebKit browsers */
  color: var(--wcfHeaderSearchBoxPlaceholderActive);
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput:focus::-moz-placeholder, .pageHeaderSearchInputContainer .pageHeaderSearchInput:hover::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: var(--wcfHeaderSearchBoxPlaceholderActive);
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput:focus:-ms-input-placeholder, .pageHeaderSearchInputContainer .pageHeaderSearchInput:hover:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: var(--wcfHeaderSearchBoxPlaceholderActive);
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput::-webkit-input-placeholder {
  /* WebKit browsers */
  color: var(--wcfHeaderSearchBoxPlaceholder);
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: var(--wcfHeaderSearchBoxPlaceholder);
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: var(--wcfHeaderSearchBoxPlaceholder);
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput::-webkit-search-cancel-button {
  display: none;
}
.pageHeaderSearchInputContainer .pageHeaderSearchInputButton.pageHeaderSearchInputButton {
  background-color: var(--wcfHeaderMenuLinkBackground);
  border-radius: 0 0 2px 0;
  color: var(--wcfHeaderMenuLink);
  padding: 4px 9px;
}
.pageHeaderSearchInputContainer .pageHeaderSearchInputButton.pageHeaderSearchInputButton:hover {
  background-color: var(--wcfHeaderMenuLinkBackgroundActive);
  color: var(--wcfHeaderMenuLinkActive);
}
@media screen and (max-width: 1024px) {
  .pageHeader {
    align-items: center;
    background-color: var(--wcfHeaderBackground);
    column-gap: 10px;
    display: grid;
    grid-template-areas: "logo search user menu";
    grid-template-columns: auto repeat(3, max-content);
    height: 50px;
    left: 0;
    padding: 0 6px;
    position: fixed;
    right: 0;
    top: 0;
  }
  .pageHeader.pageHeader--authFlow {
    display: flex;
    justify-content: center;
  }
  .pageHeaderPanel, .pageHeaderFacade, .pageHeaderPanel .layoutBoundary, .pageHeaderFacade .layoutBoundary {
    display: contents;
    position: static;
  }
  .pageHeaderSearchMobile, .userPanel, .pageHeaderMenuMobile {
    align-items: center;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
  }
  .pageHeaderLogo {
    grid-area: logo;
  }
  .pageHeaderLogo a {
    align-items: center;
    display: inline-flex;
    height: 40px;
    padding: 0 4px;
  }
  .pageHeaderSearchMobile {
    grid-area: search;
  }
  .pageHeaderUserMobile {
    align-items: center;
    display: flex;
    grid-area: user;
    height: 40px;
    justify-content: center;
    width: 40px;
  }
  .pageHeaderUserMobile[aria-expanded="false"] .pageHeaderUserMobileActive {
    display: none;
  }
  .pageHeaderUserMobile[aria-expanded="true"] .pageHeaderUserMobileInactive {
    display: none;
  }
  .userPanel, .mainMenu {
    display: none;
  }
  .pageHeaderMenuMobile {
    grid-area: menu;
  }
  .pageHeaderMenuMobile[aria-expanded="false"] .pageHeaderMenuMobileActive {
    display: none;
  }
  .pageHeaderMenuMobile[aria-expanded="true"] .pageHeaderMenuMobileInactive {
    display: none;
  }
  .mainMenu.pageMenuMobileButtonHasContent ~ .pageHeaderMenuMobile[aria-expanded="false"], .userPanel.pageMenuMobileButtonHasContent ~ .pageHeaderUserMobile[aria-expanded="false"] {
    position: relative;
  }
  .mainMenu.pageMenuMobileButtonHasContent ~ .pageHeaderMenuMobile[aria-expanded="false"]::after, .userPanel.pageMenuMobileButtonHasContent ~ .pageHeaderUserMobile[aria-expanded="false"]::after {
    background-color: #f44336;
    border: 2px solid var(--wcfHeaderBackground);
    border-radius: 50%;
    content: "";
    height: 14px;
    position: absolute;
    right: 0;
    top: 0;
    width: 14px;
  }
  .userPanelLoginLink {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
  }
  .userPanelLoginLink fa-icon {
    color: var(--wcfHeaderText);
  }
  .userPanel.hideUserPanel::before {
    visibility: hidden !important;
  }
  .pageHeaderSearch {
    background-color: rgba(0, 0, 0, 0.34);
    bottom: 0;
    left: 0 !important;
    overflow: hidden;
    right: 0 !important;
  }
  .pageHeaderSearch .pageHeaderSearchInputContainer {
    border-radius: 0;
    box-shadow: var(--wcfBoxShadow);
    display: flex;
    flex-wrap: wrap;
  }
  .pageHeaderSearch .pageHeaderSearchInputContainer .pageHeaderSearchType {
    flex: 0 0 100%;
  }
  .pageHeaderSearch .pageHeaderSearchInputContainer .pageHeaderSearchType > .button {
    border-radius: 0;
    max-width: unset;
    min-width: unset;
    padding-bottom: 8px;
    padding-top: 8px;
    width: 100%;
  }
  .pageHeaderSearch .pageHeaderSearchInputContainer .pageHeaderSearchInput {
    flex: 1 1 auto;
  }
  .pageHeaderSearch .pageHeaderSearchInputContainer .pageHeaderSearchInputButton {
    border-radius: 0;
  }
  .pageHeaderSearch:not(.open) {
    display: none;
  }
}
/* print version */
@media print {
  /** reset font colors, backgrounds and shadows **/
  /** hide obsolete elements **/
  /* general elements */
  /** minor optimizations **/
  /* see https://bugzilla.mozilla.org/show_bug.cgi?id=939897 */
  *, ::after, ::before {
    background: 0 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
  .pageHeaderContainer, .userNotice, .pageAction, .contentHeaderNavigation, .contentFooterNavigation, .contentInteraction, .paginationTop, .paginationBottom, .buttonList, .collapsibleButton, .columnMark, .statusDisplay, .dialogContainer, .formSubmit, .tabMenu > ul > li:not(.active), .showMore, .boxesSidebarLeft, .boxesSidebarRight, .boxesFooterBoxes, .boxesFooter, .messageFooterButtons, .messageFooterButtonsExtra, .messageQuickOptions, .messageGroupEditLink, #messageQuickReply, .messageAuthor .badgeOnline, .jsCommentAdd, .userProfileCoverPhoto, .containerListButtonGroup {
    /* box layout */
    /* message layout */
    /* comment layout */
    /* user profile */
    display: none !important;
  }
  .main {
    padding: 20px 0;
  }
  .content {
    flex-basis: auto !important;
    max-width: none !important;
  }
  .pageNavigation {
    display: block;
    padding-top: 10px;
  }
  .pageNavigation .breadcrumbs {
    margin-left: 0;
  }
  .badge {
    padding: 0 !important;
  }
  .badge::before {
    content: "[";
  }
  .badge::after {
    content: "]";
  }
  .userProfileUser {
    position: static !important;
  }
  a.externalURL::after {
    content: " (" attr(href) ")";
  }
  .messageList, .messageList > li:not(:first-child) {
    border-top: 1px solid var(--wcfContentBorder);
  }
  .messageList > li {
    padding-top: 20px;
  }
  .messageSidebar {
    margin: 0 !important;
    padding: 0 !important;
  }
  .pageContainer, .main > div {
    display: block !important;
  }
}
.sidebarItemList > li:not(:last-child) {
  margin-bottom: 10px;
}
.sidebarItemListEntry {
  column-gap: 8px;
  display: grid;
  grid-template-columns: 24px auto;
  position: relative;
}
.sidebarItemListEntryLink::before {
  content: "";
  inset: 0;
  position: absolute;
}
.sidebarItem.new h3 {
  font-weight: 600;
}
.sidebar select {
  width: 100%;
}
.sidebar select + select {
  margin-top: 10px;
}
/* legacy styling for sidebars (deprecated) */
.sidebar fieldset {
  margin-top: 0;
}
.sidebar fieldset > legend {
  float: left;
  width: 100%;
}
.sidebar fieldset > legend + * {
  clear: left;
}
.sidebar .boxContainer > div:not(.box), .sidebar .boxContainer > fieldset, .sidebar .boxContainer > section:not(.box) {
  background-color: var(--wcfSidebarBackground);
}
@media screen and (min-width: 769px), print {
  .sidebar .boxContainer > div:not(.box), .sidebar .boxContainer > fieldset, .sidebar .boxContainer > section:not(.box) {
    padding: 20px;
  }
}
@media screen and (max-width: 768px) {
  .sidebar .boxContainer > div:not(.box), .sidebar .boxContainer > fieldset, .sidebar .boxContainer > section:not(.box) {
    padding: 20px 10px;
  }
}
.sidebar .boxContainer > div:not(.box):not(:first-child), .sidebar .boxContainer > fieldset:not(:first-child), .sidebar .boxContainer > section:not(.box):not(:first-child) {
  margin-top: 30px;
}
.sidebar .boxContainer section:not(.box) > h1, .sidebar .boxContainer fieldset > legend {
  color: var(--wcfSidebarHeadlineText);
  border-bottom-width: 0;
  margin-bottom: 15px;
  padding: 0;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .sidebar .boxContainer section:not(.box) > h1, .sidebar .boxContainer fieldset > legend {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .sidebar .boxContainer section:not(.box) > h1, .sidebar .boxContainer fieldset > legend {
    font-size: 18px;
  }
}
.sidebar .boxContainer section:not(.box) > h1 > a, .sidebar .boxContainer fieldset > legend > a {
  color: var(--wcfSidebarHeadlineLink);
}
.sidebar .boxContainer section:not(.box) > h1 > a > .icon, .sidebar .boxContainer fieldset > legend > a > .icon {
  color: var(--wcfSidebarHeadlineLink);
}
.sidebar .boxContainer section:not(.box) > h1 > a:hover, .sidebar .boxContainer fieldset > legend > a:hover {
  color: var(--wcfSidebarHeadlineLinkActive);
}
.sidebar .boxContainer section:not(.box) > h1 > a:hover > .icon, .sidebar .boxContainer fieldset > legend > a:hover > .icon {
  color: var(--wcfSidebarHeadlineLinkActive);
}
.sidebar .formSubmit:not(:first-child) {
  margin-top: 20px;
}
.sidebar .boxContainer > div .boxContent::before, .sidebar .boxContainer > div .boxContent::after, .sidebar .boxContainer > fieldset .boxContent::before, .sidebar .boxContainer > fieldset .boxContent::after, .sidebar .boxContainer > section .boxContent::before, .sidebar .boxContainer > section .boxContent::after {
  display: table;
  content: "";
}
.sidebar .boxContainer > div .boxContent::after, .sidebar .boxContainer > fieldset .boxContent::after, .sidebar .boxContainer > section .boxContent::after {
  clear: both;
}
.sidebar .boxContainer > div .button.more, .sidebar .boxContainer > fieldset .button.more, .sidebar .boxContainer > section .button.more {
  float: right;
  margin-top: 15px;
}
.sidebar .boxTitle .badge {
  float: right;
  top: 2px;
}
.sidebar .sidebarBoxList > li:not(:last-child) {
  margin-bottom: 10px;
}
.accountSecurityContainer {
  align-items: center;
  display: flex;
}
@media screen and (max-width: 768px) {
  .accountSecurityContainer {
    align-items: flex-start;
    flex-direction: column;
  }
}
.accountSecurityInformation {
  flex: 1 auto;
}
.accountSecurityInformationLink {
  color: inherit;
}
.accountSecurityButtons {
  flex: 0 0 auto;
}
@media screen and (min-width: 769px), print {
  .accountSecurityButtons {
    margin-left: 10px;
  }
}
@media screen and (max-width: 768px) {
  .accountSecurityButtons {
    align-self: flex-end;
    margin-top: 5px;
  }
}
.multifactorBackupCode {
  font-family: var(--wcfFontFamilyMonospace) !important;
}
.multifactorBackupCode.used {
  text-decoration: line-through;
}
.multifactorBackupCode .chunk {
  margin-left: 5px;
}
.multifactorBackupCode .chunk:first-child {
  margin-left: 0;
  font-weight: 600;
}
@media not print {
  .multifactorBackupCodesPrintMetadata {
    display: none !important;
  }
}
@media print {
  .multifactorBackupCodesPrintButton {
    display: none !important;
  }
  .multifactorBackupCodesPrintContainer {
    padding: 1cm !important;
    position: absolute !important;
    background: white !important;
    inset: 0 !important;
  }
  .multifactorBackupCodesPrintContainer .multifactorBackupCodesPrintMetadata {
    max-width: 9cm !important;
  }
}
input.multifactorTotpCode, input.multifactorEmailCode, input.multifactorBackupCode {
  font-family: var(--wcfFontFamilyMonospace) !important;
  font-weight: 600;
  box-sizing: content-box;
}
input.multifactorTotpCode[size="6"], input.multifactorEmailCode[size="6"], input.multifactorBackupCode[size="6"] {
  width: 6ch;
  font-size: 28px;
}
input.multifactorTotpCode[size="8"], input.multifactorEmailCode[size="8"], input.multifactorBackupCode[size="8"] {
  width: 8ch;
  font-size: 28px;
}
input.multifactorTotpCode[size="23"], input.multifactorEmailCode[size="23"], input.multifactorBackupCode[size="23"] {
  width: 23ch;
  font-size: 18px;
}
.multifactorTotpNewDevice {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.multifactorTotpNewDevice .totpSecretContainer {
  text-align: center;
}
.multifactorTotpNewDevice .totpSecretContainer canvas {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 3px;
  border: 3px solid #fff;
  box-sizing: content-box;
}
.multifactorTotpNewDevice .totpSecret {
  display: inline-block;
  margin-top: 10px;
}
.multifactorTotpNewDevice .multifactorTotpNewDeviceFields {
  flex: 1 1 auto;
}
@media screen and (min-width: 769px), print {
  .multifactorTotpNewDevice {
    flex-direction: row;
  }
  .multifactorTotpNewDevice .totpSecretContainer {
    width: 250px;
    margin: 0 5px;
  }
}
/* object list, e.g. users and groups */
.aclList {
  max-height: 400px;
  overflow: auto;
}
.aclList:not(:empty) {
  border-bottom: 1px solid var(--wcfContentBorder);
  border-top: 1px solid var(--wcfContentBorder);
}
.aclListItem {
  align-items: center;
  display: flex;
  padding: 10px 0;
}
.aclListItem:not(.active) {
  cursor: pointer;
}
.aclListItem.active {
  background-color: var(--wcfTabularBoxBackgroundActive);
}
.aclItemDeleteButton {
  flex: 0 0 36px;
  padding: 0 5px;
}
.aclLabel {
  flex: 1 1 auto;
  margin: 0 5px;
}
.aclListItem:first-child {
  border-top: none;
}
.aclListItem:last-child {
  border-bottom: none;
}
/* search input */
.aclSearchInput {
  margin-top: 20px !important;
}
/* permissions per object */
.aclPermissionList {
  margin-top: 40px;
  position: relative;
  display: grid;
  column-gap: 1px;
  grid-template-columns: 10px auto repeat(3, 60px);
  grid-template-rows: auto;
}
.aclPermissionListItem:not(:last-child):not(:first-child) {
  border-bottom: 1px solid var(--wcfContentBorderInner);
}
.aclOption {
  grid-column: 1 / span 5;
  transition: background-color 0.2s;
  padding: 10px 0;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.aclOptionTitle {
  grid-column: span 2;
  grid-column-start: 2;
}
.aclOptionInputLabel {
  text-align: center;
  cursor: pointer;
}
.aclOption:hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
}
.aclCategory {
  grid-column: 1 / span 5;
  padding: 20px 10px 10px 0;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .aclCategory {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .aclCategory {
    font-size: 18px;
  }
}
.aclHeader {
  grid-column: 1 / span 5;
  position: sticky;
  border-bottom: 1px solid var(--wcfContentBorder);
  top: 50px;
  background-color: var(--wcfContentContainerBackground);
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.aclHeaderSpan {
  padding: 10px 0;
  text-align: center;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .aclHeaderSpan {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .aclHeaderSpan {
    font-size: 12px;
  }
}
.aclHeaderInherited {
  grid-column-start: 3;
}
.aclHeaderGrant {
  grid-column-start: 4;
}
.aclHeaderDeny {
  grid-column-start: 5;
}
.wcfAdLocation {
  overflow: hidden;
}
@media screen and (min-width: 1025px), print {
  .wcfAdLocationLogo {
    float: right;
    margin-left: 30px;
  }
}
@media screen and (max-width: 1024px) {
  .wcfAdLocationLogo {
    display: none;
  }
}
.wcfAdLocationHeaderContent {
  margin-bottom: 20px;
}
.wcfAdLocationFooterContent {
  margin-top: 20px;
}
.wcfAdLocationHeaderContent, .wcfAdLocationFooterContent, .wcfAdLocationFooterBottom, .wcfAdLocationSidebarTop, .wcfAdLocationSidebarBottom {
  text-align: center;
}
.wcfAdLocationHeaderContent > div, .wcfAdLocationFooterContent > div, .wcfAdLocationFooterBottom > div, .wcfAdLocationSidebarTop > div, .wcfAdLocationSidebarBottom > div {
  display: inline-block;
  text-align: left;
}
/* placeholder sizes, required for Google AdSense */
@media screen and (min-width: 1025px), print {
  .wcfAdLocationLogo .adsbygoogle {
    height: 60px;
    width: 468px;
  }
}
@media screen and (max-width: 544px) {
  .wcfAdLocationHeaderContent .adsbygoogle, .wcfAdLocationFooterContent .adsbygoogle {
    height: 50px;
    width: 320px;
  }
}
@media screen and (min-width: 545px), print {
  .wcfAdLocationHeaderContent .adsbygoogle, .wcfAdLocationFooterContent .adsbygoogle {
    height: 60px;
    width: 468px;
  }
}
@media screen and (min-width: 545px) and (max-width: 768px) {
  .wcfAdLocationFooterBottom .adsbygoogle {
    height: 60px;
    width: 468px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .wcfAdLocationFooterBottom .adsbygoogle {
    height: 90px;
    width: 728px;
  }
}
@media screen and (min-width: 1025px), print {
  .wcfAdLocationFooterBottom .adsbygoogle {
    height: 90px;
    width: 970px;
  }
}
@media screen and (max-width: 1024px) {
  .wcfAdLocationSidebarTop .adsbygoogle, .wcfAdLocationSidebarBottom .adsbygoogle {
    height: 250px;
    width: 300px;
  }
}
@media screen and (min-width: 1025px), print {
  .wcfAdLocationSidebarTop .adsbygoogle, .wcfAdLocationSidebarBottom .adsbygoogle {
    height: 600px;
    width: 160px;
  }
}
.error, .info, .success, .warning {
  border: 1px solid transparent;
  border-radius: var(--wcfBorderRadius);
  margin-top: 20px;
}
@media screen and (min-width: 769px), print {
  .error, .info, .success, .warning {
    padding: 10px 20px;
  }
}
@media screen and (max-width: 768px) {
  .error, .info, .success, .warning {
    padding: 10px;
  }
}
.error a, .info a, .success a, .warning a {
  font-weight: 600;
}
.error a:hover, .info a:hover, .success a:hover, .warning a:hover {
  text-decoration: underline;
}
.error {
  background-color: var(--wcfStatusErrorBackground);
  border-color: var(--wcfStatusErrorBorder);
  color: var(--wcfStatusErrorText);
}
.error a {
  color: var(--wcfStatusErrorLink);
}
.error a:hover {
  color: var(--wcfStatusErrorLinkActive);
}
.info {
  background-color: var(--wcfStatusInfoBackground);
  border-color: var(--wcfStatusInfoBorder);
  color: var(--wcfStatusInfoText);
}
.info a {
  color: var(--wcfStatusInfoLink);
}
.info a:hover {
  color: var(--wcfStatusInfoLinkActive);
}
.success {
  background-color: var(--wcfStatusSuccessBackground);
  border-color: var(--wcfStatusSuccessBorder);
  color: var(--wcfStatusSuccessText);
}
.success a {
  color: var(--wcfStatusSuccessLink);
}
.success a:hover {
  color: var(--wcfStatusSuccessLinkActive);
}
.warning {
  background-color: var(--wcfStatusWarningBackground);
  border-color: var(--wcfStatusWarningBorder);
  color: var(--wcfStatusWarningText);
}
.warning a {
  color: var(--wcfStatusWarningLink);
}
.warning a:hover {
  color: var(--wcfStatusWarningLinkActive);
}
.innerError, .innerInfo, .innerSuccess, .innerWarning {
  display: table;
  line-height: 1.5;
  margin-top: 8px;
  padding: 5px 10px;
  position: relative;
  /* pointer */
}
.innerError::before, .innerInfo::before, .innerSuccess::before, .innerWarning::before {
  border: 6px solid transparent;
  border-top-width: 0;
  content: "";
  display: inline-block;
  left: 10px;
  position: absolute;
  top: -6px;
  z-index: 99;
}
/* inline messages */
.innerError {
  background-color: #f2dede;
  color: #a94442;
}
.innerError::before {
  border-bottom-color: #f2dede;
}
.innerError a {
  color: var(--wcfStatusErrorLink);
}
.innerError a:hover {
  color: var(--wcfStatusErrorLinkActive);
}
.innerSuccess {
  background-color: var(--wcfStatusSuccessBackground);
  color: var(--wcfStatusSuccessText);
}
.innerSuccess::before {
  border-bottom-color: var(--wcfStatusSuccessBackground);
}
.innerSuccess a {
  color: var(--wcfStatusSuccessLink);
}
.innerSuccess a:hover {
  color: var(--wcfStatusSuccessLinkActive);
}
.innerWarning {
  background-color: var(--wcfStatusWarningBackground);
  color: var(--wcfStatusWarningText);
}
.innerWarning::before {
  border-bottom-color: var(--wcfStatusWarningBackground);
}
.innerWarning a {
  color: var(--wcfStatusWarningLink);
}
.innerWarning a:hover {
  color: var(--wcfStatusWarningLinkActive);
}
/* sticky footer notices */
.pageFooterStickyNotice {
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 600;
}
.pageFooterStickyNotice .error, .pageFooterStickyNotice .info, .pageFooterStickyNotice .success, .pageFooterStickyNotice .warning {
  border-left-width: 0;
  border-top-width: 1px;
  border-top-style: solid;
  margin-top: 0;
  padding: 10px 0;
}
@media screen and (max-width: 768px) {
  .pageFooterStickyNotice .error, .pageFooterStickyNotice .info, .pageFooterStickyNotice .success, .pageFooterStickyNotice .warning {
    font-weight: 400;
  }
}
@media screen and (max-width: 768px) and (min-width: 769px) {
  .pageFooterStickyNotice .error, .pageFooterStickyNotice .info, .pageFooterStickyNotice .success, .pageFooterStickyNotice .warning {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .pageFooterStickyNotice .error, .pageFooterStickyNotice .info, .pageFooterStickyNotice .success, .pageFooterStickyNotice .warning {
    font-size: 12px;
  }
}
.pageFooterStickyNotice .cookiePolicyNotice .layoutBoundary {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .pageFooterStickyNotice .cookiePolicyNotice .layoutBoundary {
    flex-wrap: wrap;
  }
}
.pageFooterStickyNotice .cookiePolicyNotice .cookiePolicyNoticeText {
  flex: 1 1 auto;
}
@media screen and (max-width: 768px) {
  .pageFooterStickyNotice .cookiePolicyNotice .cookiePolicyNoticeText {
    flex-basis: 100%;
    margin-bottom: 5px;
  }
}
.pageFooterStickyNotice .cookiePolicyNotice .cookiePolicyNoticeMoreInformation, .pageFooterStickyNotice .cookiePolicyNotice .cookiePolicyNoticeDismiss {
  flex: 0 0 auto;
}
.pageFooterStickyNotice .cookiePolicyNotice .cookiePolicyNoticeDismiss {
  margin-left: 5px;
}
/* dialogs */
.dialogContent .error:first-child, .dialogContent .info:first-child, .dialogContent .success:first-child, .dialogContent .warning:first-child, .dialog__content .error:first-child, .dialog__content .info:first-child, .dialog__content .success:first-child, .dialog__content .warning:first-child {
  margin-bottom: 20px;
  margin-top: 0;
}
/* inline infos */
.innerInfo {
  background-color: var(--wcfStatusInfoBackground);
  color: var(--wcfStatusInfoText);
}
.innerInfo::before {
  border-bottom-color: var(--wcfStatusInfoBackground);
}
.innerInfo a {
  color: var(--wcfStatusInfoLink);
}
.innerInfo a:hover {
  color: var(--wcfStatusInfoLinkActive);
}
/* dismiss icon */
.noticeDismissible > .jsDismissNoticeButton {
  float: right;
}
@media screen and (max-width: 1024px) {
  .noticeDismissible > .jsDismissNoticeButton {
    font-size: 18px;
    height: 24px;
    line-height: 24px;
    width: 24px;
  }
}
.userExceptionMessage {
  align-self: center;
}
.articleTeaser {
  font-weight: 600;
}
.articleTeaser + .tableOfContentsWrapper {
  margin-top: 20px;
}
.articleTeaserContainer + .section, .articleImageContainer + .section {
  margin-top: 20px !important;
}
.articleImage, .contentCoverPhotoImage {
  /* work-around for IE 11 to properly align the image if overflowing */
  display: flex;
  flex-wrap: wrap;
}
.articleImage .articleImageWrapper, .articleImage .contentCoverPhotoImageWrapper, .contentCoverPhotoImage .articleImageWrapper, .contentCoverPhotoImage .contentCoverPhotoImageWrapper {
  align-items: center;
  border-radius: 3px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: flex;
  max-height: 300px;
  overflow: hidden;
  width: 100%;
}
.articleImage .articleImageWrapper img, .articleImage .contentCoverPhotoImageWrapper img, .contentCoverPhotoImage .articleImageWrapper img, .contentCoverPhotoImage .contentCoverPhotoImageWrapper img {
  height: auto !important;
  width: 100% !important;
}
.articleImage figcaption, .contentCoverPhotoImage figcaption {
  color: var(--wcfContentDimmedText);
  flex: 1 0 100%;
  margin-top: 5px;
  text-align: center;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .articleImage figcaption, .contentCoverPhotoImage figcaption {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .articleImage figcaption, .contentCoverPhotoImage figcaption {
    font-size: 12px;
  }
}
.articleContent .articleTagList {
  margin-top: 20px;
}
.articleContent .articleLikeSection {
  align-items: center;
}
.articleContent .articleButtons {
  justify-content: flex-end;
}
.articleContent .articleLikesSummery:not(:empty), .articleContent .articleButtons:not(:empty) {
  margin-top: 20px;
}
.articleContent .anchorFixedHeader:target::before {
  content: "";
  display: block;
  height: 50px;
  margin-top: -50px;
}
.articleAboutAuthor .articleAboutAuthorText {
  font-style: italic;
}
.articleAboutAuthor .articleAboutAuthorUsername {
  margin-top: 5px;
}
.articleAboutAuthor .articleAboutAuthorUsername .username {
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .articleAboutAuthor .articleAboutAuthorUsername .username {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .articleAboutAuthor .articleAboutAuthorUsername .username {
    font-size: 18px;
  }
}
.articleAboutAuthor .articleAboutAuthorUsername .userTitleBadge {
  top: -2px;
}
.articleNavigation {
  column-gap: 20px;
  display: grid;
  grid-template-areas: "previous next";
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 768px) {
  .articleNavigation {
    column-gap: 0;
    grid-template-areas: "previous" "next";
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}
.articleNavigationArticle {
  color: var(--wcfContentText);
  display: grid;
  grid-template-rows: repeat(2, minmax(0, max-content));
  position: relative;
}
.articleNavigationArticle.previousArticleButton {
  grid-area: previous;
  grid-template-areas: "icon content";
  grid-template-columns: 60px auto;
}
.articleNavigationArticle.nextArticleButton {
  grid-area: next;
  grid-template-areas: "content icon";
  text-align: right;
}
.articleNavigationArticle.articleNavigationArticleWithImage.previousArticleButton {
  grid-template-areas: "icon image content";
  grid-template-columns: 60px 96px auto;
}
.articleNavigationArticle.articleNavigationArticleWithImage.nextArticleButton {
  grid-template-areas: "content image icon";
  grid-template-columns: auto 96px 60px;
  text-align: right;
}
.articleNavigationArticleIcon {
  align-self: center;
  grid-area: icon;
}
body:not(.touch) .articleNavigationArticle:hover .articleNavigationArticleIcon {
  color: var(--wcfContentLinkActive);
}
.articleNavigationArticleImage {
  border-radius: 3px;
  grid-area: image;
  overflow: hidden;
}
.previousArticleButton.articleNavigationArticleWithImage .articleNavigationArticleContent {
  margin-left: 20px;
}
.nextArticleButton.articleNavigationArticleWithImage .articleNavigationArticleContent {
  margin-right: 20px;
}
.articleNavigationArticleContent {
  grid-area: content;
}
.articleNavigationEntityName {
  color: var(--wcfContentDimmedText);
  display: block;
}
.articleNavigationArticleTitle {
  display: block;
  margin-top: 5px;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .articleNavigationArticleTitle {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .articleNavigationArticleTitle {
    font-size: 18px;
  }
}
.articleNavigationArticleLink {
  color: var(--wcfContentText);
}
.articleNavigationArticleLink::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.articleList .articleListMetaData {
  color: var(--wcfContentDimmedText);
  margin-top: 2px;
}
.articleList .articleListMetaData .icon {
  color: inherit;
}
.articleList a {
  color: inherit;
}
.articleList a:hover {
  color: inherit;
}
.articleList a:hover .articleListImage > img {
  opacity: 1;
}
.articleList a:hover .articleListTitle {
  color: var(--wcfContentLinkActive);
}
.articleList .articleListImage > img {
  border-radius: 2px;
  opacity: 0.85;
  transition: 0.2s ease opacity;
}
.articleList > li:not(:first-child) {
  margin-top: 30px;
}
@media screen and (max-width: 544px) {
  .articleList .box128 > .articleListImage {
    margin-right: 10px;
  }
  .articleList .articleListImage > img {
    height: 64px !important;
    width: 64px !important;
  }
}
.boxesFooterBoxes .articleList {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -20px -5px;
}
.boxesFooterBoxes .articleList > li {
  margin: 0 5px 20px 5px;
}
.boxesFooterBoxes .articleList .articleListImage > img {
  height: auto !important;
  max-width: 280px;
  width: 100% !important;
}
.boxesFooterBoxes .articleList .articleListImage + .articleListTitle {
  margin-top: 5px;
}
.boxesFooterBoxes .articleList .articleListMetaData {
  display: none;
}
@media screen and (min-width: 1025px), print {
  .boxesFooterBoxes .articleList > li {
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% / 3 - 10px);
  }
  .boxesFooterBoxes .boxFullWidth .articleList > li {
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% / 6 - 10px);
  }
}
@media screen and (min-width: 545px), print {
  .boxesFooterBoxes .articleList > li {
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% / 3 - 10px);
  }
}
@media screen and (max-width: 544px) {
  .boxesFooterBoxes .articleList {
    justify-content: center;
  }
  .boxesFooterBoxes .articleList > li {
    width: 280px;
  }
}
.discussionProviderCtaContainer {
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
/* attachment list in messages */
.attachmentFileList > ul > li:not(:last-child) {
  margin-right: 10px;
}
/* attachment in messages */
.attachmentThumbnailList > ul {
  margin-bottom: -15px;
}
@media screen and (min-width: 545px), print {
  .attachmentThumbnailList > ul {
    margin-right: -10px;
  }
}
.attachmentThumbnail {
  border: 1px solid transparent;
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadowCard);
  margin-bottom: 15px !important;
  position: relative;
}
@media screen and (min-width: 545px), print {
  .attachmentThumbnail {
    margin-right: 10px !important;
  }
}
@media screen and (max-width: 544px) {
  .attachmentThumbnail {
    margin-right: 0 !important;
    width: 100%;
  }
}
.attachmentThumbnail .attachmentThumbnailContainer {
  position: relative;
  padding: 2px 2px 0;
}
.attachmentThumbnail .attachmentThumbnailImage {
  align-items: center;
  background-color: #333;
  border-radius: calc(var(--wcfBorderRadius) - 1px);
  display: flex;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
@media screen and (min-width: 545px), print {
  .attachmentThumbnail .attachmentThumbnailImage {
    height: 198px;
    width: 352px;
  }
}
@media screen and (max-width: 544px) {
  .attachmentThumbnail .attachmentThumbnailImage {
    max-height: 198px;
    min-height: 100px;
  }
}
.attachmentThumbnail .attachmentThumbnailImage img {
  backface-visibility: hidden;
  height: auto;
  max-width: 100%;
  opacity: 0.85;
  transform: translate3d(0, 0, 0);
  transition: 0.2s ease opacity;
}
@media screen and (max-width: 544px) {
  .attachmentThumbnail .attachmentThumbnailImage .attachmentThumbnailImageScalable {
    width: 100%;
  }
}
.attachmentThumbnail .attachmentThumbnailData {
  backface-visibility: hidden;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.5) 100%);
  bottom: 0;
  left: 2px;
  pointer-events: none;
  position: absolute;
  right: 2px;
  top: 2px;
  transform: translate3d(0, 0, 0);
}
.attachmentThumbnail .attachmentFilename {
  color: #fff;
  bottom: 0;
  overflow: hidden;
  padding: 10px;
  position: absolute;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  transition: 0.2s ease opacity;
  width: 100%;
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .attachmentThumbnail .attachmentFilename {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .attachmentThumbnail .attachmentFilename {
    font-size: 18px;
  }
}
.attachmentThumbnail .attachmentMetaData {
  color: var(--wcfContentDimmedText);
  padding: 10px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .attachmentThumbnail .attachmentMetaData {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .attachmentThumbnail .attachmentMetaData {
    font-size: 12px;
  }
}
.attachmentThumbnail .attachmentMetaData li:not(:last-child) {
  margin-right: 10px;
}
.attachmentThumbnail .attachmentMetaData .icon {
  color: inherit;
}
.attachmentThumbnail:hover .attachmentThumbnailImage img {
  opacity: 1;
}
.attachmentThumbnail:hover .attachmentFilename {
  opacity: 0;
}
.attachmentThumbnail > a {
  display: block;
}
html[data-color-scheme="dark"] .attachmentThumbnail {
  border-color: var(--wcfContentBorderInner);
}
/* attachments tab in editor */
.formAttachmentContent .formAttachmentList {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0 !important;
}
.formAttachmentContent .formAttachmentList > li {
  display: flex;
  flex: 0 0 100%;
  margin-bottom: 20px;
}
.formAttachmentContent .formAttachmentList > li > .attachmentTinyThumbnail {
  border-bottom-width: 0;
}
.formAttachmentContent .formAttachmentListItem > fa-icon[size="64"] {
  flex-basis: 64px;
}
@media screen and (min-width: 769px), print {
  .formAttachmentContent .formAttachmentList {
    margin-right: -20px;
  }
  .formAttachmentContent .formAttachmentList > li {
    /* Safari sometimes trips over fractional values, causing two
				   items to be exactly 1 pixel wider than the available space.
				   Reserving 21px covers all sort of rounding errors, without
				   being visually noticeable */
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(50% - 21px);
    margin-right: 20px;
  }
}
.formAttachmentContent > dl {
  margin-top: 0 !important;
}
.formAttachmentContent > dl > dd > div, .formAttachmentContent .formAttachmentButtons {
  align-items: center;
  display: flex;
}
.formAttachmentContent > dl > dd > div > .button, .formAttachmentContent .formAttachmentButtons > .button {
  flex: 0 0 auto;
}
.formAttachmentContent > dl > dd > div > .button:not(:first-child), .formAttachmentContent .formAttachmentButtons > .button:not(:first-child) {
  margin-left: 10px;
}
.formAttachmentContent > dl > dd > div + small, .formAttachmentContent .formAttachmentButtons + small {
  margin-top: 10px !important;
}
.attachmentTinyThumbnail {
  max-height: 64px;
  max-width: 64px;
  object-fit: contain;
}
/* embedded images */
.embeddedAttachmentLink, .embeddedImageLink {
  border: 1px solid var(--wcfContentBorderInner);
  display: inline-block;
  height: auto;
  margin: 2px 0;
  max-width: 100%;
  min-height: 48px;
  padding: 2px;
  position: relative;
}
.embeddedAttachmentLink:hover .embeddedAttachmentLinkEnlarge, .embeddedImageLink:hover .embeddedAttachmentLinkEnlarge {
  opacity: 0.8;
}
.embeddedAttachmentLinkEnlarge {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
  bottom: 5px;
  color: white;
  display: block;
  opacity: 0.5;
  padding: 2px;
  position: absolute;
  right: 5px;
  text-decoration: none;
  transition: 0.2s ease opacity;
}
.popoverContent .embeddedAttachmentLink, .popoverContent .embeddedImageLink {
  /* this will also suppress the link being displayed in the browser's "status bar" on hover */
  pointer-events: none;
}
.messageSectionTitle {
  align-items: center;
  display: flex;
  margin-bottom: 10px;
}
.messageSectionTitle::before {
  border-top: 1px solid var(--wcfContentBorderInner);
  content: "";
  flex: 0 0 20px;
  margin-right: 10px;
}
.messageSectionTitle::after {
  border-top: 1px solid var(--wcfContentBorderInner);
  content: "";
  flex: 1 0 auto;
  margin-left: 10px;
}
.messageAttachmentList {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, 300px);
}
@media screen and (max-width: 544px) {
  .messageAttachmentList {
    grid-template-columns: 1fr;
  }
}
.messageAttachment {
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: 3px;
  color: inherit;
  column-gap: 8px;
  display: grid;
  grid-template-areas: "icon filename" "icon meta";
  grid-template-columns: 32px auto;
  padding: 8px;
  row-gap: 1px;
  user-select: none;
}
.messageAttachment:focus, .messageAttachment:hover {
  color: inherit;
}
.messageAttachment:focus .messageAttachmentIconDefault, .messageAttachment:hover .messageAttachmentIconDefault {
  display: none;
}
.messageAttachment:not(:focus):not(:hover) .messageAttachmentIconDownload {
  display: none;
}
.messageAttachmentIcon {
  align-self: center;
  grid-area: icon;
}
.messageAttachmentIconDefault, .messageAttachmentIconDownload {
  cursor: inherit !important;
}
.messageAttachmentFilename {
  font-weight: 600;
  grid-area: filename;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messageAttachmentMeta {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
  grid-area: meta;
}
@media screen and (min-width: 769px), print {
  .messageAttachmentMeta {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .messageAttachmentMeta {
    font-size: 12px;
  }
}
@media screen and (min-width: 1025px), print {
  .authFlow .pageHeaderContainer {
    padding-top: 0;
  }
}
.authFlow .pageHeaderPanel {
  display: none;
}
.authFlow .pageHeaderLogo {
  text-align: center;
}
.authFlow .content {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.authFlow .contentHeader {
  text-align: center;
}
.authFlow input[type="submit"] {
  width: 100%;
}
/* We have to set the margin because the first child element in this form is the invisible honeypot. */
#registerForm > .section:nth-child(2) {
  margin-top: 0;
}
.authOtherOptionButtons {
  margin-top: 30px;
}
.authOtherOptionButtons__separator {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 30px;
}
.authOtherOptionButtons__separator::before {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--wcfContentBorderInner);
}
.authOtherOptionButtons__separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--wcfContentBorderInner);
}
.authOtherOptionButtons__buttonList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.authOtherOptionButtons__button {
  display: flex;
  width: 100%;
}
.button.thirdPartyLoginButton {
  border-width: 0;
  color: white;
  display: flex;
  width: 100%;
  /* branding */
}
.button.thirdPartyLoginButton:hover {
  color: white;
}
.button.thirdPartyLoginButton.googleLoginButton {
  background-color: white;
  border: 1px solid #e9e9e9;
  color: #333;
  padding-bottom: 7px;
  padding-top: 7px;
}
.button.thirdPartyLoginButton.googleLoginButton:hover {
  background-color: white;
  color: #333;
}
.button.thirdPartyLoginButton.googleLoginButton fa-brand {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAGsklEQVR4Ae3cA3jsShgG4Gvbtu1js7aObdu2bdbudmvbtu1VtUg2ydw7x95mstnt5rZ5voflG80/fzL72L89bOsF94J7wWgb2dSgiAzpPHmwbfPK1qWzxDNsRdb6Ar2BgtF9hSbDRbYG4mk2beuXwm+Q89yV+TmAILgHptrb5DyPtg3LhBZjBCP+RovewNZlc2TOl8nGel0HA4LA4qPhkRSM6XcHoEYk86fIfT2AQqFzYIBjMncHofkoZBWNCM1GSq+cpdpadQIMKEoRzIeXIroEkW08TObpDAiiO8F4Tga85TBnoEc8xVKZm9UNYECS0stnBCP/Ud+AnJH/SC+eAiShPTDZ3CRZPIN9CUokC6ZSYqE2wHhmKhw/2TegR2RnSFSUaRaMJccLxg7QsAQhktkTAACaAmOxkbA80h2taKIZKWzR1BFWRAQLRvXhphYdDEtcWDxxU4sOhjdDkdVYbmrRwYAgJIums3RTNWrftbHz/AmZh5MiLBAGVqOdZ4+1790inmrFvpYZuPPEATWdknmT5f7eZEN9V2N7o9zPu3XNInQte2BlcYE6tVTbltXw4kf9h5QlhW3rliBr1QcDAODsjPFlhmelqfNvKQty4S9B0KoPVgTxmWk7Tx0COMZCF6GzA3ZC0LWMwJSsTWiOXj+O6iP382KzowAAvMOhaxmAqw/Ijr4tGPsHgnbsACwxlpNNPABIIv5LIvxpzOVlkdXPNMGK8CCudi2pFi+ovRFlwLOtc7/uUgvnxhxu05LpIyD17nTu+EAw8q9HaVtXzgcAcBUMcAER/sx9YBj5pdeExr897NLtT9TVcLgRTzVcgbyHBuc9L5n8PdLJzAEwmWP1KDCMMvTp9jWf3tbC1gdQKDgMBhRBRL0GYaojO35zxOo8fZjbz5ZAZz700Anm9pLI9g+yoY7bYKrJBWJoRpk8SJ0/fDoc13QuRuNdgMmydfTBZPkGdcDDd0q1EDkOVIKzTOiDKVGY7oPLmylVYCKlL30wIKW6D44tJlSCE76nC45+CwHXfWDfdKVKcMwHdMEJ33MC7JqEqwRHvEgXnDaYE+ArMayBB3ECDAennnVKn4tUDU74gS446k1OgB3i8Z41LHmkKHtW4eGfpRpctv5/VlomlxOsTR6kKQN1H1wnptiZHpYFv27pMbqus4kxOChbySzTz8loakfukhIkYKEBEBzw6SBXk79cLQ5lXv5XuxtJAaMDdA/v+JMydVs8irBnDvB+g9QbGeY1SUFg2gTn1JD0z+cdPIVaTbym0JemeQ6FzrtzJtdFm+DT4Rh9MD9DybxNmxL03mg3g/u0MP3cbWo6GrWjbZMBg/0Id6wqAcWwEX+F/10fVzPIe2jmRW3VTiP+VBjC4bU6KgMAID9qaQt9frl3P6hSndOaP7HrxdSYPQiH92QYhvAwTRH7KdSWBL9h5j4GeugkqDpWc1oZBqaelSGNwMWNJMLjUkHxBn//zwZeH3topr+7bWxDmia0AID17gok7aTTMrTnw1KsfZTPVMhAyj9uVl5lIexqcQLs4KFpYXjpSjQw3HwrIqCBQQ5mXsZInBWtoIOac1GOqrU4IsUJwOSllsmha5iZTf3npzXnqXka+1dFmzo4D9vZgQp2TsAZvrZUIC7729WSmRlmVfz+HGExKpUCVGJj1oSQlTd+SZ9Lm4bubqKvtTkmk+OAIRhu+zMu3jEwyqTQ1d7lofWdzV0VyWSxpPJkjpOB76z7fsPfjjOHHMhBb0QzAhMUMS18nRrgOzHkz96YdPR4toNTMT+gKjq4OtatNPBCvgfcp9PD1w/wsFP14y7WA4/zu9SudVWw8HKpUC4Zw5uOLmQ//c4fGrZL8iit+WEpvMmxAIZbtrCor7uNLpj/ubpk6N6Kh059M6tINl8Qh4UUHGa73wzjNGHQ4dj7wC6JOPtLACLqkvq4WeuE2cWi/+nLt0csOKnQ1CKP+IYMWELqgPnGiLVh6O7Go8GYZpfxpDbnwkaHjpj3JfLRV7Wgb01SARxIupc6wntyfGOG9pbikRQJmzvodRg7mRq2tkkm7IbFlhktBdaBS7SsPZx1haDIbltOSwGKXxl5px7UZGaEb8gXlerEgmmMxB2KfEciTKHRAsvbmPo0nVsST1BEdH3Kyrh9bJVlQ7wmbk05USSu0PUPPWjDOtxLg5bF7h7tM42B08x//o7U0/AmrCSV3PtYiwZpS3B13MHMS/DIz4rYaBO0VM93JpwbwaJtqNfEsbwZFgEL50VtgcJLBV6wK9aKtfd+cEkvuBfcC37k9h8VGR+csPdltgAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
}
.button.thirdPartyLoginButton.facebookLoginButton {
  background-color: #0866ff;
}
.button.thirdPartyLoginButton.facebookLoginButton:hover {
  background-color: #0761f2;
}
.button.thirdPartyLoginButton.twitterLoginButton {
  background-color: #14171a;
}
.button.thirdPartyLoginButton.twitterLoginButton:hover {
  background-color: rgba(20, 23, 26, 0.87);
}
.button.thirdPartyLoginButton.githubLoginButton {
  background-color: #444;
}
.button.thirdPartyLoginButton.githubLoginButton:hover {
  background-color: #303030;
}
.avatarEdit .avatarType {
  display: flex;
}
.avatarEdit .avatarType > dt {
  flex: 0 0 auto;
  order: 2;
}
.avatarEdit .avatarType > dd {
  order: 1;
}
.avatarEdit .avatarType .avatarUploadButtonContainer {
  margin-top: 10px;
}
@media screen and (min-width: 769px), print {
  .avatarEdit .avatarType {
    /* use fixed height to ensure a constant gap between <dl> with and without an image */
    min-height: 100px;
  }
  .avatarEdit .avatarType > dt:not(:empty) {
    margin: 0 0 0 30px;
  }
  .avatarEdit .avatarType > dd {
    flex: 1 1 auto;
  }
  .avatarEdit .avatarType + .avatarType {
    margin-top: 30px;
  }
  .avatarEdit .avatarType .avatarUploadButtonContainer {
    margin-left: 24px;
  }
}
@media screen and (max-width: 768px) {
  .avatarEdit .avatarType {
    flex-wrap: wrap;
  }
  .avatarEdit .avatarType > dt:not(:empty) {
    flex: 0 0 100%;
    margin-top: 20px;
    text-align: center;
  }
  .avatarEdit .avatarType > dd {
    flex: 0 0 100%;
  }
  .avatarEdit .avatarType .avatarUploadButtonContainer {
    text-align: center;
  }
}
.badge, a.badge {
  --background-color: var(--wcfContentText);
  --color: var(--wcfContentBackground);
  background-color: var(--background-color);
  border-radius: 2px;
  color: var(--color);
  display: inline-block;
  line-height: 1.28;
  padding: 2px 6px;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
  font-weight: 400;
  /* colors */
  /* default label colors */
}
@media screen and (min-width: 769px), print {
  .badge, a.badge {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .badge, a.badge {
    font-size: 12px;
  }
}
.badge.badgeUpdate, a.badge.badgeUpdate {
  --background-color: rgba(204, 0, 1, 1);
  --color: rgba(255, 255, 255, 1);
  font-weight: 600;
}
.badge.green, a.badge.green {
  --background-color: rgba(0, 133, 0, 1);
  --color: rgba(238, 255, 238, 1);
}
.badge.red, a.badge.red {
  --background-color: rgba(204, 0, 0, 1);
  --color: rgba(255, 238, 238, 1);
}
.badge.black, a.badge.black {
  --background-color: #333;
  --color: #fff;
}
.badge.brown, a.badge.brown {
  --background-color: #b85c2e;
  --color: #fff;
}
.badge.orange, a.badge.orange {
  --background-color: #f90;
  --color: #000;
}
.badge.yellow, a.badge.yellow {
  --background-color: #ff0;
  --color: #333;
}
.badge.blue, a.badge.blue {
  --background-color: #369;
  --color: #fff;
}
.badge.purple, a.badge.purple {
  --background-color: #c000f0;
  --color: #fff;
}
.badge.pink, a.badge.pink {
  --background-color: #f0c;
  --color: #000;
}
a.badge:hover {
  --color: var(--wcfContentBackground);
  text-decoration: none;
}
a.badge:hover.black {
  --background-color: #000;
}
a.badge:hover.brown {
  --background-color: #930;
}
a.badge:hover.red {
  --background-color: #900;
}
a.badge:hover.orange {
  --background-color: #f60;
  --color: #000;
}
a.badge:hover.yellow {
  --background-color: #cc0;
  --color: #333;
}
a.badge:hover.green {
  --background-color: #060;
}
a.badge:hover.blue {
  --background-color: #036;
}
a.badge:hover.purple {
  --background-color: #90c;
}
a.badge:hover.pink {
  --background-color: #c09;
  --color: #fff;
}
.benchmarkDetails .hot {
  color: var(--wcfStatusErrorText);
}
.breadcrumbs {
  flex: 1;
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
}
.breadcrumbs__item {
  flex: 0 0 auto;
  max-width: 100%;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .breadcrumbs__item {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .breadcrumbs__item {
    font-size: 12px;
  }
}
.breadcrumbs__link {
  color: var(--wcfNavigationLink);
  display: inline-flex;
  text-decoration: none;
}
.breadcrumbs__link:hover {
  color: var(--wcfNavigationLinkActive);
  text-decoration: underline;
}
.breadcrumbs__item:not(:last-child) {
  margin-right: 10px;
}
.breadcrumbs__item:not(:last-child)::after {
  color: var(--wcfNavigationText);
  content: "/";
}
.breadcrumbs__item:not(:last-child) .breadcrumbs__link {
  margin-right: 10px;
}
@media screen and (min-width: 769px), print {
  .pageNavigation {
    background-color: var(--wcfNavigationBackground);
    color: var(--wcfNavigationText);
    flex: 0 0 auto;
    padding: 10px 0;
  }
  .pageNavigation .layoutBoundary {
    align-items: center;
    display: flex;
    min-height: 20px;
  }
  .boxesHeaderBoxes + .pageNavigation {
    margin-top: 1px;
  }
  .breadcrumbs__parent_indicator {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .breadcrumbs {
    margin-bottom: -5px;
    margin-top: 5px;
  }
  .breadcrumbs__item {
    display: none;
  }
  .breadcrumbs__item:last-child {
    align-items: center;
    display: flex;
    flex: 1;
  }
  .breadcrumbs__item:last-child .breadcrumbs__link {
    align-items: center;
    color: var(--wcfContentDimmedLink);
    column-gap: 5px;
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 5px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .breadcrumbs__item:last-child .breadcrumbs__parent_indicator {
    display: flex;
  }
}
button {
  all: unset;
  box-sizing: border-box;
  min-width: 0;
  -webkit-user-select: none;
  user-select: none;
}
button:focus-visible {
  outline: 5px auto -webkit-focus-ring-color;
}
button:not([disabled]) {
  cursor: pointer;
}
input[type="button"], input[type="reset"], input[type="submit"], .button, a.button {
  align-items: center;
  background-color: var(--wcfButtonBackground);
  border-radius: var(--wcfBorderRadius);
  border-width: 0;
  color: var(--wcfButtonText);
  column-gap: 0.25em;
  cursor: pointer;
  display: inline-flex;
  font-weight: 400;
  justify-content: center;
  margin: 0;
  padding: 8px 18px;
  text-align: center;
  text-decoration: none;
  font-family: var(--wcfFontFamily);
  line-height: var(--wcfFontLineHeight);
  -webkit-appearance: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
@media screen and (min-width: 769px), print {
  input[type="button"], input[type="reset"], input[type="submit"], .button, a.button {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  input[type="button"], input[type="reset"], input[type="submit"], .button, a.button {
    font-size: 14px;
  }
}
input[type="button"] .icon, input[type="reset"] .icon, input[type="submit"] .icon, .button .icon, a.button .icon {
  color: inherit;
}
input[type="button"].active, input[type="reset"].active, input[type="submit"].active, .button.active, a.button.active {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
  text-decoration: none;
}
input[type="button"].small, input[type="reset"].small, input[type="submit"].small, .button.small, a.button.small {
  padding: 6px 8px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  input[type="button"].small, input[type="reset"].small, input[type="submit"].small, .button.small, a.button.small {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  input[type="button"].small, input[type="reset"].small, input[type="submit"].small, .button.small, a.button.small {
    font-size: 12px;
  }
}
input[type="button"] small, input[type="reset"] small, input[type="submit"] small, .button small, a.button small {
  color: inherit;
}
@media (pointer: coarse) {
  input[type="button"], input[type="reset"], input[type="submit"], .button, a.button {
    padding: 10px 18px;
  }
  input[type="button"].small, input[type="reset"].small, input[type="submit"].small, .button.small, a.button.small {
    padding: 8px;
  }
}
input[type="button"].buttonPrimary, input[type="submit"], .button.buttonPrimary, a.button.buttonPrimary {
  background-color: var(--wcfButtonPrimaryBackground);
  color: var(--wcfButtonPrimaryText);
}
input[type="button"].buttonPrimary.active, input[type="submit"].active, .button.buttonPrimary.active, a.button.buttonPrimary.active {
  background-color: var(--wcfButtonPrimaryBackgroundActive);
  color: var(--wcfButtonPrimaryTextActive);
}
/* hover states are only applied to non-touch devices to avoid "leftover" hover states after taps */
html:not(.touch) input[type="button"]:hover, html:not(.touch) input[type="reset"]:hover, html:not(.touch) input[type="submit"]:hover, html:not(.touch) .button:hover, html:not(.touch) a.button:hover {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
  text-decoration: none;
}
html:not(.touch) input[type="button"].buttonPrimary:hover, html:not(.touch) input[type="submit"]:hover, html:not(.touch) .button.buttonPrimary:hover, html:not(.touch) a.button.buttonPrimary:hover {
  background-color: var(--wcfButtonPrimaryBackgroundActive);
  color: var(--wcfButtonPrimaryTextActive);
}
/* disabled state */
input[type="button"]:disabled, input[type="button"].disabled, input[type="reset"]:disabled, input[type="reset"].disabled, input[type="submit"]:disabled, input[type="submit"].disabled, .button:disabled, .button.disabled, a.button:disabled, a.button.disabled {
  background-color: var(--wcfButtonDisabledBackground) !important;
  color: var(--wcfButtonDisabledText) !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
/* force active state for buttons toggling a dropdown */
.dropdownOpen > input[type="button"], .dropdownOpen > input[type="reset"], .dropdownOpen > input[type="submit"], .dropdownOpen > .button, .dropdownOpen > a.button {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
}
.dropdownOpen > input[type="button"].buttonPrimary, .dropdownOpen > input[type="submit"], .dropdownOpen > .button.buttonPrimary, .dropdownOpen > a.button.buttonPrimary {
  background-color: var(--wcfButtonPrimaryBackgroundActive);
  color: var(--wcfButtonPrimaryTextActive);
}
.buttonList {
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
  /* members list */
}
.buttonList > li {
  flex: 0 1 auto;
}
.buttonList > li:not(:last-child) {
  margin-right: 5px;
}
.buttonList.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.buttonList.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
.buttonList.smallButtons .button {
  padding: 6px 8px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .buttonList.smallButtons .button {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .buttonList.smallButtons .button {
    font-size: 12px;
  }
}
.buttonList.letters {
  margin-bottom: -10px;
}
.buttonList.letters > li {
  flex: 0 0 auto;
  margin-bottom: 10px;
  width: 10%;
}
.buttonList.letters > li.lettersReset {
  width: auto;
}
.buttonList.letters > li > a {
  display: block;
  min-width: -moz-min-content;
  min-width: -webkit-min-content;
  min-width: min-content;
  text-align: center;
}
.buttonList.iconList a {
  color: var(--wcfButtonText);
}
.buttonGroupNavigation > ul {
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
}
.buttonGroupNavigation > ul > li {
  flex: 0 1 auto;
}
.buttonGroupNavigation > ul > li:not(:last-child) {
  margin-right: 5px;
}
.buttonGroupNavigation > ul.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.buttonGroupNavigation > ul.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
.buttonGroup, .messageFooterButtons, .messageFooterButtonsExtra {
  margin-bottom: -1px;
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
}
.buttonGroup > li, .messageFooterButtons > li, .messageFooterButtonsExtra > li {
  flex: 0 1 auto;
}
.buttonGroup > li:not(:last-child), .messageFooterButtons > li:not(:last-child), .messageFooterButtonsExtra > li:not(:last-child) {
  margin-right: 5px;
}
.buttonGroup.commaSeparated > li:not(:last-child):after, .commaSeparated.messageFooterButtons > li:not(:last-child):after, .commaSeparated.messageFooterButtonsExtra > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.buttonGroup.dotSeparated > li:not(:last-child):after, .dotSeparated.messageFooterButtons > li:not(:last-child):after, .dotSeparated.messageFooterButtonsExtra > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
.buttonGroup > li, .messageFooterButtons > li, .messageFooterButtonsExtra > li {
  display: flex;
  margin-bottom: 1px;
}
.buttonGroup > li:not(:last-child), .messageFooterButtons > li:not(:last-child), .messageFooterButtonsExtra > li:not(:last-child) {
  margin-right: 1px;
}
.buttonGroup > li:first-child .button, .messageFooterButtons > li:first-child .button, .messageFooterButtonsExtra > li:first-child .button {
  border-top-left-radius: var(--wcfBorderRadius);
  border-bottom-left-radius: var(--wcfBorderRadius);
}
.buttonGroup > li:last-child .button, .messageFooterButtons > li:last-child .button, .messageFooterButtonsExtra > li:last-child .button {
  border-top-right-radius: var(--wcfBorderRadius);
  border-bottom-right-radius: var(--wcfBorderRadius);
}
.buttonGroup > li .button, .messageFooterButtons > li .button, .messageFooterButtonsExtra > li .button {
  border-radius: 0;
  border-width: 0;
}
.flexibleButtonGroup {
  display: flex;
  flex-wrap: wrap;
}
.flexibleButtonGroup > li {
  display: flex;
  flex: 0 0 auto;
}
.flexibleButtonGroup > li:not(:last-child) {
  margin-right: 5px;
}
.flexibleButtonGroup > li:not(:last-child).spaceAfter {
  margin-right: 20px;
}
.flexibleButtonGroup > li > input[type="radio"] {
  left: -3000px;
  opacity: 0;
  position: absolute;
}
.flexibleButtonGroup > li > input[type="radio"]:checked + label {
  cursor: default;
}
.flexibleButtonGroup > li > input[type="radio"]:focus + label {
  border-color: rgba(0, 0, 0, 0.3);
}
.flexibleButtonGroup > li > a, .flexibleButtonGroup > li > label {
  background-color: #cfd8dc;
  border: 1px solid transparent;
  border-radius: var(--wcfBorderRadius);
  color: #212121;
  cursor: pointer;
  padding: 5px 10px;
}
.flexibleButtonGroup > li > a :is(fa-brand, fa-icon), .flexibleButtonGroup > li > label :is(fa-brand, fa-icon) {
  color: inherit;
}
.flexibleButtonGroup > li > a.active, .flexibleButtonGroup > li > input[type="radio"]:checked + label, .flexibleButtonGroup > li > input[type="radio"] + label:hover {
  color: #fff;
}
.flexibleButtonGroup > li > a.active.green, .flexibleButtonGroup > li > input[type="radio"]:checked + label.green, .flexibleButtonGroup > li > input[type="radio"] + label:hover.green {
  background-color: #2e7d32;
}
.flexibleButtonGroup > li > a.active.red, .flexibleButtonGroup > li > input[type="radio"]:checked + label.red, .flexibleButtonGroup > li > input[type="radio"] + label:hover.red {
  background-color: #c62828;
}
.flexibleButtonGroup > li > a.active.yellow, .flexibleButtonGroup > li > input[type="radio"]:checked + label.yellow, .flexibleButtonGroup > li > input[type="radio"] + label:hover.yellow {
  background-color: #fb8c00;
  color: #000;
}
.disabled .flexibleButtonGroup > li > input[type="radio"]:checked + label, .flexibleButtonGroup > li > input[type="radio"]:disabled + label {
  cursor: default;
  opacity: 0.54;
  pointer-events: none;
}
/* Integration of CKEditor 5 into WoltLab Suite Core */
.ck.ck-content.ck-editor__editable {
  max-height: 500px;
  min-height: 200px;
  padding: 10px;
}
.ck.ck-content.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child {
  margin-top: 1.5em !important;
}
.ck.ck-content.ck-editor__editable .image-inline {
  vertical-align: middle;
}
.ck.ck-editor, .ck.ck-body {
  --marker-error: #ff0000;
  --marker-info: #0000ff;
  --marker-success: #008000;
  --marker-warning: #ffff00;
  --ck-color-base-background: var(--wcfContentContainerBackground);
  --ck-border-radius: var(--wcfBorderRadius);
  --ck-color-base-border: var(--wcfContentBorderInner);
  --ck-color-text: var(--wcfContentText);
  --ck-color-toolbar-border: var(--wcfContentBorderInner);
  --ck-color-toolbar-background: var(--wcfContentContainerBackground);
  --ck-color-dropdown-panel-background: var(--wcfDropdownBackground);
  --ck-color-dropdown-panel-border: var(--wcfDropdownBorderInner);
  --ck-color-panel-background: var(--wcfDropdownBackground);
  --ck-color-panel-border: var(--wcfDropdownBorderInner);
  --ck-color-input-background: var(--wcfInputBackground);
  --ck-color-input-border: var(--wcfInputBorder);
  --ck-color-input-error-border: var(--ck-color-base-error);
  --ck-color-input-text: var(--wcfInputText);
  --ck-color-input-disabled-background: var(--wcfInputDisabledBackground);
  --ck-color-input-disabled-border: var(--wcfInputDisabledBorder);
  --ck-color-input-disabled-text: var(--wcfInputDisabledText);
  --ck-color-list-background: var(--wcfDropdownBackground);
  --ck-color-list-button-hover-background: var(--wcfDropdownBackgroundActive);
  --ck-color-list-button-on-background: var(--wcfDropdownBackgroundActive);
  --ck-color-list-button-on-background-focus: var(--wcfDropdownBackgroundActive);
  --ck-color-list-button-on-text: var(--wcfDropdownLink);
  --ck-color-link-default: var(--wcfContentLink);
  --ck-font-face: var(--wcfFontFamily);
  --ck-font-size-normal: var(--wcfFontSizeDefault);
  --ck-font-size-small: var(--wcfFontSizeSmall);
  --ck-font-size-tiny: var(--wcfFontSizeSmall);
}
.ck.ck-content {
  /* The content area must not contain a border radius at all, because it is
	   difficult to detect if there is an adjacent message tab menu. */
  border-radius: 0 !important;
}
.ck.ck-button.ck-button:not(.ck-disabled) {
  cursor: pointer;
}
.ck.ck-button-bold, a.ck.ck-button-bold {
  font-weight: 400;
}
.ck.ck-toolbar__items, .ck.ck-toolbar__grouped-dropdown {
  --ck-spacing-small: 4px;
  --ck-spacing-tiny: 2px;
  --ck-color-button-default-hover-background: var(--wcfEditorButtonBackground);
  --ck-color-button-default-active-background: var(--wcfEditorButtonBackground);
  --ck-color-button-on-background: var(--wcfEditorButtonBackgroundActive);
  --ck-color-button-on-hover-background: var(--wcfEditorButtonBackgroundActive);
  --ck-color-button-on-active-background: var(--wcfEditorButtonBackgroundActive);
  --ck-color-button-on-disabled-background: transparent;
  --ck-color-button-on-color: var(--wcfEditorButtonTextActive);
  --ck-color-split-button-hover-background: var(--wcfEditorButtonBackground);
  --ck-color-split-button-hover-border: rgb(0 0 0 / 34%);
}
.ck.ck-toolbar__items fa-icon, .ck.ck-toolbar__grouped-dropdown fa-icon {
  color: inherit;
}
.ck.ck-toolbar__items .ck-splitbutton_open .ck-button:not(.ck-disabled):not(:hover), .ck.ck-toolbar__grouped-dropdown .ck-splitbutton_open .ck-button:not(.ck-disabled):not(:hover) {
  /* The editor does not support a separate text color on hover. */
  color: var(--wcfEditorButtonText);
}
.ck.ck-toolbar__items .ck-button:not(.ck-disabled):active, .ck.ck-toolbar__items .ck-splitbutton:active .ck-button:not(.ck-disabled):not(:active), .ck.ck-toolbar__grouped-dropdown .ck-button:not(.ck-disabled):active, .ck.ck-toolbar__grouped-dropdown .ck-splitbutton:active .ck-button:not(.ck-disabled):not(:active) {
  /* The editor does not support a separate text color on hover. */
  color: var(--wcfEditorButtonText);
}
@media (hover: hover) {
  /* Extra fix for the handling of buttons that act as a toggle for a
	   collapsible container. */
  .ck.ck-toolbar__items .ck-button:not(.ck-disabled):hover, .ck.ck-toolbar__items .ck-splitbutton:hover .ck-button:not(.ck-disabled):not(:hover), .ck.ck-toolbar__grouped-dropdown .ck-button:not(.ck-disabled):hover, .ck.ck-toolbar__grouped-dropdown .ck-splitbutton:hover .ck-button:not(.ck-disabled):not(:hover) {
    /* The editor does not support a separate text color on hover. */
    color: var(--wcfEditorButtonText);
  }
  .ck.ck.ck-toolbar__items .ck.ck-collapsible > .ck.ck-button:hover {
    background: var(--ck-color-button-default-hover-background);
    /* The editor does not support a separate text color on hover. */
    color: var(--wcfEditorButtonText);
  }
}
.ck.ck-toolbar__items, .ck.ck-toolbar__grouped-dropdown {
  /* Enables the automatic grouping of excessive items. */
  flex-shrink: 0;
}
.ck.ck-toolbar-dropdown .ck.ck-toolbar__items, .ck.ck-toolbar__grouped-dropdown .ck.ck-toolbar__items {
  /* Allow shrinking when the toolbar is being nested. */
  flex-shrink: 1;
}
.ck.ck-reset.ck-dropdown__panel, .ck.ck-balloon-panel {
  border-color: transparent;
  box-shadow: var(--wcfBoxShadow);
}
.ck.ck-editor .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  color: var(--wcfInputPlaceholder);
}
@media (hover: hover) {
  .ck.ck-list .ck-list__item .ck-button:not(.ck-disabled):hover {
    color: var(--wcfDropdownLink);
  }
}
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable), .ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus {
  border-color: var(--wcfInputBorderActive) !important;
}
.ck.ck-form__row .ck-button, .ck.ck-vertical-form .ck-button, .ck.ck-body .ck-button {
  --ck-color-text: var(--wcfButtonText);
  background-color: var(--wcfButtonBackground);
  border-color: transparent;
  font-size: var(--wcfFontSizeSmall);
  padding: 4px 12px !important;
}
.ck.ck-form__row {
  column-gap: 10px;
  justify-content: flex-end !important;
}
.ck.ck-form__row .ck-button__icon {
  display: none;
}
.ck.ck-form__row .ck-button {
  flex: 0 0 auto !important;
}
.ck.ck-form__row .ck-button[type="button"] {
  order: 1;
}
.ck.ck-form__row .ck-button[type="submit"] {
  order: 2;
}
.ck.ck-form__row .ck-button:not(.ck-disabled), .ck.ck-body .ck-button:not(.ck-disabled) {
  color: var(--ck-color-text);
}
.ck.ck-form__row .ck-button:not(.ck-disabled).ck-on, .ck.ck-body .ck-button:not(.ck-disabled).ck-on {
  color: var(--ck-color-button-on-color);
}
.ck.ck-form__row .ck-button.ck-disabled, .ck.ck-body .ck-button.ck-disabled {
  --ck-color-text: var(--wcfButtonDisabledText) !important;
  background-color: var(--wcfButtonDisabledBackground) !important;
}
.ck.ck-form__row .ck-button[type="submit"]:not(.ck-disabled), .ck.ck-body .ck-button[type="submit"]:not(.ck-disabled) {
  --ck-color-text: var(--wcfButtonPrimaryText);
  background-color: var(--wcfButtonPrimaryBackground);
}
.ck.ck-form__row.ck-form__row_with-submit {
  align-items: end;
}
.ck.ck-body .ck-button[type="button"].ck-on:not(.ck-disabled) {
  --ck-color-text: var(--wcfButtonTextActive);
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--ck-color-text);
}
@media (hover: hover) {
  .ck.ck-form__row .ck-button[type="button"]:not(.ck-disabled):hover, .ck.ck-body .ck-button[type="button"]:not(.ck-disabled):hover {
    --ck-color-text: var(--wcfButtonTextActive);
    background-color: var(--wcfButtonBackgroundActive);
  }
  .ck.ck-form__row .ck-button[type="submit"]:not(.ck-disabled):hover, .ck.ck-body .ck-button[type="submit"]:not(.ck-disabled):hover {
    --ck-color-text: var(--wcfButtonPrimaryTextActive);
    background-color: var(--wcfButtonPrimaryBackgroundActive);
  }
}
.ck-body-wrapper .ck.ck-balloon-panel {
  --ck-color-base-foreground: var(--ck-color-toolbar-background);
  box-shadow: var(--wcfBoxShadow);
}
.ck-body-wrapper .ck.ck-balloon-panel.ck-powered-by-balloon {
  box-shadow: none;
  z-index: 1;
}
.ck-body-wrapper .ck.ck-list__item .ck-button:not(.ck-disabled) {
  cursor: pointer;
}
.ck-body-wrapper .ck.ck-list__item .ck-button:not(.ck-on) {
  background-color: var(--ck-color-panel-background);
  color: var(--wcfDropdownLink);
}
.ck-body-wrapper .ck.ck-list__item .ck-button.ck-on {
  background-color: var(--wcfDropdownBackgroundActive);
  color: var(--wcfDropdownLinkActive);
}
@media (hover: hover) {
  .ck-body-wrapper .ck.ck-list__item .ck-button:not(.ck-disabled, .ck-on):hover {
    background-color: var(--wcfDropdownBackgroundActive);
    color: var(--wcfDropdownLinkActive);
  }
}
.ck.ck-content td {
  /* Workaround for an ancient bug in Firefox that cause the background color
	   to overlap the collapsed border: https://bugzilla.mozilla.org/show_bug.cgi?id=688556#c43 */
  background-clip: padding-box;
}
html[data-color-scheme="light"] .ck-body-wrapper .ck.ck-balloon-panel {
  border-width: 0;
}
.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  --ck-color-labeled-field-label-background: var(--ck-color-base-background);
}
.ck-insert-table-dropdown__grid .ck-button {
  border-radius: 0 !important;
}
.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
  box-shadow: none !important;
}
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content_sticky .ck-toolbar {
  border-bottom-color: var(--wcfInputBorderActive) !important;
}
.ck.ck-splitbutton {
  display: flex;
}
.ck.ck-button.ck-splitbutton__action {
  border-top-right-radius: unset !important;
  border-bottom-right-radius: unset !important;
}
/* Fixes the hover state of the link balloon tooltip. */
@media (hover: hover) {
  .ck.ck-link-actions .ck-button.ck-link-actions__preview:hover .ck-button__label {
    color: var(--wcfButtonTextActive);
  }
  .ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label:hover {
    text-decoration: none !important;
  }
}
/* Prevent lists inside drop down menus from becoming a huge skyscraper. */
.ck.ck-dropdown .ck-dropdown__panel .ck-list {
  max-height: 300px;
  overflow: auto;
}
/* Prevent the “Material Design” like behavior of form labels. */
.ck.ck-labeled-field-view__input-wrapper {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 5px;
}
.ck.ck-labeled-field-view__input-wrapper .ck.ck-label {
  color: var(--wcfInputLabel) !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
}
.ck.ck-link-form {
  align-items: end;
}
.ck.ck-link-form > .ck.ck-button {
  height: 30px;
  padding: 5px !important;
}
/* Increase the width of the splitbutton arrows. */
.ck.ck-toolbar__items .ck.ck-splitbutton > .ck-splitbutton__arrow {
  padding-left: var(--ck-spacing-medium);
  padding-right: var(--ck-spacing-medium);
}
/* Add a visual indicator for the split button functionality. */
.ck.ck-splitbutton:not(:hover, .ck-splitbutton_open) > .ck-splitbutton__arrow::before {
  border-left: 1px dashed var(--ck-color-toolbar-border);
  content: "";
  inset: var(--ck-spacing-small) auto var(--ck-spacing-small) -1px;
  position: absolute;
}
.ck.ck-toolbar__separator {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
.ck.ck-balloon-panel.ck-powered-by-balloon {
  --ck-powered-by-text-color: var(--wcfContentText);
  --ck-powered-by-background: var(--ck-color-base-background);
  --ck-powered-by-border-color: var(--wcfInputBorderActive);
  border-width: 1px !important;
}
.ck.ck-powered-by .ck.ck-icon > path {
  fill: var(--wcfContentText);
}
.ck.ck-sticky-panel__content, .ck.ck-balloon-panel {
  --ck-z-modal: 90;
  --ck-z-panel: 91;
}
html[data-color-scheme="dark"] .ck.ck-editor, html[data-color-scheme="dark"] .ck.ck-body {
  --ck-color-focus-outer-shadow: #0a2c66;
  --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);
  --ck-color-widget-hover-border: #124f81;
  --ck-color-widget-editable-focus-background: var(--ck-color-base-background);
  --ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background);
  --ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border);
}
html[data-color-scheme="dark"] .ck.ck-reset.ck-dropdown__panel, html[data-color-scheme="dark"] .ck.ck-balloon-panel {
  border-color: var(--wcfDropdownBorderInner);
}
html[data-color-scheme="dark"] .ck.ck-content pre {
  background-color: var(--wcfContentBackground);
  border-color: var(--wcfContentBorderInner);
  color: var(--wcfContentText);
}
html[data-color-scheme="dark"] .ck.ck-editor__editable_inline.ck-blurred ::selection {
  background: rgba(255, 255, 255, 0.12);
}
/* Dialog overlay to restore a draft */
.ckeditor5__restoreDraft {
  position: relative;
}
.ckeditor5_restoreDraft__wrapper {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.34);
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 1;
}
.ckeditor5__restoreDraft__dialog {
  background-color: var(--wcfContentBackground);
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 12px 28px 0, rgba(0, 0, 0, 0.1) 0 2px 4px 0;
  color: var(--wcfContentText);
  max-width: 400px;
  padding: 20px;
}
.ckeditor5__restoreDraft__question {
  font-size: var(--wcfFontSizeHeadline);
  font-weight: 600;
  line-height: 1.28;
}
.ckeditor5__restoreDraft__buttons {
  column-gap: 10px;
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
}
.ckeditor5__restoreDraft__buttons button[data-type="preview"] {
  margin-right: auto;
}
html[data-color-scheme="dark"] .ckeditor5__restoreDraft__dialog {
  border-color: var(--wcfContentBorderInner);
}
/* Styling of inline errors for the editor. */
.ck.ck-editor + .innerError {
  margin-top: 0;
  width: 100%;
}
.ck.ck-editor + .innerError::before {
  display: none;
}
.ck.ck-list__item .ck-button.ckeditor5__mention {
  display: block;
  font-size: var(--wcfFontSizeDefault);
}
.ck.ck-list__item .ck-button.ckeditor5__mention .userAvatarImage {
  height: 16px;
  margin-right: 2px;
  width: 16px;
}
/* Text Alignment */
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-justify {
  text-align: justify !important;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.text-right {
  text-align: right !important;
}
/* image float */
.messageFloatObjectLeft {
  float: left;
  margin: 0 20px 20px 0;
}
.messageFloatObjectRight {
  float: right;
  margin: 0 0 20px 20px;
}
/* Quotes */
.ck.ck-content blockquote {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  border-left-width: 5px;
  border-radius: 0 var(--wcfBorderRadius) var(--wcfBorderRadius) 0;
  margin: 2em 0 1em 0;
}
.ck.ck-content blockquote::before {
  color: var(--wcfContentDimmedText);
}
/* Code Blocks */
.ck.ck-content pre {
  margin: 1em 0;
}
/* Text Markers */
.marker-error, .marker-info, .marker-success, .marker-warning {
  border-radius: 2px;
  border-style: solid;
  border-width: 1px 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.15em;
}
.marker-error {
  background-color: var(--wcfStatusErrorBackground);
  border-color: var(--wcfStatusErrorBorder);
  color: var(--wcfStatusErrorText);
}
.marker-info {
  background-color: var(--wcfStatusInfoBackground);
  border-color: var(--wcfStatusInfoBorder);
  color: var(--wcfStatusInfoText);
}
.marker-success {
  background-color: var(--wcfStatusSuccessBackground);
  border-color: var(--wcfStatusSuccessBorder);
  color: var(--wcfStatusSuccessText);
}
.marker-warning {
  background-color: var(--wcfStatusWarningBackground);
  border-color: var(--wcfStatusWarningBorder);
  color: var(--wcfStatusWarningText);
}
/* Fake visuals for the WYSIWYG editor while it is still loading. */
.wysiwygTextarea {
  background-color: var(--wcfContentContainerBackground) !important;
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0 0 !important;
  border-color: var(--wcfContentBorderInner) !important;
  color: transparent !important;
  cursor: not-allowed !important;
  height: 240px !important;
  resize: none !important;
}
/* Add spacer for any notices displayed above the editor. */
.wysiwygTextarea:not(:first-child), .wysiwygTextarea:not(:first-child) + .ck.ck-editor {
  margin-top: 20px;
}
/* Hide tooltips on touch devices. */
html.touch .ck.ck-balloon-panel.ck-tooltip {
  display: none;
}
/* HTML Embed */
.ck .ck-widget.raw-html-embed {
  --ck-color-button-default-hover-background: var(--wcfEditorButtonBackground);
  --ck-color-button-default-active-background: var(--wcfEditorButtonBackground);
  --ck-color-button-on-background: var(--wcfEditorButtonBackgroundActive);
  --ck-color-button-on-hover-background: var(--wcfEditorButtonBackgroundActive);
  --ck-color-button-on-active-background: var(--wcfEditorButtonBackgroundActive);
  --ck-color-button-on-disabled-background: transparent;
  --ck-color-button-on-color: var(--wcfEditorButtonTextActive);
  background-color: var(--wcfContentContainerBackground);
  font-size: var(--wcfFontSizeSmall);
}
.ck .ck-widget.raw-html-embed::before {
  padding: 0 var(--ck-spacing-tiny) !important;
}
@media (hover: hover) {
  .ck-widget.raw-html-embed .ck.ck-button.ck-button:not(.ck-disabled):hover {
    background-color: var(--ck-color-button-default-hover-background);
  }
}
@media screen and (max-width: 544px) {
  .ck.ck-input {
    --ck-input-width: 100%;
  }
  .ckeditor5__restoreDraft__buttons {
    flex-direction: column-reverse;
    row-gap: 10px;
  }
  .ckeditor5__restoreDraft__buttons button[data-type="preview"] {
    margin-right: 0;
  }
}
/* Workarounds for iOS */
html.iOS {
  /* Fixed positioning does not work in iOS when the screen keyboard is open. */
  /* Font sizes below 16px cause iOS to zoom when moving the focus inside of it. */
}
html.iOS .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
  position: absolute !important;
  top: 0 !important;
}
html.iOS .ck.ck-content {
  font-size: 16px;
}
.ck-link-form .ck-labeled-field-view {
  order: 0;
}
.ck-link-form .ck-button-cancel {
  order: 1;
}
.ck-link-form .ck-button-save {
  order: 2;
}
@media (pointer: coarse) {
  /* The resize controls are not supported on touch devices.
	   See https://github.com/ckeditor/ckeditor5/issues/5624 */
  .ck .ck-widget__resizer {
    display: none !important;
  }
}
/* Accessiblity Dialog */
.ck.ck-dialog {
  --ck-accessibility-help-dialog-border-color: var(--wcfContentBorderInner);
  --ck-accessibility-help-dialog-code-background-color: transparent;
  --ck-color-dialog-form-header-border: var(--wcfContentBorderInner);
  background-color: var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadiusContainer);
  box-shadow: var(--wcfBoxShadow);
  color: var(--wcfContentText);
}
.ck.ck-dialog dl:not(.plain):not(:first-child) {
  margin-top: 0;
}
.ck.ck-dialog dl:not(.plain) > :is(dt:not(:empty), dd:not(:last-child)) {
  margin-bottom: 0;
}
/* "Insert Image" Dialog */
.ck.ck-dialog .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  --ck-color-labeled-field-label-background: transparent;
}
.colorPreview {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
  border: 1px solid var(--wcfContentBorderInner);
  display: inline-block;
}
.colorPreview > div {
  border: 2px solid var(--wcfContentBackground);
  cursor: pointer;
  display: block;
  height: 60px;
  width: 180px;
}
.colorPickerColorNew, .colorPickerColorOld, .colorPickerButton {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
  border: 1px solid black;
  box-sizing: content-box;
  display: block;
  min-height: 50px;
}
.colorPickerColorNew > span, .colorPickerColorOld > span, .colorPickerButton > span {
  display: block;
}
.colorPickerButton {
  height: 32px;
  width: 50px;
}
.colorPickerButton > span {
  height: 32px;
}
.colorPickerComparison {
  --border-radius: 5px;
  display: grid;
  grid-template-rows: min-content auto auto min-content;
  text-align: center;
}
.colorPickerColorNew {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.colorPickerColorOld {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.colorPickerChannels {
  align-items: center;
  column-gap: 3px;
  color: var(--wcfContentDimmedText);
  display: flex !important;
}
.colorPickerChannels input[type="number"] {
  padding: 4px;
  text-align: center;
  /* Firefox on Windows requires those fields to be wider due to the overlapping controls. */
  width: 56px;
}
.colorPickerColorNew, .colorPickerColorOld {
  overflow: hidden;
}
.colorPickerColorNew > span, .colorPickerColorOld > span {
  height: 100%;
}
.colorPickerColorOld {
  background-position: 8px 0;
  border-top-width: 0;
}
.colorPickerHslRange, .colorPickerHslRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
}
.colorPickerHslRange {
  width: 100%;
}
.colorPickerHslRange::-webkit-slider-runnable-track {
  background-image: var(--track-image);
  height: 10px;
  border-radius: 5px;
}
.colorPickerHslRange::-webkit-slider-thumb {
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.025), 0 1px 5px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  height: 24px;
  margin-top: -6px;
  width: 24px;
}
.colorPickerHslRange[data-coordinate="hue"]::-webkit-slider-thumb {
  background-color: hsl(var(--hue), 100%, 50%);
}
/* Do not merge these with the block above, it breaks Chrome. */
.colorPickerHslRange::-moz-range-track {
  background-image: var(--track-image);
  height: 10px;
  border-radius: 5px;
}
.colorPickerHslRange::-moz-range-thumb {
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.025), 0 1px 5px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  height: 24px;
  margin-top: -6px;
  width: 24px;
}
.colorPickerHslRange[data-coordinate="hue"]::-moz-range-thumb {
  background-color: hsl(var(--hue), 100%, 50%);
}
.colorPickerHslRange[data-coordinate="hue"] {
  --track-image: linear-gradient(
		to right,
		hsl(0, 100%, 50%),
		hsl(10, 100%, 50%),
		hsl(20, 100%, 50%),
		hsl(30, 100%, 50%),
		hsl(40, 100%, 50%),
		hsl(50, 100%, 50%),
		hsl(60, 100%, 50%),
		hsl(70, 100%, 50%),
		hsl(80, 100%, 50%),
		hsl(90, 100%, 50%),
		hsl(100, 100%, 50%),
		hsl(110, 100%, 50%),
		hsl(120, 100%, 50%),
		hsl(130, 100%, 50%),
		hsl(140, 100%, 50%),
		hsl(150, 100%, 50%),
		hsl(160, 100%, 50%),
		hsl(170, 100%, 50%),
		hsl(180, 100%, 50%),
		hsl(190, 100%, 50%),
		hsl(200, 100%, 50%),
		hsl(210, 100%, 50%),
		hsl(220, 100%, 50%),
		hsl(230, 100%, 50%),
		hsl(240, 100%, 50%),
		hsl(250, 100%, 50%),
		hsl(260, 100%, 50%),
		hsl(270, 100%, 50%),
		hsl(280, 100%, 50%),
		hsl(290, 100%, 50%),
		hsl(300, 100%, 50%),
		hsl(310, 100%, 50%),
		hsl(320, 100%, 50%),
		hsl(330, 100%, 50%),
		hsl(340, 100%, 50%),
		hsl(350, 100%, 50%),
		hsl(359, 100%, 50%)
	);
}
.colorPickerHslRange[data-coordinate="saturation"] {
  --track-image: linear-gradient(
		to right,
		hsl(var(--hue), 0%, var(--lightness)) 0%,
		hsl(var(--hue), 100%, var(--lightness)) 100%
	);
}
.colorPickerHslRange[data-coordinate="lightness"] {
  --track-image: linear-gradient(
		to right,
		hsl(var(--hue), var(--saturation), 0%) 0%,
		hsl(var(--hue), var(--saturation), 50%) 50%,
		hsl(var(--hue), var(--saturation), 100%) 100%
	);
}
.colorPickerValueContainer {
  column-gap: 20px;
  display: grid;
  grid-template-columns: min-content auto;
  margin-top: 20px;
}
@media screen and (max-width: 544px) {
  .colorPickerValueContainer {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
  }
}
.commentList {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  row-gap: 10px;
}
.commentList__item:not(:first-child) {
  border-top: 1px solid var(--wcfContentBorderInner);
  padding-top: 10px;
}
.comment {
  display: flex;
  flex-direction: column;
  padding: 10px;
  row-gap: 10px;
}
.comment__header {
  display: grid;
  column-gap: 10px;
  grid-template-areas: "avatar author status menu" "avatar date status menu";
  grid-template-columns: min-content 1fr min-content min-content;
}
.comment__footer {
  display: grid;
  column-gap: 10px;
  grid-template-areas: "reactions buttons";
  grid-template-columns: auto max-content;
}
.comment__avatar {
  align-self: center;
  grid-area: avatar;
}
.comment__author {
  align-self: end;
  display: flex;
  grid-area: author;
}
.comment__author__link {
  color: inherit;
}
.comment__date {
  display: flex;
  grid-area: date;
}
.comment__permalink {
  color: var(--wcfContentDimmedText);
  font-size: 12px;
}
.comment__status {
  align-self: start;
  column-gap: 5px;
  display: flex;
  grid-area: status;
  padding-top: 2px;
}
.comment__menu {
  align-self: start;
  grid-area: menu;
}
.comment__reactions {
  align-self: center;
  grid-area: reactions;
}
.comment__buttons {
  grid-area: buttons;
  display: flex;
  gap: 10px;
}
.commentAdd {
  display: grid;
  column-gap: 10px;
  grid-template-areas: "avatar content";
  grid-template-columns: min-content 1fr;
  padding: 10px;
}
.commentAdd__avatar {
  grid-area: avatar;
}
.commentAdd__content {
  grid-area: content;
}
.commentAdd__placeholder {
  display: none;
}
.commentAdd__content--collapsed {
  overflow: hidden;
  position: relative;
}
.commentAdd__content--collapsed .commentAdd__placeholder {
  align-items: center;
  background-color: var(--wcfSidebarBackground);
  border-radius: var(--wcfBorderRadius);
  column-gap: 10px;
  color: var(--wcfSidebarText);
  display: flex;
  padding: 10px 20px;
  width: 100%;
}
.commentAdd__content--collapsed .commentAdd__editor {
  left: 200%;
  position: absolute;
  top: -100%;
}
html[data-color-scheme="dark"] .commentAdd__content--collapsed .commentAdd__placeholder {
  border: 1px solid var(--wcfSidebarBorder);
}
.commentAdd__content--loading {
  height: 150px;
  position: relative;
}
.commentAdd__content--loading .commentAdd__editor {
  display: none;
}
.commentAdd__content--loading .commentAdd__loading {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.comment__responses {
  padding-top: 10px;
  padding-left: 20px;
}
.commentResponseList {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.commentResponseList__item {
  border-top: 1px solid var(--wcfContentBorderInner);
  padding-top: 10px;
}
.commentResponse {
  display: flex;
  flex-direction: column;
  padding: 10px;
  row-gap: 10px;
}
.commentResponse__header {
  display: grid;
  column-gap: 10px;
  grid-template-areas: "avatar author status menu" "avatar date status menu";
  grid-template-columns: min-content 1fr min-content min-content;
}
.commentResponse__footer {
  display: grid;
  column-gap: 10px;
  grid-template-areas: "reactions buttons";
  grid-template-columns: 1fr min-content;
}
.commentResponse__avatar {
  align-self: center;
  grid-area: avatar;
}
.commentResponse__author {
  align-self: end;
  display: flex;
  grid-area: author;
}
.commentResponse__author__link {
  color: inherit;
}
.commentResponse__date {
  display: flex;
  grid-area: date;
}
.commentResponse__permalink {
  color: var(--wcfContentDimmedText);
  font-size: 12px;
}
.commentResponse__status {
  align-self: start;
  column-gap: 5px;
  display: flex;
  grid-area: status;
  padding-top: 2px;
}
.commentResponse__menu {
  align-self: start;
  grid-area: menu;
}
.commentResponse__reactions {
  grid-area: reactions;
}
.commentResponse__buttons {
  grid-area: buttons;
  display: flex;
  gap: 10px;
}
.commentResponseAdd {
  border-top: 1px solid var(--wcfContentBorderInner);
  display: grid;
  column-gap: 10px;
  grid-template-areas: "avatar content";
  grid-template-columns: min-content 1fr;
  padding: 10px;
  margin-left: 20px;
}
.commentResponseAdd__avatar {
  grid-area: avatar;
}
.commentResponseAdd__content {
  grid-area: content;
}
.commentResponseAdd__content--loading {
  height: 150px;
  position: relative;
}
.commentResponseAdd__content--loading .commentResponseAdd__editor {
  display: none;
}
.commentResponseAdd__content--loading .commentResponseAdd__loading {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.commentList > li:hover {
  background-color: transparent;
}
@keyframes wcfCommentHighlight {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
.comment.comment__highlight__target, .commentResponse.comment__highlight__target {
  animation: wcfCommentHighlight 0.96s linear;
}
@media screen and (min-width: 545px), print {
  .comment__message {
    padding-left: 42px;
  }
  .comment__footer {
    padding-left: 42px;
  }
  .comment__responses {
    padding-left: 42px;
  }
  .commentResponse__message {
    padding-left: 42px;
  }
  .commentResponse__footer {
    padding-left: 42px;
  }
  .commentResponseAdd {
    margin-left: 42px;
  }
}
@media screen and (max-width: 544px) {
  .commentAdd:not(.commentAdd--collapsed) {
    column-gap: 0;
  }
  .commentAdd:not(.commentAdd--collapsed) .commentAdd__avatar {
    display: none;
  }
  .commentResponseAdd {
    column-gap: 0;
  }
  .commentResponseAdd__avatar {
    display: none;
  }
}
.contactFormAttachments {
  margin-top: 20px;
}
.contentItemList {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 -20px -20px;
}
.contentItem {
  background-color: var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadowCard);
  display: flex;
  flex-direction: column;
  margin: 0 0 20px 20px;
  position: relative;
  overflow: hidden;
}
.contentItemSingleColumn {
  /* The `flex` shorthand fails in IE11 if `calc()` is used. */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(100% - 20px);
}
.contentItemMultiColumn {
  /* The `flex` shorthand fails in IE11 if `calc()` is used. */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 20px);
}
.contentItemLink {
  flex: 1 auto;
}
.contentItemTitleLink {
  color: inherit;
}
.contentItemTitleLink::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.contentItemTitleLink:hover, .contentItemTitleLink:focus {
  color: inherit;
}
/* Deprecated: use contentItemTitleLink instead. */
.contentItemLinkShadow {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.contentItemContent {
  padding: 10px;
}
.contentItemContentTruncate {
  max-height: 150px;
  overflow: hidden;
  position: relative;
}
.contentItemContentTruncate::after {
  background-image: linear-gradient(to top, var(--wcfContentBackground), rgba(var(--wcfContentBackground-rgb) / 0));
  bottom: 0;
  content: "";
  height: 30px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  /* The `top` value is important, because it prevents the last line from being affected
		   when the content isn't too long. */
  top: 120px;
}
.contentItemImage {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px;
  position: relative;
}
.contentItemImageSmall {
  min-height: 75px;
}
.contentItemImageSmall .contentItemImageElement {
  height: 75px;
}
.contentItemImageLarge {
  min-height: 150px;
}
.contentItemImageLarge .contentItemImageElement {
  height: 150px;
}
.contentItemImageElement {
  margin: -10px -10px -10px -10px;
  object-fit: cover;
  object-position: center;
  width: calc(100% + 20px);
}
.contentItemBadges, .contentItemOptions {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
.contentItemImageElement + .contentItemBadges {
  left: 10px;
  position: absolute;
  top: 10px;
  z-index: 1;
}
.contentItemOptions {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}
.contentItemBadge, .contentItemOption {
  flex: 0 auto;
}
.contentItemBadge:not(:first-child), .contentItemOption:not(:first-child) {
  margin-top: 5px;
}
.contentItemBadge {
  border: 1px solid currentColor;
}
.contentItemOption.button {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.contentItemLabels {
  margin-bottom: 5px;
}
.contentItemCategory {
  color: var(--wcfContentDimmedText);
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .contentItemCategory {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .contentItemCategory {
    font-size: 12px;
  }
}
.contentItemTitle {
  color: var(--wcfContentHeadlineLink);
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .contentItemTitle {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .contentItemTitle {
    font-size: 18px;
  }
}
.contentItemTitle:hover {
  color: var(--wcfContentHeadlineLinkActive);
}
.contentItemDescription {
  color: var(--wcfContentDimmedText);
  margin-top: 5px;
}
.contentItemDescription img {
  height: auto !important;
  max-width: 100%;
}
.contentItemContentLinks {
  padding: 0 10px 10px 10px;
}
.contentItemMeta {
  align-items: center;
  border-top: 1px solid var(--wcfContentBorderInner);
  color: var(--wcfContentDimmedText);
  display: flex;
  flex: 0 auto;
  padding: 10px;
  white-space: nowrap;
}
.contentItemMeta .icon {
  color: inherit;
}
.contentItemMetaImage {
  flex: 0 auto;
  margin-right: 10px;
}
.contentItemMetaContent {
  flex: 1 auto;
  font-size: 12px;
}
.contentItemMetaAuthor {
  color: var(--wcfContentText);
}
.contentItemMetaAuthor a, .contentItemMetaAuthor a:hover {
  color: inherit;
}
.contentItemMetaIcons {
  align-items: center;
  display: flex;
  flex: 0 auto;
  margin-left: 10px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .contentItemMetaIcons {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .contentItemMetaIcons {
    font-size: 12px;
  }
}
.contentItemMetaIcon {
  flex: 0 auto;
}
.contentItemMetaIcon:not(:first-child) {
  margin-left: 10px;
}
.contentItemMetaIcon .topReactionShort {
  align-items: center;
  display: flex;
}
.contentItemMetaIcon .reactionType {
  margin-right: 3px;
}
.contentItemImagePreview {
  border-radius: var(--wcfBorderRadius);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  margin-bottom: 10px;
  max-width: 100%;
}
.contentItemImagePreviewButtons {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}
.contentItemImagePreviewButtons > .button {
  flex: 0 auto;
  margin-left: 10px;
}
.contentItemImagePreviewButtons > .innerError {
  flex: 0 0 100%;
  margin-left: 10px;
}
@media screen and (min-width: 1025px), print {
  /* There are no sidebars, use a three column layout. */
  .content:first-child:last-child .contentItemMultiColumn, .boxesTop .contentItemMultiColumn, .boxesBottom .contentItemMultiColumn {
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% / 3 - 20px);
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* The sidebar, if any, is not adjacent to the content, use a three column layout. */
  .contentItemMultiColumn {
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% / 3 - 20px);
  }
}
@media screen and (max-width: 544px) {
  /* There is not enough space to fit two columns. */
  .contentItemList {
    display: block;
  }
  .contentItemMultiColumn {
    max-width: none;
  }
}
.contentNotVisible {
  background-color: var(--wcfContentBackground);
  box-shadow: var(--wcfBoxShadowCard);
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: var(--wcfBorderRadius);
  padding: 20px;
  max-width: 400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media screen and (max-width: 544px) {
  .contentNotVisible {
    padding: 10px;
  }
}
.contentNotVisible__title {
  font-weight: 600;
}
.inputAddon > .inputDatePicker {
  cursor: pointer;
  flex: 0 1 275px;
  min-width: 275px;
}
.datePicker {
  background-color: var(--wcfDropdownBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  color: var(--wcfDropdownText);
  display: none;
  position: fixed;
  width: 240px;
  z-index: 450;
}
.datePicker.active {
  display: block;
}
.datePicker.datePickerTime.datePickerTimeOnly > header, .datePicker.datePickerTime.datePickerTimeOnly > ul {
  display: none;
}
.datePicker.datePickerTime.datePickerTimeOnly > footer {
  border-top-width: 0;
}
.datePicker.datePickerTime > footer {
  display: block;
}
.datePicker > header {
  align-items: center;
  display: flex;
}
.datePicker > header > a {
  display: block;
  flex: 0 0 auto;
  padding: 10px;
}
.datePicker > header > a:not(.active) {
  visibility: hidden;
}
.datePicker > header > span {
  display: block;
  flex: 1 1 auto;
  padding: 10px 0;
  text-align: center;
}
.datePicker select.year {
  margin-left: 5px;
}
.datePicker > ul > li {
  border-top: 1px solid var(--wcfDropdownBorderInner);
  display: flex;
}
.datePicker > ul > li.weekdays, .datePicker > ul > li.weekdays + li {
  border-top-color: var(--wcfDropdownBorderInner);
}
.datePicker > ul > li > a, .datePicker > ul > li > span {
  display: block;
  flex: 1;
  padding: 5px 0;
  text-align: center;
}
.datePicker > ul > li > a:not(:last-child), .datePicker > ul > li > span:not(:last-child) {
  border-right: 1px solid var(--wcfDropdownBorderInner);
}
.datePicker > ul > li > a {
  color: var(--wcfDropdownLink);
}
.datePicker > ul > li > a:hover {
  text-decoration: none;
}
.datePicker > ul > li > a.active, .datePicker > ul > li > a:not(.otherMonth, .disabled):hover {
  background-color: var(--wcfDropdownBackgroundActive);
  color: var(--wcfDropdownLinkActive);
}
.datePicker > ul > li > a.otherMonth, .datePicker > ul > li > a.disabled {
  color: var(--wcfContentDimmedText);
  cursor: default;
}
.datePicker > ul > li > a.disabled {
  opacity: 0.45;
}
.datePicker > ul > li > span {
  color: var(--wcfContentDimmedText);
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .datePicker > ul > li > span {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .datePicker > ul > li > span {
    font-size: 12px;
  }
}
.datePicker > footer {
  border-top: 1px solid var(--wcfDropdownBorderInner);
  display: none;
  padding: 10px;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .inputAddon.inputAddonDatePicker .inputDatePicker {
    flex: 1 auto;
    min-width: auto;
    width: 0;
  }
}
.dialogOverlay {
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  display: grid;
  grid-template-areas: "dialog";
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.12s linear, visibility 0s linear 0.24s;
  visibility: hidden;
  will-change: opacity;
  z-index: 399;
}
.dialogOverlay[aria-hidden="false"] {
  opacity: 1;
  transition-delay: 0s;
  visibility: visible;
}
@keyframes wcfDialog {
  0% {
    visibility: visible;
    transform: translateX(var(--translate-x)) translateY(calc(-50% - 20px));
  }
  100% {
    visibility: visible;
    transform: translateX(var(--translate-x)) translateY(-50%);
  }
}
@keyframes wcfDialogOut {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: hidden;
  }
}
.dialogContainer {
  background-color: var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadiusContainer);
  box-shadow: var(--wcfBoxShadow);
  color: var(--wcfContentText);
  grid-area: dialog;
  z-index: 200;
}
@media screen and (max-width: 544px) {
  .dialogContainer {
    margin: auto;
    max-height: calc(100% - 20px);
    min-width: calc(80% - 20px);
    max-width: calc(100% - 20px);
    position: relative;
  }
}
@media screen and (min-width: 545px), print {
  .dialogContainer {
    align-self: flex-start;
    animation: wcfDialogOut 0.24s;
    animation-fill-mode: forwards;
    justify-self: center;
    max-height: 80%;
    max-width: 80%;
    min-width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(-50%);
  }
  .dialogContainer[aria-hidden="false"] {
    animation: wcfDialog 0.24s;
    animation-fill-mode: forwards;
  }
}
.dialogContainer[aria-hidden="true"] {
  display: none;
}
.dialogContainer[aria-hidden="false"] ~ .dialogContainer[aria-hidden="false"] {
  z-index: 50;
}
.dialogContainer > header {
  display: flex;
  padding: 20px;
}
.dialogContainer > header > span {
  flex: 1 auto;
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .dialogContainer > header > span {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .dialogContainer > header > span {
    font-size: 18px;
  }
}
.dialogContainer > header > .dialogCloseButton {
  align-self: center;
  flex: 0 0 auto;
}
.dialogContainer > header > .dialogCloseButton:hover > .icon {
  color: var(--wcfHeaderLinkActive);
}
.dialogContainer > header > .dialogCloseButton > .icon {
  color: var(--wcfHeaderLink);
}
.dialogContainer > .dialogContent {
  background-color: var(--wcfContentBackground);
  overflow: auto;
}
.dialogContainer > .dialogContent:not(.dialogContentNoPadding) {
  padding: 0 20px;
}
.dialogContainer > .dialogContent:not(.dialogContentNoPadding)::after {
  content: "";
  display: block;
  height: 20px;
}
.dialogContainer > .dialogContent:not(.dialogContentNoPadding).dialogForm::after {
  height: 17px;
}
.dialogContainer > .dialogContent:not(.dialogForm) {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.dialogContainer > .dialogContent dl:not(.plain) > dt {
  float: none;
  text-align: left;
  width: auto !important;
}
.dialogContainer > .dialogContent dl:not(.plain) > dt:empty {
  margin-bottom: 0;
}
.dialogContainer > .dialogContent dl:not(.plain) > dd {
  margin-left: 0 !important;
}
.dialogContainer > .dialogContent .dialogFormSubmit {
  background-color: var(--wcfContentBackground);
  bottom: 0;
  border-radius: 0 0 var(--wcfBorderRadiusContainer) var(--wcfBorderRadiusContainer);
  color: var(--wcfContentText);
  column-gap: 10px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: end;
  left: 0;
  margin-bottom: 0;
  padding: 20px;
  position: absolute;
  right: 0;
}
.dialogContainer > .dialogContent .dialogFormSubmit .button, .dialogContainer > .dialogContent .dialogFormSubmit input {
  margin: 0 !important;
}
.dialogContainer > .dialogContent > div > .section:first-child, .dialogContainer > .dialogContent > div > fieldset:first-child {
  margin-top: 0;
}
.dialogContainer > .dialogContent > div > div > .section:first-child, .dialogContainer > .dialogContent > div > div > fieldset:first-child, .dialogContainer > .dialogContent > div > section > .section:first-child, .dialogContainer > .dialogContent > div > section > fieldset:first-child, .dialogContainer > .dialogContent > div > form > .section:first-child, .dialogContainer > .dialogContent > div > form > fieldset:first-child {
  margin-top: 0;
}
.dialogContainer > .dialogContent .contentHeader {
  margin-top: 0;
}
/* static dialogs */
.jsStaticDialogContent {
  display: none;
}
.spinner {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: var(--wcfBorderRadiusContainer);
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);
  color: #2c3e50;
  left: 50%;
  opacity: 0;
  position: fixed;
  text-align: center;
  top: 200px;
  transform: translateX(-50%);
  transition: visibility 0s linear 0.12s, opacity 0.12s linear;
  visibility: hidden;
  z-index: 401;
}
.spinner.active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* notification overlay */
#systemNotification {
  left: 0;
  opacity: 0;
  pointer-events: none !important;
  position: fixed;
  top: 0;
  transform: translateY(-100%);
  transition: visibility 0.12s linear 0.12s, transform 0.12s linear, opacity 0.12s linear;
  visibility: hidden;
  width: 100%;
  z-index: 460;
}
#systemNotification.active {
  opacity: 1;
  transform: translateY(0%);
  transition-delay: 0s;
  visibility: visible;
}
#systemNotification > p {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-width: 0;
  cursor: pointer;
  display: table;
  margin: 0 auto;
  max-width: 80%;
  pointer-events: auto;
}
/* highlight objects in confirmation messages */
.confirmationObject {
  font-weight: 600;
}
/* New dialog API */
@keyframes dialog {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
.dialog {
  --dialog-max-height: 80%;
  --dialog-max-width: 80%;
  --dialog-padding: 20px;
  animation: 0.24s dialog;
  background-color: transparent;
  border-radius: var(--wcfBorderRadiusContainer);
  border-width: 0;
  box-shadow: var(--wcfBoxShadow);
  display: flex;
  flex-direction: column;
  max-height: var(--dialog-max-height);
  max-width: var(--dialog-max-width);
  min-height: 0;
  min-width: 500px;
  overflow: hidden;
  padding: 0;
}
.dialog:not([open]) {
  display: none;
}
@keyframes dialogBackdrop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.dialog::backdrop {
  animation: 0.24s dialogBackdrop;
  background-color: rgba(0, 0, 0, 0.34);
  overflow-y: scroll;
}
html[data-color-scheme="dark"] .dialog::backdrop {
  color-scheme: dark;
}
.dialog__document {
  background-color: var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadiusContainer);
  color: var(--wcfContentText);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--dialog-padding);
}
.dialog__header {
  column-gap: 10px;
  display: grid;
  grid-template-columns: auto max-content;
  grid-template-areas: "title closeButton";
  margin-bottom: var(--dialog-padding);
}
.dialog__title {
  grid-area: title;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .dialog__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .dialog__title {
    font-size: 18px;
  }
}
.dialog__closeButton {
  grid-area: closeButton;
}
.dialog__content {
  margin: 0 calc(var(--dialog-padding) * -1);
  overflow: auto;
  padding: 0 var(--dialog-padding);
}
.dialog__form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dialog[role="alert"]:not(.dialog--iframe), .dialog[role="alertdialog"] {
  max-width: 500px;
}
.dialog[role="alert"] .dialog__header, .dialog[role="alertdialog"] .dialog__header {
  column-gap: 0;
  grid-template-columns: auto;
  grid-template-areas: "title";
}
.dialog[role="alert"] .dialog__title, .dialog[role="alertdialog"] .dialog__title {
  overflow: initial;
  text-overflow: initial;
  white-space: initial;
}
.dialog__control {
  column-gap: 10px;
  display: grid;
  grid-template-areas: "extra cancel primary";
  grid-template-columns: auto max-content max-content;
  margin-top: 30px;
}
.dialog__control__button--primary {
  grid-area: primary;
}
.dialog__control__button--cancel {
  grid-area: cancel;
}
.dialog__control__button--extra {
  grid-area: extra;
  margin-right: auto;
}
/* Sections inside dialogs */
.dialogContent .section .sectionTitle, .dialog__content .section .sectionTitle {
  border-bottom-width: 0;
  font-weight: 600;
  padding-bottom: 0;
}
@media screen and (min-width: 769px), print {
  .dialogContent .section .sectionTitle, .dialog__content .section .sectionTitle {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  .dialogContent .section .sectionTitle, .dialog__content .section .sectionTitle {
    font-size: 14px;
  }
}
.dialogContent > .section:first-child, .dialogContent > :is(form, section) > .section:first-child, .dialog__content > .section:first-child, .dialog__content > :is(form, section) > .section:first-child {
  margin-top: 0;
}
.dialogContent .section:not(:first-child), .dialog__content .section:not(:first-child) {
  border-top: 1px solid var(--wcfContentBorderInner);
  margin-top: 20px;
  padding-top: 20px;
}
/* <iframe> as the result of an unexpected HTTP response */
.dialog.dialog--iframe {
  height: var(--dialog-max-height);
  width: var(--dialog-max-width);
}
.dialog.dialog--iframe .dialog__document, .dialog.dialog--iframe .dialog__form, .dialog.dialog--iframe .dialog__content {
  height: 100%;
}
.dialog.dialog--iframe .dialog__iframeContainer {
  border: 2px dashed red;
  height: 100%;
  padding: 5px;
}
.dialog.dialog--iframe .dialog__iframe {
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 544px) {
  .dialog {
    --dialog-max-height: calc(100% - 20px);
    --dialog-max-width: calc(100% - 20px);
    min-width: 0;
  }
}
.dropdownMenuContainer {
  pointer-events: none;
}
.dropdown .dropdownToggle:active, .dropdown.dropdownOpen .dropdownToggle {
  outline: 0;
}
.dropdown.inputAddon > .dropdownToggle {
  padding: 4px 7px;
}
.dropdown.preInput {
  display: table;
  width: 100%;
}
.dropdown.preInput input {
  border-radius: 0 3px 3px 0;
  display: table-cell;
  margin: 0;
  width: 99%;
}
.dropdown.preInput textarea {
  border-radius: 0 3px 3px;
  display: block;
  margin-top: 0;
}
.dropdown.dropdownOpen .dropdownMenu {
  display: block;
}
.dropdown .dropdownToggle {
  cursor: pointer;
}
.dropdownMenu {
  background-color: var(--wcfDropdownBackground);
  border-radius: 4px;
  box-shadow: var(--wcfBoxShadow);
  color: var(--wcfDropdownText);
  display: none;
  min-width: 160px;
  padding: 4px 0;
  pointer-events: all;
  position: fixed;
  text-align: left;
  visibility: hidden;
  z-index: 450;
}
.dropdownMenu.dropdownMenuPageSearch {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.dropdownMenu.dropdownOpen {
  display: block;
  visibility: visible;
}
.dropdownMenu li {
  display: block;
}
.dropdownMenu li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText), .dropdownMenu li:focus-within:focus-visible, .dropdownMenu li.dropdownList > li:hover:not(.dropdownDivider), .dropdownMenu li.dropdownNavigationItem, .dropdownMenu li.active {
  background-color: var(--wcfDropdownBackgroundActive);
  color: var(--wcfDropdownLinkActive);
}
.dropdownMenu li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText) > :is(a, button), .dropdownMenu li:focus-within:focus-visible > :is(a, button), .dropdownMenu li.dropdownList > li:hover:not(.dropdownDivider) > :is(a, button), .dropdownMenu li.dropdownNavigationItem > :is(a, button), .dropdownMenu li.active > :is(a, button) {
  color: var(--wcfDropdownLinkActive);
}
.dropdownMenu li.dropdownDivider {
  border-top: 1px solid var(--wcfDropdownBorderInner);
  margin: 4px 0;
}
.dropdownMenu li.dropdownText {
  padding: 6px 12px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .dropdownMenu li.dropdownText {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .dropdownMenu li.dropdownText {
    font-size: 12px;
  }
}
.dropdownMenu li.boxFlag {
  padding-top: 2px;
}
.dropdownMenu li.missingValue > span {
  padding-right: 40px;
  position: relative;
}
.dropdownMenu li.disabled {
  color: var(--wcfContentDimmedText);
}
.dropdownMenu li.disabled > span {
  cursor: not-allowed !important;
}
.dropdownMenu li > :is(a, button, span) {
  clear: both;
  cursor: pointer;
  display: block;
  max-width: 350px;
  overflow: hidden;
  padding: 6px 12px;
  text-decoration: none;
  text-overflow: ellipsis;
  user-select: none;
  white-space: nowrap;
  word-wrap: normal;
}
.dropdownMenu li > :is(a, button, span) > div > h3 {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdownMenu li > button {
  width: 100%;
}
.dropdownMenu li > :is(a, button) {
  color: var(--wcfDropdownLink);
}
.dropdownMenu li > a > small {
  display: block;
}
.dropdownMenu li > :is(a, button) + span.badge {
  display: none;
}
.dropdownMenu li > .box16 {
  align-items: center;
  cursor: pointer;
  min-height: 0;
  padding: 5px 10px;
}
.dropdownMenu li > label {
  display: block;
}
.dropdownMenu li .containerHeadline {
  margin-bottom: 0;
}
.dropdownMenu li .containerHeadline > p {
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .dropdownMenu li .containerHeadline > p {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .dropdownMenu li .containerHeadline > p {
    font-size: 12px;
  }
}
.dropdownMenu li .icon {
  color: inherit;
}
.dropdownMenu .scrollableDropdownMenu {
  max-height: 300px;
  overflow: auto;
}
.dropdownMenu .scrollableDropdownMenu.forceScrollbar {
  overflow-y: scroll;
  overflow-x: hidden;
}
@media screen and (min-width: 769px), print {
  .dropdownMenu .dropdownMenu.pageHeaderSearchDropdown {
    transform: translateY(-10px);
  }
}
@media screen and (max-width: 1024px) {
  .dropdownMenu.dropdownMenuPageSearch {
    left: 0 !important;
    right: 0 !important;
  }
}
.iOS.iOS--virtualKeyboard .dropdownMenu.dropdownOpen {
  position: absolute !important;
}
@media screen and (max-width: 1024px) {
  /* iOS WebKit fails to calculate absolute positions when the documentElement is
	   set to `overflow: hidden`, causing the site to implicitly scroll. Elements
	   with absolute positioning are still relative to (0,0) and are thus (partially)
	   moved out of the viewport. */
  .pageOverlayActive.iOS .dropdownMenu.dropdownOpen {
    position: fixed;
  }
}
.boxFlag > .box24, .boxFlag.box24 {
  align-items: center;
  display: flex !important;
  min-height: 20px;
}
.boxFlag > .box24 > img:first-child, .boxFlag.box24 > img:first-child {
  height: auto;
}
.boxFlag > .box24 > span, .boxFlag.box24 > span {
  display: inline-flex !important;
}
.boxFlag > .box24.dropdownToggle, .boxFlag.box24.dropdownToggle {
  display: inline-flex !important;
}
.userObjectWatchSelect .userObjectWatchSelectHeader {
  font-weight: 600;
  padding-bottom: 0;
}
.userObjectWatchSelect .userObjectWatchSelectDescription {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
  padding-top: 0;
  white-space: normal;
}
@media screen and (min-width: 769px), print {
  .userObjectWatchSelect .userObjectWatchSelectDescription {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .userObjectWatchSelect .userObjectWatchSelectDescription {
    font-size: 12px;
  }
}
.embeddedContent {
  background-color: var(--wcfContentBackground);
  box-shadow: var(--wcfBoxShadowCard);
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: var(--wcfBorderRadius);
  margin: 10px 0;
  max-width: 400px;
  overflow: hidden;
}
/* @deprecated 5.4 Use `<img class="embeddedContentImageElement">` instead */
.embeddedContentImage {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: -10px -10px 10px -10px;
  min-height: 150px;
}
.embeddedContentImageElement {
  margin: -10px -10px 10px -10px;
  object-fit: cover;
  object-position: center;
}
/* This repetition is required because of `.messageBody > .messageText img`. */
.embeddedContentImageElement.embeddedContentImageElement.embeddedContentImageElement {
  height: 150px !important;
  max-width: calc(100% + 20px);
  width: calc(100% + 20px);
}
.embeddedContentLink {
  display: block;
  padding: 10px;
  position: relative;
}
.embeddedContentTitleLink {
  color: inherit;
}
.embeddedContentTitleLink::before {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}
.embeddedContentTitleLink:hover, .embeddedContentTitleLink:focus {
  color: inherit;
}
@media (pointer: fine) {
  .embeddedContent:hover .embeddedContentTitleLink {
    text-decoration: underline;
  }
}
/* @deprecated 6.0 Use `.embeddedContentTitleLink` instead */
.embeddedContentLinkShadow {
  inset: 0;
  position: absolute;
}
.embeddedContentCategory {
  color: var(--wcfContentDimmedText);
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .embeddedContentCategory {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .embeddedContentCategory {
    font-size: 12px;
  }
}
.embeddedContent .embeddedContentTitle, .messageBody > .messageText .embeddedContentTitle, #messagePreview > .htmlContent .embeddedContentTitle, #messagePreview > .ck.ck-content.ck-editor__editable .embeddedContentTitle, .messageBody#messagePreview > .messageText .embeddedContentTitle, .messageSignature#messagePreview > div .embeddedContentTitle {
  color: var(--wcfContentHeadlineText);
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .embeddedContent .embeddedContentTitle, .messageBody > .messageText .embeddedContentTitle, #messagePreview > .htmlContent .embeddedContentTitle, #messagePreview > .ck.ck-content.ck-editor__editable .embeddedContentTitle, .messageBody#messagePreview > .messageText .embeddedContentTitle, .messageSignature#messagePreview > div .embeddedContentTitle {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .embeddedContent .embeddedContentTitle, .messageBody > .messageText .embeddedContentTitle, #messagePreview > .htmlContent .embeddedContentTitle, #messagePreview > .ck.ck-content.ck-editor__editable .embeddedContentTitle, .messageBody#messagePreview > .messageText .embeddedContentTitle, .messageSignature#messagePreview > div .embeddedContentTitle {
    font-size: 18px;
  }
}
.embeddedContentDetails {
  margin-top: 5px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .embeddedContentDetails {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .embeddedContentDetails {
    font-size: 12px;
  }
}
.embeddedContentDescription {
  color: var(--wcfContentDimmedText);
  margin-top: 10px;
  max-height: calc(5em * var(--wcfFontLineHeight));
  overflow: hidden;
  position: relative;
}
.embeddedContentDescription::after {
  background-image: linear-gradient(to top, var(--wcfContentBackground), rgba(var(--wcfContentBackground-rgb) / 0));
  content: "";
  left: 0;
  height: calc(1em * var(--wcfFontLineHeight));
  position: absolute;
  right: 0;
  top: calc(4em * var(--wcfFontLineHeight));
}
.embeddedContentMeta {
  align-items: center;
  border-top: 1px solid var(--wcfContentBorderInner);
  color: var(--wcfContentDimmedText);
  display: flex;
  padding: 10px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .embeddedContentMeta {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .embeddedContentMeta {
    font-size: 12px;
  }
}
.embeddedContentMetaImage {
  flex: 0 auto;
  margin-right: 10px;
}
.embeddedContentMetaContent {
  flex: 1 auto;
}
.embeddedContentMetaAuthor {
  color: var(--wcfContentText);
}
.embeddedContentMetaAuthor > a {
  color: inherit;
}
.embeddedContentMetaAuthor > a:hover {
  text-decoration: underline;
}
.fileList {
  display: grid;
  gap: 10px;
  grid-auto-flow: row;
}
@media screen and (max-width: 768px) {
  .fileList {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .fileList {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1025px), print {
  .fileList {
    grid-template-columns: repeat(3, 1fr);
  }
}
.fileList:not(:empty) {
  margin-top: 20px;
}
.fileList__item {
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadowCard);
  display: grid;
  grid-template-areas: "file filename" "file fileSize" "file buttons" "file error";
  grid-template-columns: 80px auto;
  padding: 10px;
}
.fileList__item--error {
  border-color: var(--wcfStatusErrorBorder);
}
.fileList__item--error .fileList__item__file {
  color: var(--wcfStatusErrorText);
}
.fileList__item .innerError {
  grid-area: error;
}
.fileList__item__errorMessage {
  grid-area: error;
}
.fileList__item__file {
  display: flex;
  grid-area: file;
  justify-content: center;
  margin-right: 10px;
}
.fileList__item__filename {
  font-size: 12px;
  grid-area: filename;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fileList__item__fileSize {
  color: var(--wcfContentDimmedText);
  font-size: 12px;
  grid-area: fileSize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fileList__item__buttons {
  column-gap: 5px;
  display: flex;
  grid-area: buttons;
  justify-content: end;
}
.fileList__item__progress {
  align-items: center;
  column-gap: 10px;
  display: flex;
  grid-area: buttons;
}
.fileList__item__progress__readout {
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .fileList__item__progress__readout {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .fileList__item__progress__readout {
    font-size: 12px;
  }
}
woltlab-core-file img {
  object-fit: contain;
}
.woltlabCoreFileUpload__button {
  position: relative;
}
.woltlabCoreFileUpload__input {
  cursor: pointer;
  height: 100%;
  left: 50%;
  opacity: 0;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
}
.woltlabCoreFileUpload__input::-webkit-file-upload-button {
  cursor: pointer;
}
.fontAwesomeIcons {
  border: 1px solid var(--wcfContentBorderInner);
  max-height: 540px;
  overflow: auto;
}
@media only screen and (min-height: 700px) and (max-height: 800px) {
  .fontAwesomeIcons {
    max-height: 450px;
  }
}
.fontAwesomeIcons > li {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 0;
  width: 150px;
}
.fontAwesomeIcons > li:hover {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
  cursor: pointer;
}
.fontAwesomeIcons > li:hover > .icon, .fontAwesomeIcons > li:hover > small {
  color: inherit;
  cursor: pointer;
}
.fontAwesomeIcons > li > small {
  color: var(--wcfContentDimmedText);
  flex: 0 0 100%;
  text-align: center;
}
.googleMap {
  display: block;
  height: 400px;
}
.sidebarGoogleMap {
  display: block;
  height: 250px;
}
.googleMapsCustomControlContainer {
  cursor: pointer !important;
  margin-top: 5px;
}
.googleMapsCustomControlContainer .googleMapsCustomControl {
  text-align: center;
  position: relative;
  color: #565656;
  font-size: 11px !important;
  background-color: white;
  padding: 1px 6px;
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.14902);
  box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
  min-width: 29px;
}
.googleMapsCustomControlContainer .googleMapsCustomControl:hover {
  background-color: #ebebeb;
  color: black;
}
.googleMapsCustomControlContainer .googleMapsCustomControl.active {
  color: black;
  font-weight: 500;
}
.googleMapsUseLocationSuggestionLink {
  font-size: var(--wcfFontSizeSmall);
}
@media screen and (min-width: 1025px), print {
  .googleMapsDirectionsContainer {
    display: flex;
  }
  .googleMapsDirectionsContainer .googleMap, .googleMapsDirectionsContainer .googleMapsDirections {
    flex: 0 0 50%;
  }
}
.googleMapsDirectionsContainer .googleMapsDirections {
  height: 400px;
  padding-left: 10px;
  overflow-y: scroll;
}
.googleMapsDirectionsGoogleLinkContainer {
  display: block;
  margin-top: 5px;
  text-align: right;
}
.googleMapsInfoWindow {
  color: #333;
}
.googleMapsInfoWindow a, .googleMapsInfoWindow a:hover {
  color: #369;
}
/* ImageViewer for WCF */
.wcfImageViewer {
  --wcfImageViewerBorderColor: rgba(51, 51, 51, 1);
  --wcfImageViewerBorderColor-rgb: 51 51 51;
  --wcfImageViewerFontColor: rgba(211, 211, 211, 1);
  background-color: black;
  bottom: 0;
  display: none;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 399;
}
.wcfImageViewer fa-icon {
  color: #9e9e9e;
}
.wcfImageViewer.open {
  display: block;
  opacity: 1;
}
.wcfImageViewer.maximized:not(.wcfImageViewerMobile) > header {
  top: -100px;
}
.wcfImageViewer.maximized:not(.wcfImageViewerMobile) > div {
  bottom: 0;
  border-color: rgba(var(--wcfImageViewerBorderColor-rgb) / 0);
  top: 0;
}
.wcfImageViewer.maximized:not(.wcfImageViewerMobile) > footer {
  bottom: -100px;
}
.wcfImageViewer.wcfImageViewerMobile > header, .wcfImageViewer.wcfImageViewerMobile > footer {
  background-color: black;
  opacity: 1;
  position: absolute;
  visibility: visible;
  z-index: 402;
}
.wcfImageViewer.wcfImageViewerMobile.maximized > header, .wcfImageViewer.wcfImageViewerMobile.maximized > footer {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.24s, opacity 0.24s linear;
}
.wcfImageViewer.wcfImageViewerMobile.maximized > div > ul > li.pointer {
  opacity: 0;
}
.wcfImageViewer.wcfImageViewerMobile > div {
  bottom: 0;
  top: 0;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li {
  background-color: #e0e0e0;
  border-radius: 30px;
  display: block;
  margin-top: -24px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transition: opacity 0.24s;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.pointer {
  opacity: 1;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonFull, .wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonNext, .wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonPrevious {
  /* places buttons above images at all times */
  z-index: 30;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonPrevious {
  left: 10px;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonPrevious > span {
  left: -3px;
  position: relative;
  top: 2px;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonNext {
  right: 10px;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonNext > span {
  position: relative;
  right: -1px;
  top: 2px;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonFull {
  bottom: 80px;
  left: 50%;
  top: auto;
  transform: translateX(-50%);
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonFull > span {
  font-size: 32px;
  left: 2px;
  position: relative;
  top: 3px;
}
.wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonToggle, .wcfImageViewer.wcfImageViewerMobile > div > ul > li.wcfImageViewerSlideshowButtonEnlarge {
  display: none;
}
.wcfImageViewer.wcfImageViewerMobile > footer > .wcfImageViewerButtonPrevious, .wcfImageViewer.wcfImageViewerMobile > footer > .wcfImageViewerButtonNext {
  display: none;
}
.wcfImageViewer.wcfImageViewerMobile > footer > div {
  margin: 0;
}
.wcfImageViewer > header, .wcfImageViewer > div, .wcfImageViewer > footer {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 400;
}
.wcfImageViewer > header {
  height: 100px;
  overflow: hidden;
  padding: 1rem;
  top: 0;
}
.wcfImageViewer > header > div > a > img {
  height: 64px;
  width: 64px;
}
.wcfImageViewer > header h1, .wcfImageViewer > header h2, .wcfImageViewer > header h3 {
  color: var(--wcfImageViewerFontColor);
}
.wcfImageViewer > header h1 > a, .wcfImageViewer > header h2 > a, .wcfImageViewer > header h3 > a {
  color: var(--wcfImageViewerFontColor);
}
.wcfImageViewer > header h1 {
  font-size: 1.75rem;
  max-width: calc(100% - 70px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wcfImageViewer > header h2 {
  font-size: 1.25rem;
}
.wcfImageViewer > header h3 {
  color: var(--wcfImageViewerFontColor);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.wcfImageViewer > header > .wcfImageViewerButtonClose {
  position: absolute;
  right: 26px;
  top: 26px;
}
.wcfImageViewer > div {
  background-color: black;
  border-bottom: 1px solid var(--wcfImageViewerBorderColor);
  border-top: 1px solid var(--wcfImageViewerBorderColor);
  bottom: 100px;
  top: 100px;
  transition-property: top, bottom, border-color;
  transition-timing-function: linear;
  transition-duration: 0.24s;
  z-index: 401;
}
.wcfImageViewer > div.loading:before {
  /*
			TODO: Migrate this or replace the image viewer.
			@extend .icon48;
			@extend .fa-spinner;
			*/
  content: "" !important;
  display: block;
  left: calc(50% - 34px);
  position: absolute;
  top: calc(50% - 34px);
}
.wcfImageViewer > div > img {
  opacity: 0;
  position: absolute;
  top: 50%;
  transition: opacity 0.24s linear;
  z-index: 10;
}
.wcfImageViewer > div > img.animateTransformation {
  transition: left 0.24s, margin-top 0.24s, height 0.24s, width 0.24s, opacity 0.24s;
}
.wcfImageViewer > div > img.active {
  opacity: 1;
  z-index: 20;
}
.wcfImageViewer:not(.wcfImageViewerMobile) .pointer:hover fa-icon, .wcfImageViewer:not(.wcfImageViewerMobile) .wcfImageViewerButtonClose:hover fa-icon {
  color: white;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > header {
  transition: top 0.24s linear;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > footer {
  transition: bottom 0.24s linear;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > div {
  cursor: pointer;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > div > img, .wcfImageViewer:not(.wcfImageViewerMobile) > div > ul {
  cursor: default;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > div > ul {
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--wcfImageViewerBorderColor);
  border-bottom-width: 0;
  border-radius: 2px 2px 0 0;
  display: flex;
  bottom: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 30;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > div > ul > li {
  display: flex;
  flex: 0 0 auto;
  padding: 5px;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > div > ul > li:not(.pointer) fa-icon {
  color: #424242 !important;
}
.wcfImageViewer:not(.wcfImageViewerMobile) > div > ul > li.wcfImageViewerSlideshowButtonEnlarge, .wcfImageViewer:not(.wcfImageViewerMobile) > div > ul > li.wcfImageViewerSlideshowButtonFull {
  border-left: 1px solid var(--wcfImageViewerBorderColor);
  box-sizing: border-box;
}
.wcfImageViewer > footer {
  bottom: 0;
  height: 100px;
  padding: 10px;
}
.wcfImageViewer > footer:hover > div > ul > li > img {
  -webkit-filter: none;
  filter: none;
}
.wcfImageViewer > footer > span {
  bottom: 0;
  font-size: 48px;
  padding-top: 26px;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.24s;
  width: 30px;
  z-index: 2;
}
.wcfImageViewer > footer > span.pointer {
  opacity: 0.6;
}
.wcfImageViewer > footer > span.pointer:hover {
  opacity: 1;
}
.wcfImageViewer > footer > span.wcfImageViewerButtonPrevious {
  left: 5px;
}
.wcfImageViewer > footer > span.wcfImageViewerButtonNext {
  right: 5px;
}
.wcfImageViewer > footer > div {
  height: 80px;
  margin: 0 35px;
  overflow: hidden;
  white-space: nowrap;
}
.wcfImageViewer > footer > div > ul {
  display: flex;
  font-size: 0;
  height: 80px;
  z-index: 1;
  transition: margin-left cubic-bezier(0.5, 1.595, 0.56, 0.98) 0.24s;
}
.wcfImageViewer > footer > div > ul > li {
  align-items: center;
  display: flex;
  flex: 0 0 80px;
  opacity: 0.6;
  position: relative;
  transition: opacity 0.24s;
}
.wcfImageViewer > footer > div > ul > li.active, .wcfImageViewer > footer > div > ul > li:hover {
  opacity: 1;
}
.wcfImageViewer > footer > div > ul > li:not(:last-child) {
  margin-right: 10px;
}
.wcfImageViewer > footer > div > ul > li.active > img {
  -webkit-filter: none;
  filter: none;
}
.wcfImageViewer > footer > div > ul > li.loading:before {
  /*
							TODO: Migrate this or replace the image viewer.
							@extend .icon48;
							@extend .fa-spinner;
							*/
}
.wcfImageViewer > footer > div > ul > li.loading > img {
  opacity: 0;
}
.wcfImageViewer > footer > div > ul > li > img {
  max-height: 80px;
  max-width: 80px;
  object-fit: contain;
}
@media only screen and (max-width: 800px) {
  .wcfImageViewer > header {
    height: 80px;
  }
  .wcfImageViewer > header > .wcfImageViewerButtonClose {
    right: 16px;
    top: 16px;
  }
  .wcfImageViewer > footer {
    height: 80px;
  }
  .wcfImageViewer > footer > div {
    height: 60px;
  }
  .wcfImageViewer > footer > div > ul {
    height: 60px;
  }
  .wcfImageViewer > footer > div > ul > li {
    height: 60px;
  }
}
.inputItemList {
  background-color: var(--wcfInputBackground);
  border: 1px solid var(--wcfInputBorder);
  border-radius: var(--wcfBorderRadius);
  color: var(--wcfInputText);
  font-weight: 400;
  outline: none;
  padding: 4px 8px;
  font-family: var(--wcfFontFamily);
  line-height: var(--wcfFontLineHeight);
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 0;
  padding-top: 5px;
}
@media screen and (min-width: 769px), print {
  .inputItemList {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  .inputItemList {
    font-size: 14px;
  }
}
.inputItemList:focus, .inputItemList:hover {
  background-color: var(--wcfInputBackgroundActive);
  border-color: var(--wcfInputBorderActive);
  color: var(--wcfInputTextActive);
}
.inputItemList[disabled], .inputItemList.disabled {
  background-color: var(--wcfInputDisabledBackground) !important;
  border-color: var(--wcfInputDisabledBorder) !important;
  color: var(--wcfInputDisabledText) !important;
}
.inputItemList[readonly] {
  color: var(--wcfInputDisabledText) !important;
}
.inputItemList[data-accepts-new-items="true"] {
  cursor: text;
}
.inputItemList:focus-within:focus-visible {
  border-color: var(--wcfInputBorderActive);
}
.inputItemList > .item, .inputItemList > .input {
  flex: 0 0 auto;
  margin-bottom: 5px;
}
.inputItemList > .item:not(:last-child), .inputItemList > .input:not(:last-child) {
  margin-right: 5px;
}
.inputItemList > .item {
  background-color: var(--wcfButtonBackground);
  border-radius: 2px;
  color: var(--wcfButtonText);
  cursor: default;
  max-width: 100%;
  padding: 1px 5px;
}
.inputItemList > .item .icon {
  color: inherit;
}
.inputItemList > .item.active {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
}
.inputItemList:not(.disabled) > item:hover {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
}
.inputItemList > .input > input {
  background-color: transparent !important;
  border-width: 0 !important;
  min-width: 165px;
  padding: 0 !important;
}
.inputItemListLimitReached {
  color: var(--wcfContentDimmedText);
  vertical-align: middle;
  /* The input field does not have a distinct appearance, making the text unselectable
	   will prevent the browser from displaying a potentially misleading caret cursor. */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* #### Labels #### */
/* label list */
.labelList {
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
  display: inline-flex;
}
.labelList > li {
  flex: 0 1 auto;
}
.labelList > li:not(:last-child) {
  margin-right: 5px;
}
.labelList.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.labelList.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
.labelList > li:not(:first-child) .label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.labelList > li:not(:last-child) {
  margin-right: 1px;
}
.labelList > li:not(:last-child) .label {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.labelList > li .label {
  top: -1px;
}
/* ACP label list */
#labelList > li {
  flex-basis: 30%;
  margin-bottom: 10px;
}
#labelList > li.labelCustomClass {
  display: flex;
}
#labelList > li.labelCustomClass > input[type="radio"] {
  flex: 0 0 auto;
  margin-right: 7px;
}
#labelList > li.labelCustomClass > span {
  flex: 1 1 auto;
}
.labelChooser > .dropdownToggle > span {
  cursor: pointer;
}
.likesSummary {
  color: var(--wcfContentDimmedText);
  cursor: pointer;
  flex: 0 0 auto;
}
.likesSummary > .icon {
  color: var(--wcfContentDimmedText);
  margin-right: 5px;
}
.wcfLikeCounter {
  color: var(--wcfContentDimmedText);
}
.wcfLikeCounter .icon {
  color: inherit !important;
}
.wcfLikeCounter.likeCounterLiked {
  color: #060 !important;
}
.wcfLikeCounter.likeCounterDisliked {
  color: #900 !important;
}
html.touch .wcfLikeButton > .button:not(.active):hover, html.touch .wcfDislikeButton > .button:not(.active):hover {
  background-color: var(--wcfButtonBackground) !important;
  color: var(--wcfButtonText) !important;
}
.sortableList:not(.tabularList) {
  list-style: decimal outside;
  margin-left: 20px;
}
.sortableList:not(.tabularList) .sortableList {
  margin-left: 30px;
}
.sortableNode {
  cursor: move;
}
.sortableNode:not(:last-child) {
  border-bottom: 1px solid var(--wcfContentBorderInner);
}
.sortableNode > .sortableList:not(:empty) {
  border-top: 1px solid var(--wcfContentBorderInner);
}
.sortableNodeLabel {
  align-items: center;
  padding: 10px;
  /* `display:flex` acts weird inside lists with a visible list-style */
  display: inline-flex;
  width: 100%;
}
.sortableNodeLabel:hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
}
.sortableNodeLabel:not(.sortableNodeStaticItem) {
  cursor: move;
}
.sortableNodeLabel > .icon, .sortableNodeLabel > a {
  margin-right: 5px;
}
.sortableNodeLabel > .icon {
  flex: 0 0 auto;
}
.sortableNodeLabel > a {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sortableNodeLabel > .statusDisplay {
  align-items: center;
  display: flex;
  flex: 1 0 auto;
  justify-content: flex-end;
}
.sortableNodeLabel > .statusDisplay > a, .sortableNodeLabel > .statusDisplay > button, .sortableNodeLabel > .statusDisplay > span {
  flex: 0 0 auto;
  margin-left: 5px;
}
.sortableNodeLabel > .statusDisplay fa-icon {
  color: var(--wcfContentText);
}
.sortablePlaceholder {
  background-color: var(--wcfStatusWarningBackground);
  border: 1px solid var(--wcfStatusWarningBorder);
  color: var(--wcfStatusWarningText);
  padding: 10px;
}
.sortablePlaceholder.sortableInvalidTarget {
  background-color: var(--wcfStatusErrorBackground);
  border-color: var(--wcfStatusErrorBorder);
  color: var(--wcfStatusErrorText);
}
@media screen and (max-width: 544px) {
  .sortableNodeHandle {
    display: none;
  }
}
@media screen and (min-width: 1025px), print {
  .sortableNodeHandle {
    display: none;
  }
}
/* element list with checkboxes */
.structuredList {
  border: 1px solid #4f81bd;
  border-width: 1px 0;
}
.structuredList li {
  display: flex;
  padding: 10px 0;
}
.structuredList li:not(:first-child) {
  border-top: 1px solid #eee;
}
.structuredList li:hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
}
.structuredList li > span {
  flex: 1 1 auto;
}
.structuredList li > label {
  cursor: pointer;
  flex: 0 0 auto;
}
.structuredList li > span, .structuredList li > label {
  padding: 0 10px;
}
.loading-indicator {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  padding: var(--padding);
}
.loading-indicator[size="24"] {
  --font-size: var(--wcfFontSizeSmall);
  --padding: 10px;
  --row-gap: 0;
}
.loading-indicator[size="48"] {
  --font-size: var(--wcfFontSizeDefault);
  --padding: 10px;
  --row-gap: 5px;
}
.loading-indicator[size="96"] {
  --font-size: var(--wcfFontSizeHeadline);
  --padding: 20px;
  --row-gap: 10px;
}
.loading-indicator__wrapper {
  display: grid;
  justify-items: center;
  row-gap: var(--row-gap);
}
.loading-indicator__text {
  font-size: var(--font-size);
}
.innerInfo + .mediaManagerMediaUploadButton {
  margin-top: 5px;
}
.mediaManagerMediaUploadButton > .button {
  margin: 0;
  text-align: center;
  width: 100%;
}
.mediaManagerMediaUploadButton > .button > input {
  width: 100%;
}
.mediaManagerMediaList {
  font-size: 0;
  margin-top: 5px;
}
.mediaManagerMediaList::before, .mediaManagerMediaList::after {
  display: table;
  content: "";
}
.mediaManagerMediaList::after {
  clear: both;
}
.mediaManagerMediaList > li {
  float: left;
  position: relative;
  border: 1px solid #eee;
  overflow: hidden;
  font-size: 1rem;
  margin: 0 10px 10px 0;
}
.mediaManagerMediaList > li.jsMarked > .mediaInformation, .mediaManagerMediaList > li.jsMarked > .buttonGroupNavigation {
  background-color: rgb(var(--wcfButtonPrimaryBackground-rgb) / 80%);
  color: var(--wcfButtonPrimaryText);
}
.mediaManagerMediaList > li.jsMarked > .mediaInformation a, .mediaManagerMediaList > li.jsMarked > .buttonGroupNavigation a {
  color: var(--wcfButtonPrimaryText);
}
.mediaManagerMediaList > li.jsMarked > .mediaInformation fa-icon, .mediaManagerMediaList > li.jsMarked > .buttonGroupNavigation fa-icon {
  color: var(--wcfButtonPrimaryText);
  text-shadow: none;
}
.mediaManagerMediaList > li.jsSelected > .mediaInformation, .mediaManagerMediaList > li.jsSelected > .buttonGroupNavigation {
  background-color: rgba(0, 128, 0, 0.8);
  color: white;
}
.mediaManagerMediaList > li.jsSelected > .mediaInformation a, .mediaManagerMediaList > li.jsSelected > .buttonGroupNavigation a {
  color: white;
}
.mediaManagerMediaList > li.jsSelected > .mediaInformation fa-icon, .mediaManagerMediaList > li.jsSelected > .buttonGroupNavigation fa-icon {
  color: white;
  text-shadow: none;
}
.mediaManagerMediaList > li.uploadFailed {
  cursor: pointer;
}
.mediaManagerMediaList > li.uploadFailed > .mediaInformation {
  background-color: var(--wcfStatusErrorBackground);
  color: var(--wcfStatusErrorText);
}
.mediaManagerMediaList > li.uploadFailed > .mediaInformation .mediaTitle {
  max-height: 144px;
  white-space: normal;
}
.mediaManagerMediaList > li > .mediaThumbnail {
  height: 144px;
  width: 144px;
}
.mediaManagerMediaList > li > .mediaInformation {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .mediaManagerMediaList > li > .mediaInformation {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .mediaManagerMediaList > li > .mediaInformation {
    font-size: 12px;
  }
}
.mediaManagerMediaList > li > .mediaInformation .mediaTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mediaManagerMediaList > li > .buttonGroupNavigation {
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
}
@media screen and (min-width: 1025px), print {
  .mediaManagerMediaList > li > .buttonGroupNavigation fa-icon {
    color: #fff;
    text-shadow: 0 -1px 0 var(--wcfTextShadowLight);
  }
}
@media screen and (max-width: 1024px) {
  .mediaManagerMediaList > li .buttonGroupNavigation.open {
    left: 0;
    z-index: 10;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation.open > .buttonList {
    display: block;
    visibility: visible;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .dropdownLabel {
    left: calc(100% - 24px);
    position: relative;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .dropdownLabel fa-icon {
    color: #fff;
    text-shadow: 0 -1px 0 var(--wcfTextShadowLight);
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList {
    background-color: var(--wcfDropdownBackground);
    border-radius: 4px;
    box-shadow: var(--wcfBoxShadow);
    color: var(--wcfDropdownText);
    display: none;
    min-width: 160px;
    padding: 4px 0;
    pointer-events: all;
    position: fixed;
    text-align: left;
    visibility: hidden;
    z-index: 450;
    position: static !important;
    top: 0;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList.dropdownMenuPageSearch {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList.dropdownOpen {
    display: block;
    visibility: visible;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li {
    display: block;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText), .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li:focus-within:focus-visible, .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.dropdownList > li:hover:not(.dropdownDivider), .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.dropdownNavigationItem, .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.active {
    background-color: var(--wcfDropdownBackgroundActive);
    color: var(--wcfDropdownLinkActive);
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText) > :is(a, button), .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li:focus-within:focus-visible > :is(a, button), .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.dropdownList > li:hover:not(.dropdownDivider) > :is(a, button), .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.dropdownNavigationItem > :is(a, button), .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.active > :is(a, button) {
    color: var(--wcfDropdownLinkActive);
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.dropdownDivider {
    border-top: 1px solid var(--wcfDropdownBorderInner);
    margin: 4px 0;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.dropdownText {
    padding: 6px 12px;
    font-weight: 400;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.boxFlag {
    padding-top: 2px;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.missingValue > span {
    padding-right: 40px;
    position: relative;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.disabled {
    color: var(--wcfContentDimmedText);
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.disabled > span {
    cursor: not-allowed !important;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li > :is(a, button, span) {
    clear: both;
    cursor: pointer;
    display: block;
    max-width: 350px;
    overflow: hidden;
    padding: 6px 12px;
    text-decoration: none;
    text-overflow: ellipsis;
    user-select: none;
    white-space: nowrap;
    word-wrap: normal;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li > :is(a, button, span) > div > h3 {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li > button {
    width: 100%;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li > :is(a, button) {
    color: var(--wcfDropdownLink);
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li > a > small {
    display: block;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li > :is(a, button) + span.badge {
    display: none;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li > .box16 {
    align-items: center;
    cursor: pointer;
    min-height: 0;
    padding: 5px 10px;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li > label {
    display: block;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li .containerHeadline {
    margin-bottom: 0;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li .containerHeadline > p {
    font-weight: 400;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li .icon {
    color: inherit;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList .scrollableDropdownMenu {
    max-height: 300px;
    overflow: auto;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList .scrollableDropdownMenu.forceScrollbar {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList > li .invisible {
    display: inline;
    padding-left: 5px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.dropdownText {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 1024px) and (max-width: 768px) {
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li.dropdownText {
    font-size: 12px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li .containerHeadline > p {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 1024px) and (max-width: 768px) {
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList li .containerHeadline > p {
    font-size: 12px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList .dropdownMenu.pageHeaderSearchDropdown {
    transform: translateY(-10px);
  }
}
@media screen and (min-width: 1025px), print {
  .mediaManagerMediaList > li .buttonGroupNavigation {
    transition: opacity 0.12s;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .dropdownLabel {
    display: none;
  }
}
@media screen and (min-width: 769px), print {
  .mediaManagerMediaList > li > .buttonGroupNavigation {
    height: 0;
  }
  .mediaManagerMediaList > li:hover > .buttonGroupNavigation {
    height: auto;
    padding: 10px;
  }
}
@media screen and (max-width: 1024px) {
  .mediaManagerMediaList > li > .buttonGroupNavigation .mediaCheckbox {
    display: none !important;
  }
}
[id^="mediaEditor"] .mediaEditorButtons {
  margin-bottom: 20px;
}
[id^="mediaEditor"] .mediaThumbnail {
  text-align: center;
  margin-bottom: 20px;
}
[id^="mediaEditor"] .mediaThumbnail + .box48 > dl {
  font-size: var(--wcfFontSizeSmall);
}
.mediaManagerCategoryList {
  margin-bottom: 5px;
}
.button.jsMediaSelectButton + .button {
  margin-left: 5px;
}
@media screen and (min-width: 769px), print {
  .messageList:not(.messageReducedList) {
    border-top: 1px solid var(--wcfContentBorder);
  }
  .messageList:not(.messageReducedList) > li {
    border-bottom: 1px solid var(--wcfContentBorder);
    padding: 30px 0;
  }
  .messageList:not(.messageReducedList) > li.messageListPagination:last-child {
    border-bottom-width: 0;
  }
}
@media screen and (max-width: 768px) {
  .messageList:not(.messageReducedList) .messageSidebar {
    border-top: 1px solid var(--wcfContentBorder);
  }
  .messageList:not(.messageReducedList) > li:first-child .messageSidebar {
    border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0 0;
    border-top-color: var(--wcfSidebarBorder);
  }
  .messageList:not(.messageReducedList) > .messageListPagination {
    border-top: 1px solid var(--wcfContentBorder);
    margin: 0 -10px;
    padding: 20px 10px;
  }
}
.messageList:not(.messageReducedList) > .messageListNotice > .info {
  margin-top: 0;
}
@media screen and (min-width: 769px), print {
  .messageList.messageReducedList > li:not(:last-child) {
    padding-bottom: 30px;
  }
}
.messageList > .anchorFixedHeader:not(.disableAnchorFixedHeader):target {
  margin-top: -49px;
  pointer-events: none;
  position: relative;
  z-index: 10;
}
.messageList > .anchorFixedHeader:not(.disableAnchorFixedHeader):target::after {
  content: "";
  display: block;
  height: 50px;
}
.messageList > .anchorFixedHeader:not(.disableAnchorFixedHeader):target > .message {
  pointer-events: all;
  transform: translateY(49px);
}
@media screen and (max-width: 768px) {
  .messageList > li:not(:last-child) {
    padding-bottom: 30px;
  }
}
@media screen and (min-width: 769px), print {
  .message {
    display: flex;
  }
}
.message .messageClipboardCheckbox {
  display: block;
  height: 24px;
  width: 24px;
}
.message .messageClipboardCheckbox input[type="checkbox"] {
  height: 18px;
  width: 18px;
}
/* sidebar */
.messageSidebar {
  background-color: var(--wcfSidebarBackground);
  border: 1px solid var(--wcfSidebarBorder);
  border-width: 1px 0;
  color: var(--wcfSidebarText);
  position: relative;
}
@media screen and (min-width: 769px), print {
  .messageSidebar {
    align-self: flex-start;
    border-radius: var(--wcfBorderRadius);
    border-width: 1px;
    text-align: center;
  }
  .messageSidebar .username {
    /* required to fix wrapping behavior in combination with
			   `overflow-wrap` / `word-wrap` */
    display: block;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .messageSidebar {
    flex: 0 0 200px;
    padding: 15px;
  }
  .messageSidebar + .messageContent {
    flex-basis: calc(100% - 220px);
    margin-left: 20px;
    max-width: calc(100% - 220px);
  }
}
@media screen and (min-width: 1025px), print {
  .messageSidebar {
    flex: 0 0 240px;
    padding: 20px;
  }
  .messageSidebar + .messageContent {
    flex-basis: calc(100% - 270px);
    margin-left: 30px;
    max-width: calc(100% - 270px);
  }
}
@media screen and (max-width: 768px) {
  .messageSidebar {
    margin: 0 -10px;
    padding: 10px;
  }
  .messageSidebar .messageAuthor {
    flex: 0 0 auto;
    /* equals the height of the avatar */
    min-height: 48px;
    position: relative;
    /* force username to be vertically centered for quick reply */
  }
  .messageSidebar .messageAuthor .userAvatar {
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .messageSidebar .messageAuthor .userAvatar .userAvatarImage {
    max-height: 48px;
    max-width: 48px;
  }
  .messageSidebar .messageAuthor .messageAuthorContainer, .messageSidebar .messageAuthor .userTitle, .messageSidebar .messageAuthor .userRank {
    margin-left: 58px;
  }
  .messageSidebar .messageAuthor .messageAuthorContainer:last-child {
    align-items: center;
    display: flex;
    height: 100%;
    position: absolute;
  }
  .messageSidebar .userCredits {
    display: none;
  }
  .messageSidebar + .messageContent {
    margin-top: 20px;
  }
}
.messageSidebar a {
  color: var(--wcfSidebarLink);
}
.messageSidebar a:hover {
  color: var(--wcfSidebarLinkActive);
}
.messageSidebar .dataList {
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .messageSidebar .dataList {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .messageSidebar .dataList {
    font-size: 12px;
  }
}
.messageSidebar .userAvatar {
  display: inline-block;
  position: relative;
  margin-bottom: 10px;
}
.messageSidebar .userAvatar > a {
  display: inline-block;
}
.messageSidebar .username {
  display: inline-block;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .messageSidebar .username {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .messageSidebar .username {
    font-size: 18px;
  }
}
.messageSidebar .badgeOnline {
  left: 0;
  pointer-events: none;
  position: absolute;
}
@media screen and (min-width: 769px), print {
  .messageSidebar .badgeOnline {
    bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .messageSidebar .badgeOnline {
    color: transparent;
    padding: 0;
    top: 0;
    width: 0;
  }
  .messageSidebar .badgeOnline::before {
    background-color: inherit;
    border: 1px solid white;
    border-radius: 50%;
    content: "";
    height: 16px;
    left: 34px;
    /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */
    position: absolute;
    width: 16px;
  }
}
.messageSidebar .userTitle + .userRank {
  margin-top: 3px;
}
@media screen and (max-width: 768px) {
  .messageSidebar .badgeOnline::before {
    border-color: #47cd54;
  }
}
.messageAuthor + * {
  margin-top: 20px;
}
.messageAuthor + *:before {
  content: "";
  left: 0;
  margin-top: -10px;
  position: absolute;
  right: 0;
}
/* Prevents username overflow in the message sidebar */
.messageAuthorContainer {
  overflow: hidden;
}
@media screen and (min-width: 769px), print {
  .messageAuthorContainer:not(:last-child) {
    margin-bottom: 5px;
  }
}
.messageSidebarOrientationRight .messageContent {
  order: 1;
}
.messageSidebarOrientationRight .messageSidebar {
  order: 2;
}
.messageSidebarOrientationRight .messageSidebar + .messageContent {
  margin-left: 20px;
  margin-right: 30px;
}
/* content */
@media screen and (max-width: 768px) {
  .messageContent {
    position: relative;
  }
}
@media screen and (min-width: 769px), print {
  .messageContent {
    display: flex;
    /* do not use `flex: 1 1 0%` as it causes Mobile Safari to fail */
    flex: 1;
    flex-direction: column;
  }
}
.messageContent.loading {
  position: relative;
}
.messageContent.loading > .messageContentLoadingOverlay {
  align-items: center;
  background-color: var(--wcfContentBackground);
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 1;
}
/* content - header */
.messageHeader {
  display: flex;
  justify-content: flex-end;
}
@media screen and (min-width: 769px), print {
  .messageHeader {
    flex: 0 0 auto;
  }
}
.messageHeader + .messageBody {
  margin-top: 20px;
}
.messageHeader > .messageQuickOptions {
  flex: 0 0 auto;
}
.messageHeader > .messageHeaderWrapper {
  align-items: center;
  flex: 1 1 auto;
}
.messageHeaderBox {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.messageHeaderBox > .messageTitle {
  flex: 0 0 100%;
}
.messageHeaderBox > .messageHeaderMetaData, .messageHeaderBox > .messageStatus {
  flex: 0 0 auto;
}
.messageTitle {
  color: var(--wcfContentHeadlineText);
}
.messageTitle a {
  color: var(--wcfContentHeadlineLink);
}
.messageTitle a:hover {
  color: var(--wcfContentHeadlineLinkActive);
}
.messageHeaderMetaData {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
  font-weight: 400;
}
.messageHeaderMetaData > li {
  flex: 0 1 auto;
}
.messageHeaderMetaData > li:not(:last-child) {
  margin-right: 5px;
}
.messageHeaderMetaData.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.messageHeaderMetaData.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
.messageHeaderMetaData > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
@media screen and (min-width: 769px), print {
  .messageHeaderMetaData {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .messageHeaderMetaData {
    font-size: 12px;
  }
}
.messageHeaderMetaData .messagePublicationTime {
  color: var(--wcfContentDimmedText);
}
.messageHeaderMetaData + .messageStatus {
  margin-left: 5px;
}
.messageStatus {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
  font-weight: 400;
}
.messageStatus > li {
  flex: 0 1 auto;
}
.messageStatus > li:not(:last-child) {
  margin-right: 5px;
}
.messageStatus.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.messageStatus.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
@media screen and (min-width: 769px), print {
  .messageStatus {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .messageStatus {
    font-size: 12px;
  }
}
.messageQuickOptions {
  column-gap: 5px;
  display: flex;
}
.messageQuickOptions a {
  color: inherit;
}
@media screen and (min-width: 769px), print {
  .messageQuickOptions .messageQuickOptionsMobile {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .messageQuickOptions:not(.active) {
    padding-right: 29px;
  }
  .messageQuickOptions li:not(.jsMessageClipboardCheckbox):not(.messageQuickOptionsMobile) {
    display: none;
  }
  .messageQuickOptions .jsMessageClipboardCheckbox, .messageQuickOptions .messageQuickOptionsMobile {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 24px;
    width: 24px;
  }
}
/* content - body */
@media screen and (min-width: 769px), print {
  .messageBody {
    flex: 1 1 auto;
  }
}
.messageBody.editor {
  align-items: center;
  display: flex;
  justify-content: center;
}
.messageBody.editor > .icon {
  flex: 0 0 auto;
}
.messageBody.editor > .editorContainer {
  flex: 1 1 auto;
}
.messageBody > .messageText img {
  height: auto !important;
  max-width: 100%;
}
.messageBody > *:first-child {
  margin-top: 0;
}
/* content - footer */
@media screen and (min-width: 769px), print {
  .messageFooter {
    flex: 0 0 auto;
  }
}
.messageFooter .formSubmit {
  margin-top: 20px;
}
.messageFooterNote {
  border-left: 5px solid var(--wcfContentBorderInner);
  color: var(--wcfContentDimmedText);
  margin-top: 20px;
  padding: 5px 10px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .messageFooterNote {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .messageFooterNote {
    font-size: 12px;
  }
}
.messageFooterNote a {
  color: var(--wcfContentDimmedLink);
}
.messageFooterNote a:hover {
  color: var(--wcfContentDimmedLinkActive);
  text-decoration: underline;
}
.messageFooterGroup {
  display: flex;
  flex-wrap: wrap;
}
.messageFooterGroup:not(:first-child) > woltlab-core-reaction-summary, .messageFooterGroup:not(:first-child) > .messageFooterButtons, .messageFooterGroup:not(:first-child) > .messageFooterButtonsExtra {
  margin-top: 20px;
}
.messageFooterGroup > woltlab-core-reaction-summary {
  align-self: center;
  flex: 0 1 auto;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .messageFooterGroup > woltlab-core-reaction-summary {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .messageFooterGroup > woltlab-core-reaction-summary {
    font-size: 12px;
  }
}
@media screen and (min-width: 769px), print {
  .messageFooterGroup > .messageFooterButtons {
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 768px) {
  .messageFooterGroup > .messageFooterButtons {
    margin-left: auto;
  }
  .messageFooterGroup > .messageFooterButtons .button:not(.reactButton) {
    display: none;
  }
  .messageFooterGroup > .messageFooterButtons .button.reactButton {
    border-radius: var(--wcfBorderRadius);
  }
}
@media screen and (min-width: 769px), print {
  .messageFooterGroup > .messageFooterButtonsExtra {
    flex: 1 1 auto;
  }
  .messageFooterGroup > .messageFooterButtonsExtra + .messageFooterButtons {
    flex: 0 auto;
  }
  .messageFooterGroup > .messageFooterButtonsExtra + .messageFooterButtons > li:first-child {
    margin-left: 20px;
  }
}
@media screen and (max-width: 768px) {
  .messageFooterGroup > .messageFooterButtonsExtra {
    display: none;
  }
}
.messageSignature img:not(.userAvatarImage), .messageSignatureConstraints img:not(.userAvatarImage) {
  max-height: 150px;
  width: auto;
}
@media screen and (max-width: 768px) {
  .messageSignature {
    display: none;
  }
}
@media screen and (min-width: 769px), print {
  .messageSignature {
    border-top: 1px solid var(--wcfContentBorderInner);
    margin-top: 20px;
    opacity: 0.6;
    padding-top: 10px;
    transition: opacity 0.12s linear;
    /* fix flicker in Safari on message hover */
    transform: translateZ(0);
  }
  .message:hover .messageSignature {
    opacity: 1;
  }
}
.messageFooterButtons, .messageFooterButtonsExtra {
  justify-content: flex-end;
}
.messageFooterButtons > li, .messageFooterButtonsExtra > li {
  display: flex;
}
.messageFooterButtons > li > a, .messageFooterButtonsExtra > li > a {
  align-items: center;
}
.messageFooterButtons .icon + span:not(.invisible), .messageFooterButtonsExtra .icon + span:not(.invisible) {
  margin-left: 5px;
}
@media screen and (max-width: 768px) {
  .messageCollapsed {
    border-top: 1px solid var(--wcfContentBorderInner);
    margin: 0 -10px;
    padding: 30px 10px 0;
  }
}
.messageReduced .messageHeader {
  background-color: var(--wcfSidebarBackground);
  color: var(--wcfSidebarText);
}
@media screen and (max-width: 768px) {
  .messageReduced .messageHeader {
    margin: 0 -10px;
    padding: 10px;
  }
}
@media screen and (min-width: 769px), print {
  .messageReduced .messageHeader {
    padding: 10px 20px;
  }
}
.messageReduced .messageTitle {
  color: var(--wcfSidebarHeadlineText);
}
.messageReduced .messageTitle a {
  color: var(--wcfSidebarHeadlineLink);
}
.messageReduced .messageTitle a:hover {
  color: var(--wcfSidebarHeadlineLinkActive);
}
@media screen and (min-width: 769px), print {
  .messageReduced .messageBody, .messageReduced .messageFooter {
    padding: 0 20px;
  }
}
/* margin between items in the list of quoted messages */
#messageQuoteList .messageReduced + .messageReduced {
  margin-top: 20px;
}
.messageQuoteItemList {
  /* we need `!important` here to override defaults used for `.htmlContent`
	   and `.messageText` */
  list-style-type: none !important;
  margin-left: 0 !important;
}
.messageQuoteItemList > li {
  display: flex;
}
.messageQuoteItemList > li > span {
  flex: 0 0 auto;
  margin-right: 10px;
}
.messageQuoteItemList > li > .jsQuote {
  flex: 1 1 auto;
}
.messageQuoteItemList > li > .jsFullQuote {
  display: none;
}
/* allow tables to overflow on all screens */
.messageTableOverflow {
  overflow: auto;
}
/* edit history */
.editHistoryDiff {
  --diffAdded-background: #dff0d8;
  --diffAdded-color: #3c763d;
  --diffRemoved-background: #f2dede;
  --diffRemoved-color: #a94442;
  --diffSection-background: #eceff1;
  --diffSection-color: #2c3e50;
  --diffDel-background: #d71111;
  --diffDel-color: rgb(255 255 255 / 91%);
  --diffIns-background: #008000;
  --diffIns-color: rgb(255 255 255 / 91%);
}
@media screen and (max-width: 1024px) {
  .editHistoryDiff {
    overflow: auto;
  }
}
.editHistoryDiff .table {
  width: 100%;
}
@media screen and (min-width: 1025px), print {
  .editHistoryDiff .table {
    table-layout: fixed;
  }
}
.editHistoryDiff .table th {
  text-align: center;
}
.editHistoryDiff .table td {
  padding: 5px;
}
.editHistoryDiff .table td:not(.diffSection) {
  border-bottom-width: 0 !important;
}
.editHistoryDiff .table td:first-child:last-child:empty {
  display: none;
}
.editHistoryDiff .table td:last-child:not(:first-child) {
  border-left: 1px solid var(--wcfContentBorderInner);
}
.editHistoryDiff .table td.diffAdded {
  background-color: var(--diffAdded-background);
  color: var(--diffAdded-color);
}
.editHistoryDiff .table td.diffRemoved {
  background-color: var(--diffRemoved-background);
  color: var(--diffRemoved-color);
}
.editHistoryDiff .table td.diffSection {
  background-clip: padding-box;
  background-color: var(--diffSection-background);
  border-bottom: 20px solid transparent;
  color: var(--diffSection-color);
  padding: 10px;
  text-align: center;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .editHistoryDiff .table td.diffSection {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .editHistoryDiff .table td.diffSection {
    font-size: 18px;
  }
}
.editHistoryDiff .table td tr:not(:first-child) .diffSection {
  border-top: 20px solid transparent;
}
.editHistoryDiff .table td + form {
  /* Out of the way, Lydia! */
  margin-top: 40px;
}
.editHistoryDiff .sideBySide:first-child {
  margin-bottom: 20px;
  text-align: center;
}
.editHistoryDiff .sideBySide {
  column-gap: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.editHistoryDiff del, .editHistoryDiff .vdd-removed {
  background-color: var(--diffDel-background);
  color: var(--diffDel-color);
  text-decoration: line-through;
}
.editHistoryDiff ins, .editHistoryDiff .vdd-added, .editHistoryDiff .vdd-modified {
  background-color: var(--diffIns-background);
  color: var(--diffIns-color);
  text-decoration: none;
}
html[data-color-scheme="dark"] .editHistoryDiff {
  --diffAdded-background: #172810;
  --diffAdded-color: #4f9c51;
  --diffRemoved-background: #281010;
  --diffRemoved-color: #d95654;
  --diffSection-background: #252e3d;
  --diffSection-color: #959595;
  --diffDel-background: #800000;
  --diffDel-color: rgb(255 255 255 / 67%);
  --diffIns-background: #008000;
  --diffIns-color: rgb(255 255 255 / 91%);
}
@media screen and (max-width: 768px) {
  .editHistoryVersionList .columnUser, .editHistoryVersionList .columnEditReason {
    display: none;
  }
}
.messageGroupList .tabularList .columnSubject {
  flex: 1 1 auto;
}
.messageGroupList .tabularList .columnStats {
  text-align: center;
}
@media screen and (min-width: 1025px), print {
  .messageGroupList .tabularList .columnStats {
    flex: 0 0 150px;
  }
}
@media screen and (max-width: 1024px) {
  .messageGroupList .tabularList .columnStats {
    flex: 0 0 100px;
  }
}
.messageGroupList .tabularList .columnLastPost {
  flex: 0 0 200px;
}
.messageGroupList .tabularList .tabularListRow:not(.tabularListRowHead) .columnStats {
  position: relative;
}
.messageGroupList .tabularList .tabularListRow:not(.tabularListRowHead) .columnStats > dl {
  visibility: hidden;
}
@media screen and (min-width: 1025px), print {
  .messageGroupList .tabularList .tabularListRow:not(.tabularListRowHead):hover .columnStats > dl {
    visibility: visible;
  }
  .messageGroupList .tabularList .tabularListRow:not(.tabularListRowHead):hover .columnStats .messageGroupListStatsSimple {
    display: none;
  }
}
.messageGroupList .columnMark > label {
  display: block;
  height: 24px;
  width: 24px;
}
.messageGroupList .columnMark > label input[type="checkbox"] {
  height: 18px;
  width: 18px;
}
.messageGroupList .columnAvatar div {
  position: relative;
  width: 48px;
  height: 48px;
}
.messageGroupList .columnAvatar .myAvatar {
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: -2px;
  right: -6px;
}
.messageGroupList .columnAvatar .myAvatar > img {
  border: 1px solid var(--wcfContentBackground);
  box-sizing: content-box;
}
.messageGroupList .columnSubject {
  overflow: hidden;
}
.messageGroupList .columnSubject > h3 > .messageGroupLink {
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .messageGroupList .columnSubject > h3 > .messageGroupLink {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .messageGroupList .columnSubject > h3 > .messageGroupLink {
    font-size: 18px;
  }
}
.messageGroupList .columnSubject > h3 > .badge.label {
  top: -2px;
}
.messageGroupList .columnSubject > small {
  display: block;
}
.messageGroupList .columnSubject > .statusDisplay {
  display: flex;
  float: right;
  opacity: 0.75;
  transition: opacity 0.12s;
}
.messageGroupList .columnSubject > .statusDisplay > .statusIcons {
  align-items: center;
  flex: 0 0 auto;
}
.messageGroupList .columnSubject > .statusDisplay > .statusIcons > li {
  align-items: center;
  display: flex;
}
.messageGroupList .columnSubject > .statusDisplay > .statusIcons a {
  color: inherit;
}
.messageGroupList .columnSubject > .statusDisplay > .statusIcons .iconFlag {
  vertical-align: -3px;
}
.messageGroupList .columnSubject > .labelList {
  float: right;
  padding-left: 7px;
}
.messageGroupList .columnLastPost > .box32 {
  align-items: center;
}
.messageGroupList .columnLastPost time {
  color: var(--wcfContentDimmedText);
}
.messageGroupList .columnLastPost a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messageGroupList .tabularListRow:hover .columnSubject > .statusDisplay, .messageGroupList tr:hover .columnSubject > .statusDisplay {
  opacity: 1;
}
.messageGroupList .tabularListRow:hover .columnSubject > .statusDisplay > .pagination, .messageGroupList tr:hover .columnSubject > .statusDisplay > .pagination {
  opacity: 1;
}
.messageGroupList .tabularListColumns.new .columnSubject > h3 > .messageGroupLink, .messageGroupList tr.new .columnSubject > h3 > .messageGroupLink {
  font-weight: 600;
}
.messageGroupList .pagination {
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.12s;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .messageGroupList .pagination {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .messageGroupList .pagination {
    font-size: 12px;
  }
}
.messageGroupList .pagination:not(:last-child) {
  margin-right: 5px;
}
@media screen and (min-width: 769px), print {
  .messageGroupList .messageGroupCounterMobile, .messageGroupList .messageGroupInfoMobile {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .messageGroupList .tabularListColumns > .columnMark {
    display: none;
  }
  .messageGroupList .tabularListRowHead .columnMark {
    display: none;
  }
  .messageGroupList .tabularListRowHead .columnSubject {
    padding: 0;
  }
  .messageGroupList .tabularListRowHead .columnLastPost {
    flex-basis: auto;
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .messageGroupList .tabularListRowHead .columnStats {
    display: none;
  }
  .messageGroupList .tabularListRowHead .columnSubject {
    padding: 0;
  }
  .messageGroupList .tabularListRowHead .columnLastPost {
    flex-basis: auto;
    padding: 0;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 5px 0;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns > li {
    padding: 0;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnAvatar {
    margin-right: 10px;
    padding: 0;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnAvatar div {
    height: 32px;
    width: 32px;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnAvatar img {
    max-height: 32px;
    max-width: 32px;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnAvatar .myAvatar {
    display: none;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject {
    /* 37px = avatar width + margin-right */
    flex-basis: calc(100% - 42px);
    max-width: calc(100% - 42px);
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject > h3 {
    align-items: flex-start;
    display: flex;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject > h3 > .messageGroupLink {
    flex: 1 1 auto;
    line-height: 1.48;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject > h3 > .messageGroupCounterMobile {
    flex: 0 0 auto;
    margin-left: 10px;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject .messageGroupInfoMobile {
    color: var(--wcfContentDimmedText);
    display: flex;
    font-weight: 400;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject .messageGroupInfoMobile > .messageGroupAuthorMobile {
    flex: 1 1 auto;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject .messageGroupInfoMobile > .messageGroupLastPostTimeMobile {
    flex: 0 0 auto;
    margin-left: 10px;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject .statusDisplay, .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject .messageGroupInfo, .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject .messageGroupTime, .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject .messageGroupEditLink {
    display: none;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject .labelList {
    float: none;
    padding-bottom: 2px;
    padding-left: 0;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnStats, .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnLastPost {
    display: none;
  }
}
@media screen and (max-width: 768px) and (min-width: 769px) {
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject > h3 > .messageGroupLink {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject > h3 > .messageGroupLink {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) and (min-width: 769px) {
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject .messageGroupInfoMobile {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns .columnSubject .messageGroupInfoMobile {
    font-size: 12px;
  }
}
.messageGroupList .tabularListRowHead .columnSort {
  flex: 1;
}
@media screen and (min-width: 769px), print {
  .messageGroupList .tabularListRowHead .columnSort {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  .messageGroupList .tabularListRowHead .columnSort {
    font-size: 14px;
  }
}
.messageGroupList .tabularListRowHead .columnSort fa-icon {
  color: var(--wcfTabularBoxHeadline);
}
.messageGroupList .tabularListRowHead .columnFilter {
  flex: 0 1 auto;
  padding-left: 40px;
}
@media screen and (min-width: 769px), print {
  .messageGroupList .tabularListRowHead .columnFilter {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  .messageGroupList .tabularListRowHead .columnFilter {
    font-size: 14px;
  }
}
@media screen and (max-width: 544px) {
  .messageGroupList .tabularListRowHead .columnFilter {
    display: none;
  }
}
.messageGroupList .tabularListRowHead .columnSort .inlineList > li:not(:last-child), .messageGroupList .tabularListRowHead .columnFilter .inlineList > li:not(:last-child) {
  margin-right: 10px;
}
.messageGroupList .tabularListRowHead .columnApplyFilter {
  flex: 0 1 auto;
  padding-right: 0;
}
.messageGroupListStatsSimple {
  color: var(--wcfContentDimmedText);
  font-size: 1rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.messageGroupListStatsSimple > .icon {
  color: inherit;
}
@media screen and (min-width: 769px), print {
  .contentHeader.messageGroupContentHeader .contentHeaderIcon {
    position: relative;
  }
}
@media screen and (max-width: 1024px) {
  .mobileLinkShadowContainer {
    position: relative;
  }
  .mobileLinkShadowContainer > .mobileLinkShadow {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}
.messageUserConsent {
  background-color: var(--wcfContentBackground);
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  margin: 10px 0;
  max-width: 600px;
  padding: 20px;
}
@media screen and (max-width: 768px) {
  .messageUserConsent {
    padding: 10px;
  }
}
.messageUserConsentHeader {
  display: flex;
  justify-content: space-between;
}
.messageUserConsentTitle {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 10px;
}
.messageUserConsentButtonContainer {
  margin: 10px 0;
  text-align: center;
}
.messageUserConsentNotice {
  color: var(--wcfContentDimmedText);
  font-size: 12px;
}
.notificationSettings {
  margin-top: 30px;
}
.notificationSettingsCategory, .notificationSettingsItem {
  display: flex;
}
.notificationSettingsCategory {
  border-bottom: 2px solid currentColor;
  color: var(--wcfTabularBoxHeadline);
  font-weight: 600;
  padding: 5px 0;
}
.notificationSettingsItem {
  align-items: center;
  padding: 5px 0;
}
.notificationSettingsItem:not(:last-child) {
  border-bottom: 1px solid var(--wcfContentBorderInner);
}
.notificationSettingsEvent {
  flex: 1 auto;
}
.notificationSettingsEvent > label {
  cursor: pointer;
  display: block;
}
.notificationSettingsEvent:hover + .notificationSettingsState fa-icon, .notificationSettingsState > label:hover fa-icon {
  transform: scale(1.2);
}
.notificationSettingsState {
  align-items: center;
  display: flex;
  flex: 0 0 34px;
  justify-content: center;
}
@media screen and (min-width: 545px), print {
  .notificationSettingsState {
    margin: 0 20px;
  }
}
@media screen and (max-width: 544px) {
  .notificationSettingsState {
    margin: 0 10px;
  }
}
.notificationSettingsState label {
  cursor: pointer;
}
.notificationSettingsState input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.notificationSettingsState input[type="checkbox"]:focus-visible ~ .icon {
  transform: scale(1.2);
}
.notificationSettingsState input[type="checkbox"]:not(:checked) + fa-icon[name="bell"] {
  display: none;
}
.notificationSettingsState input[type="checkbox"]:checked ~ fa-icon[name="bell-slash"] {
  display: none;
}
.notificationSettingsState fa-icon[name="bell"] {
  color: #090;
}
.notificationSettingsState fa-icon[name="bell-slash"] {
  color: #c00;
}
.notificationSettingsEmail {
  align-items: center;
  display: flex;
  flex: 0 0 50px;
  justify-content: flex-end;
}
.notificationSettingsEmailType {
  align-items: center;
  display: flex;
}
.notificationSettingsEmailType.disabled fa-icon {
  color: var(--wcfContentDimmedText) !important;
}
.notificationSettingsEmailType fa-icon[name="xmark"] {
  color: #c00;
}
.notificationSettingsEmailType fa-icon[name="bolt"], .notificationSettingsEmailType fa-icon[name="clock"] {
  color: #090;
}
.pageAction {
  bottom: 10px;
  display: flex;
  justify-content: flex-end;
  left: 10px;
  pointer-events: none;
  position: fixed;
  right: 10px;
  z-index: 400;
}
.pageAction .pageActionButtons {
  display: flex;
  flex: 0 auto;
  overflow: auto;
}
.pageAction .pageActionButtons, .pageAction .pageActionButtonToTop {
  pointer-events: all;
}
.pageAction .pageActionButton {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
}
.pageAction .pageActionButton:not(:first-child) {
  margin-left: 5px;
}
.pageAction .pageActionButton.remove {
  opacity: 0 !important;
  visibility: hidden !important;
}
.pageAction .pageActionButton, .pageAction .pageActionButtonToTop {
  opacity: 0;
  transition: visibility 0.12s linear, opacity 0.12s linear;
  visibility: hidden;
}
.pageAction .pageActionButton[aria-hidden="false"], .pageAction .pageActionButtonToTop[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}
.pageAction .pageActionButtonToTop {
  flex: 0 0 auto;
  margin-left: 5px;
  padding: 2px;
}
@media screen and (max-width: 768px) {
  .pageAction {
    transition: bottom 0.12s linear;
  }
  .pageAction:not(.pageActionHasContextButtons).scrolledDown .pageActionButton, .pageAction:not(.pageActionHasContextButtons).scrolledDown .pageActionButtonToTop {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0.4s;
  }
}
@media screen and (min-width: 1025px), print {
  html.disableScrolling .pageAction {
    right: calc(10px + var(--scrollbar-width, 0));
  }
}
.pageOverlayActive .pageAction {
  display: none;
}
.pageMenuContainer {
  background-color: rgba(0, 0, 0, 0.34);
  bottom: 0;
  display: flex;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 50px;
  z-index: 300;
}
.pageMenuContent {
  background-color: var(--wcfUserMenuBackground);
  color: var(--wcfUserMenuText);
  grid-area: content;
}
.pageMenuMainContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
}
.pageMenuMainContainer::after, .pageMenuMainContainer::before {
  --box-shadow-size: 20px;
  --box-shadow-size-inverted: calc(-1 * var(--box-shadow-size));
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  transition: box-shadow 0.24s ease-out;
  right: 0;
  top: 0;
  z-index: 1;
}
.pageMenuMainContainer.pageMenuMainContainerOverflowTop::before {
  box-shadow: 0 var(--box-shadow-size) var(--box-shadow-size) var(--box-shadow-size-inverted) #000 inset;
}
.pageMenuMainContainer.pageMenuMainContainerOverflowBottom::after {
  box-shadow: 0 var(--box-shadow-size-inverted) var(--box-shadow-size) var(--box-shadow-size-inverted) #000 inset;
}
.pageMenuMainNavigationLanguage, .pageMenuMainNavigationFooter {
  /* The footer is placed at the very bottom of the main menu which
	   is accomplished by setting `margin-top: auto`. However, this
	   prevents us from using `margin-top` to define a minimum gap between
	   the footer and the regular items.
	   
	   Setting `margin-bottom` on the regular menu items is not an option
	   because it violates the principle of using only `margin-top`. The
	   only option left is to abuse the `padding-top` to define a mimimum
	   gap between these sections. */
  padding-top: 30px;
  margin-top: auto;
}
.pageMenuMainNavigationLanguage + .pageMenuMainNavigationFooter {
  padding-top: 0;
  margin-top: 0;
}
.pageMenuMainItem {
  border-bottom: 1px solid var(--wcfUserMenuBorder);
  column-gap: 10px;
  display: grid;
  grid-template-areas: "item";
  grid-template-columns: auto;
  position: relative;
}
.pageMenuMainItemExpandable {
  grid-template-areas: "item button" "list list";
  grid-template-columns: auto 44px;
}
.pageMenuMainItemLabel, .pageMenuMainItemLink {
  align-items: center;
  color: inherit;
  display: flex;
  font-weight: 600;
  grid-area: item;
  min-height: 44px;
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pageMenuMainItemLabel:hover, .pageMenuMainItemLink:hover {
  color: inherit;
}
.pageMenuMainItemLabel {
  column-gap: 5px;
}
.pageMenuMainItemCounter {
  align-self: center;
  border-radius: 4px;
  grid-area: counter;
  margin-left: 8px;
  white-space: nowrap;
}
.pageMenuMainItemToggle {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}
.pageMenuMainItemToggle::before {
  border-left: 1px solid var(--wcfUserMenuBorder);
  bottom: 10px;
  content: "";
  left: 0;
  position: absolute;
  top: 10px;
}
.pageMenuMainItemToggle fa-icon {
  color: var(--wcfUserMenuText);
  transform: rotate(0);
}
.pageMenuMainItemToggle[aria-expanded="true"] fa-icon {
  transform: rotate(180deg);
}
.pageMenuMainItemLabel + .pageMenuMainItemToggle::before {
  display: none;
}
.pageMenuMainItemList {
  grid-area: list;
}
.pageMenuMainItem[data-depth="1"], .pageMenuMainItem[data-depth="2"] {
  border-bottom-width: 0;
}
.pageMenuMainItem[data-depth="1"] .pageMenuMainItemLabel, .pageMenuMainItem[data-depth="1"] .pageMenuMainItemLink, .pageMenuMainItem[data-depth="2"] .pageMenuMainItemLabel, .pageMenuMainItem[data-depth="2"] .pageMenuMainItemLink {
  font-weight: 400;
  min-height: 34px;
}
.pageMenuMainItem[data-depth="1"] .pageMenuMainItemLink[aria-current="page"], .pageMenuMainItem[data-depth="2"] .pageMenuMainItemLink[aria-current="page"] {
  font-weight: 600;
}
.pageMenuMainItem[data-depth="1"] .pageMenuMainItemToggle::before, .pageMenuMainItem[data-depth="2"] .pageMenuMainItemToggle::before {
  bottom: 5px;
  top: 5px;
}
.pageMenuMainItem[data-depth="0"] .pageMenuMainItemList {
  padding: 10px 0 20px 0;
}
.pageMenuMainItem[data-depth="1"] .pageMenuMainItemList {
  padding: 10px 0;
}
.pageMenuMainItem[data-depth="1"] .pageMenuMainItemLabel, .pageMenuMainItem[data-depth="1"] .pageMenuMainItemLink {
  padding-left: 20px;
}
.pageMenuMainItem[data-depth="2"] .pageMenuMainItemList {
  padding: 0 10px;
}
.pageMenuMainItem[data-depth="2"] .pageMenuMainItemLabel, .pageMenuMainItem[data-depth="2"] .pageMenuMainItemLink {
  padding-left: 30px;
}
.pageMenuUserTabContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pageMenuUserTabList {
  border-bottom: 1px solid var(--wcfUserMenuBorder);
  display: grid;
  flex: 0 0 auto;
  grid-auto-columns: minmax(70px, 1fr);
  grid-auto-flow: column;
  overflow: auto;
}
.pageMenuUserTab {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 50px;
  position: relative;
}
.pageMenuUserTab:not(:last-child) {
  border-right: 1px solid var(--wcfUserMenuBorder);
}
.pageMenuUserTab[aria-selected="true"] {
  background-color: var(--wcfUserMenuBackgroundActive);
}
.pageMenuUserTab[aria-selected="true"] fa-icon {
  color: var(--wcfUserMenuTextActive);
}
.pageMenuUserTab[data-has-unread-content="true"]::after {
  background-color: var(--wcfUserMenuIndicator);
  border-radius: 50%;
  content: "";
  height: 10px;
  opacity: 1;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 10px;
}
.pageMenuUserTab fa-icon {
  color: var(--wcfUserMenuText);
}
.pageMenuUserTabPanel {
  flex: 1 auto;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .pageHeaderMenuMobile[aria-expanded="true"]::after, .pageHeaderUserMobile[aria-expanded="true"]::after {
    border: 8px solid transparent;
    border-top-width: 0;
    border-bottom-color: var(--wcfUserMenuBackground);
    bottom: 0;
    content: "";
    position: absolute;
  }
}
@media screen and (min-width: 545px) and (max-width: 1024px) {
  .pageMenuMainContainer::after, .pageMenuMainContainer::before {
    left: auto;
    width: 400px;
  }
  .pageMenuContent {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.19), 0 0 6px rgba(0, 0, 0, 0.23);
    margin-left: auto;
    width: 400px;
  }
}
@media screen and (max-width: 544px) {
  .pageMenuContent {
    width: 100%;
  }
}
.pagination__wrapper {
  display: block;
}
.pagination {
  --column-gap: 2px;
  column-gap: var(--column-gap);
  display: inline-grid;
  grid-auto-flow: column;
}
.pagination__list {
  column-gap: var(--column-gap);
  display: grid;
  grid-auto-flow: column;
}
.pagination__link {
  border-radius: 4px;
  color: var(--wcfContentText);
  display: inline-block;
  font-variant: tabular-nums;
  padding: 4px 8px;
}
.pagination__link[aria-current="page"], body:not(.touch) .pagination__link:hover {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
}
@media screen and (max-width: 544px) {
  .pagination__wrapper {
    text-align: center;
  }
}
/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
  overscroll-behavior: contain;
}
/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 6px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  top: auto !important;
  /* please don't change 'position' */
  position: absolute;
}
.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 6px;
  /* there must be 'right' or 'left' for ps__rail-y */
  left: auto !important;
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}
.ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}
.ps:hover > .ps__rail-x, .ps:hover > .ps__rail-y, .ps--focus > .ps__rail-x, .ps--focus > .ps__rail-y, .ps--scrolling-x > .ps__rail-x, .ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}
.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
  background-color: rgba(102, 102, 102, 0.6);
  opacity: 0.9;
}
/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 0;
  /* please don't change 'position' */
  position: absolute;
}
.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}
.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
}
.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
}
/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
/* poll create/edit form */
.pollOptionContainer .pollOptionInput {
  align-items: center;
  margin: 5px 0;
  /* using `display: flex` inside a native list-item is pretty weird */
  display: inline-flex;
  width: 100%;
}
.pollOptionContainer .pollOptionInput > .icon {
  flex: 0 0 auto;
  margin: 0 5px;
}
.pollOptionContainer .pollOptionInput > input {
  flex: 1 1 auto;
  margin-left: 5px;
}
/* displayed poll */
.pollContainer {
  background-color: var(--wcfContentContainerBackground);
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadowCard);
  margin-bottom: 10px;
  min-width: 300px;
  padding: 10px;
}
@media screen and (min-width: 545px), print {
  .pollContainer.pollContainerFullWidth {
    margin-bottom: 20px;
  }
  .pollContainer:not(.pollContainerFullWidth) {
    float: left;
    margin-right: 20px;
    max-width: 50%;
  }
}
.pollContainer h2 {
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .pollContainer h2 {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .pollContainer h2 {
    font-size: 18px;
  }
}
.pollContainer .pollInnerContainer {
  margin-top: 30px;
}
.pollContainer .pollInnerContainer dd:not(:last-child) {
  margin-bottom: 5px;
}
.pollContainer .formSubmit {
  border-top: 1px solid var(--wcfContentBorderInner);
  padding-top: 10px;
}
.pollContainer .pollResultItem {
  /* option name in result list */
  /* visual representation of relative votes per option */
}
.pollContainer .pollResultItem + .pollResultItem {
  margin-top: 20px;
}
.pollContainer .pollResultItem .pollResultItemCaption {
  align-items: flex-end;
  display: flex;
}
.pollContainer .pollResultItem .pollResultItemCaption > .pollOptionName {
  flex: 1 1 auto;
}
.pollContainer .pollResultItem .pollResultItemCaption > .pollOptionRelativeValue {
  color: var(--wcfContentDimmedText);
  flex: 0 0 50px;
  text-align: right;
}
.pollContainer .pollResultItem .pollMeter {
  background-color: var(--wcfContentBorderInner);
  height: 5px;
  margin-top: 5px;
}
.pollMeterValue {
  background-color: var(--wcfContentBorder);
  height: 100%;
}
html[data-color-scheme="dark"] .pollMeterValue {
  background-color: rgba(255, 255, 255, 0.34);
}
@keyframes wcfPopover {
  0% {
    visibility: visible;
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes wcfPopoverOut {
  0% {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    visibility: hidden;
    transform: translateY(-20px);
    opacity: 0;
  }
}
/* outer element containing both the pointer and content element */
.popover {
  animation: wcfPopoverOut 0.3s;
  animation-fill-mode: forwards;
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadow);
  position: absolute;
  top: 0;
  vertical-align: middle;
  visibility: hidden;
  width: 500px !important;
  z-index: 350;
}
.popover.active {
  animation: wcfPopover 0.3s;
  animation-fill-mode: forwards;
}
.popover.forceHide {
  animation: 0;
  visibility: hidden;
}
@media screen and (max-width: 768px) {
  .popover {
    display: none;
  }
}
/* actual popover content */
.popoverContent {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  color: var(--wcfContentText);
  padding: 15px;
  /* Workaround for the partially active mobile navigation on desktop devices. See #2791 */
}
.popoverContent > div {
  max-height: 290px;
  min-height: 36px;
  overflow: hidden;
}
.popoverContent a {
  color: var(--wcfContentLink);
}
.popoverContent a:hover {
  color: var(--wcfContentLinkActive);
}
.popoverContent .jsMobileButtonGroupNavigation > .dropdownLabel {
  display: none;
}
/* @since 6.1 */
.popoverContainer {
  --padding: 20px;
  --maxHeight: 300px;
  --maxWidth: 500px;
  background-color: var(--wcfContentContainerBackground);
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadow);
  color: var(--wcfContentText);
  display: none;
  max-height: var(--maxHeight);
  max-width: var(--maxWidth);
  opacity: 0;
  padding: var(--padding);
  position: absolute;
  transform: translateY(-20px);
  transition: opacity 0.12s linear, transform 0.12s linear;
  z-index: 350;
}
.popoverContainer[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: hover) {
  .popoverContainer {
    display: block;
  }
}
.ratingList {
  font-size: 0;
}
.ratingList > li {
  display: inline-block;
}
.ratingList fa-icon[name="star"][solid] {
  color: #f90;
}
.reactionPopover {
  animation: wcfPopoverOut 0.3s;
  animation-fill-mode: forwards;
  background-color: var(--wcfDropdownBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadow);
  color: var(--wcfDropdownText);
  overflow: hidden;
  position: absolute;
  top: 0;
  vertical-align: middle;
  visibility: hidden;
  z-index: 60;
}
.reactionPopover.active {
  animation: wcfPopover 0.3s;
  animation-fill-mode: forwards;
}
.reactionPopover.forceHide {
  animation: 0;
  visibility: hidden;
}
@media screen and (max-width: 544px) {
  .reactionPopover.inverseOrder .reactionTypeButtonList {
    flex-direction: column;
  }
}
html[data-color-scheme="dark"] .reactionPopover {
  border: 1px solid var(--wcfDropdownBorderInner);
}
.reactionType {
  width: 20px;
  height: 20px;
}
.reactionPopoverContent .reactionType {
  width: 24px;
  height: 24px;
}
.reactionCount {
  font-weight: 400;
  vertical-align: middle;
}
@media screen and (min-width: 769px), print {
  .reactionCount {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .reactionCount {
    font-size: 12px;
  }
}
.reactionCount::before {
  content: " × ";
}
.reactionTypeButton.active {
  background-color: var(--wcfDropdownBackgroundActive);
  color: var(--wcfDropdownLinkActive);
}
@media screen and (max-width: 544px) {
  .reactionPopoverContent {
    max-height: 200px;
    overflow: auto;
  }
  .reactionPopoverContent::after, .reactionPopoverContent::before {
    content: "";
    height: 40px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    transition: opacity 0.12s linear;
  }
  .reactionPopoverContent::after {
    background-image: linear-gradient(to bottom, rgba(var(--wcfContentBackground-rgb) / 0), var(--wcfContentBackground));
    bottom: 0;
  }
  .reactionPopoverContent.overflowBottom::after {
    opacity: 1;
  }
  .reactionPopoverContent::before {
    background-image: linear-gradient(to top, rgba(var(--wcfContentBackground-rgb) / 0), var(--wcfContentBackground));
    top: 0;
  }
  .reactionPopoverContent.overflowTop::before {
    opacity: 1;
  }
}
@media screen and (max-width: 1024px) {
  .reactionPopoverContent {
    padding: 5px 0;
  }
  .reactionPopoverContent .reactionTypeButton {
    margin: 0;
    display: block;
    padding: 5px 25px;
  }
  .reactionPopoverContent .reactionTypeButton > .reactionTypeButtonTitle {
    vertical-align: middle;
    padding-left: 5px;
  }
}
@media screen and (min-width: 1025px), print {
  .reactionPopoverContent {
    padding: 5px;
  }
  .reactionPopoverContent .reactionTypeButtonList {
    display: flex;
    column-gap: 5px;
  }
  .reactionPopoverContent .reactionTypeButton {
    border-radius: var(--wcfBorderRadius);
    cursor: pointer;
    padding: 5px;
  }
  .reactionPopoverContent .reactionTypeButton:hover {
    background-color: var(--wcfDropdownBackgroundActive);
    color: var(--wcfDropdownLinkActive);
  }
  .reactionPopoverContent .reactionTypeButtonTitle {
    display: none;
  }
}
@media screen and (min-width: 1025px), print {
  html.touch .reactionPopoverContent .reactionTypeButton {
    display: block;
    margin-left: 0;
  }
  html.touch .reactionPopoverContent .reactionTypeButton > .reactionTypeButtonTitle {
    display: inline;
    margin-left: 10px;
  }
}
@media screen and (max-width: 768px) {
  .reactionStatusContainer {
    display: none;
  }
}
@media screen and (max-width: 544px) {
  .reactionTypeButtonList {
    display: flex;
    flex-direction: column-reverse;
  }
}
#likeList .likeTypeSelection {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#likeList .likeTypeSelection .buttonGroup, #likeList .likeTypeSelection .messageFooterButtons, #likeList .likeTypeSelection .messageFooterButtonsExtra {
  margin-bottom: 0;
}
#likeList .likeTypeSelection .buttonGroup li, #likeList .likeTypeSelection .messageFooterButtons li, #likeList .likeTypeSelection .messageFooterButtonsExtra li {
  display: flex;
  justify-content: stretch;
}
#likeList .likeTypeSelection .buttonGroup li a, #likeList .likeTypeSelection .messageFooterButtons li a, #likeList .likeTypeSelection .messageFooterButtonsExtra li a {
  display: flex;
  align-items: center;
}
.topReactionFull > .reactionType, .topReactionShort > .reactionType {
  vertical-align: bottom;
}
.topReactionTiny > .reactionType {
  height: 16px;
  vertical-align: top;
  width: 16px;
}
.reactionSummary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px 5px;
}
.reactionSummary:hover .reactionCountButton {
  color: var(--wcfContentText);
}
.reactionSummary .reactionCountButton {
  color: var(--wcfContentDimmedText);
  white-space: nowrap;
}
.reactionSummary .selected .reactionCount {
  font-weight: 600;
}
/* Google ReCAPTCHA */
#recaptcha_response_field {
  margin-top: 20px;
}
/* ReCAPTCHA container for a dialog element */
.g-recaptcha-container {
  position: fixed !important;
}
.g-recaptcha-container > div:not(:first-child):nth-of-type(-n+3) {
  display: none !important;
}
.g-recaptcha-container > div:last-child {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  margin: auto !important;
}
.recentActivityList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.recentActivityList.recentActivityList--userProfileContent {
  padding-top: 20px;
}
.recentActivityListItem {
  display: grid;
  grid-template-areas: "avatar title" "avatar description" "avatar time";
  grid-template-columns: min-content 1fr;
  column-gap: 15px;
  row-gap: 5px;
  position: relative;
}
.recentActivityListItem.recentActivityListItem--compact {
  grid-template-areas: "avatar title" "avatar time";
}
.recentActivityListItem:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wcfContentBorderInner);
}
.recentActivityListItem__avatar {
  grid-area: avatar;
}
.recentActivityListItem__title {
  grid-area: title;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .recentActivityListItem__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .recentActivityListItem__title {
    font-size: 18px;
  }
}
.recentActivityListItem__description {
  grid-area: description;
  margin-top: 5px;
}
.recentActivityListItem__time {
  grid-area: time;
  color: var(--wcfContentDimmedText);
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .recentActivityListItem__time {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .recentActivityListItem__time {
    font-size: 12px;
  }
}
.recentActivityListItem__link {
  color: inherit;
}
.recentActivityListItem__link::before {
  content: "";
  inset: 0;
  position: absolute;
}
.recentActivityListItem__link:hover, .recentActivityListItem__link:focus {
  color: inherit;
}
.recentActivityList__showMoreButton {
  display: flex;
  justify-content: center;
}
.recentActivityList__switchContext {
  border-bottom: 1px solid var(--wcfContentBorderInner);
  display: flex;
  justify-content: end;
  padding-bottom: 20px;
}
.scrollableCheckboxList {
  background-color: var(--wcfInputBackground);
  border: 1px solid var(--wcfInputBorder);
  color: var(--wcfInputText);
  max-height: 500px;
  max-width: 500px;
  overflow: auto;
  padding: 5px;
}
.scrollableCheckboxList li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialogContent .scrollableCheckboxList {
  max-height: 300px;
}
.itemListFilter {
  max-width: 500px;
}
.itemListFilter > .inputAddon {
  margin-top: 5px;
}
.itemListFilter .scrollableCheckboxList[data-filter="highlightActive"] > li:not(.active) {
  opacity: 0.6;
}
.itemListFilter .scrollableCheckboxList[data-filter="activeOnly"] > li:not(.active) {
  display: none;
}
/* search keyword highlighting */
.highlight {
  background-color: #ffd61e;
  color: black;
  padding: 0 2px;
}
/* search form */
.searchBar {
  display: grid;
}
@media screen and (min-width: 769px), print {
  .searchBar {
    column-gap: 20px;
    grid-template-columns: 60% 20% auto;
  }
}
@media screen and (max-width: 768px) {
  .searchBar {
    row-gap: 5px;
  }
}
.searchFiltersContainer {
  margin-top: 20px;
}
.searchFilters {
  margin-top: 20px;
}
.searchFiltersTitle {
  align-items: center;
  color: var(--wcfContentDimmedText);
  display: flex;
  margin-top: 10px;
}
.searchFiltersTitle::before {
  border-top: 1px solid var(--wcfContentBorderInner);
  content: "";
  flex: 0 0 20px;
  margin-right: 10px;
}
.searchFiltersTitle::after {
  border-top: 1px solid var(--wcfContentBorderInner);
  content: "";
  flex: 1 0 auto;
  margin-left: 10px;
}
.searchFiltersTitle ~ .searchFilters {
  margin-top: 10px;
}
@media screen and (min-width: 769px), print {
  .searchFilters {
    columns: 2;
  }
  .searchFilters > :is(div, dl) {
    break-inside: avoid-column;
    /* work-around for Firefox */
    overflow: hidden;
  }
  .searchFiltersContainer .searchButton {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .searchFiltersContainer .searchButton {
    margin-top: 20px;
    width: 100%;
  }
}
.messageShareButtons .inlineList {
  gap: 5px;
}
.messageShareButtons .inlineList > li:not(:last-child) {
  margin-right: 0;
}
.messageShareButtons .button {
  align-items: center;
  display: flex;
}
.messageShareButtons .button span {
  margin-left: 3px;
}
@media screen and (max-width: 768px) {
  .messageShareButtons .button span {
    display: none;
  }
}
.messageShareButtons .messageShareProvider {
  --background-color-facebook-rgb: 59 89 153;
  --background-color-twitter-rgb: 20 23 26;
  --background-color-reddit-rgb: 255 69 0;
  --background-color-whatsapp-rgb: 37 211 102;
  --background-color-linkedin-rgb: 0 122 182;
  --background-color-pinterest-rgb: 189 33 37;
  --background-color-xing-rgb: 0 101 103;
  --color: #fff;
  background-color: rgb(var(--background-color-rgb, --wcfButtonBackground-rgb));
  color: var(--color);
}
.messageShareButtons .messageShareProvider[data-identifier="Facebook"] {
  --background-color-rgb: var(--background-color-facebook-rgb);
}
.messageShareButtons .messageShareProvider[data-identifier="Twitter"] {
  --background-color-rgb: var(--background-color-twitter-rgb);
}
.messageShareButtons .messageShareProvider[data-identifier="Reddit"] {
  --background-color-rgb: var(--background-color-reddit-rgb);
}
.messageShareButtons .messageShareProvider[data-identifier="WhatsApp"] {
  --background-color-rgb: var(--background-color-whatsapp-rgb);
}
.messageShareButtons .messageShareProvider[data-identifier="LinkedIn"] {
  --background-color-rgb: var(--background-color-linkedin-rgb);
}
.messageShareButtons .messageShareProvider[data-identifier="Pinterest"] {
  --background-color-rgb: var(--background-color-pinterest-rgb);
}
.messageShareButtons .messageShareProvider[data-identifier="XING"] {
  --background-color-rgb: var(--background-color-xing-rgb);
}
/* hover states are only applied to non-touch devices to avoid "leftover" hover states after taps */
html:not(.touch) .messageShareButtons .messageShareProvider:hover {
  background-color: rgba(var(--background-color-rgb) / 0.87);
  color: var(--color);
}
.slideshowContainer {
  overflow: hidden;
  position: relative;
}
.slideshowContainer > ul:not(.slideshowButtonList) > li:not(:first-child) {
  display: none;
}
.slideshowContainer > .slideshowItemList {
  position: absolute;
  transition: left 0.8s ease-out;
}
.slideshowContainer > .slideshowItemList > li.slideshowItem {
  display: block;
  float: left;
  overflow: hidden;
  position: absolute;
  top: 0;
  /* fixes font rendering bug */
  -webkit-transform: translate3d(0, 0, 0);
}
.slideshowContainer > .slideshowButtonList {
  position: absolute;
  right: 0;
  top: 0;
}
.slideshowContainer > .slideshowButtonList > li {
  display: inline-block;
}
/* main tabs */
.tabMenu > ul, .menu > ul {
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
}
.tabMenu > ul > li, .menu > ul > li {
  flex: 0 1 auto;
}
.tabMenu > ul > li:not(:last-child), .menu > ul > li:not(:last-child) {
  margin-right: 5px;
}
.tabMenu > ul.commaSeparated > li:not(:last-child):after, .menu > ul.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.tabMenu > ul.dotSeparated > li:not(:last-child):after, .menu > ul.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
.tabMenu > ul > li, .menu > ul > li {
  position: relative;
}
.tabMenu > ul > li:not(:last-child), .menu > ul > li:not(:last-child) {
  margin-right: 20px;
}
.tabMenu > ul > li::before, .menu > ul > li::before {
  border-top: 1px solid var(--wcfContentLink);
  bottom: 0;
  content: "";
  left: 50%;
  position: absolute;
  width: 0;
}
.tabMenu > ul > li.active, .menu > ul > li.active {
  z-index: 60;
}
.tabMenu > ul > li.active::before, .menu > ul > li.active::before {
  left: 0;
  transition: left 0.12s linear, width 0.12s linear;
  width: 100%;
}
.tabMenu > ul > li.active > a, .menu > ul > li.active > a {
  cursor: default;
}
.tabMenu > ul > li > a, .menu > ul > li > a {
  display: block;
  padding: 5px 0;
}
@media screen and (max-width: 768px) {
  .tabMenu, .menu {
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
  }
  .tabMenu::before, .menu::before {
    display: none;
  }
  .tabMenu > ul, .menu > ul {
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabMenu > ul > li, .menu > ul > li {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .tabMenu > ul.enableAnimation, .menu > ul.enableAnimation {
    transition: padding-left 0.24s linear;
  }
  .tabMenu > ul.enableAnimation > li:first-child, .menu > ul.enableAnimation > li:first-child {
    transition: margin-left 0.24s linear;
  }
}
@media screen and (min-width: 769px), print {
  .tabMenu > ul, .menu > ul {
    border-bottom: 1px solid var(--wcfContentBorderInner);
  }
  .tabMenu > ul > li::before, .menu > ul > li::before {
    bottom: -1px;
  }
}
.tabMenu > ul > li > a {
  font-weight: 600;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .tabMenu > ul > li > a {
    font-size: var(--wcfFontSizeSection);
  }
}
@media screen and (max-width: 768px) {
  .tabMenu > ul > li > a {
    font-size: 20px;
  }
}
/* sub tabs */
.menu {
  margin-top: 10px;
}
@media screen and (min-width: 769px), print {
  .menu > ul > li > a {
    font-weight: 400;
    line-height: 1.28;
  }
}
@media screen and (min-width: 769px) and (min-width: 769px), print {
  .menu > ul > li > a {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (min-width: 769px) and (max-width: 768px) {
  .menu > ul > li > a {
    font-size: 18px;
  }
}
.menu ~ .tabMenuContent {
  margin-top: 20px;
}
.tabMenuOverlayLeft, .tabMenuOverlayRight {
  align-items: center;
  bottom: 0;
  display: flex;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.24s linear, visibility 0s linear 0.24s;
  visibility: hidden;
  width: 30px;
  z-index: 50;
}
.tabMenuOverlayLeft.active, .tabMenuOverlayRight.active {
  opacity: 1;
  transition-delay: 0s;
  visibility: visible;
}
.tabMenuOverlayLeft::before, .tabMenuOverlayRight::before {
  color: var(--wcfContentDimmedText);
}
.tabMenuOverlayLeft {
  background: linear-gradient(to left, rgba(var(--wcfContentBackground-rgb) / 0) 0%, var(--wcfContentBackground) 50%);
  left: 0;
}
.tabMenuOverlayRight {
  background: linear-gradient(to right, rgba(var(--wcfContentBackground-rgb) / 0) 0%, var(--wcfContentBackground) 50%);
  justify-content: flex-end;
  right: 0;
}
.tabMenuContent.hidden {
  display: none;
}
.tabMenuContent > .containerList:first-child > li:first-child {
  border-top-width: 0;
}
.messageTabMenu > .messageTabMenuContent {
  display: none;
}
.messageTabMenu > .messageTabMenuContent:not(.messageTabMenu) > nav.menu {
  display: none;
}
.messageTabMenu > .messageTabMenuContent.active {
  background-color: var(--wcfContentBackground);
  display: block;
  margin-top: 0;
}
.messageTabMenu > .messageTabMenuContent > .section:first-child {
  margin-top: 0;
}
.messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active {
  border: 1px solid var(--wcfContentBorderInner);
  border-top-width: 0;
  padding: 20px;
}
.messageTabMenu.messageTabMenuContent > nav {
  border-bottom: 1px solid var(--wcfContentBorderInner);
  margin: -20px -20px 20px -20px;
  padding: 5px 20px;
}
.messageTabMenu.messageTabMenuContent > nav > ul {
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
  border: 0;
}
.messageTabMenu.messageTabMenuContent > nav > ul > li {
  flex: 0 1 auto;
}
.messageTabMenu.messageTabMenuContent > nav > ul > li:not(:last-child) {
  margin-right: 5px;
}
.messageTabMenu.messageTabMenuContent > nav > ul.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.messageTabMenu.messageTabMenuContent > nav > ul.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
.messageTabMenu.messageTabMenuContent > nav > ul > li {
  outline: 0;
}
.messageTabMenu.messageTabMenuContent > nav > ul > li:not(:last-child) {
  margin-right: 20px;
}
.messageTabMenu.messageTabMenuContent > nav > ul > li.active > a {
  color: var(--wcfContentLinkActive);
}
.messageTabMenu.messageTabMenuContent > nav > ul > li > a {
  display: block;
  outline: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .messageTabMenu.messageTabMenuContent > nav > ul > li > a {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .messageTabMenu.messageTabMenuContent > nav > ul > li > a {
    font-size: 12px;
  }
}
.messageTabMenu + .innerError, .messageTabMenu + .innerSuccess, .messageTabMenu + .innerWarning {
  margin-top: -1px;
  width: 100%;
}
.messageTabMenu > nav.tabMenu > ul, .messageTabMenuNavigation > ul {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  border-top-width: 0;
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
}
.messageTabMenu > nav.tabMenu > ul > li, .messageTabMenuNavigation > ul > li {
  flex: 0 1 auto;
}
.messageTabMenu > nav.tabMenu > ul > li:not(:last-child), .messageTabMenuNavigation > ul > li:not(:last-child) {
  margin-right: 5px;
}
.messageTabMenu > nav.tabMenu > ul.commaSeparated > li:not(:last-child):after, .messageTabMenuNavigation > ul.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.messageTabMenu > nav.tabMenu > ul.dotSeparated > li:not(:last-child):after, .messageTabMenuNavigation > ul.dotSeparated > li:not(:last-child):after {
  content: "·";
  margin-left: 5px;
}
.messageTabMenu > nav.tabMenu > ul > li, .messageTabMenuNavigation > ul > li {
  border-right: 1px solid var(--wcfContentBorderInner);
}
.messageTabMenu > nav.tabMenu > ul > li:not(:last-child), .messageTabMenuNavigation > ul > li:not(:last-child) {
  margin-right: 0;
}
.messageTabMenu > nav.tabMenu > ul > li.active > a, .messageTabMenuNavigation > ul > li.active > a {
  color: var(--wcfContentLinkActive);
  position: relative;
}
.messageTabMenu > nav.tabMenu > ul > li.active > a::after, .messageTabMenuNavigation > ul > li.active > a::after {
  border-bottom: 1px solid var(--wcfContentBackground);
  bottom: -1px;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
}
.messageTabMenu > nav.tabMenu > ul > li > a, .messageTabMenuNavigation > ul > li > a {
  display: block;
  padding: 10px 20px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
@media screen and (min-width: 769px), print {
  .messageTabMenu > nav.tabMenu > ul > li > a, .messageTabMenuNavigation > ul > li > a {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  .messageTabMenu > nav.tabMenu > ul > li > a, .messageTabMenuNavigation > ul > li > a {
    font-size: 14px;
  }
}
@media screen and (min-width: 769px), print {
  .messageTabMenu > nav.tabMenu > ul > li > a > .icon, .messageTabMenuNavigation > ul > li > a > .icon {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .messageTabMenu > nav.tabMenu > ul > li > a > .icon, .messageTabMenuNavigation > ul > li > a > .icon {
    display: block;
  }
  .messageTabMenu > nav.tabMenu > ul > li > a > span:not(.icon), .messageTabMenuNavigation > ul > li > a > span:not(.icon) {
    display: none;
  }
}
.messageTabMenu > nav.tabMenu > span, .messageTabMenuNavigation > span {
  display: none;
}
/* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset
   and the next element, similar to gaps with display: inline-block and font-size > 0 */
@-moz-document url-prefix() {
  fieldset + .messageTabMenu {
    margin-top: -3px;
  }
}
.uploadButton {
  overflow: hidden;
  position: relative;
}
.uploadButton > input {
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}
tr.sortableNode {
  cursor: move;
}
.tabularList {
  border-bottom: 1px solid var(--wcfContentBorder);
  display: flex;
  flex-direction: column;
}
.tabularListRow {
  flex: 0 0 auto;
  padding: 5px 0;
  transition: background-color 0.12s;
}
.tabularListRow.divider + li:not(.divider) {
  border-top-color: var(--wcfContentBorder);
}
html:not(.touch) .tabularListRow:not(.tabularListRowHead):hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
}
.tabularListRowHead {
  border-bottom: 2px solid currentColor;
  color: var(--wcfTabularBoxHeadline);
}
.tabularListRowHead + li {
  border-top-width: 0 !important;
}
.tabularListRow:not(.tabularListRowHead) {
  border-top: 1px solid var(--wcfContentBorderInner);
}
.tabularListColumns {
  align-items: center;
  display: flex;
}
.tabularListColumns > li {
  flex: 0 0 auto;
  padding: 5px 10px;
}
.tabularListRowHead > .tabularListColumns > li {
  color: var(--wcfTabularBoxHeadline);
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .tabularListRowHead > .tabularListColumns > li {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .tabularListRowHead > .tabularListColumns > li {
    font-size: 18px;
  }
}
.tabularListRowHead > .tabularListColumns > li > a {
  color: var(--wcfTabularBoxHeadline);
  display: block;
}
.tabularListRowHead > .tabularListColumns > li.ASC > a:after, .tabularListRowHead > .tabularListColumns > li.DESC > a:after {
  display: inline-block;
  margin-left: 7px;
}
.tabularListRowHead > .tabularListColumns > li.ASC > a::after {
  content: "↑";
}
.tabularListRowHead > .tabularListColumns > li.DESC > a::after {
  content: "↓";
}
.tabularListRowHead > .tabularListColumns > li.active > a, .tabularListRowHead > .tabularListColumns > li > a:hover {
  color: var(--wcfTabularBoxHeadlineActive);
}
.tabularBox {
  overflow: auto;
}
.tabularBoxTitle > header {
  border-bottom: 1px solid currentColor;
  color: var(--wcfTabularBoxHeadline);
  padding: 10px 0;
}
.tabularBoxTitle > header > h1, .tabularBoxTitle > header > h2, .tabularBoxTitle > header > h3 {
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .tabularBoxTitle > header > h1, .tabularBoxTitle > header > h2, .tabularBoxTitle > header > h3 {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .tabularBoxTitle > header > h1, .tabularBoxTitle > header > h2, .tabularBoxTitle > header > h3 {
    font-size: 18px;
  }
}
.tabularBoxTitle > header > h1 + small, .tabularBoxTitle > header > h2 + small, .tabularBoxTitle > header > h3 + small {
  display: block;
}
.tabularBoxTitle > header > h1 .badge, .tabularBoxTitle > header > h2 .badge, .tabularBoxTitle > header > h3 .badge {
  top: -2px;
}
.tabularBoxTitle > header a, .tabularBoxTitle > header .icon {
  color: var(--wcfTabularBoxHeadline);
}
.tabularBoxTitle > header a:hover, .tabularBoxTitle > header .icon:hover {
  color: var(--wcfTabularBoxHeadlineActive);
}
.tabularBoxTitle > header .collapsibleButton {
  cursor: pointer;
  transition: transform 0.12s linear;
}
/* table */
.htmlContent table, .ck.ck-content.ck-editor__editable table, .messageBody > .messageText table, .messageSignature > div table, .table {
  border-bottom: 1px solid var(--wcfContentBorder);
  border-spacing: 0;
  width: 100%;
}
.htmlContent table td, .ck.ck-content.ck-editor__editable table td, .messageBody > .messageText table td, .messageSignature > div table td, .htmlContent table th, .ck.ck-content.ck-editor__editable table th, .messageBody > .messageText table th, .messageSignature > div table th, .table td, .table th {
  padding: 10px;
  text-align: left;
  vertical-align: middle;
}
.htmlContent table td > label, .ck.ck-content.ck-editor__editable table td > label, .messageBody > .messageText table td > label, .messageSignature > div table td > label, .htmlContent table th > label, .ck.ck-content.ck-editor__editable table th > label, .messageBody > .messageText table th > label, .messageSignature > div table th > label, .table td > label, .table th > label {
  cursor: pointer;
  display: block;
}
.htmlContent table th, .ck.ck-content.ck-editor__editable table th, .messageBody > .messageText table th, .messageSignature > div table th, .table th {
  border-bottom: 2px solid currentColor;
  color: var(--wcfTabularBoxHeadline);
  text-align: left;
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.28;
  /* alignment only */
}
@media screen and (min-width: 769px), print {
  .htmlContent table th, .ck.ck-content.ck-editor__editable table th, .messageBody > .messageText table th, .messageSignature > div table th, .table th {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .htmlContent table th, .ck.ck-content.ck-editor__editable table th, .messageBody > .messageText table th, .messageSignature > div table th, .table th {
    font-size: 18px;
  }
}
.htmlContent table th > a, .ck.ck-content.ck-editor__editable table th > a, .messageBody > .messageText table th > a, .messageSignature > div table th > a, .table th > a {
  color: var(--wcfTabularBoxHeadline);
  display: block;
}
.htmlContent table th.active > a, .ck.ck-content.ck-editor__editable table th.active > a, .messageBody > .messageText table th.active > a, .messageSignature > div table th.active > a, .htmlContent table th > a:hover, .ck.ck-content.ck-editor__editable table th > a:hover, .messageBody > .messageText table th > a:hover, .messageSignature > div table th > a:hover, .table th.active > a, .table th > a:hover {
  color: var(--wcfTabularBoxHeadlineActive);
}
.htmlContent table th.ASC > a::after, .ck.ck-content.ck-editor__editable table th.ASC > a::after, .messageBody > .messageText table th.ASC > a::after, .messageSignature > div table th.ASC > a::after, .htmlContent table th.DESC > a::after, .ck.ck-content.ck-editor__editable table th.DESC > a::after, .messageBody > .messageText table th.DESC > a::after, .messageSignature > div table th.DESC > a::after, .table th.ASC > a::after, .table th.DESC > a::after {
  display: inline-block;
  margin-left: 5px;
}
.htmlContent table th.ASC > a::after, .ck.ck-content.ck-editor__editable table th.ASC > a::after, .messageBody > .messageText table th.ASC > a::after, .messageSignature > div table th.ASC > a::after, .table th.ASC > a::after {
  content: "↑";
}
.htmlContent table th.DESC > a::after, .ck.ck-content.ck-editor__editable table th.DESC > a::after, .messageBody > .messageText table th.DESC > a::after, .messageSignature > div table th.DESC > a::after, .table th.DESC > a::after {
  content: "↓";
}
.htmlContent table th.columnMark, .ck.ck-content.ck-editor__editable table th.columnMark, .messageBody > .messageText table th.columnMark, .messageSignature > div table th.columnMark, .htmlContent table th.columnStatus, .ck.ck-content.ck-editor__editable table th.columnStatus, .messageBody > .messageText table th.columnStatus, .messageSignature > div table th.columnStatus, .table th.columnMark, .table th.columnStatus {
  text-align: center;
}
.htmlContent table th.columnDate, .ck.ck-content.ck-editor__editable table th.columnDate, .messageBody > .messageText table th.columnDate, .messageSignature > div table th.columnDate, .htmlContent table th.columnDigits, .ck.ck-content.ck-editor__editable table th.columnDigits, .messageBody > .messageText table th.columnDigits, .messageSignature > div table th.columnDigits, .htmlContent table th.columnID, .ck.ck-content.ck-editor__editable table th.columnID, .messageBody > .messageText table th.columnID, .messageSignature > div table th.columnID, .table th.columnDate, .table th.columnDigits, .table th.columnID {
  text-align: right;
}
.htmlContent table td.columnMark, .ck.ck-content.ck-editor__editable table td.columnMark, .messageBody > .messageText table td.columnMark, .messageSignature > div table td.columnMark, .htmlContent table td.columnStatus, .ck.ck-content.ck-editor__editable table td.columnStatus, .messageBody > .messageText table td.columnStatus, .messageSignature > div table td.columnStatus, .table td.columnMark, .table td.columnStatus {
  text-align: center;
  width: 1px;
  white-space: nowrap;
  word-wrap: normal;
}
.htmlContent table td.columnDigits, .ck.ck-content.ck-editor__editable table td.columnDigits, .messageBody > .messageText table td.columnDigits, .messageSignature > div table td.columnDigits, .htmlContent table td.columnID, .ck.ck-content.ck-editor__editable table td.columnID, .messageBody > .messageText table td.columnID, .messageSignature > div table td.columnID, .table td.columnDigits, .table td.columnID {
  text-align: right;
  width: 1px;
  white-space: nowrap;
  word-wrap: normal;
}
.htmlContent table td.columnIcon, .ck.ck-content.ck-editor__editable table td.columnIcon, .messageBody > .messageText table td.columnIcon, .messageSignature > div table td.columnIcon, .table td.columnIcon {
  text-align: left;
  width: 1px;
  white-space: nowrap;
  word-wrap: normal;
}
.htmlContent table td.columnIcon fa-icon, .ck.ck-content.ck-editor__editable table td.columnIcon fa-icon, .messageBody > .messageText table td.columnIcon fa-icon, .messageSignature > div table td.columnIcon fa-icon, .table td.columnIcon fa-icon {
  color: var(--wcfContentText);
}
.htmlContent table td.columnTitle, .ck.ck-content.ck-editor__editable table td.columnTitle, .messageBody > .messageText table td.columnTitle, .messageSignature > div table td.columnTitle, .table td.columnTitle {
  font-weight: 600;
  text-align: left;
}
.htmlContent table td.columnText, .ck.ck-content.ck-editor__editable table td.columnText, .messageBody > .messageText table td.columnText, .messageSignature > div table td.columnText, .table td.columnText {
  font-weight: normal;
  text-align: left;
  max-width: 20%;
}
.htmlContent table td.columnDate, .ck.ck-content.ck-editor__editable table td.columnDate, .messageBody > .messageText table td.columnDate, .messageSignature > div table td.columnDate, .table td.columnDate {
  text-align: right;
  width: 1px;
  white-space: nowrap;
  word-wrap: normal;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .htmlContent table td.columnDate, .ck.ck-content.ck-editor__editable table td.columnDate, .messageBody > .messageText table td.columnDate, .messageSignature > div table td.columnDate, .table td.columnDate {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .htmlContent table td.columnDate, .ck.ck-content.ck-editor__editable table td.columnDate, .messageBody > .messageText table td.columnDate, .messageSignature > div table td.columnDate, .table td.columnDate {
    font-size: 12px;
  }
}
.htmlContent table td.columnURL, .ck.ck-content.ck-editor__editable table td.columnURL, .messageBody > .messageText table td.columnURL, .messageSignature > div table td.columnURL, .htmlContent table td.columnSmallText, .ck.ck-content.ck-editor__editable table td.columnSmallText, .messageBody > .messageText table td.columnSmallText, .messageSignature > div table td.columnSmallText, .table td.columnURL, .table td.columnSmallText {
  text-align: left;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .htmlContent table td.columnURL, .ck.ck-content.ck-editor__editable table td.columnURL, .messageBody > .messageText table td.columnURL, .messageSignature > div table td.columnURL, .htmlContent table td.columnSmallText, .ck.ck-content.ck-editor__editable table td.columnSmallText, .messageBody > .messageText table td.columnSmallText, .messageSignature > div table td.columnSmallText, .table td.columnURL, .table td.columnSmallText {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .htmlContent table td.columnURL, .ck.ck-content.ck-editor__editable table td.columnURL, .messageBody > .messageText table td.columnURL, .messageSignature > div table td.columnURL, .htmlContent table td.columnSmallText, .ck.ck-content.ck-editor__editable table td.columnSmallText, .messageBody > .messageText table td.columnSmallText, .messageSignature > div table td.columnSmallText, .table td.columnURL, .table td.columnSmallText {
    font-size: 12px;
  }
}
@media screen and (max-width: 768px) {
  .htmlContent table td.columnTitle, .ck.ck-content.ck-editor__editable table td.columnTitle, .messageBody > .messageText table td.columnTitle, .messageSignature > div table td.columnTitle, .htmlContent table td.columnText, .ck.ck-content.ck-editor__editable table td.columnText, .messageBody > .messageText table td.columnText, .messageSignature > div table td.columnText, .htmlContent table td.columnURL, .ck.ck-content.ck-editor__editable table td.columnURL, .messageBody > .messageText table td.columnURL, .messageSignature > div table td.columnURL, .htmlContent table td.columnSmallText, .ck.ck-content.ck-editor__editable table td.columnSmallText, .messageBody > .messageText table td.columnSmallText, .messageSignature > div table td.columnSmallText, .table td.columnTitle, .table td.columnText, .table td.columnURL, .table td.columnSmallText {
    min-width: 200px;
  }
}
@media screen and (max-width: 1024px) {
  .htmlContent table td.columnIcon :not(.button) > .icon16, .ck.ck-content.ck-editor__editable table td.columnIcon :not(.button) > .icon16, .messageBody > .messageText table td.columnIcon :not(.button) > .icon16, .messageSignature > div table td.columnIcon :not(.button) > .icon16, .htmlContent table td.columnIcon > .icon16, .ck.ck-content.ck-editor__editable table td.columnIcon > .icon16, .messageBody > .messageText table td.columnIcon > .icon16, .messageSignature > div table td.columnIcon > .icon16, .table td.columnIcon :not(.button) > .icon16, .table td.columnIcon > .icon16 {
    font-size: 18px;
    height: 24px;
    line-height: 24px;
    width: 24px;
  }
}
.htmlContent table tr:hover > td, .ck.ck-content.ck-editor__editable table tr:hover > td, .messageBody > .messageText table tr:hover > td, .messageSignature > div table tr:hover > td, .table tr:hover > td {
  background-color: #f2f2f2;
}
.htmlContent table tr:not(:last-child) > td:not(.lastRow), .ck.ck-content.ck-editor__editable table tr:not(:last-child) > td:not(.lastRow), .messageBody > .messageText table tr:not(:last-child) > td:not(.lastRow), .messageSignature > div table tr:not(:last-child) > td:not(.lastRow), .table tr:not(:last-child) > td:not(.lastRow) {
  border-bottom: 1px solid var(--wcfContentBorderInner);
}
.htmlContent table .statusDisplay, .ck.ck-content.ck-editor__editable table .statusDisplay, .messageBody > .messageText table .statusDisplay, .messageSignature > div table .statusDisplay, .table .statusDisplay {
  float: right;
}
.htmlContent table .statusDisplay .statusIcons, .ck.ck-content.ck-editor__editable table .statusDisplay .statusIcons, .messageBody > .messageText table .statusDisplay .statusIcons, .messageSignature > div table .statusDisplay .statusIcons, .table .statusDisplay .statusIcons {
  float: right;
  margin-left: 5px;
}
.htmlContent table .statusDisplay .statusIcons li, .ck.ck-content.ck-editor__editable table .statusDisplay .statusIcons li, .messageBody > .messageText table .statusDisplay .statusIcons li, .messageSignature > div table .statusDisplay .statusIcons li, .table .statusDisplay .statusIcons li {
  display: inline-block;
}
.htmlContent table tbody:first-child > tr:first-child > td, .ck.ck-content.ck-editor__editable table tbody:first-child > tr:first-child > td, .messageBody > .messageText table tbody:first-child > tr:first-child > td, .messageSignature > div table tbody:first-child > tr:first-child > td, .table tbody:first-child > tr:first-child > td {
  border-top: 1px solid var(--wcfContentBorder);
}
.tableOfContentsContainer {
  border: 1px solid var(--wcfContentBorderInner);
  /* The list numbers extend into the horizontal padding, 10px is not enough for double digit numbers. */
  padding: 10px 20px;
}
.tableOfContentsContainer.open .jsTableOfContentsShow {
  display: none;
}
.tableOfContentsContainer:not(.open) .jsTableOfContentsHide, .tableOfContentsContainer:not(.open) .tableOfContents {
  display: none;
}
@media screen and (min-width: 769px), print {
  .tableOfContentsWrapper {
    float: right;
    margin: 0 0 10px 10px;
    max-width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .tableOfContentsWrapper {
    margin-bottom: 10px;
  }
  .tableOfContentsContainer {
    display: inline-block;
  }
  .tableOfContentsContainer.mobileForceHide .jsTableOfContentsShow {
    display: initial !important;
  }
  .tableOfContentsContainer.mobileForceHide .jsTableOfContentsHide, .tableOfContentsContainer.mobileForceHide .tableOfContents {
    display: none;
  }
}
.tableOfContentsHeader {
  text-align: center;
}
.tableOfContentsTitle {
  font-weight: 600;
}
.htmlContent .tableOfContents, .ck.ck-content.ck-editor__editable .tableOfContents, .messageBody > .messageText .tableOfContents, .messageSignature > div .tableOfContents {
  margin-left: 15px;
}
.htmlContent .tableOfContents.tocLevel2, .ck.ck-content.ck-editor__editable .tableOfContents.tocLevel2, .messageBody > .messageText .tableOfContents.tocLevel2, .messageSignature > div .tableOfContents.tocLevel2 {
  list-style-type: lower-alpha;
}
.htmlContent .tableOfContents.tocLevel3, .ck.ck-content.ck-editor__editable .tableOfContents.tocLevel3, .messageBody > .messageText .tableOfContents.tocLevel3, .messageSignature > div .tableOfContents.tocLevel3 {
  list-style-type: lower-roman;
}
.balloonTooltip {
  background-color: var(--wcfTooltipBackground);
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: var(--wcfTooltipText);
  left: 0;
  max-width: 300px;
  padding: 5px 10px;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: visibility 0s linear 0.12s;
  visibility: hidden;
  z-index: 800;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .balloonTooltip {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .balloonTooltip {
    font-size: 12px;
  }
}
.balloonTooltip.active {
  visibility: visible;
  transition-delay: 0s;
}
.balloonTooltip.interactive {
  pointer-events: all;
}
.balloonTooltip.interactive > span {
  cursor: pointer;
}
.balloonTooltip.interactive > span:not(:first-child) {
  border-left: 1px solid var(--wcfTooltipText);
  margin-left: 10px;
  padding-left: 10px;
}
.quoteManagerCopy {
  position: absolute;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  z-index: 350;
}
.quoteManagerCopy.touchForceInaccessible {
  pointer-events: none;
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .quoteManagerCopy {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 1024px) and (max-width: 768px) {
  .quoteManagerCopy {
    font-size: 14px;
  }
}
#trophyIconEditor .colorBoxValue {
  display: block;
  height: 24px;
  width: 24px;
}
#trophyIconEditor .colorBox {
  background-color: white;
  border: 1px solid #ccc;
  display: inline-block;
  padding: 1px;
  vertical-align: middle;
}
#badgeContainer .icon {
  vertical-align: middle;
}
.trophyIcon {
  align-self: flex-start;
  display: inline-block;
  border-radius: 50%;
}
.trophyIcon fa-icon {
  transform: scale(0.5625);
  width: var(--icon-size);
  /*
			We need to override the positioning by the .box classes here
			to prevent the icon from being moved too far to the left.
		*/
  position: static !important;
}
.specialTrophyList {
  display: flex;
  flex-wrap: wrap;
}
.specialTrophyList > li {
  width: 300px;
  padding-bottom: 5px;
}
.specialTrophyList > li > label {
  display: flex;
  align-items: center;
}
.specialTrophyList > li > label .trophyIcon, .specialTrophyList > li > label > span:last-child {
  margin-left: 5px;
}
.specialTrophyList > li > label input, .specialTrophyList > li > label .trophyIcon {
  flex-shrink: 0;
}
/* trophies in message sidebar */
.specialTrophyContainer {
  margin-top: 10px;
}
.specialTrophyContainer > ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: -5px;
  margin-right: -5px;
}
.specialTrophyContainer > ul > li {
  margin-bottom: 5px;
  margin-right: 5px;
}
@media screen and (max-width: 768px) {
  .specialTrophyContainer {
    display: none;
  }
}
/* trophies in user profile header */
.specialTrophyUserContainer > ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-top: -15px;
}
.specialTrophyUserContainer > ul > li {
  margin-bottom: 5px;
  margin-right: 5px;
}
.userProfileUserWithCoverPhoto .specialTrophyUserContainer > ul {
  margin-top: 0;
}
.sortableNodeLabel > .trophyIcon {
  margin-right: 5px;
}
.unfurlUrlCardContainer {
  margin: 1em 0 0 0;
}
.unfurlUrlCard {
  background-color: var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: var(--wcfContentText);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 400px;
  /* OG images are designed with a 2:1 aspect ratio. */
}
.unfurlUrlCard.unfurlUrlCardCoverImage .unfurlUrlImage {
  /* The `!important` is required because of `.messageBody > .messageText img`. */
  height: 200px !important;
  object-fit: cover;
  object-position: center;
  width: 400px;
}
.unfurlUrlCard.unfurlUrlCardSquaredImage {
  display: flex;
}
.unfurlUrlCard.unfurlUrlCardSquaredImage .unfurlUrlImage {
  border-radius: 3px;
  flex: 0 0 auto;
  /* The `!important` is required because of `.messageBody > .messageText img`. */
  height: 128px !important;
  margin: 10px;
  width: 128px;
}
@media screen and (min-width: 545px) and (max-width: 768px) {
  .unfurlUrlCard.unfurlUrlCardSquaredImage .unfurlUrlImage {
    height: 64px !important;
    width: 64px;
  }
}
@media screen and (max-width: 544px) {
  .unfurlUrlCard.unfurlUrlCardSquaredImage .unfurlUrlImage {
    height: 24px !important;
    position: absolute;
    width: 24px;
  }
}
.unfurlUrlCard.unfurlUrlCardSquaredImage .unfurlUrlInformation {
  flex: 1 auto;
  overflow: hidden;
  padding-left: 10px;
}
@media screen and (max-width: 544px) {
  .unfurlUrlCard.unfurlUrlCardSquaredImage .unfurlUrlTitle {
    padding-left: 30px;
  }
}
html[data-color-scheme="dark"] .unfurlUrlCard {
  border: 1px solid var(--wcfContentBorderInner);
}
.unfurlUrlInformation {
  padding: 10px 10px 25px 10px;
}
.unfurlUrlTitle {
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
  color: inherit;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (min-width: 769px), print {
  .unfurlUrlTitle {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .unfurlUrlTitle {
    font-size: 18px;
  }
}
.unfurlUrlTitle::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.unfurlUrlTitle:hover, .unfurlUrlTitle:focus {
  color: inherit;
}
@media (pointer: fine) {
  .unfurlUrlCard:hover .unfurlUrlTitle {
    text-decoration: underline;
  }
}
.unfurlUrlDescription {
  color: var(--wcfContentDimmedText);
  margin-top: 5px;
}
.unfurlUrlHost {
  font-weight: 400;
  bottom: 5px;
  color: var(--wcfContentDimmedText);
  position: absolute;
  right: 5px;
}
@media screen and (min-width: 769px), print {
  .unfurlUrlHost {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .unfurlUrlHost {
    font-size: 12px;
  }
}
.unfurlUrlHost img {
  height: 12px !important;
}
.formUploadHandlerContent > .formUploadHandlerList {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0 !important;
}
.formUploadHandlerContent > .formUploadHandlerList > li {
  display: flex;
  flex: 0 0 100%;
  margin-bottom: 20px;
}
@media screen and (min-width: 769px), print {
  .formUploadHandlerContent > .formUploadHandlerList {
    margin-right: -20px;
  }
  .formUploadHandlerContent > .formUploadHandlerList > li {
    /* Safari sometimes trips over fractional values, causing two
				   items to be exactly 1 pixel wider than the available space.
				   Reserving 21px covers all sort of rounding errors, without
				   being visually noticeable */
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(50% - 21px);
    margin-right: 20px;
  }
}
.formUploadHandlerContentListImage {
  max-height: 64px;
  max-width: 64px;
  object-fit: cover;
}
.selectedImagePreview > img {
  margin-bottom: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
}
.uploadButtonDiv .button {
  overflow: hidden;
  position: relative;
}
.uploadButtonDiv .uploadButton > input {
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}
.fileUpload__preview {
  display: flex;
  flex-direction: column;
}
.fileUpload__preview woltlab-core-file img {
  max-width: 100%;
  max-height: 100%;
}
.fileUpload__preview:not(:empty) {
  margin-top: 20px;
}
.fileUpload__preview__item__buttons {
  margin-top: 5px;
}
.userCardList {
  --column-count: 3;
  display: grid;
  gap: 20px;
  grid-auto-rows: minmax(200px, auto);
  grid-template-columns: repeat(var(--column-count), 1fr);
  padding: 20px 0;
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .userCardList {
    --column-count: 2;
  }
}
@media screen and (min-width: 545px) and (max-width: 768px) {
  .userCardList {
    --column-count: 2;
  }
}
@media screen and (max-width: 544px) {
  .userCardList {
    --column-count: 1;
  }
}
.userCard {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadowCard);
  display: flex;
  flex-direction: column;
  position: relative;
}
.userCard__header {
  position: relative;
  display: flex;
  flex-direction: column;
}
.userCard__header__background {
  height: 100px;
  overflow: hidden;
  /* Nesting the border radius requires the inner element to be one pixel
	   shorter to prevent visual gaps. */
  border-top-right-radius: calc(var(--wcfBorderRadius) - 1px);
  border-top-left-radius: calc(var(--wcfBorderRadius) - 1px);
}
.userCard__header__background__image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.userCard__header__avatar {
  position: relative;
  border-radius: 50%;
  border: 5px solid var(--wcfContentBackground);
  margin: auto;
  margin-top: -37px;
}
.userCard__onlineIndicator {
  background-color: #090;
  border: 1px solid var(--wcfContentBackground);
  border-radius: 50%;
  bottom: 0;
  height: 12px;
  position: absolute;
  right: 6px;
  width: 12px;
}
.userCard__footer {
  border-top: 1px solid var(--wcfContentBorderInner);
  padding: 10px;
}
.userCard__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1 auto;
  row-gap: 5px;
  padding: 10px 20px 20px 20px;
}
.userCard__username {
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .userCard__username {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .userCard__username {
    font-size: 18px;
  }
}
.userCard__username a {
  color: inherit;
}
.userCard__footer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.userCard__footer__statsItem {
  display: flex;
  color: inherit;
  flex-direction: column;
  text-align: center;
}
.userCard__footer__statsItem:hover {
  color: inherit;
}
.userCard__footer__statsItem:nth-child(n + 4) {
  display: none;
}
.userCard__footer__statsItem__key {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (min-width: 769px), print {
  .userCard__footer__statsItem__key {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .userCard__footer__statsItem__key {
    font-size: 12px;
  }
}
.userCard__buttons {
  background-color: var(--wcfContentContainerBackground);
  border-radius: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 5px auto 0 auto;
  padding: 5px 10px;
}
.userCard__button {
  color: inherit;
}
.userCard__button:hover {
  color: inherit;
}
.userCard__details {
  font-weight: 400;
  margin-top: auto;
  padding-top: 5px;
}
@media screen and (min-width: 769px), print {
  .userCard__details {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .userCard__details {
    font-size: 12px;
  }
}
.userCard__details .dataList dd {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.popoverContainer[data-identifier="com.woltlab.wcf.user"] {
  --padding: 0;
  --maxHeight: none;
  --maxWidth: 300px;
  width: 300px;
}
.popoverContainer[data-identifier="com.woltlab.wcf.user"] .userCard {
  border-width: 0;
  box-shadow: none;
}
/* reduces the visual impact of content by ignored users */
.ignoredUserContent {
  /* no grayscale filter in IE11 due to completely lacking support */
  -webkit-filter: grayscale(100%) !important;
  /* Chrome, Safari, Opera */
  filter: grayscale(100%) !important;
  /* Firefox, Edge */
}
.ignoredUserContent:not(:hover) {
  opacity: 0.5 !important;
}
@media screen and (min-width: 769px), print {
  .ignoredUserMessage {
    background-color: var(--wcfStatusInfoBackground) !important;
    border-left: 5px solid var(--wcfStatusInfoBorder) !important;
    color: var(--wcfStatusInfoText) !important;
    cursor: pointer !important;
  }
  .ignoredUserMessage::before {
    content: attr(data-ignored-user-message);
    padding: 10px 20px;
  }
}
@media screen and (max-width: 768px) {
  .ignoredUserMessage {
    border-top: 1px solid var(--wcfContentBorder);
    margin: 0 -10px;
    padding-top: 30px;
  }
  .ignoredUserMessage::before {
    background-color: var(--wcfStatusInfoBackground) !important;
    border-left: 5px solid var(--wcfStatusInfoBorder) !important;
    color: var(--wcfStatusInfoText) !important;
    content: attr(data-ignored-user-message);
    cursor: pointer !important;
    display: block;
    padding: 10px;
  }
}
.ignoredUserMessage > * {
  display: none;
}
.userMenu {
  background-color: var(--wcfUserMenuBackground);
  color: var(--wcfUserMenuText);
  pointer-events: all;
}
.userMenu.userMenuControlPanel .userMenuItemImage {
  align-self: center;
}
.userMenu.userMenuControlPanel .userMenuItemContent {
  font-weight: 600;
}
.userMenu.userMenuControlPanel .icon {
  color: var(--wcfUserMenuTextDimmed);
}
.userMenu .icon {
  color: var(--wcfUserMenuText);
}
.dropdownMenuContainer .userMenu {
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadow);
  position: fixed;
  width: 400px;
  z-index: 450;
}
.pageMenuUserTabPanel .userMenu {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pageMenuUserTabPanel .userMenu .userMenuContentScrollable {
  flex: 1 auto;
}
.userMenuHeader {
  align-items: center;
  display: grid;
  min-height: 44px;
  grid-template-areas: "title buttons";
  grid-template-columns: auto max-content;
}
.userMenuTitle {
  grid-area: title;
  margin: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .userMenuTitle {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .userMenuTitle {
    font-size: 18px;
  }
}
.userMenuButtons {
  column-gap: 1px;
  display: grid;
  grid-auto-flow: column;
  grid-area: buttons;
}
.userMenuButton {
  align-items: center;
  color: inherit;
  display: flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.userMenuButton:hover {
  color: inherit;
}
html:not(.touch) .userMenuButton {
  transform: scale(1);
  transition: transform 0.24s ease-in-out;
}
html:not(.touch) .userMenuButton:hover {
  transform: scale(1.5);
}
.userMenuContentStatus {
  align-items: center;
  color: var(--wcfUserMenuTextDimmed);
  display: flex;
  height: 60px;
  justify-content: center;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .userMenuContentStatus {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .userMenuContentStatus {
    font-size: 18px;
  }
}
@media screen and (min-width: 1025px), print {
  .userMenuContent.userMenuContentScrollable {
    max-height: 400px;
    overflow: hidden;
    position: relative;
  }
}
@media screen and (max-width: 1024px) {
  .userMenuContent.userMenuContentScrollable {
    overflow: hidden auto;
  }
}
.userMenuItem {
  background-color: var(--wcfUserMenuBackground);
  display: grid;
  grid-template-areas: "image content" "image meta";
  grid-template-columns: 60px auto;
  grid-template-rows: minmax(0, min-content);
  /* min-height = 48px icon + 2*10px padding */
  min-height: 68px;
  padding: 10px 30px 10px 10px;
  position: relative;
  transition: background-color 0.12s linear;
}
.userMenuItem[data-is-unread="true"] .userMenuItemLink::before {
  right: 30px;
}
.userMenuItem[data-is-unread="false"] .userMenuItemUnread {
  display: none;
}
.userMenuItem.userMenuItemNarrow {
  grid-template-columns: 28px auto;
}
.userMenuItem.userMenuItemSingleLine {
  grid-template-areas: "image content";
  grid-template-rows: auto;
}
.userMenuItem.userMenuItemSingleLine:not(.userMenuItemUserHeader) {
  min-height: 0;
}
.userMenuItem.userMenuItemSingleLine .userMenuItemContent {
  align-self: center;
}
.userMenuItem.userMenuItemSingleLine .userMenuItemImage :is(fa-brand, fa-icon) {
  left: 0;
}
.userMenuItem.userMenuItemWithUsernames {
  grid-template-areas: "image content" "image usernames" "image meta";
  grid-template-columns: 60px auto;
}
html:not(.touch) .userMenuItem:hover {
  background-color: var(--wcfUserMenuBackgroundActive);
  color: var(--wcfUserMenuTextActive);
}
html:not(.touch) .userMenuItem:hover .icon {
  color: var(--wcfUserMenuTextActive);
}
.userMenuItemLinkPlain {
  font-weight: 600;
}
.userMenuItemLink, .userMenuItemLink:hover {
  color: inherit;
}
.userMenuItemLink::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.userMenuItemImage {
  grid-area: image;
  /* Setting an element‘s position to `absolute` will remove it from the
	   regular flow, causing it to be ignored for the calculation of the
	   `grid-template-rows`. */
  position: absolute;
}
.userMenuItemImage :is(fa-brand, fa-icon) {
  left: -6px;
  position: relative;
}
.userMenuItemContent {
  grid-area: content;
}
.userMenuItemUsernames {
  grid-area: usernames;
}
.userMenuItemMeta {
  grid-area: meta;
}
.userMenuItemUsernames, .userMenuItemMeta {
  color: var(--wcfUserMenuTextDimmed);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .userMenuItemUsernames, .userMenuItemMeta {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .userMenuItemUsernames, .userMenuItemMeta {
    font-size: 12px;
  }
}
.userMenuItemUnread {
  align-items: center;
  bottom: 0;
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
}
.userMenuItemUnread::before {
  background-color: var(--wcfUserMenuIndicator);
  border-radius: 50%;
  content: "";
  height: 10px;
  left: 7px;
  opacity: 1;
  position: absolute;
  top: calc(50% - 5px);
  width: 10px;
}
html:not(.touch) .userMenuItemUnread::before {
  transition: left 0.12s ease-in-out, opacity 0.12s ease-in-out;
}
html:not(.touch) .userMenuItem:hover .userMenuItemUnread::before {
  opacity: 0;
  left: 0;
}
.userMenuItemMarkAsRead {
  display: block;
  opacity: 1;
  position: relative;
  left: 0;
  width: 100%;
}
html:not(.touch) .userMenuItemMarkAsRead {
  transform: scale(1);
  transition: opacity 0.12s ease-in-out, left 0.12s ease-in-out, transform 0.24s ease-in-out;
}
html:not(.touch) .userMenuItemMarkAsRead:hover {
  transform: scale(1.5);
}
/* Tapping the indicator on touch devices triggers the action
   to mark the item as read. Positioning the button over the
   indicator masks this behavior. */
html.touch .userMenuItem .userMenuItemMarkAsRead {
  opacity: 0;
  left: 0;
  width: 24px;
}
.userMenuItem:not(:hover) .userMenuItemMarkAsRead {
  opacity: 0;
  left: 10px;
}
.userMenuFooter {
  border-top: 1px solid var(--wcfUserMenuBorder);
  padding: 10px;
  position: relative;
  text-align: center;
}
.userMenuFooterLink {
  color: inherit;
}
.userMenuFooterLink:hover {
  color: inherit;
  text-decoration: underline;
}
.userMenuFooterLink::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.userMenuContent .ps__rail-y {
  z-index: 2;
}
.userMenuContentDivider {
  border-top: 1px solid var(--wcfUserMenuBorder);
}
.userMenuNotifications {
  border: 1px solid var(--wcfUserMenuIndicator);
  border-radius: 5px;
  margin: 0 10px;
  padding: 10px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .userMenuNotifications {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .userMenuNotifications {
    font-size: 12px;
  }
}
.userMenuNotificationsButtons {
  margin-top: 10px;
  text-align: right;
}
.userProfileUser .contentHeaderIcon {
  position: relative;
}
.userProfileUser .contentHeaderIcon a {
  display: block;
}
.userProfileUser .contentHeaderIcon a {
  display: block;
}
.userProfileUser .contentHeaderDescription {
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .userProfileUser {
    display: flex;
    flex-wrap: wrap;
  }
  .userProfileUser .contentHeaderNavigation {
    flex: 0 0 100%;
  }
}
@media screen and (min-width: 545px) and (max-width: 768px) {
  .userProfileUser .contentHeaderIcon {
    display: block;
    flex: 0 0 96px;
    margin-right: 15px;
  }
  .userProfileUser .contentHeaderIcon img {
    width: 96px !important;
    height: 96px !important;
  }
  .userProfileUser .contentHeaderTitle {
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% - 111px);
    max-width: calc(100% - 11px);
  }
}
@media screen and (max-width: 544px) {
  .userProfileUser .contentHeaderIcon {
    display: block;
    flex: 0 0 48px;
    margin-right: 10px;
  }
  .userProfileUser .contentHeaderIcon img {
    width: 48px !important;
    height: 48px !important;
  }
  .userProfileUser .contentHeaderTitle {
    /* The `flex` shorthand fails in IE11 if `calc()` is used. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% - 58px);
  }
}
@media screen and (min-width: 769px), print {
  .userProfileUser .contentHeaderIcon {
    flex: 0 0 128px;
    margin-right: 20px;
  }
}
/* user profile cover photo */
.userProfileUserWithCoverPhoto {
  margin-top: 0;
  padding-top: 165px;
  position: relative;
}
.userProfileUserWithCoverPhoto .userProfileCoverPhoto {
  background: no-repeat center;
  background-size: cover;
  border-radius: 3px;
  height: 200px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.userProfileUserWithCoverPhoto .userProfileCoverPhoto::after {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}
.userProfileUserWithCoverPhoto .userProfileCoverPhoto .userProfileManageCoverPhoto {
  position: absolute;
  right: 10px;
  top: 10px;
}
.userProfileUserWithCoverPhoto .contentHeaderTitle {
  margin-top: 0;
  /* avoid being covered by the photo */
  z-index: 10;
}
.userProfileUserWithCoverPhoto .userProfileUsername {
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
@media screen and (min-width: 769px), print {
  .userProfileUserWithCoverPhoto .contentHeaderIcon {
    flex: 0 0 138px;
    margin-top: -29px;
    /* 35px photo overlap - (128px height / 2) */
    padding-left: 10px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderDescription {
    margin-top: 10px !important;
  }
  .userProfileUserWithCoverPhoto .contentHeaderNavigation {
    padding-top: 45px;
  }
}
@media screen and (min-width: 545px), print {
  .userProfileUserWithCoverPhoto .contentHeaderIcon .badgeOnline {
    left: 10px !important;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername + .badge {
    margin-left: 5px;
  }
}
@media screen and (min-width: 545px) and (max-width: 768px) {
  .userProfileUserWithCoverPhoto {
    padding-top: 170px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderIcon {
    margin-top: -18px;
    /* 30px photo overlap - (96px height / 2) */
    padding-left: 5px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderDescription {
    margin-top: 10px !important;
  }
}
@media screen and (max-width: 544px) {
  .userProfileUserWithCoverPhoto {
    padding-top: 120px;
  }
  .userProfileUserWithCoverPhoto .userProfileCoverPhoto {
    height: 150px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderIcon {
    margin-top: 6px;
    /* 30px photo overlap - (48px height / 2) */
    padding-left: 5px;
  }
  .userProfileUserWithCoverPhoto .contentTitle {
    margin-bottom: 35px;
    position: relative;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername {
    display: block;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername + .badge {
    margin-left: 0;
    position: absolute;
    top: 35px !important;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername + .userRankImage {
    position: absolute;
    top: 32px;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername + .badge + .userRankImage {
    position: relative;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername + .badge + .userRankImage > img {
    transform: translateY(32px);
  }
  .userProfileUserWithCoverPhoto .contentHeaderDescription {
    margin-left: -58px;
  }
}
.userTitleBadge {
  max-width: 154px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.userAvatarImage {
  background-color: #fff;
  border-radius: 50%;
}
html[data-color-scheme="dark"] .userAvatarImage {
  background-color: #333;
}
.userAvatarList {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -10px;
}
.userAvatarList > li {
  flex: 0 0 48px;
  margin-bottom: 10px;
  text-align: center;
}
.userAvatarList > li:not(:last-child) {
  margin-right: -12px;
}
.userAvatarList > li > a {
  display: block;
}
.userAvatarList > li > a > img {
  border: 2px solid #fff;
}
.userAvatarList.small > li {
  flex: 0 0 24px;
}
.userAvatarList.small > li:not(:last-child) {
  margin-right: -6px;
}
.userAvatarList.small > li > a > img {
  border: 1px solid #fff;
}
html[data-color-scheme="dark"] .userAvatarList > li > a > img {
  border-color: rgba(255, 255, 255, 0.12);
}
.userList .box48 {
  align-items: center;
}
/* user notifications */
.userNotificationItemList > .notificationItem.notificationUnconfirmed {
  align-items: center;
  display: flex;
}
.userNotificationItemList > .notificationItem.notificationUnconfirmed > .box32 {
  flex: 1 1 auto;
  position: relative;
}
.userNotificationItemList > .notificationItem.notificationUnconfirmed > .notificationItemMarkAsConfirmed {
  flex: 0 0 auto;
}
.userNotificationItemList .userNotificationItemLink {
  color: inherit;
}
.userNotificationItemList .userNotificationItemLink::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.userProfileUser .contentHeaderIcon .badgeOnline {
  left: 0;
  pointer-events: none;
  position: absolute;
}
@media screen and (min-width: 769px), print {
  .userProfileUser .contentHeaderIcon .badgeOnline {
    bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .userProfileUser .contentHeaderIcon .badgeOnline {
    color: transparent;
    padding: 0;
    top: 0;
    width: 0;
  }
  .userProfileUser .contentHeaderIcon .badgeOnline::before {
    background-color: inherit;
    border: 1px solid white;
    border-radius: 50%;
    content: "";
    height: 16px;
    left: 34px;
    /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */
    position: absolute;
    width: 16px;
  }
}
.userOnlineIndicator {
  background-color: #090;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}
.workerStatusIcon[data-status="error"] {
  color: #c00;
}
.workerStatusIcon[data-status="success"] {
  color: #090;
}
/*
 * Special styles for changes introduced in WoltLab Suite 3.1 that
 * are not compatible with styles created for earlier versions.
 */
@media screen and (min-width: 1025px), print {
  .main {
    padding: 30px 0;
  }
}
.paginationTop {
  margin-top: 30px;
}
.content > .section, .content > form, .sectionContainer, .boxesContentTop .box, .boxesContentBottom .box {
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: var(--wcfBorderRadius);
  background-color: var(--wcfContentContainerBackground);
  padding: 20px;
}
@media screen and (max-width: 768px) {
  .content > .section, .content > form, .sectionContainer, .boxesContentTop .box, .boxesContentBottom .box {
    padding: 10px;
  }
}
.content > .section > .section:first-child, .content > form > .section:first-child, .sectionContainer > .section:first-child, .boxesContentTop .box > .section:first-child, .boxesContentBottom .box > .section:first-child {
  margin-top: 0;
}
.content > .section .section:not(:first-child), .content > form .section:not(:first-child), .sectionContainer .section:not(:first-child), .boxesContentTop .box .section:not(:first-child), .boxesContentBottom .box .section:not(:first-child) {
  margin-top: 0;
}
.content > .section .section + .section, .content > form .section + .section, .sectionContainer .section + .section, .boxesContentTop .box .section + .section, .boxesContentBottom .box .section + .section {
  margin-top: 40px;
}
.content > .section + .sectionContainer, .content > form + .sectionContainer {
  margin-top: 40px;
}
.content > form {
  margin-top: 40px;
}
.contentHeader + .section, .contentHeader + form, .contentHeader + .sectionContainer {
  margin-top: 30px;
}
.content > .section .tabMenuContent > .section:first-child, .content > .section .tabMenuContent > form > .section:first-child {
  margin-top: 20px;
}
.content > .section > .messageList {
  border-top-width: 0;
}
@media screen and (max-width: 768px) {
  .content > .section > .messageList:first-child {
    margin-top: -11px;
  }
}
.content > .section > .messageList > :first-child {
  padding-top: 0;
}
.content > .section > .messageList > :first-child.anchorFixedHeader:target:not(.disableAnchorFixedHeader) {
  margin-top: -79px;
}
.content > .section > .messageList > :first-child.anchorFixedHeader:target:not(.disableAnchorFixedHeader)::after {
  height: 80px;
}
.content > .section > .messageList > :first-child.anchorFixedHeader:target:not(.disableAnchorFixedHeader) > .message {
  transform: translateY(79px);
}
@media screen and (max-width: 544px) {
  .content > .section > .messageList > :first-child.anchorFixedHeader:target:not(.disableAnchorFixedHeader) {
    margin-top: -60px;
  }
  .content > .section > .messageList > :first-child.anchorFixedHeader:target:not(.disableAnchorFixedHeader)::after {
    height: 50px;
  }
  .content > .section > .messageList > :first-child.anchorFixedHeader:target:not(.disableAnchorFixedHeader) > .message {
    transform: translateY(49px);
  }
}
.content > .section > .messageList > :last-child {
  border-bottom-width: 0;
  padding-bottom: 0;
}
.content > .section > .tabularList:last-child {
  border-bottom-width: 0;
}
.content > .section > .containerList > :first-child {
  border-top-width: 0;
}
.content > .section > .containerList > :last-child {
  border-bottom-width: 0;
}
.mainMenu .boxMenu .boxMenuDepth1 {
  box-shadow: var(--wcfBoxShadow);
}
.messageTabMenuNavigation > ul, .messageTabMenu > .messageTabMenuContent.active, .messageContent.loading > .messageContentLoadingOverlay {
  background-color: var(--wcfContentContainerBackground);
}
.messageTabMenuNavigation > ul > li.active > a::after {
  border-bottom-color: var(--wcfContentContainerBackground);
}
.innerError {
  background-color: var(--wcfStatusErrorBackground);
  color: var(--wcfStatusErrorText);
}
.innerError::before {
  border-bottom-color: var(--wcfStatusErrorBackground);
}
.sidebar dl:not(.plain) > dt, .sidebar dl.dataList > dt, .sidebar .separatorLeft::before, .messageSidebar dl:not(.plain) > dt, .messageSidebar dl.dataList > dt, .messageSidebar .separatorLeft::before {
  color: var(--wcfSidebarDimmedText);
}
.messageReduced .messageTitle a {
  color: var(--wcfSidebarText);
}
.messageReduced .messageHeaderMetaData .messagePublicationTime, .messageReduced .messageHeaderMetaData > li:not(:last-child)::after {
  color: var(--wcfSidebarDimmedText);
}
.ck.ck-content .mention, .userMention {
  color: var(--wcfSidebarLink);
}
.ck.ck-content .mention:hover, .userMention:hover {
  color: var(--wcfSidebarLinkActive);
}
.boxesSidebarLeft .box.boxError .boxTitle, .boxesSidebarLeft .box.boxInfo .boxTitle, .boxesSidebarLeft .box.boxSuccess .boxTitle, .boxesSidebarLeft .box.boxWarning .boxTitle, .boxesSidebarRight .box.boxError .boxTitle, .boxesSidebarRight .box.boxInfo .boxTitle, .boxesSidebarRight .box.boxSuccess .boxTitle, .boxesSidebarRight .box.boxWarning .boxTitle {
  color: inherit;
}
.tabMenuOverlayLeft {
  background: linear-gradient(to left, rgba(var(--wcfContentContainerBackground-rgb) / 0) 0%, var(--wcfContentContainerBackground) 50%);
}
.tabMenuOverlayRight {
  background: linear-gradient(to right, rgba(var(--wcfContentContainerBackground-rgb) / 0) 0%, var(--wcfContentContainerBackground) 50%);
}
.messageContent.loading > .messageContentLoadingOverlay {
  background-color: var(--wcfContentContainerBackground);
}
/*
 * Special styles for changes introduced in WoltLab Suite 5.2 that
 * are not compatible with styles created for earlier versions.
 */
.htmlContent table tr:hover > td, .ck.ck-content.ck-editor__editable table tr:hover > td, .messageBody > .messageText table tr:hover > td, .messageSignature > div table tr:hover > td, .table tr:hover > td {
  background-color: var(--wcfTabularBoxBackgroundActive);
}
.mainMenu .mainMenuShowPrevious.active {
  /* The button is otherwise partially overlapped by the menu items. */
  z-index: 1;
}
html[data-color-scheme="dark"] {
  color-scheme: dark;
}
html[data-color-scheme="dark"] .badge, html[data-color-scheme="dark"] a.badge {
  --background-color: #2f394c;
  --color: #d1d2d3;
}
html[data-color-scheme="dark"] .badge.badgeUpdate, html[data-color-scheme="dark"] a.badge.badgeUpdate {
  --background-color: #027abb;
  --color: #fcfcfd;
}
html[data-color-scheme="dark"] .badge.green, html[data-color-scheme="dark"] a.badge.green {
  --background-color: #1b5e20;
  --color: #cfdbcf;
}
html[data-color-scheme="dark"] .badge.red, html[data-color-scheme="dark"] a.badge.red {
  --background-color: #c1183d;
  --color: #f9e7ea;
}
html[data-color-scheme="dark"] .badge.black, html[data-color-scheme="dark"] a.badge.black {
  --background-color: #333;
  --color: #ccc;
}
html[data-color-scheme="dark"] .badge.brown, html[data-color-scheme="dark"] a.badge.brown {
  --background-color: #795548;
  --color: #e1dad7;
}
html[data-color-scheme="dark"] .badge.orange, html[data-color-scheme="dark"] a.badge.orange {
  --background-color: #f57c00;
  --color: #361b06;
}
html[data-color-scheme="dark"] .badge.yellow, html[data-color-scheme="dark"] a.badge.yellow {
  --background-color: #b2a42a;
  --color: #38340f;
}
html[data-color-scheme="dark"] .badge.blue, html[data-color-scheme="dark"] a.badge.blue {
  --background-color: #204f7e;
  --color: #cfd8e3;
}
html[data-color-scheme="dark"] .badge.purple, html[data-color-scheme="dark"] a.badge.purple {
  --background-color: #673ab7;
  --color: #ded4f0;
}
html[data-color-scheme="dark"] .badge.pink, html[data-color-scheme="dark"] a.badge.pink {
  --background-color: #e10fb0;
  --color: #1a0414;
}
html[data-color-scheme="dark"] a.badge:hover {
  --background-color: #252d3c;
  text-decoration: none;
}
html[data-color-scheme="dark"] a.badge:hover.black {
  --background-color: #000;
  --color: #ccc;
}
html[data-color-scheme="dark"] a.badge:hover.brown {
  --background-color: #3e2723;
  --color: #e1dad7;
}
html[data-color-scheme="dark"] a.badge:hover.red {
  --background-color: #900;
  --color: #f9e7ea;
}
html[data-color-scheme="dark"] a.badge:hover.orange {
  --background-color: #ef6c00;
  --color: #361b06;
}
html[data-color-scheme="dark"] a.badge:hover.yellow {
  --background-color: #cc0;
  --color: #38340f;
}
html[data-color-scheme="dark"] a.badge:hover.green {
  --background-color: #164b19;
  --color: #cfdbcf;
}
html[data-color-scheme="dark"] a.badge:hover.blue {
  --background-color: #1b4269;
  --color: #cfd8e3;
}
html[data-color-scheme="dark"] a.badge:hover.purple {
  --background-color: #4527a0;
  --color: #ded4f0;
}
html[data-color-scheme="dark"] a.badge:hover.pink {
  --background-color: #c09;
  --color: #1a0414;
}
html[data-color-scheme="dark"] .contentItem {
  border: 1px solid var(--wcfContentBorderInner);
}
html[data-color-scheme="dark"] .datePicker {
  border: 1px solid var(--wcfContentBorderInner);
}
html[data-color-scheme="dark"] .dialog__document, html[data-color-scheme="dark"] .dialogContainer {
  border: 1px solid var(--wcfContentBorderInner);
}
html[data-color-scheme="dark"] .dropdownMenu {
  border: 1px solid var(--wcfDropdownBorderInner);
}
html[data-color-scheme="dark"] .inlineCode, html[data-color-scheme="dark"] kbd {
  background-color: #3b3b3b !important;
  border-color: #858585 !important;
  color: #dfe2e5 !important;
}
html[data-color-scheme="dark"] .popover {
  border: 1px solid var(--wcfContentContainerBorder);
}
html[data-color-scheme="dark"] .spinner {
  background-color: #3b3b3b !important;
  border-color: #858585 !important;
  color: #dfe2e5 !important;
}
html[data-color-scheme="dark"] .userMenu {
  border: 1px solid var(--wcfUserMenuBorder);
}
/*

  DO NOT EDIT THIS FILE!

  dynamic global SCSS values, generated at Wed, 09 Jul 2025 14:15:10 +0000

*/
.error.helpme {
  font-size: 3em;
  text-align: center !important;
  max-width: 1000px !important;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
}
.error.helpmeSmall {
  font-size: 1.8em;
  text-align: center !important;
  max-width: 1000px !important;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
}
.button.helpme {
  width: 500px;
  height: 80px;
  font-size: 0.7em;
  border-radius: 18px;
}
.success.sarMember {
  font-size: 3em;
  text-align: center !important;
  max-width: 1000px !important;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
}
.success.sarMemberSmall {
  font-size: 0.6em;
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
  border-style: outset;
  border-radius: 20px;
  border: 3px solid #333333;
}
.button.sarMember {
  width: 500px;
  height: 80px;
  font-size: 0.7em;
  border-radius: 18px;
}
a.badge.orange fa-icon, .badge.orange fa-icon {
  color: #a45a11;
  --color: #a45a11;
}
.section.memberStatus {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.boxTitle.memberStatusTitle {
  font-size: 2em;
}
.boxTitle.memberStatusOwn {
  font-size: 1.8em;
}
.borderSidebox {
  border: 1px solid;
  border-radius: 8px;
  padding: 15px;
}
.bigFont {
  font-size: 2em;
  text-align: center;
}
.middleFont {
  font-size: 1.3em;
  text-align: center;
}
.formSubmit.button {
  background-color: var(--wcfButtonPrimaryBackground);
  color: var(--wcfButtonPrimaryTextActive);
}
/* Header */
.pageHeaderPanel {
  box-shadow: 0px 0px 5px #222;
  border-bottom: solid 1px #2b2b2b;
  top: inherit;
  position: static;
}
.mainMenu .boxMenu .boxMenuDepth1 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.23);
}
@media screen and (min-width: 1025px), print {
  .dropdownMenuContainer .userMenu {
    position: absolute;
  }
}
/* BoardList */
.wbbBoardNodeContainer__link:hover {
  color: white;
}
.wbbBoardNodeContainer--category:not(.wbbBoardNodeContainer--collapsed) .wbbBoardNodeContainer__header {
  padding-bottom: 3px;
}
.wbbBoardNodeContainer--category:not(.wbbBoardNodeContainer--collapsed) .wbbBoardNodeContainer__header {
  padding-bottom: 5px;
  position: relative;
}
.wbbBoardNodeContainer__header {
  background-color: var(--wcfTabularBoxHeadline);
  display: grid;
  grid-template-areas: "headline collapsibleButton" "description collapsibleButton";
  grid-template-columns: 1fr min-content;
  padding: 5px 10px;
}
.wbbBoardNodeContainer__header .wbbBoardNodeContainer__title, .wbbBoardNodeContainer__header .wbbBoardNodeContainer__description {
  background-color: var(--wcfTabularBoxHeadline);
  color: var(--wcfHeaderMenuLink);
}
.wbbBoardNodeContainer__collapsibleButton {
  color: white;
}
/* Copyright */
.copyrightFire {
  margin-top: 10px;
}
/* Menu Icons */
.boxMenu [data-identifier="com.woltlab.wcf.Dashboard"] > a > span.boxMenuLinkTitle::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  margin-right: 5px;
  font-size: 15px;
}
.boxMenu [data-identifier="com.woltlab.wcf.ArticleList"] > a > span.boxMenuLinkTitle::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  margin-right: 5px;
  font-size: 15px;
}
.boxMenu [data-identifier="com.woltlab.wcf.MembersList"] > a > span.boxMenuLinkTitle::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  margin-right: 5px;
  font-size: 15px;
}
.boxMenu [data-identifier="com.woltlab.wbb.BoardList"] > a > span.boxMenuLinkTitle::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  margin-right: 5px;
  font-size: 15px;
}