@charset "UTF-8";
/*!

stylesheet for 'Color Drop RedYellow Multi', generated on Tue, 31 Mar 2026 17:13:48 +0000 -- DO NOT EDIT

*/
html {
  --wcfButtonBackground: rgba(21, 21, 21, 1);
  --wcfButtonBackground-rgb: 21 21 21;
  --wcfButtonBackgroundActive: rgba(90, 90, 90, 1);
  --wcfButtonBackgroundActive-rgb: 90 90 90;
  --wcfButtonDisabledBackground: rgba(223, 223, 223, 1);
  --wcfButtonDisabledBackground-rgb: 223 223 223;
  --wcfButtonDisabledText: rgba(165, 165, 165, 1);
  --wcfButtonDisabledText-rgb: 165 165 165;
  --wcfButtonPrimaryBackground: rgba(2, 138, 189, 1);
  --wcfButtonPrimaryBackground-rgb: 2 138 189;
  --wcfButtonPrimaryBackgroundActive: rgba(0, 117, 159, 1);
  --wcfButtonPrimaryBackgroundActive-rgb: 0 117 159;
  --wcfButtonPrimaryText: rgba(255, 255, 255, 1);
  --wcfButtonPrimaryText-rgb: 255 255 255;
  --wcfButtonPrimaryTextActive: rgba(255, 255, 255, 0.9);
  --wcfButtonPrimaryTextActive-rgb: 255 255 255;
  --wcfButtonText: rgba(255, 255, 255, 1);
  --wcfButtonText-rgb: 255 255 255;
  --wcfButtonTextActive: rgba(255, 255, 255, 0.8);
  --wcfButtonTextActive-rgb: 255 255 255;
  --wcfContentBackground: rgba(240, 242, 245, 1);
  --wcfContentBackground-rgb: 240 242 245;
  --wcfContentBorder: rgba(148, 148, 148, 1);
  --wcfContentBorder-rgb: 148 148 148;
  --wcfContentBorderInner: rgba(224, 224, 224, 1);
  --wcfContentBorderInner-rgb: 224 224 224;
  --wcfContentContainerBackground: rgba(255, 255, 255, 1);
  --wcfContentContainerBackground-rgb: 255 255 255;
  --wcfContentContainerBorder: rgba(255, 255, 255, 1);
  --wcfContentContainerBorder-rgb: 255 255 255;
  --wcfContentDimmedLink: rgba(65, 69, 72, 1);
  --wcfContentDimmedLink-rgb: 65 69 72;
  --wcfContentDimmedLinkActive: rgba(93, 97, 101, 1);
  --wcfContentDimmedLinkActive-rgb: 93 97 101;
  --wcfContentDimmedText: rgba(103, 107, 111, 1);
  --wcfContentDimmedText-rgb: 103 107 111;
  --wcfContentHeadlineBorder: rgba(65, 65, 65, 1);
  --wcfContentHeadlineBorder-rgb: 65 65 65;
  --wcfContentHeadlineLink: rgba(25, 25, 25, 1);
  --wcfContentHeadlineLink-rgb: 25 25 25;
  --wcfContentHeadlineLinkActive: rgba(19, 19, 19, 1);
  --wcfContentHeadlineLinkActive-rgb: 19 19 19;
  --wcfContentHeadlineText: rgba(21, 21, 21, 1);
  --wcfContentHeadlineText-rgb: 21 21 21;
  --wcfContentLink: rgba(10, 10, 10, 1);
  --wcfContentLink-rgb: 10 10 10;
  --wcfContentLinkActive: rgba(113, 113, 113, 1);
  --wcfContentLinkActive-rgb: 113 113 113;
  --wcfContentText: rgba(28, 28, 28, 1);
  --wcfContentText-rgb: 28 28 28;
  --wcfDropdownBackground: rgba(255, 255, 255, 1);
  --wcfDropdownBackground-rgb: 255 255 255;
  --wcfDropdownBackgroundActive: rgba(238, 238, 238, 1);
  --wcfDropdownBackgroundActive-rgb: 238 238 238;
  --wcfDropdownBorderInner: rgba(32, 32, 32, 1);
  --wcfDropdownBorderInner-rgb: 32 32 32;
  --wcfDropdownLink: rgba(33, 33, 33, 1);
  --wcfDropdownLink-rgb: 33 33 33;
  --wcfDropdownLinkActive: rgba(33, 33, 33, 1);
  --wcfDropdownLinkActive-rgb: 33 33 33;
  --wcfDropdownText: rgba(51, 51, 51, 1);
  --wcfDropdownText-rgb: 51 51 51;
  --wcfEditorButtonBackground: rgba(21, 21, 21, 1);
  --wcfEditorButtonBackground-rgb: 21 21 21;
  --wcfEditorButtonBackgroundActive: rgba(69, 69, 69, 1);
  --wcfEditorButtonBackgroundActive-rgb: 69 69 69;
  --wcfEditorButtonText: rgba(255, 255, 255, 1);
  --wcfEditorButtonText-rgb: 255 255 255;
  --wcfEditorButtonTextActive: rgba(255, 255, 255, 1);
  --wcfEditorButtonTextActive-rgb: 255 255 255;
  --wcfEditorButtonTextDisabled: rgba(81, 81, 81, 1);
  --wcfEditorButtonTextDisabled-rgb: 81 81 81;
  --wcfEditorTableBorder: rgba(221, 221, 221, 1);
  --wcfEditorTableBorder-rgb: 221 221 221;
  --wcfFontLineHeight: 1.48;
  --wcfFontSizeDefault: 14px;
  --wcfFontSizeHeadline: 18px;
  --wcfFontSizeSection: 23px;
  --wcfFontSizeSmall: 11px;
  --wcfFontSizeTitle: 28px;
  --wcfFooterBackground: rgba(39, 43, 47, 1);
  --wcfFooterBackground-rgb: 39 43 47;
  --wcfFooterBoxBackground: rgba(240, 242, 245, 1);
  --wcfFooterBoxBackground-rgb: 240 242 245;
  --wcfFooterBoxHeadlineLink: rgba(42, 42, 45, 1);
  --wcfFooterBoxHeadlineLink-rgb: 42 42 45;
  --wcfFooterBoxHeadlineLinkActive: rgba(42, 42, 45, 1);
  --wcfFooterBoxHeadlineLinkActive-rgb: 42 42 45;
  --wcfFooterBoxHeadlineText: rgba(61, 61, 61, 1);
  --wcfFooterBoxHeadlineText-rgb: 61 61 61;
  --wcfFooterBoxLink: rgba(15, 15, 15, 1);
  --wcfFooterBoxLink-rgb: 15 15 15;
  --wcfFooterBoxLinkActive: rgba(76, 76, 76, 1);
  --wcfFooterBoxLinkActive-rgb: 76 76 76;
  --wcfFooterBoxText: rgba(54, 54, 54, 1);
  --wcfFooterBoxText-rgb: 54 54 54;
  --wcfFooterCopyrightBackground: rgba(22, 24, 27, 1);
  --wcfFooterCopyrightBackground-rgb: 22 24 27;
  --wcfFooterCopyrightLink: rgba(124, 124, 124, 1);
  --wcfFooterCopyrightLink-rgb: 124 124 124;
  --wcfFooterCopyrightLinkActive: rgba(255, 255, 255, 1);
  --wcfFooterCopyrightLinkActive-rgb: 255 255 255;
  --wcfFooterCopyrightText: rgba(124, 124, 124, 1);
  --wcfFooterCopyrightText-rgb: 124 124 124;
  --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, 0.7);
  --wcfFooterLink-rgb: 255 255 255;
  --wcfFooterLinkActive: rgba(255, 255, 255, 1);
  --wcfFooterLinkActive-rgb: 255 255 255;
  --wcfFooterText: rgba(234, 234, 234, 1);
  --wcfFooterText-rgb: 234 234 234;
  --wcfHeaderBackground: rgba(22, 24, 27, 1);
  --wcfHeaderBackground-rgb: 22 24 27;
  --wcfHeaderText: rgba(255, 255, 255, 1);
  --wcfHeaderText-rgb: 255 255 255;
  --wcfHeaderLink: rgba(255, 255, 255, 0.8);
  --wcfHeaderLink-rgb: 255 255 255;
  --wcfHeaderLinkActive: rgba(255, 255, 255, 1);
  --wcfHeaderLinkActive-rgb: 255 255 255;
  --wcfHeaderMenuBackground: rgba(255, 255, 255, 1);
  --wcfHeaderMenuBackground-rgb: 255 255 255;
  --wcfHeaderMenuLinkBackground: rgba(255, 255, 255, 1);
  --wcfHeaderMenuLinkBackground-rgb: 255 255 255;
  --wcfHeaderMenuLinkBackgroundActive: rgba(255, 255, 255, 1);
  --wcfHeaderMenuLinkBackgroundActive-rgb: 255 255 255;
  --wcfHeaderMenuLink: rgba(21, 21, 21, 1);
  --wcfHeaderMenuLink-rgb: 21 21 21;
  --wcfHeaderMenuLinkActive: rgba(213, 78, 76, 1);
  --wcfHeaderMenuLinkActive-rgb: 213 78 76;
  --wcfHeaderMenuDropdownBackground: rgba(255, 255, 255, 1);
  --wcfHeaderMenuDropdownBackground-rgb: 255 255 255;
  --wcfHeaderMenuDropdownBackgroundActive: rgba(213, 78, 76, 1);
  --wcfHeaderMenuDropdownBackgroundActive-rgb: 213 78 76;
  --wcfHeaderMenuDropdownLink: rgba(21, 21, 21, 1);
  --wcfHeaderMenuDropdownLink-rgb: 21 21 21;
  --wcfHeaderMenuDropdownLinkActive: rgba(255, 255, 255, 1);
  --wcfHeaderMenuDropdownLinkActive-rgb: 255 255 255;
  --wcfHeaderSearchBoxBackground: rgba(25, 25, 25, 1);
  --wcfHeaderSearchBoxBackground-rgb: 25 25 25;
  --wcfHeaderSearchBoxBackgroundActive: rgba(21, 21, 21, 1);
  --wcfHeaderSearchBoxBackgroundActive-rgb: 21 21 21;
  --wcfHeaderSearchBoxText: rgba(255, 255, 255, 1);
  --wcfHeaderSearchBoxText-rgb: 255 255 255;
  --wcfHeaderSearchBoxTextActive: rgba(255, 255, 255, 1);
  --wcfHeaderSearchBoxTextActive-rgb: 255 255 255;
  --wcfHeaderSearchBoxPlaceholder: rgba(238, 238, 238, 1);
  --wcfHeaderSearchBoxPlaceholder-rgb: 238 238 238;
  --wcfHeaderSearchBoxPlaceholderActive: rgba(81, 81, 81, 1);
  --wcfHeaderSearchBoxPlaceholderActive-rgb: 81 81 81;
  --wcfInputBackground: rgba(255, 255, 255, 1);
  --wcfInputBackground-rgb: 255 255 255;
  --wcfInputBackgroundActive: rgba(255, 255, 255, 1);
  --wcfInputBackgroundActive-rgb: 255 255 255;
  --wcfInputBorder: rgba(201, 201, 201, 1);
  --wcfInputBorder-rgb: 201 201 201;
  --wcfInputBorderActive: rgba(109, 109, 109, 1);
  --wcfInputBorderActive-rgb: 109 109 109;
  --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(229, 6, 6, 1);
  --wcfInputLabel-rgb: 229 6 6;
  --wcfInputText: rgba(51, 51, 51, 1);
  --wcfInputText-rgb: 51 51 51;
  --wcfInputTextActive: rgba(31, 31, 31, 1);
  --wcfInputTextActive-rgb: 31 31 31;
  --wcfInputPlaceholder: rgba(169, 169, 169, 1);
  --wcfInputPlaceholder-rgb: 169 169 169;
  --wcfInputPlaceholderActive: rgba(229, 229, 229, 1);
  --wcfInputPlaceholderActive-rgb: 229 229 229;
  --wcfLayoutFixedWidth: 1200px;
  --wcfLayoutMaxWidth: 90%;
  --wcfLayoutMinWidth: 980px;
  --wcfNavigationBackground: rgba(15, 25, 32, 1);
  --wcfNavigationBackground-rgb: 15 25 32;
  --wcfNavigationLink: rgba(21, 21, 21, 1);
  --wcfNavigationLink-rgb: 21 21 21;
  --wcfNavigationLinkActive: rgba(21, 21, 21, 0.8);
  --wcfNavigationLinkActive-rgb: 21 21 21;
  --wcfNavigationText: rgba(21, 21, 21, 1);
  --wcfNavigationText-rgb: 21 21 21;
  --wcfPageThemeColor: rgba(22, 24, 27, 1);
  --wcfPageThemeColor-rgb: 22 24 27;
  --wcfSidebarBackground: rgba(255, 255, 255, 1);
  --wcfSidebarBackground-rgb: 255 255 255;
  --wcfSidebarDimmedLink: rgba(20, 20, 20, 1);
  --wcfSidebarDimmedLink-rgb: 20 20 20;
  --wcfSidebarDimmedLinkActive: rgba(145, 145, 145, 1);
  --wcfSidebarDimmedLinkActive-rgb: 145 145 145;
  --wcfSidebarDimmedText: rgba(139, 139, 139, 1);
  --wcfSidebarDimmedText-rgb: 139 139 139;
  --wcfSidebarHeadlineLink: rgba(255, 255, 255, 1);
  --wcfSidebarHeadlineLink-rgb: 255 255 255;
  --wcfSidebarHeadlineLinkActive: rgba(255, 255, 255, 1);
  --wcfSidebarHeadlineLinkActive-rgb: 255 255 255;
  --wcfSidebarHeadlineText: rgba(255, 255, 255, 1);
  --wcfSidebarHeadlineText-rgb: 255 255 255;
  --wcfSidebarLink: rgba(14, 14, 14, 1);
  --wcfSidebarLink-rgb: 14 14 14;
  --wcfSidebarLinkActive: rgba(93, 93, 93, 1);
  --wcfSidebarLinkActive-rgb: 93 93 93;
  --wcfSidebarText: rgba(60, 60, 60, 1);
  --wcfSidebarText-rgb: 60 60 60;
  --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(252, 252, 252, 1);
  --wcfTabularBoxBackgroundActive-rgb: 252 252 252;
  --wcfTabularBoxBorderInner: rgba(238, 238, 238, 1);
  --wcfTabularBoxBorderInner-rgb: 238 238 238;
  --wcfTabularBoxHeadline: rgba(255, 255, 255, 1);
  --wcfTabularBoxHeadline-rgb: 255 255 255;
  --wcfTabularBoxHeadlineActive: rgba(255, 255, 255, 1);
  --wcfTabularBoxHeadlineActive-rgb: 255 255 255;
  --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(247, 247, 247, 1);
  --wcfUserMenuBackgroundActive-rgb: 247 247 247;
  --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(49, 138, 220, 1);
  --wcfUserMenuIndicator-rgb: 49 138 220;
  --wcfUserMenuBorder: rgba(236, 236, 236, 1);
  --wcfUserMenuBorder-rgb: 236 236 236;
  --wcfSidebarBorder: rgba(255, 255, 255, 1);
  --wcfSidebarBorder-rgb: 255 255 255;
  --wcfHeaderMenuDropdownBorder: rgba(255, 255, 255, 1);
  --wcfHeaderMenuDropdownBorder-rgb: 255 255 255;
  --wcfToggleButtonBackground: rgba(105, 109, 114, 1);
  --wcfToggleButtonBackground-rgb: 105 109 114;
  --wcfToggleButtonBackgroundActive: rgba(60, 118, 61, 1);
  --wcfToggleButtonBackgroundActive-rgb: 60 118 61;
  --wcfToggleButtonSliderBackground: rgba(250, 250, 250, 1);
  --wcfToggleButtonSliderBackground-rgb: 250 250 250;
  --wcfToggleButtonSliderBackgroundActive: rgba(250, 250, 250, 1);
  --wcfToggleButtonSliderBackgroundActive-rgb: 250 250 250;
  --wcfFontFamily: var(--font-clash);
  --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;
  --wcfBoxShadowImageButton: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

html[data-color-scheme=dark] {
  --wcfButtonBackground: rgba(38, 43, 54, 1);
  --wcfButtonBackground-rgb: 38 43 54;
  --wcfButtonBackgroundActive: rgba(35, 40, 52, 1);
  --wcfButtonBackgroundActive-rgb: 35 40 52;
  --wcfButtonDisabledBackground: rgba(22, 26, 34, 1);
  --wcfButtonDisabledBackground-rgb: 22 26 34;
  --wcfButtonDisabledText: rgba(40, 47, 57, 1);
  --wcfButtonDisabledText-rgb: 40 47 57;
  --wcfButtonPrimaryBackground: rgba(1, 87, 155, 1);
  --wcfButtonPrimaryBackground-rgb: 1 87 155;
  --wcfButtonPrimaryBackgroundActive: rgba(1, 75, 132, 1);
  --wcfButtonPrimaryBackgroundActive-rgb: 1 75 132;
  --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(14, 17, 22, 1);
  --wcfContentBackground-rgb: 14 17 22;
  --wcfContentBorder: rgba(39, 44, 52, 1);
  --wcfContentBorder-rgb: 39 44 52;
  --wcfContentBorderInner: rgba(34, 39, 49, 1);
  --wcfContentBorderInner-rgb: 34 39 49;
  --wcfContentContainerBackground: rgba(20, 24, 31, 1);
  --wcfContentContainerBackground-rgb: 20 24 31;
  --wcfContentContainerBorder: rgba(20, 24, 31, 1);
  --wcfContentContainerBorder-rgb: 20 24 31;
  --wcfContentDimmedLink: rgba(221, 222, 223, 1);
  --wcfContentDimmedLink-rgb: 221 222 223;
  --wcfContentDimmedLinkActive: rgba(138, 140, 143, 1);
  --wcfContentDimmedLinkActive-rgb: 138 140 143;
  --wcfContentDimmedText: rgba(138, 140, 143, 1);
  --wcfContentDimmedText-rgb: 138 140 143;
  --wcfContentHeadlineBorder: rgba(54, 55, 59, 1);
  --wcfContentHeadlineBorder-rgb: 54 55 59;
  --wcfContentHeadlineLink: rgba(242, 242, 243, 1);
  --wcfContentHeadlineLink-rgb: 242 242 243;
  --wcfContentHeadlineLinkActive: rgba(224, 224, 224, 1);
  --wcfContentHeadlineLinkActive-rgb: 224 224 224;
  --wcfContentHeadlineText: rgba(209, 210, 211, 1);
  --wcfContentHeadlineText-rgb: 209 210 211;
  --wcfContentLink: rgba(255, 255, 255, 1);
  --wcfContentLink-rgb: 255 255 255;
  --wcfContentLinkActive: rgba(204, 204, 204, 1);
  --wcfContentLinkActive-rgb: 204 204 204;
  --wcfContentText: rgba(217, 217, 217, 1);
  --wcfContentText-rgb: 217 217 217;
  --wcfDropdownBackground: rgba(54, 62, 78, 1);
  --wcfDropdownBackground-rgb: 54 62 78;
  --wcfDropdownBackgroundActive: rgba(69, 79, 99, 1);
  --wcfDropdownBackgroundActive-rgb: 69 79 99;
  --wcfDropdownBorderInner: rgba(94, 107, 135, 1);
  --wcfDropdownBorderInner-rgb: 94 107 135;
  --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(50, 56, 70, 1);
  --wcfEditorButtonBackground-rgb: 50 56 70;
  --wcfEditorButtonBackgroundActive: rgba(44, 50, 63, 1);
  --wcfEditorButtonBackgroundActive-rgb: 44 50 63;
  --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(32, 39, 50, 1);
  --wcfEditorTableBorder-rgb: 32 39 50;
  --wcfFooterBackground: rgba(20, 24, 31, 1);
  --wcfFooterBackground-rgb: 20 24 31;
  --wcfFooterBoxBackground: rgba(14, 17, 22, 1);
  --wcfFooterBoxBackground-rgb: 14 17 22;
  --wcfFooterBoxHeadlineLink: rgba(255, 255, 255, 1);
  --wcfFooterBoxHeadlineLink-rgb: 255 255 255;
  --wcfFooterBoxHeadlineLinkActive: rgba(222, 222, 222, 1);
  --wcfFooterBoxHeadlineLinkActive-rgb: 222 222 222;
  --wcfFooterBoxHeadlineText: rgba(255, 255, 255, 1);
  --wcfFooterBoxHeadlineText-rgb: 255 255 255;
  --wcfFooterBoxLink: rgba(255, 255, 255, 1);
  --wcfFooterBoxLink-rgb: 255 255 255;
  --wcfFooterBoxLinkActive: rgba(199, 199, 199, 1);
  --wcfFooterBoxLinkActive-rgb: 199 199 199;
  --wcfFooterBoxText: rgba(184, 184, 184, 1);
  --wcfFooterBoxText-rgb: 184 184 184;
  --wcfFooterCopyrightBackground: rgba(20, 24, 31, 1);
  --wcfFooterCopyrightBackground-rgb: 20 24 31;
  --wcfFooterCopyrightLink: rgba(242, 242, 243, 1);
  --wcfFooterCopyrightLink-rgb: 242 242 243;
  --wcfFooterCopyrightLinkActive: rgba(154, 162, 167, 1);
  --wcfFooterCopyrightLinkActive-rgb: 154 162 167;
  --wcfFooterCopyrightText: rgba(190, 192, 193, 1);
  --wcfFooterCopyrightText-rgb: 190 192 193;
  --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(186, 186, 186, 1);
  --wcfFooterLink-rgb: 186 186 186;
  --wcfFooterLinkActive: rgba(255, 255, 255, 1);
  --wcfFooterLinkActive-rgb: 255 255 255;
  --wcfFooterText: rgba(201, 201, 201, 1);
  --wcfFooterText-rgb: 201 201 201;
  --wcfHeaderBackground: rgba(28, 34, 43, 1);
  --wcfHeaderBackground-rgb: 28 34 43;
  --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(14, 17, 22, 1);
  --wcfHeaderMenuBackground-rgb: 14 17 22;
  --wcfHeaderMenuLinkBackground: rgba(14, 17, 22, 0);
  --wcfHeaderMenuLinkBackground-rgb: 14 17 22;
  --wcfHeaderMenuLinkBackgroundActive: rgba(14, 17, 22, 0);
  --wcfHeaderMenuLinkBackgroundActive-rgb: 14 17 22;
  --wcfHeaderMenuLink: rgba(219, 219, 219, 1);
  --wcfHeaderMenuLink-rgb: 219 219 219;
  --wcfHeaderMenuLinkActive: rgba(255, 255, 255, 1);
  --wcfHeaderMenuLinkActive-rgb: 255 255 255;
  --wcfHeaderMenuDropdownBackground: rgba(34, 40, 53, 1);
  --wcfHeaderMenuDropdownBackground-rgb: 34 40 53;
  --wcfHeaderMenuDropdownBackgroundActive: rgba(45, 55, 73, 1);
  --wcfHeaderMenuDropdownBackgroundActive-rgb: 45 55 73;
  --wcfHeaderMenuDropdownLink: rgba(219, 219, 219, 1);
  --wcfHeaderMenuDropdownLink-rgb: 219 219 219;
  --wcfHeaderMenuDropdownLinkActive: rgba(255, 255, 255, 1);
  --wcfHeaderMenuDropdownLinkActive-rgb: 255 255 255;
  --wcfHeaderSearchBoxBackground: rgba(38, 46, 62, 1);
  --wcfHeaderSearchBoxBackground-rgb: 38 46 62;
  --wcfHeaderSearchBoxBackgroundActive: rgba(38, 46, 62, 1);
  --wcfHeaderSearchBoxBackgroundActive-rgb: 38 46 62;
  --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(11, 14, 18, 1);
  --wcfInputBackground-rgb: 11 14 18;
  --wcfInputBackgroundActive: rgba(14, 17, 22, 1);
  --wcfInputBackgroundActive-rgb: 14 17 22;
  --wcfInputBorder: rgba(22, 26, 34, 1);
  --wcfInputBorder-rgb: 22 26 34;
  --wcfInputBorderActive: rgba(25, 32, 41, 1);
  --wcfInputBorderActive-rgb: 25 32 41;
  --wcfInputDisabledBackground: rgba(14, 17, 22, 1);
  --wcfInputDisabledBackground-rgb: 14 17 22;
  --wcfInputDisabledBorder: rgba(22, 27, 34, 1);
  --wcfInputDisabledBorder-rgb: 22 27 34;
  --wcfInputDisabledText: rgba(111, 117, 128, 1);
  --wcfInputDisabledText-rgb: 111 117 128;
  --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(255, 255, 255, 1);
  --wcfNavigationBackground-rgb: 255 255 255;
  --wcfNavigationLink: rgba(124, 131, 137, 1);
  --wcfNavigationLink-rgb: 124 131 137;
  --wcfNavigationLinkActive: rgba(183, 186, 190, 1);
  --wcfNavigationLinkActive-rgb: 183 186 190;
  --wcfNavigationText: rgba(124, 131, 137, 1);
  --wcfNavigationText-rgb: 124 131 137;
  --wcfPageThemeColor: rgba(28, 34, 43, 1);
  --wcfPageThemeColor-rgb: 28 34 43;
  --wcfSidebarBackground: rgba(20, 24, 31, 1);
  --wcfSidebarBackground-rgb: 20 24 31;
  --wcfSidebarDimmedLink: rgba(164, 166, 168, 1);
  --wcfSidebarDimmedLink-rgb: 164 166 168;
  --wcfSidebarDimmedLinkActive: rgba(111, 114, 118, 1);
  --wcfSidebarDimmedLinkActive-rgb: 111 114 118;
  --wcfSidebarDimmedText: rgba(111, 114, 118, 1);
  --wcfSidebarDimmedText-rgb: 111 114 118;
  --wcfSidebarHeadlineLink: rgba(255, 255, 255, 1);
  --wcfSidebarHeadlineLink-rgb: 255 255 255;
  --wcfSidebarHeadlineLinkActive: rgba(255, 255, 255, 1);
  --wcfSidebarHeadlineLinkActive-rgb: 255 255 255;
  --wcfSidebarHeadlineText: rgba(255, 255, 255, 1);
  --wcfSidebarHeadlineText-rgb: 255 255 255;
  --wcfSidebarLink: rgba(255, 255, 255, 1);
  --wcfSidebarLink-rgb: 255 255 255;
  --wcfSidebarLinkActive: rgba(209, 209, 209, 1);
  --wcfSidebarLinkActive-rgb: 209 209 209;
  --wcfSidebarText: rgba(166, 166, 166, 1);
  --wcfSidebarText-rgb: 166 166 166;
  --wcfStatusErrorBackground: rgba(139, 21, 9, 1);
  --wcfStatusErrorBackground-rgb: 139 21 9;
  --wcfStatusErrorBorder: rgba(156, 26, 12, 1);
  --wcfStatusErrorBorder-rgb: 156 26 12;
  --wcfStatusErrorLink: rgba(255, 255, 255, 1);
  --wcfStatusErrorLink-rgb: 255 255 255;
  --wcfStatusErrorLinkActive: rgba(224, 207, 204, 1);
  --wcfStatusErrorLinkActive-rgb: 224 207 204;
  --wcfStatusErrorText: rgba(224, 207, 204, 1);
  --wcfStatusErrorText-rgb: 224 207 204;
  --wcfStatusInfoBackground: rgba(4, 58, 100, 1);
  --wcfStatusInfoBackground-rgb: 4 58 100;
  --wcfStatusInfoBorder: rgba(5, 70, 120, 1);
  --wcfStatusInfoBorder-rgb: 5 70 120;
  --wcfStatusInfoLink: rgba(255, 255, 255, 1);
  --wcfStatusInfoLink-rgb: 255 255 255;
  --wcfStatusInfoLinkActive: rgba(210, 220, 223, 1);
  --wcfStatusInfoLinkActive-rgb: 210 220 223;
  --wcfStatusInfoText: rgba(210, 220, 223, 1);
  --wcfStatusInfoText-rgb: 210 220 223;
  --wcfStatusSuccessBackground: rgba(43, 104, 30, 1);
  --wcfStatusSuccessBackground-rgb: 43 104 30;
  --wcfStatusSuccessBorder: rgba(51, 120, 37, 1);
  --wcfStatusSuccessBorder-rgb: 51 120 37;
  --wcfStatusSuccessLink: rgba(255, 255, 255, 1);
  --wcfStatusSuccessLink-rgb: 255 255 255;
  --wcfStatusSuccessLinkActive: rgba(192, 221, 193, 1);
  --wcfStatusSuccessLinkActive-rgb: 192 221 193;
  --wcfStatusSuccessText: rgba(192, 221, 193, 1);
  --wcfStatusSuccessText-rgb: 192 221 193;
  --wcfStatusWarningBackground: rgba(201, 129, 18, 1);
  --wcfStatusWarningBackground-rgb: 201 129 18;
  --wcfStatusWarningBorder: rgba(224, 145, 24, 1);
  --wcfStatusWarningBorder-rgb: 224 145 24;
  --wcfStatusWarningLink: rgba(11, 8, 5, 1);
  --wcfStatusWarningLink-rgb: 11 8 5;
  --wcfStatusWarningLinkActive: rgba(48, 38, 18, 1);
  --wcfStatusWarningLinkActive-rgb: 48 38 18;
  --wcfStatusWarningText: rgba(48, 38, 18, 1);
  --wcfStatusWarningText-rgb: 48 38 18;
  --wcfTabularBoxBackgroundActive: rgba(19, 23, 30, 1);
  --wcfTabularBoxBackgroundActive-rgb: 19 23 30;
  --wcfTabularBoxBorderInner: rgba(34, 41, 53, 1);
  --wcfTabularBoxBorderInner-rgb: 34 41 53;
  --wcfTabularBoxHeadline: rgba(255, 255, 255, 1);
  --wcfTabularBoxHeadline-rgb: 255 255 255;
  --wcfTabularBoxHeadlineActive: rgba(224, 224, 224, 1);
  --wcfTabularBoxHeadlineActive-rgb: 224 224 224;
  --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(21, 25, 32, 1);
  --wcfUserMenuBackground-rgb: 21 25 32;
  --wcfUserMenuBackgroundActive: rgba(26, 31, 40, 1);
  --wcfUserMenuBackgroundActive-rgb: 26 31 40;
  --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(34, 41, 52, 1);
  --wcfUserMenuBorder-rgb: 34 41 52;
  --wcfSidebarBorder: rgba(20, 24, 31, 1);
  --wcfSidebarBorder-rgb: 20 24 31;
  --wcfHeaderMenuDropdownBorder: rgba(26, 31, 39, 1);
  --wcfHeaderMenuDropdownBorder-rgb: 26 31 39;
  --wcfToggleButtonBackground: rgba(89, 89, 89, 1);
  --wcfToggleButtonBackground-rgb: 89 89 89;
  --wcfToggleButtonBackgroundActive: rgba(0, 113, 84, 1);
  --wcfToggleButtonBackgroundActive-rgb: 0 113 84;
  --wcfToggleButtonSliderBackground: rgba(203, 203, 203, 1);
  --wcfToggleButtonSliderBackground-rgb: 203 203 203;
  --wcfToggleButtonSliderBackgroundActive: rgba(203, 203, 203, 1);
  --wcfToggleButtonSliderBackgroundActive-rgb: 203 203 203;
}

/**
 * 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 */
.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: rgb(255, 255, 102);
}
.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: hsla(0, 0%, 100%, 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);
}

.inlineCode,
.ck-content *:not(pre) > code,
kbd {
  background-color: rgb(255, 255, 255) !important;
  border: 1px solid rgb(196, 196, 196) !important;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: rgb(68, 68, 68) !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;
}

.quoteBox.collapsed .quoteBoxContent {
  display: -webkit-box;
  grid-area: content;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.quoteBox.quoteBox--tabMenu {
  grid-template-areas: "icon    title   buttons" "content content content";
  grid-template-columns: 24px auto minmax(0, min-content);
  margin: 0;
}

.quoteBox.quoteBox--tabMenu + .quoteBox.quoteBox--tabMenu {
  margin-top: 10px;
}

.quoteBoxButtons {
  align-self: center;
  column-gap: 5px;
  display: flex;
  justify-content: end;
  grid-area: buttons;
  white-space: nowrap;
}

.quoteBox.quoteBox--tabMenu :is(.quoteBoxIcon, .quoteBoxTitle) {
  align-self: center;
}

.quoteBox.quoteBox--tabMenu .quoteBoxContent {
  pointer-events: none !important;
}

.quoteBox__bulk__actions {
  display: flex;
  gap: 5px;
  justify-content: end;
  margin-bottom: 10px;
}

@media screen and (max-width: 544px) {
  .messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.messageTabMenuContent--quotes.active {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.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;
  gap: 5px;
}
.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 .tag {
  align-items: center;
  background-color: var(--wcfButtonBackground);
  border-radius: 999px;
  color: var(--wcfButtonText);
  display: flex;
  gap: 3px;
  padding: 2px 10px;
  text-decoration: none;
  font-weight: 400;
}
@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 7 Free: Regular */
@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block !important;
  src: url("../font/fa-regular-400.woff2?v=7.2.0") format("woff2");
}
/* Font Awesome 7 Free: Solid */
@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block !important;
  src: url("../font/fa-solid-900.woff2?v=7.2.0") 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 7 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);
}
@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 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);
}
@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 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 {
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 1.28;
}
@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;
}

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;
  }
}
@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) {
  .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;
  }
}
@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) {
  .containerList > li .buttonGroupNavigation > .buttonList .scrollableDropdownMenu {
    max-height: 300px;
    overflow: auto;
  }
  .containerList > li .buttonGroupNavigation > .buttonList .scrollableDropdownMenu.forceScrollbar {
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .containerList > li .buttonGroupNavigation > .buttonList .dropdownMenu.pageHeaderSearchDropdown {
    transform: translateY(-10px);
  }
}
@media screen and (max-width: 1024px) {
  .containerList > li .buttonGroupNavigation > .buttonList > li .invisible {
    display: inline;
    padding-left: 5px;
  }
}
@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: 33.3333333333%;
  }
  .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: 33.3333333333%;
  }
}

.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 {
  .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;
  }
  /* Firefox */
}
@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;
  }
}
@media screen and (min-width: 769px), print {
  @-moz-document url-prefix() {
    .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li {
      display: block;
      overflow: hidden;
    }
  }
}
.styleListPreviewImage {
  text-align: center;
}
.styleListPreviewImage img {
  border-radius: var(--wcfBorderRadius);
}

@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;
}
.contentHeader .contentHeaderIcon {
  flex: 0 0 64px;
  margin-right: 15px;
}
.contentHeader .contentHeaderTitle,
.contentHeader > .contentTitle {
  flex: 1 auto;
}
.contentHeader .contentHeaderNavigation {
  flex: 0 0 auto;
  margin-left: 15px;
}
.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 {
  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 > ul > li {
  display: flex;
}
.contentHeader .contentHeaderNavigation .button {
  display: flex;
  margin-left: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contentHeader .contentHeaderNavigation .dropdown {
  display: flex;
  margin-left: 5px;
  margin-bottom: 5px;
}
.contentHeader .contentHeaderNavigation .dropdown .button {
  margin-left: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .contentHeader {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .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;
  margin-top: 20px;
}

.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;
  max-width: 100%;
}

.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 {
  container-type: inline-size;
  container-name: content;
}
.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 */
  .contentNavigation > .pagination {
    display: none;
  }
  /* DEPRECATED */
  .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;
  }
}
.contentInteraction--withTabs {
  border-bottom: solid 1px var(--wcfContentBorderInner);
}

.contentInteractionTabs {
  display: flex;
  gap: 10px;
}

.contentInteractionTab {
  display: flex;
  white-space: nowrap;
}

.contentInteractionTab__link {
  display: flex;
  padding: 5px 10px;
  color: var(--wcfContentDimmedText);
  font-size: var(--wcfFontSizeSection);
  font-weight: 600;
  position: relative;
}

.contentInteractionTab__link::after {
  content: "";
  left: 0;
  right: 0;
  bottom: -1px;
  position: absolute;
  height: 3px;
}

.contentInteractionTab--active .contentInteractionTab__link {
  color: var(--wcfContentText);
}

.contentInteractionTab__link:hover {
  color: var(--wcfContentText);
}

.contentInteractionTab__link:hover::after {
  background-color: var(--wcfContentBorderInner);
}

.contentInteractionTab--active .contentInteractionTab__link::after {
  background-color: var(--wcfTabularBoxHeadline);
}

@container content (width < 800px) {
  .contentInteraction {
    flex-direction: column;
  }
  .contentInteractionButtonContainer {
    order: -1;
  }
}
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=time],
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=time],
  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=time],
  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=time]:focus,
input[type=time]: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=time][disabled],
input[type=time].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=time][readonly],
input[type=url][readonly],
select[readonly],
textarea[readonly] {
  color: var(--wcfInputDisabledText) !important;
}

select.disabled[tabindex="-1"] {
  pointer-events: none;
  user-select: none;
}

/* 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=time]::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=time]::placeholder:focus,
input[type=time]::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=time][disabled],
input[type=time][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;
  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=time],
  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 */
  opacity: 1;
}

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: rgb(204, 0, 1) !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: rgb(224, 224, 224);
  --score-0: #dd2c00;
  --score-1: #ff9100;
  --score-2: #cddc39;
  --score-3: #64dd17;
  --score-4: #2e7d32;
  background-color: var(--background-color);
  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: var(--score-0);
  width: 5%;
}
.passwordStrengthScore[data-score="1"]::before {
  background-color: var(--score-1);
  width: 20%;
}
.passwordStrengthScore[data-score="2"]::before {
  background-color: var(--score-2);
  width: 50%;
}
.passwordStrengthScore[data-score="3"]::before {
  background-color: var(--score-3);
  width: 85%;
}
.passwordStrengthScore[data-score="4"]::before {
  background-color: var(--score-4);
  width: 100%;
}

html[data-color-scheme=dark] .passwordStrengthScore {
  --background-color: rgb(43 57 74);
  --score-0: #dd2c00;
  --score-1: #ef6c00;
  --score-2: #f9a825;
  --score-3: #689f38;
  --score-4: #1b5e20;
}

.selectOptionsList {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.selectOptionsListItem {
  align-items: center;
  column-gap: 5px;
  display: flex;
}

.selectOptionsListItem__inputContainer {
  align-items: center;
  display: flex;
  gap: 5px;
}

.selectOptionsList + .selectOptionsListItem__addItem {
  margin-top: 10px;
}

@media screen and (max-width: 544px) {
  .selectOptionsList {
    gap: 10px;
  }
  .selectOptionsListItem {
    column-gap: 10px;
  }
  .selectOptionsListItem__inputContainer {
    display: grid;
    grid-template-columns: 1fr max-content;
  }
  .selectOptionsListItem__inputContainer > :last-child {
    grid-column: 1/3;
  }
}
.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, .conversationParticipantList > li.conversationLeft > div > a > img,
.conversationParticipantList > li.conversationLeft > div > span > img {
  -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, .messageSignature > div::before, .messageBody > .messageText::before, .ck.ck-content.ck-editor__editable::before, .htmlContent::after, .messageSignature > div::after, .messageBody > .messageText::after, .ck.ck-content.ck-editor__editable::after {
  display: table;
  content: "";
}
.htmlContent::after, .messageSignature > div::after, .messageBody > .messageText::after, .ck.ck-content.ck-editor__editable::after {
  clear: both;
}
.htmlContent img, .messageSignature > div img, .messageBody > .messageText img, .ck.ck-content.ck-editor__editable img {
  height: auto;
  max-width: 100%;
}
.htmlContent > :first-child, .messageSignature > div > :first-child, .messageBody > .messageText > :first-child, .ck.ck-content.ck-editor__editable > :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), .messageSignature > div > :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), .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) {
  margin-top: 0 !important;
}
.htmlContent > :last-child, .messageSignature > div > :last-child, .messageBody > .messageText > :last-child, .ck.ck-content.ck-editor__editable > :last-child {
  margin-bottom: 0 !important;
}
.htmlContent p, .messageSignature > div p, .messageBody > .messageText p, .ck.ck-content.ck-editor__editable p {
  margin: 1em 0;
}
.htmlContent li > :first-child, .messageSignature > div li > :first-child, .messageBody > .messageText li > :first-child, .ck.ck-content.ck-editor__editable li > :first-child {
  margin-top: 0 !important;
}
.htmlContent li > :last-child, .messageSignature > div li > :last-child, .messageBody > .messageText li > :last-child, .ck.ck-content.ck-editor__editable li > :last-child {
  margin-bottom: 0 !important;
}
.htmlContent h1, .messageSignature > div h1, .messageBody > .messageText h1, .ck.ck-content.ck-editor__editable h1 {
  font-weight: 600;
  line-height: 1.05;
}
@media screen and (min-width: 769px), print {
  .htmlContent h1, .messageSignature > div h1, .messageBody > .messageText h1, .ck.ck-content.ck-editor__editable h1 {
    font-size: var(--wcfFontSizeTitle);
  }
}
@media screen and (max-width: 768px) {
  .htmlContent h1, .messageSignature > div h1, .messageBody > .messageText h1, .ck.ck-content.ck-editor__editable h1 {
    font-size: 23px;
  }
}
.htmlContent h2, .messageSignature > div h2, .messageBody > .messageText h2, .ck.ck-content.ck-editor__editable h2 {
  font-weight: 600;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .htmlContent h2, .messageSignature > div h2, .messageBody > .messageText h2, .ck.ck-content.ck-editor__editable h2 {
    font-size: var(--wcfFontSizeSection);
  }
}
@media screen and (max-width: 768px) {
  .htmlContent h2, .messageSignature > div h2, .messageBody > .messageText h2, .ck.ck-content.ck-editor__editable h2 {
    font-size: 20px;
  }
}
.htmlContent h3, .messageSignature > div h3, .messageBody > .messageText h3, .ck.ck-content.ck-editor__editable h3 {
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .htmlContent h3, .messageSignature > div h3, .messageBody > .messageText h3, .ck.ck-content.ck-editor__editable h3 {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .htmlContent h3, .messageSignature > div h3, .messageBody > .messageText h3, .ck.ck-content.ck-editor__editable h3 {
    font-size: 18px;
  }
}
.htmlContent h3, .messageSignature > div h3, .messageBody > .messageText h3, .ck.ck-content.ck-editor__editable h3 {
  font-weight: 600;
}
.htmlContent h4, .messageSignature > div h4, .messageBody > .messageText h4, .ck.ck-content.ck-editor__editable h4 {
  font-weight: 600;
}
.htmlContent h1, .messageSignature > div h1, .messageBody > .messageText h1, .ck.ck-content.ck-editor__editable h1,
.htmlContent h2,
.messageSignature > div h2,
.messageBody > .messageText h2,
.ck.ck-content.ck-editor__editable h2,
.htmlContent h3,
.messageSignature > div h3,
.messageBody > .messageText h3,
.ck.ck-content.ck-editor__editable h3,
.htmlContent h4,
.messageSignature > div h4,
.messageBody > .messageText h4,
.ck.ck-content.ck-editor__editable h4,
.htmlContent h5,
.messageSignature > div h5,
.messageBody > .messageText h5,
.ck.ck-content.ck-editor__editable h5,
.htmlContent h6,
.messageSignature > div h6,
.messageBody > .messageText h6,
.ck.ck-content.ck-editor__editable h6 {
  margin: 1.5em 0 1em 0;
}
.htmlContent ul, .messageSignature > div ul, .messageBody > .messageText ul, .ck.ck-content.ck-editor__editable ul,
.htmlContent ol,
.messageSignature > div ol,
.messageBody > .messageText ol,
.ck.ck-content.ck-editor__editable ol {
  margin: 1em 0 1em 40px;
}
.htmlContent ul ul, .messageSignature > div ul ul, .messageBody > .messageText ul ul, .ck.ck-content.ck-editor__editable ul ul,
.htmlContent ul ol,
.messageSignature > div ul ol,
.messageBody > .messageText ul ol,
.ck.ck-content.ck-editor__editable ul ol,
.htmlContent ol ul,
.messageSignature > div ol ul,
.messageBody > .messageText ol ul,
.ck.ck-content.ck-editor__editable ol ul,
.htmlContent ol ol,
.messageSignature > div ol ol,
.messageBody > .messageText ol ol,
.ck.ck-content.ck-editor__editable ol ol {
  margin-bottom: 0;
  margin-top: 0;
}
.htmlContent ul li, .messageSignature > div ul li, .messageBody > .messageText ul li, .ck.ck-content.ck-editor__editable ul li,
.htmlContent ol li,
.messageSignature > div ol li,
.messageBody > .messageText ol li,
.ck.ck-content.ck-editor__editable ol li {
  margin: 5px 0;
}
.htmlContent ul, .messageSignature > div ul, .messageBody > .messageText ul, .ck.ck-content.ck-editor__editable ul {
  list-style-type: disc;
}
.htmlContent ol, .messageSignature > div ol, .messageBody > .messageText ol, .ck.ck-content.ck-editor__editable ol {
  list-style-type: decimal;
}
.htmlContent td > :first-child, .messageSignature > div td > :first-child, .messageBody > .messageText td > :first-child, .ck.ck-content.ck-editor__editable td > :first-child,
.htmlContent th > :first-child,
.messageSignature > div th > :first-child,
.messageBody > .messageText th > :first-child,
.ck.ck-content.ck-editor__editable th > :first-child {
  margin-top: 0 !important;
}
.htmlContent td > :last-child, .messageSignature > div td > :last-child, .messageBody > .messageText td > :last-child, .ck.ck-content.ck-editor__editable td > :last-child,
.htmlContent th > :last-child,
.messageSignature > div th > :last-child,
.messageBody > .messageText th > :last-child,
.ck.ck-content.ck-editor__editable th > :last-child {
  margin-bottom: 0 !important;
}
.htmlContent figure.image, .messageSignature > div figure.image, .messageBody > .messageText figure.image, .ck.ck-content.ck-editor__editable 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, .messageSignature > div figure.image.image-style-side-left, .messageBody > .messageText figure.image.image-style-side-left, .ck.ck-content.ck-editor__editable figure.image.image-style-side-left {
  float: left;
  margin: 0 20px 20px 0;
}
.htmlContent figure.image.image-style-side, .messageSignature > div figure.image.image-style-side, .messageBody > .messageText figure.image.image-style-side, .ck.ck-content.ck-editor__editable figure.image.image-style-side {
  float: right;
  margin: 0 0 20px 20px;
}

.containerContent hr,
.htmlContent hr,
.messageSignature > div hr,
.messageBody > .messageText hr,
.ck.ck-content.ck-editor__editable 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 {
  border-radius: 5px;
  display: grid;
  position: relative;
}
.gridListItem:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wcfContentBorderInner);
}

.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;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .gridListItemTitle {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .gridListItemTitle {
    font-size: 18px;
  }
}

.gridListItemMeta {
  color: var(--wcfContentDimmedText);
  grid-area: meta;
}
.gridListItemMeta a,
.gridListItemMeta a:hover,
.gridListItemMeta a:focus {
  color: inherit;
  pointer-events: none;
}

.gridListItemType {
  color: var(--wcfContentDimmedText);
  grid-area: type;
  justify-self: end;
  white-space: nowrap;
}

.gridListItemContent {
  grid-area: content;
  margin-top: 10px;
}

.gridListItemLink {
  color: inherit;
}
.gridListItemLink::before {
  content: "";
  inset: 0;
  position: absolute;
}
.gridListItemLink:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media screen and (max-width: 544px) {
  .gridListItemMessage {
    grid-template-areas: "image   title" "image   meta" "content content";
    grid-template-columns: 48px auto;
  }
  .gridListItemType {
    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: 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);
}

/*
	CSS hack to target only Safari.
	Taken from https://browserstrangeness.github.io/css_hacks.html#safari
*/
@supports (font: -apple-system-body) {
  .sideBySide.templateDiff .nativeList {
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }
}
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);
}

.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;
  z-index: 1;
}
.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 */
_:-webkit-full-screen:not(:root:root),
.pageHeaderPanel > .layoutBoundary {
  transform: translateZ(0);
}

/* 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;
}
.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(.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.dropdownOpen > a, .userPanel > ul > li.open > a, .userPanel > ul > li:hover > a {
  background-color: var(--wcfHeaderMenuLinkBackgroundActive);
  color: var(--wcfHeaderMenuLinkActive);
}

/* 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: rgb(244, 67, 54);
    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 **/
  *,
  ::after,
  ::before {
    background: 0 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
  /** hide obsolete elements **/
  /* general elements */
  .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 {
    display: none !important;
  }
  /** minor optimizations **/
  .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;
  }
  /* see https://bugzilla.mozilla.org/show_bug.cgi?id=939897 */
  .pageContainer,
  .main > div {
    display: block !important;
  }
}
/* @deprecated 6.2 Use `sidebarListItem` instead */
.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:hover,
.sidebar .boxContainer fieldset > legend > a:hover {
  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;
}

@font-face {
  font-family: Clash;
  font-style: normal;
  font-weight: 400;
  src: url(../font/families/Clash/clash-light.woff2) format("woff2");
}
@font-face {
  font-family: Clash;
  font-style: normal;
  font-weight: 600;
  src: url(../font/families/Clash/clash-regular.woff2) format("woff2");
}
@font-face {
  font-family: Clash;
  font-style: normal;
  font-weight: 800;
  src: url(../font/families/Clash/clash-bold.woff2) format("woff2");
}
@font-face {
  font-family: "SupercellText-Regular";
  font-style: normal;
  src: url(../font/families/Supercell/supercell-regular.woff2) format("woff2");
}
:root {
  --font-clash:
    Clash, "SupercellText-Regular", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
    "Roboto", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-supercell:
    "SupercellText-Regular", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 400;
  font-weight: 100 900;
  src: local(), url("../font/families/Geist/Geist%5Bwght%5D.woff2?v=1.7.0") format("woff2 supports variations"), url("../font/families/Geist/Geist%5Bwght%5D.woff2?v=1.7.0") format("woff2-variations"), url("../font/families/Geist/Geist%5Bwght%5D.woff2?v=1.7.0") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-weight: 100 900;
  src: local(), url("../font/families/Geist/GeistMono%5Bwght%5D.woff2?v=1.7.0") format("woff2 supports variations"), url("../font/families/Geist/GeistMono%5Bwght%5D.woff2?v=1.7.0") format("woff2-variations"), url("../font/families/Geist/GeistMono%5Bwght%5D.woff2?v=1.7.0") format("woff2");
}
woltlab-suite-preload:root {
  --woltlab-suite-preload: preload_dummy("../font/families/Geist/Geist%5Bwght%5D.woff2?v=1.7.0", "font", 1, "");
}

woltlab-suite-preload:root {
  --woltlab-suite-preload: preload_dummy("../font/families/Geist/GeistMono%5Bwght%5D.woff2?v=1.7.0", "font", 1, "");
}

:root {
  --font-geist:
    Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

:root {
  --font-geist-mono:
    "Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono",
    "Courier New", monospace;
}

.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: rgb(242, 222, 222);
  color: rgb(169, 68, 66);
}
.innerError::before {
  border-bottom-color: rgb(242, 222, 222);
}
.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;
}

/* deprecated 6.2 no longer in use */
.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 .articleLikesSummary: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: 10px;
}
.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;
}

/* /deprecated */
/* 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: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 {
  color: var(--wcfContentDimmedText);
  grid-area: meta;
  font-weight: 400;
}
@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: rgb(255, 255, 255);
  display: flex;
  width: 100%;
  /* branding */
}
.button.thirdPartyLoginButton:hover {
  color: rgb(255, 255, 255);
}
.button.thirdPartyLoginButton.googleLoginButton {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(233, 233, 233);
  color: rgb(51, 51, 51);
  padding-bottom: 7px;
  padding-top: 7px;
}
.button.thirdPartyLoginButton.googleLoginButton:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(51, 51, 51);
}
.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: rgb(8, 102, 255);
}
.button.thirdPartyLoginButton.facebookLoginButton:hover {
  background-color: rgb(7, 97, 242);
}
.button.thirdPartyLoginButton.twitterLoginButton {
  background-color: rgb(20, 23, 26);
}
.button.thirdPartyLoginButton.twitterLoginButton:hover {
  background-color: rgba(20, 23, 26, 0.87);
}
.button.thirdPartyLoginButton.githubLoginButton {
  background-color: rgb(68, 68, 68);
}
.button.thirdPartyLoginButton.githubLoginButton:hover {
  background-color: rgb(48, 48, 48);
}

/* This code is necessary to move the third-party buttons in the login form below the submit button. */
form#login {
  display: flex;
  flex-direction: column;
}
form#login .authOtherOptionButtons {
  order: 1;
}

.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;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  position: relative;
  text-overflow: ellipsis;
  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);
}

.benchmark__stacktrace__context {
  color: var(--wcfContentDimmedText);
  display: block;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .benchmark__stacktrace__context {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .benchmark__stacktrace__context {
    font-size: 12px;
  }
}

.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].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: rgb(207, 216, 220);
  border: 1px solid transparent;
  border-radius: var(--wcfBorderRadius);
  color: rgb(33, 33, 33);
  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: rgb(46, 125, 50);
}
.flexibleButtonGroup > li > a.active.red,
.flexibleButtonGroup > li > input[type=radio]:checked + label.red,
.flexibleButtonGroup > li > input[type=radio] + label:hover.red {
  background-color: rgb(198, 40, 40);
}
.flexibleButtonGroup > li > a.active.yellow,
.flexibleButtonGroup > li > input[type=radio]:checked + label.yellow,
.flexibleButtonGroup > li > input[type=radio] + label:hover.yellow {
  background-color: rgb(251, 140, 0);
  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-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);
  --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);
}

.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;
  /* Override the default styling added in CKEditor v46.0.0 */
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  word-break: inherit;
}

.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) {
  .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);
  }
  /* Extra fix for the handling of buttons that act as a toggle for a
     collapsible container. */
  .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-list__item > .ck-button.ck-on:not(.ck-list-item-button):hover:not(.ck-disabled) {
    color: var(--wcfDropdownText);
  }
}
.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.ck-button-extra {
  margin-left: 0;
  order: 0;
}

.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);
}

.ck.ck-form .ck.ck-input-number,
.ck.ck-form .ck.ck-input-text {
  font-size: var(--wcfFontSizeDefault);
}

@media (pointer: coarse) {
  .ck.ck-form .ck.ck-input-number,
  .ck.ck-form .ck.ck-input-text {
    font-size: 16px;
  }
}
@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 selection for the heading to take up lots of space for no reason. */
.ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__button .ck-button__label {
  width: 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;
}

/* Fix the background color and size when editing a link. */
a.ck.ck-button.ck-link-toolbar__preview,
a.ck.ck-button.ck-link-toolbar__preview:active,
a.ck.ck-button.ck-link-toolbar__preview:focus {
  background-color: var(--wcfButtonBackground);
  padding-bottom: 2px !important;
  padding-top: 2px !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;
}

.ck.ck-responsive-form {
  width: auto;
}

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;
}

@media screen and (max-width: 544px) {
  .messageFloatObjectLeft,
  .messageFloatObjectRight {
    float: none;
    margin: 0 0 20px 0;
    /* Center the element by moving it 50% of the parent’s width to the left
       and then moving it back by 50% of the element’s width. */
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
/* 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;
}

/* emoji picker */
.ck.ck-emoji-picker-form .ck-button {
  padding: 0 !important;
}
.ck.ck-emoji-picker-form .ck-search .ck-labeled-field-view__input-wrapper svg,
.ck.ck-emoji-picker-form .ck-search .ck-labeled-field-view__input-wrapper .ck-off {
  transform: none !important;
}
.ck.ck-emoji-picker-form .ck-search .ck-emoji__skin-tone {
  align-self: end;
}
.ck.ck-emoji-picker-form .ck-search .ck-emoji__skin-tone .ck-button {
  padding: 3px 12px !important;
}
.ck.ck-emoji-picker-form .ck.ck-emoji__tiles {
  /* Use the same value applied to `max-height` to prevent the dialog
     from jumping when the number of results change. */
  min-height: min(265px, 40vh);
}

.ck-button__label.ck-emoji, .ck-button__label.ck-smiley {
  font-size: var(--wcfFontSizeDefault) !important;
}

@media (hover: hover) {
  .ck.ck-emoji-picker-form .ck-button:not(:hover), .ck.ck-emoji-picker-form .ck-button.ck-emoji__tile:hover {
    background-color: transparent !important;
  }
}
.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 rgb(0, 0, 0);
  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(--wcfInputBackground);
  border: 1px solid var(--wcfInputBorder);
  border-radius: var(--wcfBorderRadius);
  column-gap: 10px;
  color: var(--wcfInputText);
  display: flex;
  padding: 10px 20px;
  width: 100%;
}
.commentAdd__content--collapsed .commentAdd__editor {
  left: 200%;
  position: absolute;
  top: -100%;
}

@media (hover: hover) {
  .commentAdd__content--collapsed .commentAdd__placeholder:hover {
    border-color: var(--wcfInputBorderActive);
  }
}
.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 {
  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 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.contentItemOptions {
  align-items: flex-start;
  display: flex;
  gap: 5px;
}

.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;
}

.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(33.3333333333% - 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(33.3333333333% - 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 > .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: rgb(255, 255, 255);
  border: 1px solid rgb(204, 204, 204);
  border-radius: var(--wcfBorderRadiusContainer);
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);
  color: rgb(44, 62, 80);
  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% {
    top: -20px;
  }
  100% {
    top: 0;
  }
}
.dialog {
  --dialog-max-height: 80vh;
  --dialog-max-width: 80vw;
  --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;
  position: fixed;
}

.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: min(500px, var(--dialog-max-width));
}

.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: minmax(min-content, auto) max-content max-content;
  margin-top: 30px;
  row-gap: 10px;
}

.dialog__control--duo-stacked,
.dialog__control--extra-stacked,
.dialog__control--tripple-stacked {
  justify-content: end;
}

/* Cancel + Primary stacked on top of each other */
.dialog__control--duo-stacked {
  grid-template-areas: "cancel" "primary";
  grid-template-columns: auto;
}

/* Cancel + Primary are next to each other and extra on top */
.dialog__control--extra-stacked {
  grid-template-areas: "extra  extra" "cancel primary";
  grid-template-columns: auto max-content;
}

.dialog__control--tripple-stacked {
  grid-template-areas: "extra" "cancel" "primary";
  grid-template-columns: auto;
}

.dialog__control__button--primary {
  grid-area: primary;
}

.dialog__control__button--cancel {
  grid-area: cancel;
}

.dialog__control__button--extra {
  grid-area: extra;
  justify-self: start;
}

.dialog__control--extra-stacked .dialog__control__button--extra,
.dialog__control--tripple-stacked .dialog__control__button--extra {
  justify-self: end;
  margin-right: 0;
}

/* 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(100dvh - 20px);
    --dialog-max-width: calc(100dvw - 10px);
    min-width: var(--dialog-max-width);
  }
  .dialog__document {
    min-width: calc(100% - 20px);
    min-width: 100%;
  }
}
.dialog cropper-canvas {
  margin-left: auto;
  margin-right: auto;
  max-height: 100%;
  max-width: 100%;
  /* overwrites the default values of `min-height: 100px` and `min-width: 200px` */
  min-height: 1px;
  min-width: 1px;
}

/* If the height of the image is many times greater than the width, a white area would be displayed at the bottom and/or top. */
.dialog cropper-shade {
  outline-width: max(100vh, 100vw) !important;
}

.discussionList {
  display: flex;
  flex-direction: column;
}

.discussionList__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.discussionList__item:not(:last-child) {
  border-bottom: 1px solid var(--wcfContentBorderInner);
}

@media screen and (max-width: 768px) {
  .discussionList__item:not(:last-child) {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 769px), print {
  .discussionList__item:not(:last-child) {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}
.discussionList__item__header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.discussionList__item__meta {
  align-items: center;
  display: flex;
  gap: 10px;
  color: var(--wcfContentDimmedText);
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .discussionList__item__meta {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .discussionList__item__meta {
    font-size: 12px;
  }
}

.discussionList__item__meta__content {
  display: flex;
}

@media screen and (max-width: 544px) {
  .discussionList__item__meta {
    gap: 5px;
  }
  .discussionList__item__meta__avatar img {
    height: 24px;
    width: 24px;
  }
  .discussionList__item__meta__content {
    align-items: center;
  }
  .discussionList__item__meta__time {
    display: flex;
  }
  .discussionList__item__meta__time::before {
    content: "•";
    margin: 0 3px;
  }
}
@media screen and (min-width: 545px), print {
  .discussionList__item__meta__content {
    flex-direction: column;
  }
}
.discussionList__item__toolbar {
  align-items: center;
  display: grid;
  column-gap: 10px;
  grid-template-areas: "status interactions";
  grid-template-columns: auto fit-content(200px);
  z-index: 1;
}

.discussionList__item__status {
  display: flex;
  gap: 5px;
  grid-area: status;
}

.discussionList__item__interactions {
  display: flex;
  grid-area: interactions;
  opacity: 1;
}

@media (hover: hover) {
  .discussionList__item:not(:hover) .discussionList__item__toolbar {
    grid-template-columns: min-content fit-content(0);
    column-gap: 0;
  }
  .discussionList__item__toolbar {
    transition: grid-template-columns 0.24s ease-in-out 0.12s, column-gap 0.24s ease-in-out 0.12s;
  }
  .discussionList__item:not(:hover) .discussionList__item__interactions {
    opacity: 0;
  }
  .discussionList__item__interactions {
    transition: opacity 0.24s ease-in-out 0.12s;
  }
}
.discussionList__item__interactions .button:not(:hover) {
  background-color: transparent;
  color: inherit;
}

.discussionList__item__interactions .dropdown {
  display: flex;
}

.discussionList__item__content {
  display: grid;
  grid-template-areas: "markAsRead title image" "teaser teaser image" "labels labels image";
  grid-template-columns: min-content 1fr min-content;
  grid-template-rows: min-content min-content 1fr;
}

.discussionList__item .listView__item__markAsRead {
  grid-area: markAsRead;
  margin-right: 5px;
  z-index: 1;
}

.discussionList__item__title {
  grid-area: title;
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .discussionList__item__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .discussionList__item__title {
    font-size: 18px;
  }
}

@media screen and (max-width: 544px) {
  .discussionList__item__title {
    font-size: 14px;
  }
}
.discussionList__item__labels {
  grid-area: labels;
  margin-top: 5px;
}

.discussionList__item__teaser {
  display: -webkit-box;
  grid-area: teaser;
  overflow: hidden;
  margin-top: 5px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 544px) {
  .discussionList__item__teaser {
    font-size: 12px;
  }
}
.discussionList__item__image {
  grid-area: image;
  width: 160px;
  overflow: hidden;
  border-radius: var(--wcfBorderRadius);
  margin-left: 10px;
}

@media screen and (max-width: 544px) {
  .discussionList__item__image {
    display: none;
  }
}
.discussionList__item__image img {
  height: 100px;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.discussionList__item__link {
  color: inherit;
}
.discussionList__item__link::before {
  content: "";
  inset: 0;
  position: absolute;
}

@media (hover: hover) {
  .discussionList__item__link:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.discussionList__item__footer {
  align-items: center;
  display: flex;
  gap: 10px;
  color: var(--wcfContentDimmedText);
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .discussionList__item__footer {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .discussionList__item__footer {
    font-size: 12px;
  }
}

.discussionList__item__lastPost {
  margin-inline-start: auto;
  display: flex;
  gap: 10px;
  position: relative;
}

.discussionList__item__lastPost__link {
  z-index: 1;
  color: inherit;
}
.discussionList__item__lastPost__link::before {
  content: "";
  inset: 0;
  position: absolute;
}

@media (hover: hover) {
  .discussionList__item__lastPost__link:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.discussionList__item__replies,
.discussionList__item__lastPost__time,
.discussionList__item__lastPost__author {
  align-items: center;
  display: flex;
  gap: 3px;
}

@media screen and (max-width: 544px) {
  .discussionList__item__lastPost__author {
    display: none;
  }
}
.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 .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 {
  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,
.messageSignature#messagePreview > div .embeddedContentTitle,
#messagePreview > .ck.ck-content.ck-editor__editable .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,
  .messageSignature#messagePreview > div .embeddedContentTitle,
  #messagePreview > .ck.ck-content.ck-editor__editable .embeddedContentTitle {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .embeddedContent .embeddedContentTitle,
  .messageBody > .messageText .embeddedContentTitle,
  #messagePreview > .htmlContent .embeddedContentTitle,
  .messageSignature#messagePreview > div .embeddedContentTitle,
  #messagePreview > .ck.ck-content.ck-editor__editable .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;
}

.entry {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.entry__teaser {
  font-weight: 600;
}

.entry__coverPhoto img {
  height: auto;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  max-height: 400px;
  border-radius: var(--wcfBorderRadius);
}

.entry__coverPhoto figcaption {
  color: var(--wcfContentDimmedText);
  flex: 1 0 100%;
  margin-top: 5px;
  text-align: center;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .entry__coverPhoto figcaption {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .entry__coverPhoto figcaption {
    font-size: 12px;
  }
}

.entry__content:not(:last-child) {
  border-bottom: 1px solid var(--wcfContentBorderInner);
  padding-bottom: 20px;
}

.entry__content .anchorFixedHeader:target::before {
  content: "";
  display: block;
  height: 50px;
  margin-top: -50px;
}

.entry__attachments__title {
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .entry__attachments__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .entry__attachments__title {
    font-size: 18px;
  }
}

.entry__footer {
  display: flex;
}

.entry__footerButtons {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.entry__footerButtons .button {
  padding: 6px 8px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .entry__footerButtons .button {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .entry__footerButtons .button {
    font-size: 12px;
  }
}

.entry__footerButtons .button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.entry__footerButtons .button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.entry__aboutAuthor {
  display: flex;
  gap: 20px;
}

.entry__aboutAuthor__avatar {
  flex: 0 0 auto;
}

.entry__aboutAuthor__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  gap: 10px;
}

.entry__aboutAuthor__text {
  font-style: italic;
}

.entry__aboutAuthor__username .username {
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .entry__aboutAuthor__username .username {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .entry__aboutAuthor__username .username {
    font-size: 18px;
  }
}
.entry__aboutAuthor__username .userTitleBadge {
  top: -2px;
}

@media screen and (max-width: 768px) {
  .entry__aboutAuthor {
    gap: 10px;
  }
  .entry__aboutAuthor__avatar img {
    width: 64px;
    height: 64px;
  }
}
.entry__navigation {
  column-gap: 20px;
  display: grid;
  grid-template-areas: "previous next";
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 768px) {
  .entry__navigation {
    column-gap: 0;
    grid-template-areas: "previous" "next";
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

.entry__navigation__item {
  color: var(--wcfContentText);
  display: grid;
  grid-template-rows: repeat(2, minmax(0, max-content));
  position: relative;
}
.entry__navigation__item.entry__navigation__item--previous {
  grid-area: previous;
  grid-template-areas: "icon content";
  grid-template-columns: 60px auto;
}
.entry__navigation__item.entry__navigation__item--next {
  grid-area: next;
  grid-template-areas: "content icon";
  grid-template-columns: auto 60px;
  text-align: right;
}
.entry__navigation__item.entry__navigation__item--withImage.entry__navigation__item--previous {
  grid-template-areas: "icon image content";
  grid-template-columns: 60px 96px auto;
}
.entry__navigation__item.entry__navigation__item--withImage.entry__navigation__item--next {
  grid-template-areas: "content image icon";
  grid-template-columns: auto 96px 60px;
  text-align: right;
}

.entry__navigation__item__icon {
  align-self: center;
  grid-area: icon;
}

body:not(.touch) .entry__navigation__item:hover .entry__navigation__item__icon {
  color: var(--wcfContentLinkActive);
}

.entry__navigation__item__image {
  grid-area: image;
}

.entry__navigation__item__image img {
  border-radius: 3px;
  height: 96px;
  width: 96px;
  object-fit: cover;
  object-position: center center;
}

.entry__navigation__item--previous.entry__navigation__item--withImage .entry__navigation__item__content {
  margin-left: 20px;
}

.entry__navigation__item--next.entry__navigation__item--withImage .entry__navigation__item__content {
  margin-right: 20px;
}

.entry__navigation__item__content {
  grid-area: content;
}

.entry__navigation__item__entityName {
  color: var(--wcfContentDimmedText);
  display: block;
}

.entry__navigation__item__title {
  display: block;
  margin-top: 5px;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .entry__navigation__item__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .entry__navigation__item__title {
    font-size: 18px;
  }
}

.entry__navigation__item__link {
  color: var(--wcfContentText);
}
.entry__navigation__item__link::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.discussionProviderCtaContainer {
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.entryCardList__container {
  container-type: inline-size;
}

.entryCardList {
  display: grid;
  gap: 20px;
  grid-auto-rows: minmax(170px, auto);
}

@container (min-width: 1000px) {
  .entryCardList {
    grid-template-columns: repeat(3, 1fr);
  }
}
@container (width < 1000px) and (min-width: 620px) {
  .entryCardList {
    grid-template-columns: repeat(2, 1fr);
  }
}
.entryCardList__item {
  --row-gap: 10px;
  background-color: var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadowCard);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

html[data-color-scheme=dark] .entryCardList__item {
  border: 1px solid var(--wcfContentBorderInner);
}

.entryCardList__item__buttons {
  background-color: var(--wcfContentBackground);
  box-shadow: var(--wcfBoxShadowImageButton);
  border-radius: var(--wcfBorderRadius);
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1;
  align-items: center;
  display: flex;
  gap: 5px;
  padding: 5px;
  transition: opacity 0.24s ease-in-out 0.12s, transform 0.24s ease-in-out 0.12s;
}

@media (hover: hover) {
  .entryCardList__item:not(:hover) .entryCardList__item__buttons {
    transform: translateX(100%);
    opacity: 0;
  }
  #content:has(:focus-visible) .entryCardList__item__buttons {
    transform: none;
    opacity: 1;
  }
}
html[data-color-scheme=dark] .entryCardList__item__buttons {
  border: 1px solid var(--wcfContentBorderInner);
}

.entryCardList__item__image {
  border-top-left-radius: var(--wcfBorderRadius);
  border-top-right-radius: var(--wcfBorderRadius);
  overflow: hidden;
  position: relative;
}

.entryCardList__item__image__element {
  height: 150px;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

html:not(.touch) .entryCardList__item__image__element {
  transition: transform 0.24s linear;
}

html:not(.touch) .entryCardList__item:hover .entryCardList__item__image__element {
  transform: scale(1.05);
}

.entryCardList__item__badges {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  left: 10px;
  position: absolute;
  top: 10px;
  z-index: 1;
}

.entryCardList__item__content {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  padding: 0 10px;
  row-gap: 10px;
  margin-top: var(--row-gap);
}

.entryCardList__item__title__prefix {
  color: var(--wcfContentDimmedText);
  margin-bottom: calc(var(--row-gap) * -1);
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .entryCardList__item__title__prefix {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .entryCardList__item__title__prefix {
    font-size: 12px;
  }
}

.entryCardList__item__title {
  color: var(--wcfContentHeadlineLink);
  display: flex;
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .entryCardList__item__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .entryCardList__item__title {
    font-size: 18px;
  }
}

.entryCardList__item .listView__item__markAsRead {
  flex: 0 0 auto;
  margin-right: 5px;
  z-index: 1;
}

.entryCardList__item__link {
  color: inherit;
}
.entryCardList__item__link::before {
  content: "";
  inset: 0;
  position: absolute;
}
.entryCardList__item__link:hover {
  color: inherit;
}

.entryCardList__item__teaser {
  color: var(--wcfContentDimmedText);
}

.entryCardList__item__meta {
  align-items: center;
  border-top: 1px solid var(--wcfContentBorderInner);
  color: var(--wcfContentDimmedText);
  display: flex;
  flex: 0 auto;
  padding: 10px;
  white-space: nowrap;
  gap: 10px;
  margin-top: var(--row-gap);
}

.entryCardList__item__meta__image {
  flex: 0 auto;
}

.entryCardList__item__meta__content {
  flex: 1 auto;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .entryCardList__item__meta__content {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .entryCardList__item__meta__content {
    font-size: 12px;
  }
}

.entryCardList__item__meta__author {
  color: var(--wcfContentText);
}
.entryCardList__item__meta__author a,
.entryCardList__item__meta__author a:hover {
  color: inherit;
}

.entryCardList__item__meta__icons {
  align-items: center;
  display: flex;
  flex: 0 auto;
  gap: 10px;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .entryCardList__item__meta__icons {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .entryCardList__item__meta__icons {
    font-size: 12px;
  }
}

.entryCardList__item__meta__icon {
  flex: 0 auto;
}
.entryCardList__item__meta__icon .topReactionShort {
  align-items: center;
  display: flex;
}
.entryCardList__item__meta__icon .reactionType {
  margin-right: 3px;
}

.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  indicator" "file fileSize 	fileSize" "file buttons 	buttons" "file error 	error";
  grid-template-columns: 80px auto 0;
  padding: 10px;
}

.fileList__item--inserted {
  grid-template-columns: 80px auto 20px;
}

.fileList__item--error {
  border-color: var(--wcfStatusErrorBorder);
}

.fileList__item--error .fileList__item__file {
  color: var(--wcfStatusErrorText);
}

.fileList__item--ghost {
  opacity: 0.54;
}

.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__indicator {
  grid-area: indicator;
  margin-left: 5px;
  visibility: hidden;
}

.fileList__item--inserted .fileList__item__indicator {
  visibility: visible;
}

.fileList__item__filename {
  align-self: center;
  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;
}

@media (hover: hover) {
  .fileList__item__file:hover {
    cursor: move;
  }
}
.fontAwesome__icons {
  border: 1px solid var(--wcfContentBorderInner);
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 150px);
  max-height: 540px;
  overflow: auto;
}
@media only screen and (min-height: 700px) and (max-height: 800px) {
  .fontAwesome__icons {
    max-height: 450px;
  }
}

.fontAwesome__icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  width: 100%;
}

.fontAwesome__icon__name {
  color: var(--wcfContentDimmedText);
}

@media (hover: hover) {
  .fontAwesome__icon:hover {
    background-color: var(--wcfButtonBackgroundActive);
    color: var(--wcfButtonTextActive);
  }
  .fontAwesome__icon:hover .fontAwesome__icon__name {
    color: inherit;
  }
}
.googleMap {
  border-radius: var(--wcfBorderRadius);
  display: block;
  height: 400px;
}

.sidebarGoogleMap {
  display: block;
  height: 250px;
}

.googleMapsCustomControlContainer {
  cursor: pointer !important;
  margin-top: 5px;
}
.googleMapsCustomControlContainer .googleMapsCustomControl {
  text-align: center;
  position: relative;
  color: rgb(86, 86, 86);
  font-size: 11px !important;
  background-color: rgb(255, 255, 255);
  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: rgb(235, 235, 235);
  color: rgb(0, 0, 0);
}
.googleMapsCustomControlContainer .googleMapsCustomControl.active {
  color: rgb(0, 0, 0);
  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;
}

.gm-style-iw-ch {
  color: #333;
}

.googleMapsInput + .googleMap {
  margin-top: 10px;
}

.gridView__tableContainer {
  overflow: auto;
}

.gridView__table {
  border-bottom: 1px solid var(--wcfContentBorder);
  border-spacing: 0;
  width: 100%;
  overflow-wrap: break-word;
}

.gridView__column,
.gridView__headerColumn {
  max-width: 400px;
  padding: 10px;
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gridView__headerColumn {
  white-space: nowrap;
}

.gridView__headerColumn {
  font-weight: 600;
}

.gridView__headerColumn__button::before {
  position: absolute;
  inset: 0;
  content: "";
}

.gridView__headerColumn.ASC .gridView__headerColumn__button::after,
.gridView__headerColumn.DESC .gridView__headerColumn__button::after {
  display: inline-block;
  margin-left: 5px;
}

.gridView__headerColumn.ASC .gridView__headerColumn__button::after {
  content: "↑";
}

.gridView__headerColumn.DESC .gridView__headerColumn__button::after {
  content: "↓";
}

.gridView__row:not(:last-child) .gridView__column {
  box-shadow: inset 0 -1px 0 0 var(--wcfContentBorderInner);
}

.gridView__row:hover .gridView__column {
  background-color: var(--wcfTabularBoxBackgroundActive);
}

.gridView__rowLink,
.gridView__rowLink:hover {
  color: inherit;
}

.gridView__rowLink::before {
  position: absolute;
  inset: 0;
  content: "";
}

.gridView__column {
  background-color: var(--wcfContentContainerBackground);
}
.gridView__column.gridView__column--title {
  font-weight: 600;
}
.gridView__column.gridView__column--digits, .gridView__column.gridView__column--id {
  font-variant: tabular-nums;
  text-align: right;
  width: 1px;
  white-space: nowrap;
  word-wrap: normal;
}
.gridView__column.gridView__column--icon {
  width: 32px;
  white-space: nowrap;
  word-wrap: normal;
}
.gridView__column.gridView__column--date {
  text-align: right;
  width: 1px;
  white-space: nowrap;
  word-wrap: normal;
}
.gridView__column.gridView__column-smallText {
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .gridView__column.gridView__column-smallText {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .gridView__column.gridView__column-smallText {
    font-size: 12px;
  }
}
.gridView__column.gridView__column--image {
  text-align: center;
  white-space: nowrap;
  width: 1px;
  word-wrap: normal;
}

.gridView__headerColumn {
  background-color: var(--wcfContentContainerBackground);
  box-shadow: inset 0 -1px 0 0 var(--wcfContentBorder);
}
.gridView__headerColumn.gridView__column--digits, .gridView__headerColumn.gridView__column--id, .gridView__headerColumn.gridView__column--date {
  text-align: right;
}

.gridView__actionColumn {
  text-align: right;
  width: 1px;
  white-space: nowrap;
  word-wrap: normal;
  position: sticky;
  right: 0;
  animation: auto linear 0s 1 normal none running gridView__actionColumn__dropShadow;
  animation-timeline: scroll(inline);
}

/* Hack to fix a weird position error in iOS Safari
   See https://www.woltlab.com/community/thread/314181/ */
html.iOS .gridView__headerColumn {
  box-shadow: inset 0 -2px 0 0 var(--wcfContentBorder);
}
html.iOS .gridView__actionColumn {
  top: 1px;
}

@property --drop-shadow-opacity {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
.gridView__actionColumn::before {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0 0 0/var(--drop-shadow-opacity)));
  bottom: 0;
  content: "";
  left: -10px;
  position: absolute;
  top: 0;
  width: 10px;
}

.gridView__selectColumn {
  position: sticky;
  left: 0;
  width: 1px;
  z-index: 1;
}

.gridView__selectColumn::after {
  content: "";
  display: block;
  inset: 0;
  position: absolute;
  animation: auto linear 0s 1 normal none running gridView__selectColumn__dropShadow;
  animation-timeline: scroll(inline);
  z-index: -1;
}

.gridView__filterBar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid var(--wcfContentBorder);
  padding-bottom: 10px;
  gap: 5px;
}

.gridView__filters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.gridView__filterButton {
  flex: 0 0 auto;
}

.gridView__footer {
  bottom: -10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 20px 0;
  position: sticky;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .gridView__footer {
    margin-bottom: -10px;
  }
}
@media screen and (min-width: 769px), print {
  .gridView__footer {
    margin-bottom: -20px;
  }
}
.gridView__footer__container {
  backdrop-filter: blur(24px);
  background-color: rgb(var(--wcfContentContainerBackground-rgb)/78%);
  border: 1px solid transparent;
  border-radius: var(--wcfBorderRadiusContainer);
  box-shadow: var(--wcfBoxShadow);
  display: flex;
  gap: 21px;
  padding: 10px;
}

.gridView__selectionBar:not([hidden]) + .gridView__pagination:not(:has(woltlab-core-pagination[count="1"]))::before {
  border-left: 1px solid var(--wcfContentContainerBorder);
  content: "";
  inset: 0 auto;
  position: absolute;
  transform: translateX(-10px);
}

@media screen and (max-width: 544px) {
  .gridView__footer__container {
    align-items: center;
    flex-direction: column;
  }
  .gridView__selectionBar:not([hidden]) + .gridView__pagination:not(:has(woltlab-core-pagination[count="1"]))::before {
    border-left-width: 0;
    border-top: 1px solid var(--wcfContentContainerBorder);
    inset: auto 0;
    transform: translateY(-10px);
  }
}
html[data-color-scheme=dark] .gridView__footer__container {
  border-color: var(--wcfContentContainerBorder);
}

.gridView__actionColumn__buttons {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: end;
}

.gridView__selectAllRows,
.gridView__selectRow {
  cursor: pointer;
  height: 18px;
  width: 18px;
}

.gridView__row:has(.gridView__selectRow:checked) .gridView__column {
  background-color: var(--wcfTabularBoxBackgroundActive);
}

@keyframes gridView__actionColumn__dropShadow {
  0% {
    --drop-shadow-opacity: 8%;
  }
  75% {
    --drop-shadow-opacity: 8%;
  }
  99% {
    --drop-shadow-opacity: 0%;
  }
}
@keyframes gridView__selectColumn__dropShadow {
  0% {
    box-shadow: none;
  }
  5% {
    box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 16px 2px;
  }
  100% {
    box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 16px 2px;
  }
}
.gridView__filter__list {
  display: grid;
  gap: 20px;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
}

.gridView__filter__item {
  margin: 0 !important;
}

@media screen and (max-width: 544px) {
  .gridView__filter__list {
    grid-template-columns: 1fr;
  }
}
.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.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;
}

.labelSelection {
  column-gap: 10px;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
}

.labelSelection__label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  margin-bottom: 10px;
}

.labelSelection__radio {
  flex: 0 0 auto;
  margin-right: 7px;
}

.labelSelection__span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.labelSelection__custom {
  display: flex;
}

.labelSelection__custom .labelSelection__span {
  flex: 1 1 auto;
}

.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 > a {
  margin-right: 5px;
}
.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);
}
.sortablePlaceholder.sortableInvalidTarget {
  background-color: var(--wcfStatusErrorBackground);
  border-color: var(--wcfStatusErrorBorder);
  color: var(--wcfStatusErrorText);
}
.sortablePlaceholder .sortableNodeLabel, .sortablePlaceholder:is(tr):hover > td {
  background-color: transparent;
}

.table tr.sortablePlaceholder:hover > td {
  background-color: transparent;
}

@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 rgb(79, 129, 189);
  border-width: 1px 0;
}
.structuredList li {
  display: flex;
  padding: 10px 0;
}
.structuredList li:not(:first-child) {
  border-top: 1px solid rgb(238, 238, 238);
}
.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;
}

.listView__header {
  border-bottom: 2px solid var(--wcfTabularBoxHeadline);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  padding-bottom: 5px;
}

@media screen and (max-width: 768px) {
  .listView__header {
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 769px), print {
  .listView__header {
    margin-bottom: 20px;
  }
}
.listView__filters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.listView__header__buttons {
  display: flex;
  gap: 5px;
  margin-inline-start: auto;
}

.listView__header__button {
  display: flex;
}

@media screen and (max-width: 544px) {
  .listView.listView--editMode .listView__editMode__toggle,
  .listView:not(:has(.listView__item__buttons)) .listView__editMode__toggle {
    display: none;
  }
  .listView:not(.listView--editMode) .listView__selectAllItems__label,
  .listView:not(.listView--editMode) .listView__item__buttons {
    display: none;
  }
}
@media screen and (min-width: 545px), print {
  .listView__editMode__toggle {
    display: none;
  }
}
.listView__sorting__button.ASC::after,
.listView__sorting__button.DESC::after {
  display: inline-block;
  margin-left: 5px;
}

.listView__sorting__button.ASC::after {
  content: "↑";
}

.listView__sorting__button.DESC::after {
  content: "↓";
}

.listView__footer {
  bottom: -10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 20px 0;
  position: sticky;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .listView__footer {
    margin-bottom: -10px;
  }
}
@media screen and (min-width: 769px), print {
  .listView__footer {
    margin-bottom: -20px;
  }
}
.listView__footer__container {
  backdrop-filter: blur(24px);
  background-color: rgb(var(--wcfContentContainerBackground-rgb)/78%);
  border: 1px solid transparent;
  border-radius: var(--wcfBorderRadiusContainer);
  box-shadow: var(--wcfBoxShadow);
  display: flex;
  gap: 21px;
  padding: 10px;
}

.listView__selectionBar:not([hidden]) + .listView__pagination:not(:has(woltlab-core-pagination[count="1"]))::before {
  bottom: 0;
  border-left: 1px solid var(--wcfContentContainerBorder);
  content: "";
  position: absolute;
  transform: translateX(-10px);
  top: 0;
}

@media screen and (max-width: 544px) {
  .listView__footer__container {
    align-items: center;
    flex-direction: column;
  }
  .listView__selectionBar:not([hidden]) + .listView__pagination:not(:has(woltlab-core-pagination[count="1"]))::before {
    border-left-width: 0;
    border-top: 1px solid var(--wcfContentContainerBorder);
    inset: auto 0;
    transform: translateY(-10px);
  }
}
html[data-color-scheme=dark] .listView__footer__container {
  border-color: var(--wcfContentContainerBorder);
}

.listView {
  position: relative;
}

.listView .info {
  margin-top: 0;
}

.listView__selectAllItems,
.listView__selectItem {
  cursor: pointer;
  height: 18px;
  width: 18px;
}

.listView__selectAllItems__label,
.listView__selectItem__label {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 0 6px;
}

.listView__item__markAsRead {
  align-items: center;
  display: flex;
  padding: 0 5px;
}

.listView__item__unread__indicator {
  background-color: var(--wcfButtonPrimaryBackground);
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  width: 10px;
}

@media (hover: hover) {
  .listView__item__markAsRead:hover .listView__item__unread__indicator {
    background-color: var(--wcfButtonPrimaryBackgroundActive);
  }
}
.listView__filter__list {
  display: grid;
  gap: 20px;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
}

.listView__filter__item {
  margin: 0 !important;
}

@media screen and (max-width: 544px) {
  .listView__filter__list {
    grid-template-columns: 1fr;
  }
}
.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;
  }
}
@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) {
  .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;
  }
}
@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) {
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList .scrollableDropdownMenu {
    max-height: 300px;
    overflow: auto;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList .scrollableDropdownMenu.forceScrollbar {
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList .dropdownMenu.pageHeaderSearchDropdown {
    transform: translateY(-10px);
  }
}
@media screen and (max-width: 1024px) {
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList > li .invisible {
    display: inline;
    padding-left: 5px;
  }
}
@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 rgb(255, 255, 255);
    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 {
    overflow: visible;
  }
  .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 > .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;
}

@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;
  }
}
@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) {
  .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;
  }
}
@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;
  }
}
@media screen and (max-width: 768px) {
  .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;
  }
}
.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%);
}

@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 {
  column-gap: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0;
  row-gap: 10px;
}

.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]: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: var(--preset-green);
}
.notificationSettingsState fa-icon[name=bell-slash] {
  color: var(--preset-red);
}

.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: var(--preset-red);
}
.notificationSettingsEmailType fa-icon[name=bolt],
.notificationSettingsEmailType fa-icon[name=clock] {
  color: var(--preset-green);
}

.notificationList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notificationListItem {
  display: grid;
  grid-template-areas: "avatar title unread" "avatar time unread" "avatar authors unread";
  grid-template-columns: min-content 1fr min-content;
  column-gap: 15px;
  row-gap: 5px;
  position: relative;
}
.notificationListItem:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wcfContentBorderInner);
}

.notificationListItem__avatar {
  grid-area: avatar;
}

.notificationListItem__title {
  grid-area: title;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .notificationListItem__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .notificationListItem__title {
    font-size: 18px;
  }
}

.notificationListItem__time {
  grid-area: time;
  color: var(--wcfContentDimmedText);
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .notificationListItem__time {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .notificationListItem__time {
    font-size: 12px;
  }
}

.notificationListItem__authors {
  grid-area: authors;
  margin-top: 5px;
}

.notificationListItem__link {
  color: inherit;
}
.notificationListItem__link::before {
  content: "";
  inset: 0;
  position: absolute;
}
.notificationListItem__link:hover {
  color: inherit;
}

.notificationListItem__unread {
  align-self: center;
  align-items: center;
  bottom: 0;
  display: flex;
  grid-area: unread;
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
}
.notificationListItem__unread::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) .notificationListItem__unread::before {
  transition: left 0.12s ease-in-out, opacity 0.12s ease-in-out;
}

html:not(.touch) .notificationListItem:hover .notificationListItem__unread::before {
  opacity: 0;
  left: 0;
}

.notificationListItem__markAsRead {
  display: block;
  opacity: 1;
  position: relative;
  left: 0;
  width: 100%;
}

html:not(.touch) .notificationListItem__markAsRead {
  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) .notificationListItem__markAsRead: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 .notificationListItem__markAsRead {
  opacity: 0;
  left: 0;
  width: 24px;
}

.notificationListItem:not(:hover) .notificationListItem__markAsRead {
  opacity: 0;
  left: 10px;
}

.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;
  user-select: none;
}

.pagination__list {
  column-gap: var(--column-gap);
  display: grid;
  grid-auto-flow: column;
}

.pagination__link {
  --padding-vertical: 4px;
  --padding-side: 8px;
  border-radius: 4px;
  color: var(--wcfContentText);
  display: inline-block;
  font-variant: tabular-nums;
  min-width: calc(2ch + 2 * var(--padding-side));
  padding: var(--padding-vertical) var(--padding-side);
  text-align: center;
}

.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;
  }
  .pagination__link {
    --padding-vertical: 8px;
    font-weight: 400;
  }
}
@media screen and (max-width: 544px) and (min-width: 769px) {
  .pagination__link {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 544px) and (max-width: 768px) {
  .pagination__link {
    font-size: 12px;
  }
}
/*
 * 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 {
  column-gap: 5px;
  margin: 5px 0;
  /* using `display: flex` inside a native list-item is pretty weird */
  display: inline-flex;
  width: 100%;
}
.pollOptionContainer .pollOptionInput > fa-icon {
  align-self: center;
}
.pollOptionContainer .pollOptionInput > button {
  align-items: center;
  display: flex;
}
.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: 400px;
  --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;
  overflow: hidden;
  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;
  }
}
.popover__layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 300px;
}

.popover__header {
  display: grid;
  grid-template-areas: "avatar title" "avatar time";
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content 1fr;
  column-gap: 10px;
  margin-bottom: 10px;
}

.popover__avatar {
  grid-area: avatar;
}

.popover__title {
  grid-area: title;
  font-weight: 600;
  font-weight: 400;
  line-height: 1.28;
}
@media screen and (min-width: 769px), print {
  .popover__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .popover__title {
    font-size: 18px;
  }
}

.popover__title a,
.popover__title a:hover {
  color: inherit;
}

.popover__time {
  color: var(--wcfContentDimmedText);
  grid-area: time;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .popover__time {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .popover__time {
    font-size: 12px;
  }
}

.popover__coverPhoto {
  --remove-padding: calc(var(--padding) * -1);
  margin: var(--remove-padding) var(--remove-padding) 10px;
}

.popover__coverPhoto__image {
  object-fit: cover;
  object-position: center center;
  height: 150px;
  width: 100%;
}

.ratingList {
  font-size: 0;
}
.ratingList > li {
  display: inline-block;
}
.ratingList fa-icon[name=star][solid] {
  color: #f90;
}
.ratingList .ratingMetaButton {
  margin-left: 5px;
}

.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,
.reactionTypeListImage .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;
  column-gap: 10px;
  row-gap: 5px;
  position: relative;
  grid-template-areas: "avatar title" "avatar time";
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content 1fr;
}
.recentActivityListItem.recentActivityListItem--withDescription {
  grid-template-areas: "avatar title" "avatar description" "avatar time";
  grid-template-rows: min-content min-content 1fr;
}
.recentActivityListItem:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wcfContentBorderInner);
}
@media screen and (min-width: 769px), print {
  .recentActivityListItem.recentActivityListItem--withImage {
    grid-template-areas: "avatar title image" "avatar time image";
    grid-template-columns: min-content 1fr min-content;
  }
  .recentActivityListItem.recentActivityListItem--withDescription.recentActivityListItem--withImage {
    grid-template-areas: "avatar title image" "avatar description image" "avatar time image";
  }
}
@media screen and (max-width: 768px) {
  .recentActivityListItem {
    grid-template-areas: "avatar title" "time time";
  }
  .recentActivityListItem.recentActivityListItem--withDescription {
    grid-template-areas: "avatar title" "description description" "time time";
  }
  .recentActivityListItem.recentActivityListItem--withImage {
    grid-template-areas: "avatar title" "image image" "time time";
    grid-template-rows: min-content min-content 1fr;
  }
  .recentActivityListItem.recentActivityListItem--withDescription.recentActivityListItem--withImage {
    grid-template-areas: "avatar title" "image image" "description description" "time time";
    grid-template-rows: min-content min-content min-content 1fr;
  }
}

.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;
  }
}
@media screen and (max-width: 768px) {
  .recentActivityListItem__time {
    text-align: right;
  }
}

.recentActivityListItem__image {
  grid-area: image;
  align-self: center;
}
@media screen and (max-width: 768px) {
  .recentActivityListItem__image {
    text-align: center;
    margin-top: 5px;
  }
}

.recentActivityListItem__image img {
  border-radius: var(--wcfBorderRadius);
  max-height: 200px;
  max-width: 300px;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  .recentActivityListItem__image img {
    max-width: 100%;
  }
}

.recentActivityListItem__link {
  color: inherit;
}
.recentActivityListItem__link::before {
  content: "";
  inset: 0;
  position: absolute;
}

@media (hover: hover) {
  .recentActivityListItem__link:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.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);
  border-radius: var(--wcfBorderRadius);
  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: rgb(255, 214, 30);
  color: rgb(0, 0, 0);
  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);
}

.sidebarList {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.sidebarListItem {
  display: grid;
  grid-template-areas: "image content" "image meta";
  grid-template-columns: min-content 1fr;
  grid-template-rows: 1fr min-content;
  position: relative;
  row-gap: 2px;
}

.sidebarListItem__image {
  display: flex;
  grid-area: image;
  margin-right: 10px;
}

.sidebarListItem__image img {
  max-height: 24px;
  max-width: 24px;
}

.sidebarListItem__image:has(fa-icon) {
  width: 24px;
}

.sidebarListItem__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sidebarListItem__meta {
  grid-area: meta;
  color: var(--wcfSidebarDimmedText);
  display: flex;
  flex-wrap: wrap;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .sidebarListItem__meta {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .sidebarListItem__meta {
    font-size: 12px;
  }
}

/* Selector required to override legacy styling of the sidebar. */
.sidebarListItem .sidebarListItem__link {
  color: inherit;
}
.sidebarListItem .sidebarListItem__link::before {
  content: "";
  inset: 0;
  position: absolute;
}

@media (hover: hover) {
  .sidebarListItem .sidebarListItem__link:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.sidebarListItem--unread .sidebarListItem__link {
  font-weight: 600;
}

.sidebarListItem__meta a {
  color: inherit;
}
.sidebarListItem__meta a:hover {
  color: inherit;
}

.sidebarListItem__description {
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .sidebarListItem__description {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .sidebarListItem__description {
    font-size: 12px;
  }
}

.sidebarListItem__meta__item {
  align-items: center;
  display: flex;
}

.sidebarListItem__meta__item:not(:last-child)::after {
  content: "•";
  margin: 0 3px;
}

.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;
}

.snackbarContainer {
  align-items: start;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  left: 20px;
  position: fixed;
  z-index: 460;
}

@keyframes snackbarIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes snackbarOut {
  0% {
    opacity: 1;
    transform: translateX(0);
    margin-bottom: 0;
  }
  25% {
    opacity: 1;
    transform: translateX(-50%);
  }
  50% {
    margin-bottom: 0;
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    margin-bottom: calc(var(--height) * -1);
    opacity: 0;
    transform: translateX(-100%);
  }
}
.snackbar {
  animation: snackbarIn 0.12s ease-in-out;
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: 4px;
  box-shadow: var(--wcfBoxShadow);
  color: var(--wcfContentText);
  display: flex;
  isolation: isolate;
  min-width: 200px;
  overflow: hidden;
  padding: 0 5px;
  user-select: none;
}

.snackbar--closing {
  animation-name: snackbarOut;
  animation-duration: 0.24s;
}

.snackbar--success {
  background-color: var(--wcfStatusSuccessBackground);
  border-color: var(--wcfStatusSuccessBorder);
  color: var(--wcfStatusSuccessText);
}

.snackbar--progress {
  background-color: var(--wcfStatusInfoBackground);
  border-color: var(--wcfStatusInfoBorder);
  color: var(--wcfStatusInfoText);
}

.snackbar__icon {
  align-items: center;
  border: 1px solid transparent;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 36px;
}

.snackbar__message {
  flex: 1 0 auto;
  padding: 10px 5px 10px 0;
}

/* 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 {
  color: var(--wcfContentLink);
  outline: 0;
}
.messageTabMenu.messageTabMenuContent > nav > ul > li:not(:last-child) {
  margin-right: 20px;
}
.messageTabMenu.messageTabMenuContent > nav > ul > li.active {
  color: var(--wcfContentLinkActive);
}
.messageTabMenu.messageTabMenuContent > nav > ul > li > a,
.messageTabMenu.messageTabMenuContent > nav > ul > li > button {
  color: inherit;
  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,
  .messageTabMenu.messageTabMenuContent > nav > ul > li > button {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .messageTabMenu.messageTabMenuContent > nav > ul > li > a,
  .messageTabMenu.messageTabMenuContent > nav > ul > li > button {
    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);
  color: var(--wcfContentLink);
}
.messageTabMenu > nav.tabMenu > ul > li:not(:last-child),
.messageTabMenuNavigation > ul > li:not(:last-child) {
  margin-right: 0;
}
.messageTabMenu > nav.tabMenu > ul > li.active,
.messageTabMenuNavigation > ul > li.active {
  color: var(--wcfContentLinkActive);
}
.messageTabMenu > nav.tabMenu > ul > li.active > a, .messageTabMenu > nav.tabMenu > ul > li.active > button,
.messageTabMenuNavigation > ul > li.active > a,
.messageTabMenuNavigation > ul > li.active > button {
  position: relative;
}
.messageTabMenu > nav.tabMenu > ul > li.active > a::after, .messageTabMenu > nav.tabMenu > ul > li.active > button::after,
.messageTabMenuNavigation > ul > li.active > a::after,
.messageTabMenuNavigation > ul > li.active > button::after {
  border-bottom: 1px solid var(--wcfContentBackground);
  bottom: -1px;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
}
.messageTabMenu > nav.tabMenu > ul > li > a,
.messageTabMenu > nav.tabMenu > ul > li > button,
.messageTabMenuNavigation > ul > li > a,
.messageTabMenuNavigation > ul > li > button {
  align-items: center;
  color: inherit;
  /* 0.2em matches the width of a space */
  column-gap: 0.2em;
  display: flex;
  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,
  .messageTabMenu > nav.tabMenu > ul > li > button,
  .messageTabMenuNavigation > ul > li > a,
  .messageTabMenuNavigation > ul > li > button {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) {
  .messageTabMenu > nav.tabMenu > ul > li > a,
  .messageTabMenu > nav.tabMenu > ul > li > button,
  .messageTabMenuNavigation > ul > li > a,
  .messageTabMenuNavigation > ul > li > button {
    font-size: 14px;
  }
}
.messageTabMenu > nav.tabMenu > ul > li > a .badgeUpdate,
.messageTabMenu > nav.tabMenu > ul > li > button .badgeUpdate,
.messageTabMenuNavigation > ul > li > a .badgeUpdate,
.messageTabMenuNavigation > ul > li > button .badgeUpdate {
  font-variant: tabular-nums;
  margin-left: 0.3em;
}
@media screen and (max-width: 768px) {
  .messageTabMenu > nav.tabMenu > ul > li > a > span:not(.badgeUpdate),
  .messageTabMenu > nav.tabMenu > ul > li > button > span:not(.badgeUpdate),
  .messageTabMenuNavigation > ul > li > a > span:not(.badgeUpdate),
  .messageTabMenuNavigation > ul > li > button > span:not(.badgeUpdate) {
    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 {
  color: var(--wcfTabularBoxHeadline);
}
.tabularBoxTitle > header a: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;
  }
}
.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: rgb(242, 242, 242);
}
.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%;
  }
  .htmlContent > .tableOfContentsWrapper + *, .ck.ck-content.ck-editor__editable > .tableOfContentsWrapper + *, .messageBody > .messageText > .tableOfContentsWrapper + *, .messageSignature > div > .tableOfContentsWrapper + * {
    margin-top: 0 !important;
  }
}
@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, .messageSignature > div .tableOfContents,
.messageBody > .messageText .tableOfContents {
  margin-left: 15px;
}
.htmlContent .tableOfContents.tocLevel2, .ck.ck-content.ck-editor__editable .tableOfContents.tocLevel2, .messageSignature > div .tableOfContents.tocLevel2,
.messageBody > .messageText .tableOfContents.tocLevel2 {
  list-style-type: lower-alpha;
}
.htmlContent .tableOfContents.tocLevel3, .ck.ck-content.ck-editor__editable .tableOfContents.tocLevel3, .messageSignature > div .tableOfContents.tocLevel3,
.messageBody > .messageText .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, .balloonTooltip.interactive button {
  cursor: pointer;
}
.balloonTooltip.interactive > span:not(:first-child), .balloonTooltip.interactive button: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: rgb(255, 255, 255);
  border: 1px solid rgb(204, 204, 204);
  display: inline-block;
  padding: 1px;
  vertical-align: middle;
}

.badgeIconEditor {
  column-gap: 10px;
  display: flex;
}

.badgeIconEditor .trophyIcon {
  align-self: center;
  flex: 0 0 auto;
}

.badgeIconEditorButtons {
  align-items: start;
  align-self: center;
  display: flex;
  flex: 1 0 auto;
  gap: 10px;
}

@media screen and (max-width: 544px) {
  .badgeIconEditorButtons {
    flex-direction: column;
  }
}
.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 {
  content: "";
  inset: 0;
  position: absolute;
}

@media (hover: hover) {
  .unfurlUrlTitle:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.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: 400px;
}

.fileUpload__preview:not(:empty) {
  margin-top: 20px;
}

.fileUpload__preview__item__buttons {
  margin-top: 5px;
}

.userCardList__container {
  container-type: inline-size;
}

.userCardList {
  display: grid;
  gap: 20px;
  grid-auto-rows: minmax(200px, auto);
}

@container (min-width: 1280px) {
  .userCardList {
    grid-template-columns: repeat(4, 1fr);
  }
}
@container (width < 1280px) and (min-width: 960px) {
  .userCardList {
    grid-template-columns: repeat(3, 1fr);
  }
}
@container (width < 960px) and (min-width: 640px) {
  .userCardList {
    grid-template-columns: repeat(2, 1fr);
  }
}
.userCardList__item {
  display: flex;
}

.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;
}

.userCardList__item .userCard {
  flex: 1 1 auto;
}

.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%;
}

@media (hover: hover) {
  .userCard__header__background__image {
    transition: transform 0.24s linear;
  }
  .userCard:hover .userCard__header__background__image {
    transform: scale(1.05);
  }
}
.userCard__header__avatar {
  align-self: start;
  background-color: var(--wcfContentBackground);
  border-radius: 50%;
  border: 5px solid var(--wcfContentBackground);
  margin-left: 15px;
  margin-top: -37px;
  position: relative;
}

.userCard__onlineIndicator {
  background-color: rgb(0, 153, 0);
  border: 1px solid var(--wcfContentBackground);
  border-radius: 50%;
  bottom: 0;
  height: 12px;
  position: absolute;
  right: 6px;
  width: 12px;
  z-index: 1;
}

.userCard__header__interactions {
  display: flex;
  gap: 8px;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.userCard__header__interactions .button {
  box-shadow: var(--wcfBoxShadowImageButton);
  border-radius: 50%;
  padding: 6px 4px;
}

.userCard__footer {
  border-top: 1px solid var(--wcfContentBorderInner);
  padding: 10px 5px;
}

.userCard__content {
  display: flex;
  flex-direction: column;
  flex: 1 auto;
  padding: 5px 20px 10px 20px;
}

.userCard__username {
  display: inline;
  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__link {
  color: inherit;
}
.userCard__link::before {
  content: "";
  inset: 0;
  position: absolute;
}
.userCard__link:hover {
  color: inherit;
}

.userCard__statusIcons {
  display: inline;
  position: relative;
  z-index: 1;
}

.userCard__footer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.userCard__footer__statsItem {
  display: flex;
  color: inherit;
  flex-direction: column;
  text-align: center;
  z-index: 1;
}
.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;
  z-index: 1;
}

.userCard__button {
  color: inherit;
}
.userCard__button:hover {
  color: inherit;
}

.userCard__details {
  font-weight: 400;
  margin-top: 15px;
}
@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: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.userCard__details .dataList dd:not(:last-child) {
  margin-bottom: 0;
}

.userCard__details a {
  color: inherit;
  z-index: 1;
}
.userCard__details a:hover {
  color: inherit;
}

.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;
}

.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: 36px 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);
}

.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;
}

@media screen and (max-width: 768px) {
  .userMenuControlPanel {
    font-size: 16px;
  }
}
.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 rgb(255, 255, 255);
    border-radius: 50%;
    content: "";
    height: 16px;
    left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */
    position: absolute;
    width: 16px;
  }
}

.userOnlineIndicator {
  background-color: rgb(0, 153, 0);
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

body[data-page-identifier="com.woltlab.wcf.User"] .contentInteraction:first-child {
  margin-top: 0;
}

body[data-page-identifier="com.woltlab.wcf.User"] .userProfileContent:first-child {
  margin-top: 0;
}

.userProfileHeader {
  flex: 1 1 auto;
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadowCard);
  margin-bottom: 30px;
  overflow: hidden;
}

.userProfileHeader__coverPhotoContainer {
  position: relative;
}

.userProfileHeader__manageButtons {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: end;
}

.userProfileHeader__manageButtons .button {
  box-shadow: var(--wcfBoxShadowImageButton);
}

@media screen and (max-width: 768px) {
  .userProfileHeader__coverPhoto {
    height: 150px;
  }
}
@media screen and (min-width: 769px), print {
  .userProfileHeader__coverPhoto {
    height: 250px;
  }
}

.userProfileHeader__coverPhotoImage {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

.userProfileHeader__content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 20px;
}
@media screen and (max-width: 768px) {
  .userProfileHeader__content {
    padding: 10px;
  }
}

.userProfileHeader__avatar {
  position: relative;
  flex: 0 0 138px;
  align-self: flex-end;
}
@media screen and (max-width: 768px) {
  .userProfileHeader__avatar {
    flex-basis: 74px;
  }
}

.userProfileHeader__avatarBorder {
  /* The color prevents any bleed-through caused by rounding errors. */
  background-color: var(--wcfContentBackground);
  position: absolute;
  bottom: 0;
  left: 0;
  border: 5px solid var(--wcfContentBackground);
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.userProfileHeader__avatar .userAvatarImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.userProfileHeader__title {
  margin-inline-end: 10px;
  flex: 0 0 auto;
}

.userProfileHeader__username {
  display: inline;
  font-size: var(--wcfFontSizeTitle);
  font-weight: 600;
  line-height: 1.05;
}
@media screen and (max-width: 768px) {
  .userProfileHeader__username {
    font-size: var(--wcfFontSizeHeadline);
  }
}

.userProfileHeader__statusIcons {
  display: inline;
  position: relative;
  z-index: 1;
}

.userProfileHeader__stats {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  gap: 5px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .userProfileHeader__stats {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    order: 1;
    overflow: auto;
  }
}

.userProfileHeader__statItem {
  flex: 0 0 auto;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  background-color: var(--wcfSidebarBackground);
  border-radius: 5px;
  text-align: center;
  font-size: 12px;
  color: inherit;
}

.userProfileHeader__statItem:hover {
  color: inherit;
}

.userProfileHeader__statTitle {
  color: var(--wcfContentDimmedText);
}

.userProfileHeader__onlineIndicator {
  background-color: rgb(0, 153, 0);
  border: 2px solid var(--wcfContentBackground);
  border-radius: 50%;
  bottom: 0;
  height: 24px;
  position: absolute;
  right: 6px;
  width: 24px;
}
@media screen and (max-width: 768px) {
  .userProfileHeader__onlineIndicator {
    height: 12px;
    width: 12px;
  }
}

.userProfileHeader__buttons {
  margin-inline-start: auto;
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}

.userProfileHeader__button {
  display: flex;
}

.userProfileHeader__meta {
  flex: 1 0 calc(100% - 148px);
  color: var(--wcfContentDimmedText);
  margin-left: 148px;
}
@media screen and (max-width: 768px) {
  .userProfileHeader__meta {
    margin-left: 0;
    flex-basis: 100%;
  }
}

.userProfileHeader__meta__dataList {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .userProfileHeader__meta__dataList {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .userProfileHeader__meta__dataList {
    font-size: 12px;
  }
}
.userProfileHeader__meta__dataList > dt {
  align-items: center;
  display: inline-flex;
}
.userProfileHeader__meta__dataList > dt:after {
  content: ":";
  padding-left: 1px;
}
.userProfileHeader__meta__dataList > dd {
  display: inline-block;
  vertical-align: middle;
}
.userProfileHeader__meta__dataList > dd:not(:last-of-type) {
  margin-right: 10px;
}
.userProfileHeader__meta__dataList fa-icon {
  margin-right: 2px;
}

.workerStatusIcon[data-status=error] {
  color: rgb(204, 0, 0);
}

.workerStatusIcon[data-status=success] {
  color: rgb(0, 153, 0);
}

/*
 * 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,
.messageTabMenuNavigation > ul > li.active > button::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;
}

#userFriendsOnline > a {
  position: relative;
}

:root {
  --yabfs-friend-bar-height: 0px;
}

#userFriendsOnline > a > .yabfsMenuBadge {
  right: 0;
  box-shadow: -1px 2px 3px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(225, 225, 225, 0.3);
  padding: 1px 6px;
  position: absolute;
  top: 4px;
  z-index: 101;
}

.userMenu[data-origin=userFriendsOnline] .userMenuContent.userMenuContentScrollable {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuTabsContainer {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 10px 0;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuTabsContainer .tabMenu {
  margin: 0;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuTabsContainer .tabMenu > ul {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(var(--yabfs-user-menu-tab-columns, 3), minmax(0, 1fr));
  margin: 0;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuTabsContainer .tabMenu > ul > li {
  min-width: 0;
  text-align: center;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuTabsContainer .tabMenu > ul > li > a {
  align-items: center;
  display: inline-flex;
  font-size: var(--wcfFontSizeSmall) !important;
  gap: 4px;
  justify-content: center;
  line-height: 1.2;
  padding: 8px 6px;
  width: 100%;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuTabsContainer .tabMenu > ul > li > a > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuTabsContainer .tabMenu > ul > li > a > .badge {
  font-size: var(--wcfFontSizeSmall);
  line-height: 1;
  min-width: 18px;
  padding: 3px 5px;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuTabsContainer .tabMenu > ul > li > a > .badge.grey {
  --background-color: rgba(90, 98, 118, 1);
  --color: rgba(255, 255, 255, 0.96);
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuList {
  flex: 1 1 auto;
  min-height: 64px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuRequestActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}
.userMenu[data-origin=userFriendsOnline] .userMenuItem[data-yabfs-pending=true] .userMenuItemContent {
  position: relative;
  z-index: 2;
}
.userMenu[data-origin=userFriendsOnline] .userMenuItem[data-yabfs-pending=true] .userMenuItemLink::before {
  display: none !important;
  pointer-events: none;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuQuickActions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuQuickAction {
  align-items: center;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  min-width: 28px;
  padding: 0 8px;
}
.userMenu[data-origin=userFriendsOnline] .userMenuItem:not([data-yabfs-pending=true]) .yabfsUserMenuQuickActions {
  margin-top: 0;
  pointer-events: auto;
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.userMenu[data-origin=userFriendsOnline] .userMenuItem:not([data-yabfs-pending=true]) .userMenuItemContent,
.userMenu[data-origin=userFriendsOnline] .userMenuItem:not([data-yabfs-pending=true]) .userMenuItemMeta {
  padding-right: 136px;
}

.jsYabfsFriendshipControl .yabfsFriendshipButtonPending {
  background-color: #d9822b;
  color: #fff;
}
.jsYabfsFriendshipControl .yabfsFriendshipButtonFriend {
  background-color: #2e9d50;
  color: #fff;
}

.yabfsUserCardFriendshipControl {
  display: inline-flex;
  gap: 4px;
}

.yabfsPendingRequestMessage {
  background-color: color-mix(in srgb, var(--wcfContentBackground) 78%, var(--wcfContentBorderInner));
  border-left: 3px solid var(--wcfContentBorderInner);
  border-radius: 0 4px 4px 0;
  margin: 8px 0 10px;
  padding: 8px 10px;
  white-space: pre-line;
}

html:not(.touch) .jsYabfsFriendshipControl .yabfsFriendshipButtonPending:hover {
  background-color: #c77727;
  color: #fff;
}
html:not(.touch) .jsYabfsFriendshipControl .yabfsFriendshipButtonFriend:hover {
  background-color: #278544;
  color: #fff;
}

.yabfsFriendBar {
  background-color: var(--wcfHeaderMenuLinkBackground);
  border-top: 1px solid var(--wcfContentBorderInner);
  bottom: 0;
  color: var(--wcfHeaderMenuLink);
  left: 0;
  position: fixed;
  right: 0;
  z-index: 11;
}
@media screen and (max-width: 768px) {
  .yabfsFriendBar {
    display: none !important;
  }
}

@media screen and (min-width: 769px), print {
  html.yabfsFriendBarVisible body {
    padding-bottom: var(--yabfs-friend-bar-height);
  }
}
.yabfsFriendBarContainer {
  align-items: center;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: auto 1fr auto;
  padding: 6px 0;
}
@media screen and (max-width: 768px) {
  .yabfsFriendBarContainer {
    grid-template-columns: 1fr;
  }
}

.yabfsFriendBarTitle {
  font-weight: 400;
  align-items: center;
  display: inline-flex;
  gap: 6px;
  line-height: 24px;
  min-height: 24px;
  padding: 0;
  white-space: nowrap;
}
@media screen and (min-width: 769px), print {
  .yabfsFriendBarTitle {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .yabfsFriendBarTitle {
    font-size: 12px;
  }
}

.yabfsFriendBarContent {
  align-items: center;
  display: flex;
  min-height: 24px;
  min-width: 0;
}

.yabfsFriendBarList {
  align-items: center;
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  overflow-x: auto;
  padding-top: 4px;
}

.yabfsFriendBarItem {
  flex: 0 0 auto;
}

.yabfsFriendBarLink {
  align-items: center;
  border-radius: 4px;
  color: inherit;
  display: inline-flex;
  gap: 6px;
  line-height: 24px;
  min-height: 24px;
  padding: 0 4px;
  text-decoration: none;
}

.yabfsFriendBarAvatar,
.yabfsFriendBarLink .userAvatarImage {
  border-radius: 50%;
  flex: 0 0 24px;
  height: 24px;
  max-height: 24px;
  max-width: 24px;
  width: 24px;
}

.yabfsFriendBarLink:hover {
  background-color: var(--wcfHeaderMenuLinkBackgroundActive);
  color: var(--wcfHeaderMenuLinkActive);
  text-decoration: none;
}

.yabfsFriendBarUsername {
  font-weight: 400;
  line-height: 24px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (min-width: 769px), print {
  .yabfsFriendBarUsername {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .yabfsFriendBarUsername {
    font-size: 12px;
  }
}

.yabfsFriendBarEmpty {
  display: inline-block;
  font-weight: 400;
  opacity: 0.85;
}
@media screen and (min-width: 769px), print {
  .yabfsFriendBarEmpty {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .yabfsFriendBarEmpty {
    font-size: 12px;
  }
}

.yabfsFriendBarAll {
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .yabfsFriendBarAll {
    justify-self: start;
  }
}

.yabfsVisibilityManageLink {
  white-space: nowrap;
}

dl:has(#yabfsCanViewFriendsExceptUsers),
dl:has(#yabfsCanViewFriendsSpecificUsers) {
  display: none !important;
}

.yabfsVisibilityDialog .yabfsVisibilityDialogList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.yabfsVisibilityDialog .yabfsVisibilityDialogListItem {
  align-items: center;
  background-color: var(--wcfButtonBackground);
  border: 1px solid var(--wcfButtonBackground);
  border-radius: var(--wcfBorderRadius);
  color: var(--wcfButtonText);
  display: inline-flex;
  gap: 8px;
  margin: 0;
  max-width: 100%;
  padding: 4px 6px 4px 10px;
}
.yabfsVisibilityDialog .yabfsVisibilityDialogListLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yabfsVisibilityDialog .yabfsVisibilityDialogListRemove {
  min-width: 30px;
  padding: 3px 7px;
}
.yabfsVisibilityDialog .yabfsVisibilityDialogListEmpty {
  margin-top: 12px;
}

.yabfsFriendsSwitch {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}
.yabfsFriendsSwitch .badge {
  margin-left: 2px;
}

.yabfsFriendsOverview .containerBoxContent {
  padding: 18px 22px;
}

.yabfsFriendsMetric {
  font-size: var(--wcfFontSizeHeadline);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.yabfsFriendsRequests .containerBoxContent {
  padding: 0;
}

.yabfsFriendsRequests .containerList > li:first-child {
  border-top-width: 0;
}

.yabfsPendingButtonRow {
  margin-top: 10px;
}

.yabfsFriendQuickAction {
  margin-top: 10px;
}

.yabfsSuggestionReasonPrimary {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  hyphens: none;
  line-clamp: 2;
  line-height: 1.35;
  margin-bottom: 6px;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
}

.yabfsSuggestionReasonList {
  margin: 0 0 8px;
  padding-left: 16px;
}
.yabfsSuggestionReasonList > li {
  margin: 0;
}

.yabfsSuggestionActions {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}
.yabfsSuggestionActions .yabfsFriendQuickAction {
  flex: 1 1 auto;
  margin-top: 0;
  min-width: 0;
}
.yabfsSuggestionActions .button {
  white-space: nowrap;
}

.yabfsSuggestionCardGrid {
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  list-style: none;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .yabfsSuggestionCardGrid {
    grid-template-columns: 1fr;
  }
}

.yabfsSuggestionCard {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorder);
  box-sizing: border-box;
  border-radius: var(--wcfBorderRadiusContainer);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  padding: 20px 10px 10px;
}

.yabfsSuggestionsSection .yabfsSuggestionCard .yabfsSuggestionCardHeader {
  align-items: flex-start !important;
  display: flex !important;
  gap: 12px !important;
}

.yabfsSuggestionsSection .yabfsSuggestionCard .yabfsSuggestionCardAvatar {
  display: block;
  flex: 0 0 48px !important;
  height: 48px !important;
  margin: 0 !important;
  width: 48px !important;
}

.yabfsSuggestionsSection .yabfsSuggestionCard .yabfsSuggestionCardAvatar > a {
  display: block;
  height: 48px !important;
  width: 48px !important;
}

.yabfsSuggestionsSection .yabfsSuggestionCard .yabfsSuggestionCardAvatar .userAvatarImage {
  border-radius: 50%;
  display: block;
  height: 48px !important;
  margin: 0 !important;
  width: 48px !important;
}

.yabfsSuggestionsSection .yabfsSuggestionCard .yabfsSuggestionCardHeadline {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.yabfsSuggestionCardUser {
  display: block;
  font-size: var(--wcfFontSizeHeadline);
  font-weight: 600;
  hyphens: none;
  line-height: 1.2;
  margin-bottom: 1px;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.yabfsSuggestionMore {
  margin-left: auto;
}

.yabfsSuggestionMore > .dropdownToggle {
  min-width: 40px;
  padding-inline: 0;
}

.yabfsSuggestionsFooter {
  margin: 10px 0 0;
}

.yabfsSuggestionSidebarList {
  gap: 12px;
}

.sidebarListItem.yabfsSuggestionSidebarItem {
  align-items: center;
  column-gap: 10px;
  grid-template-areas: "image content action";
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-rows: auto;
}

.sidebarListItem.yabfsSuggestionSidebarItem > .sidebarListItem__image {
  align-self: start;
  grid-area: image;
  margin-right: 0;
}

.sidebarListItem.yabfsSuggestionSidebarItem > .sidebarListItem__image img {
  max-height: 32px;
  max-width: 32px;
}

.sidebarListItem.yabfsSuggestionSidebarItem > .sidebarListItem__content {
  gap: 2px;
  grid-area: content;
  min-width: 0;
}

.sidebarListItem.yabfsSuggestionSidebarItem > .sidebarListItem__content .sidebarListItem__title {
  line-height: 1.2;
  margin: 0;
}

.sidebarListItem.yabfsSuggestionSidebarItem > .sidebarListItem__content .containerContentType {
  line-height: 1.35;
}

.sidebarListItem.yabfsSuggestionSidebarItem > .sidebarListItem__meta.yabfsSuggestionSidebarAction {
  align-items: flex-start;
  align-self: center;
  color: inherit;
  grid-area: action;
  justify-self: end;
  justify-content: flex-end;
  min-width: 40px;
}

.sidebarListItem.yabfsSuggestionSidebarItem > .sidebarListItem__meta.yabfsSuggestionSidebarAction .yabfsFriendQuickAction {
  margin-top: 0;
}

.yabfsSuggestionBoxFooter {
  text-align: center;
}

.yabfsSuggestionBoxLoading {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 40px;
}

.yabfsGamesPlayBoard .yabfsBattleshipShell {
  background: linear-gradient(180deg, color-mix(in srgb, var(--wcfContentBackground), #1a2e4a 12%) 0%, color-mix(in srgb, var(--wcfContentBackground), #050d17 20%) 100%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #87a8d7 12%);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 24px rgba(0, 0, 0, 0.26);
  margin: 0 auto;
  max-width: min(100%, 980px);
  padding: 14px;
  width: min(100%, 980px);
}

.yabfsGamesPlayBoard .yabfsBattleshipMeta {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.yabfsGamesPlayBoard .yabfsBattleshipMetaItem {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 10%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 10px;
  color: var(--wcfContentDimmedText);
  display: block;
  min-width: 0;
  padding: 8px 10px;
}

.yabfsGamesPlayBoard .yabfsBattleshipMetaItem > strong {
  color: var(--wcfContentText);
}

.yabfsGamesPlayBoard .yabfsBattleshipActions {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupPanel {
  background: color-mix(in srgb, var(--wcfContentBackground), #0e1e32 18%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #5e8fd3 24%);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 10px;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupHint {
  color: var(--wcfContentDimmedText);
  margin: 0 0 10px;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupFleet {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 10px;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShip {
  align-items: flex-start;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 10%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #33547f 40%);
  border-radius: 10px;
  color: var(--wcfContentText);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 58px;
  padding: 8px;
  text-align: left;
  touch-action: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
  user-select: none;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShipHeader {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  width: 100%;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShip.isSelected {
  border-color: color-mix(in srgb, var(--wcfButtonPrimaryBackground), #8ec4ff 40%);
  box-shadow: inset 0 0 0 1px rgba(120, 181, 255, 0.3);
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShip.isPlaced {
  border-color: rgba(70, 182, 137, 0.55);
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShip:disabled {
  cursor: default;
}

html:not(.touch) .yabfsGamesPlayBoard .yabfsBattleshipSetupShip:hover {
  border-color: rgba(133, 187, 255, 0.8);
  transform: translateY(-1px);
}

html:not(.touch) .yabfsGamesPlayBoard .yabfsBattleshipSetupShip:disabled:hover {
  border-color: rgba(70, 182, 137, 0.55);
  transform: none;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShipName {
  flex: 1 1 auto;
  font-weight: 600;
  min-width: 0;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShipMeta {
  color: var(--wcfContentDimmedText);
  font-size: var(--wcfFontSizeSmall);
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShipPreview {
  display: block;
  flex: 0 0 auto;
  height: 28px;
  margin-left: auto;
  position: relative;
  width: var(--yabfs-battleship-preview-width);
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShip.isPlaced .yabfsBattleshipSetupShipPreview {
  display: none;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShipPreview::before {
  background-image: var(--yabfs-battleship-ship-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  inset: 0;
  position: absolute;
  transform-origin: center;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShipPreview.isDirectionSouth::before {
  transform: rotate(90deg);
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShipPreview.isDirectionWest::before {
  transform: rotate(180deg);
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShipPreview.isDirectionNorth::before {
  transform: rotate(270deg);
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupShip.isDragging {
  opacity: 0.42;
}

.yabfsGamesPlayBoard .yabfsBattleshipSetupControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yabfsGamesPlayBoard .yabfsBattleshipBoards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yabfsGamesPlayBoard .yabfsBattleshipMobileTabs {
  display: none;
}

.yabfsGamesPlayBoard .yabfsBattleshipBoardCard {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 9%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 12px;
  min-width: 0;
  padding: 10px;
}

.yabfsGamesPlayBoard .yabfsBattleshipBoardTitle {
  font-size: var(--wcfFontSizeHeadline);
  font-weight: 600;
  margin: 0 0 8px;
}

.yabfsGamesPlayBoard .yabfsBattleshipBoard {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(var(--yabfs-battleship-size), minmax(0, 1fr));
  position: relative;
  z-index: 1;
}

.yabfsGamesPlayBoard .yabfsBattleshipBoardFrame {
  overflow: visible;
  position: relative;
}

.yabfsGamesPlayBoard .yabfsBattleshipBoardFrame.isOwn .yabfsBattleshipBoard {
  touch-action: none;
}

.yabfsGamesPlayBoard .yabfsBattleshipShipLayer {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(var(--yabfs-battleship-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--yabfs-battleship-size), minmax(0, 1fr));
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.yabfsGamesPlayBoard .yabfsBattleshipMarkerLayer {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(var(--yabfs-battleship-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--yabfs-battleship-size), minmax(0, 1fr));
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 7;
}

.yabfsGamesPlayBoard .yabfsBattleshipMarkerCell {
  position: relative;
}

.yabfsGamesPlayBoard .yabfsBattleshipShip {
  overflow: visible;
  position: relative;
}

.yabfsGamesPlayBoard .yabfsBattleshipShip::before {
  background-image: var(--yabfs-battleship-ship-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  inset: 0;
  position: absolute;
  transform-origin: center;
}

.yabfsGamesPlayBoard .yabfsBattleshipShip.isVertical::before {
  height: var(--yabfs-battleship-vertical-height);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: var(--yabfs-battleship-vertical-width);
}

.yabfsGamesPlayBoard .yabfsBattleshipBoardFrame.isOwn .yabfsBattleshipCell {
  background: rgba(8, 20, 34, 0.18);
  border-color: rgba(124, 168, 225, 0.32);
}

.yabfsGamesPlayBoard .yabfsBattleshipCell {
  align-items: center;
  aspect-ratio: 1/1;
  appearance: none;
  background: radial-gradient(circle at 30% 28%, #0f2b49 0%, #0a1d34 54%, #091728 100%);
  border: 1px solid rgba(124, 168, 225, 0.28);
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  min-height: 0;
  padding: 0;
  position: relative;
  transition: border-color 0.14s ease, transform 0.1s ease;
  width: 100%;
}

.yabfsGamesPlayBoard button.yabfsBattleshipCell.isSetupCell {
  touch-action: none;
}

.yabfsGamesPlayBoard button.yabfsBattleshipCell {
  cursor: default;
}

html:not(.touch) .yabfsGamesPlayBoard button.yabfsBattleshipCell.isSetupCell {
  cursor: pointer;
}

html:not(.touch) .yabfsGamesPlayBoard button.yabfsBattleshipCell.isSetupCell:hover {
  border-color: rgba(124, 204, 255, 0.72);
  transform: translateY(-1px);
}

.yabfsGamesPlayBoard .yabfsBattleshipCell.isSetupOccupied {
  border-color: rgba(98, 188, 209, 0.5);
}

.yabfsGamesPlayBoard .yabfsBattleshipCell.isSetupSelectedShip {
  box-shadow: inset 0 0 0 1px rgba(130, 208, 255, 0.55);
}

.yabfsGamesPlayBoard .yabfsBattleshipCell.isDropPreview {
  border-color: rgba(117, 215, 255, 0.85);
  box-shadow: inset 0 0 0 1px rgba(129, 224, 255, 0.48);
}

.yabfsGamesPlayBoard .yabfsBattleshipCell.isDropPreviewInvalid {
  border-color: rgba(229, 98, 98, 0.9);
  box-shadow: inset 0 0 0 1px rgba(236, 112, 112, 0.55);
}

.yabfsGamesPlayBoard .yabfsBattleshipCell .yabfsBattleshipMarker,
.yabfsGamesPlayBoard .yabfsBattleshipMarkerLayer .yabfsBattleshipMarker {
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 54%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54%;
  z-index: 8;
}

.yabfsGamesPlayBoard .yabfsBattleshipCell.isMiss .yabfsBattleshipMarker,
.yabfsGamesPlayBoard .yabfsBattleshipMarkerCell.isMiss .yabfsBattleshipMarker {
  background-image: var(--yabfs-battleship-miss-marker);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.38));
}

.yabfsGamesPlayBoard .yabfsBattleshipCell.isHit {
  background: radial-gradient(circle at 30% 28%, #4e191f 0%, #3c1218 54%, #23090d 100%);
  border-color: rgba(229, 96, 96, 0.62);
}

.yabfsGamesPlayBoard .yabfsBattleshipCell.isHit .yabfsBattleshipMarker,
.yabfsGamesPlayBoard .yabfsBattleshipMarkerCell.isHit .yabfsBattleshipMarker {
  background-image: var(--yabfs-battleship-hit-marker);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.42));
}

.yabfsGamesPlayBoard .yabfsBattleshipBoardFrame.isOwn .yabfsBattleshipCell.isShip {
  background: rgba(6, 16, 28, 0.06);
}

.yabfsGamesPlayBoard .yabfsBattleshipBoardFrame.isOpponent .yabfsBattleshipCell.isHit {
  background: rgba(58, 14, 20, 0.56);
}

.yabfsGamesPlayBoard .yabfsBattleshipBoardFrame.isOpponent .yabfsBattleshipCell.isMiss {
  background: rgba(255, 255, 255, 0.72);
}

html[data-color-scheme=dark] .yabfsGamesPlayBoard .yabfsBattleshipBoardFrame.isOpponent .yabfsBattleshipCell.isMiss,
html[data-color-scheme=dark] .yabfsGamesPlayBoard .yabfsBattleshipBoardFrame.isOwn .yabfsBattleshipCell.isMiss {
  background: rgba(255, 255, 255, 0.34);
  border-color: rgba(136, 180, 236, 0.58);
}

html[data-color-scheme=dark] .yabfsGamesPlayBoard .yabfsBattleshipCell.isMiss .yabfsBattleshipMarker,
html[data-color-scheme=dark] .yabfsGamesPlayBoard .yabfsBattleshipMarkerCell.isMiss .yabfsBattleshipMarker {
  filter: brightness(1.35) contrast(1.22) saturate(1.12) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 4px rgba(135, 188, 255, 0.28));
}

html:not(.touch) .yabfsGamesPlayBoard button.yabfsBattleshipCell.isTargetable {
  cursor: pointer;
}

html:not(.touch) .yabfsGamesPlayBoard button.yabfsBattleshipCell.isTargetable:hover {
  border-color: rgba(136, 188, 255, 0.8);
  transform: translateY(-1px);
}

.yabfsGamesPlayBoard button.yabfsBattleshipCell.isQueuedShot {
  border-color: rgba(255, 203, 101, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 219, 135, 0.62);
}

html:not(.touch) .yabfsGamesPlayBoard button.yabfsBattleshipCell.isQueuedShot:hover {
  border-color: rgba(255, 218, 128, 0.95);
}

.yabfsGamesPlayBoard button.yabfsBattleshipCell:disabled {
  cursor: default;
}

.yabfsBattleshipDragGhost {
  height: var(--yabfs-battleship-drag-height);
  left: 0;
  opacity: 0.92;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: var(--yabfs-battleship-drag-width);
  z-index: 99999;
}

.yabfsBattleshipDragGhost::before {
  background-image: var(--yabfs-battleship-ship-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  inset: 0;
  position: absolute;
  transform-origin: center;
}

.yabfsBattleshipDragGhost.isDirectionSouth::before {
  transform: rotate(90deg);
}

.yabfsBattleshipDragGhost.isDirectionWest::before {
  transform: rotate(180deg);
}

.yabfsBattleshipDragGhost.isDirectionNorth::before {
  transform: rotate(270deg);
}

@media screen and (max-width: 1024px) {
  .yabfsGamesPlayBoard .yabfsBattleshipBoards {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 680px) {
  .yabfsGamesPlayBoard .yabfsBattleshipShell {
    border-radius: 12px;
    padding: 10px;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipMeta {
    grid-template-columns: 1fr;
    margin-bottom: 10px;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipBoards {
    gap: 10px;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipMobileTabs {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 10px;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipMobileTab {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 36px;
    padding: 0 10px;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipMobileTab:not(.isActive) {
    background: color-mix(in srgb, var(--wcfButtonBackground), #1c2e48 25%);
    border-color: color-mix(in srgb, var(--wcfButtonBackgroundActive), #466b9f 30%);
    color: var(--wcfButtonText);
  }
  .yabfsGamesPlayBoard .yabfsBattleshipBoards[data-yabfs-mobile-tab=own] .yabfsBattleshipBoardCard[data-yabfs-board=opponent] {
    display: none;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipBoards[data-yabfs-mobile-tab=opponent] .yabfsBattleshipBoardCard[data-yabfs-board=own] {
    display: none;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipSetupFleet {
    grid-template-columns: 1fr;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipSetupControls {
    flex-direction: column;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipBoardCard {
    border-radius: 10px;
    padding: 8px;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipBoard {
    gap: 3px;
  }
  .yabfsGamesPlayBoard .yabfsBattleshipCell {
    border-radius: 6px;
  }
}
.yabfsGamesPlayBoard .yabfsBlackjackTable {
  background: radial-gradient(circle at 12% 8%, color-mix(in srgb, #f9d27f, transparent 84%), transparent 58%), radial-gradient(circle at 88% 10%, color-mix(in srgb, #71dfa0, transparent 87%), transparent 62%), linear-gradient(154deg, #0d281f 0%, #081a15 52%, #061913 100%);
  border: 1px solid color-mix(in srgb, #edd8a3, transparent 76%);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff, transparent 93%), inset 0 -38px 70px color-mix(in srgb, #000, transparent 72%), 0 20px 44px color-mix(in srgb, #000, transparent 62%);
  color: #f7f1de;
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 16px;
  position: relative;
}

.yabfsGamesPlayBoard .yabfsBlackjackTable::before {
  background: repeating-linear-gradient(132deg, color-mix(in srgb, #fff, transparent 98%) 0, color-mix(in srgb, #fff, transparent 98%) 2px, transparent 2px, transparent 9px);
  content: "";
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
}

.yabfsGamesPlayBoard .yabfsBlackjackTable::after {
  animation: yabfsBlackjackFeltLight 5600ms ease-in-out infinite;
  background: radial-gradient(circle at 50% 52%, color-mix(in srgb, #f6d27b, transparent 92%), transparent 62%);
  content: "";
  inset: -22%;
  pointer-events: none;
  position: absolute;
}

.yabfsGamesPlayBoard .yabfsBlackjackTableHeader {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
  z-index: 1;
}

.yabfsGamesPlayBoard .yabfsBlackjackMetaItem {
  background: color-mix(in srgb, #000, transparent 74%);
  border: 1px solid color-mix(in srgb, #f1dfaa, transparent 84%);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff, transparent 94%);
  font-size: var(--wcfFontSizeSmall);
  line-height: 1.3;
  min-width: 0;
  padding: 8px 10px;
}

.yabfsGamesPlayBoard .yabfsBlackjackProgress {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  position: relative;
  z-index: 1;
}

.yabfsGamesPlayBoard .yabfsBlackjackProgressItem {
  background: color-mix(in srgb, #000, transparent 78%);
  border: 1px solid color-mix(in srgb, #f1dfaa, transparent 88%);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff, transparent 95%);
  font-size: var(--wcfFontSizeSmall);
  padding: 7px 9px;
}

.yabfsGamesPlayBoard .yabfsBlackjackHandPanel {
  background: color-mix(in srgb, #000, transparent 78%);
  border: 1px solid color-mix(in srgb, #f1dfaa, transparent 86%);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff, transparent 94%), 0 8px 18px color-mix(in srgb, #000, transparent 79%);
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  position: relative;
  z-index: 1;
}

.yabfsGamesPlayBoard .yabfsBlackjackHandHeader h3 {
  font-size: var(--wcfFontSizeHeadline);
  line-height: 1.15;
  margin: 0;
}

.yabfsGamesPlayBoard .yabfsBlackjackHandHeader p {
  color: color-mix(in srgb, #fff, transparent 20%);
  font-size: var(--wcfFontSizeSmall);
  margin: 2px 0 0;
}

.yabfsGamesPlayBoard .yabfsBlackjackHandMeta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--wcfFontSizeSmall);
  gap: 8px;
  margin-top: 8px;
}

.yabfsGamesPlayBoard .yabfsBlackjackCardStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 98px;
  perspective: 1100px;
  position: relative;
  transform-style: preserve-3d;
  z-index: 1;
}

.yabfsGamesPlayBoard .yabfsBlackjackCard {
  border: 1px solid color-mix(in srgb, #fff, transparent 92%);
  border-radius: 10px;
  box-shadow: 0 10px 20px color-mix(in srgb, #000, transparent 66%);
  margin: 0;
  overflow: hidden;
  perspective: 880px;
  transform-style: preserve-3d;
  transform: translateZ(0) rotate(var(--card-tilt, 0deg));
  width: clamp(62px, 8.6vw, 98px);
}

.yabfsGamesPlayBoard .yabfsBlackjackCardInner {
  display: block;
  overflow: hidden;
  position: relative;
  transition: transform 260ms cubic-bezier(0.22, 0.69, 0.24, 1);
  transform-style: preserve-3d;
}

.yabfsGamesPlayBoard .yabfsBlackjackCardFace {
  display: block;
  transition: opacity 180ms ease, transform 180ms ease;
}

.yabfsGamesPlayBoard .yabfsBlackjackCardFace.isFront {
  inset: 0;
  opacity: 0;
  position: absolute;
  transform: scaleX(0.98);
  z-index: 1;
}

.yabfsGamesPlayBoard .yabfsBlackjackCardFace.isBack {
  opacity: 1;
  position: relative;
  z-index: 2;
}

.yabfsGamesPlayBoard .yabfsBlackjackCard img {
  display: block;
  height: auto;
  width: 100%;
}

.yabfsGamesPlayBoard .yabfsBlackjackCard.isRevealed .yabfsBlackjackCardInner {
  transform: none;
}

.yabfsGamesPlayBoard .yabfsBlackjackCard.isRevealed .yabfsBlackjackCardFace.isFront {
  opacity: 1;
  transform: scaleX(1);
}

.yabfsGamesPlayBoard .yabfsBlackjackCard.isRevealed .yabfsBlackjackCardFace.isBack {
  opacity: 0;
}

.yabfsGamesPlayBoard .yabfsBlackjackCard.isFresh {
  animation: yabfsBlackjackDealTravel 560ms cubic-bezier(0.17, 0.74, 0.24, 1) both;
  animation-delay: calc(var(--deal-order, 0) * 170ms);
  will-change: transform, opacity;
}

.yabfsGamesPlayBoard .yabfsBlackjackCard.isFresh.isRevealed .yabfsBlackjackCardInner {
  animation: none;
  animation-delay: calc(var(--deal-order, 0) * 170ms + 280ms);
  will-change: opacity, transform;
}

.yabfsGamesPlayBoard .yabfsBlackjackCard.isFresh.isRevealed .yabfsBlackjackCardFace.isBack {
  animation: yabfsBlackjackFlipCover 420ms cubic-bezier(0.2, 0.72, 0.22, 1) both;
  animation-delay: calc(var(--deal-order, 0) * 170ms + 280ms);
}

.yabfsGamesPlayBoard .yabfsBlackjackCard.isFresh.isRevealed .yabfsBlackjackCardFace.isFront {
  animation: yabfsBlackjackFlipReveal 420ms cubic-bezier(0.2, 0.72, 0.22, 1) both;
  animation-delay: calc(var(--deal-order, 0) * 170ms + 280ms);
}

.yabfsGamesPlayBoard .yabfsBlackjackCardStrip.isDealer .yabfsBlackjackCard.isFresh {
  animation-duration: 600ms;
}

.yabfsGamesPlayBoard .yabfsBlackjackCardStrip.isOpponent .yabfsBlackjackCard.isFresh {
  animation-duration: 580ms;
}

.yabfsGamesPlayBoard .yabfsBlackjackDeckStack {
  animation: yabfsBlackjackDeckPulse 4200ms ease-in-out infinite;
  filter: drop-shadow(0 8px 12px color-mix(in srgb, #000, transparent 65%));
  pointer-events: none;
  position: absolute;
  right: clamp(10px, 1.6vw, 16px);
  top: 10px;
  transform: rotate(2deg);
  transform-origin: 50% 54%;
  width: clamp(62px, 8.6vw, 98px);
  aspect-ratio: 5/7.1;
  z-index: 3;
}

.yabfsGamesPlayBoard .yabfsBlackjackDeckCard {
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, #fff, transparent 92%);
  box-shadow: 0 6px 16px color-mix(in srgb, #000, transparent 66%);
  display: block;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  width: 100%;
}

.yabfsGamesPlayBoard .yabfsBlackjackDeckCard.isLayer1 {
  animation: yabfsBlackjackDeckTopGlow 2800ms ease-in-out infinite;
  z-index: 3;
}

.yabfsGamesPlayBoard .yabfsBlackjackDeckCard.isLayer2 {
  transform: translate(-4px, -3px) rotate(-3.5deg);
  z-index: 2;
}

.yabfsGamesPlayBoard .yabfsBlackjackDeckCard.isLayer3 {
  transform: translate(-8px, -6px) rotate(-6.5deg);
  z-index: 1;
}

.yabfsGamesPlayBoard .yabfsBlackjackDeckStack.isShuffling .yabfsBlackjackDeckCard.isLayer1 {
  animation: yabfsBlackjackDeckTopGlow 2800ms ease-in-out infinite, yabfsBlackjackDeckShuffleLayer1 760ms cubic-bezier(0.2, 0.76, 0.24, 1) 1;
}
.yabfsGamesPlayBoard .yabfsBlackjackDeckStack.isShuffling .yabfsBlackjackDeckCard.isLayer2 {
  animation: yabfsBlackjackDeckShuffleLayer2 820ms cubic-bezier(0.2, 0.76, 0.24, 1) 1;
}
.yabfsGamesPlayBoard .yabfsBlackjackDeckStack.isShuffling .yabfsBlackjackDeckCard.isLayer3 {
  animation: yabfsBlackjackDeckShuffleLayer3 860ms cubic-bezier(0.2, 0.76, 0.24, 1) 1;
}

.yabfsGamesPlayBoard .yabfsBlackjackPlayerGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  z-index: 1;
}

.yabfsGamesPlayBoard .yabfsBlackjackHandPanel.isDealerPanel {
  overflow: hidden;
  padding-right: clamp(98px, 12vw, 142px);
}

.yabfsGamesPlayBoard .yabfsBlackjackPlayerGrid.isSingle {
  grid-template-columns: 1fr;
}

.yabfsGamesPlayBoard .yabfsBlackjackActionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yabfsGamesPlayBoard .yabfsBlackjackBetPanel {
  background: color-mix(in srgb, #000, transparent 76%);
  border: 1px solid color-mix(in srgb, #f1dfaa, transparent 84%);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff, transparent 94%);
  display: grid;
  gap: 10px;
  padding: 10px;
  position: relative;
  z-index: 1;
}

.yabfsGamesPlayBoard .yabfsBlackjackBetHeader {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yabfsGamesPlayBoard .yabfsBlackjackBetHeader span {
  color: color-mix(in srgb, #fff, transparent 24%);
  font-size: var(--wcfFontSizeSmall);
}

.yabfsGamesPlayBoard .yabfsBlackjackChipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yabfsGamesPlayBoard .yabfsBlackjackChipButton {
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: filter 180ms ease, transform 120ms ease;
}

.yabfsGamesPlayBoard .yabfsBlackjackChipButton:hover:not(:disabled) {
  filter: drop-shadow(0 0 7px color-mix(in srgb, #ffdf86, transparent 55%));
  transform: translateY(-2px);
}

.yabfsGamesPlayBoard .yabfsBlackjackChipButton:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.yabfsGamesPlayBoard .yabfsBlackjackChipButton img {
  display: block;
  height: 44px;
  width: 44px;
}

.yabfsGamesPlayBoard .yabfsBlackjackBetActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yabfsGamesPlayBoard .yabfsBlackjackBetValue {
  margin-right: auto;
}

.yabfsGamesPlayBoard .yabfsBlackjackRoundDelay {
  align-items: center;
  background: color-mix(in srgb, #000, transparent 74%);
  border: 1px solid color-mix(in srgb, #f1dfaa, transparent 82%);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  padding: 10px;
  position: relative;
  z-index: 1;
}

.yabfsGamesPlayBoard .yabfsBlackjackActionRow .button {
  min-width: 120px;
}

.yabfsGamesPlayBoard .yabfsBlackjackOutcomeBadge {
  border-radius: 999px;
  font-size: var(--wcfFontSizeSmall);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  text-transform: uppercase;
}

.yabfsGamesPlayBoard .yabfsBlackjackOutcomeBadge.isWin {
  background: color-mix(in srgb, #2db35d, transparent 24%);
  color: #f4fff6;
}

.yabfsGamesPlayBoard .yabfsBlackjackOutcomeBadge.isLose {
  background: color-mix(in srgb, #d84d53, transparent 20%);
  color: #fff4f4;
}

.yabfsGamesPlayBoard .yabfsBlackjackOutcomeBadge.isPush {
  background: color-mix(in srgb, #d7a84d, transparent 22%);
  color: #fff8ea;
}

.yabfsGamesPlayBoard .yabfsBlackjackHandEmpty {
  color: color-mix(in srgb, #fff, transparent 34%);
  margin: 0;
}

.yabfsBlackjackInviteDialog .yabfsBlackjackInviteProgress,
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteBestOf,
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteChips,
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteRoundDelay,
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteRole {
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
}
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteRole > legend {
  font-weight: 600;
  margin-inline: 4px;
  padding: 0 4px;
}
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteRole > label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteProgress > legend,
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteBestOf > legend,
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteChips > legend,
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteRoundDelay > legend {
  font-weight: 600;
  margin-inline: 4px;
  padding: 0 4px;
}
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteProgress > label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteChips > label,
.yabfsBlackjackInviteDialog .yabfsBlackjackInviteRoundDelay > label {
  display: grid;
  gap: 4px;
}

@keyframes yabfsBlackjackDealTravel {
  0% {
    opacity: 0;
    transform: translate(var(--deal-from-x, 170px), var(--deal-from-y, -132px)) scale(0.42) rotate(calc(-20deg + var(--card-tilt, 0deg)));
  }
  56% {
    opacity: 1;
    transform: translate(-8px, 1px) scale(1.04) rotate(calc(-2deg + var(--card-tilt, 0deg)));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(var(--card-tilt, 0deg));
  }
}
@keyframes yabfsBlackjackFlipReveal {
  0% {
    opacity: 0;
    transform: scaleX(0.14);
  }
  52% {
    opacity: 0;
    transform: scaleX(0.12);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes yabfsBlackjackFlipCover {
  0% {
    opacity: 1;
    transform: scaleX(1);
  }
  48% {
    opacity: 1;
    transform: scaleX(0.1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0.08);
  }
}
@keyframes yabfsBlackjackDeckPulse {
  0%, 100% {
    transform: rotate(2deg) translateY(0);
  }
  50% {
    transform: rotate(2deg) translateY(-2px);
  }
}
@keyframes yabfsBlackjackDeckTopGlow {
  0%, 100% {
    filter: brightness(0.92);
  }
  50% {
    filter: brightness(1.08);
  }
}
@keyframes yabfsBlackjackDeckShuffleLayer1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  30% {
    transform: translate(3px, -2px) rotate(1.8deg);
  }
  58% {
    transform: translate(-2px, 1px) rotate(-1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes yabfsBlackjackDeckShuffleLayer2 {
  0% {
    transform: translate(-4px, -3px) rotate(-3.5deg);
  }
  28% {
    transform: translate(-20px, -10px) rotate(-15deg);
  }
  54% {
    transform: translate(9px, -2px) rotate(7deg);
  }
  100% {
    transform: translate(-4px, -3px) rotate(-3.5deg);
  }
}
@keyframes yabfsBlackjackDeckShuffleLayer3 {
  0% {
    transform: translate(-8px, -6px) rotate(-6.5deg);
  }
  24% {
    transform: translate(-26px, -13px) rotate(-18deg);
  }
  50% {
    transform: translate(11px, -3px) rotate(8deg);
  }
  100% {
    transform: translate(-8px, -6px) rotate(-6.5deg);
  }
}
@keyframes yabfsBlackjackFeltLight {
  0%, 100% {
    opacity: 0.46;
  }
  50% {
    opacity: 0.72;
  }
}
@media screen and (max-width: 768px) {
  .yabfsGamesPlayBoard .yabfsBlackjackTable {
    gap: 10px;
    padding: 10px;
  }
  .yabfsGamesPlayBoard .yabfsBlackjackDeckStack {
    display: none;
  }
  .yabfsGamesPlayBoard .yabfsBlackjackHandPanel.isDealerPanel {
    padding-right: 9px;
  }
  .yabfsGamesPlayBoard .yabfsBlackjackTableHeader,
  .yabfsGamesPlayBoard .yabfsBlackjackPlayerGrid {
    grid-template-columns: 1fr;
  }
  .yabfsGamesPlayBoard .yabfsBlackjackMetaItem,
  .yabfsGamesPlayBoard .yabfsBlackjackHandPanel {
    padding: 9px;
  }
  .yabfsGamesPlayBoard .yabfsBlackjackActionRow .button {
    flex: 1 1 0;
    min-width: 0;
  }
  .yabfsGamesPlayBoard .yabfsBlackjackChipButton img {
    height: 38px;
    width: 38px;
  }
  .yabfsGamesPlayBoard .yabfsBlackjackBetActions .button {
    flex: 1 1 auto;
  }
}
@media (max-width: 768px) {
  .yabfsGamesPlayBoard .yabfsBlackjackDeckStack {
    display: none;
  }
}
.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour {
  background: linear-gradient(180deg, #1f6ac4 0%, #1c5eb0 55%, #184f96 100%);
  border: 1px solid color-mix(in srgb, #3f8be8, #fff 18%);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.32);
  gap: 8px;
  max-width: min(100%, 760px);
  padding: 12px;
  width: min(100%, 760px);
}

.yabfsGamesPlayBoard .yabfsConnectFourShell {
  margin: 0 auto;
  max-width: min(100%, 760px);
  width: min(100%, 760px);
}

.yabfsGamesPlayBoard .yabfsConnectFourShell.isMirrored .yabfsC4DropRow,
.yabfsGamesPlayBoard .yabfsConnectFourShell.isMirrored .yabfsTttBoard.isConnectFour {
  transform: scaleX(-1);
}

.yabfsGamesPlayBoard .yabfsC4DropRow {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(var(--yabfs-board-width, 7), minmax(0, 1fr));
  margin: 0 auto 10px;
  max-width: min(100%, 760px);
  padding: 0 4px;
  width: min(100%, 760px);
}

.yabfsGamesPlayBoard .yabfsC4DropButton {
  align-items: center;
  appearance: none;
  background: color-mix(in srgb, #2e84e8, #1f2a37 35%);
  border: 1px solid color-mix(in srgb, #5aa3ff, #1f2a37 25%);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

html:not(.touch) .yabfsGamesPlayBoard .yabfsC4DropButton:hover:not(:disabled) {
  background: color-mix(in srgb, #4b9dff, #24518f 22%);
  border-color: color-mix(in srgb, #7fb9ff, #1f2a37 15%);
  transform: translateY(-1px);
}

.yabfsGamesPlayBoard .yabfsC4DropButton.isDisabled,
.yabfsGamesPlayBoard .yabfsC4DropButton:disabled {
  background: color-mix(in srgb, var(--wcfButtonBackground), #000 22%);
  border-color: color-mix(in srgb, var(--wcfButtonBackground), #000 8%);
  color: rgba(255, 255, 255, 0.45);
  cursor: default;
}

.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell {
  align-items: center;
  appearance: none;
  aspect-ratio: 1/1;
  background: radial-gradient(circle at 50% 34%, #091629 0%, #0a1a2f 48%, #081222 74%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: transparent;
  cursor: default;
  display: inline-flex;
  font-size: 0;
  justify-content: center;
  line-height: 1;
  min-height: 0;
  outline: none;
  padding: 0;
  pointer-events: auto;
  text-shadow: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
  -webkit-text-stroke: 0;
}

.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell.isEmpty {
  color: transparent;
  font-size: 0;
}

.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell.isPlayable {
  cursor: pointer;
}

html:not(.touch) .yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell.isPlayable:hover {
  border-color: rgba(108, 187, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(120, 197, 255, 0.45), 0 0 0 1px rgba(56, 141, 222, 0.34);
  transform: translateY(-1px);
}

.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell:disabled {
  cursor: default;
}

.yabfsGamesPlayBoard .yabfsC4Disc {
  border-radius: 50%;
  display: block;
  height: 74%;
  opacity: 0;
  transition: opacity 0.12s ease;
  width: 74%;
}

.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell.isX .yabfsC4Disc,
.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell.isO .yabfsC4Disc {
  opacity: 1;
}

.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell.isX .yabfsC4Disc {
  background: radial-gradient(circle at 30% 30%, #ff9494 2%, #ef4747 42%, #9d171f 88%);
  box-shadow: inset -2px -5px 8px rgba(90, 9, 15, 0.44), inset 2px 2px 5px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.45);
}

.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell.isO .yabfsC4Disc {
  background: radial-gradient(circle at 30% 30%, #fff2a0 2%, #ffd84a 42%, #b48914 88%);
  box-shadow: inset -2px -5px 8px rgba(120, 84, 8, 0.52), inset 2px 2px 5px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.45);
}

.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell.isFreshDrop .yabfsC4Disc {
  animation: yabfsConnectFourDrop 180ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell.winner {
  background: radial-gradient(circle at 50% 34%, #102432 0%, #123a24 44%, #0f2a1c 76%);
  border-color: rgba(82, 217, 118, 0.72);
  box-shadow: inset 0 0 0 1px rgba(91, 224, 126, 0.5);
}

@media screen and (max-width: 680px) {
  .yabfsGamesPlayBoard .yabfsConnectFourShell,
  .yabfsGamesPlayBoard .yabfsC4DropRow,
  .yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour {
    max-width: 100%;
    width: 100%;
  }
  .yabfsGamesPlayBoard .yabfsC4DropRow {
    gap: 6px;
    margin-bottom: 8px;
    padding: 0 2px;
  }
  .yabfsGamesPlayBoard .yabfsC4DropButton {
    font-size: 11px;
    height: 24px;
  }
  .yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour {
    gap: 6px;
    padding: 8px;
  }
  .yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour .yabfsTttCell {
    border-radius: 10px;
  }
}
@media screen and (max-width: 420px) {
  .yabfsGamesPlayBoard .yabfsC4DropRow {
    gap: 4px;
  }
  .yabfsGamesPlayBoard .yabfsC4DropButton {
    height: 22px;
  }
  .yabfsGamesPlayBoard .yabfsTttBoard.isConnectFour {
    gap: 4px;
    padding: 6px;
  }
}
@keyframes yabfsConnectFourDrop {
  0% {
    opacity: 0.35;
    transform: translateY(-16px) scale(0.88);
  }
  80% {
    opacity: 1;
    transform: translateY(1px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.userMenu[data-origin=userFriendsOnline] .yabfsUserMenuQuickAction.yabfsUserMenuQuickActionGame.isTurn {
  border-color: color-mix(in srgb, #ffca5f, transparent 40%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffca5f, transparent 55%);
  color: #ffca5f;
}

.yabfsGamesHub {
  display: grid;
  gap: 14px;
}

.yabfsGamesContextBoxHero .boxContent {
  background: radial-gradient(circle at right top, color-mix(in srgb, var(--wcfButtonPrimaryBackground), transparent 76%) 0%, transparent 56%), linear-gradient(130deg, color-mix(in srgb, var(--wcfContentBackground), #000 4%), color-mix(in srgb, var(--wcfContentBackground), #000 12%));
  border: 1px solid color-mix(in srgb, var(--wcfButtonPrimaryBackground), transparent 74%);
  border-radius: var(--wcfBorderRadiusContainer);
}

.yabfsGamesContextHeader {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.yabfsGamesContextUser {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.yabfsGamesContextAvatar,
.yabfsGamesContextAvatar .userAvatarImage {
  border-radius: 50%;
  display: block;
  height: 48px;
  width: 48px;
}

.yabfsGamesContextMeta {
  min-width: 0;
}

.yabfsGamesContextTitle {
  margin: 0 0 2px;
}

.yabfsGamesContextTitle a {
  text-decoration: none;
}

.yabfsGamesContextSubtitle {
  color: var(--wcfContentDimmedText);
  margin: 0;
}

.yabfsGamesContextActions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.yabfsGamesOverviewBox .boxContent {
  padding: 12px;
}

.yabfsGamesKpiStrip {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 1080px) {
  .yabfsGamesKpiStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 640px) {
  .yabfsGamesKpiStripCompact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.yabfsGamesKpiItem {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 10%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 10px;
  min-width: 0;
  padding: 10px 12px;
}

.yabfsGamesKpiItem dt {
  color: var(--wcfContentDimmedText);
  font-size: var(--wcfFontSizeSmall);
  margin: 0;
  text-transform: uppercase;
}

.yabfsGamesKpiItem dd {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1;
  margin: 4px 0 0;
}

.yabfsGamesCatalogShell {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
}
@media screen and (max-width: 1180px) {
  .yabfsGamesCatalogShell {
    grid-template-columns: minmax(0, 1fr);
  }
}

.yabfsGamesRulesSidebar .boxContent {
  display: flex;
}

@media screen and (min-width: 545px), print {
  .yabfsGamesRulesDialog > .dialog {
    --dialog-max-width: min(94vw, 1120px);
    width: fit-content;
    max-width: var(--dialog-max-width) !important;
  }
}
.yabfsGamesRulesDialogContent {
  width: auto;
  max-height: min(70vh, 760px);
  overflow: auto;
}

.yabfsGamesModeSelectDialog {
  display: grid;
  gap: 12px;
}

.yabfsGamesModeSelectDescription {
  margin: 0;
}

.yabfsGamesModeSelectOptions {
  display: grid;
  gap: 8px;
}

.yabfsGamesModeSelectOption {
  align-items: center;
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  margin: 0;
  min-height: 42px;
  padding: 8px 10px;
}

.yabfsGamesCatalogBox .boxContent,
.yabfsGamesRecentBox .boxContent,
.yabfsGamesBoardBox .boxContent,
.yabfsGamesHeadToHeadBox .boxContent,
.yabfsGamesMatchesBox .boxContent {
  padding: 12px;
}

.yabfsGameCatalog {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.yabfsGameCatalogItem {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 10%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  margin: 0;
  min-width: 0;
  padding: 12px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

html:not(.touch) .yabfsGameCatalogItem:hover {
  border-color: color-mix(in srgb, var(--wcfButtonPrimaryBackground), transparent 52%);
  transform: translateY(-2px);
}

.yabfsGameCatalogHeader {
  align-items: center;
  column-gap: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
}

.yabfsGameCatalogMedia {
  align-items: center;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 18%);
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 46px;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.yabfsGameCatalogMedia img {
  border-radius: 8px;
  display: block;
  height: 46px;
  object-fit: cover;
  width: 46px;
}

.yabfsGameCatalogText {
  min-width: 0;
}

.yabfsGameCatalogTitle {
  font-size: clamp(16px, 1.3vw, var(--wcfFontSizeHeadline));
  margin: 0 0 3px;
}

.yabfsGameCatalogDescription {
  color: var(--wcfContentDimmedText);
  line-height: 1.3;
  margin: 0;
}

.yabfsGameCatalogAvailability {
  --background-color: var(--wcfButtonPrimaryBackground);
  --color: #fff;
}

.yabfsGameCatalogMiniStats {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 6%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 10px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
}

.yabfsGameCatalogMiniStats > div {
  min-width: 0;
  padding: 10px;
}

.yabfsGameCatalogMiniStats > div + div {
  border-left: 1px solid var(--wcfContentContainerBorder);
}

.yabfsGameCatalogMiniStats dt {
  color: var(--wcfContentDimmedText);
  font-size: var(--wcfFontSizeSmall);
  margin: 0;
  text-transform: uppercase;
}

.yabfsGameCatalogMiniStats dd {
  font-size: var(--wcfFontSizeHeadline);
  font-weight: 700;
  line-height: 1;
  margin: 2px 0 0;
}

@media screen and (max-width: 640px) {
  .yabfsGameCatalogHeader {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 8px;
  }
  .yabfsGameCatalogAvailability {
    grid-column: 1/-1;
    justify-self: start;
  }
  .yabfsGameCatalogMiniStats {
    grid-template-columns: 1fr;
  }
  .yabfsGameCatalogMiniStats > div + div {
    border-left: 0;
    border-top: 1px solid var(--wcfContentContainerBorder);
  }
}
.yabfsGameCatalogActions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.yabfsGameCatalogActions .button {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  min-width: 172px;
}

.yabfsGamesPlayHeaderBox .boxContent {
  display: grid;
  gap: 10px;
}

.yabfsGamesPlayHeader {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.yabfsGamesPlayHeaderMain {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.yabfsGamesPlayHeaderMedia {
  align-items: center;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 20%);
  border-radius: 10px;
  display: inline-flex;
  flex: 0 0 52px;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.yabfsGamesPlayHeaderMedia > img {
  border-radius: 10px;
  display: block;
  height: 52px;
  object-fit: cover;
  width: 52px;
}

.yabfsGamesPlayHeaderText {
  min-width: 0;
}

.yabfsGamesPlayHeaderTitle {
  margin: 0 0 1px;
}

.yabfsGamesPlayHeaderDescription {
  color: var(--wcfContentDimmedText);
  margin: 0;
}

.yabfsGamesPlayOpponent {
  margin: 1px 0 0;
}

.yabfsGamesPlayHeaderActions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.yabfsGamesBackToCatalog .button {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.yabfsGamesSwitcher {
  margin: 0;
}

.yabfsGamesSwitcher > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yabfsGamesSwitcher > ul > li {
  margin: 0;
}

.yabfsGamesPlayLayout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
}
@media screen and (max-width: 1220px) {
  .yabfsGamesPlayLayout {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 860px) {
  .yabfsGamesContextHeader,
  .yabfsGamesPlayHeader {
    align-items: flex-start;
    flex-direction: column;
  }
  .yabfsGamesContextActions,
  .yabfsGamesPlayHeaderActions {
    width: 100%;
  }
  .yabfsGamesPlayHeaderActions .button {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
}
.yabfsGamesPlaySidebar {
  display: grid;
  gap: 14px;
  align-content: start;
}

.yabfsGamesBoardPane {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.yabfsTttMatchList {
  margin: 0;
  max-height: 620px;
  overflow: auto;
  padding: 0;
}

.yabfsTttMatchListCompact {
  max-height: 360px;
}

.yabfsTttMatchItem {
  border-bottom: 1px solid var(--wcfContentContainerBorder);
  list-style: none;
  margin: 0;
}

.yabfsTttMatchItem.active {
  background-color: color-mix(in srgb, var(--wcfButtonPrimaryBackground), transparent 87%);
}

.yabfsTttMatchLink {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px 4px;
  text-decoration: none;
}

.yabfsTttMatchAvatar,
.yabfsTttMatchAvatar img {
  border-radius: 50%;
  display: block;
  height: 40px;
  width: 40px;
}

.yabfsTttMatchMeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yabfsTttMatchName {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yabfsTttMatchGame {
  font-size: var(--wcfFontSizeSmall);
  line-height: 1.2;
  color: var(--wcfContentDimmedText);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yabfsTttMatchState {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
}
@media screen and (min-width: 769px), print {
  .yabfsTttMatchState {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .yabfsTttMatchState {
    font-size: 12px;
  }
}

.yabfsTttMatchEmpty {
  list-style: none;
  padding: 0;
}

.yabfsTttBoardHeader {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: 12px;
}

.yabfsTttOpponentAvatar,
.yabfsTttOpponentAvatar .userAvatarImage {
  border-radius: 50%;
  display: inline-flex;
  height: 48px;
  width: 48px;
}

.yabfsTttOpponentMeta {
  min-width: 0;
}

.yabfsTttOpponentName {
  display: inline-block;
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2px;
}

.yabfsTttStatus {
  color: var(--wcfContentDimmedText);
  margin: 0;
}

.yabfsTttBoard {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 6%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 14px;
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px auto;
  max-width: 560px;
  padding: 10px;
  width: min(100%, 560px);
}

.yabfsTttCell {
  align-items: center;
  aspect-ratio: 1/1;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 14%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 8px;
  color: var(--wcfContentText);
  cursor: pointer;
  display: inline-flex;
  font-size: clamp(28px, 4.3vw, 60px);
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-height: 104px;
}

.yabfsTttCell.isEmpty {
  color: color-mix(in srgb, var(--wcfContentDimmedText), transparent 20%);
  font-size: clamp(17px, 2.1vw, 24px);
  font-weight: 600;
}

.yabfsTttCell:disabled {
  cursor: default;
  opacity: 0.92;
}

.yabfsTttCell.winner {
  background-color: color-mix(in srgb, #31a231, transparent 80%);
}

.yabfsTttBoardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.yabfsGamesHeadToHeadResults {
  border-top: 1px solid var(--wcfContentContainerBorder);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding-top: 10px;
}

.yabfsGamesHeadToHeadResults dt {
  color: var(--wcfContentDimmedText);
  font-size: var(--wcfFontSizeSmall);
  margin: 0;
}

.yabfsGamesHeadToHeadResults dd {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  margin: 2px 0 0;
}

.yabfsGamesPage {
  display: grid;
  gap: 16px;
}

.yabfsGamesPanel .boxContent {
  padding: 14px;
}

.yabfsGamesHeroPanel .boxContent {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.yabfsGamesHeroPanel {
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--wcfButtonPrimaryBackground), transparent 86%) 0%, transparent 54%), linear-gradient(120deg, color-mix(in srgb, var(--wcfContentBackground), #000 5%), color-mix(in srgb, var(--wcfContentBackground), #000 11%));
}

.yabfsGamesHeroIdentity {
  align-items: center;
  column-gap: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.yabfsGamesHeroAvatar,
.yabfsGamesHeroAvatar .userAvatarImage {
  border-radius: 50%;
  display: block;
  height: 52px;
  width: 52px;
}

.yabfsGamesHeroGameMedia {
  align-items: center;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 20%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 12px;
  display: inline-flex;
  flex: 0 0 52px;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.yabfsGamesHeroGameMedia img {
  border-radius: 11px;
  display: block;
  height: 52px;
  object-fit: cover;
  width: 52px;
}

.yabfsGamesHeroText {
  min-width: 0;
}

.yabfsGamesHeroTitle {
  margin: 0 0 2px;
}

.yabfsGamesHeroTitle a {
  text-decoration: none;
}

.yabfsGamesHeroSubtitle,
.yabfsGamesHeroOpponent {
  color: var(--wcfContentDimmedText);
  margin: 0;
}

.yabfsGamesHeroActions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.yabfsGamesCatalogLayout,
.yabfsGamesPlayLayout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
}

.yabfsGamesCatalogSidebar,
.yabfsGamesPlaySidebar {
  display: grid;
  gap: 16px;
  align-content: start;
}

.yabfsGamesCatalogGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.yabfsGamesCatalogCard {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 8%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  margin: 0;
  padding: 12px;
}

.yabfsGamesCatalogCardHeader {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  height: 69px;
}

.yabfsGamesCatalogCardIcon {
  align-items: center;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 18%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 10px;
  display: inline-flex;
  flex: 0 0 46px;
  font-size: 18px;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.yabfsGamesCatalogCardText {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.yabfsGamesCatalogCardTitle {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
}

.yabfsGamesCatalogCardDescription {
  color: var(--wcfContentDimmedText);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.32;
  margin: 0;
  overflow: hidden;
}

.yabfsGamesCatalogCardPreview {
  align-items: center;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 14%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
}

.yabfsGamesCatalogCardPreview img {
  aspect-ratio: 1/1;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.yabfsGamesCatalogCardBadge {
  --background-color: var(--wcfButtonBackground);
  --color: var(--wcfButtonText);
}

.yabfsGamesCatalogCardBadge.isEnabled {
  --background-color: var(--wcfButtonPrimaryBackground);
  --color: #fff;
}

.yabfsGamesMiniStatList {
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 10px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.yabfsGamesMiniStatList li {
  min-width: 0;
  padding: 10px;
}

.yabfsGamesMiniStatList li + li {
  border-left: 1px solid var(--wcfContentContainerBorder);
}

.yabfsGamesMiniStatLabel {
  color: var(--wcfContentDimmedText);
  display: block;
  font-size: var(--wcfFontSizeSmall);
  margin-bottom: 2px;
  text-transform: uppercase;
}

.yabfsGamesMiniStatValue {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.yabfsGamesCatalogCardFooter {
  display: flex;
  margin-top: auto;
  justify-content: center;
}

.yabfsGamesCatalogCardFooter .button {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.yabfsGamesCatalogStatsList .yabfsGamesStatLabel {
  white-space: nowrap;
}

.yabfsGamesStatGrid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.yabfsGamesStatGrid li {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 8%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 10px;
  min-width: 0;
  padding: 10px;
}

.yabfsGamesStatGridThree {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.yabfsGamesStatLabel {
  color: var(--wcfContentDimmedText);
  display: block;
  font-size: var(--wcfFontSizeSmall);
  margin-bottom: 3px;
  text-transform: uppercase;
}

.yabfsGamesStatValue {
  display: block;
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1;
}

.yabfsGamesMatchList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.yabfsGamesMatchListScrollable {
  max-height: 400px;
  overflow: auto;
}

.yabfsGamesMatchItem {
  border-bottom: 1px solid var(--wcfContentContainerBorder);
  margin: 0;
}

.yabfsGamesMatchItem:last-child {
  border-bottom: 0;
}

.yabfsGamesMatchItem.isActive {
  background-color: color-mix(in srgb, var(--wcfButtonPrimaryBackground), transparent 88%);
}

.yabfsGamesMatchLink {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px 4px;
  text-decoration: none;
}

.yabfsGamesMatchAvatar,
.yabfsGamesMatchAvatar .userAvatarImage,
.yabfsGamesMatchAvatar img {
  border-radius: 50%;
  display: block;
  height: 40px;
  width: 40px;
}

.yabfsGamesMatchMeta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.yabfsGamesMatchName {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yabfsGamesMatchGame,
.yabfsGamesMatchState {
  color: var(--wcfContentDimmedText);
  font-size: var(--wcfFontSizeSmall);
  line-height: 1.25;
}

.yabfsGamesSwitcherBar {
  border-top: 1px solid var(--wcfContentContainerBorder);
  margin: 0 14px;
  padding: 10px 0 12px;
}

.yabfsGamesSwitcherBar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.yabfsGamesSwitcherBar li {
  margin: 0;
}

.yabfsGamesSwitcherBar a {
  background: color-mix(in srgb, var(--wcfButtonBackground), #000 16%);
  border: 1px solid var(--wcfButtonBackground);
  border-radius: var(--wcfBorderRadius);
  color: var(--wcfButtonText);
  display: block;
  font-size: var(--wcfFontSizeSmall);
  padding: 6px 10px;
  text-decoration: none;
}

.yabfsGamesSwitcherBar li.active a,
html:not(.touch) .yabfsGamesSwitcherBar a:hover {
  background: var(--wcfButtonPrimaryBackground);
  border-color: var(--wcfButtonPrimaryBackground);
  color: var(--wcfButtonPrimaryText);
}

.yabfsGamesPlayBoard .boxContent {
  display: grid;
  gap: 12px;
}

.yabfsGamesInlineStatList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.yabfsGamesInlineStatList li {
  align-items: center;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 7%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 999px;
  display: inline-flex;
  gap: 7px;
  min-width: 0;
  padding: 4px 10px;
}

.yabfsGamesInlineStatList li span {
  color: var(--wcfContentDimmedText);
  font-size: var(--wcfFontSizeSmall);
}

.yabfsGamesInlineStatList li strong {
  font-size: var(--wcfFontSizeHeadline);
  line-height: 1;
}

.yabfsGamesBoardStage {
  min-height: 0;
}

.yabfsGamesBoardToolbar {
  display: flex;
  justify-content: center;
}

.yabfsGamesInviteAction {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.yabfsGamesPlayBoard #yabfsTttBoardContainer > woltlab-core-notice {
  display: block;
  margin: 0 auto 12px;
  max-width: 560px;
  width: min(100%, 560px);
}

.yabfsGamesPlayBoard .yabfsTttBoardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.yabfsGamesPlayPage {
  display: grid;
  gap: 16px;
}

.boxesSidebarRight .yabfsGamesCatalogStatsSidebar {
  position: sticky;
  top: 12px;
}

.boxesSidebarRight .yabfsGamesHeadToHeadSidebar {
  position: sticky;
  top: 12px;
}

.yabfsGamesHeadToHeadList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.yabfsGamesHeadToHeadList li {
  align-items: center;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 8%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 0;
  min-height: 48px;
  padding: 8px 10px;
}

.yabfsGamesHeadToHeadList li + li {
  margin-top: 8px;
}

.yabfsGamesHeadToHeadList .yabfsGamesStatLabel {
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yabfsGamesHeadToHeadList .yabfsGamesStatValue {
  flex: 0 0 auto;
  font-size: 34px;
  line-height: 1;
  min-width: 24px;
  text-align: right;
}

@media screen and (max-width: 1120px) {
  .yabfsGamesCatalogLayout,
  .yabfsGamesPlayLayout {
    grid-template-columns: 1fr;
  }
  .yabfsGamesPlaySidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .yabfsGamesMatchPanel {
    grid-column: 1/-1;
  }
  .boxesSidebarRight .yabfsGamesHeadToHeadSidebar {
    position: static;
    top: auto;
  }
  .boxesSidebarRight .yabfsGamesCatalogStatsSidebar {
    position: static;
    top: auto;
  }
}
@media screen and (max-width: 880px) {
  .yabfsGamesHeroPanel .boxContent {
    align-items: flex-start;
    flex-direction: column;
  }
  .yabfsGamesHeroActions {
    width: 100%;
  }
  .yabfsGamesHeroActions .button {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
  .yabfsGamesPlaySidebar {
    grid-template-columns: 1fr;
  }
  .yabfsGamesStatGridThree {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 680px) {
  .yabfsGamesCatalogCardHeader {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .yabfsGamesCatalogCardPreview {
    height: clamp(104px, 40vw, 122px);
    max-width: 122px;
    min-height: 108px;
  }
  .yabfsGamesStatGrid,
  .yabfsGamesStatGridThree {
    grid-template-columns: 1fr 1fr;
  }
  .yabfsGamesBoardStage {
    min-height: 310px;
  }
}
.yabfsAcpGameTitleCell {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.yabfsAcpGameTitleMedia {
  align-items: center;
  display: inline-flex;
  flex: 0 0 24px;
  height: 24px;
  justify-content: center;
  margin-top: 2px;
  width: 24px;
}

.yabfsAcpGameTitleMedia > img {
  border-radius: 4px;
  display: block;
  height: 24px;
  object-fit: cover;
  width: 24px;
}

.yabfsAcpGamePreviewImage {
  border-radius: 6px;
  display: block;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.yabfsAcpGameTitleText {
  min-width: 0;
}

.yabfsAcpGameTitle {
  display: block;
  font-weight: 600;
}

.yabfsAcpGameDescription {
  display: block;
}

.yabfsAcpGamesFilters {
  margin-bottom: 12px;
}

.yabfsAcpGamePreviewSection {
  margin-top: 20px;
}

.yabfsAcpGameEditForm img.previewImage {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 8%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 8px;
  display: block;
  height: 420px;
  margin-bottom: 8px;
  max-height: 420px !important;
  max-width: 420px !important;
  object-fit: contain;
  width: 420px;
}

.yabfsAcpGamePreviewFrame {
  align-items: center;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 8%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 8px;
  display: inline-flex;
  height: 420px;
  justify-content: center;
  overflow: hidden;
  width: 420px;
}

.yabfsAcpGamePreviewFrame > img {
  display: block;
  height: 420px;
  object-fit: contain;
  width: 420px;
}

.yabfsAcpGameGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 380px));
  justify-content: start;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .yabfsAcpGameGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.yabfsAcpGameCard {
  height: 100%;
  margin: 0;
}

.yabfsAcpGameCard .boxContent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.yabfsAcpGameCardHeader {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: 10px;
}

.yabfsAcpGameCardMedia {
  align-items: center;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 18%);
  border-radius: 8px;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.yabfsAcpGameCardMedia img {
  border-radius: 8px;
  display: block;
  height: 42px;
  object-fit: cover;
  width: 42px;
}

.yabfsAcpGameCardMeta h3 {
  margin: 0 0 2px;
}

.yabfsAcpGameCardMeta p {
  color: var(--wcfContentDimmedText);
  margin: 0;
}

.yabfsAcpGameCardStats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.yabfsAcpGameCardStat {
  align-items: start;
  background: color-mix(in srgb, var(--wcfContentBackground), #000 12%);
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px;
}

.yabfsAcpGameCardStatLabel {
  color: var(--wcfContentDimmedText);
  font-size: var(--wcfFontSizeSmall);
  line-height: 1.2;
}

.yabfsAcpGameCardStatValue {
  font-size: var(--wcfFontSizeDefault);
  font-weight: 600;
  line-height: 1.1;
}

.yabfsAcpGameCardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.yabfsAcpGameEditForm {
  border-top: 1px solid var(--wcfContentContainerBorder);
  margin-top: 10px;
  padding-top: 10px;
}

.yabfsAcpGameEditFieldset {
  border: 1px solid var(--wcfContentContainerBorder);
  border-radius: var(--wcfBorderRadiusContainer);
  margin: 0 0 10px;
  padding: 10px;
}

.yabfsGamesPlayBoard .yabfsHangmanShell {
  background: linear-gradient(180deg, color-mix(in srgb, var(--wcfContentBackground), #1a2238 16%) 0%, color-mix(in srgb, var(--wcfContentBackground), #08101a 24%) 100%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #7da1d6 14%);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.24);
  margin: 0 auto;
  padding: 16px;
  width: 100%;
}

.yabfsGamesPlayBoard .yabfsHangmanWord {
  background: color-mix(in srgb, var(--wcfContentBackground), #02060d 18%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #8aa3c8 8%);
  border-radius: 12px;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0;
  min-height: 60px;
  padding: 12px 14px;
  text-align: center;
}

.yabfsGamesPlayBoard .yabfsHangmanStats {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.yabfsGamesPlayBoard .yabfsHangmanStat {
  background: color-mix(in srgb, var(--wcfContentBackground), #050c17 12%);
  border-radius: 10px;
  color: var(--wcfContentDimmedText);
  padding: 8px 10px;
}

.yabfsGamesPlayBoard .yabfsHangmanStatSecret {
  color: var(--wcfContentText);
  font-weight: 600;
}

.yabfsGamesPlayBoard .yabfsHangmanProgress {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 28%);
  border-radius: 999px;
  height: 10px;
  margin-top: 12px;
  overflow: hidden;
}

.yabfsGamesPlayBoard .yabfsHangmanProgress > span {
  background: linear-gradient(90deg, #2e9ad5 0%, #f0a326 58%, #d94f4f 100%);
  display: block;
  height: 100%;
  transition: width 0.18s ease;
  width: 0;
}

.yabfsGamesPlayBoard .yabfsHangmanSetWordForm {
  margin-top: 14px;
}

.yabfsGamesPlayBoard .yabfsHangmanSetWordLabel {
  color: var(--wcfContentDimmedText);
  display: block;
  margin-bottom: 8px;
}

.yabfsGamesPlayBoard .yabfsHangmanSetWordControls {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.yabfsGamesPlayBoard .yabfsHangmanWordInput {
  text-transform: uppercase;
}

.yabfsGamesPlayBoard .yabfsHangmanKeyboard {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  margin-top: 14px;
}

.yabfsGamesPlayBoard .yabfsHangmanLetter {
  align-items: center;
  background: color-mix(in srgb, var(--wcfButtonBackground), #000 14%);
  border: 1px solid color-mix(in srgb, var(--wcfButtonBackground), #fff 4%);
  border-radius: 8px;
  color: var(--wcfButtonText);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

html:not(.touch) .yabfsGamesPlayBoard .yabfsHangmanLetter:hover:not(:disabled) {
  background: color-mix(in srgb, var(--wcfButtonPrimaryBackground), #2d5d94 22%);
  border-color: color-mix(in srgb, var(--wcfButtonPrimaryBackground), #8bb9f0 18%);
  transform: translateY(-1px);
}

.yabfsGamesPlayBoard .yabfsHangmanLetter:disabled {
  cursor: default;
  opacity: 0.58;
}

.yabfsGamesPlayBoard .yabfsHangmanLetter.isUsed {
  background: color-mix(in srgb, var(--wcfContentBackground), #121a27 34%);
}

@media screen and (max-width: 680px) {
  .yabfsGamesPlayBoard .yabfsHangmanShell {
    border-radius: 12px;
    padding: 12px;
  }
  .yabfsGamesPlayBoard .yabfsHangmanWord {
    border-radius: 10px;
    font-size: clamp(18px, 7vw, 28px);
    letter-spacing: 0.12em;
    min-height: 52px;
    padding: 10px;
  }
  .yabfsGamesPlayBoard .yabfsHangmanSetWordControls {
    grid-template-columns: 1fr;
  }
  .yabfsGamesPlayBoard .yabfsHangmanKeyboard {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media screen and (max-width: 420px) {
  .yabfsGamesPlayBoard .yabfsHangmanStats {
    gap: 6px;
  }
  .yabfsGamesPlayBoard .yabfsHangmanStat {
    padding: 7px 8px;
  }
  .yabfsGamesPlayBoard .yabfsHangmanKeyboard {
    gap: 6px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .yabfsGamesPlayBoard .yabfsHangmanLetter {
    border-radius: 7px;
    height: 34px;
  }
}
.yabfsGamesPlayBoard .yabfsSafeCrackerShell {
  --yabfs-safe-accent: #4a9ef5;
  --yabfs-safe-exact: #2ca56d;
  --yabfs-safe-partial: #d8a33c;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wcfContentBackground), #102139 12%) 0%, color-mix(in srgb, var(--wcfContentBackground), #050b13 16%) 100%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #7fb7f6 16%);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 26px rgba(0, 0, 0, 0.28);
  display: grid;
  gap: 12px;
  margin: 0 auto;
  max-width: min(100%, 920px);
  padding: 14px;
  width: min(100%, 920px);
}

.yabfsGamesPlayBoard .yabfsSafeCrackerMeta {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yabfsGamesPlayBoard .yabfsSafeCrackerMetaItem {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 12%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #7fb7f6 12%);
  border-radius: 10px;
  color: var(--wcfContentDimmedText);
  line-height: 1.4;
  min-width: 0;
  padding: 8px 10px;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerMetaItem > strong {
  color: var(--wcfContentText);
}

.yabfsGamesPlayBoard .yabfsSafeCrackerMetaItem code {
  font-size: var(--wcfFontSizeDefault);
  font-weight: 700;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerForm {
  align-items: end;
  background: color-mix(in srgb, var(--wcfContentBackground), #071429 18%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #6ea6e6 22%);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerForm > label {
  display: grid;
  gap: 4px;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerForm > label > span {
  color: var(--wcfContentDimmedText);
  font-size: var(--wcfFontSizeSmall);
  font-weight: 600;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerForm input[type=text] {
  border-radius: 8px;
  font-family: var(--wcfFontFamilyMonospace, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerForm .button {
  min-width: 140px;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryGrid.isSingle {
  grid-template-columns: minmax(0, 1fr);
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryBlock {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 10%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #6ea6e6 16%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  padding: 12px;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryBlock h3 {
  font-size: var(--wcfFontSizeHeadline);
  margin: 0;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryEmpty {
  color: var(--wcfContentDimmedText);
  margin: 0;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryActions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
  width: 100%;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable th,
.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable td {
  border-bottom: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #6ea6e6 10%);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable th {
  color: var(--wcfContentDimmedText);
  font-size: var(--wcfFontSizeSmall);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  word-break: normal;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable th:nth-child(1),
.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable td:nth-child(1) {
  width: 52px;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable th:nth-child(3),
.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable td:nth-child(3),
.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable th:nth-child(4),
.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable td:nth-child(4) {
  text-align: center;
  width: 86px;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable tbody tr {
  transition: background-color 0.14s ease;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 6%);
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable tbody tr:last-child td {
  border-bottom: 0;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable tbody tr:hover {
  background: color-mix(in srgb, var(--wcfContentBackground), #0f2a48 18%);
}

.yabfsGamesPlayBoard .yabfsSafeCrackerGuessCode {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  padding: 1px 0;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerGuessDigit {
  background: color-mix(in srgb, var(--wcfContentBackground), #000 16%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #6ea6e6 12%);
  border-radius: 6px;
  display: inline-block;
  font-family: var(--wcfFontFamilyMonospace, monospace);
  font-weight: 700;
  min-width: 1.3em;
  padding: 0 2px;
  text-align: center;
}

.yabfsGamesPlayBoard .yabfsSafeCrackerGuessDigit.isExact {
  background: color-mix(in srgb, var(--yabfs-safe-exact), transparent 78%);
  border-color: color-mix(in srgb, var(--yabfs-safe-exact), transparent 50%);
  color: color-mix(in srgb, var(--wcfContentText), #9ff0c8 36%);
}

.yabfsGamesPlayBoard .yabfsSafeCrackerGuessDigit.isPartial {
  background: color-mix(in srgb, var(--yabfs-safe-partial), transparent 74%);
  border-color: color-mix(in srgb, var(--yabfs-safe-partial), transparent 44%);
  color: color-mix(in srgb, var(--wcfContentText), #ffd88d 30%);
}

.yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTableRow.isSolved {
  background: color-mix(in srgb, var(--yabfs-safe-exact), transparent 84%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--yabfs-safe-exact), transparent 20%);
}

.yabfsSafeCrackerInviteDialog {
  background: linear-gradient(180deg, color-mix(in srgb, var(--wcfContentBackground), #0c1e34 12%) 0%, color-mix(in srgb, var(--wcfContentBackground), #050c16 15%) 100%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #7fb7f6 16%);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.yabfsSafeCrackerInviteFixedMode {
  margin: 0;
}

.yabfsSafeCrackerInviteCodeLengthLabel {
  display: grid;
  gap: 6px;
}

.yabfsSafeCrackerHistoryDialogContent {
  max-height: min(70vh, 760px);
  overflow: auto;
}

@media screen and (max-width: 840px) {
  .yabfsGamesPlayBoard .yabfsSafeCrackerMeta,
  .yabfsGamesPlayBoard .yabfsSafeCrackerHistoryGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .yabfsGamesPlayBoard .yabfsSafeCrackerForm {
    grid-template-columns: minmax(0, 1fr);
  }
  .yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable th:nth-child(1),
  .yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable td:nth-child(1) {
    width: 44px;
  }
  .yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable th:nth-child(3),
  .yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable td:nth-child(3),
  .yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable th:nth-child(4),
  .yabfsGamesPlayBoard .yabfsSafeCrackerHistoryTable td:nth-child(4) {
    width: 78px;
  }
}
.yabfsGamesPlayBoard .yabfsTttBoardHeader {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0 auto 12px;
  max-width: 560px;
}

.yabfsGamesPlayBoard .yabfsTttOpponentAvatar,
.yabfsGamesPlayBoard .yabfsTttOpponentAvatar .userAvatarImage {
  border-radius: 50%;
  display: inline-flex;
  height: 46px;
  width: 46px;
}

.yabfsGamesPlayBoard .yabfsTttOpponentName {
  display: inline-block;
  font-size: clamp(18px, 2.1vw, 24px);
  font-weight: 600;
  line-height: 1.2;
}

.yabfsGamesPlayBoard .yabfsTttStatus {
  color: var(--wcfContentDimmedText);
  margin: 0;
}

.yabfsGamesPlayBoard .yabfsTttBoard {
  background: linear-gradient(180deg, color-mix(in srgb, var(--wcfContentBackground), #1a2b43 14%) 0%, color-mix(in srgb, var(--wcfContentBackground), #09101a 26%) 100%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #9ab8df 12%);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.28);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(var(--yabfs-board-width, 3), minmax(0, 1fr));
  margin: 0 auto;
  max-width: min(100%, 560px);
  padding: 14px;
  width: min(100%, 560px);
}

.yabfsGamesPlayBoard .yabfsTttBoard.isMirrored:not(.isConnectFour) {
  transform: rotate(180deg);
}

.yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell {
  align-items: center;
  aspect-ratio: 1/1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wcfContentBackground), #08101c 28%) 0%, color-mix(in srgb, var(--wcfContentBackground), #000 20%) 100%);
  border: 1px solid color-mix(in srgb, var(--wcfContentContainerBorder), #8ba5ca 8%);
  border-radius: 12px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06), inset 0 -4px 10px rgba(0, 0, 0, 0.26);
  color: var(--wcfContentText);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 112px;
  padding: 0;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}

html:not(.touch) .yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--wcfButtonPrimaryBackground), #9fbef0 22%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 -3px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(74, 134, 220, 0.28);
  transform: translateY(-1px);
}

.yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttToken {
  display: inline-block;
  font-size: clamp(48px, 7vw, 82px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  min-height: 1em;
  min-width: 1ch;
  text-align: center;
}

.yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell.isEmpty .yabfsTttToken {
  opacity: 0;
}

.yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell:disabled {
  cursor: default;
  opacity: 0.96;
}

.yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell.winner {
  background: linear-gradient(180deg, rgba(40, 115, 73, 0.52) 0%, rgba(24, 75, 48, 0.62) 100%);
  border-color: rgba(95, 214, 138, 0.72);
  box-shadow: inset 0 0 0 1px rgba(95, 214, 138, 0.46), 0 0 0 1px rgba(39, 145, 82, 0.3);
}

.yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell.isX .yabfsTttToken {
  color: #e14747;
}

.yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell.isO .yabfsTttToken {
  color: #3d7dff;
}

.yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell.isX .yabfsTttToken,
.yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell.isO .yabfsTttToken {
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.45);
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5), 0 0 4px rgba(255, 255, 255, 0.28);
}

.yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell.isFreshMove .yabfsTttToken {
  animation: yabfsTttMoveIn 150ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

@media screen and (max-width: 680px) {
  .yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) {
    gap: 8px;
    max-width: 100%;
    padding: 10px;
    width: 100%;
  }
  .yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell {
    border-radius: 10px;
    min-height: clamp(78px, 25vw, 102px);
  }
  .yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttToken {
    font-size: clamp(44px, 15vw, 68px);
  }
}
@media screen and (max-width: 420px) {
  .yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) {
    gap: 6px;
    padding: 8px;
  }
  .yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttCell {
    min-height: clamp(70px, 24vw, 88px);
  }
  .yabfsGamesPlayBoard .yabfsTttBoard:not(.isConnectFour) .yabfsTttToken {
    font-size: clamp(40px, 14vw, 58px);
  }
}
@keyframes yabfsTttMoveIn {
  0% {
    opacity: 0.2;
    transform: scale(0.72);
  }
  80% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(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);
}

/* list of participants */
/* participant left status */
.conversationLeft .userLink,
.conversationLeft.userLink,
.conversationLeft p > span {
  text-decoration: line-through;
}

/* quota usage display */
.sidebar .box.conversationQuota .boxContent {
  text-align: center;
}

.conversationQuotaMeter {
  width: 100%;
}

.conversationList__item__participants {
  display: flex;
  flex-direction: row-reverse;
  margin-left: -10px;
  margin-right: 25px;
  align-items: center;
}

@media screen and (max-width: 544px) {
  .conversationList__item__participants {
    display: none;
  }
}
.conversationList__item__participant {
  transform: translateX(10px);
  width: 16px;
}

.conversationList__item__otherParticipant {
  transform: translateX(20px);
}

.wbbBoardNodeContainer {
  margin-top: 20px;
}

.wbbBoardNodeContainer__header {
  color: var(--wcfTabularBoxHeadline);
  padding-bottom: 5px;
  display: grid;
  grid-template-areas: "headline    collapsibleButton" "description collapsibleButton";
  grid-template-columns: 1fr min-content;
}

.wbbBoardNodeContainer__headline {
  grid-area: headline;
}

.wbbBoardNodeContainer__title {
  font-weight: 400;
  line-height: 1.28;
  display: inline;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .wbbBoardNodeContainer__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .wbbBoardNodeContainer__title {
    font-size: 18px;
  }
}

.wbbBoardNodeContainer__badge {
  display: inline;
  vertical-align: top;
}

.wbbBoardNodeContainer__description {
  font-weight: 400;
  grid-area: description;
}
@media screen and (min-width: 769px), print {
  .wbbBoardNodeContainer__description {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wbbBoardNodeContainer__description {
    font-size: 12px;
  }
}

.wbbBoardNodeContainer__link {
  color: inherit;
}
.wbbBoardNodeContainer__link:hover {
  color: var(--wcfTabularBoxHeadlineActive);
}

.wbbBoardNodeContainer__collapsibleButton {
  align-self: end;
  grid-area: collapsibleButton;
}

.wbbBoardNodeList {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadowCard);
  padding: 10px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
@media screen and (max-width: 768px) {
  .wbbBoardNodeList {
    row-gap: 20px;
  }
}

.wbbBoardNodeContainer--category:not(.wbbBoardNodeContainer--collapsed) .wbbBoardNodeContainer__header {
  padding-bottom: 8px;
  position: relative;
}
.wbbBoardNodeContainer--category:not(.wbbBoardNodeContainer--collapsed) .wbbBoardNodeContainer__header::after {
  border-bottom: 3px solid var(--wcfTabularBoxHeadline);
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0 0;
  content: "";
  inset: auto 0 0 0;
  position: absolute;
}

.wbbBoardNodeContainer--category .wbbBoardNodeList {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

html[data-color-scheme=dark] .wbbBoardNodeList {
  border: 1px solid var(--wcfContentContainerBorder);
}
html[data-color-scheme=dark] .wbbBoardNodeContainer--category .wbbBoardNodeList {
  border-top-width: 0;
}

.wbbBoardNode {
  padding: 10px;
  display: grid;
  grid-template-areas: "icon content   lastPosts" "icon stats     lastPosts" "icon subBoards lastPosts";
  grid-template-columns: min-content 1fr 40%;
  grid-template-rows: max-content max-content 1fr;
  column-gap: 10px;
}
@media screen and (max-width: 768px) {
  .wbbBoardNode {
    column-gap: 5px;
    grid-template-areas: "icon content" "icon stats" "icon subBoards" "icon lastPosts";
    grid-template-columns: min-content 1fr;
    grid-template-rows: max-content max-content max-content 1fr;
    padding: 0;
  }
}

html:not(.touch) .wbbBoardNode:hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
  border-radius: var(--wcfBorderRadius);
}

.wbbBoardNode--depth2 .wbbBoardNode__icon {
  padding-left: 50px;
}

.wbbBoardNode--depth3 .wbbBoardNode__icon {
  padding-left: 100px;
}

.wbbBoardNodeContainer--category .wbbBoardNode--depth2 .wbbBoardNode__icon {
  padding-left: 0;
}

.wbbBoardNodeContainer--category .wbbBoardNode--depth3 .wbbBoardNode__icon {
  padding-left: 50px;
}

.wbbBoardNode__icon {
  align-self: start;
  grid-area: icon;
  user-select: none;
}

.wbbBoardNode:not(.wbbBoardNode--unread) .wbbBoardNode__icon {
  color: var(--wcfContentDimmedText);
}

.wbbBoardNode__content {
  grid-area: content;
}

.wbbBoardNode__stats {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
  display: flex;
  grid-area: stats;
  margin-top: 5px;
}
@media screen and (min-width: 769px), print {
  .wbbBoardNode__stats {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__stats {
    font-size: 12px;
  }
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__stats {
    display: none;
  }
}

.wbbBoardNode__statItem {
  display: flex;
}
.wbbBoardNode__statItem:not(:first-child) {
  margin-left: 10px;
}

.wbbBoardNode__statItem dt:after {
  content: ":";
  padding-left: 1px;
}

.wbbBoardNode__statItem dd {
  color: var(--wcfContentText);
  margin-left: 5px;
}

.wbbBoardNode__lastPosts {
  grid-area: lastPosts;
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__lastPosts {
    margin-top: 5px;
  }
}

.wbbBoardNode__lastPosts dt {
  color: var(--wcfContentDimmedText);
}

.wbbBoardNode__lastPost {
  display: grid;
  grid-template-areas: "avatar title" "avatar meta";
  grid-template-columns: min-content 1fr;
  position: relative;
}
.wbbBoardNode__lastPost:not(:first-child) {
  margin-top: 5px;
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__lastPost:not(:first-child) {
    display: none;
  }
}

.wbbBoardNode__lastPostAvatar {
  grid-area: avatar;
  align-self: center;
  margin-right: 10px;
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__lastPostAvatar {
    margin-right: 5px;
  }
}

.wbbBoardNode__lastPostTitle {
  align-items: center;
  column-gap: 4px;
  display: flex;
  font-weight: 600;
  grid-area: title;
}

.wbbBoardNode__label {
  flex: 0 0 auto;
}

.wbbBoardNode__lastPostLink {
  color: var(--wcfContentText);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wbbBoardNode__lastPostLink:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wbbBoardNode__lastPostLink::before {
  content: "";
  position: absolute;
  inset: 0;
}

.wbbBoardNode__lastPostMeta {
  display: grid;
  grid-template-areas: "author time";
  grid-template-columns: minmax(0, min-content) min-content;
  grid-area: meta;
}

.wbbBoardNode__lastPostAuthor {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
  grid-area: author;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (min-width: 769px), print {
  .wbbBoardNode__lastPostAuthor {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__lastPostAuthor {
    font-size: 12px;
  }
}

.wbbBoardNode__lastPostTime {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
  grid-area: time;
  white-space: nowrap;
}
@media screen and (min-width: 769px), print {
  .wbbBoardNode__lastPostTime {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__lastPostTime {
    font-size: 12px;
  }
}

.wbbBoardNode__lastPostTime::before {
  content: " • ";
  margin-left: 4px;
}

.wbbBoardNode__subBoards {
  grid-area: subBoards;
  margin-top: 5px;
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__subBoards {
    display: none;
  }
}

.wbbBoardNode__subBoardList {
  display: flex;
  flex-wrap: wrap;
  column-gap: 5px;
  row-gap: 2px;
}

.wbbBoardNode__subBoard {
  align-items: center;
  display: flex;
  gap: 2px;
}

.wbbBoardNode__subBoardIcon {
  flex: 0 0 auto;
  user-select: none;
}

.wbbBoardNode__subBoard:not(.wbbBoardNode__subBoard--unread) .wbbBoardNode__subBoardIcon {
  color: var(--wcfContentDimmedText);
}

.wbbBoardNode__subBoardTitle {
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .wbbBoardNode__subBoardTitle {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__subBoardTitle {
    font-size: 12px;
  }
}

.wbbBoardNode__subBoardLink {
  color: var(--wcfContentText);
}
.wbbBoardNode__subBoardLink:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wbbBoardNode__title {
  font-weight: 400;
  line-height: 1.28;
  display: inline;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .wbbBoardNode__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__title {
    font-size: 18px;
  }
}

.wbbBoardNode__link {
  color: var(--wcfContentText);
}
.wbbBoardNode__link:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wbbBoardNode__badge {
  display: inline;
  vertical-align: top;
}

.wbbBoardNode__description {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
}
@media screen and (min-width: 769px), print {
  .wbbBoardNode__description {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wbbBoardNode__description {
    font-size: 12px;
  }
}
.wbbBoardNode__description:not(:empty) {
  margin-top: 5px;
}

.wbbAdLocationBoardList {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .wbbBoardNode__content {
    position: relative;
  }
  .wbbBoardNode__link::before {
    content: "";
    inset: 0;
    position: absolute;
  }
}
.wbbSimpleBoardNodeContainerList {
  max-width: 600px;
  padding-bottom: 20px;
  user-select: none;
}

.wbbSimpleBoardNodeContainer:not(:first-child) {
  margin-top: 20px;
}

.wbbSimpleBoardNodeContainer__header {
  color: var(--wcfTabularBoxHeadline);
  padding-bottom: 5px;
}

.wbbSimpleBoardNodeContainer__title {
  font-weight: 600;
}

.wbbSimpleBoardNodeContainer__description {
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .wbbSimpleBoardNodeContainer__description {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wbbSimpleBoardNodeContainer__description {
    font-size: 12px;
  }
}

.wbbSimpleBoardNodeList {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadowCard);
  padding: 5px;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}

.wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNodeContainer__header {
  border-bottom: 3px solid var(--wcfTabularBoxHeadline);
}

.wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNodeList {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.wbbSimpleBoardNode {
  padding: 5px;
  position: relative;
  display: grid;
  grid-template-areas: "icon title" "icon description";
  grid-template-columns: min-content 1fr;
}
.wbbSimpleBoardNode:not(.wbbSimpleBoardNode--disabled):hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
  border-radius: var(--wcfBorderRadius);
}

.wbbSimpleBoardNode__icon {
  grid-area: icon;
  padding-right: 5px;
}

.wbbSimpleBoardNode--disabled .wbbSimpleBoardNode__icon {
  color: var(--wcfContentDimmedText);
}

.wbbSimpleBoardNode__title {
  font-weight: 600;
  grid-area: title;
}

.wbbSimpleBoardNode--disabled .wbbSimpleBoardNode__title {
  color: var(--wcfContentDimmedText);
}

.wbbSimpleBoardNode__link {
  color: inherit;
}

.wbbSimpleBoardNode__link::before {
  content: "";
  inset: 0;
  position: absolute;
}

.wbbSimpleBoardNode__label::before {
  content: "";
  inset: 0;
  position: absolute;
}

.wbbSimpleBoardNode__description {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
  grid-area: description;
}
@media screen and (min-width: 769px), print {
  .wbbSimpleBoardNode__description {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wbbSimpleBoardNode__description {
    font-size: 12px;
  }
}

.wbbSimpleBoardNode--depth2 {
  padding-left: 35px;
}

.wbbSimpleBoardNode--depth3 {
  padding-left: 65px;
}

.wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNode--depth2 {
  padding-left: 5px;
}

.wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNode--depth3 {
  padding-left: 35px;
}

html[data-color-scheme=dark] .wbbSimpleBoardNodeList {
  border: 1px solid var(--wcfContentContainerBorder);
}
html[data-color-scheme=dark] .wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNodeList {
  border-top-width: 0;
}

/* sticky / announcement icon */
.wbbAnnouncementIcon,
.wbbDeletedIcon,
.wbbDisabledIcon,
.wbbStickyIcon,
.wbbMovedIcon {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 24px;
  justify-content: center;
  position: absolute;
  width: 24px;
}
@media screen and (min-width: 769px), print {
  .wbbAnnouncementIcon,
  .wbbDeletedIcon,
  .wbbDisabledIcon,
  .wbbStickyIcon,
  .wbbMovedIcon {
    border: 1px solid var(--wcfContentBackground);
    right: -8px;
    top: -2px;
  }
}
@media screen and (max-width: 768px) {
  .wbbAnnouncementIcon,
  .wbbDeletedIcon,
  .wbbDisabledIcon,
  .wbbStickyIcon,
  .wbbMovedIcon {
    height: 32px;
    top: 0;
    width: 32px;
  }
}

.wbbAnnouncementIcon {
  background-color: rgb(204, 0, 1);
  color: rgb(255, 255, 255);
  z-index: 1;
}

.wbbStickyIcon,
.wbbMovedIcon {
  background-color: var(--wcfContentText);
  color: var(--wcfContentBackground);
  z-index: 1;
}

.wbbDeletedIcon {
  background-color: var(--wcfStatusErrorBackground);
  border-color: var(--wcfStatusErrorBorder);
  color: var(--wcfStatusErrorText);
  z-index: 3;
}

.wbbDisabledIcon {
  background-color: var(--wcfStatusSuccessBackground);
  border-color: var(--wcfStatusSuccessBorder);
  color: var(--wcfStatusSuccessText);
  z-index: 2;
}

.wbbMovedIcon::before {
  left: 1px;
  position: relative;
}

@media screen and (min-width: 1025px), print {
  .contentHeader.wbbThread > .contentHeaderIcon .wbbAnnouncementIcon,
  .contentHeader.wbbThread > .contentHeaderIcon .wbbStickyIcon {
    right: -8px;
  }
}

/* ### post list ### */
.wbbPost.wbbPostDeleted.messageCollapsedExpandable {
  cursor: pointer;
}
.wbbPost.wbbPostDeleted.messageCollapsedExpandable .messageHeaderWrapper > :first-child {
  pointer-events: none;
}

.wbbPostDeleteNote {
  border-left-color: var(--wcfStatusErrorBorder);
}

.wbbPostDisabledNote,
.wbbPostDelayedNote {
  border-left-color: var(--wcfStatusSuccessBorder);
}

/* ### minor fixes ### */
.wbbInlineSimilarThreadList {
  margin-top: 20px;
}

/* ad locations */
.wbbAdLocationIn1stPost {
  float: left;
  margin-bottom: 10px;
  margin-right: 15px;
}

.wbbAdLocationPostList,
.wbbAdLocationBoardList {
  text-align: center;
}
.wbbAdLocationPostList > div,
.wbbAdLocationBoardList > div {
  display: inline-block;
  text-align: left;
}

/* post merge */
#postMergeContainer .sortableList {
  list-style-type: none;
}
#postMergeContainer .sortableNode:not(:last-child) {
  border-bottom-width: 0;
  margin-bottom: 30px;
}

/* thread filter */
@media screen and (min-width: 769px), print {
  #wbbBoardSortFilter:not(.jsBoardSortFilterSingleSection) > form {
    column-gap: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #wbbBoardSortFilter:not(.jsBoardSortFilterSingleSection) > form > .section {
    border-top-width: 0;
    margin-top: 0;
    padding-top: 0;
  }
}
/* modification log in threads */
.wbbThreadPostList.messageList .modificationLogEntry {
  padding-top: 10px;
  padding-bottom: 10px;
}
.wbbThreadPostList.messageList *:not(.modificationLogEntry) + .modificationLogEntry {
  padding-top: 30px;
}
@media screen and (max-width: 768px) {
  .wbbThreadPostList.messageList *:not(.modificationLogEntry) + .modificationLogEntry {
    border-top: 1px solid var(--wcfContentBorder);
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
.wbbThreadPostList.messageList .lastModificationLogEntry.modificationLogEntry:not(:last-child) {
  padding-bottom: 30px;
}
.wbbThreadPostList.messageList .modificationLogEntryHide {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  margin-left: 10px;
}

/* go to best answer button & show more posts button in post list */
.wbbThreadPostList .wbbGoToBestAnswer,
.wbbThreadPostList .wbbMorePostsNotice {
  text-align: center;
}

/* placeholder sizes, required for Google AdSense */
@media screen and (max-width: 544px) {
  .wbbAdLocationBoardList .adsbygoogle,
  .wbbAdLocationPostList .adsbygoogle {
    height: 50px;
    width: 320px;
  }
}
@media screen and (min-width: 545px), print {
  .wbbAdLocationBoardList .adsbygoogle,
  .wbbAdLocationPostList .adsbygoogle {
    height: 90px;
    width: 728px;
  }
}

@media screen and (max-width: 768px) {
  .wbbAdLocationIn1stPost .adsbygoogle {
    height: 50px;
    width: 320px;
  }
}
@media screen and (min-width: 769px), print {
  .wbbAdLocationIn1stPost .adsbygoogle {
    height: 250px;
    width: 300px;
  }
}

/* article integration */
.wbbArticleReply {
  background-color: var(--wcfSidebarBackground);
  color: var(--wcfSidebarText);
  padding: 10px 20px;
  position: relative;
}
.wbbArticleReply:hover {
  color: inherit;
}
@media screen and (min-width: 545px), print {
  .wbbArticleReply {
    font-weight: 600;
    line-height: 1.28;
  }
}
@media screen and (min-width: 545px) and (min-width: 769px), print {
  .wbbArticleReply {
    font-size: var(--wcfFontSizeSection);
  }
}
@media screen and (min-width: 545px) and (max-width: 768px) {
  .wbbArticleReply {
    font-size: 20px;
  }
}

.wbbArticleGoToThread {
  text-align: center;
}

.wbbArticleJoinTheDiscussion,
.wbbArticleMoreReplies {
  display: block;
  text-align: center;
}

/*
 * Special styles for changes introduced in WoltLab Suite 3.1 that
 * are not compatible with styles created for earlier versions.
 */
.section > .wbbBoardList > .wbbBoardContainer:first-child {
  border-top-width: 0;
}
.section > .wbbBoardList > .wbbBoardContainer:last-child {
  border-bottom-width: 0;
}
.section > .wbbBoardList > .wbbCategory:last-child > ul > li:last-child {
  border-bottom-width: 0;
}

.threadFormOptions {
  margin-bottom: 20px;
}

.wsdbCategoryListContainer {
  container-type: inline-size;
}

.wsdbCategoryList {
  display: grid;
  grid-template-rows: 1fr;
  gap: 20px;
}

@container (min-width: 800px) {
  .wsdbCategoryList {
    grid-template-columns: repeat(2, 1fr);
  }
}
.wsdbCategoryListItem {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wcfContentBorderInner);
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
}

.wsdbCategoryListItem__headline {
  display: flex;
  gap: 5px;
}

.wsdbCategoryListItem__title {
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .wsdbCategoryListItem__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .wsdbCategoryListItem__title {
    font-size: 18px;
  }
}

.wsdbCategoryListItem__icon {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
}

.wsdbCategoryListItem__badge {
  flex: 0 0 auto;
}

.wsdbCategoryListItem__link {
  color: inherit;
}
.wsdbCategoryListItem__link::before {
  content: "";
  inset: 0;
  position: absolute;
}

@media (hover: hover) {
  .wsdbCategoryListItem__link:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.wsdbCategoryListItem__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.wsdbCategoryListItem__description {
  color: var(--wcfContentDimmedText);
  margin-top: 5px;
  flex: 1 0 auto;
}

.wsdbCategoryListItem__children {
  margin-top: 10px;
  z-index: 1;
  user-select: none;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.wsdbCategoryListItem__child__link {
  color: var(--wcfContentText);
  border: 1px solid var(--wcfContentBorderInner);
  border-radius: 999px;
  padding: 2px 8px;
}

@media (hover: hover) {
  .wsdbCategoryListItem__child__link:hover {
    color: inherit;
    border-color: var(--wcfContentText);
  }
}
.wsdbCategoryListItem__stats {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
  display: flex;
  overflow: hidden;
  margin-top: 10px;
}
@media screen and (min-width: 769px), print {
  .wsdbCategoryListItem__stats {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wsdbCategoryListItem__stats {
    font-size: 12px;
  }
}

.wsdbCategoryListItem__statItem {
  display: flex;
}

.wsdbCategoryListItem__statItem .wsdbRecordLink {
  z-index: 1;
  position: relative;
  color: var(--wcfContentText);
}
.wsdbCategoryListItem__statItem .wsdbRecordLink::before {
  content: "";
  inset: 0;
  position: absolute;
}

@media (hover: hover) {
  .wsdbCategoryListItem__statItem .wsdbRecordLink:hover {
    color: var(--wcfContentText);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.wsdbCategoryListItem__statItem dt {
  flex: 0 0 auto;
}

.wsdbCategoryListItem__statItem dt:after {
  content: ":";
  padding-left: 1px;
}

.wsdbCategoryListItem__statItem dd {
  margin-left: 5px;
}

@container (min-width: 800px) {
  .wsdbCategoryListItem__statItem:first-child {
    flex: 1 0 30%;
  }
  .wsdbCategoryListItem__statItem:not(:first-child) {
    flex: 1 0 70%;
  }
}
@container (width < 800px) {
  .wsdbCategoryListItem__stats {
    flex-direction: column;
  }
}
.wsdbRecord__optionValues {
  --column-count: 2;
  border-bottom: 1px solid var(--wcfContentBorderInner);
  padding-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  column-gap: 20px;
  row-gap: 10px;
}
@media screen and (max-width: 768px) {
  .wsdbRecord__optionValues {
    --column-count: 1;
  }
}

.wsdbRecord__optionValue {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}

.wsdbRecord__optionValue__term {
  font-weight: 600;
  flex: 0 0 auto;
}

.wsdbRecord__optionValue__description {
  color: var(--wcfContentDimmedText);
}

.wsdbRecordInfoWindow {
  position: relative;
  display: grid;
  gap: 10px;
  grid-template-areas: "image content";
  grid-template-columns: min-content 1fr;
}

.wsdbRecordInfoWindow__image {
  grid-area: image;
  width: 200px;
  overflow: hidden;
  border-radius: var(--wcfBorderRadius);
}

.wsdbRecordInfoWindow__image__element {
  height: 150px;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.wsdbRecordInfoWindow__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-area: content;
}

.wsdbRecordInfoWindow__title {
  color: var(--wcfContentHeadlineLink);
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .wsdbRecordInfoWindow__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .wsdbRecordInfoWindow__title {
    font-size: 18px;
  }
}

.wsdbRecordInfoWindow__link {
  color: inherit !important;
}
.wsdbRecordInfoWindow__link::before {
  content: "";
  inset: 0;
  position: absolute;
}
.wsdbRecordInfoWindow__link:hover {
  color: inherit !important;
}

.wsdbReviewRatingStar {
  color: #f90;
  display: inline-flex;
}

.wsdbRecord__optionGroup__title {
  margin-bottom: 20px;
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .wsdbRecord__optionGroup__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .wsdbRecord__optionGroup__title {
    font-size: 18px;
  }
}

.wsdbRecordList__item__optionValues {
  color: var(--wcfContentDimmedText);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wsdbRecordList__item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wsdbRecordList__item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wsdbRecordList__item__tag {
  font-weight: 400;
  border: 1px solid var(--wcfContentBorderInner);
  display: flex;
  gap: 3px;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
}
@media screen and (min-width: 769px), print {
  .wsdbRecordList__item__tag {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wsdbRecordList__item__tag {
    font-size: 12px;
  }
}

.wsdbRecordList__item__tag fa-icon {
  color: var(--wcfContentDimmedText);
}

.wsdbRecordList__container {
  container-type: inline-size;
}

.wsdbRecordItemList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wsdbRecordList__item {
  --gap: 20px;
  background-color: var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: var(--wcfBoxShadowCard);
  display: grid;
  grid-template-areas: "image content";
  grid-template-columns: min-content 1fr;
  padding: var(--gap);
  position: relative;
}

html[data-color-scheme=dark] .wsdbRecordList__item {
  border: 1px solid var(--wcfContentBorderInner);
}

.wsdbRecordList__item__image {
  grid-area: image;
  width: 200px;
  overflow: hidden;
  border-radius: var(--wcfBorderRadius);
  margin-right: var(--gap);
  max-height: 150px;
}

.wsdbRecordList__item__image__element {
  height: 150px;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.wsdbRecordList__item__meta {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
  margin-top: -8px;
  display: flex;
}
@media screen and (min-width: 769px), print {
  .wsdbRecordList__item__meta {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wsdbRecordList__item__meta {
    font-size: 12px;
  }
}

.wsdbRecordList__item__time::before {
  content: "•";
  margin: 0 3px;
}

.wsdbRecordList__item__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-area: content;
}

.wsdbRecordList__item__title {
  color: var(--wcfContentHeadlineLink);
  display: flex;
  padding-right: 48px;
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .wsdbRecordList__item__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .wsdbRecordList__item__title {
    font-size: 18px;
  }
}
.wsdbRecordList__item__title:hover {
  color: var(--wcfContentHeadlineLinkActive);
}

.wsdbRecordList__item__link {
  color: inherit;
}
.wsdbRecordList__item__link::before {
  content: "";
  inset: 0;
  position: absolute;
}

@media (hover: hover) {
  .wsdbRecordList__item__link:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.wsdbRecordList__item__footer {
  align-items: center;
  display: flex;
  flex: 0 auto;
  flex-wrap: wrap;
  white-space: nowrap;
  gap: 10px;
}

.wsdbRecordList__item__footerIcons {
  align-items: center;
  color: var(--wcfContentDimmedText);
  display: flex;
  flex: 1 auto;
  flex-wrap: wrap;
  justify-content: end;
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .wsdbRecordList__item__footerIcons {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wsdbRecordList__item__footerIcons {
    font-size: 12px;
  }
}

.wsdbRecordList__item__footerIcon {
  flex: 0 auto;
}
.wsdbRecordList__item__footerIcon:not(:first-child) {
  margin-left: 10px;
}
.wsdbRecordList__item__footerIcon .topReactionShort {
  align-items: center;
  display: flex;
}
.wsdbRecordList__item__footerIcon .reactionType {
  margin-right: 3px;
}

@container (width < 600px) {
  .wsdbRecordList__item {
    --gap: 10px;
    grid-template-areas: "image" "content";
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr;
  }
  .wsdbRecordList__item__image {
    margin-bottom: var(--gap);
    justify-self: center;
  }
}
html:not(.touch) .wsdbRecordList__item__image__element {
  transition: transform 0.24s linear;
}

html:not(.touch) .wsdbRecordList__item:hover .wsdbRecordList__item__image__element {
  transform: scale(1.05);
}

.wsdbRecordList__item__buttons {
  position: absolute;
  right: calc(var(--gap) / 2);
  top: calc(var(--gap) / 2);
  z-index: 1;
  padding: calc(var(--gap) / 2);
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.wsdbRecordList__item__title__prefix {
  font-weight: 400;
  color: var(--wcfContentDimmedText);
  margin-bottom: -10px;
}
@media screen and (min-width: 769px), print {
  .wsdbRecordList__item__title__prefix {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wsdbRecordList__item__title__prefix {
    font-size: 12px;
  }
}

.wsdbRecordList__item .listView__item__markAsRead {
  flex: 0 0 auto;
  margin-right: 5px;
  z-index: 1;
}

.wsdbRecordList__item__descriptionList {
  --column-count: 4;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--column-count), 1fr);
  column-gap: 5px;
  row-gap: 5px;
}

.wsdbRecordCardList .wsdbRecordList__item__descriptionList {
  --column-count: 2;
}

.wsdbRecordList__item__descriptionList__item {
  display: flex;
  flex-direction: column;
}

.wsdbRecordList__item__descriptionList__item__term {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wsdbRecordList__item__descriptionList__item__description {
  color: var(--wcfContentDimmedText);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wsdbRecordList__item__rating {
  color: var(--wcfContentDimmedText);
}

.wsdbRecordCardList.wsdbRecordCardList--compact {
  grid-auto-rows: auto;
}

@container (min-width: 1000px) {
  .wsdbRecordCardList.wsdbRecordCardList--compact {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container (width < 620px) {
  .wsdbRecordCardList.wsdbRecordCardList--compact {
    gap: 10px;
  }
}
.wsdbRecordCardList.wsdbRecordCardList--compact .entryCardList__item__content {
  margin-bottom: var(--row-gap);
}

.wsdbReviewList {
  display: flex;
  flex-direction: column;
}

.wsdbReviewList__item {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.wsdbReviewList__item:not(:last-child) {
  border-bottom: 1px solid var(--wcfContentBorderInner);
}

@media screen and (max-width: 768px) {
  .wsdbReviewList__item:not(:last-child) {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 769px), print {
  .wsdbReviewList__item:not(:last-child) {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}
.wsdbReviewList__item__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media screen and (min-width: 545px), print {
  .wsdbReviewList__item__content {
    padding-left: 42px;
  }
}
.wsdbReviewList__item__title {
  grid-area: title;
  font-weight: 400;
  line-height: 1.28;
  font-weight: 600;
}
@media screen and (min-width: 769px), print {
  .wsdbReviewList__item__title {
    font-size: var(--wcfFontSizeHeadline);
  }
}
@media screen and (max-width: 768px) {
  .wsdbReviewList__item__title {
    font-size: 18px;
  }
}

.wsdbReviewList__item__header {
  display: grid;
  column-gap: 10px;
  grid-template-areas: "avatar author buttons" "avatar date buttons";
  grid-template-columns: min-content 1fr min-content;
}

.wsdbReviewList__item__avatar {
  align-self: center;
  grid-area: avatar;
}

.wsdbReviewList__item__author {
  grid-area: author;
}

.wsdbReviewList__item__author__link {
  color: inherit;
}

@media (hover: hover) {
  .wsdbReviewList__item__author__link:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.wsdbReviewList__item__date {
  grid-area: date;
  color: var(--wcfContentDimmedText);
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .wsdbReviewList__item__date {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wsdbReviewList__item__date {
    font-size: 12px;
  }
}

.wsdbReviewList__item__buttons {
  align-self: center;
  grid-area: buttons;
}

.wsdbReviewList__item__rating {
  align-self: start;
  display: inline-flex;
}

.wsdbReviewList__more {
  border-top: 1px solid var(--wcfContentBorderInner);
  text-align: center;
}

@media screen and (max-width: 768px) {
  .wsdbReviewList__more {
    padding-top: 15px;
    margin-top: 15px;
  }
}
@media screen and (min-width: 769px), print {
  .wsdbReviewList__more {
    padding-top: 20px;
    margin-top: 20px;
  }
}
.wsdbReviewList__item__response {
  border-top: 1px solid var(--wcfContentBorderInner);
  margin-left: 42px;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.wsdbReviewList__item__response__header {
  display: grid;
  column-gap: 10px;
  grid-template-areas: "avatar author buttons" "avatar date buttons";
  grid-template-columns: min-content 1fr min-content;
}

.wsdbReviewList__item__response__avatar {
  align-self: center;
  grid-area: avatar;
}

.wsdbReviewList__item__response__author {
  grid-area: author;
}

.wsdbReviewList__item__response__date {
  grid-area: date;
  color: var(--wcfContentDimmedText);
  font-weight: 400;
}
@media screen and (min-width: 769px), print {
  .wsdbReviewList__item__response__date {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .wsdbReviewList__item__response__date {
    font-size: 12px;
  }
}

.wsdbReviewList__item__response__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media screen and (min-width: 545px), print {
  .wsdbReviewList__item__response__content {
    padding-left: 42px;
  }
}
.wsdbReviewList__item__response__buttons {
  grid-area: buttons;
}

/**
 * @author		2017-2022 Darkwood.Design
 * @license		Commercial Darkwood.Design License <https://darkwood.design/lizenz/>
 * @package		de.wcflabs.wcf.jcoins
 */
.negativeAmount {
  color: #c0392b;
}

.positiveAmount {
  color: #27ae60;
}

.userMenuItemImage .amount {
  border-radius: 32px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #c0392b;
  color: #fff;
}
.userMenuItemImage .amount.negativeAmount {
  background-color: #c0392b;
}
.userMenuItemImage .amount.positiveAmount {
  background-color: #27ae60;
}

.jCoinsBadgeUpdate {
  box-shadow: -1px 2px 3px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(225, 225, 225, 0.3);
  left: 31px;
  padding: 1px 6px;
  position: absolute;
  top: 4px;
  z-index: 101;
}

@media screen and (max-width: 768px) {
  .jCoinsStatementList thead {
    display: none;
  }
  .jCoinsStatementList tbody .columnID,
  .jCoinsStatementList tbody .columnIcon,
  .jCoinsStatementList tbody .columnAvatar,
  .jCoinsStatementList tbody .columnDate {
    display: none;
  }
}
li.statement .amount {
  text-align: right;
  line-height: 32px;
  height: 32px;
  width: auto;
}

.sidebarJCoinsEarningOverviewList .amount {
  float: right;
}

.jcoinsCopyright {
  text-align: center;
}

.cocThCell {
  white-space: nowrap;
}

.cocThIcon {
  height: 20px;
  width: 20px;
  vertical-align: middle;
  margin-right: 6px;
}

.cocClanBadge,
.cocLeagueIcon {
  height: 20px;
  width: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

.cocProfileAccountGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cocProfileAccountCard {
  position: relative;
  padding: 14px 16px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorderInner);
  background: hsl(from var(--wcfContentBackground) h s calc(l - 2));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.cocProfileAccountCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.cocProfileAccountCard.isPrimary {
  border-color: var(--wcfButtonPrimaryBackground);
}

.cocProfileAccountHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.cocProfileAccountName {
  font-family: "Clash", var(--wcfFontFamily, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.cocProfileAccountTag {
  font-size: 0.85rem;
  color: var(--wcfDimmedText);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.cocProfileAccountStats {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  position: relative;
  z-index: 1;
}

.cocProfileAccountStat {
  padding: 8px 10px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorderInner);
  background: var(--wcfContentBackground);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cocProfileAccountLabel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wcfDimmedText);
}

.cocProfileAccountValue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.cocProfileAccountActions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.cocLeaderboardRegistered {
  margin-top: 12px;
}

.cocLeaderboardGrid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.cocLeaderboardEntry {
  margin: 0;
  padding: 0;
}

.cocLeaderboardCard {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorderInner);
  background: hsl(from var(--wcfContentBackground) h s calc(l - 2));
  overflow: hidden;
}

.cocLeaderboardCard::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  width: 6px;
  background: #f2c94c;
  opacity: 0.85;
}

.cocLeaderboardCard[data-rank="2"]::before {
  background: #b7c4d8;
}

.cocLeaderboardCard[data-rank="3"]::before {
  background: #d2a066;
}

.cocLeaderboardRank {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: hsl(from var(--wcfContentBackground) h s calc(l - 8));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.cocLeaderboardCard[data-rank="1"] .cocLeaderboardRank {
  background: #f2c94c;
  color: #2b1d00;
}

.cocLeaderboardCard[data-rank="2"] .cocLeaderboardRank {
  background: #d7deea;
  color: #1f232b;
}

.cocLeaderboardCard[data-rank="3"] .cocLeaderboardRank {
  background: #d2a066;
  color: #2b1d00;
}

.cocLeaderboardRankNumber {
  font-variant-numeric: tabular-nums;
}

.cocLeaderboardBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.cocLeaderboardIdentity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.cocLeaderboardName {
  font-family: "Clash", var(--wcfFontFamily, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
}

.cocLeaderboardTag {
  font-size: 0.85rem;
  color: var(--wcfDimmedText);
}

.cocLeaderboardStats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.cocLeaderboardStat {
  padding: 8px 10px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorderInner);
  background: var(--wcfContentBackground);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cocLeaderboardLabel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wcfDimmedText);
}

.cocLeaderboardValue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.cocLeaderboardStat.isTrophies .cocLeaderboardValue {
  color: var(--wcfButtonPrimaryBackground);
}

.cocLeaderboardFilterDialog {
  display: grid;
  gap: 12px;
}

.cocLeaderboardFilterDialog dl {
  margin-top: 0 !important;
}

@media screen and (min-width: 769px), print {
  .cocLeaderboardFilterDialog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cocLeaderboardFilterDialog .formField {
    margin-bottom: 0;
  }
}
.cocLeaderboardPagination {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.cocLeaderboardPaginationList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.cocProfileOverlayDialog .dialog {
  width: min(980px, 92vw);
  max-width: 980px;
  max-height: 70vh;
  height: 70vh;
}

.cocProfileOverlayDialog .dialog__content {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.cocProfileOverlay {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  min-height: 0;
  height: 100%;
}

.cocModalHeader {
  background: var(--wcfContentContainerBackground);
  color: var(--wcfContentText);
  padding: 24px;
  border-bottom: 1px solid var(--wcfContentBorderInner);
  flex-shrink: 0;
}

.cocModalHeader h2 {
  margin: 0 0 5px;
  padding-right: 10px;
  color: var(--wcfContentHeadlineText);
}

.cocModalBody {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain;
}

.cocModalSection {
  margin-bottom: 20px;
}

.cocModalSection h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--wcfContentHeadlineText);
  border-bottom: 1px solid var(--wcfContentBorderInner);
  padding-bottom: 8px;
}

.cocModalGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 70px);
  gap: 10px;
  justify-content: start;
}

.cocModalItem {
  background: linear-gradient(0deg, #297abc, #52bdff);
  background-color: #60a7d8;
  border-radius: 8px;
  width: 70px;
  height: 70px;
  position: relative;
  overflow: hidden;
}

.cocModalItem[data-kind=super] {
  background: linear-gradient(0deg, #682225, #ae4642);
  background-color: #a2283f;
}

.cocModalItem[data-kind=spell] {
  background: linear-gradient(0deg, #644ad9, #775ce0);
  background-color: #655fd0;
}

.cocModalItem[data-kind=siege] {
  background: linear-gradient(0deg, #297abc, #52bdff);
  background-color: #60a7d8;
}

.cocModalItem[data-kind=pet] {
  background: #3d3d3d;
}

.cocModalItem img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  display: block;
}

.cocModalItem .level {
  font-family: Clash, sans-serif;
  -webkit-text-stroke: 1px hsl(0, 0%, 10%);
  text-shadow: 2px 2px 0px hsl(0, 0%, 10%);
  background-color: hsl(0, 0%, 18%);
  color: hsl(0, 0%, 94%);
  position: absolute;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  padding: 3px;
  bottom: 4px;
  left: 4px;
  z-index: 2;
}

.cocModalItem.maxed .level {
  background: linear-gradient(to top, rgba(180, 50, 0, 0.9) 0%, rgba(255, 100, 0, 0.85) 50%, rgba(255, 150, 0, 0.8) 100%);
  box-shadow: 0 0 4px rgba(255, 100, 0, 0.6), 0 0 8px rgba(255, 50, 0, 0.4);
  overflow: visible;
  animation: cocBoxGlow 0.5s ease-in-out infinite alternate;
}

.cocModalItem.maxed .level .p {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.cocModalItem.maxed .level .p1 {
  left: 5%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 220, 0) 20%, rgba(255, 220, 0, 0) 70%);
  animation: cocFire1 0.6s ease-in infinite;
}

.cocModalItem.maxed .level .p2 {
  left: 20%;
  bottom: 0;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgb(255, 120, 0) 20%, rgba(255, 120, 0, 0) 70%);
  animation: cocFire2 0.8s ease-in infinite 0.15s;
}

.cocModalItem.maxed .level .p3 {
  left: 35%;
  bottom: 1px;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 180, 0) 20%, rgba(255, 180, 0, 0) 70%);
  animation: cocFire1 0.7s ease-in infinite 0.3s;
}

.cocModalItem.maxed .level .p4 {
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgb(255, 80, 0) 20%, rgba(255, 80, 0, 0) 70%);
  animation: cocFire3 0.9s ease-in infinite 0.1s;
}

.cocModalItem.maxed .level .p5 {
  left: 65%;
  bottom: 2px;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgb(255, 200, 50) 20%, rgba(255, 200, 50, 0) 70%);
  animation: cocFire2 0.65s ease-in infinite 0.4s;
}

.cocModalItem.maxed .level .p6 {
  left: 75%;
  bottom: 0;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 100, 0) 20%, rgba(255, 100, 0, 0) 70%);
  animation: cocFire1 0.75s ease-in infinite 0.25s;
}

.cocModalItem.maxed .level .p7 {
  left: 88%;
  bottom: 1px;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgb(255, 160, 0) 20%, rgba(255, 160, 0, 0) 70%);
  animation: cocFire3 0.7s ease-in infinite 0.5s;
}

.cocModalItem.maxed .level .p8 {
  left: 95%;
  bottom: 0;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 140, 20) 20%, rgba(255, 140, 20, 0) 70%);
  animation: cocFire2 0.85s ease-in infinite 0.35s;
}

@keyframes cocBoxGlow {
  0% {
    box-shadow: 0 0 3px rgba(255, 100, 0, 0.5), 0 0 6px rgba(255, 50, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 150, 0, 0.7), 0 0 10px rgba(255, 80, 0, 0.5);
  }
}
@keyframes cocFire1 {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(1);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) translateX(-2px) scale(0.2);
  }
}
@keyframes cocFire2 {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(1);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) translateX(2px) scale(0.15);
  }
}
@keyframes cocFire3 {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(1);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) translateX(-1px) scale(0.25);
  }
}
.cocModalError {
  text-align: center;
  padding: 40px 20px;
  color: #991b1b;
}

.cocModalHero {
  position: relative;
  cursor: pointer;
}

.cocModalHero::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: #64ffda;
  border-radius: 50%;
  opacity: 0.8;
}

.cocModalSubsection {
  margin-top: 16px;
}

.cocModalSubsectionTitle {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wcfContentDimmedText);
  margin-bottom: 8px;
}

.cocProfileOverlayActionsBar {
  flex-shrink: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--wcfContentBorderInner);
  background: var(--wcfContentBackground);
}

.cocProfileHeroMain {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cocProfileHeroMain[data-coc-hero-toggle] {
  cursor: pointer;
}

.cocProfileHeroMain[data-coc-hero-toggle]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--wcfContentBorder) 75%, #fff 25%);
  outline-offset: 4px;
  border-radius: 8px;
}

.cocProfileHeroLevel {
  font-family: Clash, sans-serif;
  -webkit-text-stroke: 1px hsl(0, 0%, 10%);
  text-shadow: 2px 2px 0px hsl(0, 0%, 10%);
  background-color: hsl(0, 0%, 18%);
  color: hsl(0, 0%, 94%);
  position: absolute;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  padding: 3px;
  bottom: 6px;
  left: 6px;
  z-index: 2;
}

.cocProfileHeroLevel.maxed {
  background: linear-gradient(to top, rgba(180, 50, 0, 0.9) 0%, rgba(255, 100, 0, 0.85) 50%, rgba(255, 150, 0, 0.8) 100%);
  box-shadow: 0 0 4px rgba(255, 100, 0, 0.6), 0 0 8px rgba(255, 50, 0, 0.4);
  overflow: visible;
  animation: cocBoxGlow 0.5s ease-in-out infinite alternate;
}

.cocProfileHeroLevel.maxed .p {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.cocProfileHeroLevel.maxed .p1 {
  left: 5%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 220, 0) 20%, rgba(255, 220, 0, 0) 70%);
  animation: cocFire1 0.6s ease-in infinite;
}

.cocProfileHeroLevel.maxed .p2 {
  left: 20%;
  bottom: 0;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgb(255, 120, 0) 20%, rgba(255, 120, 0, 0) 70%);
  animation: cocFire2 0.8s ease-in infinite 0.15s;
}

.cocProfileHeroLevel.maxed .p3 {
  left: 35%;
  bottom: 1px;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 180, 0) 20%, rgba(255, 180, 0, 0) 70%);
  animation: cocFire1 0.7s ease-in infinite 0.3s;
}

.cocProfileHeroLevel.maxed .p4 {
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgb(255, 80, 0) 20%, rgba(255, 80, 0, 0) 70%);
  animation: cocFire3 0.9s ease-in infinite 0.1s;
}

.cocProfileHeroLevel.maxed .p5 {
  left: 65%;
  bottom: 2px;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgb(255, 200, 50) 20%, rgba(255, 200, 50, 0) 70%);
  animation: cocFire2 0.65s ease-in infinite 0.4s;
}

.cocProfileHeroLevel.maxed .p6 {
  left: 75%;
  bottom: 0;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 100, 0) 20%, rgba(255, 100, 0, 0) 70%);
  animation: cocFire1 0.75s ease-in infinite 0.25s;
}

.cocProfileHeroLevel.maxed .p7 {
  left: 88%;
  bottom: 1px;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgb(255, 160, 0) 20%, rgba(255, 160, 0, 0) 70%);
  animation: cocFire3 0.7s ease-in infinite 0.5s;
}

.cocProfileHeroLevel.maxed .p8 {
  left: 95%;
  bottom: 0;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 140, 20) 20%, rgba(255, 140, 20, 0) 70%);
  animation: cocFire2 0.85s ease-in infinite 0.35s;
}

.cocProfileEquipLevel {
  font-family: Clash, sans-serif;
  -webkit-text-stroke: 1px hsl(0, 0%, 10%);
  text-shadow: 2px 2px 0px hsl(0, 0%, 10%);
  background-color: hsl(0, 0%, 18%);
  color: hsl(0, 0%, 94%);
  position: absolute;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 3px;
  bottom: 4px;
  left: 4px;
  z-index: 2;
}

.cocProfileEquipLevel.maxed {
  background: linear-gradient(to top, rgba(180, 50, 0, 0.9) 0%, rgba(255, 100, 0, 0.85) 50%, rgba(255, 150, 0, 0.8) 100%);
  box-shadow: 0 0 4px rgba(255, 100, 0, 0.6), 0 0 8px rgba(255, 50, 0, 0.4);
  overflow: visible;
  animation: cocBoxGlow 0.5s ease-in-out infinite alternate;
}

.cocProfileEquipLevel.maxed .p {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.cocProfileEquipLevel.maxed .p1 {
  left: 5%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 220, 0) 20%, rgba(255, 220, 0, 0) 70%);
  animation: cocFire1 0.6s ease-in infinite;
}

.cocProfileEquipLevel.maxed .p2 {
  left: 20%;
  bottom: 0;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgb(255, 120, 0) 20%, rgba(255, 120, 0, 0) 70%);
  animation: cocFire2 0.8s ease-in infinite 0.15s;
}

.cocProfileEquipLevel.maxed .p3 {
  left: 35%;
  bottom: 1px;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 180, 0) 20%, rgba(255, 180, 0, 0) 70%);
  animation: cocFire1 0.7s ease-in infinite 0.3s;
}

.cocProfileEquipLevel.maxed .p4 {
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgb(255, 80, 0) 20%, rgba(255, 80, 0, 0) 70%);
  animation: cocFire3 0.9s ease-in infinite 0.1s;
}

.cocProfileEquipLevel.maxed .p5 {
  left: 65%;
  bottom: 2px;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgb(255, 200, 50) 20%, rgba(255, 200, 50, 0) 70%);
  animation: cocFire2 0.65s ease-in infinite 0.4s;
}

.cocProfileEquipLevel.maxed .p6 {
  left: 75%;
  bottom: 0;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 100, 0) 20%, rgba(255, 100, 0, 0) 70%);
  animation: cocFire1 0.75s ease-in infinite 0.25s;
}

.cocProfileEquipLevel.maxed .p7 {
  left: 88%;
  bottom: 1px;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgb(255, 160, 0) 20%, rgba(255, 160, 0, 0) 70%);
  animation: cocFire3 0.7s ease-in infinite 0.5s;
}

.cocProfileEquipLevel.maxed .p8 {
  left: 95%;
  bottom: 0;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 140, 20) 20%, rgba(255, 140, 20, 0) 70%);
  animation: cocFire2 0.85s ease-in infinite 0.35s;
}

.cocEquipTooltip {
  position: fixed;
  background: var(--wcfContentContainerBackground, #1a1a2e);
  border: 1px solid var(--wcfContentBorderInner, #444);
  border-radius: 8px;
  padding: 12px;
  z-index: 100000;
  min-width: 180px;
  max-width: 220px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.cocEquipGrid {
  display: grid;
  grid-template-columns: repeat(4, 38px);
  gap: 6px;
}

.cocEquipItem {
  width: 38px;
  height: 38px;
  position: relative;
  background: var(--wcfContentBackground, #252540);
  border-radius: 4px;
  overflow: hidden;
}

.cocEquipItem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cocEquipItem .eqLevel {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 0.55rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  padding: 1px 3px;
  border-radius: 0 3px 0 4px;
}

.cocEquipItem.epic {
  background: linear-gradient(135deg, #b640a8, #642785);
  padding: 2px;
}

.cocEquipItem.epic .eqLevel {
  background: linear-gradient(135deg, #8e44ad, #9b59b6);
}

.cocEquipItem.common {
  background: linear-gradient(135deg, #10c0dc, #46afef);
  padding: 2px;
}

.cocEquipItem.common .eqLevel {
  background: linear-gradient(135deg, #2980b9, #3498db);
}

.cocEquipItem.maxed .eqLevel {
  background: linear-gradient(to top, rgba(180, 50, 0, 0.9) 0%, rgba(255, 100, 0, 0.85) 50%, rgba(255, 150, 0, 0.8) 100%);
  box-shadow: 0 0 4px rgba(255, 100, 0, 0.6), 0 0 8px rgba(255, 50, 0, 0.4);
  overflow: visible;
  animation: cocBoxGlow 0.5s ease-in-out infinite alternate;
}

.cocEquipItem.maxed .eqLevel .p {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.cocEquipItem.maxed .eqLevel .p1 {
  left: 5%;
  bottom: 2px;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgb(255, 220, 0) 20%, rgba(255, 220, 0, 0) 70%);
  animation: cocFire1 0.6s ease-in infinite;
}

.cocEquipItem.maxed .eqLevel .p2 {
  left: 25%;
  bottom: 0;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 120, 0) 20%, rgba(255, 120, 0, 0) 70%);
  animation: cocFire2 0.8s ease-in infinite 0.15s;
}

.cocEquipItem.maxed .eqLevel .p3 {
  left: 50%;
  bottom: 1px;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgb(255, 180, 0) 20%, rgba(255, 180, 0, 0) 70%);
  animation: cocFire1 0.7s ease-in infinite 0.3s;
}

.cocEquipItem.maxed .eqLevel .p4 {
  left: 75%;
  bottom: 0;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgb(255, 80, 0) 20%, rgba(255, 80, 0, 0) 70%);
  animation: cocFire3 0.9s ease-in infinite 0.1s;
}

.cocEquipItem.maxed .eqLevel .p5 {
  left: 95%;
  bottom: 2px;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgb(255, 200, 50) 20%, rgba(255, 200, 50, 0) 70%);
  animation: cocFire2 0.65s ease-in infinite 0.4s;
}

.cocPlayerHeaderLayout {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.cocPlayerHeaderLeft {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cocPlayerHeaderRight {
  flex-shrink: 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: 10px;
}

.cocPlayerIdentity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cocPlayerTHImage {
  flex-shrink: 0;
}

.cocPlayerTHImage img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.cocPlayerTHFallback {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #a29bfe;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.cocPlayerInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cocPlayerNameRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cocPlayerName {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.cocRegisteredCheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #4caf50;
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: default;
}

.cocPlayerTag {
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
}

.cocPlayerClanRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cocPlayerClanBadge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.cocPlayerClanBadge img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.cocPlayerClanBadgeEmpty {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.cocPlayerClanInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cocPlayerClanName {
  font-size: 1rem;
  color: var(--wcfContentHeadlineText);
  font-weight: 600;
}

.cocPlayerClanRole {
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
}

.cocPlayerStatRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  gap: 15px;
}

.cocPlayerStatLabel {
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
}

.cocPlayerStatValue {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wcfContentHeadlineText);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cocLeagueBadgeSmall {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.cocPlayerStatDivider {
  height: 1px;
  background: var(--wcfContentBorderInner);
}

.cocClanHeaderLayout {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
}

.cocClanHeaderLeft {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  max-width: 60%;
}

.cocClanHeaderRight {
  flex-shrink: 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: 10px;
}

.cocClanDetailBadge {
  width: 70px;
  height: 70px;
  object-fit: contain;
  flex-shrink: 0;
}

.cocClanDetailInfo {
  flex: 1;
  min-width: 0;
}

.cocClanDetailInfo .clanTag {
  font-size: 0.9rem;
  color: var(--wcfContentDimmedText);
  font-weight: 400;
}

.cocClanDetailDesc {
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
  margin-top: 8px;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cocClanMembersTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.cocClanMembersTable thead tr {
  background: var(--wcfContentContainerBackground);
}

.cocClanMembersTable th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--wcfContentDimmedText);
}

.cocClanMembersTable th:nth-child(n+4) {
  text-align: center;
}

.cocClanMembersTable tbody tr {
  border-bottom: 1px solid var(--wcfContentBorderInner);
}

.cocClanMembersTable td {
  padding: 8px 10px;
}

.cocMemberRank {
  width: 40px;
}

.cocMemberPlayer .cocRegisteredMark {
  color: #4caf50;
  font-size: 0.8rem;
  margin-left: 5px;
}

.cocMemberMobileExtra {
  display: none;
  font-size: 0.75rem;
  margin-top: 4px;
}

.cocMemberTH img {
  width: 28px;
  height: 28px;
}

.cocMemberLeague img {
  width: 28px;
  height: 28px;
}

.cocMemberTH,
.cocMemberLeague {
  text-align: center;
}

.cocMemberTrophies {
  text-align: center;
}

.cocPlayerBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--wcfButtonBackground);
  color: var(--wcfButtonText);
  border: 1px solid var(--wcfButtonBorder, var(--wcfContentBorderInner));
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
  text-decoration: none;
}

.cocPlayerBtn:hover {
  background: var(--wcfButtonBackgroundActive, var(--wcfButtonBackground));
  border-color: var(--wcfButtonBorderActive, var(--wcfButtonBorder, var(--wcfContentBorderInner)));
}

.cocClanBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--wcfButtonBackground);
  color: var(--wcfButtonText);
  border: 1px solid var(--wcfButtonBorder, var(--wcfContentBorderInner));
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  text-decoration: none;
}

.cocClanBtn:hover {
  background: var(--wcfButtonBackgroundActive, var(--wcfButtonBackground));
  border-color: var(--wcfButtonBorderActive, var(--wcfButtonBorder, var(--wcfContentBorderInner)));
}

.cocClanBtn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.cocTrophyDisplay {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f59e0b;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
}

.cocTrophyDisplay .cocTrophyIcon {
  font-size: 0.8rem;
  font-weight: 700;
}

.cocTrophyDisplay .cocTrophyCount {
  font-weight: 600;
  color: #fff !important;
}

.cocProfileOverlayActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cocProfileOverlayActions.isCentered {
  justify-content: center;
}

.cocBtn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cocLeaderboardCard .cocPlayerBtn,
.cocLeaderboardCard .cocClanBtn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

.cocLeaderboardCard .cocClanBtn {
  font-size: 0.95rem;
  font-weight: 600;
}

.cocLeaderboardCard .cocClanBtn:hover,
.cocLeaderboardCard .cocPlayerBtn:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1024px) {
  .cocLeaderboardCard {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .cocLeaderboardStats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}
@media screen and (max-width: 768px) {
  .cocProfileOverlayDialog .dialog {
    width: min(96vw, 820px);
    max-height: 85vh;
    height: 85vh;
  }
  .cocModalHeader {
    padding: 15px;
  }
  .cocModalBody {
    padding: 15px;
  }
  .cocModalGrid {
    grid-template-columns: repeat(auto-fill, 56px);
    gap: 8px;
  }
  .cocModalItem {
    width: 56px;
    height: 56px;
  }
  .cocModalItem img {
    width: 56px;
    height: 56px;
  }
  .cocModalSection h4 {
    font-size: 0.85rem;
    margin-bottom: 8px;
    padding-bottom: 6px;
  }
  .cocPlayerHeaderLayout {
    flex-direction: column;
    gap: 15px;
  }
  .cocPlayerHeaderLeft {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .cocPlayerHeaderRight {
    min-width: 0;
    width: 100%;
    padding-right: 0;
  }
  .cocPlayerTHImage img,
  .cocPlayerTHFallback {
    width: 36px;
    height: 36px;
  }
  .cocPlayerName {
    font-size: 1.1rem;
  }
  .cocRegisteredCheck {
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
  }
  .cocPlayerTag {
    font-size: 0.8rem;
  }
  .cocPlayerClanRow {
    gap: 10px;
  }
  .cocPlayerClanBadge,
  .cocPlayerClanBadge img,
  .cocPlayerClanBadgeEmpty {
    width: 36px;
    height: 36px;
  }
  .cocPlayerClanName {
    font-size: 0.9rem;
  }
  .cocPlayerClanRole {
    font-size: 0.8rem;
  }
  .cocPlayerStatRow {
    padding: 6px 0;
  }
  .cocPlayerStatLabel {
    font-size: 0.8rem;
  }
  .cocPlayerStatValue {
    font-size: 0.9rem;
  }
  .cocLeagueBadgeSmall {
    width: 20px;
    height: 20px;
  }
  .cocClanHeaderLayout {
    flex-direction: column;
    gap: 15px;
  }
  .cocClanHeaderLeft {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 100%;
  }
  .cocClanHeaderRight {
    min-width: 0;
    width: 100%;
    padding-right: 0;
  }
  .cocClanDetailBadge {
    width: 60px;
    height: 60px;
  }
  .cocClanDetailDesc {
    font-size: 0.75rem;
    -webkit-line-clamp: 2;
  }
  .cocClanMembersTable {
    display: block;
  }
  .cocClanMembersTable thead {
    display: none;
  }
  .cocClanMembersTable tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cocClanMembersTable tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--wcfContentContainerBackground);
    border-radius: 10px;
    padding: 10px 12px;
    gap: 10px;
    border: none !important;
    cursor: pointer;
    transition: transform 0.1s, background 0.1s;
  }
  .cocClanMembersTable tbody tr:active {
    transform: scale(0.98);
    background: var(--wcfContentBackground);
  }
  .cocMemberRank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wcfContentBackground);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
    padding: 0;
  }
  .cocMemberPlayer {
    flex: 1;
    min-width: 0;
    padding: 0 !important;
  }
  .cocMemberPlayer .cocPlayerBtn {
    display: inline-flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    padding: 3px 8px;
    max-width: 120px;
  }
  .cocMemberMobileExtra {
    display: block;
    color: var(--wcfContentDimmedText);
  }
  .cocMemberTrophies {
    padding: 0 !important;
    margin-left: auto;
  }
  .cocMemberTrophies .cocTrophyDisplay {
    padding: 4px 8px;
    min-width: 60px;
    font-size: 0.8rem;
    color: #fff !important;
  }
  .cocHideMobile {
    display: none !important;
  }
  .cocBtn {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
  .cocPlayerBtn,
  .cocClanBtn {
    padding: 3px 8px;
    font-size: 0.8rem;
  }
  .cocClanBtn img {
    width: 16px;
    height: 16px;
  }
}
@media screen and (max-width: 544px) {
  .cocModalBody {
    padding: 12px;
  }
  .cocPlayerHeaderLayout {
    gap: 12px;
  }
  .cocPlayerHeaderLeft {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cocPlayerName {
    font-size: 1rem;
  }
  .cocPlayerTag {
    font-size: 0.75rem;
  }
  .cocPlayerStatRow {
    padding: 5px 0;
  }
  .cocPlayerStatLabel,
  .cocPlayerStatValue {
    font-size: 0.8rem;
  }
  .cocModalGrid {
    grid-template-columns: repeat(auto-fill, 48px);
    gap: 6px;
  }
  .cocModalItem {
    width: 48px;
    height: 48px;
  }
  .cocModalItem img {
    width: 48px;
    height: 48px;
  }
  .cocModalItem .level {
    font-size: 11px;
    padding: 2px 3px;
  }
  .cocClanDetailBadge {
    width: 50px;
    height: 50px;
  }
  .cocClanMembersTable tbody tr {
    padding: 8px 10px;
    gap: 8px;
  }
  .cocMemberRank {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
  }
  .cocMemberPlayer .cocPlayerBtn {
    max-width: 100px;
    font-size: 0.75rem;
    padding: 2px 6px;
  }
  .cocMemberMobileExtra {
    font-size: 0.7rem;
  }
  .cocMemberTrophies .cocTrophyDisplay {
    padding: 3px 6px;
    min-width: 50px;
    font-size: 0.75rem;
  }
  .cocEquipTooltip {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    max-width: calc(100% - 40px);
  }
  .cocEquipGrid {
    grid-template-columns: repeat(4, 36px);
    gap: 5px;
  }
  .cocEquipItem {
    width: 36px;
    height: 36px;
  }
}
.cocArmyBuilder {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cocArmyCapacity {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
  background: hsl(from var(--wcfContentBackground) h s calc(l - 3));
  border-radius: var(--wcfBorderRadius);
}

.cocArmyCapacityItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.cocArmyCapacityIcon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.cocArmyCapacityFallback {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wcfBorderRadius);
  background: var(--wcfButtonBackground);
  font-size: 0.65rem;
  text-transform: uppercase;
}

.cocArmyCapacityLabel {
  font-weight: 600;
  display: none;
}

.cocArmyCapacityItem::after {
  content: "✕";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: #c52727;
}

.cocArmyCapacityItem.isFull::after {
  content: "✓";
  background: #2a9d4b;
}

.cocArmyUnitTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cocArmyUnitTab.button.active {
  background: var(--wcfButtonPrimaryBackground) !important;
  color: var(--wcfButtonPrimaryText, #fff) !important;
  border-color: var(--wcfButtonPrimaryBackground) !important;
}

.cocArmyUnitTab.disabled,
.cocArmyUnitTab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cocArmyUnitContent {
  display: none;
}

.cocArmyUnitContent.active {
  display: block;
}

.cocArmyUnitGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 10px;
  padding: 8px;
  background: var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadius);
  max-height: 246px;
  overflow: auto;
}

@media screen and (min-width: 1025px), print {
  .cocArmyUnitGrid {
    max-height: 246px;
    overflow: auto;
  }
}
.cocArmyUnitHeaderTitle {
  margin: 8px 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wcfContentDimmedText);
}

.cocArmyUnit {
  position: relative;
  border: 0;
  border-radius: var(--wcfBorderRadius);
  width: 70px;
  height: 70px;
  background: linear-gradient(0deg, #297abc, #52bdff);
  background-color: #60a7d8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cocArmyUnit.isDisabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: grayscale(1);
}

.cocArmyUnit.isLocked {
  filter: grayscale(0.85);
}

.cocArmyUnit:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wcfButtonPrimaryBackground) 40%, transparent);
  transform: translateY(-2px);
}

.cocArmyUnit.isDisabled:hover {
  box-shadow: none;
  transform: none;
}

.cocArmyUnit.selected {
  box-shadow: 0 0 0 2px var(--wcfButtonPrimaryBackground);
}

.cocArmySuperUnit {
  background: linear-gradient(0deg, #682225, #ae4642);
  background-color: #a2283f;
}

.cocArmyUnit[data-kind=spell] {
  background: linear-gradient(0deg, #644ad9, #775ce0);
  background-color: #655fd0;
}

.cocArmyUnit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cocArmyUnitLevel {
  font-family: Clash, sans-serif;
  -webkit-text-stroke: 1px hsl(0, 0%, 10%);
  text-shadow: 2px 2px 0px hsl(0, 0%, 10%);
  background-color: hsl(0, 0%, 18%);
  color: hsl(0, 0%, 94%);
  position: absolute;
  border-radius: 4px;
  font-size: 13px;
  padding: 3px;
  bottom: 4px;
  left: 4px;
}

.cocArmyUnit.isMaxed .cocArmyUnitLevel {
  background: linear-gradient(to top, rgba(180, 50, 0, 0.9) 0%, rgba(255, 100, 0, 0.85) 50%, rgba(255, 150, 0, 0.8) 100%);
  box-shadow: 0 0 4px rgba(255, 100, 0, 0.6), 0 0 8px rgba(255, 50, 0, 0.4);
  overflow: visible;
  animation: cocBoxGlow 0.5s ease-in-out infinite alternate;
}

.cocArmyUnitFallback {
  font-size: 0.7rem;
  font-weight: 600;
}

.cocArmyUnitCount {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--wcfBorderRadius);
  min-width: 16px;
  text-align: center;
}

.cocArmyUnitRemove {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #c52727;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.cocArmyUnitCount,
.cocArmyUnitRemove {
  display: none;
}

.cocArmyUnit.selected .cocArmyUnitRemove {
  display: none;
}

.cocArmyNoUnits {
  grid-column: 1/-1;
  text-align: center;
  color: var(--wcfContentDimmedText);
  padding: 12px;
  font-style: italic;
}

.cocArmyBuilder .cocArmyHeroList {
  display: grid;
  gap: 12px;
}

.cocArmyBuilder .cocArmyHeroRow {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 12px;
  border-radius: var(--wcfBorderRadius);
  border: 1px dashed var(--wcfContentBorder);
  background: hsl(from var(--wcfContentBackground) h s calc(l - 3));
}

.cocArmyBuilder .cocArmyHeroRow.isEmpty {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.cocArmyBuilder .cocArmyHeroRow.isLocked {
  opacity: 0.55;
}

.cocArmyBuilder .cocArmyHeroMain {
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: start;
}

.cocArmyBuilder .cocArmyHeroPortrait {
  width: 70px;
  height: 70px;
}

.cocArmyBuilder .cocArmyHeroPortrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cocArmyBuilder .cocArmyHeroName {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cocArmyBuilder .cocArmyHeroRemove {
  width: 100%;
  background: color-mix(in srgb, var(--wcfErrorText, #ff6b6b) 15%, transparent);
  border-color: color-mix(in srgb, var(--wcfErrorText, #ff6b6b) 40%, transparent);
  color: var(--wcfErrorText, #ff6b6b);
}

.cocArmyBuilder .cocArmyHeroEquip,
.cocArmyBuilder .cocArmyHeroPets {
  display: grid;
  gap: 6px;
  align-content: start;
}

.cocArmyBuilder .cocArmyHeroPicker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.cocArmyBuilder .cocArmyHeroSlots {
  display: grid;
  gap: 8px;
}

.cocArmyBuilder .cocArmyHeroSlot {
  width: 70px;
  height: 70px;
  border-radius: var(--wcfBorderRadius);
  border: 1px dashed var(--wcfContentBorder);
  background: hsl(from var(--wcfContentBackground) h s calc(l - 6));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cocArmyBuilder .cocArmyHeroSlot.isFilled {
  border-style: solid;
}

.cocArmyBuilder .cocArmyHeroEquipSlot.isFilled {
  background: linear-gradient(315deg, #107cc6, #30b8fd);
  background-color: #107cc6;
}

.cocArmyBuilder .cocArmyHeroEquipSlot.isEpic {
  background: linear-gradient(315deg, #9228ca, #bb41f5);
  background-color: #9228ca;
}

.cocArmyBuilder .cocArmyHeroPetSlot.isFilled {
  background: #3d3d3d;
}

.cocArmyBuilder .cocArmyHeroSlot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cocArmyBuilder .cocArmyHeroSlot .count {
  font-family: Clash, sans-serif;
  -webkit-text-stroke: 1px hsl(0, 0%, 10%);
  text-shadow: 2px 2px 0px hsl(0, 0%, 10%);
  color: hsl(0, 0%, 94%);
  position: absolute;
  font-size: 16px;
  left: 4px;
  top: 4px;
}

.cocArmyBuilder .cocArmyHeroEquipLabel,
.cocArmyBuilder .cocArmyHeroPetLabel {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--wcfContentDimmedText);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cocArmyBuilder .cocArmyHeroEquipGrid,
.cocArmyBuilder .cocArmyHeroPetGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 6px;
  padding: 0;
  background: transparent;
  max-height: 158px;
  overflow: auto;
  align-content: start;
  grid-auto-rows: 70px;
}

.cocArmyBuilder .cocArmyHeroEquipItem,
.cocArmyBuilder .cocArmyHeroPetItem {
  border-radius: var(--wcfBorderRadius);
  border: 0;
  background: linear-gradient(315deg, #107cc6, #30b8fd);
  background-color: #107cc6;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  box-sizing: border-box;
}

.cocArmyBuilder .cocArmyHeroEquipItem {
  width: 70px;
  height: 70px;
}

.cocArmyBuilder .cocArmyHeroPetItem {
  width: 70px;
  height: 70px;
}

.cocArmyBuilder .cocArmyHeroEquipItem.selected,
.cocArmyBuilder .cocArmyHeroPetItem.selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wcfButtonPrimaryBackground) 45%, transparent);
  filter: grayscale(1);
}

.cocArmyBuilder .cocArmyHeroEquipItem.isEpic {
  background: linear-gradient(315deg, #9228ca, #bb41f5);
  background-color: #9228ca;
}

.cocArmyBuilder .cocArmyHeroPetItem {
  background: #3d3d3d;
}

.cocArmyBuilder .cocArmyHeroEquipItem.isLocked,
.cocArmyBuilder .cocArmyHeroPetItem.isLocked,
.cocArmyBuilder .cocArmyHeroEquipItem.isDisabled,
.cocArmyBuilder .cocArmyHeroPetItem.isDisabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}

.cocArmyBuilder .cocArmyHeroAdd {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.cocArmyBuilder .cocArmyHeroAdd img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.cocArmyBuilder .cocArmyHeroAddLabel {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cocArmyBuilder .cocArmyHeroAddButton {
  width: 56px;
  height: 40px;
  padding: 0;
  font-size: 1.2rem;
}

.cocArmyBuilder .cocArmyHeroAddButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media screen and (max-width: 1024px) {
  .cocArmyBuilder .cocArmyHeroRow {
    grid-template-columns: 1fr;
  }
  .cocArmyBuilder .cocArmyHeroMain {
    justify-items: center;
  }
}
.cocArmyPetItem:hover,
.cocArmyEquipItem:hover {
  opacity: 0.8;
  border-color: var(--wcfContentBorderInner);
}

.cocArmyEquipItem.isEpic:hover {
  border-color: #8701b5;
}

.cocArmyPetItem.selected,
.cocArmyEquipItem.selected {
  opacity: 1;
  border-color: var(--wcfButtonPrimaryBackground);
}

.cocArmyPetItem.disabled,
.cocArmyEquipItem.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cocArmyPetItem img,
.cocArmyEquipItem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cocArmyPreview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--wcfContentBorderInner);
}

.cocArmyPreviewContent {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 44px;
  padding: 10px;
  background: var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadius);
}

.cocArmyPreviewEmpty {
  margin-top: 8px;
  color: var(--wcfContentDimmedText);
  font-style: italic;
}

.cocArmyPreviewEmpty.isHidden {
  display: none;
}

.cocArmyPreviewUnit {
  position: relative;
}

.cocArmyPreviewUnit img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.cocArmyPreviewUnit .count {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: var(--wcfBorderRadius);
}

.cocArmyPreviewHeroWithPet {
  display: flex;
  align-items: flex-end;
}

.cocArmyPreviewPet {
  width: 18px;
  height: 18px;
  margin-left: -8px;
  margin-bottom: -4px;
  border-radius: 50%;
  border: 2px solid var(--wcfContentBackground);
  background: var(--wcfContentBackground);
}

.cocArmyPreviewHeroGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 4px;
}

.cocArmyPreviewEquipRow {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}

.cocArmyPreviewEquip {
  width: 16px;
  height: 16px;
  border-radius: var(--wcfBorderRadius);
  overflow: hidden;
  background: var(--wcfContentBackground);
  padding: 1px;
}

.cocArmyPreviewEquip.isEpic {
  border: 1px solid color-mix(in srgb, #8701b5 30%, transparent);
  background: color-mix(in srgb, #8701b5 12%, transparent);
}

.cocArmyPreviewEquip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cocArmyPreviewCC {
  border: 2px solid var(--wcfButtonPrimaryBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 2px;
  background: color-mix(in srgb, var(--wcfButtonPrimaryBackground) 12%, transparent);
}

@media screen and (max-width: 768px) {
  #cocArmyCreateDialog .dialogFormSubmit {
    position: static;
    justify-content: center;
    padding: 0;
    margin-top: 20px;
  }
  #cocArmyCreateDialog .dialogContent.dialogForm {
    margin-bottom: 0 !important;
  }
  .cocArmySectionHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cocArmyCapacity {
    width: 100%;
  }
  .cocArmyCamp .cocArmySectionHeader .cocArmyCapacity {
    margin-left: 0;
    margin-right: 0;
  }
  .cocArmyCapacity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
  }
  .cocArmyCapacityItem {
    width: 100%;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .cocArmyCapacityIcon,
  .cocArmyCapacityFallback {
    width: 20px;
    height: 20px;
  }
  .cocArmyCapacityLabel {
    display: none;
  }
  .cocArmyUnitTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .cocArmyUnitTab.button {
    flex: 0 0 auto;
    padding: 4px 8px;
    font-size: 0.78rem;
  }
  .cocArmyUnitGrid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
    padding: 6px;
    max-height: 246px;
    overflow: auto;
  }
  .cocArmyHeroGrid {
    gap: 10px;
  }
  .cocArmyHeroUnit {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 10px;
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 10px;
    align-items: start;
  }
  .cocArmyHeroImg {
    width: 52px;
    height: 52px;
    margin-bottom: 0;
    grid-row: 1/span 4;
  }
  .cocArmyHeroName,
  .cocArmyPetGrid,
  .cocArmyEquipGrid,
  .cocArmyNoUnits {
    grid-column: 2;
  }
  .cocArmyHeroName {
    text-align: left;
    margin-bottom: 4px;
  }
  .cocArmyPetGrid,
  .cocArmyEquipGrid {
    justify-content: flex-start;
    padding: 4px;
  }
  .cocArmyPetLabel,
  .cocArmyEquipLabel {
    text-align: left;
    margin-bottom: 2px;
  }
  .cocArmyPetItem,
  .cocArmyEquipItem {
    width: 24px;
    height: 24px;
  }
}
@media screen and (max-width: 768px) {
  .cocArmyUnitGrid {
    max-height: 246px;
    overflow: auto;
  }
  .cocArmyUnit,
  .cocArmySelectedUnit {
    width: 60px;
    height: 60px;
  }
  .cocArmySelectedRow {
    min-height: 76px;
  }
  .cocArmyBuilder .cocArmyHeroPortrait {
    width: 60px;
    height: 60px;
  }
  .cocArmyBuilder .cocArmyHeroSlot {
    width: 60px;
    height: 60px;
  }
  .cocArmyBuilder .cocArmyHeroEquipItem,
  .cocArmyBuilder .cocArmyHeroPetItem {
    width: 60px;
    height: 60px;
  }
  .cocArmyBuilder .cocArmyHeroEquipGrid,
  .cocArmyBuilder .cocArmyHeroPetGrid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    grid-auto-rows: 60px;
  }
}
.cocArmyBuilderLayout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cocArmySection {
  border: 1px dashed color-mix(in srgb, var(--wcfContentBorder), transparent 20%);
  border-radius: var(--wcfBorderRadius);
  padding: 16px;
  background: hsl(from var(--wcfContentBackground) h s calc(l - 2));
}

.cocArmySectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cocArmyCamp .cocArmySectionHeader .cocArmyCapacity {
  margin-left: auto;
  margin-right: auto;
}

.cocArmySectionActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cocArmySectionToggle {
  background: transparent;
  border-color: color-mix(in srgb, var(--wcfErrorText, #ff6b6b) 40%, transparent);
  color: var(--wcfErrorText, #ff6b6b);
}

.cocArmyToggleSection.isCollapsed .cocArmySectionBody {
  display: none;
}

.cocArmyToggleSection.isCollapsed .cocArmySectionPlaceholder {
  display: grid;
}

.cocArmyToggleSection.isCollapsed .cocArmySectionToggle,
.cocArmyToggleSection.isCollapsed .cocArmyCapacity {
  display: none;
}

.cocArmySectionPlaceholder {
  display: none;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 12px;
  color: var(--wcfContentDimmedText);
}

.cocArmySectionPlaceholder img {
  max-height: 110px;
  width: auto;
  object-fit: contain;
}

.cocArmyPlaceholderArt,
.cocArmyPlaceholderHeroArt {
  position: relative;
}

.cocArmyPlaceholderArt {
  max-width: 150px;
  width: 100%;
}

.cocArmyPlaceholderHeroArt {
  display: flex;
}

.cocArmyPlaceholderArt::before,
.cocArmyPlaceholderHeroArt::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, hsl(from var(--wcfContentBackground) h s calc(l - 2)), hsl(from var(--wcfContentBackground) h s calc(l - 2)) 5%, rgba(41, 41, 41, 0));
}

.cocArmyPlaceholderArt img {
  width: 100%;
  height: auto;
  display: block;
}

.cocArmyPlaceholderTitle {
  font-size: 16px;
  color: var(--wcfContentDimmedText);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: none;
  border: none;
  line-height: 21px;
  max-width: 225px;
  text-align: center;
  margin: -24px 0 0;
  position: relative;
}

.cocArmyPlaceholderButton {
  width: 56px;
  height: 40px;
  padding: 0;
  font-size: 1.2rem;
}

.cocArmyToggleSection.isLocked .cocArmySectionPlaceholder {
  opacity: 0.7;
}

.cocArmyToggleSection.isLocked .cocArmyPlaceholderButton {
  display: none;
}

.cocArmyFilters {
  margin-bottom: 16px;
}

.cocArmyFilters.isCollapsed {
  display: none;
}

.cocArmyFilters .form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.cocArmyFilters .formField {
  flex: 1 1 200px;
  min-width: 180px;
}

.cocArmyFilterForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.cocArmyFilterRow {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cocArmyFilterRow dl {
  margin-top: 0 !important;
}

.cocArmyFilterGroup {
  display: grid;
  gap: 10px;
  margin: 0;
}

.cocArmyFilterGroupTitle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--wcfContentDimmedText);
}

.cocArmyFilterChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cocArmyFilterPicker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.cocArmyFilterUnit {
  border-radius: 10px;
  background: linear-gradient(0deg, #297abc, #52bdff);
  background-color: #60a7d8;
  border: 1px solid transparent;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s ease;
}

.cocArmyFilterUnit img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.cocArmyFilterUnit[data-kind=spell] {
  background: linear-gradient(0deg, #644ad9, #775ce0);
  background-color: #655fd0;
}

.cocArmyFilterUnit.isSuper {
  background: linear-gradient(0deg, #682225, #ae4642);
  background-color: #a2283f;
}

.cocArmyFilterUnit.isActive {
  border-color: var(--wcfButtonPrimaryBackground);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wcfButtonPrimaryBackground) 35%, transparent);
}

.cocArmyFilterActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.cocArmyHeroPlaceholderImages {
  display: flex;
  align-items: flex-end;
}

.cocArmyHeroPlaceholderImages img {
  max-width: 100px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.cocArmyHeroPlaceholderImages img + img {
  margin-left: -24px;
}

.cocArmySectionBadge,
.cocArmySectionPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--wcfButtonPrimaryBackground) 15%, transparent);
  color: var(--wcfContentText);
}

.cocArmySectionHeaderCard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cocArmyBannerSection {
  padding: 0;
}

.cocArmyHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cocArmyBanner {
  display: grid;
  gap: 12px;
  position: relative;
}

.cocArmyBannerPreview {
  min-height: 140px;
  max-height: 350px;
  border-radius: var(--wcfBorderRadius);
  background: color-mix(in srgb, var(--wcfContentBackground) 85%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cocArmyBannerPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cocArmyBannerPlaceholder {
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
}

.cocArmyBannerButton {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--wcfBorderRadius);
  position: absolute;
  right: 16px;
  bottom: 16px;
}

.cocArmyBannerDialog {
  display: grid;
  gap: 16px;
}

.cocArmyBannerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  max-height: 60vh;
  overflow: auto;
  padding-right: 4px;
}

.cocArmyBannerTile {
  border: 1px solid var(--wcfContentBorder);
  border-radius: var(--wcfBorderRadius);
  background: var(--wcfContentBackground);
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.cocArmyBannerTile.isActive {
  border-color: var(--wcfButtonPrimaryBackground);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wcfButtonPrimaryBackground) 25%, transparent);
}

.cocArmyBannerTile:hover {
  border-color: var(--wcfButtonPrimaryBackground);
  transform: translateY(-1px);
}

.cocArmyBannerTile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--wcfBorderRadius) - 2px);
}

.cocArmyBannerEmpty {
  text-align: center;
  color: var(--wcfContentDimmedText);
}

.cocArmyHeaderFields {
  display: grid;
  gap: 12px;
}

.cocArmyTownHallBlock,
.cocArmyTagsBlock {
  display: grid;
  gap: 6px;
}

.cocArmyTownHallButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cocArmyTownHallButton {
  border: 1px solid var(--wcfContentBorder);
  border-radius: var(--wcfBorderRadius);
  background: hsl(from var(--wcfContentBackground) h s calc(l - 4));
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 80px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.cocArmyTownHallButton .cocThIcon {
  width: 32px;
  height: 32px;
  margin-right: 0;
}

.cocArmyTownHallLevel {
  font-weight: 700;
  font-size: 0.85rem;
}

.cocArmyTownHallButton.isActive {
  border-color: var(--wcfButtonPrimaryBackground);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wcfButtonPrimaryBackground) 25%, transparent);
}

.cocArmyTownHallButton:hover {
  border-color: var(--wcfButtonPrimaryBackground);
  transform: translateY(-1px);
}

.cocArmyTagOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cocArmyTagsChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cocArmyTagOption {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--wcfContentBorder);
}

.cocArmyTagOption.isActive {
  background: color-mix(in srgb, var(--wcfButtonPrimaryBackground) 25%, transparent);
  border-color: var(--wcfButtonPrimaryBackground);
  color: var(--wcfContentText);
}

.cocArmySelectedRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-radius: var(--wcfBorderRadius);
  background: hsl(from var(--wcfContentBackground) h s calc(l - 4));
  min-height: 86px;
  align-items: center;
}

.cocArmySelectedRow .cocArmySelectedPlaceholder {
  min-height: 70px;
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
}

.cocArmySelectedRow.isEmpty .cocArmySelectedPlaceholder {
  display: inline-flex;
}

.cocArmySelectedRow:not(.isEmpty) .cocArmySelectedPlaceholder {
  display: none;
}

.cocArmySelectedUnit {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: var(--wcfBorderRadius);
  background: linear-gradient(0deg, #297abc, #52bdff);
  background-color: #60a7d8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.cocArmySelectedUnit[data-kind=spell] {
  background: linear-gradient(0deg, #644ad9, #775ce0);
  background-color: #655fd0;
}

.cocArmySelectedUnit.isSuper {
  background: linear-gradient(0deg, #682225, #ae4642);
  background-color: #a2283f;
}

.cocArmySelectedUnit[data-kind=hero] {
  background: linear-gradient(0deg, #682225, #ae4642);
  background-color: #a2283f;
}

.cocArmySelectedUnit[data-kind=equipment] {
  width: 54px;
  height: 54px;
  background: linear-gradient(315deg, #107cc6, #30b8fd);
  background-color: #107cc6;
}

.cocArmySelectedUnit.isEpic {
  background: linear-gradient(315deg, #9228ca, #bb41f5);
  background-color: #9228ca;
}

.cocArmySelectedUnit[data-kind=pet] {
  width: 54px;
  height: 54px;
  background: #3d3d3d;
}

.cocArmySelectedUnit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cocArmySelectedUnit .count {
  font-family: Clash, sans-serif;
  -webkit-text-stroke: 1px hsl(0, 0%, 10%);
  text-shadow: 2px 2px 0px hsl(0, 0%, 10%);
  color: hsl(0, 0%, 94%);
  position: absolute;
  font-size: 16px;
  left: 4px;
  top: 4px;
}

.cocArmyPickerGroup {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.cocArmyPickerTitle {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wcfContentDimmedText);
}

@media screen and (max-width: 1024px) {
  .cocArmySection {
    padding: 12px;
  }
  .cocArmyTownHallButton {
    padding: 4px 6px;
    width: 64px;
  }
}
.cocArmyTagChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #d3a14a 30%, transparent);
  border: 1px solid color-mix(in srgb, #d3a14a 60%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
}

.cocArmyTagRemove {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.cocArmyImportDialog .formSubmit {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cocArmyDetailHero {
  display: grid;
  gap: 14px;
}

.cocArmyDetailBanner {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #1d1f24;
}

.cocArmyDetailBanner.isEmpty {
  min-height: 260px;
}

.cocArmyDetailBannerImage {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 350px;
  aspect-ratio: 1920/800;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .cocArmyDetailBannerImage {
    height: 350px;
  }
}
.cocArmyDetailBannerOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

.cocArmyDetailBannerContent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 22px;
  gap: 16px;
  color: #f4f6f8;
}

.cocArmyDetailBannerLeft {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cocArmyDetailTitleRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cocArmyDetailTownHall {
  max-height: 60px;
  width: auto;
}

.cocArmyDetailTitle {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #fff;
}

.cocArmyDetailAuthor {
  margin: 0;
  color: #d6d9de;
  font-weight: 500;
}

.cocArmyDetailAuthor a {
  color: #78c4ff;
  font-weight: 700;
}

.cocArmyDetailTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cocArmyDetailTags li {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(24, 26, 30, 0.7);
  color: #f4f6f8;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cocArmyDetailBannerRight {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cocArmyDetailMeta {
  margin: 0;
  color: var(--wcfContentDimmedText);
}
.cocArmyDetailMeta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cocArmyDetailMeta img {
  width: 18px;
  height: 18px;
}
.cocArmyDetailMeta fa-icon svg {
  width: 16px;
  height: 16px;
}

.cocArmyDetailMetaRating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cocArmyDetailMetaRating.cocArmyRating {
  flex-direction: row;
}
.cocArmyDetailMetaRating .cocArmyRatingField {
  display: inline-flex;
}
.cocArmyDetailMetaRating .ratingList {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.cocArmyDetailMetaRating .ratingList {
  gap: 2px;
}
.cocArmyDetailMetaRating .ratingList button {
  padding: 0;
}
.cocArmyDetailMetaRating .ratingList fa-icon svg {
  width: 16px;
  height: 16px;
}

.cocArmyCompositionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.cocArmyDetailSection {
  border: 1px dashed color-mix(in srgb, var(--wcfContentBorder), transparent 25%);
  border-radius: var(--wcfBorderRadius);
  padding: 16px 20px 20px;
  background: hsl(from var(--wcfContentBackground) h s calc(l - 3));
}

.cocArmyDetailSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 16px;
}

.cocArmyDetailSectionTitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wcfContentText);
  background: color-mix(in srgb, var(--wcfButtonPrimaryBackground) 18%, transparent);
  padding: 6px 10px;
  border-radius: 999px;
}

.cocArmyDetailCapacity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
}

.cocArmyDetailCapacityItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--wcfContentBorder), transparent 35%);
}

.cocArmyDetailUnits {
  border-radius: calc(var(--wcfBorderRadius) + 2px);
  background: color-mix(in srgb, var(--wcfContentBackground) 5%, #000 1%);
  border: 1px dashed color-mix(in srgb, var(--wcfContentBorder), transparent 20%);
  padding: 12px 14px;
}

.cocArmyDetailUnits .cocArmyCompositionRow {
  margin: 0;
}

.cocArmyDetailHeroes {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
}

.cocArmyDetailHeroCard {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}

.cocProfileHeroCard {
  flex-wrap: wrap;
}

.cocArmyDetailHeroMain {
  display: flex;
  align-items: center;
}

.cocArmyDetailHeroMain img {
  width: 84px;
  height: 112px;
  object-fit: contain;
}

.cocArmyDetailHeroItems {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  grid-auto-rows: 54px;
  gap: 8px;
  align-content: start;
}

@media (min-width: 900px) {
  .cocArmyDetailHeroItems {
    grid-template-columns: repeat(4, 54px);
  }
}
.cocProfileHeroItems {
  display: none;
}

.cocProfileHeroCard.isEquipmentOpen .cocProfileHeroItems {
  display: grid;
}

.cocArmyDetailHeroEquip,
.cocArmyDetailHeroPet {
  display: contents;
}

.cocArmyGuideText {
  margin-bottom: 12px;
}

.cocArmyGuideWarning {
  padding: 12px;
  border-radius: var(--wcfBorderRadius);
  background: color-mix(in srgb, #c52727 12%, transparent);
}

.cocArmyVideo iframe {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  height: auto;
  min-height: 0;
  display: block;
  border-radius: var(--wcfBorderRadius);
}

.cocArmyDetailVideo {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed color-mix(in srgb, var(--wcfContentBorder), transparent 20%);
}

.cocArmyVideo {
  max-width: 800px;
}

.cocArmyDetailVideoTitle {
  margin: 0 0 12px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wcfContentDimmedText);
}

@media screen and (max-width: 768px) {
  .cocArmyDetailBannerContent {
    flex-direction: column;
    align-items: flex-start;
  }
  .cocArmyDetailTownHall {
    max-height: 48px;
  }
}
.cocArmyCard {
  border: 1px dashed color-mix(in srgb, var(--wcfContentBorder), transparent 25%);
  background: hsl(from var(--wcfContentBackground) h s calc(l - 2));
}

.cocArmyCardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.cocEmptyState {
  display: flex;
  justify-content: center;
}

.cocEmptyStateCard {
  width: 100%;
  padding: 32px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cocEmptyStateImage {
  width: min(320px, 70%);
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35));
}

.cocEmptyStateText {
  margin: 0;
  font-family: "Clash", var(--wcfFontFamily, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wcfContentHeadlineText, var(--wcfContentText));
}

.cocEmptyStateActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.cocEmptyStateActions .button {
  font-family: "Clash", var(--wcfFontFamily, sans-serif);
}

.cocEmptyNotice {
  display: block;
  width: 100%;
}

.cocRecruitingListingGrid .cocEmptyNotice {
  grid-column: 1/-1;
}

.cocArmyGalleryList {
  --cocArmyCardBg: color-mix(in srgb, var(--wcfContentBackground) 92%, #000 8%);
  --cocArmyCardBorder: color-mix(in srgb, var(--wcfContentBorder) 70%, transparent);
  --cocArmyAccent: #f0b15a;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cocArmyGalleryCard {
  border: 1px dashed var(--cocArmyCardBorder);
  border-radius: calc(var(--wcfBorderRadius) + 2px);
  background: var(--cocArmyCardBg);
  padding: 18px 20px;
  display: grid;
  gap: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.cocArmyGalleryCard.isPrivate {
  border-color: color-mix(in srgb, #c84444 65%, var(--cocArmyCardBorder));
  background: linear-gradient(120deg, rgba(200, 68, 68, 0.12), rgba(0, 0, 0, 0) 40%), var(--cocArmyCardBg);
}

.cocArmyGalleryHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cocArmyGalleryHeaderMain {
  min-width: 0;
}

.cocArmyGalleryBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.cocArmyBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--wcfContentText) 10%, transparent);
  color: var(--wcfContentText);
  border: 1px solid color-mix(in srgb, var(--wcfContentBorder) 70%, transparent);
}

.cocArmyBadgeTh {
  background: color-mix(in srgb, #1f5d8f 75%, transparent);
  color: #e6f2ff;
  border-color: color-mix(in srgb, #1f5d8f 40%, transparent);
}

.cocArmyBadgePrivate {
  background: color-mix(in srgb, #c84444 25%, transparent);
  color: #ffeaea;
  border-color: color-mix(in srgb, #c84444 40%, transparent);
}

.cocArmyBadgeTh img {
  width: 16px;
  height: 16px;
}

.cocArmyGalleryHeaderMeta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cocArmyGalleryHeaderMeta:empty {
  display: none;
}

.cocArmyGalleryHeaderActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cocArmyGalleryCapacities {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.cocArmyGalleryCapacity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--wcfContentBorder) 22%, transparent);
  color: var(--wcfContentText);
}

.cocArmyGalleryCapacity .icon {
  font-size: 0.8rem;
}

.cocArmyGalleryUnits {
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--wcfContentBackground) 92%, #000 8%);
  border: 1px dashed color-mix(in srgb, var(--wcfContentBorder) 55%, transparent);
}

.cocArmyGalleryCard .cocArmyCompositionRow {
  gap: 6px;
  margin: 0;
}

.cocArmyGalleryCard .cocArmySelectedUnit {
  width: 46px;
  height: 46px;
  border-radius: 10px;
}

.cocArmyGalleryFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px dashed color-mix(in srgb, var(--wcfContentBorder) 55%, transparent);
  padding-top: 12px;
}

.cocArmyGalleryActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cocArmyGalleryFooterLeft {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cocArmyGalleryMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--wcfContentDimmedText);
}

.cocArmyGalleryStats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--wcfContentDimmedText);
}

.cocArmyGalleryMetaItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cocArmyGalleryInteractions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.cocArmyGalleryCommentLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wcfContentText);
}

.cocArmyGalleryCommentLink:hover {
  text-decoration: none;
  color: var(--wcfContentHeadlineText, var(--wcfContentText));
}

.cocArmyRating {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cocArmyRatingSummary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cocArmyRatingValue {
  font-weight: 600;
  color: var(--wcfContentText);
}

.cocArmyRatingField .ratingList {
  margin: 0;
  padding: 0;
}

.cocArmyRatingCount {
  color: var(--wcfContentDimmedText);
}

.cocArmyGalleryRating {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.cocArmyGalleryRating .cocArmyRatingField {
  display: inline-flex;
}
.cocArmyGalleryRating .ratingList {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.cocArmyGalleryRating .ratingList button {
  padding: 0;
}
.cocArmyGalleryRating .ratingList fa-icon svg {
  width: 16px;
  height: 16px;
}
.cocArmyGalleryRating .cocArmyRatingSummary {
  font-size: 0.8rem;
}

.cocArmyGalleryHeaderMeta .button {
  white-space: nowrap;
}

.cocArmySelectedUnit.isClanCastle {
  border: 0;
}

@media screen and (max-width: 1024px) {
  .cocArmyGalleryCard {
    padding: 16px;
  }
  .cocArmyGalleryHeader {
    flex-direction: column;
    align-items: flex-start;
  }
  .cocArmyGalleryHeaderMeta {
    align-items: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .cocEmptyStateCard {
    padding: 26px 16px 22px;
  }
  .cocEmptyStateImage {
    width: min(240px, 80%);
  }
  .cocEmptyStateText {
    font-size: 0.95rem;
  }
}
.cocRecruitingCreateLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 24px;
  align-items: start;
}

.cocRecruitingCreateMain {
  display: flex;
  flex-direction: column;
}

.cocRecruitingCreateMain > .section {
  margin-top: 24px !important;
}

.cocRecruitingCreateMain > .section:first-child {
  margin-top: 0;
}

.cocRecruitingCreateMain > .formSubmit {
  margin-top: 24px;
}

.cocRecruitingToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cocRecruitingHelp {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingClanList {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cocRecruitingClanCard {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-width: 220px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorder);
  background: var(--wcfContentBackground);
  color: var(--wcfContentText);
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cocRecruitingClanCard:hover {
  border-color: var(--wcfContentHeadlineText, var(--wcfContentText));
}

.cocRecruitingClanCard.isActive {
  border-color: var(--wcfButtonPrimaryBackground);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wcfButtonPrimaryBackground) 35%, transparent);
}

.cocRecruitingClanBadge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorder);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cocRecruitingClanBadge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cocRecruitingClanInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.cocRecruitingClanName {
  font-weight: 700;
}

.cocRecruitingClanMeta {
  font-size: 0.8rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingClanCheck {
  margin-left: auto;
  color: var(--wcfButtonPrimaryBackground);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cocRecruitingClanCard.isActive .cocRecruitingClanCheck {
  opacity: 1;
}

.cocRecruitingPreviewLabel {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingPreviewCard {
  position: relative;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorder);
  background: var(--wcfContentBackground);
  overflow: hidden;
  min-height: 190px;
}

.cocRecruitingPreviewCard.isFeatured {
  border-color: color-mix(in srgb, #f6b500 55%, var(--wcfContentBorder));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  overflow: visible;
}

.cocRecruitingFeaturedBadge {
  position: absolute;
  top: -16px;
  right: -4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(135deg, #ffd700, #ffa500);
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(255, 165, 0, 0.5);
}

.cocRecruitingFeaturedBadge::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  border-style: solid;
  border-width: 5px 5px 0 0;
  border-color: #b8860b transparent transparent transparent;
}

.cocRecruitingPreviewBackground {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.cocRecruitingPreviewContent {
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 215px;
  height: 100%;
  backdrop-filter: blur(2px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--wcfContentBackground) 85%, transparent) 0%, color-mix(in srgb, var(--wcfContentBackground) 92%, transparent) 100%);
}

.cocRecruitingPreviewHeader {
  display: flex;
  gap: 12px;
  align-items: center;
}

.cocRecruitingPreviewBadge {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cocRecruitingPreviewBadge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cocRecruitingPreviewInfo {
  display: flex;
  flex-direction: column;
}

.cocRecruitingPreviewName {
  font-weight: 700;
}

.cocRecruitingPreviewMeta {
  display: inline-flex;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingPreviewDescription {
  font-size: 0.85rem;
  color: var(--wcfContentText);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cocRecruitingPreviewDescription.isEmpty {
  min-height: 1.1rem;
}

.cocRecruitingListingRequirementsText {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingFeaturedSection {
  margin-bottom: 24px;
}

.cocRecruitingFeaturedSection .cocRecruitingPreviewCard.isFeatured {
  box-shadow: none;
}

.cocRecruitingFeaturedSlider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cocRecruitingFeaturedNav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cocRecruitingFeaturedNav[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.cocRecruitingFeaturedTrack {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 18px 2px 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cocRecruitingFeaturedSlide {
  scroll-snap-align: start;
  flex: 0 0 100%;
  max-width: 100%;
}

.cocRecruitingFeaturedTrack::-webkit-scrollbar {
  height: 0;
}

@media (min-width: 1600px) {
  .cocRecruitingFeaturedTrack {
    column-gap: 16px;
  }
  .cocRecruitingFeaturedSlide {
    flex-basis: calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
  }
}
.cocRecruitingListingGrid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
}

.cocRecruitingListingItem {
  display: flex;
  width: 100%;
}

.cocRecruitingListingCard {
  width: 100%;
  height: 100%;
}

.cocRecruitingListingActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.cocRecruitingListingActionsRow {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.cocRecruitingListingActionsRow .button {
  justify-content: center;
  width: 100%;
}

.cocRecruitingListingActionsRow .buttonPrimary {
  font-weight: 700;
}

.cocRecruitingCultureBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cocRecruitingCultureBadge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wcfContentBorder) 75%, transparent);
  color: var(--wcfContentText);
}

.cocRecruitingCultureOptions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.cocRecruitingCultureOption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorder);
  background: var(--wcfContentBackground);
}

.cocRecruitingApplyHeroes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--wcfContentBorder);
}

.cocRecruitingApplyForm {
  display: grid;
  gap: 14px;
}

.cocRecruitingApplyForm .formField {
  margin-top: 0;
}

.cocRecruitingApplyForm .formField > dt {
  padding-top: 0;
}

.cocRecruitingApplyForm .formField > dt label {
  color: var(--wcfContentHeadlineText);
  font-weight: 600;
}

.cocRecruitingApplyForm .formField > dd {
  margin-left: 0;
}

.cocRecruitingApplyForm select,
.cocRecruitingApplyForm input[type=number],
.cocRecruitingApplyForm textarea {
  width: 100%;
}

.cocRecruitingApplySummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 12px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorder);
  background: color-mix(in srgb, var(--wcfContentBackground) 85%, transparent);
}

.cocRecruitingApplySummaryGroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.cocRecruitingApplySummaryTitle {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingApplySummaryItem {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cocRecruitingApplySummaryLabel {
  font-size: 0.75rem;
  color: var(--wcfContentDimmedText);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cocRecruitingApplySummaryValue {
  font-size: 0.95rem;
  font-weight: 700;
}

.cocRecruitingApplyNotice {
  margin-top: 4px;
  margin-bottom: 8px;
}

.cocRecruitingApplyNoticeDetails {
  margin-top: 4px;
  font-weight: 600;
}

.cocRecruitingApplyNoticeList {
  margin: 6px 0 0 18px;
  padding: 0;
}

.cocRecruitingApplyHeroes .formField {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cocRecruitingApplyHeroes .formField > dd {
  margin-left: 0;
}

.cocRecruitingApplyForm .formSubmit {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.cocRecruitingPlayerCard.isExpired {
  opacity: 0.75;
}

.cocRecruitingPlayerTitle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.cocRecruitingPlayerAvatarFallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--wcfContentBorder) 60%, transparent);
  color: var(--wcfContentDimmedText);
}

.cocRecruitingPlayerAvatarFallbackSmall {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--wcfContentBorder) 60%, transparent);
  color: var(--wcfContentDimmedText);
  font-size: 0.75rem;
}

.cocRecruitingPlayerTag {
  font-size: 0.75rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingPlayerTag.cocPlayerBtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.contentHeaderTitle .contentTitle .cocRecruitingPlayerTag {
  margin-left: 8px;
}

@media (max-width: 768px) {
  .cocRecruitingPlayerThreadList .cocRecruitingPlayerTag {
    display: none;
  }
  .cocRecruitingPlayerThreadList .tabularListRowHead .columnLastPost {
    min-width: 110px;
  }
  .cocRecruitingPlayerThreadList .tabularListRowHead .columnSubject {
    min-width: 0;
  }
}
.cocRecruitingPlayerStatus {
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-flex;
  margin-top: 6px;
}

.contentHeaderMetaData .cocRecruitingPlayerStatus {
  margin-top: 0;
}

.cocRecruitingPlayerStatus.isActive {
  background: rgba(42, 157, 143, 0.18);
  color: #2a9d8f;
}

.cocRecruitingPlayerStatus.isExpired {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.cocRecruitingPlayerStats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.cocRecruitingPlayerStat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--wcfContentText);
  background: color-mix(in srgb, var(--wcfContentBorder) 65%, transparent);
  padding: 4px 8px;
  border-radius: 999px;
}

.cocRecruitingPlayerStat img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.cocRecruitingPlayerBody {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cocRecruitingPlayerComments {
  border-top: 1px solid var(--wcfContentBorder);
  padding-top: 12px;
}

.cocPlayerListingInfo {
  margin-bottom: 20px;
}
.cocPlayerListingInfo dl {
  column-gap: 10px;
  display: grid;
  grid-template-columns: max-content auto;
  padding: 10px 0 5px 15px;
  position: relative;
  row-gap: 4px;
}
.cocPlayerListingInfo dl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  border: 2px solid #e0e0e0;
  border-right-width: 0;
}
.cocPlayerListingInfo dl dt {
  grid-column: 1;
  margin: 0;
}
.cocPlayerListingInfo dl dd {
  color: #7d8287;
  grid-column: 2;
  margin-bottom: 0 !important;
  margin-left: 0;
}

.cocRecruitingPlayerSelected {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--wcfContentBorder) 70%, transparent);
  color: var(--wcfContentText);
}

.cocRecruitingPlayerActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.cocRecruitingPlayerClan {
  background: none;
  border: 0;
  padding: 0;
  color: var(--wcfContentHeadlineText);
  font-weight: 600;
  cursor: pointer;
}

.cocRecruitingApplicationsFilter {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cocRecruitingApplicationsGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cocRecruitingApplicationCard {
  border: 1px solid var(--wcfContentBorder);
  border-radius: var(--wcfBorderRadius);
  background: var(--wcfContentBackground);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cocRecruitingApplicationHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.cocRecruitingApplicationTitle {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cocRecruitingApplicationTag {
  font-size: 0.75rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingApplicationNew {
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
  font-weight: 700;
}

.cocRecruitingApplicationMeta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingApplicationStats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cocRecruitingApplicationStat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  background: color-mix(in srgb, var(--wcfContentBorder) 65%, transparent);
  padding: 4px 8px;
  border-radius: 999px;
}

.cocRecruitingApplicationStat img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.cocRecruitingApplicationHeroes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  font-size: 0.8rem;
}

.cocRecruitingApplicationHeroes.isEmpty {
  grid-template-columns: 1fr;
}

.cocRecruitingApplicationHero.isEmpty {
  color: var(--wcfContentDimmedText);
  font-style: italic;
}

.cocRecruitingApplicationMessage {
  font-size: 0.85rem;
  color: var(--wcfContentText);
  white-space: pre-line;
  padding: 10px 12px;
  border-radius: var(--wcfBorderRadius);
  background: color-mix(in srgb, var(--wcfContentBorder) 65%, transparent);
}

.cocRecruitingApplicationMessageLabel {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wcfContentDimmedText);
  margin-bottom: 4px;
}

.cocRecruitingApplicationMessageBody {
  white-space: pre-line;
}

.cocRecruitingApplicationStatus {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wcfContentBorder) 70%, transparent);
  color: var(--wcfContentHeadlineText);
}

.cocRecruitingApplicationStatus.isPending {
  background: color-mix(in srgb, var(--wcfContentBorder) 65%, transparent);
  color: var(--wcfContentDimmedText);
}

.cocRecruitingApplicationStatus.isAccepted {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.cocRecruitingApplicationStatus.isDeclined {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.cocRecruitingApplicationFooter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.cocRecruitingApplicationActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cocRecruitingApplicationActionForm {
  margin: 0;
}

.cocRecruitingAnalyticsFilter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
}

.cocRecruitingAnalyticsFilter .formSubmit {
  margin-top: 0;
}

.cocRecruitingAnalyticsSummary {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.cocRecruitingAnalyticsCard {
  border: 1px solid var(--wcfContentBorder);
  border-radius: var(--wcfBorderRadius);
  padding: 14px 16px;
  background: var(--wcfContentBackground);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cocRecruitingAnalyticsLabel {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingAnalyticsValue {
  font-size: 1.2rem;
  font-weight: 700;
}

.cocRecruitingAnalyticsTable {
  display: grid;
  gap: 8px;
}

.cocRecruitingAnalyticsRow {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorder);
  background: var(--wcfContentBackground);
  font-size: 0.85rem;
}

.cocRecruitingAnalyticsRowHeader {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingMyClansTable .columnActions {
  text-align: right;
}

.cocRecruitingMyClan {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cocRecruitingMyClanBadge {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cocRecruitingMyClanBadge img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.cocRecruitingMyClanInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cocRecruitingMyClanName {
  font-weight: 700;
  background: none;
  border: 0;
  padding: 0;
  color: var(--wcfContentHeadlineText);
  cursor: pointer;
}

.cocRecruitingMyClanName:hover {
  color: var(--wcfContentLinkText);
}

.cocRecruitingMyClanMeta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingMyClansStatus {
  font-weight: 600;
}

.cocRecruitingMyClansRow.isExpired .cocRecruitingMyClansStatus {
  color: var(--wcfContentDimmedText);
}

.cocRecruitingMyClansActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.cocRecruitingMyClansActions .button {
  white-space: nowrap;
}

.cocBaseCreateDialog {
  max-width: 640px;
}

.cocBaseCreateForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cocBaseCreateLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px;
  align-items: start;
}

.cocBaseCreateSidebar {
  position: sticky;
  top: 20px;
}

.cocBaseFormField dd {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cocBaseImagePicker {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.cocBaseImagePreview {
  width: 140px;
  height: 110px;
  border: 1px dashed var(--wcfContentBorder);
  border-radius: var(--wcfBorderRadius);
  background: color-mix(in srgb, var(--wcfContentBackground) 92%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wcfContentDimmedText);
  font-size: 0.75rem;
  text-align: center;
  padding: 8px;
  overflow: hidden;
}

.cocBaseImagePreview.hasImage {
  color: transparent;
}

.cocBaseImagePreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cocBaseImageControls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.cocBaseImageControlsRow {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cocBaseImageControls .long {
  flex: 1;
}

.cocBaseImageNotice {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--wcfContentDimmedText);
}

.cocBaseImageNotice.isError {
  color: var(--wcfStatusErrorText, #d33);
}

.cocBaseImageNotice.isSuccess {
  color: var(--wcfStatusSuccessText, #1f9d55);
}

.cocBaseCheckbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wcfContentDimmedText);
}

.cocBaseCheckbox input {
  width: 18px;
  height: 18px;
}

.cocBaseTroopBuilder {
  border: 1px solid var(--wcfContentBorder);
  border-radius: var(--wcfBorderRadius);
  padding: 16px;
  background: var(--wcfContentBackground);
}

.cocBaseScreenshot {
  margin: 12px 0;
}

.cocBaseScreenshot img {
  width: 100%;
  height: auto;
  border-radius: var(--wcfBorderRadius);
  display: block;
}

.cocBaseHeaderMeta {
  margin-top: 6px;
}
.cocBaseHeaderMeta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cocBaseHeaderMeta img {
  width: 18px;
  height: 18px;
}
.cocBaseHeaderMeta fa-icon svg {
  width: 16px;
  height: 16px;
}

.cocBaseHeaderMetaItem img {
  width: 18px;
  height: 18px;
}

.cocBaseHeaderMetaRating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.cocBaseHeaderMetaRating .ratingList {
  gap: 2px;
}
.cocBaseHeaderMetaRating .ratingList button {
  padding: 0;
}
.cocBaseHeaderMetaRating .ratingList fa-icon svg {
  width: 16px;
  height: 16px;
}

.cocBaseRatingSummary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cocBaseRatingValue {
  font-weight: 600;
  color: var(--wcfContentText);
}

.cocBaseRating {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cocBaseRatingField .ratingList {
  margin: 0;
  padding: 0;
}

.cocBaseCreateForm .formSubmit {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cocBaseFilterForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.cocBaseFilterRow {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cocBaseFilterRow dl {
  margin-top: 0 !important;
}

.cocBaseFilterGroup {
  display: grid;
  gap: 10px;
  margin: 0;
}

.cocBaseFilterGroupTitle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--wcfContentDimmedText);
}

.cocBaseFilterChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cocBaseFilterChips .button {
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cocBaseFilterActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.cocBaseDetailCard {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.cocBaseDetailLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 20px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.cocBaseDetailMedia {
  border: 1px solid var(--wcfContentBorder);
  border-radius: 16px;
  overflow: hidden;
  background: var(--wcfContentBackground);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}
.cocBaseDetailMedia img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 520px;
}

.cocBaseDetailSidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

.cocBaseDetailMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cocBaseDetailMetaItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--wcfContentDimmedText);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--wcfContentBorder);
  background: color-mix(in srgb, var(--wcfContentBackground), #0b0b0b 20%);
}
.cocBaseDetailMetaItem img {
  width: 16px;
  height: 16px;
}

.cocBaseDetailSectionHeader {
  margin-bottom: 8px;
}

.cocBaseDetailSection {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--wcfContentBorder);
  background: var(--wcfContentBackground);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.cocBaseDetailSectionTitle {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wcfContentDimmedText);
}

.cocBaseDetailVideo iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
}

.cocBaseCardMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--wcfContentDimmedText);
  font-size: 0.78rem;
  width: 100%;
}

.cocBaseCardMetaItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cocBaseCardMetaItem fa-icon svg {
  width: 14px;
  height: 14px;
}

.cocBaseRatingCount {
  color: var(--wcfContentDimmedText);
}

.cocBaseGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 420px));
  gap: 16px;
}

.cocBaseCard {
  display: flex;
  flex-direction: column;
  background: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorder);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  position: relative;
}
.cocBaseCard .cocBaseCardMedia {
  position: relative;
  background: var(--wcfContentBackground);
}
.cocBaseCard .cocBaseCardImageLink,
.cocBaseCard .cocBaseCardImagePlaceholder {
  display: block;
}
.cocBaseCard .cocBaseCardImageLink img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.cocBaseCard .cocBaseCardImagePlaceholder {
  padding: 72px 16px;
  text-align: center;
  color: var(--wcfContentDimmedText);
  text-decoration: none;
}
.cocBaseCard .cocBaseCardBadges {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cocBaseCard .cocBaseCardBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.cocBaseCard .cocBaseCardBadge img {
  width: 16px;
  height: 16px;
  display: block;
}
.cocBaseCard .cocBaseCardBody {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cocBaseCard .cocBaseCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cocBaseCard .cocBaseCardTitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.cocBaseCard .cocBaseCardTitle a {
  color: inherit;
  text-decoration: none;
}
.cocBaseCard .cocBaseCardTitle a:hover {
  text-decoration: underline;
}
.cocBaseCard .cocBaseCardDate {
  font-size: 0.75rem;
  color: var(--wcfContentDimmedText);
  white-space: nowrap;
}
.cocBaseCard .cocBaseCardMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--wcfContentDimmedText);
  font-size: 0.78rem;
  width: 100%;
}
.cocBaseCard .cocBaseCardMetaItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cocBaseCard .cocBaseCardMetaItem fa-icon svg {
  width: 14px;
  height: 14px;
}
.cocBaseCard .cocBaseRatingCount {
  color: var(--wcfContentDimmedText);
}
.cocBaseCard .cocBaseCardCc {
  border-radius: calc(var(--wcfBorderRadius) + 2px);
  background: color-mix(in srgb, var(--wcfContentBackground) 5%, #000 1%);
  border: 1px dashed color-mix(in srgb, var(--wcfContentBorder), transparent 20%);
  padding: 12px 14px;
}
.cocBaseCard .cocBaseCardCcLabel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.cocBaseCard .cocBaseCardCcUnits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cocBaseCard .cocBaseCardCcUnit {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: #121212;
}
.cocBaseCard .cocBaseCardCcUnit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cocBaseCard .cocBaseCardCcUnit .count {
  position: absolute;
  right: -4px;
  bottom: -4px;
  background: #6f42c1;
  color: #fff;
  font-size: 0.58rem;
  padding: 1px 4px;
  border-radius: 999px;
}
.cocBaseCard .cocBaseCardActions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cocBaseCard .cocBaseCardActionsRow {
  display: flex;
  gap: 8px;
}
.cocBaseCard .cocBaseCardActionsRow .button {
  flex: 1 1 auto;
}
.cocBaseCard .cocBaseRating {
  margin: 0;
}

.cocBaseCard.isHidden {
  display: none;
}

.cocBaseModerationCard {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorder);
  border-radius: 12px;
  padding: 12px;
}

.cocBaseModerationMedia {
  flex: 0 0 200px;
}

.cocBaseModerationMedia img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.cocRecentActivityArmy,
.cocRecentActivityBase {
  display: grid;
  gap: 10px;
}

.cocRecentActivityArmyBanner,
.cocRecentActivityBaseImage {
  display: block;
  max-width: 480px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--wcfContentBorder);
  background: var(--wcfContentBackground);
}
.cocRecentActivityArmyBanner img,
.cocRecentActivityBaseImage img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.cocRecentActivityArmyMeta,
.cocRecentActivityBaseMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cocRecentActivityArmyPill,
.cocRecentActivityBasePill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--wcfButtonPrimaryBackground) 12%, transparent);
  color: var(--wcfContentText);
  border: 1px solid color-mix(in srgb, var(--wcfContentText) 10%, transparent);
}

.cocRecentActivityArmyPill.isGuide {
  background: color-mix(in srgb, var(--wcfMessageSuccessBackground) 55%, transparent);
}

.cocRecentActivityArmyPillIcon,
.cocRecentActivityBasePillIcon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.cocBaseModerationBody {
  min-width: 0;
}

.cocBaseModerationTitle {
  margin: 0 0 6px;
  font-size: 1rem;
}

.cocBaseModerationTitle a {
  color: inherit;
  text-decoration: none;
}

.cocBaseModerationTitle a:hover {
  text-decoration: underline;
}

.cocBaseModerationMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--wcfContentDimmedText);
  font-size: 0.8rem;
}

@media (max-width: 1024px) {
  .cocBaseDetailLayout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .cocBaseCreateLayout {
    grid-template-columns: 1fr;
  }
  .cocBaseCreateSidebar {
    position: static;
  }
  .cocBaseImagePicker {
    grid-template-columns: 1fr;
  }
  .cocBaseImagePreview {
    width: 100%;
  }
  .cocBaseImageControlsRow {
    flex-direction: column;
    align-items: stretch;
  }
  .cocBaseCreateForm .formSubmit {
    flex-direction: column;
    align-items: stretch;
  }
}
.cocRecruitingCommOptions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cocRecruitingCommOption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorder);
  background: var(--wcfContentBackground);
}

.cocRecruitingFeaturedBox {
  padding: 14px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorder);
  background: var(--wcfContentBackground);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cocRecruitingFeaturedBox.isLocked {
  opacity: 0.7;
}

.cocRecruitingFeaturedToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.cocRecruitingFeaturedDescription {
  margin: 0;
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingFeaturedBalance {
  margin: 0;
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingFeaturedInsufficient {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #cf1b1b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cocRecruitingCommToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.cocRecruitingLeaguePicker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--wcfBorderRadius);
  border: 1px solid var(--wcfContentBorder);
  background: var(--wcfContentBackground);
}

.cocRecruitingLeagueDisplay {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
}

.cocRecruitingLeagueDisplay img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.cocRecruitingPreviewStats {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  font-size: 0.75rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingPreviewStat {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.cocRecruitingPreviewStatIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.cocRecruitingPreviewStatIcon svg,
.cocRecruitingPreviewStatIcon img {
  width: 16px;
  height: 16px;
}

.cocRecruitingPreviewStatLabel {
  font-weight: 600;
}

.cocRecruitingPreviewRequirements {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.cocRecruitingPreviewRequirements.isStandalone {
  padding-top: 20px;
}

.cocRecruitingPreviewReq {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wcfContentBackground) 85%, transparent);
  font-size: 0.75rem;
}

.cocRecruitingPreviewReq img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.cocRecruitingPreviewComm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wcfButtonPrimaryBackground) 15%, transparent);
  color: var(--wcfButtonPrimaryBackground);
}

.cocRecruitingPreviewComm:hover {
  text-decoration: none;
  color: var(--wcfButtonPrimaryBackground);
}

.cocRecruitingPreviewComm[data-coc-recruiting-preview-comm=discord],
.cocRecruitingPreviewComm[data-comm=discord] {
  background: #5865f2;
  color: #fff;
}

.cocRecruitingPreviewComm[data-coc-recruiting-preview-comm=telegram],
.cocRecruitingPreviewComm[data-comm=telegram] {
  background: #2aabee;
  color: #fff;
}

.cocRecruitingPreviewComm[data-coc-recruiting-preview-comm=whatsapp],
.cocRecruitingPreviewComm[data-comm=whatsapp] {
  background: #25d366;
  color: #fff;
}

.cocRecruitingPreviewComm[data-coc-recruiting-preview-comm=discord]:hover,
.cocRecruitingPreviewComm[data-comm=discord]:hover,
.cocRecruitingPreviewComm[data-coc-recruiting-preview-comm=telegram]:hover,
.cocRecruitingPreviewComm[data-comm=telegram]:hover,
.cocRecruitingPreviewComm[data-coc-recruiting-preview-comm=whatsapp]:hover,
.cocRecruitingPreviewComm[data-comm=whatsapp]:hover {
  color: #fff;
}

.cocRecruitingPreviewName.cocClanBtn {
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-weight: 700;
  font-size: 1rem;
}

.cocRecruitingPreviewName.cocClanBtn:hover {
  background: transparent;
}

.cocRecruitingListingMeta {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--wcfContentDimmedText);
}

.cocRecruitingCommBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cocRecruitingCommLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
}

.cocRecruitingCommLink:hover {
  text-decoration: none;
  color: var(--wcfContentHeadlineText, var(--wcfContentText));
}

.cocRecruitingReqIcon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.cocRecruitingReqTh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cocRecruitingListingCard {
  position: relative;
  overflow: hidden;
}

.cocRecruitingListingBackground {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}

.cocRecruitingListingBackgroundOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wcfContentBackground) 70%, transparent) 0%, color-mix(in srgb, var(--wcfContentBackground) 92%, transparent) 100%);
}

.cocRecruitingListingCard > .contentHeader,
.cocRecruitingListingCard > .inlineList,
.cocRecruitingListingCard > .boxPadding {
  position: relative;
}

.cocRecruitingCreatePreview {
  position: sticky;
  top: 100px;
}

@media screen and (max-width: 1024px) {
  .cocRecruitingCreateLayout {
    grid-template-columns: minmax(0, 1fr);
  }
  .cocRecruitingCreatePreview {
    position: static;
  }
  .cocRecruitingMyClansTable thead {
    display: none;
  }
  .cocRecruitingMyClansTable,
  .cocRecruitingMyClansTable tbody,
  .cocRecruitingMyClansTable tr,
  .cocRecruitingMyClansTable td {
    display: block;
    width: 100%;
  }
  .cocRecruitingMyClansTable tr {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--wcfContentBorder);
    border-radius: var(--wcfBorderRadius);
    background: var(--wcfContentBackground);
  }
  .cocRecruitingMyClansTable td {
    border: 0;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .cocRecruitingMyClansTable td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wcfContentDimmedText);
  }
  .cocRecruitingMyClansClanCell {
    padding-top: 0;
  }
  .cocRecruitingMyClansClanCell::before,
  .cocRecruitingMyClansActionsCell::before {
    display: none;
  }
  .cocRecruitingMyClansActions {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .cocRecruitingClanCard {
    width: 100%;
  }
  .cocRecruitingPreviewHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cocRecruitingPreviewStats {
    margin-left: 0;
    flex-direction: row;
    gap: 12px;
  }
}
.cocUnitLevelsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 12px;
}

.cocUnitLevelsGrid > dl {
  margin: 0;
}

.cocUnitLevelsGrid > dl > dt {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: var(--wcfContentDimmedText);
}

.cocUnitLevelsGrid > dl > dd {
  margin: 0;
}

.cocUnitLevelsGrid input {
  width: 100%;
}

.galleryImageList {
  --columns: 1;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--columns), 1fr);
}
.galleryImageList > li {
  border-radius: var(--wcfBorderRadius);
  display: block;
}

@media screen and (min-width: 545px), print {
  .galleryImageList {
    --columns: 3;
  }
}
@media screen and (min-width: 545px) and (max-width: 1024px) {
  .galleryImageList {
    gap: 10px;
  }
}
@media screen and (max-width: 544px) {
  .galleryMasonry > li {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 545px), print {
  .galleryMasonry {
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
  }
  .galleryMasonry > li {
    margin-bottom: 5px;
  }
}
@media screen and (min-width: 545px) and (max-width: 768px) {
  .galleryMasonry {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
  }
}
.galleryImageList > li,
.galleryMasonry > li {
  position: relative;
  overflow: hidden;
}
.galleryImageList > li > a,
.galleryMasonry > li > a {
  display: block;
  outline: none;
}
.galleryImageList > li > a > img,
.galleryMasonry > li > a > img {
  width: 100%;
}
.galleryImageList > li > div,
.galleryMasonry > li > div {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  color: #fff;
  pointer-events: none; /* Do not block clicks on the image "behind". */
  position: absolute;
  width: 100%;
  padding: 10px 0;
}
.galleryImageList > li > div a,
.galleryMasonry > li > div a {
  color: inherit;
}
.galleryImageList > li > div > p,
.galleryImageList > li > div > div > ul,
.galleryImageList > li > div > div > dl,
.galleryMasonry > li > div > p,
.galleryMasonry > li > div > div > ul,
.galleryMasonry > li > div > div > dl {
  margin: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.galleryImageList > li > div > p,
.galleryMasonry > li > div > p {
  margin-right: 32px;
}
.galleryImageList > li > div > label,
.galleryMasonry > li > div > label {
  float: right;
  padding: 0 10px;
}
.galleryImageList > li > div > div,
.galleryMasonry > li > div > div {
  height: 0;
  opacity: 0; /* Chrome bug: Overflow does not work properly in grid column #2+ */
  overflow: hidden;
  transition: height 0.25s ease-out, opacity 0s linear 0.25s;
}
.galleryImageList > li > div > div > dl,
.galleryMasonry > li > div > div > dl {
  font-weight: 400;
  margin-top: 2px;
}
@media screen and (min-width: 769px), print {
  .galleryImageList > li > div > div > dl,
  .galleryMasonry > li > div > div > dl {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .galleryImageList > li > div > div > dl,
  .galleryMasonry > li > div > div > dl {
    font-size: 12px;
  }
}
.galleryImageList > li > div > div > dl > dt::after,
.galleryImageList > li > div > div > dl > dd::after,
.galleryMasonry > li > div > div > dl > dt::after,
.galleryMasonry > li > div > div > dl > dd::after {
  display: none;
}
.galleryImageList > li > div > div > dl > dd,
.galleryMasonry > li > div > div > dl > dd {
  margin-right: 10px;
}
.galleryImageList > li.imageDisabled > div,
.galleryMasonry > li.imageDisabled > div {
  background-color: rgba(var(--wcfStatusSuccessBackground-rgb)/0.9);
  color: var(--wcfStatusSuccessText);
}
.galleryImageList > li.imageDeleted > div,
.galleryMasonry > li.imageDeleted > div {
  background-color: rgba(var(--wcfStatusErrorBackground-rgb)/0.9);
  color: var(--wcfStatusErrorText);
}
.galleryImageList > li.jsMarked > div,
.galleryMasonry > li.jsMarked > div {
  background-color: rgba(var(--wcfStatusInfoBackground-rgb)/0.9);
  color: var(--wcfStatusInfoText);
}
.galleryImageList > li.jsGalleryImageShowDetails > div > div, .galleryImageList > li:hover > div > div,
.galleryImageList > li > a:focus + div > div,
.galleryMasonry > li.jsGalleryImageShowDetails > div > div,
.galleryMasonry > li:hover > div > div,
.galleryMasonry > li > a:focus + div > div {
  height: 2.5em;
  opacity: 1; /* Chrome bug: Overflow does not work properly in grid column #2+ */
  transition-delay: 0s;
}

.galleryImageClipboardCheckbox {
  pointer-events: all;
}

.galleryNewImageBadge {
  background-color: var(--wcfStatusInfoBackground);
  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(--wcfStatusInfoText);
  font-weight: 600;
  padding: 2px 10px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 10px;
}

.galleryAlbumList ul.galleryAlbumCoverImages {
  margin-bottom: 10px;
  margin-top: 20px;
  overflow: hidden;
}
.galleryAlbumList ul.galleryAlbumCoverImages > li {
  float: left;
  width: 140px;
}
.galleryAlbumList ul.galleryAlbumCoverImages > li img {
  max-width: 100%;
}
@media screen and (min-width: 769px), print {
  .galleryAlbumList ul.galleryAlbumCoverImages {
    max-height: 280px;
  }
  .galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages {
    height: 280px;
  }
  .galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li:first-child {
    height: 280px;
    position: relative;
    width: auto;
  }
  .galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li:first-child > a > img {
    position: relative;
    top: -70px;
  }
}
@media screen and (max-width: 768px) {
  .galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li:first-child {
    height: 140px;
    overflow: hidden;
  }
  .galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li:first-child img {
    max-height: 100%;
    max-width: none;
  }
}

.galleryPreviewTag > img {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  padding: 5px;
}

.galleryPreviewTagList {
  display: flex;
  flex-wrap: wrap;
  /* adds a comma after each list item */
  /* adds a dot after each list item */
  margin-bottom: -5px;
}
.galleryPreviewTagList > li {
  flex: 0 1 auto;
}
.galleryPreviewTagList > li:not(:last-child) {
  margin-right: 5px;
}
.galleryPreviewTagList.commaSeparated > li:not(:last-child):after {
  content: ",";
  padding-left: 1px;
}
.galleryPreviewTagList.dotSeparated > li:not(:last-child):after {
  content: "•";
  margin-left: 5px;
}
.galleryPreviewTagList > li {
  margin-bottom: 5px;
}

/* used in search results */
.galleryPreviewTagBox {
  min-height: 160px;
}
.galleryPreviewTagBox > .galleryPreviewTag {
  float: left;
}
.galleryPreviewTagBox > div {
  margin-left: 171px;
}

.galleryImageContainer > .galleryImage {
  position: relative;
}
.galleryImageContainer > .galleryImage:not(.galleryVideo):not(.galleryVideoLink) {
  text-align: center;
}
.galleryImageContainer > .galleryImage img {
  max-width: 100%;
}
.galleryImageContainer > .galleryImage > .galleryPreviousImageButton,
.galleryImageContainer > .galleryImage > .galleryNextImageButton {
  background-color: black;
  border-radius: 50%;
  color: white;
  margin-top: -20px;
  opacity: 0.2;
  padding: 6px 3px;
  position: absolute;
  top: 50%;
  z-index: 10;
  transition: opacity 0.2s;
}
.galleryImageContainer > .galleryImage > .galleryPreviousImageButton:hover,
.galleryImageContainer > .galleryImage > .galleryNextImageButton:hover {
  opacity: 0.9 !important;
}
.galleryImageContainer > .galleryImage:hover > .galleryPreviousImageButton,
.galleryImageContainer > .galleryImage:hover > .galleryNextImageButton {
  opacity: 0.6;
}
.galleryImageContainer > .galleryImage > .galleryPreviousImageButton {
  left: 10px;
}
.galleryImageContainer > .galleryImage > .galleryPreviousImageButton > span {
  left: -2px;
}
.galleryImageContainer > .galleryImage > .galleryNextImageButton {
  right: 10px;
}
.galleryImageContainer > .galleryImage > .galleryNextImageButton > span {
  left: 2px;
}
.galleryImageContainer > .galleryVideo video {
  max-width: 100%;
}
.galleryImageContainer > .galleryVideo.galleryImageHasPreviousImage > .galleryVideoContainer,
.galleryImageContainer > .galleryVideoLink.galleryImageHasPreviousImage > .galleryVideoContainer {
  margin-left: 60px;
}
.galleryImageContainer > .galleryVideo.galleryImageHasNextImage > .galleryVideoContainer,
.galleryImageContainer > .galleryVideoLink.galleryImageHasNextImage > .galleryVideoContainer {
  margin-right: 60px;
}

.gallerySidebarBoxImageNavigation {
  font-size: 0;
}
.gallerySidebarBoxImageNavigation .boxContent > ul {
  height: 76px;
  position: relative;
  overflow: hidden;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li {
  display: inline-block;
  position: absolute;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li:first-child, .gallerySidebarBoxImageNavigation .boxContent > ul > li:last-child {
  background-color: var(--wcfSidebarBackground);
  height: 76px;
  vertical-align: top;
  opacity: 0.9;
  z-index: 10;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li:first-child.disabled, .gallerySidebarBoxImageNavigation .boxContent > ul > li:last-child.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li:first-child {
  margin-right: 3px;
  left: 0;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li:nth-child(2) {
  left: 19px;
  position: relative;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li:last-child {
  right: 0;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li > ul {
  height: 76px;
  width: 99999px;
  position: absolute;
  overflow: hidden;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li > ul > li {
  display: inline-block;
  margin-right: 3px;
  transition: opacity 0.2s ease-out;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li > ul > li:not(.active) {
  opacity: 0.5;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li > ul > li:hover {
  opacity: 1;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li > ul > li > a {
  display: block;
}
.gallerySidebarBoxImageNavigation .boxContent > ul > li > ul > li > a > img {
  width: 76px;
}
.gallerySidebarBoxImageNavigation .galleryNavigationArrow {
  align-items: center;
  display: flex !important;
}

.gallerySortableImageList {
  font-size: 0;
  padding: 0 10px;
  margin-bottom: -20px;
  margin-left: 0 !important;
  margin-right: -20px;
}
.gallerySortableImageList > .gallerySortableImagePlaceholder {
  background-color: var(--wcfStatusWarningBackground);
}
.gallerySortableImageList > li {
  display: inline-block;
  margin-bottom: 20px;
  margin-right: 20px;
  min-height: 144px;
  min-width: 144px;
  position: relative;
  vertical-align: top;
}
.gallerySortableImageList > li > div {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  color: #fff;
  position: absolute;
  width: 100%;
  padding: 10px 0;
}
.gallerySortableImageList > li > div > p {
  font-weight: 400;
  margin: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
@media screen and (min-width: 769px), print {
  .gallerySortableImageList > li > div > p {
    font-size: var(--wcfFontSizeSmall);
  }
}
@media screen and (max-width: 768px) {
  .gallerySortableImageList > li > div > p {
    font-size: 12px;
  }
}

/* sidebar box in user profile */
.gallerySidebarImageList {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(3, 1fr);
}

.gallerySidebarImageLink img {
  width: 100%;
}

/* thumbnail list in image add form */
#thumbnailList {
  margin-bottom: -20px;
}
#thumbnailList::before, #thumbnailList::after {
  display: table;
  content: "";
}
#thumbnailList::after {
  clear: both;
}
#thumbnailList > li {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  cursor: pointer;
  float: left;
  height: 112px;
  margin: 0 20px 20px 0;
  padding: 5px;
  position: relative;
  width: 112px;
}
#thumbnailList > li .imageOptions {
  background-color: inherit;
  display: none;
  position: absolute;
  bottom: 5px;
  right: 5px;
  padding: 5px;
}
#thumbnailList > li:hover .imageOptions {
  display: block;
}
#thumbnailList > li.active {
  background-color: var(--wcfStatusInfoBackground);
}
#thumbnailList > li.imageError {
  background-color: var(--wcfStatusErrorBackground);
  border-color: var(--wcfStatusErrorText);
}
#thumbnailList > li.jsImageUpload > input {
  position: absolute;
  height: 110px;
  width: 110px;
  left: 0;
  opacity: 0;
  top: 0;
  z-index: 100;
}
#thumbnailList > li.jsImageUpload > input,
#thumbnailList > li.jsImageUpload > span {
  cursor: pointer !important;
}
#thumbnailList > li > fa-icon {
  position: absolute;
  left: 36px;
  top: 40px;
}
#thumbnailList > li > .galleryUploadProgress {
  bottom: 5px;
  left: 5px;
  position: absolute;
  right: 5px;
}
#thumbnailList > li > .galleryUploadProgress > progress {
  width: 60px;
}
#thumbnailList > li > .galleryUploadProgress > span {
  float: right;
}
#thumbnailList > li > img {
  height: 100px;
  width: 100px;
}

/* selected image in image add form */
#image {
  text-align: center;
}
#image > img {
  max-height: 800px;
  max-width: 100%;
}

/* selected video in image add form */
#video {
  text-align: center;
}
#video > video {
  max-height: 800px;
  max-width: 100%;
}

#galleryVideoThumbnailPreview {
  max-height: 400px;
  max-width: 80%;
}

.galleryOverwriteIcon {
  margin-left: 5px;
}

/* jQuery UI resizable */
.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  z-index: 99999;
  display: block;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

#galleryImageThumbnailAreaSelector {
  position: relative;
}
#galleryImageThumbnailAreaSelector:not(.disabled) {
  cursor: move;
}
#galleryImageThumbnailAreaSelector > .galleryImageThumbnailArea {
  box-sizing: border-box;
  border: var(--wcfStatusInfoBackground) 3px solid;
  width: 100%;
  height: 100%;
  position: absolute;
}

#galleryImageThumbnailAreaButtons {
  bottom: 30px;
  cursor: pointer;
  position: fixed;
  right: 30px;
  z-index: 400;
}

/* [album] bbcode */
.galleryImageSeries {
  background-color: var(--wcfContentBackground);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  max-width: 560px;
  padding: 20px;
}
.galleryImageSeries .containerHeadline > h3 {
  margin: 0 0 10px;
}
.galleryImageSeries .slideshowContainer > ul {
  list-style: none !important;
  margin: 0 !important;
}
.galleryImageSeries .slideshowContainer > ul > li {
  margin: 0 !important;
}
.galleryImageSeries .slideshowButtonList {
  list-style: none !important;
  margin: 0 !important;
  text-align: center;
  width: 100%;
}
.galleryImageSeries .slideshowButtonList > li {
  margin: 0 !important;
}
.galleryImageSeries .galleryImageSeriesImage:not(:only-child) {
  padding-top: 20px;
}
.galleryImageSeries .galleryImageSeriesImage .galleryImageSeriesHeadline {
  border-bottom: 1px solid var(--wcfContentBorderInner);
  margin-bottom: 10px;
}
.galleryImageSeries .galleryImageSeriesImage .containerHeadline h3 {
  padding-top: 10px;
  margin: 0;
}
.galleryImageSeries .galleryImageSeriesImage .containerHeadline:not(:first-child) p {
  height: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* map markers info window */
.galleryImageInfoWindow > ul {
  font-size: 0;
}
.galleryImageInfoWindow > ul > li {
  display: inline-block;
  margin-right: 5px;
  margin-top: 5px;
}
.galleryImageInfoWindow > ul > li img {
  max-height: 50px;
  vertical-align: bottom;
}

.galleryImageBrowserPagination:not(:empty) {
  margin-bottom: 20px;
}

.galleryImageBrowserContainerList > li > .box64 > .galleryImageBrowserImage > img {
  width: 64px;
  height: 64px;
}
.galleryImageBrowserContainerList > li > .box64 > .details > .containerHeadline > h3 {
  overflow: hidden;
  padding-right: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.galleryImageBrowserContainerList > li > .box64 > .details > nav > .buttonList {
  opacity: 1;
}

.galleryImagesInMotion {
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 769px), print {
  .galleryImagesInMotion {
    height: 500px;
  }
}
@media screen and (max-width: 768px) {
  .galleryImagesInMotion {
    height: 300px;
  }
}
.galleryImagesInMotion.loading fa-icon {
  margin: -24px 0 0 -30px;
  left: 50%;
  position: absolute;
  top: 50%;
}
.galleryImagesInMotion:hover > .primary > figcaption {
  opacity: 1;
}
.galleryImagesInMotion:hover > a {
  opacity: 1;
}
.galleryImagesInMotion > canvas {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}
.galleryImagesInMotion > canvas.secondary {
  z-index: 1;
}
.galleryImagesInMotion > a {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  height: 68px;
  left: 0;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  text-decoration: none;
  z-index: 2;
}
@media screen and (min-width: 1025px), print {
  .galleryImagesInMotion > a {
    /* always display title on touch devices */
    opacity: 0;
    transition: opacity linear 0.3s;
  }
}
.galleryImagesInMotion > a > img {
  height: 48px;
  width: 48px;
}
.galleryImagesInMotion > a > h1 {
  color: rgb(255, 255, 255);
  font-size: 1.8rem;
  font-weight: normal;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.galleryImagesInMotion > img {
  display: none;
}

.galleryImageGrid {
  height: 420px;
  overflow: hidden;
  /* IE10 */
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  /* WebKit */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  /* CSS3 */
  display: flex;
  flex-wrap: wrap;
}
.galleryImageGrid > .imageGridMain {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  box-sizing: border-box;
  height: 420px;
  min-width: 560px;
  padding: 1px;
  position: relative;
  /* IE10 */
  -ms-flex: 1 0 auto;
  /* WebKit */
  -webkit-flex: 1 0 auto;
  /* CSS3 */
  flex: 1 0 auto;
}
.galleryImageGrid > .imageGridMain > a {
  bottom: 1px;
  left: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 1px;
  text-decoration: none;
  top: 1px;
  z-index: 1;
  transition: opacity 1.5s linear;
}
.galleryImageGrid > .imageGridMain > a.active {
  opacity: 1;
  z-index: 2;
}
.galleryImageGrid > .imageGridMain > a.active:hover > span::before {
  -webkit-transform: none;
  transform: none;
}
.galleryImageGrid > .imageGridMain > a.active > span::before {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  content: attr(data-title);
  color: rgb(255, 255, 255);
  display: block;
  font-size: 1.4rem;
  left: 0;
  padding: 10px 20px;
  position: absolute;
  right: 0;
}
@media screen and (min-width: 1025px), print {
  .galleryImageGrid > .imageGridMain > a.active > span::before {
    /* always display title on touch devices */
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
  }
}
.galleryImageGrid > .imageGridMain > a > span {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s linear;
}
.galleryImageGrid > .imageGridMain > a > span.imageLoading {
  opacity: 0;
}
.galleryImageGrid > .imageGridColumn {
  height: 420px;
  overflow: hidden;
  /* IE10 */
  display: -ms-flexbox;
  -ms-flex: 0 282px;
  -ms-flex-wrap: wrap;
  /* WebKit */
  display: -webkit-flex;
  -webkit-flex: 0 282px;
  -webkit-flex-wrap: wrap;
  /* CSS3 */
  display: flex;
  flex: 0 282px;
  flex-wrap: wrap;
}
.galleryImageGrid > .imageGridColumn > li {
  background-color: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorderInner);
  box-sizing: border-box;
  margin: 0 0 10px 10px;
  max-height: 210px;
  padding: 1px;
  position: relative;
  transition: margin-top 1s cubic-bezier(0.17, 0.67, 0.48, 1.22);
}
.galleryImageGrid > .imageGridColumn > li.imageGridItemOffset {
  margin-top: -100%;
}
.galleryImageGrid > .imageGridColumn > li > a {
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.galleryImageGrid > .imageGridColumn > li > a:hover::before {
  -webkit-transform: none;
  transform: none;
}
.galleryImageGrid > .imageGridColumn > li > a::before {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  content: attr(data-title);
  color: rgb(255, 255, 255);
  display: block;
  left: 0;
  padding: 7px 14px;
  position: absolute;
  right: 0;
}
@media screen and (min-width: 1025px), print {
  .galleryImageGrid > .imageGridColumn > li > a::before {
    /* always display title on touch devices */
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
  }
}
.galleryImageGrid > .imageGridColumn > li > a > img {
  height: 201px;
  opacity: 1;
  /* fixed width to circumvent a bug in IE10 */
  width: 268px;
  transition: opacity 0.3s linear;
}
.galleryImageGrid > .imageGridColumn > li > a > img.imageLoading {
  opacity: 0;
}
.galleryImageGrid > .imageGridMain:not(.hideLoading) fa-icon,
.galleryImageGrid > .imageGridColumn fa-icon {
  margin: -24px 0 0 -30px;
  left: 50%;
  position: absolute;
  top: 50%;
}

@media screen and (max-width: 768px) {
  .galleryImageGrid {
    height: 210px;
  }
  .galleryImageGrid > .imageGridMain {
    height: 210px;
    min-width: 0;
    width: 100%;
  }
}
@media screen and (max-width: 768px) and (min-width: 769px) {
  .galleryImageGrid > .imageGridMain > a.active > span::before {
    font-size: var(--wcfFontSizeDefault);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .galleryImageGrid > .imageGridMain > a.active > span::before {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .galleryImageGrid > .imageGridColumn {
    display: none;
  }
}
.galleryImageMarkerContainer {
  position: relative;
}
.galleryImageMarkerContainer .galleryImageMarker {
  position: absolute;
  opacity: 0.5;
  height: 30px;
  transition: 0.25s linear opacity;
  width: 30px;
}
.galleryImageMarkerContainer .galleryImageMarker:not(.ui-draggable) {
  border: 2px solid rgb(255, 255, 255);
  box-shadow: 0 0 2px rgb(0, 0, 0);
}
.galleryImageMarkerContainer .galleryImageMarker:hover {
  opacity: 1;
  height: 48px;
  width: 48px;
}
.galleryImageMarkerContainer .galleryImageMarker.jsMarked {
  border-color: var(--wcfStatusInfoBackground);
  opacity: 1;
}

body[data-application=gallery][data-template=imageAdd] #imageContainer {
  position: relative;
}
body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryPreviousImageButton,
body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryNextImageButton {
  display: none !important;
}
@media screen and (min-width: 769px), print {
  body[data-application=gallery][data-template=imageAdd] #imageContainer.galleryHasNextPreviousImageButtons {
    padding-left: 60px;
    padding-right: 60px;
  }
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryPreviousImageButton,
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryNextImageButton {
    background-color: black;
    border-radius: 50%;
    color: white;
    display: block !important;
    margin-top: -20px;
    opacity: 0.2;
    padding: 6px 3px;
    position: absolute;
    top: 100px;
    z-index: 10;
    transition: opacity 0.2s;
  }
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryPreviousImageButton:hover,
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryNextImageButton:hover {
    opacity: 0.9 !important;
  }
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryPreviousImageButton.disabled,
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryNextImageButton.disabled {
    cursor: not-allowed;
  }
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryPreviousImageButton.disabled > span,
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryNextImageButton.disabled > span {
    cursor: not-allowed;
  }
  body[data-application=gallery][data-template=imageAdd] #imageContainer:hover > .galleryPreviousImageButton,
  body[data-application=gallery][data-template=imageAdd] #imageContainer:hover > .galleryNextImageButton {
    opacity: 0.6;
  }
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryPreviousImageButton {
    left: 10px;
  }
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryPreviousImageButton > span {
    left: -2px;
  }
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryNextImageButton {
    right: 10px;
  }
  body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryNextImageButton > span {
    left: 2px;
  }
}
body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryPreviousImageButton.hidden,
body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryNextImageButton.hidden {
  display: none !important;
}

.galleryImageListContainer .containerListDisplayOptions {
  margin-bottom: 10px;
}

.galleryEmbeddedImage {
  display: inline-block;
  /* Responsive videos, for example, YouTube, do not work with `inline-block`. Aligning these does not
     make sense anyway, which is the primary motivation for `inline-block` in the first place. */
}
.galleryEmbeddedImage.galleryEmbeddedVideo, .galleryEmbeddedImage.galleryEmbeddedVideoLink {
  display: block;
}

.galleryImageButtons {
  justify-content: flex-end;
}

.scoreInput {
  width: 40px;
}

.userProfilePairingsBox {
  margin: 0 10px;
}

.cbsPairingInsert {
  float: left !important;
  margin-right: 50px;
}

.columnCompetitionDate h3 {
  text-align: center;
  font-weight: 700;
  line-height: 30px;
  font-size: 16px;
}

@media only screen and (max-width: 800px) {
  .pairingsList li .box48 a {
    margin-right: 0;
  }
  .userProfilePairingsBox {
    margin: 0;
  }
}
.pairingsList li .box48 :last-child {
  flex: inherit;
}

.lastGames::after {
  content: "";
  display: block;
  clear: both;
}

.homeTeam,
.visitorTeam {
  width: 50%;
}
.homeTeam > h1,
.visitorTeam > h1 {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.05;
}
.homeTeam > h2,
.visitorTeam > h2 {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.05;
}

.homeTeam {
  float: left;
}

.visitorTeam {
  float: right;
}

#competitionImage {
  max-width: 100%;
}

.competitionFormField {
  margin-top: 20px;
}

.participantList > li > .box24 > :nth-child(2) {
  flex: 0 0 auto;
  margin-right: 8px;
}

.competitionListCategory {
  font-size: smaller;
}
.competitionListCategory::before {
  content: "·";
  margin: 0 5px;
}

.embeddedContentMetaImage .cbsImage {
  max-width: 32px;
  max-height: 32px;
}

.competitionOption dt {
  display: inline !important;
}

.cbsCompetition .contentHeaderNavigation {
  flex: initial !important;
}

.competitionBoxContent .boxMenu fa-icon {
  align-self: center;
}

.roundBoxMenu .boxMenuLink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.roundBoxMenu .boxMenuLink .roundBoxMenuComment {
  text-align: right;
  margin-left: auto;
}

.cbsPairingRow {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--wcf-border);
  padding-bottom: 1rem;
}
.cbsPairingRow label {
  display: flex;
  flex-direction: column;
  flex: 1 1 180px;
  min-width: 180px;
}

.cbsScoreInputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.formError {
  border-left: 4px solid var(--wcf-accent);
  padding-left: 0.5rem;
}

.jsCompetitionInlineEditorContainer ul {
  display: flex;
}

/* Competition Logo */
.competitionLogoContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
}
.competitionLogoContainer .competitionLogoFrame {
  display: inline-block;
  padding: 0.3rem;
  border: 2px solid;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.competitionLogoContainer .competitionLogoFrame:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
}
.competitionLogoContainer .competitionLogoFrame .competitionLogo {
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.competitionLogoContainer .competitionTitle {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.8rem;
  font-weight: 600;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
.competitionDivider {
  border: none;
  height: 1px;
  margin: 1rem 0;
  background: var(--wcfContentBorder);
}

.bettingGameBox {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--wcfContentContainerBackground);
  border: 1px solid var(--wcfContentContainerBorder);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.bettingGameBoxTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wcfContentHeadlineText);
  border-bottom: 1px solid var(--wcfContentBorder);
  padding-bottom: 0.5rem;
  margin-bottom: 0.8rem;
}

.bettingGameBoxTitle .badge {
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--wcfButtonDisabledBackground);
  color: var(--wcfButtonDisabledText);
  font-size: 0.75rem;
}

.bettingGameBoxMenu ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bettingGameBoxItem {
  margin-bottom: 0.2rem;
  border-radius: 0.3rem;
  transition: background-color 0.3s, transform 0.3s;
}

.bettingGameBoxItem a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.3rem;
  text-decoration: none;
  color: var(--wcfContentText);
  font-size: 0.9rem;
  font-weight: 500;
}

.bettingGameBoxItem a:hover {
  background-color: var(--wcfButtonBackgroundActive);
  transform: translateX(2px);
  color: var(--wcfContentHeadlineLinkActive);
}

.bettingGameBoxItem.is-active a {
  background-color: var(--wcfButtonBackgroundActive);
  border-left: 3px solid var(--wcfContentDimmedLink);
  font-weight: 600;
}

.bettingGameBoxItemTitle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.bettingGameBoxItemTitle svg {
  fill: var(--wcfContentDimmedLink);
}

.bettingGameBoxItemComment {
  font-size: 0.75rem;
  color: var(--wcfContentDimmedText);
}

#pairingAdd section[id^=body_][id$=Container] {
  display: grid;
  grid-template-columns: 260px minmax(140px, 0.6fr) auto auto minmax(180px, 0.9fr);
  gap: 12px;
  align-items: end;
}
#pairingAdd section[id^=body_][id$=Container] > dl[id^=score1_] {
  grid-column: 3;
  display: grid;
  grid-template-columns: 48px 16px 48px;
  align-items: center;
}
#pairingAdd section[id^=body_][id$=Container] > dl[id^=score1_]::after {
  content: ":";
  grid-column: 3;
  text-align: center;
  font-weight: bold;
}
#pairingAdd section[id^=body_][id$=Container] > dl[id^=score1_] dt {
  display: none;
}
#pairingAdd section[id^=body_][id$=Container] > dl[id^=score2_] {
  grid-column: 4;
  display: contents;
}
#pairingAdd section[id^=body_][id$=Container] > dl[id^=score2_] dt {
  display: none;
}
#pairingAdd section[id^=body_][id$=Container] input[type=number] {
  width: 48px;
  text-align: center;
  box-sizing: border-box;
}
#pairingAdd section[id^=body_][id$=Container] > dl[id^=user1_] {
  justify-self: end;
}
#pairingAdd section[id^=body_][id$=Container] > dl[id^=user2_] {
  grid-column: 5;
}
@media (max-width: 768px) {
  #pairingAdd {
    /* score2 = Grid (Gast rechts) */
    /* Gast RECHTS */
  }
  #pairingAdd section[id^=body_][id$=Container] {
    display: block;
  }
  #pairingAdd section[id^=body_][id$=Container] > dl {
    display: block;
    width: 100%;
  }
  #pairingAdd section[id^=body_][id$=Container] > dl[id^=score2_] {
    display: grid;
    grid-template-columns: 48px 16px 48px;
    justify-content: center;
    align-items: center;
  }
  #pairingAdd section[id^=body_][id$=Container] > dl[id^=score2_] > dd {
    grid-column: 3;
    margin-top: -77px;
    margin-left: -90px;
  }
  #pairingAdd section[id^=body_][id$=Container] > dl[id^=score1_] > dd {
    grid-column: 1;
  }
}

.bracketContainerVertical {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.roundHeader {
  background: var(--wcfButtonPrimaryBackground);
  border: 1px solid var(--wcfContentBorder);
  border-radius: 5px;
  padding: 8px 12px;
  font-weight: 600;
  text-align: center;
  color: var(--wcfButtonPrimaryText);
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(var(--wcfContentBorder-rgb), 0.2);
}

.roundPairingsHorizontal {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.matchUnit {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wcfContentBorder);
  border-radius: 6px;
  overflow: hidden;
  background: var(--wcfContentBackground);
  box-shadow: 0 1px 3px rgba(var(--wcfContentBorder-rgb), 0.2);
  min-width: 180px;
  transition: transform 0.2s ease;
}

.matchUnit:hover {
  transform: translateY(-2px);
}

.matchSegment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--wcfContentBackground);
  color: var(--wcfContentText);
  border-bottom: 1px solid var(--wcfContentBorder);
}

.matchSegment:last-child {
  border-bottom: none;
}

.matchSegment.win {
  background: var(--wcfStatusSuccessBackground);
  color: var(--wcfContentText);
  font-weight: 700;
}

.matchSegmentGold {
  background: var(--wcfButtonPrimaryBackground);
  color: var(--wcfButtonPrimaryText);
  border-radius: 5px;
  text-align: center;
  padding: 10px 12px;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(var(--wcfButtonPrimaryBackground-rgb), 0.8);
}

.matchDetails {
  display: flex;
  justify-content: center;
  gap: 6px;
  background: var(--wcfContentContainerBackground);
  color: var(--wcfContentDimmedText);
  padding: 4px 6px;
  width: 100%;
}

.resultSection {
  font-weight: bold;
}

.scoreInput {
  max-width: 30px;
  background: var(--wcfContentBackground);
  border: 1px solid var(--wcfContentBorder);
  color: var(--wcfContentText);
  border-radius: 3px;
  padding: 2px 4px;
}

.declinedDescription {
  color: var(--wcfStatusErrorBackground);
}

.winnerContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
  animation: glow 1.5s ease-in-out infinite alternate;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.winnerTitle {
  background: rgb(255, 215, 0);
  color: rgb(34, 37, 41);
  padding: 12px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

.winnerName {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  padding: 16px;
  box-shadow: inset 0 0 10px rgba(218, 165, 32, 0.6);
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.winnerName::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9);
  }
}
.resultSection,
.scoreInput {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.matchSegment.hoverHighlight {
  background: var(--wcfStatusInfoBackground);
}

.confirmPresence,
.confirmationStatus {
  display: inline;
}

/*

  DO NOT EDIT THIS FILE!

  dynamic global SCSS values, generated at Thu, 12 Feb 2026 07:45:57 +0000

*/
.messageText,
.recentActivityListItem__description,
[class*=__meta],
[class*=Meta],
.htmlContent,
.ck.ck-content.ck-editor__editable,
.messageBody > .messageText,
.messageSignature > div,
small {
  font-family: var(--font-supercell);
}

/* Partner slider – WoltLab Generic Box */
[data-box-identifier="com.woltlab.wcf.genericBox83"] .boxContent {
  position: relative;
  height: 120px;
  overflow: hidden;
}

/* Each partner slide */
[data-box-identifier="com.woltlab.wcf.genericBox83"] .partner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  animation: partnerSlider 9s infinite;
}

/* Slide timing (3s per partner) */
[data-box-identifier="com.woltlab.wcf.genericBox83"] .partner:nth-child(1) {
  animation-delay: 0s;
}

[data-box-identifier="com.woltlab.wcf.genericBox83"] .partner:nth-child(2) {
  animation-delay: 3s;
}

[data-box-identifier="com.woltlab.wcf.genericBox83"] .partner:nth-child(3) {
  animation-delay: 6s;
}

/* Animation logic */
@keyframes partnerSlider {
  0% {
    opacity: 0;
    pointer-events: none;
  }
  10% {
    opacity: 1;
    pointer-events: auto;
  }
  30% {
    opacity: 1;
    pointer-events: auto;
  }
  40% {
    opacity: 0;
    pointer-events: none;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}
/* Optional: pause slider on hover */
[data-box-identifier="com.woltlab.wcf.genericBox83"]:hover .partner {
  animation-play-state: paused;
}

.pageHeaderLogo img.pageHeaderLogoSmall {
  height: 38px !important;
  max-height: 38px !important;
  width: auto !important;
}

.boxesFooter {
  padding: 40px 0;
}
.boxesFooter .boxContainer {
  --columns: 1;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--columns), 1fr);
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .boxesFooter .boxContainer {
    --columns: 2;
  }
}
@media screen and (min-width: 1025px), print {
  .boxesFooter .boxContainer {
    --columns: 4;
  }
}
.boxesFooter .boxContainer .box {
  margin-top: 0;
}
.boxesFooter .boxContainer .boxMenu {
  display: block;
  margin: 0;
}
.boxesFooter .boxContainer .boxMenu > li {
  padding: 0;
}
.boxesFooter .boxContainer .boxTitle + .boxContent {
  margin-top: 10px;
}
.boxesFooter .boxContainer .boxTitle {
  text-transform: uppercase;
}
.boxesFooter .boxImage {
  float: none;
  width: auto;
}
.boxesFooter .boxImage img {
  width: 136px;
  margin-left: 24px;
}
.boxesFooter .boxWithImage .boxContent {
  margin-left: 0;
  margin-top: 20px;
}

.woltlabLogo {
  display: flex;
  justify-content: center;
}

.shareHideToolbar .ck-editor__top {
  display: none;
}

/* Fix by itsmeJAY. Some package or plugin hides the mobile navigation in the MediaManager on mobile versions. To avoid making changes in external or third-party packages, this is a “hard” fix. */
/* Correzione di itsmeJAY. Alcuni pacchetti o plugin nascondono la navigazione mobile nel MediaManager sulle versioni mobile. Per evitare modifiche a pacchetti esterni o di terze parti, qui c’è una correzione “hard”. */
@media screen and (max-width: 1024px) {
  .jsMobileButtonGroupNavigation > button {
    display: block;
  }
  .mediaManagerMediaList > li .buttonGroupNavigation > .buttonList {
    background-color: rgb(var(--wcfButtonPrimaryBackground-rgb)/80%);
  }
}
/* Nasconde il logo Giphy */
.giphyLogo {
  display: none !important;
}

/* ========================================
   SOLO COMMENTI - Nasconde toolbar editor
   ======================================== */
/*.commentAdd .ck.ck-editor__top,
.commentResponseAdd .ck.ck-editor__top {
    display: none !important;
}*/
/* ========================================
   SOLO COMMENTI - Nasconde tab Eserciti, Basi, Clan
   Mantiene solo: Emoticon e Giphy
   ======================================== */
/*.commentAdd .messageTabMenuNavigation li[data-name="cocArmy"],
.commentAdd .messageTabMenuNavigation li[data-name="cocBase"],
.commentAdd .messageTabMenuNavigation li[data-name="cocClan"],
.commentResponseAdd .messageTabMenuNavigation li[data-name="cocArmy"],
.commentResponseAdd .messageTabMenuNavigation li[data-name="cocBase"],
.commentResponseAdd .messageTabMenuNavigation li[data-name="cocClan"] {
    display: none !important;
}*/
/* INFLUENCER Badge - Social Gradient */
.badge.influencer-badge,
span.badge.influencer-badge,
[class*=badge].influencer-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #405DE6 0%, #5851DB 15%, #833AB4 30%, #C13584 45%, #E1306C 60%, #FD1D1D 75%, #F56040 90%, #FCAF45 100%) !important;
  background-size: 200% 200% !important;
  animation: influencer-shimmer 5s ease infinite !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 12px rgba(193, 53, 132, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(193, 53, 132, 0.4) !important;
  position: relative !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

@keyframes influencer-shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Shine sweep effect */
.badge.influencer-badge::before,
[class*=badge].influencer-badge::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
  animation: influencer-shine 4s infinite !important;
  pointer-events: none !important;
}

@keyframes influencer-shine {
  0% {
    left: -100%;
  }
  20% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}
/* ADMIN Badge - Premium Dark */
.badge.admin-badge,
span.badge.admin-badge,
[class*=badge].admin-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 25%, #8B0000 50%, #2d2d2d 75%, #1a1a1a 100%) !important;
  background-size: 200% 200% !important;
  animation: admin-shimmer 4s ease infinite !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 12px rgba(139, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(139, 0, 0, 0.6) !important;
  position: relative !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

@keyframes admin-shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Shine sweep effect */
.badge.admin-badge::before,
[class*=badge].admin-badge::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
  animation: admin-shine 4s infinite !important;
  pointer-events: none !important;
}

@keyframes admin-shine {
  0% {
    left: -100%;
  }
  20% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}
/* PRO Badge - Premium Gold */
.badge.pro-badge,
span.badge.pro-badge,
[class*=badge].pro-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #1a1a1a !important;
  background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #B38728 50%, #FBF5B7 75%, #AA771C 100%) !important;
  background-size: 200% 200% !important;
  animation: gold-shimmer 3s ease infinite !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 10px rgba(191, 149, 63, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(170, 119, 28, 0.5) !important;
  position: relative !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

@keyframes gold-shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Shine sweep effect */
.badge.pro-badge::before,
[class*=badge].pro-badge::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
  animation: pro-shine 4s infinite !important;
  pointer-events: none !important;
}

@keyframes pro-shine {
  0% {
    left: -100%;
  }
  20% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}
#add_footerv3 {
  display: none;
}

/* Lexicon tooltip - image left, title+description right */
.lexiconEntryPreview {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 4px 12px;
}

.lexiconEntryPreview .boxImage {
  grid-row: 1/3;
  grid-column: 1;
}

.lexiconEntryPreview .boxImage img {
  width: 80px;
  height: auto;
  max-height: 120px;
  object-fit: contain;
  border-radius: 4px;
}

.lexiconEntryPreview .boxTitle {
  grid-row: 1;
  grid-column: 2;
  align-self: start;
}

.lexiconEntryPreview .boxContent {
  grid-row: 2;
  grid-column: 2;
  align-self: start;
}

/* When no image, span full width */
.lexiconEntryPreview:not(:has(.boxImage)) .boxTitle,
.lexiconEntryPreview:not(:has(.boxImage)) .boxContent {
  grid-column: 1/-1;
}

.userMenu[data-origin=jcoinsPanel] .userMenuItemImage .amount {
  /* Nascondi il numero */
  font-size: 0;
  color: transparent;
  /* Rimuovi lo sfondo verde */
  background: none;
  /* Aggiungi la tua icona */
  background-image: url("https://clashando.io/images/clashini.jpg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Dimensioni */
  height: 40px;
  border-radius: 0; /* Rimuovi il cerchio */
}

/* Jcoins Panel Fix */
.userMenu[data-origin=jcoinsPanel] .userMenuItem {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 8px;
  align-items: center;
}

.userMenu[data-origin=jcoinsPanel] .userMenuItemImage {
  grid-row: span 2;
}

.userMenu[data-origin=jcoinsPanel] .userMenuItemContent {
  padding-left: 0;
  margin-left: 0;
}

/* Jcoins Menu Fix */
#jcoinsPanel > a {
  display: flex;
  align-items: center;
  gap: 8px;
}

#jcoinsPanel .badge.jCoinsBadgeUpdate {
  position: static;
  margin-left: auto;
  order: 3;
}

#jcoinsPanel > a {
  display: flex;
  align-items: center;
  gap: 3px;
}

#jcoinsPanel fa-icon {
  order: 1;
  margin: 0;
  padding: 0;
}

#jcoinsPanel > a > span:not(.badge) {
  order: 2;
  padding: 0;
  margin-left: -3px;
  margin-right: 2px;
}

/* NO footer V3 Mobile */
@media (max-width: 768px) {
  #add_footerv3 {
    display: none;
  }
}
/* For the right sidebar - Desktop only */
@media (min-width: 999px) {
  aside.sidebar {
    position: sticky !important;
    top: 90px;
    align-self: flex-start;
    height: fit-content;
  }
}
/* Remove Xtrabox container */
#UserXtraboxContainer {
  display: none;
}

/* Target specifically the account management page */
body[data-template=accountManagement] .section:has(input#username) {
  display: none;
}

/* Override JCoins icon with custom image */
.lmsJCoinsIcon {
  background-image: url("https://clashando.io/images/clashini.jpg.png") !important;
  /* Or use a full URL: */
  /* background-image: url('https://clashando.io/images/your-coin-icon.png') !important; */
  /* Adjust size if needed */
  width: 20px;
  height: 20px;
}

/* Larger icon on detail page */
.lmsJCoinsPriceLarge .lmsJCoinsIcon {
  width: 26px;
  height: 26px;
}

/* === DESKTOP === */
/* Hide the FontAwesome icon */
.userPanelItems a[href*=jcoins] fa-icon {
  display: none;
}

/* Add custom gem image */
.userPanelItems a[href*=jcoins]::before {
  content: "";
  background-image: url("https://clashando.io/images/clashini.jpg.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

/* === MOBILE === */
/* Hide the FontAwesome icon */
button[data-origin=jcoinsPanel] fa-icon {
  display: none;
}

/* Add custom gem image */
button[data-origin=jcoinsPanel]::before {
  content: "";
  background-image: url("https://clashando.io/images/clashini.jpg.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
}

/*
Woltlab Suite 6.1 Theme Color Drop RedYellow Multi
Design & coding by Gino Zantarelli
https://www.powerstylez.com
All under Copyright-no Freeware
*/
/* ================================================================ General Container & Content Radius */
html {
  --wcfBorderRadiusContainer: 8px;
  --wcfBorderRadius: 4px;
}

/* ================================================================ Color gradients Red-Yellow */
.top_registerbox {
  background-color: #af3642 !important;
}

html[data-color-scheme=dark] .pageNavigation > div #dateandtime {
  color: #ffffff !important;
}

html[data-color-scheme=dark] .showhidesidebar a {
  background-color: #ffffff !important;
  color: #151515 !important;
}

html[data-color-scheme=dark] .showhidesidebar a:hover {
  background-color: rgba(255, 255, 255, 0.85) !important;
  color: #333333 !important;
}

html[data-color-scheme=dark] .boxesSidebarLeft .boxTitle::after, .boxesSidebarRight .boxTitle::after {
  opacity: 0.15 !important;
}

html[data-color-scheme=dark] .boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::after, .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::after {
  opacity: 0.15 !important;
}

@media screen and (min-width: 1025px), print {
  #pageHeaderFacade::before {
    background-image: linear-gradient(to right, rgba(235, 84, 84, 0.35), rgba(225, 153, 74, 0.23));
    content: "";
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    position: absolute;
  }
}
.pageNavigation {
  background-image: linear-gradient(to right, #d54d4c, #faca68);
}

.boxesSidebarLeft .boxTitle, .boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::before, .boxesSidebarLeft .boxContent.box96::before {
  background-image: linear-gradient(to left, #f26a6a, #d53333);
}

.boxesSidebarRight .boxTitle, .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::before, .boxesSidebarRight .boxContent.box96::before {
  background-image: linear-gradient(to right, #f8c467, #ee9c2c);
}

.wbbBoardNodeContainer__header {
  background-image: linear-gradient(to right, #d54d4c, #faca68);
}

.wbbBoardNodeContainer.wbbBoardNodeContainer--category.wbbBoardNodeContainer--collapsed .wbbBoardNodeContainer__header {
  background: linear-gradient(to right, #d54d4c, #faca68);
}

.userMenuNotifications {
  background-image: linear-gradient(to right, #d54d4c, #faca68);
  margin: 0px;
  border-radius: 0px;
  color: var(--wcfHeaderText) !important;
}

.message.messageSidebarOrientationLeft .messageSidebar::before {
  background-image: linear-gradient(to bottom, #d54d4c, #faca68);
}

.blogDateBox {
  background-color: #d54d4c !important;
}

.tabularBox.lexiconCategoryList .tabularBoxTitle > header {
  background-image: linear-gradient(to right, #d54d4c, #faca68);
}

/* ================================================================ Basics */
a {
  outline: none !important;
}

a:hover, .wbbBoardNode__link:hover, .userMenuFooterLink:hover, .styleChanger button:hover, .pageFooterCopyright a:hover, .breadcrumbs__link:hover, .wbbBoardNode__lastPostLink:hover, .boxesFooter a:hover {
  text-decoration: none !important;
}

.message .messageBody .messageText p a:not(.button):not(.message .messageBody .messageText p a.userMention):not(.message .messageBody .messageText table th a):not(.message .messageBody .codeBox .codeBoxCode > code .codeBoxLine > a):not(.message .messageBody .messageText .quoteBoxTitle a) {
  font-weight: 600;
}

#tpl_wcf_contact .content input[name=privacyPolicyConfirmed] + a {
  color: red;
}

small, .small {
  letter-spacing: 0px;
}

.externalURL {
  font-weight: 600;
}

.containerList.recentActivityList .box48 > :last-child .containerHeadline h3 a {
  text-decoration: none !important;
  font-style: normal;
}

.containerList.recentActivityList .box48 > :last-child .containerHeadline a {
  text-decoration: underline dotted !important;
  font-style: italic;
  font-weight: 600;
}

dl.dataList > dd:not(:last-child) {
  margin-bottom: 0px;
}

dl.dataList > dd {
  min-height: auto;
}

textarea {
  font-family: "Arial", Helvetica, sans-serif;
  transition: all 0.2s;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2) inset;
  font-size: 13px;
}

select {
  margin: 2px 0px;
  background-color: var(--wcfInputBackground) !important;
  border: 1px solid var(--wcfInputBorder) !important;
  padding: 4px !important;
  font-family: "Arial", Helvetica, sans-serif !important;
  font-size: 12px;
  color: var(--wcfInputText) !important;
}

.datePicker > header {
  padding: 0px 10px;
}

.userMention {
  background-color: rgba(0, 0, 0, 0.07);
  padding: 0px 6px;
  color: #cf0101;
}

.userAvatarList > li > a > img, .messageGroupList .columnAvatar .myAvatar > img {
  border: none;
}

/* ================================================================ Avatar */
.userAvatarImage {
  border-radius: var(--wcfBorderRadius);
}

.userAvatarImage[width="24"], .userAvatarImage[width="32"], .userAvatarImage[width="48"] {
  border-radius: 3px;
}

.userAvatarList > li > a > img {
  border: none;
}

.wbbBoardNode__lastPostAvatar .userAvatarImage {
  width: 32px;
  height: 32px;
}

.articleAboutAuthorAvatar .userAvatarImage {
  height: 96px !important;
  width: 96px !important;
}

.dialogContainer > .dialogContent .quoteBoxIcon .userAvatarImage:not(.messageReduced .messageHeader .userAvatarImage) {
  width: 64px !important;
  height: 64px !important;
}

/* ================================================================ Input */
input[type=date], input[type=datetime], input[type=email], input[type=number], input[type=password], input[type=text], input[type=url] {
  margin: 2px 0px;
  padding: 4px 6px;
  font-family: "Arial", Helvetica, sans-serif !important;
  font-size: 12px;
  transition: all 0.2s;
}

input[type=date], input[type=datetime], input[type=email], input[type=number], input[type=password], input[type=text], input[type=url] {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15) inset;
}

.inputItemList > .input > input {
  box-shadow: none;
}

input[type=search], input[type=text] {
  font-family: "Arial", Helvetica, sans-serif !important;
}

/* ================================================================ Animation */
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translatex(-10px);
    transform: translatex(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatex(0);
    transform: translatex(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translatex(-100px);
    transform: translatex(-100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatex(0);
    transform: translatex(0);
  }
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink {
  to {
    visibility: hidden;
  }
}
@-moz-keyframes-keyframes blink {
  to {
    visibility: hidden;
  }
}
@-o-keyframes-keyframes blink {
  to {
    visibility: hidden;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes pulsereg {
  to {
    box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
  }
}
@keyframes pulsereg {
  to {
    box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
  }
}
@-webkit-keyframes flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes ring {
  0% {
    transform: rotate(0);
  }
  1% {
    transform: rotate(30deg);
  }
  3% {
    transform: rotate(-28deg);
  }
  5% {
    transform: rotate(34deg);
  }
  7% {
    transform: rotate(-32deg);
  }
  9% {
    transform: rotate(30deg);
  }
  11% {
    transform: rotate(-28deg);
  }
  13% {
    transform: rotate(26deg);
  }
  15% {
    transform: rotate(-24deg);
  }
  17% {
    transform: rotate(22deg);
  }
  19% {
    transform: rotate(-20deg);
  }
  21% {
    transform: rotate(18deg);
  }
  23% {
    transform: rotate(-16deg);
  }
  25% {
    transform: rotate(14deg);
  }
  27% {
    transform: rotate(-12deg);
  }
  29% {
    transform: rotate(10deg);
  }
  31% {
    transform: rotate(-8deg);
  }
  33% {
    transform: rotate(6deg);
  }
  35% {
    transform: rotate(-4deg);
  }
  37% {
    transform: rotate(2deg);
  }
  39% {
    transform: rotate(-1deg);
  }
  41% {
    transform: rotate(1deg);
  }
  43% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ring {
  0% {
    transform: rotate(0);
  }
  1% {
    transform: rotate(30deg);
  }
  3% {
    transform: rotate(-28deg);
  }
  5% {
    transform: rotate(34deg);
  }
  7% {
    transform: rotate(-32deg);
  }
  9% {
    transform: rotate(30deg);
  }
  11% {
    transform: rotate(-28deg);
  }
  13% {
    transform: rotate(26deg);
  }
  15% {
    transform: rotate(-24deg);
  }
  17% {
    transform: rotate(22deg);
  }
  19% {
    transform: rotate(-20deg);
  }
  21% {
    transform: rotate(18deg);
  }
  23% {
    transform: rotate(-16deg);
  }
  25% {
    transform: rotate(14deg);
  }
  27% {
    transform: rotate(-12deg);
  }
  29% {
    transform: rotate(10deg);
  }
  31% {
    transform: rotate(-8deg);
  }
  33% {
    transform: rotate(6deg);
  }
  35% {
    transform: rotate(-4deg);
  }
  37% {
    transform: rotate(2deg);
  }
  39% {
    transform: rotate(-1deg);
  }
  41% {
    transform: rotate(1deg);
  }
  43% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
/* ================================================================ Sticky - Moved - Announcement */
.columnIcon.columnAvatar .wbbAnnouncementIcon, .columnIcon.columnAvatar .wbbStickyIcon, .columnIcon.columnAvatar .wbbMovedIcon {
  border: none;
  padding: 4px;
  left: -2px;
  top: -2px;
  font-size: 16px;
  height: 18px;
  line-height: 18px;
  width: 18px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
  color: #fff !important;
  box-sizing: content-box;
}

.wbbAnnouncementIcon, .wbbStickyIcon, .wbbMovedIcon {
  border: none;
  padding: 4px;
  left: auto;
  right: -2px;
  top: -2px;
  font-size: 16px;
  height: 18px;
  line-height: 18px;
  width: 18px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  color: #fff !important;
  box-sizing: content-box;
}

.wbbAnnouncementIcon {
  background-color: #b40000;
  color: #fff;
}

.wbbStickyIcon, .wbbMovedIcon {
  background-color: #31900e;
}

.columnIcon.columnAvatar .wbbAnnouncementIcon, .columnIcon.columnAvatar .wbbStickyIcon, .columnIcon.columnAvatar .wbbMovedIcon {
  line-height: 18px !important;
  color: #fff !important;
}

.columnIcon.columnAvatar .wbbAnnouncementIcon.fa-bullhorn::before, .contentHeader.wbbThread > .contentHeaderIcon .wbbAnnouncementIcon.fa-bullhorn::before {
  content: "\f130";
}

@media screen and (max-width: 1024px) {
  .columnIcon.columnAvatar .wbbAnnouncementIcon, .columnIcon.columnAvatar .wbbStickyIcon, .columnIcon.columnAvatar .wbbMovedIcon {
    padding: 0px !important;
    left: 0px !important;
    top: 0px !important;
    height: 32px !important;
    width: 32px !important;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .columnIcon.columnAvatar .wbbAnnouncementIcon, .columnIcon.columnAvatar .wbbStickyIcon, .columnIcon.columnAvatar .wbbMovedIcon {
    padding: 5px !important;
    left: 0px !important;
    top: 0px !important;
    font-size: 18px !important;
    height: 38px !important;
    line-height: 38px !important;
    width: 38px !important;
    border-radius: 3px !important;
  }
}
/* ================================================================ Icon Manipulation */
.wbbBoardNode:not(.wbbBoardNode--unread) .wbbBoardNode__icon, .wbbBoardNode__subBoard:not(.wbbBoardNode__subBoard--unread) .wbbBoardNode__subBoardIcon {
  color: var(--wcfContentText);
}

.wbbBoardNode:not(.wbbBoardNode--unread) .wbbBoardNode__icon fa-brand[size="32"], .wbbBoardNode:not(.wbbBoardNode--unread) .wbbBoardNode__icon fa-icon[size="32"] {
  --font-size: 24px;
  --icon-size: 28px;
}

.wbbBoardNode__subBoard:not(.wbbBoardNode__subBoard--unread) .wbbBoardNode__subBoardIcon fa-brand[size="16"], .wbbBoardNode__subBoard:not(.wbbBoardNode__subBoard--unread) .wbbBoardNode__subBoardIcon fa-icon[size="16"] {
  --font-size: 12px;
  --icon-size: 18px;
}

.wbbBoardNode__lastPostAuthor span fa-icon[size="16"], .userLink span fa-icon[size="16"] {
  --font-size: 12px;
}

.wbbBoardNodeContainer__collapsibleButton {
  align-self: start;
  margin-right: -5px;
}

.boxesFooter .jsButtonStyleChanger::before {
  content: "\f302";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  padding-right: 4px;
  line-height: 16px;
  font-size: 13px;
}

.pageAction .pageActionButtonToTop fa-icon::before {
  content: "\f062";
  font-size: 14px;
  vertical-align: 2px;
  font-weight: 600;
}

.pageAction .pageActionButtonToTop fa-icon {
  --font-size: 0px;
  width: 34px;
  height: 34px;
}

.wbbBoardNode.wbbBoardNode--depth2.wbbBoardNode--category .wbbBoardNode__icon::before {
  content: "\f149";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 12px;
  margin-left: -18px;
  margin-top: -6px;
  position: absolute;
  transform: rotate(180deg);
}

.wbbBoardNode.wbbBoardNode--depth2.wbbBoardNode--category .wbbBoardNode__icon {
  height: 44px;
  line-height: 34px;
  width: 24px;
  margin-left: 28px;
}

.wbbBoardNode.wbbBoardNode--depth2.wbbBoardNode--category .wbbBoardNode__icon fa-icon[size="32"], .wbbBoardNode.wbbBoardNode--depth2.wbbBoardNode--category .wbbBoardNode__icon fa-brand[size="32"] {
  --font-size: 20px;
  --icon-size: 22px;
}

#unreadConversations:not([data-count="0"]) > a > fa-icon[size="32"][name=comments] {
  animation: blink 1s steps(3, start) infinite;
  -webkit-animation: blink 1s steps(3, start) infinite;
  pointer-events: none;
}

#userNotifications:not([data-count="0"]) > a > fa-icon {
  -webkit-animation: ring 6s 0.1s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  animation: ring 6s 0.1s ease-in-out infinite;
  transform-origin: 50% 4px;
}

.wbbBoardNode__unreadIcon fa-icon {
  animation: blink 1s steps(3, start) infinite;
  -webkit-animation: blink 1s steps(3, start) infinite;
}

.messageHeaderMetaData .messagePublicationTime::before {
  content: "\f11c";
  font-family: "Font Awesome 7 Free";
  font-weight: 100;
  font-size: 12px;
  margin-right: 4px;
}

.pollContainer h2::before {
  content: "\f1fe";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  text-shadow: none;
  font-size: 19px;
  padding-right: 5px;
  vertical-align: -1px;
}

.containerList > li.filebaseVersion h3::before {
  content: "\f802";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  display: inline-block;
  font-style: normal !important;
  margin-right: 5px;
  font-size: 12px;
  vertical-align: 2px;
  color: var(--wcfContentLink);
}

.messageGroupList .columnMark > label input[type=checkbox] {
  height: 14px;
  width: 14px;
}

.messageGroupList .columnMark > label {
  height: 14px;
  display: inline-block;
}

.messageQuickOptions > li:not(:last-child) a {
  line-height: 24px;
  height: 24px;
}

.messageSidebar + .messageContent .messageQuickOptions fa-icon[name=triangle-exclamation] {
  background-color: rgb(245, 198, 137);
  padding: 5px 3px;
  border-radius: 2px;
  margin-left: 3px;
  height: 20px;
  width: 20px;
  color: #46371d !important;
  vertical-align: -1px;
}

.messageSidebar + .messageContent .messageQuickOptions fa-icon[name=lock] {
  background-color: var(--wcfStatusErrorBackground);
  padding: 5px 3px 6px;
  border-radius: 2px;
  height: 21px;
  width: 20px;
  color: var(--wcfStatusErrorLink) !important;
  margin-top: 2px;
  --font-size: 12px;
}

.articleNavigationArticle.articleNavigationArticleWithImage.previousArticleButton .articleNavigationArticleIcon fa-icon[solid] {
  --font-size: 0px;
}

.articleNavigationArticle.articleNavigationArticleWithImage.previousArticleButton .articleNavigationArticleIcon fa-icon[solid]::before {
  content: "\f053";
  font-size: 26px;
  font-weight: 600;
  width: 40px;
  height: 40px;
  line-height: 34px;
  border: 3px solid;
  text-align: center;
  border-radius: 50%;
}

.articleNavigationArticle.articleNavigationArticleWithImage.nextArticleButton .articleNavigationArticleIcon fa-icon[solid] {
  --font-size: 0px;
}

.articleNavigationArticle.articleNavigationArticleWithImage.nextArticleButton .articleNavigationArticleIcon fa-icon[solid]::before {
  content: "\f054";
  font-size: 26px;
  font-weight: 600;
  width: 40px;
  height: 40px;
  line-height: 34px;
  border: 3px solid;
  text-align: center;
  border-radius: 50%;
}

.articleNavigation .articleNavigationEntityName:before {
  content: "\f1ea";
  font-family: "Font Awesome 7 Free";
  font-weight: 600 !important;
  font-style: normal !important;
  text-align: center;
  margin-right: 7px;
}

.blogEntryNavigation .blogPreviousEntryButton .blogEntryNavigationLink .blogEntryNavigationIcon fa-icon[solid] {
  --font-size: 0px;
}

.blogEntryNavigation .blogPreviousEntryButton .blogEntryNavigationLink .blogEntryNavigationIcon fa-icon[solid]::before {
  content: "\f053";
  font-size: 26px;
  font-weight: 600;
  width: 40px;
  height: 40px;
  line-height: 34px;
  border: 3px solid;
  text-align: center;
  border-radius: 50%;
}

.blogEntryNavigation .blogNextEntryButton .blogEntryNavigationLink .blogEntryNavigationIcon fa-icon[solid] {
  --font-size: 0px;
}

.blogEntryNavigation .blogNextEntryButton .blogEntryNavigationLink .blogEntryNavigationIcon fa-icon[solid]::before {
  content: "\f054";
  font-size: 26px;
  font-weight: 600;
  width: 40px;
  height: 40px;
  line-height: 34px;
  border: 3px solid;
  text-align: center;
  border-radius: 50%;
}

.blogEntryNavigationEntityName::before {
  content: "\f1ea";
  font-family: "Font Awesome 7 Free";
  font-weight: 600 !important;
  font-style: normal !important;
  text-align: center;
  margin-right: 7px;
}

.dialog__content .messageShareButtons .button fa-brand[size="24"] {
  --font-size: 18px;
  --icon-size: 18px;
  width: calc(var(--icon-size) * 1.1);
}

.sidebar #conversationLabelFilter .dropdownToggle.jsDropdownEnabled .badge::before, .sidebar .labelList .dropdownToggle.jsDropdownEnabled .badge::before {
  content: "\f0c9";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  margin-right: 6px;
  font-size: 11px;
}

.tabularListRowHead > .tabularListColumns > li .fa-circle-o::before {
  color: #ffffff;
}

.calendarFullMonthView .calendarEventLink.new::before {
  content: "\f105\f105\f105";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  padding: 1px 3px;
  font-size: 8px;
  letter-spacing: -1px;
  font-style: normal;
  color: #fff;
  background-color: #181818;
  border-radius: 2px;
  vertical-align: 1px;
  margin-right: 5px;
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.RegisterButton"] a.button.buttonPrimary::before, .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.RegisterButton"] a.button.buttonPrimary::before {
  content: "\f234";
  display: inline-block;
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 12px;
  padding-right: 6px;
  line-height: 11px;
}

.userPanel > ul > li > a.loginLink {
  padding-left: 20px;
}

.userPanel > ul > li > a.loginLink::before {
  content: "\f090";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 12px;
  width: 20px;
  text-align: center;
  display: inline-block;
  left: 0px;
}

.userPanel a.registrationLink::before {
  content: "\f234";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 12px;
  width: 20px;
}

.button.loginFormRegisterButton::before {
  content: "\f234";
  display: inline-block;
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 12px;
  padding-right: 6px;
  line-height: 11px;
}

.quoteBoxIcon fa-icon[solid] {
  color: var(--wcfContentText);
}

.boxesFooter .boxMenu > li::before {
  content: "\f111";
  font-family: "Font Awesome 7 Free";
  font-size: 8px;
  font-style: normal;
  font-weight: 100;
  color: #ffffff;
  vertical-align: 1px;
  padding-right: 2px;
}

.boxesFooter .boxMenu > li:hover::before {
  font-weight: 600;
}

.boxesFooter .boxMenu > li.active::before {
  font-weight: 600;
}

.boxesFooter .boxMenu > li.active a {
  color: var(--wcfFooterLinkActive);
}

/* ================================================================ Header Background Images */
#tpl_blog_blogList #pageHeaderFacade, #tpl_blog_blogAdd #pageHeaderFacade {
  background-image: url(../images/style-2/blogBG.jpg);
}

#tpl_blog_entryList #pageHeaderFacade {
  background-image: url(../images/style-2/blogentrylistBG.jpg);
}

#tpl_blog_blogEntryList #pageHeaderFacade {
  background-image: url(../images/style-2/blogentrytwoBG.jpg);
}

#tpl_blog_entry #pageHeaderFacade {
  background-image: url(../images/style-2/blogentryBG.jpg);
}

#tpl_wcf_articleList #pageHeaderFacade, #tpl_wcf_article #pageHeaderFacade, #tpl_wcf_articleAdd #pageHeaderFacade {
  background-image: url(../images/style-2/articleBG.jpg);
}

#tpl_wcf_cms[data-page-identifier="com.woltlab.wcf.Dashboard"] #pageHeaderFacade {
  background-image: url(../images/style-2/dashboardBG.jpg);
}

#tpl_wcf_membersList #pageHeaderFacade {
  background-image: url(../images/style-2/memberlistBG.jpg);
}

#tpl_wcf_recentActivityList #pageHeaderFacade {
  background-image: url(../images/style-2/activityBG.jpg);
}

#tpl_wcf_usersOnlineList #pageHeaderFacade {
  background-image: url(../images/style-2/useronlineBG.jpg);
}

#tpl_wcf_team #pageHeaderFacade {
  background-image: url(../images/style-2/teamBG.jpg);
}

#tpl_wcf_search #pageHeaderFacade, #tpl_wcf_userSearch #pageHeaderFacade, #tpl_wcf_searchResult #pageHeaderFacade, #tpl_wcf_tagSearch #pageHeaderFacade {
  background-image: url(../images/style-2/searchBG.jpg);
}

#tpl_wcf_user #pageHeaderFacade {
  background-image: url(../images/style-2/userBG.jpg);
}

#tpl_calendar_calendar #pageHeaderFacade, #tpl_calendar_weekly #pageHeaderFacade, #tpl_calendar_daily #pageHeaderFacade, #tpl_calendar_yearly #pageHeaderFacade {
  background-image: url(../images/style-2/calendarBG.jpg);
}

#tpl_calendar_upcomingEventList #pageHeaderFacade, #tpl_calendar_event #pageHeaderFacade, #tpl_calendar_eventParticipationList #pageHeaderFacade {
  background-image: url(../images/style-2/eventBG.jpg);
}

#tpl_gallery_imageList #pageHeaderFacade {
  background-image: url(../images/style-2/galleryBG.jpg);
}

#tpl_gallery_albumList #pageHeaderFacade, #tpl_gallery_album #pageHeaderFacade {
  background-image: url(../images/style-2/albumlistBG.jpg);
}

#tpl_gallery_image #pageHeaderFacade {
  background-image: url(../images/style-2/galleryimageBG.jpg);
}

#tpl_wcf_cms #pageHeaderFacade {
  background-image: url(../images/style-2/cmsBG.jpg);
}

#tpl_wbb_unresolvedThreadList #pageHeaderFacade, #tpl_wbb_watchedThreadList #pageHeaderFacade, #tpl_wbb_unreadThreadList #pageHeaderFacade {
  background-image: url(../images/style-2/unresolvedBG.jpg);
}

#tpl_filebase_fileList #pageHeaderFacade, #tpl_shop_categoryGrid #pageHeaderFacade {
  background-image: url(../images/style-2/filelistBG.jpg);
}

#tpl_filebase_file #pageHeaderFacade, #tpl_shop_product #pageHeaderFacade {
  background-image: url(../images/style-2/fileBG.jpg);
}

#tpl_wcf_contact #pageHeaderFacade {
  background-image: url(../images/style-2/contactBG.jpg);
}

#tpl_wbb_board #pageHeaderFacade {
  background-image: url(../images/style-2/boardBG.jpg);
}

#tpl_wbb_thread #pageHeaderFacade, #tpl_wbb_threadAdd #pageHeaderFacade {
  background-image: url(../images/style-2/threadBG.jpg);
}

/* ================================================================ Balloon Tooltip */
.balloonTooltip {
  background-color: var(--wcfButtonPrimaryBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 4px 10px 4px;
  color: var(--wcfButtonPrimaryText);
  font-weight: 400;
}

/* ================================================================ Loading Animation */
.spinner {
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  box-shadow: none;
  border-radius: 100px;
  color: #fff;
}

.loading-indicator__text {
  display: none;
}

.loading-indicator__wrapper fa-icon[size="48"] {
  --font-size: 42px;
  --icon-size: 42px;
  height: 52px;
  color: #ffffff;
}

/* ================================================================ Small Dropdown Menu */
.dropdownMenu {
  border-radius: var(--wcfBorderRadius);
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4);
  padding: 0px;
}

.dropdownMenu li > a, .dropdownMenu li > span {
  font-family: "Arial", Helvetica, sans-serif;
  padding: 6px 10px;
}

.dropdownMenu li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText) > :is(a, button), .dropdownMenu li:focus-within > :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) {
  border-bottom-left-radius: var(--wcfBorderRadius);
  border-bottom-right-radius: var(--wcfBorderRadius);
}

@media screen and (min-width: 1025px), print {
  .dropdownMenu {
    margin-top: 10px;
    font-size: 13px;
  }
  .dropdownMenu li:first-child {
    border-top-left-radius: var(--wcfBorderRadius);
    border-top-right-radius: var(--wcfBorderRadius);
  }
  .dropdownMenu li:last-child {
    border-bottom-left-radius: var(--wcfBorderRadius);
    border-bottom-right-radius: var(--wcfBorderRadius);
  }
  .dropdownMenu::before {
    border: 6px solid transparent;
    border-bottom-color: var(--wcfDropdownBackground);
    border-top-width: 0;
    content: "";
    display: inline-block;
    left: 12px;
    position: absolute;
    top: -6px;
    z-index: 101;
  }
  .dropdownMenu.dropdownOpen.dropdownArrowBottom.dropdownArrowRight {
    border-radius: 0px;
    margin-bottom: 8px;
  }
  .dropdownMenu.dropdownOpen.dropdownArrowBottom.dropdownArrowRight::before {
    border: 6px solid transparent;
    border-bottom-color: var(--wcfDropdownBackground);
    border-top-width: 0;
    content: "";
    display: inline-block;
    right: 10px;
    position: absolute;
    bottom: -6px;
    z-index: 101;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    left: auto;
    top: auto;
  }
  .dropdownMenu.dropdownOpen.dropdownArrowBottom {
    border-radius: 0px;
    margin-bottom: 8px;
  }
  .dropdownMenu.dropdownOpen.dropdownArrowBottom::before {
    border: 6px solid transparent;
    border-bottom-color: var(--wcfDropdownBackground);
    border-top-width: 0;
    content: "";
    display: inline-block;
    left: 50%;
    position: absolute;
    bottom: -6px;
    z-index: 101;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    right: auto;
    top: auto;
    margin-left: -3px;
  }
  .dropdownMenu.subscribeThreadStatusDropdown.dropdownOpen.dropdownArrowRight::before {
    left: auto;
    right: 12px;
  }
}
.dropdownMenu li.dropdownDivider {
  margin: 1px 4px;
}

.dropdownMenu li.boxFlag {
  padding-top: 2px;
}

.boxFlag > .box24, .boxFlag.box24 {
  min-height: 14px;
}

.dropdownMenu li[data-item=close], .dropdownMenu li[data-item=disable] {
  border-top-left-radius: var(--wcfBorderRadius) !important;
  border-top-right-radius: var(--wcfBorderRadius) !important;
}

.dropdownMenu li:not(:first-child) {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

@media screen and (max-width: 1024px) {
  .dropdownMenu.dropdownOpen {
    overflow: hidden;
  }
}
/* ================================================================ Woltlab Suite 6 Dropdown */
@media screen and (min-width: 1025px), print {
  .dropdownMenuContainer .userMenu {
    position: fixed;
    top: 46px !important;
    border-radius: var(--wcfBorderRadius) !important;
  }
  .dropdownMenuContainer .userMenu .userMenuHeader::before {
    content: "";
    position: absolute;
    right: 25px;
    top: -8px;
    width: 0;
    height: 0;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent var(--wcfHeaderBackground) transparent;
    border-style: solid;
  }
  .dropdownMenuContainer .userMenu .userMenuHeader {
    border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
  }
  .dropdownMenuContainer .userMenu .userMenuFooter {
    border-radius: 0px 0px var(--wcfBorderRadius) var(--wcfBorderRadius);
  }
}
.dropdownMenuContainer .userMenu .userMenuHeader {
  background-color: var(--wcfHeaderBackground);
  color: var(--wcfHeaderText);
  padding: 9px 13px 9px;
  min-height: 32px;
  height: 34px;
}

.dropdownMenuContainer .userMenu .userMenuTitle {
  font-size: 13px;
  font-weight: 400;
  margin-left: 0px;
}

.userMenuHeader .userMenuButton {
  height: 18px;
  width: 18px;
}

.userMenuHeader .userMenuButton .icon {
  color: var(--wcfHeaderText);
}

.userMenuHeader .userMenuButton fa-icon[size="24"] {
  --font-size: 12px;
  --icon-size: 20px;
}

.userMenuContentStatus {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.userMenu .userAvatarImage {
  width: 32px !important;
  height: 32px !important;
}

.userMenu .userMenuContentDivider {
  border-top: none;
  border-bottom: none;
}

.userMenu .userMenuItem {
  grid-template-columns: 45px auto;
  border-bottom: 1px solid var(--wcfUserMenuBorder);
}

.userMenu .userMenuItemImage fa-icon[size="48"] {
  --font-size: 30px;
  width: 34px;
}

.userMenu.userMenuControlPanel .userMenuItemImage fa-icon[size="16"] {
  height: 32px;
  width: 32px;
  --font-size: 18px;
}

.userMenuItem .userMenuItemMarkAsRead fa-icon[size="24"] {
  --font-size: 14px;
  --icon-size: 24px;
  color: green;
  margin-left: -10px;
}

body:not(.touch) .userMenuItem:hover {
  background-color: var(--wcfUserMenuBackgroundActive);
  transition: background-color 0.1s;
}

.userMenuItemMarkAsRead .icon {
  color: green !important;
}

.userMenu.userMenuControlPanel .icon {
  font-size: 28px;
  height: 32px;
  line-height: 32px;
  width: 32px;
  vertical-align: 3px;
  color: #282828 !important;
}

.userMenuFooter {
  border-top: none;
  background-color: #ececec;
  padding: 6px 20px 6px;
  color: #151515;
  font-size: 13px;
}

.userMenuFooter:hover {
  background-color: #f0f0f0;
  color: #7a7a7a;
}

.userMenuNotifications {
  background-color: var(--wcfStatusInfoBackground);
  border: none;
  color: var(--wcfStatusInfoText);
  margin: 10px;
  border-radius: 3px;
  line-height: 14px;
  padding: 8px;
}

.button.small.userMenuNotificationsButton {
  background-color: #fff;
  border-radius: 4px;
  color: #151515;
}

.button.small.userMenuNotificationsButton:hover {
  background-color: #fff;
  color: #151515;
  opacity: 0.8;
}

.userMenuFooterLink:hover {
  text-decoration: none;
}

.pageAction.scrolledDown + .dropdownMenuContainer > .interactiveDropdown.open {
  top: 60px !important;
}

#userPanelSearchButton::after, #pageLanguageContainer a::after {
  display: none;
}

/* ================================================================ Online Status */
@media screen and (min-width: 1025px), print {
  .messageSidebar .badgeOnline {
    font-size: 0px;
    height: 28px;
    width: 28px;
    border-radius: 100%;
    border: 3px solid var(--wcfContentContainerBackground);
    left: 51px;
    bottom: -14px;
    line-height: 18px;
  }
  .messageSidebar .badgeOnline::before {
    content: "\f007";
    font-family: "Font Awesome 7 Free";
    font-size: 12px;
    display: block;
    color: var(--wcfHeaderText);
    font-weight: 900;
    width: auto !important;
  }
}
@media screen and (max-width: 1024px) {
  .messageSidebar .badgeOnline::before {
    border: 2px solid var(--wcfContentContainerBackground);
  }
  .userProfileUser .contentHeaderIcon .badgeOnline::before {
    border: none;
    border-radius: 30px;
    height: 20px;
    width: 20px;
    top: 8px;
    left: 31px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .userProfileUser .contentHeaderIcon .badgeOnline::before {
    border: none;
    border-radius: 30px;
    height: 20px;
    width: 20px;
    top: 8px;
    left: 31px;
  }
  .messageSidebar .badgeOnline {
    font-size: 0px;
    height: 28px;
    width: 28px;
    border-radius: 100%;
    border: 3px solid var(--wcfContentContainerBackground);
    left: 51px;
    bottom: -14px;
    line-height: 18px;
  }
  .messageSidebar .badgeOnline::before {
    content: "\f007";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 12px;
    display: block;
    color: var(--wcfHeaderText);
    border: none;
    width: auto !important;
  }
}
@media screen and (max-width: 543px) {
  .userProfileUser .contentHeaderIcon .badgeOnline::before {
    border: none;
    border-radius: 30px;
    height: 20px;
    width: 20px;
    top: 8px;
    left: 31px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
  }
}
/* ================================================================ New Entry Point by Gino Zantarelli */
.messageGroupList .tabularListColumns.new .columnSubject > h3 > .messageGroupLink, .messageGroupList tr.new .columnSubject > h3 > .messageGroupLink {
  font-weight: 500;
}

.messageGroupList .tabularListColumns.new .columnSubject > h3 > .messageGroupLink::before, .messageGroupList tr.new .columnSubject > h3 > .messageGroupLink::before {
  content: "\f111";
  font-family: "Font Awesome 7 Free";
  position: relative;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: #5f9f23;
  margin-right: 4px;
  vertical-align: 3px;
  -webkit-animation: flash linear 3s infinite;
  animation: flash linear 3s infinite;
}

.filebaseFileList .filebaseFileCard.new .filebaseFileCardHeader .filebaseFileCardTitle a::before {
  content: "\f111";
  font-family: "Font Awesome 7 Free";
  position: relative;
  margin-right: 5px;
  vertical-align: 3px;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: #5f9f23;
  -webkit-animation: flash linear 3s infinite;
  animation: flash linear 3s infinite;
}

/* ================================================================ Woltlab Suite 6 Pop up User Profile Modded by Gino Zantarelli */
.popoverContent > .userProfilePreview {
  display: block;
}

.popoverContent > .userProfilePreview .userProfilePreviewAvatar {
  margin-right: 0px;
  margin-bottom: 15px;
}

.popoverContent > .userProfilePreview .userProfilePreviewAvatar .userAvatarImage {
  width: 80px;
  height: 80px;
  margin-top: 10px;
  margin-left: 10px;
}

.popover .popoverContent .userProfilePreview dl.inlineDataList dt:first-child::before {
  content: "";
  border-top: 1px solid var(--wcfContentText);
  width: 100%;
  position: absolute;
  margin-top: -4px;
}

.popover .popoverContent .userProfilePreview .specialTrophyUserContainer > ul {
  margin-top: 5px;
  margin-bottom: 0px;
  border-top: 1px solid var(--wcfContentText);
  padding-top: 5px;
}

.popover .popoverContent .userProfilePreview dl.inlineDataList {
  margin-top: 3px;
  font-weight: 400;
}

.coverphotopopup {
  background: no-repeat center;
  background-size: cover;
  border-radius: var(--wcfBorderRadius);
  position: absolute;
  width: 100%;
  height: 100px;
}

.popoverContent > .userProfilePreview .userInformation .containerHeadline > h3 a {
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--wcfBorderRadius);
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.5px;
}

.popoverContent > .userProfilePreview .userInformation .containerHeadline {
  position: absolute;
  top: 45px;
  left: 102px;
}

.popoverContent > .userProfilePreview .userInformation .containerHeadline > h3 > .badge {
  position: absolute;
  left: 0px;
  top: -25px;
  font-size: 11px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.popoverContent > .userProfilePreview .userProfilePreviewAvatar .badge.green.badgeOnline {
  font-size: 0px;
  height: 7px;
  width: 20px;
  border-radius: 4px;
  top: 14px;
  left: 66px;
}

.dialog__document .containerList.jsGroupedUserList > li .userAvatarImage {
  width: 48px;
  height: 48px;
}

.popoverContent .buttonList.iconList a {
  color: var(--wcfContentText);
}

.popoverContent .buttonList.iconList li:hover {
  opacity: 0.7;
}

/* ================================================================ Woltlab Suite 6 User Profile Modded by Gino Zantarelli */
.userProfileUserWithCoverPhoto .userProfileCoverPhoto {
  border-radius: var(--wcfBorderRadius);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin: -1px;
}

.userProfileUserWithCoverPhoto.contentHeader dl.inlineDataList > dt a {
  border-bottom: 1px dotted;
}

.userProfileUserWithCoverPhoto .userProfileCoverPhoto::after {
  background-image: none;
  border-bottom-left-radius: var(--wcfBorderRadius);
  border-bottom-right-radius: var(--wcfBorderRadius);
}

.userProfileUserWithCoverPhoto .contentHeaderIcon .badgeOnline::before {
  display: none;
}

.contentHeader.userProfileUserWithCoverPhoto .contentHeaderNavigation > ul a.button {
  background-color: #fff;
  padding: 9px 8px;
  color: #222;
  font-size: 0px;
}

.contentHeader.userProfileUserWithCoverPhoto .contentHeaderNavigation > ul a.button:hover {
  opacity: 1;
}

html[data-color-scheme=dark] .userProfileUserWithCoverPhoto .userAvatarImage {
  background-color: rgba(255, 255, 255, 0.3);
}

.userProfileUserWithCoverPhoto .userProfileCoverPhoto .userProfileManageCoverPhoto a.button.small {
  background-color: #fff;
  color: #222;
  font-size: 0px;
  padding: 5px 3px;
}

.userProfileUserWithCoverPhoto .userProfileCoverPhoto .userProfileManageCoverPhoto {
  right: auto;
  top: 6px;
  left: 6px;
}

.userProfileUserWithCoverPhoto .userProfileUsername + .badge {
  margin-left: 0px;
  position: absolute;
  left: 0px;
  top: -32px;
}

.userProfileUserWithCoverPhoto .contentHeaderNavigation {
  padding-top: 0px;
  position: absolute;
  top: 0px;
  right: 10px;
}

.userProfileHeader__onlineIndicator {
  bottom: auto;
  margin-left: 48px;
  font-size: 0px;
  height: 10px;
  width: 26px;
  border-radius: 8px;
}

.userProfileUserWithCoverPhoto .contentHeaderDescription {
  color: var(--wcfContentText);
}

@media screen and (min-width: 1025px), print {
  .userProfileUserWithCoverPhoto .userProfileCoverPhoto .userProfileManageCoverPhoto {
    opacity: 0.3;
    transition: all 0.2s;
  }
  .userProfileUserWithCoverPhoto .userProfileCoverPhoto .userProfileManageCoverPhoto:hover {
    opacity: 1;
  }
  .userProfileUserWithCoverPhoto {
    background-color: var(--wcfContentContainerBackground);
    border: 1px solid var(--wcfContentContainerBorder);
    border-radius: var(--wcfBorderRadius);
    margin-bottom: 20px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderIcon {
    margin-top: -138px;
    padding-left: 34px;
    flex: 0 0 180px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderTitle {
    margin-top: -80px;
    position: relative;
  }
  .contentHeader.userProfileUserWithCoverPhoto .contentHeaderNavigation > ul a.button {
    opacity: 0.6;
  }
  .contentHeader.userProfileUserWithCoverPhoto .contentHeaderNavigation > ul a.button:hover {
    opacity: 1;
  }
  .userProfileHeader__avatarBorder {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: var(--wcfBorderRadiusContainer);
    padding: 8px;
    width: 144px !important;
    height: 144px !important;
    flex: 0 0 170px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
  }
  .userProfileUserWithCoverPhoto .contentHeaderDescription {
    margin-top: 80px !important;
    margin-left: -200px;
    padding: 0px 20px 20px;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername {
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    padding: 5px 12px 6px;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -1px;
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.7);
    display: inline-block;
    border-radius: 4px;
  }
  .userProfileUserWithCoverPhoto .userRankImage {
    position: absolute;
    margin-top: 5px;
    display: block;
  }
  .userProfileUserWithCoverPhoto .contentHeaderTitle .inlineDataList {
    margin-top: 10px;
    border-top: 1px solid var(--wcfContentBorderInner);
    padding-top: 10px;
  }
}
@media screen and (max-width: 1024px) {
  .userProfileUserWithCoverPhoto {
    background-color: var(--wcfContentContainerBackground);
    border: 1px solid var(--wcfContentContainerBorder);
    border-radius: var(--wcfBorderRadius);
    margin-bottom: 20px;
  }
  .userProfileUser .contentHeaderNavigation .userProfileButtonContainer {
    margin-top: 0px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderTitle {
    position: relative;
  }
  .userProfileUserWithCoverPhoto .userAvatarImage {
    background-color: #ffffff;
    border-radius: var(--wcfBorderRadiusContainer);
    padding: 6px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
  }
  .userProfileUserWithCoverPhoto .userProfileUsername + .badge {
    top: -26px;
  }
  .userProfileUser .contentHeaderTitle {
    flex-basis: calc(100% - 121px);
    max-width: calc(100% - 121px);
  }
  .userProfileUserWithCoverPhoto .contentHeaderIcon {
    padding-left: 10px;
    flex: 0 0 106px;
    margin-top: -20px;
  }
  .contentHeader.userProfileUserWithCoverPhoto .contentHeaderNavigation > ul a.button {
    font-size: 12px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderDescription {
    padding: 0px 20px 20px 0px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderTitle .inlineDataList {
    margin-top: 10px;
    border-top: 1px solid var(--wcfContentBorderInner);
    padding-top: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .userProfileUserWithCoverPhoto {
    background-color: var(--wcfContentContainerBackground);
    border: 1px solid var(--wcfContentContainerBorder);
    border-radius: var(--wcfBorderRadius);
    margin-bottom: 20px;
  }
  .userProfileUserWithCoverPhoto {
    padding-top: 80px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderTitle {
    margin-top: 10px;
    position: relative;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    padding: 5px 12px 6px;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -1px;
    display: inline-block;
    border-radius: 4px;
  }
  .userProfileUserWithCoverPhoto {
    padding-top: 80px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderIcon {
    margin-top: -42px !important;
    padding-left: 16px !important;
    flex: 0 0 138px !important;
  }
  .userProfileUserWithCoverPhoto .userAvatarImage {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--wcfBorderRadiusContainer) !important;
    padding: 6px !important;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
  }
  .userProfileUserWithCoverPhoto .userRankImage {
    position: absolute;
    margin-top: 5px;
    display: block;
  }
  .userProfileUserWithCoverPhoto .contentHeaderDescription {
    margin-top: 75px !important;
    margin-left: -155px;
    padding: 0px 20px 20px;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername + .badge {
    top: -32px !important;
  }
  .userProfileUserWithCoverPhoto .contentHeaderIcon .badgeOnline::before {
    display: none;
  }
  .userProfileUserWithCoverPhoto .contentHeaderIcon .badgeOnline {
    bottom: auto;
    top: 14px;
    left: auto !important;
    margin-left: 94px;
    font-size: 0px;
    height: 8px;
    width: 20px;
    border-radius: 8px;
  }
}
@media screen and (max-width: 543px) {
  .userProfileUserWithCoverPhoto {
    background-color: var(--wcfContentContainerBackground);
    border: 1px solid var(--wcfContentContainerBorder);
    border-radius: var(--wcfBorderRadius);
    margin-bottom: 20px;
  }
  .userProfileUserWithCoverPhoto .userProfileCoverPhoto {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderIcon {
    padding-left: 0px;
    flex: 0 0 100%;
    margin-top: -38px;
    margin-right: 0px;
    text-align: center;
  }
  .userProfileUser .contentHeaderIcon img {
    width: 140px !important;
    height: 140px !important;
  }
  .userProfileUserWithCoverPhoto .userAvatarImage {
    padding: 8px;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    font-weight: 500;
  }
  .contentHeader.userProfileUserWithCoverPhoto .contentHeaderNavigation > ul a.button {
    font-size: 12px;
  }
  .userProfileUser .contentHeaderTitle {
    flex-basis: calc(100% - 0px);
    max-width: calc(100% - 0px);
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername + .badge {
    position: relative;
    margin-top: -50px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderIcon .badgeOnline::before {
    display: none;
  }
  .userProfileUserWithCoverPhoto .contentHeaderIcon .badgeOnline {
    top: 16px;
    left: 50% !important;
    margin-left: 28px;
    padding: 2px 6px;
    width: 26px;
    height: 12px;
    color: #fff;
  }
  .userProfileUserWithCoverPhoto .contentHeaderDescription {
    margin-left: 0px;
    padding: 0px 10px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderDescription .inlineList {
    display: block;
    text-align: center;
  }
  .userProfileUserWithCoverPhoto .contentHeaderDescription .specialTrophyUserContainer > ul {
    align-items: center;
    display: inline-flex;
    margin-right: 0px;
    margin-top: -15px;
  }
  .userProfileUserWithCoverPhoto .contentHeaderTitle .inlineDataList {
    margin-top: 10px;
    border-top: 1px solid var(--wcfContentBorderInner);
    padding-top: 10px;
  }
  .userProfileUserWithCoverPhoto .userProfileUsername {
    color: var(--wcfContentHeadlineText);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }
  html[data-color-scheme=dark] .userProfileUserWithCoverPhoto .userProfileUsername {
    color: #ffffff;
  }
}
/* ================================================================ Boxes Top & Bottom */
.boxesTop {
  border-bottom: none;
}

.boxesBottom {
  border-top: none;
}

@media screen and (min-width: 1025px), print {
  .boxesTop .box, .boxesBottom .box {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 30px 0px;
  }
}
@media screen and (max-width: 1024px) {
  .boxesTop .box, .boxesBottom .box {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0px 20px;
  }
}
.boxesTop .box.layoutBoundary .boxContent.htmlContent, .boxesTop .box.layoutBoundary .boxContent.ck.ck-content.ck-editor__editable, .boxesTop .box.layoutBoundary .messageBody > .boxContent.messageText, .boxesTop .box.layoutBoundary .messageSignature > div.boxContent, .boxesBottom .box.layoutBoundary .boxContent.htmlContent, .boxesBottom .box.layoutBoundary .boxContent.ck.ck-content.ck-editor__editable, .boxesBottom .box.layoutBoundary .messageBody > .boxContent.messageText, .boxesBottom .box.layoutBoundary .messageSignature > div.boxContent {
  background-color: var(--wcfContentContainerBackground);
  border: none;
  border-radius: var(--wcfBorderRadius);
  padding: 14px;
}

.boxesTop .boxContainer .box.layoutBoundary .boxTitle, .boxesBottom .boxContainer .box.layoutBoundary .boxTitle {
  border-bottom: 1px solid;
  font-size: 16px;
  font-weight: 400;
  display: block;
}

.boxesContentTop .boxContent.htmlContent, .boxesContentTop .boxContent.ck.ck-content.ck-editor__editable, .boxesContentTop .messageBody > .boxContent.messageText, .boxesContentTop .messageSignature > div.boxContent, .boxesContentBottom .boxContent.htmlContent, .boxesContentBottom .boxContent.ck.ck-content.ck-editor__editable, .boxesContentBottom .messageBody > .boxContent.messageText, .boxesContentBottom .messageSignature > div.boxContent {
  background-color: var(--wcfContentContainerBackground);
  border: none;
  border-radius: var(--wcfBorderRadius);
  padding: 14px;
}

/* ================================================================ Content */
.pageNavigation .layoutBoundary {
  padding: 0px;
  position: relative;
  justify-content: flex-end;
  min-height: 28px;
}

@media screen and (max-width: 1024px) {
  .pageNavigation > div #dateandtime {
    display: none;
  }
  .pageNavigation {
    padding: 0px;
  }
  .pageNavigation .layoutBoundary {
    min-height: 0px;
  }
}
.content > .section, .content > form, .sectionContainer, .boxesContentTop .box, .boxesContentBottom .box {
  background-color: transparent;
  border: none;
  border-radius: 0px;
  padding: 0px;
}

.main {
  padding: 0px;
}

.main > div {
  padding: 30px 0px;
}

@media screen and (min-width: 1025px), print {
  #pageHeaderFacade {
    background-image: url(../images/style-2/headerBG.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 250px;
    position: relative;
  }
  .pageHeaderContainer {
    background-color: var(--wcfContentContainerBackground);
  }
}
.boxesFooterBoxes .box {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 14px;
  position: relative;
}

.boxesFooterBoxes .box:not(.box.boxFullWidth) {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 14px;
  position: relative;
  max-width: 100%;
}

.boxesFooterBoxes .layoutBoundary {
  padding: 0px;
  position: relative;
}

.boxesFooterBoxes .layoutBoundary::before {
  content: "";
  height: 4px;
  background-color: var(--wcfContentText);
  border-radius: var(--wcfBorderRadius);
  opacity: 0.25;
  display: inline-block;
  position: absolute;
  left: 0px;
  right: 0px;
}

.boxesFooterBoxes .boxContainer {
  margin-bottom: 0px;
  padding: 30px 0px;
  row-gap: 20px;
}

.boxesFooter .layoutBoundary {
  padding: 0px;
}

/* ================================================================ Titles */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  letter-spacing: -0.5px;
}

.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 {
  font-weight: 500;
}

.boxesContentTop .boxTitle:not(.boxesContentTop .boxInfo .boxTitle), .boxesContentBottom .boxTitle:not(.boxesContentBottom .boxInfo .boxTitle), .section .sectionTitle {
  border-bottom: 1px solid;
  font-weight: 600;
}

.containerHeadline > h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.wbbBoardNode__lastPostTitle {
  letter-spacing: -0.5px;
}

.messageGroupList .columnSubject > h3 > .messageGroupLink {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.messageReduced .messageTitle, .messageReduced .messageTitle a {
  color: var(--wcfContentLink) !important;
  font-size: 16px;
  letter-spacing: -0.5px;
}

.boxesFooterBoxes .box .boxTitle + .boxContent {
  margin-top: 10px;
  font-size: 13px;
}

.boxesFooterBoxes .boxTitle {
  border-bottom: 1px solid;
  font-size: 16px;
}

.boxesFooterBoxes .box .boxTitle + .boxContent a {
  font-weight: 600;
}

.wbbBoardList .wbbDepth2.wbbCategory > header h2 {
  font-size: 16px;
}

.section:not(.sectionContainerList) > .sectionHeader, .section:not(.sectionContainerList) > .sectionTitle {
  border-bottom: 1px solid var(--wcfContentText);
  padding-bottom: 3px;
  font-size: 16px;
}

.wbbBoardListReduced .wbbDepth2.wbbCategory > header h2 {
  font-size: 13px;
}

.wbbBoardListReduced .tabularBoxTitle > header > h1, .wbbBoardListReduced .tabularBoxTitle > header > h2, .wbbBoardListReduced .tabularBoxTitle > header > h3 {
  font-size: 14px;
}

.notificationSettingsCategory {
  color: var(--wcfContentHeadlineText);
}

.notificationSettingsItem:not(:last-child) {
  border-color: var(--wcfContentHeadlineText);
}

.notificationSettingsItem {
  padding: 5px;
}

.boxesFooter a {
  font-size: 12px;
  transition: all 0.2s;
}

.messageReduced .messageHeaderMetaData .messagePublicationTime, .messageReduced .messageHeaderMetaData > li:not(:last-child)::after {
  color: #444444;
}

.messageSidebar .username {
  font-weight: 500;
  letter-spacing: -0.5px;
}

.messageFooterNote.wbbPostEditNote a, .blogEntryEditNote.messageFooterNote a {
  font-weight: 500;
  color: #c60c0c;
}

.filebaseReviewResponse .containerHeadline {
  letter-spacing: -0.5px;
  font-size: 15px;
}

.section .sectionDescription {
  color: #222222;
  font-size: 12px;
  margin-top: 10px;
}

.filebaseFileSubject {
  font-size: 18px !important;
}

.inlineList.dotSeparated.filebaseFileMetaData {
  font-size: 12px;
}

#tpl_wcf_membersList .containerHeadline > h3 a.userLink.username, #tpl_wcf_team .containerHeadline > h3 a.userLink.username, .popoverContent .containerHeadline > h3 a.userLink.username {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 {
  font-weight: 800;
}

#tpl_wcf_usersOnlineList .details.userInformation p a, #tpl_wcf_usersOnlineList .details.userInformation a.wbbTopicLink {
  font-style: italic;
  font-weight: 600;
  text-decoration: underline dotted !important;
}

.wbbBoardNodeContainer__title {
  font-size: 18px;
  font-weight: 400;
}

.wbbBoardNode__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.box.wbbSimilarThreadList.boxFullWidth .containerBoxList.tripleColumned > li .containerBoxContent h3 a {
  font-size: 15px;
}

.wbbBoardNode.wbbBoardNode--depth2.wbbBoardNode--category .wbbBoardNode__title {
  font-size: 15px;
}

.blogEntryNavigation .blogPreviousEntryButton .blogEntryNavigationLink .blogEntryNavigationEntryTitle, .blogEntryNavigation .blogNextEntryButton .blogEntryNavigationLink .blogEntryNavigationEntryTitle {
  font-weight: 500;
  letter-spacing: -0.5px;
}

.articleNavigationArticleTitle {
  font-weight: 500;
  letter-spacing: -0.5px;
}

#tpl_wcf_accountManagement .section .sectionTitle, #tpl_wcf_avatarEdit .section .sectionTitle, #tpl_wcf_signatureEdit .section .sectionTitle, #tpl_wcf_settings .section .sectionTitle, #tpl_wcf_notificationSettings .section .sectionTitle, #tpl_wcf_notificationList .section .sectionTitle, #tpl_wcf_ignoredUsers .section .sectionTitle, .notificationSettingsCategory {
  background-color: #ebebeb;
  border-bottom: none;
  border-radius: var(--wcfBorderRadius);
  padding: 6px 14px;
  font-size: 16px;
  color: var(--wcfContentLink);
}

.main > div .userProfileContent.section .sectionTitle {
  background-color: #ebebeb;
  border-bottom: none;
  border-radius: var(--wcfBorderRadius);
  padding: 6px 14px;
  font-size: 16px;
  color: var(--wcfContentLink);
}

#section_activeSessions > .sectionHeader, #section_multifactor > .sectionHeader {
  border-bottom: none;
}

#section_activeSessions > .sectionHeader .sectionDescription, #section_multifactor > .sectionHeader .sectionDescription {
  background-color: var(--wcfStatusInfoBackground);
  border-radius: var(--wcfBorderRadius);
  margin-top: 10px;
  padding: 4px 9px;
  font-size: 12px;
  color: var(--wcfStatusInfoText);
}

.boxesFooterBoxes .box .boxTitle + .boxContent a {
  font-weight: 500;
}

.boxesContentTop .box .section:not(.sectionContainerList) > .sectionHeader, .boxesContentBottom .box .section:not(.sectionContainerList) > .sectionHeader {
  border: none;
  padding: 0px;
}

.content > form .section .sectionTitle {
  border: none;
}

/* ================================================================ Top Userpanel */
@media screen and (min-width: 1025px), print {
  .userPanel {
    position: absolute;
    top: 15px;
    right: 0px;
    border-bottom: 1px solid #b4b4b4;
    padding-bottom: 5px;
    transition: all 0.2s linear;
  }
  .pageHeaderPanel > .layoutBoundary {
    position: relative;
    padding: 0px;
  }
  .userPanel > ul > li:first-child > a {
    border-left: none;
    padding-left: 2px;
  }
  .userPanel.userPanelLoggedIn #userMenu img {
    display: none;
  }
  .userPanel .boxFlag.box24 > img:first-child {
    height: auto;
    width: 19px;
    margin-right: 5px;
  }
  .userPanel #userMenu a::before {
    content: "\f2bd";
    font-size: 12px;
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    width: 16px;
    text-align: center;
    margin-right: 5px;
  }
  .userPanel > ul > li > a {
    background: transparent !important;
    height: 14px;
    padding: 0 8px;
    border-left: 1px solid;
    text-transform: uppercase;
    font-size: 10px;
  }
  #tpl_wcf_login .userPanel a.registrationLink {
    border-left: none;
  }
  .userPanel > ul > li > a > span:not(.icon):not(.badge):not(.iconWrapper) {
    display: inline-block;
    text-transform: uppercase;
    font-size: 10px;
  }
  .userPanel > ul > li > a fa-icon {
    --font-size: 12px;
    width: 16px;
    padding-right: 5px;
  }
  .pageHeaderFacade > .layoutBoundary {
    margin-top: 30px;
    padding: 15px 5px;
  }
}
/* ================================================================ Sticky Userpanel by Gino Zantarelli */
@media screen and (min-width: 1025px), print {
  .pageHeaderPanel {
    height: 110px;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s linear;
    z-index: 302;
  }
  .pageHeaderPanel.sticky {
    height: 80px;
    transition: all 0.2s linear;
  }
  .pageHeaderPanel.sticky .userPanel {
    top: 10px;
    padding-bottom: 5px;
  }
  .pageHeaderPanel.sticky .mainMenu {
    margin-top: 46px;
    margin-right: 0px;
    margin-left: 300px;
    justify-content: flex-end;
    display: grid;
  }
  .pageHeaderPanel.sticky .mainMenu .boxMenu > li > a {
    font-size: 14px;
    height: 22px;
  }
  .pageHeaderLogo.sticky .pageHeaderLogoLarge {
    display: block;
    position: fixed;
    top: 20px;
    z-index: 400;
    max-height: 40px;
    max-width: 260px;
    width: auto !important;
    overflow: hidden;
  }
}
/* ================================================================ Pop up Search by Gino Zantarelli */
.open #userPanelSearchButton::before {
  content: "\f00d";
  top: 205px !important;
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  position: fixed;
  display: block;
  width: 30px;
  height: 30px;
  left: 50% !important;
  text-align: center;
  line-height: 34px;
  background-color: transparent !important;
  color: var(--wcfContentLink);
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  animation-duration: 500ms;
  margin-left: 264px;
  font-size: 18px;
}

.open #userPanelSearchButton:hover::before {
  opacity: 0.6;
  transition: all 0.1s;
}

@media screen and (min-width: 1025px), print {
  .pageHeaderPanel > .layoutBoundary #userPanelSearchButton span:not(.icon):not(.badge) {
    font-size: 0px;
  }
  .pageHeaderPanel > .layoutBoundary .jsOnly.open #userPanelSearchButton span:not(.icon):not(.badge) {
    font-size: 0px;
  }
  .pageHeader .jsOnly::before {
    content: "\f002";
    height: 36px;
    line-height: 36px;
    width: 36px;
    font-family: "Font Awesome 7 Free";
    font-weight: 600 !important;
    font-style: normal !important;
    text-align: center;
    z-index: -1;
    color: var(--wcfHeaderMenuLink) !important;
    font-size: 28px;
    background-color: var(--wcfHeaderMenuLinkBackground);
    cursor: pointer;
    display: none;
  }
  .pageHeader .jsOnly.open::before {
    position: relative;
    z-index: 1;
    display: block;
    background-color: transparent;
    color: #ffffff !important;
    font-size: 28px;
    width: 50px;
    height: 32px;
    line-height: 32px;
    border-left: 1px solid #151515;
    padding: 0px 5px;
  }
  .pageHeaderPanel > .layoutBoundary .jsOnly.open #userPanelSearchButton {
    position: fixed;
    left: 50%;
    z-index: 1;
    top: 220px;
    margin-left: 260px;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    animation-duration: 500ms;
    height: 0px;
    line-height: 0px;
    transition: all 0s;
  }
  .searchBarOpen .pageHeaderSearch {
    top: 200px !important;
    z-index: 301;
    position: fixed;
    display: block;
    width: 600px;
    border-radius: 6px;
    height: 160px;
    left: 50% !important;
    margin-left: -300px;
    padding: 60px 50px 100px;
    background-color: var(--wcfContentContainerBackground);
    border-radius: var(--wcfBorderRadiusContainer);
    box-shadow: var(--wcfBoxShadow);
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    animation-duration: 500ms;
  }
  .searchBarOpen .pageHeaderSearch::before {
    content: "";
    display: inline-block;
    width: 600px;
    height: 160px;
    position: absolute;
    z-index: -1;
    margin-left: -50px;
    margin-top: -60px;
    color: #222;
    border-radius: var(--wcfBorderRadiusContainer);
  }
  .pageHeader .jsOnly.open .fa-search:hover::before {
    opacity: 0.7;
  }
  .pageHeaderSearchInputContainer .pageHeaderSearchType > .button {
    background-color: #171717;
    border-radius: 3px 0px 0px 3px;
    color: #fff !important;
    font-size: 11px;
    box-shadow: none !important;
    transition: background-color 0.1s linear;
    font-family: "Arial", Helvetica, sans-serif !important;
    transform: scale(1, 100%);
  }
  .pageHeaderSearchInputContainer .pageHeaderSearchType > .button:hover, .pageHeaderSearchInputContainer .pageHeaderSearchType.dropdownOpen > .button {
    background-color: #363636;
  }
  .pageHeaderSearchInputContainer .pageHeaderSearchType + .pageHeaderSearchInput {
    border-radius: 0px;
    margin-left: 1px;
  }
  .pageHeaderSearchInputContainer .pageHeaderSearchInput {
    height: 36px;
    width: 310px;
    padding-left: 10px;
    box-shadow: none;
    margin-left: 75px;
    border-radius: 3px 0px 0px 3px;
    transition: background-color 0.1s linear;
    font-family: "Arial", Helvetica, sans-serif !important;
    font-size: 12px;
  }
  .pageHeaderSearchInputContainer .pageHeaderSearchInputButton.pageHeaderSearchInputButton {
    background-color: #171717;
    border-radius: 0px 3px 3px 0px;
    color: #fff !important;
    padding: 4px 4px;
    height: 36px;
    width: 42px;
    margin-left: 2px;
    transition: background-color 0.1s linear;
    font-family: "Arial", Helvetica, sans-serif !important;
    transform: scale(1, 100%);
  }
  .pageHeaderSearchInputContainer .pageHeaderSearchInputButton.pageHeaderSearchInputButton:hover {
    background-color: #363636;
  }
}
/* ================================================================ DialogContainer & Dialog */
.dialogContainer, .dialog__document {
  border-radius: var(--wcfBorderRadiusContainer);
  box-shadow: var(--wcfBoxShadow);
  color: var(--wcfContentText);
}

.dialogContainer > header, .dialog__header {
  background-color: var(--wcfHeaderBackground);
  border-radius: var(--wcfBorderRadiusContainer) var(--wcfBorderRadiusContainer) 0px 0px;
  padding: 11px 14px 7px 14px;
  color: var(--wcfHeaderText);
}

.dialogContainer > header > span, .dialog__title {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.5px;
}

.dialogContainer > header > .dialogCloseButton, .dialog__closeButton {
  margin-right: -5px;
}

.dialogContainer > .dialogContent:not(.dialogContentNoPadding) {
  padding: 14px;
}

.dialogContainer > .dialogContent:not(.dialogContentNoPadding)::after {
  height: 0px;
}

.dialogContainer > .dialogContent .dialogFormSubmit {
  border-radius: 0 0 var(--wcfBorderRadiusContainer) var(--wcfBorderRadiusContainer);
  margin-top: 0px;
  padding: 0px 14px 14px;
}

.dialogContainer > .dialogContent .dialogFormSubmit::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -14px;
  border-top: 1px solid var(--wcfContentBorder);
}

.dialogContainer > header > .dialogCloseButton fa-icon {
  --font-size: 18px;
  --icon-size: 20px;
}

.dialog {
  --dialog-padding: 0px;
}

.dialog__content {
  padding: 14px;
}

.dialog__control {
  border-radius: 0 0 var(--wcfBorderRadiusContainer) var(--wcfBorderRadiusContainer);
  margin-top: 0px;
  padding: 14px;
  position: relative;
}

.dialog__control::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  border-top: 1px solid var(--wcfContentBorder);
}

.dialog[role=alert] .dialog__header {
  display: none;
}

.dialog[role=alert] .dialog__document .dialog__form .dialog__content {
  text-align: center;
  color: var(--wcfContentText);
}

.dialog[role=alert] .dialog__document .dialog__form .dialog__content::before {
  content: "\f071";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 54px;
}

.dialogContainer > .dialogContent .containerList.doubleColumned {
  display: block;
}

/* ================================================================ DialogContainer Style Changer */
.dialogContainer > .dialogContent #styleChanger .containerList.doubleColumned {
  display: block;
}

.dialogContainer > .dialogContent #styleChanger .containerList.doubleColumned > li {
  flex: 0 0 100%;
  max-width: 100%;
}

.containerList.styleList.doubleColumned > li + li {
  margin-top: 0px;
}

.containerList.styleList > li:first-child {
  border-top: none;
}

.dialogContainer > .dialogContent .containerList.styleList > li:last-child {
  margin-bottom: 0px;
}

.containerList.styleList > li {
  border-bottom: 1px solid var(--wcfContentBorderInner) !important;
  margin-bottom: 0px;
  border-radius: 0px;
}

.containerList.styleList > li:hover {
  background-color: #f5f5f5;
  transition: background-color 0.2s;
}

.dialogContainer > .dialogContent .containerList.styleList > li:last-child {
  border: none !important;
}

.containerList.styleList > li img {
  border-radius: var(--wcfBorderRadius);
}

.containerList.styleList > li fa-icon {
  color: #2f990e;
}

.styleListPreviewImage {
  text-align: left;
}

.containerList.styleList .box128 > :first-child:not(:last-child) {
  flex: 0 0 112px;
  margin-right: 0px;
}

.dialogContainer[data-id=styleChanger] > header > span::before {
  content: "\f03e";
  font-family: "Font Awesome 7 Free";
  font-size: 18px;
  font-weight: 500;
  padding-right: 10px;
  vertical-align: -1px;
}

/* ================================================================ Logo */
@media screen and (min-width: 1025px), print {
  .pageHeaderLogo .pageHeaderLogoLarge {
    display: block;
    position: fixed;
    top: 42px;
    z-index: 400;
    max-height: 60px;
    max-width: 260px;
    overflow: hidden;
    transition: all 0.2s linear;
    -webkit-animation: fadein 2s;
    animation: fadein 2s;
  }
  .pageHeaderLogo .pageHeaderLogoLarge:hover {
    opacity: 0.6;
    -webkit-transition: 200ms linear 0s;
    transition: 200ms linear 0s;
  }
}
/* ================================================================ Main Menu */
@media screen and (min-width: 1025px), print {
  .mainMenu {
    margin-top: 60px;
    margin-left: 300px;
    margin-right: 0px;
    justify-content: flex-end;
    display: grid;
    transition: all 0.2s linear;
  }
  .mainMenu .boxMenu > li:not(:last-child) {
    margin-right: 15px;
  }
  .mainMenu .boxMenu > li > a {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.5px;
    transition: all 0.2s linear;
    height: 30px;
    padding: 0 2px;
    border-bottom: 2px solid transparent;
  }
  .mainMenu .boxMenu > li:last-child > a {
    padding-right: 2px;
  }
  .mainMenu .boxMenu > li.active > a, .mainMenu .boxMenu > li:hover > a {
    border-bottom: 2px solid;
  }
  .mainMenu .mainMenuShowPrevious fa-icon, .mainMenu .mainMenuShowNext fa-icon {
    color: var(--wcfHeaderMenuLink);
  }
}
/* ================================================================ Main Menu Small */
.mainMenu .boxMenu .boxMenuDepth1 {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 30px 0 0;
  border-radius: 0px;
  font-size: 12px;
}

.pageHeaderPanel.sticky .mainMenu .boxMenu .boxMenuDepth1 {
  padding: 16px 0 0;
}

.mainMenu .boxMenu .boxMenuDepth1 li {
  background-color: var(--wcfHeaderMenuDropdownBackground);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
}

.mainMenu .boxMenu .boxMenuDepth2 li > a::before {
  content: "-";
  padding-right: 4px;
}

.mainMenu .boxMenu .boxMenuDepth2 li > a {
  padding: 5px 20px 5px 30px;
}

.mainMenu .boxMenu .boxMenuDepth1 > li:hover > a::before {
  content: "\f105";
  font-family: "Font Awesome 7 Free";
  font-weight: 600 !important;
  font-size: 9px;
  width: 10px;
  margin-left: -10px;
  position: absolute;
  margin-top: 3px;
}

.mainMenu .boxMenu .boxMenuDepth1::before {
  content: "";
  position: absolute;
  left: 25%;
  margin-top: -6px;
  width: 0;
  height: 0;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent var(--wcfHeaderMenuDropdownBackground) transparent;
  border-style: solid;
  margin-left: -10px;
}

.mainMenu .boxMenu .boxMenuDepth1 li:first-child:last-child {
  border-radius: var(--wcfBorderRadius);
  overflow: hidden;
}

.mainMenu .boxMenu .boxMenuDepth1 li:first-child {
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
  overflow: hidden;
}

.mainMenu .boxMenu .boxMenuDepth1 li:last-child {
  border-radius: 0px 0px var(--wcfBorderRadius) var(--wcfBorderRadius);
  overflow: hidden;
}

.mainMenu .boxMenu .boxMenuDepth2 li {
  box-shadow: none;
}

.mainMenu .boxMenu .boxMenuDepth1 > li > a:hover, .mainMenu .boxMenu .boxMenuDepth2 > li > a:hover {
  background-color: #f6f6f6;
  color: #151515;
}

.mainMenu .boxMenu .boxMenuDepth1 > li.active > a::before, .mainMenu .boxMenu .boxMenuDepth2 > li.active > a::before {
  content: "\f105";
  font-family: "Font Awesome 7 Free";
  font-weight: 600 !important;
  font-size: 12px;
  width: 10px;
  margin-left: -10px;
  position: absolute;
  margin-top: 1px;
}

/* ================================================================ Show Hide Sidebar */
.showhidesidebar {
  list-style: none;
  margin-left: 0px;
}

.showhidesidebar li {
  margin-left: 5px;
}

.showhidesidebar a {
  background-color: #ffffff;
  border: none;
  color: #151515;
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: var(--wcfBorderRadius);
}

.showhidesidebar a:hover {
  background-color: rgba(255, 255, 255, 0.85);
  color: #333333;
}

.showhidesidebar .icon {
  font-size: 14px;
  height: 16px;
  line-height: 16px;
  width: 16px;
}

@media screen and (min-width: 1025px), print {
  .content.content--sidebar-right {
    transition-duration: 0.2s;
  }
  .sidebar.boxesSidebarRight {
    transition-duration: 0.2s;
  }
  .sidebar.boxesSidebarRight.sidebarRightCollapsed {
    margin: 0px;
    flex: 0px;
  }
  .sidebar.boxesSidebarRight .boxContainer {
    width: 310px;
    position: relative;
  }
  .sidebar.boxesSidebarRight.sidebarRightCollapsed .boxContainer {
    margin-right: -310px;
  }
  .layoutBoundary > .content.sidebarRightCollapsed:not(:last-child) {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  .showhidesidebar {
    display: none;
  }
}
/* ================================================================ Date & Time by Gino Zantarelli */
.pageNavigation > div #dateandtime {
  position: absolute;
  display: flex;
  left: 0px;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.pageNavigation > div #dateandtime::before {
  content: "\f073";
  display: inline-block;
  font-family: "Font Awesome 7 Free";
  font-weight: 600 !important;
  font-style: normal !important;
  text-align: center;
  margin-top: 2px;
  padding-right: 5px;
  font-size: 9px;
}

.pageNavigation > div #clock {
  margin-left: 3px;
}

.pageNavigation > div #clock::before {
  content: "\f017";
  display: inline-block;
  font-family: "Font Awesome 7 Free";
  font-weight: 100 !important;
  font-style: normal !important;
  text-align: center;
  margin-left: 2px;
  padding-right: 5px;
  vertical-align: 1px;
  font-size: 10px;
}

@media screen and (max-width: 1024px) {
  .pageNavigation > div #dateandtime {
    display: none;
  }
}
/* ======================================================= Footer & Copyright */
.pageFooterCopyright {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  font-size: 11px;
}

.pageFooterCopyright .layoutBoundary {
  padding: 0px;
}

.pageFooterCopyright > .layoutBoundary > div:not(:first-child) {
  margin-top: 2px;
}

.zan {
  padding: 1px 0px 0px;
  font-size: 11px;
  display: inline-block;
}

.dotl1 {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #fa8a02;
  margin-right: 3px;
  border-radius: 50%;
}

.dotl2 {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #eedd51;
  margin-right: 3px;
  border-radius: 50%;
}

.dotl3 {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #b1c108;
  margin-right: 3px;
  border-radius: 50%;
}

.dotl4 {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #018abe;
  margin-right: 5px;
  border-radius: 50%;
}

.pageFooterCopyright a {
  transition: all 0.2s;
}

.pageFooterCopyright a strong {
  font-weight: 400;
}

/* ================================================================ Breadcrumbs */
.breadcrumbs {
  background-color: var(--wcfContentContainerBackground);
  height: 24px;
  line-height: 22px;
  margin-bottom: 25px;
  border-radius: var(--wcfBorderRadius);
  padding: 0px 6px;
}

.breadcrumbs > ol > li {
  font-size: 12px;
}

.breadcrumbs > ol > li:not(:last-child)::after {
  content: "›";
}

.breadcrumbs > ol > li:not(:last-child) {
  margin-right: 4px;
}

.breadcrumbs__item:not(:last-child) .breadcrumbs__link {
  margin-right: 3px;
}

@media screen and (min-width: 1025px), print {
  .breadcrumbs > ol > li:first-child a span::before {
    content: "\f015";
    font-family: "Font Awesome 7 Free";
    font-weight: 600 !important;
    display: inline-block;
    font-size: 10px;
    line-height: 14px;
    padding-right: 5px;
    vertical-align: 1px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .breadcrumbs {
    margin-top: 5px;
  }
  .breadcrumbs > ol > li:first-child a span::before {
    content: "\f015";
    font-family: "Font Awesome 7 Free";
    font-weight: 600 !important;
    display: inline-block;
    font-size: 10px;
    line-height: 14px;
    padding-right: 5px;
    vertical-align: 1px;
  }
}
@media screen and (max-width: 1024px) {
  .breadcrumbs__item:last-child .breadcrumbs__link {
    padding: 0px;
  }
}
/* ================================================================ Tables */
#messageContainer, .content > form[method=post], #imageContainer.sectionContainer {
  background-color: var(--wcfContentContainerBackground);
  padding: 14px;
  border-radius: var(--wcfBorderRadius);
}

.wbbBoardNodeContainer--category:not(.wbbBoardNodeContainer--collapsed) .wbbBoardNodeContainer__header::after {
  display: none;
}

.wbbBoardNodeContainer--category .wbbBoardNodeContainer__header {
  background-color: var(--wcfHeaderBackground);
  padding: 14px 20px !important;
  border-radius: var(--wcfBorderRadius);
}

.wbbBoardNodeContainer--category:not(.wbbBoardNodeContainer--collapsed) .wbbBoardNodeContainer__header {
  border-radius: var(--wcfBorderRadius);
}

.wbbBoardNodeContainer.wbbBoardNodeContainer--category.wbbBoardNodeContainer--collapsible .wbbBoardNodeContainer__header {
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px !important;
  padding: 14px 20px 18px !important;
  position: relative;
}

#tpl_wbb_board .wbbBoardNodeContainer--category .wbbBoardNodeContainer__header {
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
}

.wbbBoardNodeContainer.wbbBoardNodeContainer--category.wbbBoardNodeContainer--collapsed .wbbBoardNodeContainer__header {
  border-radius: var(--wcfBorderRadius) !important;
}

.wbbBoardNodeContainer.wbbBoardNodeContainer--category.wbbBoardNodeContainer--collapsed .wbbBoardNodeContainer__header::before {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0.3) 3px, transparent 4px);
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  pointer-events: none;
}

.wbbBoardNodeList {
  background-color: transparent;
  border-radius: 0px;
  box-shadow: none;
  padding: 0px;
  row-gap: 0px;
}

.wbbBoardNodeContainer {
  border-radius: var(--wcfBorderRadius);
}

.wbbBoardNodeContainer__header + .wbbBoardNodeList .wbbBoardNode:first-child {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  margin-top: -4px;
}

.wbbBoardNode {
  background-color: var(--wcfContentContainerBackground);
  border-bottom: 3px solid var(--wcfContentBackground);
  transition: background-color 0.12s;
  position: relative;
}

html:not(.touch) .wbbBoardNode:hover {
  border-radius: 0px;
}

@media screen and (min-width: 1025px), print {
  .wbbBoardNode__headline {
    min-height: 34px;
    line-height: 34px;
  }
  .wbbBoardNode__description:not(:empty) {
    margin-top: -8px;
  }
}
@media screen and (max-width: 1024px) {
  .wbbBoardNode__description:not(:empty) {
    margin-top: -2px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .wbbBoardNode__description:not(:empty) {
    margin-top: -2px;
  }
}
.wbbBoardNode__description {
  padding-right: 10px;
}

.wbbBoardNode__subBoards {
  margin-top: 0px;
}

.wbbBoardNode.wbbBoardNode:first-child {
  border-top-left-radius: var(--wcfBorderRadius) !important;
  border-top-right-radius: var(--wcfBorderRadius) !important;
}

.wbbBoardNode.wbbBoardNode:last-child, html:not(.touch) .wbbBoardNode:last-child:hover {
  border-bottom-left-radius: var(--wcfBorderRadius);
  border-bottom-right-radius: var(--wcfBorderRadius);
  border-bottom: none;
}

.tabularBox.messageGroupList.wbbThreadList.jsClipboardContainer {
  background-color: transparent;
  padding: 0px;
}

.containerList.recentActivityList li {
  border-radius: var(--wcfBorderRadius);
  margin-bottom: 0px;
}

.recentActivityList .box48 > :last-child {
  border-left: 1px solid var(--wcfContentBorder);
  padding-left: 10px;
}

.tabularList {
  border-bottom: none;
}

.tabularListRow {
  padding: 0px;
}

.tabularListRowHead {
  background-color: var(--wcfHeaderBackground);
  border-bottom: 1px solid var(--wcfContentBackground);
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
  color: #ffffff;
}

.tabularListRowHead > .tabularListColumns > li:not(:first-child) {
  border-left: 1px solid var(--wcfContentBackground);
}

.messageGroupList .tabularListRowHead .columnSort {
  font-size: 12px;
}

.messageGroupList .tabularListRowHead .columnSort .icon {
  color: #fff;
}

.messageGroupList .tabularListRowHead .columnApplyFilter {
  padding: 6px 10px;
}

.messageGroupList .tabularListRowHead .columnApplyFilter button.small {
  background-color: #fff !important;
  border-radius: 2px;
  margin-right: -2px;
  padding: 2px 4px;
  color: #151515;
}

.messageGroupList .tabularListRowHead .columnApplyFilter button.small:hover {
  opacity: 0.7;
}

.tabularListColumns > li {
  padding: 7px 10px;
}

.tabularListRowHead > .tabularListColumns > li {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 20px;
}

.tabularListRow:not(.tabularListRowHead) {
  background-color: var(--wcfContentContainerBackground);
  border-top: none;
  margin-top: 2px;
}

.containerList > li {
  background-color: var(--wcfContentContainerBackground);
  border: none !important;
  border-radius: var(--wcfBorderRadius);
  margin-bottom: 2px;
  padding: 10px;
  transition: background-color 0.12s;
}

.containerList > li:hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
}

.tabularListRow:last-child:not(.tabularListRowHead) {
  border-bottom-left-radius: var(--wcfBorderRadius);
  border-bottom-right-radius: var(--wcfBorderRadius);
}

.containerListButtonGroup.jsOnly.jsRecentActivitySwitchContext {
  background-color: transparent !important;
  padding: 0px 0px 10px;
}

.containerList > li.showMore {
  text-align: left;
  background-color: transparent !important;
  margin-bottom: 0px;
  padding: 10px 0px;
}

.containerList > li .containerHeadline > .containerContentType {
  border: 1px solid var(--wcfContentBorder);
  border-radius: var(--wcfBorderRadius);
  padding: 1px 5px;
  font-size: 8px;
  color: var(--wcfContentBorder);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  position: absolute;
  top: 0px;
  right: 0;
  transition: all 0.2s;
}

.containerList > li:hover .containerHeadline > .containerContentType {
  color: var(--wcfContentText);
  border-color: var(--wcfContentText);
}

.htmlContent table th, .ck.ck-content.ck-editor__editable table th, .messageBody > .messageText table th, .messageSignature > div table th, .table th {
  font-size: 13px;
  background-color: var(--wcfContentLink);
  border: none;
  padding: 9px 10px;
}

.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: #ffffff;
}

.htmlContent table th:first-child, .ck.ck-content.ck-editor__editable table th:first-child, .messageBody > .messageText table th:first-child, .messageSignature > div table th:first-child, .redactor-layer table th:first-child, .table th:first-child {
  border-top-left-radius: var(--wcfBorderRadius);
}

.htmlContent table th:last-child, .ck.ck-content.ck-editor__editable table th:last-child, .messageBody > .messageText table th:last-child, .messageSignature > div table th:last-child, .redactor-layer table th:last-child, .table th:last-child {
  border-top-right-radius: var(--wcfBorderRadius);
}

.htmlContent table th:not(:first-child), .ck.ck-content.ck-editor__editable table th:not(:first-child), .messageBody > .messageText table th:not(:first-child), .messageSignature > div table th:not(:first-child) {
  border-left: 1px solid var(--wcfContentContainerBackground) !important;
}

.htmlContent table tr:not(:last-child) > td, .ck.ck-content.ck-editor__editable table tr:not(:last-child) > td, .messageBody > .messageText table tr:not(:last-child) > td, .messageSignature > div table tr:not(:last-child) > td, .table tr:not(:last-child) > td {
  border-bottom: 1px solid var(--wcfEditorTableBorder);
}

.sectionTitle + .table {
  margin-top: 20px;
}

.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(--wcfEditorTableBorder);
}

.htmlContent table tr > td, .ck.ck-content.ck-editor__editable table tr > td, .messageBody > .messageText table tr > td, .messageSignature > div table tr > td, .table tr > td {
  border-bottom: 1px solid var(--wcfEditorTableBorder);
}

.htmlContent table td:first-child, .ck.ck-content.ck-editor__editable table td:first-child, .messageBody > .messageText table td:first-child, .messageSignature > div table td:first-child {
  border-left: 1px solid var(--wcfEditorTableBorder);
}

.htmlContent table td:last-child, .ck.ck-content.ck-editor__editable table td:last-child, .messageBody > .messageText table td:last-child, .messageSignature > div table td:last-child {
  border-right: 1px solid var(--wcfEditorTableBorder);
}

.htmlContent table td, .ck.ck-content.ck-editor__editable table td, .messageBody > .messageText table td, .messageSignature > div table td, .table td {
  background-color: var(--wcfTabularBoxBackgroundActive);
  padding: 5px 10px;
  border-left: 1px solid var(--wcfEditorTableBorder);
  transition: background-color 0.12s;
}

.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: #f5f5f5;
}

.htmlContent table td:last-child, .ck.ck-content.ck-editor__editable table td:last-child, .messageBody > .messageText table td:last-child, .messageSignature > div table td:last-child, .table td:last-child {
  border-right: 1px solid var(--wcfEditorTableBorder);
}

.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(--wcfEditorTableBorder);
}

.htmlContent table, .ck.ck-content.ck-editor__editable table, .messageBody > .messageText table, .messageSignature > div table, .table {
  border-bottom: none;
}

.notificationSettingsItem {
  padding: 5px;
}

.notificationSettingsItem:last-child {
  border-bottom: 1px solid var(--wcfContentBorderInner);
}

/* ================================================================ Recent Activity WSC 6.1 */
.recentActivityList {
  gap: 5px;
}

.recentActivityList__switchContext {
  background-color: var(--wcfContentContainerBackground) !important;
  border-radius: var(--wcfBorderRadius);
  border-bottom: none;
  padding: 10px;
}

.recentActivityList.recentActivityList--userProfileContent {
  padding-top: 0px;
}

.recentActivityListItem:not(:last-child) {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  border-bottom: none;
  padding: 10px;
  transition: background-color 0.2s;
  overflow: hidden;
}

.recentActivityListItem:not(:last-child):hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
}

.recentActivityListItem__avatar {
  border-right: 1px solid var(--wcfContentBorder);
  padding-right: 12px;
  margin-right: -5px;
}

.recentActivityListItem__description {
  margin-top: 0px;
}

.recentActivityListItem__title {
  padding-right: 110px;
  font-size: 15px;
}

.recentActivityListItem__title strong {
  border-bottom: 1px dotted;
}

.recentActivityListItem__time {
  border: 1px solid var(--wcfContentBorder);
  border-radius: var(--wcfBorderRadius);
  padding: 1px 5px;
  font-size: 8px;
  color: var(--wcfContentBorder);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.2s;
  position: absolute;
  top: 0px;
  right: 0px;
  grid-area: title;
  pointer-events: none;
}

.recentActivityListItem:hover .recentActivityListItem__time {
  color: var(--wcfContentText);
  border-color: var(--wcfContentText);
}

@media screen and (max-width: 1024px) {
  .recentActivityListItem__time {
    top: 0px;
  }
}
.recentActivityListItem__time::before {
  content: "\f11c";
  font-family: "Font Awesome 7 Free";
  font-weight: 100;
  font-size: 10px;
  margin-right: 2px;
}

.recentActivityList__showMoreButton {
  justify-content: left;
  padding: 12px 0px 0px;
}

.recentActivityList__showMoreButton .small::before {
  content: "\f107";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  margin-right: 6px;
  font-size: 12px;
  line-height: 12px;
  display: inline-block;
}

/* ================================================================ userCard */
@media screen and (min-width: 1281px) {
  .userCardList {
    --column-count: 4;
  }
}
.userCard {
  background-color: var(--wcfSidebarBackground);
  border: none;
  box-shadow: none;
}

.userCard__footer {
  border-top: 2px solid var(--wcfContentBackground);
}

.userCard__header__avatar {
  border: 5px solid var(--wcfSidebarBackground);
  margin-top: -49px;
  border-radius: 8px;
}

.userCard__header__avatar .userAvatarImage {
  width: 96px !important;
  height: 96px !important;
}

.userCard__buttons {
  background-color: var(--wcfContentBackground);
  gap: 2px;
  padding: 3px 6px;
}

.userCard__button fa-icon {
  --font-size: 14px;
  --icon-size: 18px;
}

.userCard__button:hover fa-icon {
  opacity: 0.7;
}

.userCard__onlineIndicator {
  right: 34px;
  width: 26px;
  height: 26px;
  line-height: 20px;
  border: 3px solid var(--wcfSidebarBackground);
  display: inline-block;
  text-align: center;
  top: 85px;
}

.userCard__onlineIndicator::before {
  content: "\f007";
  font-family: "Font Awesome 7 Free";
  font-size: 12px;
  display: block;
  color: var(--wcfHeaderText);
  font-weight: 900;
}

.popoverContainer {
  border: none;
}

/* ================================================================ UrlCard */
.unfurlUrlCard {
  background-color: #f2f2f2;
  box-shadow: none;
  border: none;
  padding: 10px;
}

.unfurlUrlCard.unfurlUrlCardCoverImage .unfurlUrlImage {
  border-radius: var(--wcfBorderRadius);
}

.unfurlUrlInformation {
  padding: 10px 0px 15px 0px;
}

.unfurlUrlCard:hover .unfurlUrlTitle {
  text-decoration: none;
}

/* ================================================================ contentNotVisible */
.contentNotVisible {
  background-color: var(--wcfContentBackground);
  border: none;
  box-shadow: none;
}

/* ================================================================ History Edit Fix */
.section.editHistoryDiff {
  background-color: #ffffff !important;
  border: none !important;
  padding: 10px !important;
}

.editHistoryDiff > .table td {
  background-color: #ffffff !important;
}

.editHistoryDiff > .table td.diffRemoved {
  background-color: #f2dede !important;
}

.editHistoryDiff > .table td.diffAdded {
  background-color: #dff0d8 !important;
}

.section.editHistoryDiff .table {
  font-family: "consolas", Arial;
  border-bottom: none;
}

.editHistoryDiff > .table th {
  background-color: rgb(28, 28, 28) !important;
  border: 1px solid var(--wcfContentContainerBackground);
  color: #fff;
  font-size: 14px;
}

.editHistoryDiff > .table td:not(.diffSection) {
  border-bottom-width: 1px !important;
}

/* ================================================================ ContainerList Sort */
.containerListDisplayOptions, .galleryImageListContainer .containerListDisplayOptions {
  margin-bottom: 20px;
  border: none;
}

.containerListSortOptions, .containerListActiveFilters, .containerListFilterOptions {
  padding: 5px 0px;
}

.containerListSortOptions a {
  background-color: var(--wcfButtonBackground);
  border-radius: var(--wcfBorderRadius) 0px 0px var(--wcfBorderRadius);
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  padding: 5px 10px;
  margin-right: -1px;
  font-size: 12px;
  transition: all 0.2s;
}

.containerListSortOptions a .icon {
  color: var(--wcfButtonText);
}

.containerListSortOptions > .dropdown {
  margin-left: 0px;
}

.containerListSortOptions > .dropdown span {
  margin-left: 0px;
  background-color: var(--wcfButtonBackground);
  border-radius: 0px var(--wcfBorderRadius) var(--wcfBorderRadius) 0px;
  color: var(--wcfButtonText);
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  padding: 5px 10px;
  font-size: 12px;
  transition: all 0.2s;
}

.containerListSortOptions a:hover, .containerListSortOptions > .dropdown span:hover {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
}

.containerListSortOptions a:hover .icon {
  color: var(--wcfButtonTextActive);
}

/* ================================================================ SimpleNode */
.wbbSimpleBoardNodeList {
  border: none;
}

.wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNodeContainer__header {
  background-color: var(--wcfHeaderBackground);
  padding: 7px 10px;
  border-bottom: none;
  border-radius: var(--wcfBorderRadius);
}

.wbbSimpleBoardNodeList {
  background-color: transparent;
  border-radius: 0px;
  box-shadow: none;
  padding: 0px;
  row-gap: 2px;
}

.wbbSimpleBoardNode {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 8px 10px;
}

.wbbSimpleBoardNodeContainer__title {
  font-weight: 500;
  font-size: 14px;
}

.wbbSimpleBoardNode__title {
  font-weight: 500;
}

.wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNode--depth2:last-child {
  border-radius: var(--wcfBorderRadius);
}

.wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNodeList .wbbSimpleBoardNode:first-child {
  background-color: var(--wcfContentContainerBackground);
  margin-top: 3px;
}

.wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNodeList .wbbSimpleBoardNode:last-child {
  border-radius: var(--wcfBorderRadius);
}

.wbbSimpleBoardNode:not(.wbbSimpleBoardNode--disabled):hover {
  background-color: var(--wcfTabularBoxBackgroundActive) !important;
}

.wbbSimpleBoardNode.wbbSimpleBoardNode--depth1 {
  border-radius: var(--wcfBorderRadius);
}

.wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNode--depth2 {
  padding-left: 10px;
}

/* ================================================================ ContainerList doubleColumned & tripleColumned */
.containerList.doubleColumned, .containerList.tripleColumned {
  border-top: none;
  border-bottom: none;
}

.containerList.doubleColumned > li {
  flex: 0 0 100%;
  max-width: 100%;
}

.containerList.tripleColumned > li {
  column-gap: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.containerList.doubleColumned > li, .containerList.tripleColumned > li {
  padding-right: 10px;
}

@media screen and (min-width: 1025px), print {
  .containerBoxList.trophyCategoryList.tripleColumned {
    column-gap: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .containerBoxList.trophyCategoryList.tripleColumned {
    column-gap: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .containerList.tripleColumned > li {
    column-gap: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.containerBoxList.tripleColumned > li {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 10px;
}

.box.wbbSimilarThreadList.boxFullWidth .containerBoxList.tripleColumned > li {
  background-color: #f5f5f5;
  border-radius: var(--wcfBorderRadius);
  padding: 10px;
}

.containerBoxList.tripleColumned:not(.boxesContentTop .box .containerBoxList.tripleColumned):not(.boxesContentTop .box .containerBoxList.tripleColumned) > li {
  background-color: #f5f5f5;
}

.boxesTop .containerBoxList.tripleColumned:not(.boxesContentTop .box .containerBoxList.tripleColumned):not(.boxesContentTop .box .containerBoxList.tripleColumned) > li,
.boxesBottom .containerBoxList.tripleColumned:not(.boxesContentTop .box .containerBoxList.tripleColumned):not(.boxesContentTop .box .containerBoxList.tripleColumned) > li {
  background-color: var(--wcfContentContainerBackground);
}

@media screen and (min-width: 1025px), print {
  .boxesFooterBoxes .containerBoxList.tripleColumned {
    display: grid;
    column-gap: 16px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .boxesFooterBoxes .containerBoxList.tripleColumned {
    display: grid;
    column-gap: 16px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* ================================================================ Trophy */
.containerList.trophyCategoryList > li:not(.last-child) {
  margin-bottom: 0px;
}

@media screen and (min-width: 1025px), print {
  .containerList.trophyCategoryList.doubleColumned {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;
    row-gap: 14px;
    align-items: self-start;
  }
}
@media screen and (max-width: 1024px) {
  .containerList.trophyCategoryList.doubleColumned li:not(:last-child) {
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .containerList.trophyCategoryList > li:not(.last-child) {
    margin-bottom: 10px;
  }
}
/* ================================================================ Protocol Pages Mod by Gino Zantarelli */
@media screen and (min-width: 1025px), print {
  #tpl_wbb_threadLog .section .containerList, #tpl_calendar_upcomingEventList .section .containerList, #tpl_filebase_fileLog .section .containerList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0px;
  }
  #tpl_wbb_threadLog .section .containerList > li:first-child, #tpl_filebase_fileLog .section .containerList > li:first-child,
  #tpl_calendar_upcomingEventList .section .containerList > li:first-child {
    margin-top: 0px;
    margin-bottom: 16px;
  }
  #tpl_wbb_threadLog .section .containerList > li:not(:first-child), #tpl_filebase_fileLog .section .containerList > li:not(:first-child),
  #tpl_calendar_upcomingEventList .section .containerList > li:not(:first-child) {
    margin-bottom: 16px;
  }
  #tpl_wbb_threadLog .section .containerList > li, #tpl_filebase_fileLog .section .containerList li,
  #tpl_calendar_upcomingEventList .section .containerList > li {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
    justify-content: space-between;
    display: flex;
    border: none !important;
    border-radius: var(--wcfBorderRadius);
  }
  #tpl_wbb_threadLog .section .containerList > li .box48:last-child, #tpl_filebase_fileLog .section .containerList li .box48:last-child, #tpl_calendar_upcomingEventList .section .containerList > li .box48:last-child {
    flex: 1;
  }
  #tpl_wbb_threadLog .sidebar + .content:not(:last-child) .section .containerList,
  #tpl_calendar_upcomingEventList .sidebar + .content:not(:last-child) .section .containerList,
  #tpl_filebase_fileLog .sidebar + .content:not(:last-child) .section .containerList {
    display: block;
  }
  #tpl_wbb_threadLog .sidebar + .content:not(:last-child) .section .containerList > li,
  #tpl_filebase_fileLog .sidebar + .content:not(:last-child) .section .containerList li,
  #tpl_calendar_upcomingEventList .sidebar + .content:not(:last-child) .section .containerList > li {
    flex: 0 0 calc(100% - 0px);
    max-width: calc(100% - 0px);
  }
  #tpl_wbb_threadLog .sidebar + .content:not(:last-child) .section .containerList li small, #tpl_filebase_fileLog .sidebar + .content:not(:last-child) .section .containerList li small, #tpl_calendar_upcomingEventList .sidebar + .content:not(:last-child) .section .containerList li small {
    color: #717171;
    position: relative;
    right: 0px;
    top: 0px;
  }
  #tpl_wbb_threadLog .section .containerList li small, #tpl_filebase_fileLog .section .containerList li small {
    color: var(--wcfContentDimmedText) 1;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  #tpl_calendar_upcomingEventList .section .containerList li .containerHeadline > h3,
  #tpl_wbb_threadLog .section .containerList li .containerHeadline > h3, #tpl_filebase_fileLog .section .containerList li .containerHeadline > h3 {
    font-size: 16px;
    margin-bottom: 7px;
    padding-right: 100px;
  }
  #tpl_calendar_upcomingEventList .section .containerList li small {
    color: var(--wcfContentDimmedText);
    position: absolute;
    right: 0px;
    top: 0px;
  }
  #tpl_wbb_threadLog .section .containerList li .containerHeadline ~ .containerContent, #tpl_filebase_fileLog .section .containerList li .containerHeadline ~ .containerContent, #tpl_calendar_upcomingEventList .section .containerList li .containerHeadline ~ .containerContent {
    margin-top: 3px;
  }
}
#tpl_wbb_threadLog .section .containerList li .containerContent a, #tpl_filebase_fileLog .section .containerList li .containerContent a, #tpl_calendar_upcomingEventList .section .containerList li .containerContent a {
  text-decoration: underline dotted;
  font-style: italic;
  font-weight: 500;
}

#tpl_wbb_threadLog .section .containerList li small woltlab-core-date-time::before, #tpl_filebase_fileLog .section .containerList li small woltlab-core-date-time::before {
  content: "\f11c";
  font-family: "Font Awesome 7 Free";
  font-weight: 100;
  font-size: 12px;
  margin-right: 4px;
  padding-left: 2px;
}

@media screen and (max-width: 1024px) {
  #tpl_wbb_threadLog .section .containerList > li, #tpl_filebase_fileLog .section .containerList li,
  #tpl_calendar_upcomingEventList .section .containerList > li {
    background-color: var(--wcfSidebarBackground);
    margin-bottom: 3px;
  }
}
/* ================================================================ Userlist Double Column by Gino Zantarelli */
.containerList.userList li .box48 {
  padding: 12px;
  min-height: 70px;
  align-items: initial;
}

@media screen and (min-width: 1025px), print {
  #tpl_wcf_membersList .containerList.userList, #tpl_wcf_team .containerList.userList, #tpl_wcf_usersOnlineList .containerList.userList, #tpl_wcf_following .containerList.userList.jsObjectActionContainer,
  #tpl_wcf_ignoredUsers .containerList.userList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: self-start;
  }
  #tpl_wcf_membersList .containerList.userList li, #tpl_wcf_team .containerList.userList li, #tpl_wcf_usersOnlineList .containerList.userList li, #tpl_wcf_following .containerList.userList.jsObjectActionContainer li,
  #tpl_wcf_ignoredUsers .containerList.userList li {
    margin-bottom: 0px;
    padding: 0px;
  }
  .sidebar + .content:not(:last-child) .containerList.userList {
    display: block;
  }
  .sidebar + .content:not(:last-child) .containerList.userList li {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 1024px) {
  #tpl_wcf_membersList .containerList.userList, #tpl_wcf_team .containerList.userList, #tpl_wcf_usersOnlineList .containerList.userList, #tpl_wcf_following .containerList.userList.jsObjectActionContainer,
  #tpl_wcf_ignoredUsers .containerList.userList {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    align-items: self-start;
  }
  .containerList.userList li {
    margin-bottom: 6px;
  }
  .containerList.userList li .box48 {
    padding: 0px;
  }
}
/* ================================================================ User Online Legend */
.boxesFooterBoxes .usersOnlineLegend {
  margin-top: 10px;
  padding-top: 2px;
  border-top: 1px solid;
  font-size: 11px;
}

.boxesFooterBoxes .usersOnlineLegend fa-icon[size="16"] {
  --font-size: 12px;
  --icon-size: 12px;
}

.sidebar .plain.inlineDataList.usersOnlineLegend {
  font-size: 10px;
  border-top: 1px solid;
  padding-top: 3px;
}

.sidebar .plain.inlineDataList.usersOnlineLegend fa-icon[size="16"] {
  --font-size: 12px;
  --icon-size: 12px;
}

/* ======================================================= Board Stats WSC 6 Modification by Gino Zantarelli */
@media screen and (min-width: 1025px), print {
  .messageGroupListStatsSimple {
    display: none;
  }
  .wbbBoardNode {
    position: relative;
  }
  .wbbBoardNode__content {
    margin-right: 114px;
  }
  .wbbBoardNode__subBoardList {
    margin-right: 114px;
  }
  .wbbBoardNode__content {
    grid-area: stats;
  }
  .wbbBoardNode__lastPost {
    border-left: 3px solid var(--wcfContentText);
    padding-left: 10px;
    min-height: 40px;
  }
  .wbbBoardNode__lastPost:not(:first-child) {
    display: none;
  }
  .wbbBoardNode__stats {
    margin-top: 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: center;
    opacity: 0.7;
  }
  .wbbBoardNode--externalLink {
    grid-template-areas: "icon content" "icon stats";
    grid-template-columns: min-content 1fr 0%;
  }
  .wbbBoardNode--externalLink .wbbBoardNode__stats {
    position: absolute;
    top: 4px;
    right: -25px;
    text-align: right;
  }
  .plain.wbbBoardNode__statItem.wbbBoardNode__statItem--threads {
    border-right: 1px solid;
    padding-right: 10px;
    width: 60px;
    display: block;
  }
  .plain.wbbBoardNode__statItem.wbbBoardNode__statItem--posts {
    display: block;
    width: 50px;
  }
  .wbbBoardNode__statItem:not(:first-child) {
    margin-left: 5px;
  }
  .wbbBoardNode__statItem dd {
    font-size: 16px;
    line-height: 1.28;
    color: var(--wcfContentText);
  }
  .messageGroupList .tabularList .tabularListRow:not(.tabularListRowHead) .columnStats > dl {
    visibility: visible;
  }
  .wbbBoardNode__statItem dt::after {
    display: none;
  }
  .wbbBoardNode__statItem:not(.wbbBoardNode__statItem--posts):not(.wbbBoardNode__statItem--threads) {
    margin-top: 10px;
  }
  .wbbBoardNode__statItem:not(.wbbBoardNode__statItem--posts):not(.wbbBoardNode__statItem--threads) dd {
    font-size: 13px;
  }
  .wbbBoardNode:hover .wbbBoardNode__stats {
    opacity: 1;
    transition: all 0.12s;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .messageGroupListStatsSimple {
    display: none;
  }
  .wbbBoardNode {
    position: relative;
  }
  .wbbBoardNode__content {
    margin-right: 114px;
  }
  .wbbBoardNode__subBoardList {
    margin-right: 114px;
  }
  .wbbBoardNode__content {
    grid-area: stats;
  }
  .wbbBoardNode__lastPost {
    border-left: 3px solid var(--wcfContentText);
    padding-left: 10px;
    min-height: 40px;
  }
  .wbbBoardNode__stats {
    margin-top: 0px;
    position: absolute;
    top: 0px;
    right: 3px;
    text-align: center;
    opacity: 0.7;
  }
  .plain.wbbBoardNode__statItem.wbbBoardNode__statItem--threads {
    border-right: 1px solid;
    padding-right: 10px;
    width: 60px;
    display: block;
  }
  .plain.wbbBoardNode__statItem.wbbBoardNode__statItem--posts {
    display: block;
    width: 50px;
  }
  .wbbBoardNode__statItem:not(:first-child) {
    margin-left: 5px;
  }
  .wbbBoardNode__statItem dt {
    letter-spacing: -0.5px;
  }
  .wbbBoardNode__statItem dd {
    font-size: 16px;
    line-height: 1.28;
    color: var(--wcfContentDimmedText);
  }
  .messageGroupList .tabularList .tabularListRow:not(.tabularListRowHead) .columnStats > dl {
    visibility: visible;
  }
  .wbbBoardNode__statItem dt::after {
    display: none;
  }
  .wbbBoardNode__statItem:not(.wbbBoardNode__statItem--posts):not(.wbbBoardNode__statItem--threads) {
    margin-top: 10px;
  }
  .wbbBoardNode__statItem:not(.wbbBoardNode__statItem--posts):not(.wbbBoardNode__statItem--threads) dd {
    font-size: 13px;
  }
  .wbbBoardNode:hover .wbbBoardNode__stats {
    opacity: 1;
    transition: all 0.12s;
  }
}
/* ================================================================ Marking Options by Gino Zantarelli */
/* Message Reduced Markiert */
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .messageHeader,
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked,
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .quoteBox.collapsibleBbcode.quoteBoxSimple .quoteBoxContent,
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .quoteBoxContent {
  background-color: #f5f5c8;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .embeddedContent,
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .codeBox,
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked table {
  opacity: 0.3;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .quoteBoxIcon > .quoteBoxQuoteSymbol::before {
  color: #333;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked table th > a:not(.button) {
  color: #fff !important;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked,
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked a:not(.button),
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .icon,
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .columnLastPost time,
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .messageHeader,
.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .section .sectionTitle {
  color: #333 !important;
  border-color: #d1d1ab !important;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked h1, .wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked h2, .wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked h3 {
  color: #333 !important;
  border-color: #333 !important;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .button .icon {
  color: #ffffff !important;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .userMention {
  background-color: #d2d298;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .quoteBoxTitle {
  border-bottom: 2px solid #333;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked span.quoteBoxTitle {
  border-bottom: none !important;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .messageBody > .messageText table tr:hover > td {
  background-color: #f8f8d4;
}

.wbbPost.message.messageReduced.jsClipboardObject.jsMessage.jsMarked .spoilerBoxHeader {
  border-bottom: 1px solid #333;
}

/* Konversation Markiert */
.tabularListColumns.messageGroup.conversation.jsClipboardObject.jsMarked {
  background-color: #f5f5c8;
}

.tabularListRow:last-child .tabularListColumns.messageGroup.conversation.jsClipboardObject.jsMarked {
  border-radius: 0px 0px 4px 4px;
}

.tabularListColumns.messageGroup.conversation.jsClipboardObject.jsMarked,
.tabularListColumns.messageGroup.conversation.jsClipboardObject.jsMarked a:not(.badge),
.tabularListColumns.messageGroup.conversation.jsClipboardObject.jsMarked .icon,
.tabularListColumns.messageGroup.conversation.jsClipboardObject.jsMarked .columnLastPost time,
.tabularListColumns.messageGroup.conversation.jsClipboardObject.jsMarked h3 > .messageGroupLink::before,
.tabularListColumns.messageGroup.conversation.jsClipboardObject.jsMarked .columnStats dl.statsDataList > dd,
.tabularListColumns.messageGroup.conversation.jsClipboardObject.jsMarked .columnStats dl.statsDataList > dt {
  color: #333;
}

/* Forenliste Markiert */
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.jsMarked {
  background-color: #f5f5c8;
}

.tabularListRow:last-child .tabularListColumns.messageGroup.wbbThread.jsClipboardObject.jsMarked {
  border-radius: 0px 0px 4px 4px;
}

.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.jsMarked,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.jsMarked a:not(.badge),
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.jsMarked .icon,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.jsMarked .columnLastPost time,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.jsMarked .columnStats dl.statsDataList > dd,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.jsMarked .columnStats dl.statsDataList > dt {
  color: #333;
}

/* Forenliste Deaktiviert */
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled {
  background-color: #d4edb9;
}

.tabularListRow:last-child .tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled {
  border-radius: 0px 0px 4px 4px;
}

.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled a:not(.badge),
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled .icon,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled .columnLastPost time,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled .columnStats dl.statsDataList > dd,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled .columnStats dl.statsDataList > dt {
  color: #469e08;
}

/* Forenliste Deaktiviert Icon */
.messageGroupList .messageDeleted .columnAvatar::before, .messageGroupList .messageDisabled .columnAvatar::before {
  font-size: 40px;
}

/* Forenliste Deaktiviert - Markiert */
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled.jsMarked {
  background-color: #f5f5c8;
}

.tabularListRow:last-child .tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled.jsMarked {
  border-radius: 0px 0px 4px 4px;
}

.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled.jsMarked,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled.jsMarked a:not(.badge),
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled.jsMarked .icon,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled.jsMarked .columnLastPost time,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled.jsMarked .columnStats dl.statsDataList > dd,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDisabled.jsMarked .columnStats dl.statsDataList > dt {
  color: #333;
}

/* Forenliste Gelöscht */
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted {
  background-color: #f3dfdf;
}

.tabularListRow:last-child .tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted {
  border-radius: 0px 0px 4px 4px;
}

.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted a:not(.badge),
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted .icon,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted .columnLastPost time,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted .columnStats dl.statsDataList > dd,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted .columnStats dl.statsDataList > dt {
  color: #b60707;
}

/* Forenliste Gelöscht Icon */
.messageGroupList .messageDeleted .columnAvatar::before, .messageGroupList .messageDeleted .columnAvatar::before {
  font-size: 40px;
}

/* Forenliste Gelöscht - Markiert */
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted.jsMarked {
  background-color: #f5f5c8;
}

.tabularListRow:last-child .tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted.jsMarked {
  border-radius: 0px 0px 4px 4px;
}

.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted.jsMarked,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted.jsMarked a:not(.badge),
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted.jsMarked .icon,
.tabularListColumns.messageGroup.wbbThread.jsClipboardObject.messageDeleted.jsMarked .columnLastPost time {
  color: #333;
}

/* Message Markiert */
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.jsMarked .messageSidebar,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.jsMarked .messageSidebar a,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.jsMarked .messageSidebar dl.dataList > dt,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.jsMarked .messageSidebar dl.dataList > dd {
  background-color: #f5f5c8;
  color: #333 !important;
  border-color: #e0e097;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.jsMarked .messageSidebar .dataList {
  background-color: #f5f5c8;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMarked.jsMessage .messageSidebar .plain.dataList::before {
  background-color: #fbf4cc;
  color: #333;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMarked.jsMessage .messageSidebar .plain.dataList {
  border-color: #333;
}

/* Message Deaktiviert */
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDisabled .messageSidebar,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDisabled .messageSidebar a,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDisabled .messageSidebar dl.dataList > dt,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDisabled .messageSidebar dl.dataList > dd {
  background-color: #d4edb9;
  color: #469e08 !important;
  border-color: #7bc447;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDisabled .messageSidebar .dataList {
  background-color: #d4edb9;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.messageDisabled .messageSidebar .plain.dataList::before {
  background-color: #d4edb9;
  color: #469e08 !important;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.messageDisabled .messageSidebar .plain.dataList {
  border-color: #469e08 !important;
}

/* Message Gelöscht */
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDeleted .messageSidebar,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDeleted .messageSidebar a,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDeleted .messageSidebar dl.dataList > dt,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDeleted .messageSidebar dl.dataList > dd {
  background-color: #f3dfdf;
  color: #b60707 !important;
  border-color: #ffc4c4;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDeleted .messageSidebar .dataList {
  background-color: #f3dfdf;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.messageDeleted .messageSidebar .plain.dataList::before {
  background-color: #fee1e1;
  color: #b60707 !important;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.messageDeleted .messageSidebar .plain.dataList {
  border-color: #b60707 !important;
}

/* Message Deaktiviert - Markiert */
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDisabled.jsMarked .messageSidebar,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDisabled.jsMarked .messageSidebar a,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDisabled.jsMarked .messageSidebar dl.dataList > dt,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDisabled.jsMarked .messageSidebar dl.dataList > dd {
  background-color: #f5f5c8;
  color: #469e08 !important;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDisabled.jsMarked .messageSidebar .dataList {
  background-color: #f5f5c8;
}

/* Message Gelöscht - Markiert */
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDeleted.jsMarked .messageSidebar,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDeleted.jsMarked .messageSidebar a,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDeleted.jsMarked .messageSidebar dl.dataList > dt,
.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDeleted.jsMarked .messageSidebar dl.dataList > dd {
  background-color: #f5f5c8;
  color: #b60707 !important;
}

.wbbPost.message.messageSidebarOrientationLeft.jsClipboardObject.jsMessage.messageDeleted.jsMarked .messageSidebar .dataList {
  background-color: #f5f5c8;
}

/* Filebase 6 */
.filebaseFileList .filebaseFileCard.jsMarked, .filebaseFileList .filebaseFileCard.jsMarked.filebaseFileFeatured .filebaseFileCardHeader .filebaseFileRating {
  background-color: #f5f5c8 !important;
  color: #333333;
  border-color: #e0e097;
}

.filebaseFileList .filebaseFileCard.jsMarked .filebaseFileCardHeader {
  background-color: #f5f5c8 !important;
  color: #333333 !important;
}

.filebaseFileList .filebaseFileCard.jsMarked .filebaseFileCardFooter {
  border-color: #333333;
  color: #333333;
}

.filebaseFileList .filebaseFileCard.jsMarked .filebaseFileCardFooter a {
  color: #333333;
}

.filebaseFileList .filebaseFileCard.messageDeleted, .filebaseFileList .filebaseFileCard.messageDeleted.filebaseFileFeatured .filebaseFileCardHeader .filebaseFileRating {
  background-color: #f3dfdf !important;
  color: #ce1212;
  border-color: #ffc4c4;
}

.filebaseFileList .filebaseFileCard.messageDeleted .filebaseFileCardHeader {
  background-color: #f3dfdf !important;
  color: #ce1212 !important;
}

.filebaseFileList .filebaseFileCard.messageDeleted .filebaseFileCardFooter {
  border-color: #ce1212;
  color: #ce1212;
}

.filebaseFileList .filebaseFileCard.messageDeleted .filebaseFileCardFooter a {
  color: #ce1212;
}

.filebaseFileList .filebaseFileCard.messageDeleted.jsMarked {
  background-color: #f5f5c8 !important;
  color: #ce1212;
}

.filebaseFileList .filebaseFileCard.messageDeleted.jsMarked .filebaseFileCardFooter {
  border-color: #ce1212;
  color: #ce1212;
}

.filebaseFileList .filebaseFileCard.messageDeleted.jsMarked .filebaseFileCardFooter a {
  color: #ce1212;
}

.filebaseFileList .filebaseFileCard.messageDisabled, .filebaseFileList .filebaseFileCard.messageDisabled.filebaseFileFeatured .filebaseFileCardHeader .filebaseFileRating {
  background-color: #d4edb9 !important;
  color: #469e08;
  border-color: #7bc447;
}

.filebaseFileList .filebaseFileCard.messageDisabled .filebaseFileCardHeader {
  background-color: #d4edb9;
  color: #469e08 !important;
}

.filebaseFileList .filebaseFileCard.messageDisabled .filebaseFileCardFooter {
  border-color: #469e08;
  color: #469e08;
}

.filebaseFileList .filebaseFileCard.messageDisabled .filebaseFileCardFooter a {
  color: #469e08;
}

.filebaseFileList .filebaseFileCard.messageDisabled.jsMarked, .filebaseFileList .filebaseFileCard.messageDisabled.jsMarked.filebaseFileFeatured .filebaseFileCardHeader .filebaseFileRating {
  background-color: #f5f5c8 !important;
  color: #469e08;
}

.filebaseFileList .filebaseFileCard.messageDisabled.jsMarked .filebaseFileCardFooter {
  border-color: #469e08;
  color: #469e08;
}

.filebaseFileList .filebaseFileCard.messageDisabled.jsMarked .filebaseFileCardFooter a {
  color: #469e08;
}

.filebaseFileList .filebaseFileCard.messageDisabled.messageDeleted, .filebaseFileList .filebaseFileCard.messageDisabled.messageDeleted.filebaseFileFeatured .filebaseFileCardHeader .filebaseFileRating {
  background-color: #f3dfdf !important;
  color: #469e08;
}

.filebaseFileList .filebaseFileCard.messageDisabled.messageDeleted .filebaseFileCardFooter {
  border-color: #469e08;
  color: #469e08;
}

.filebaseFileList .filebaseFileCard.messageDisabled.messageDeleted .filebaseFileCardFooter a {
  color: #469e08;
}

.filebaseFileList .filebaseFileCard.jsMarked .filebaseFileRating::after {
  border-bottom: 14px solid #f5f5c8;
}

.filebaseFileList .filebaseFileCard.messageDisabled .filebaseFileRating::after {
  border-bottom: 14px solid #d4edb9;
}

.filebaseFileList .filebaseFileCard.messageDeleted .filebaseFileRating::after {
  border-bottom: 14px solid #f3dfdf;
}

.filebaseFileList .filebaseFileCard.messageDeleted.jsMarked .filebaseFileRating::after {
  border-bottom: 14px solid #f3dfdf;
}

.filebaseFileList .filebaseFileCard.messageDisabled.jsMarked .filebaseFileRating::after {
  border-bottom: 14px solid #f5f5c8;
}

/* ================================================================ Message Content */
@media screen and (min-width: 1025px), print {
  .message.messageSidebarOrientationLeft .messageSidebar::before {
    content: "";
    width: 8px;
    height: 120px;
    position: absolute;
    margin-left: 111px;
    margin-top: -15px;
    display: inline-block;
    background-color: var(--wcfContentContainerBackground);
    border-radius: 10px;
  }
  .messageSidebar .coverphoto {
    height: 110px;
    display: block;
    margin: -30px -20px -73px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover !important;
    border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
    border-bottom: 3px solid var(--wcfContentContainerBackground);
  }
  .messageSidebar {
    flex: 0 0 210px;
    padding: 30px 20px 20px;
    border-radius: var(--wcfBorderRadius);
    border: none;
  }
  .messageSidebar + .messageContent {
    flex-basis: calc(100% - 230px);
    max-width: calc(100% - 230px);
    margin-left: 20px;
  }
  .message.messageSidebarOrientationLeft .messageHeader {
    background-color: #f2f2f2;
    border-radius: var(--wcfBorderRadius);
    padding: 4px 8px;
  }
  .messageGroupStarter .messageSidebar .plain.dataList::before {
    content: "\f14b";
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    font-size: 17px;
    display: block;
    position: absolute;
    margin-top: -25px;
    background-color: var(--wcfContentContainerBackground);
    width: 26px;
  }
  #messageQuickReply .message {
    margin-left: 60px;
  }
  #messageQuickReply .message::before {
    content: "Quick Reply";
    width: 300px;
    background-color: var(--wcfContentContainerBackground);
    border-radius: var(--wcfBorderRadius);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    color: var(--wcfContentText);
    text-align: right;
    padding: 6px 10px;
    display: inline-block;
    height: 36px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: 120px 180px;
    position: absolute;
  }
  .messageSidebar .userAvatar {
    border: 5px solid var(--wcfContentContainerBackground);
    border-radius: var(--wcfBorderRadiusContainer);
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .message.messageSidebarOrientationLeft .messageSidebar::before {
    content: "";
    width: 8px;
    height: 120px;
    position: absolute;
    margin-left: 111px;
    margin-top: -15px;
    display: inline-block;
    background-color: var(--wcfContentContainerBackground);
    border-radius: 10px;
  }
  .messageSidebar .coverphoto {
    height: 110px;
    display: block;
    margin: -15px -15px -73px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover !important;
    border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
    border-bottom: 3px solid var(--wcfContentContainerBackground);
  }
  .messageSidebar {
    flex: 0 0 210px;
    padding: 30px 20px 20px;
    border-radius: var(--wcfBorderRadius);
    border: none;
  }
  .messageSidebar + .messageContent {
    flex-basis: calc(100% - 230px);
    max-width: calc(100% - 230px);
    margin-left: 20px;
    border-radius: var(--wcfBorderRadius) !important;
  }
  .message.messageSidebarOrientationLeft .messageHeader {
    background-color: #f2f2f2;
    border-radius: var(--wcfBorderRadius);
    padding: 4px 8px;
  }
  .messageGroupStarter .messageSidebar .plain.dataList::before {
    content: "\f14b";
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    font-size: 17px;
    display: block;
    position: absolute;
    margin-top: -25px;
    background-color: var(--wcfContentContainerBackground);
    width: 26px;
  }
  #messageQuickReply .message {
    margin-left: 60px;
  }
  #messageQuickReply .message::before {
    content: "Quick Reply";
    width: 300px;
    background-color: var(--wcfContentContainerBackground);
    border-radius: var(--wcfBorderRadius);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    color: var(--wcfContentText);
    padding: 6px 10px;
    display: inline-block;
    height: 36px;
    transform: rotate(90deg);
    transform-origin: -10px -10px;
    position: absolute;
  }
  .messageSidebar .userAvatar {
    border: 5px solid var(--wcfContentContainerBackground);
    border-radius: var(--wcfBorderRadiusContainer);
  }
}
.messageSidebar .dataList {
  border-top: 1px solid;
  padding: 12px 8px 8px 8px;
  margin: 10px -10px -10px;
  font-size: 11px;
  color: var(--wcfContentText);
}

.messageSidebar .dataList a, .messageSidebar dl.dataList > dt {
  color: var(--wcfContentText) !important;
}

.messageSidebar {
  background-color: var(--wcfContentContainerBackground);
  color: #fff;
  position: relative;
}

.message:not(.message.messageSidebarOrientationLeft):not(.contentItem) {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 14px;
}

.messageSidebar + .messageContent {
  background-color: var(--wcfContentContainerBackground);
  padding: 14px;
  border-radius: var(--wcfBorderRadius);
}

.messageReduced .messageHeader {
  background-color: #f2f2f2;
  border-radius: var(--wcfBorderRadius);
  padding: 10px;
}

.messageReduced .messageBody, .messageReduced .messageFooter {
  padding: 0px;
}

.main > div #loginForm {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 14px;
}

.section.galleryImageContainer, .section.calendarEvent {
  background-color: var(--wcfContentContainerBackground);
  padding: 14px !important;
  border-radius: var(--wcfBorderRadius);
}

.wbbPost.wbbPostDeleted.messageCollapsedExpandable {
  background-color: #fccece !important;
  padding: 12px 12px 12px 55px !important;
  color: var(--wcfContentHeadlineText) !important;
  position: relative;
}

.wbbPost.wbbPostDeleted.messageCollapsedExpandable::before {
  content: "\f2ed";
  display: inline-block;
  font-family: "Font Awesome 7 Free";
  font-weight: 100 !important;
  font-style: normal !important;
  top: 9px;
  left: 16px;
  font-size: 30px;
  position: absolute;
  color: #b31111;
}

.wbbPost.wbbPostDeleted.messageCollapsedExpandable .messageHeaderWrapper > :first-child {
  display: none;
}

.modificationLogEntry.lastModificationLogEntry .message.messageReduced {
  border: none !important;
  background-color: transparent !important;
  padding: 0px !important;
}

.modificationLogEntry.lastModificationLogEntry .message.messageReduced .messageHeader {
  background-color: var(--wcfContentContainerBackground);
  border: none;
  border-radius: var(--wcfBorderRadius);
  padding: 10px 14px;
}

.modificationLogEntry.lastModificationLogEntry .message.messageReduced .messageHeader .messageHeaderBox, .wbbPost.wbbPostDeleted.messageCollapsedExpandable .messageHeader .messageHeaderBox, .wbbPost.wbbPostDeleted.messageCollapsedExpandable .messageHeader > .messageQuickOptions {
  background-color: transparent;
}

.wbbThreadPostList.messageList :not(.modificationLogEntry) + .modificationLogEntry {
  padding-top: 10px;
}

.wbbThreadPostList.messageList .lastModificationLogEntry.modificationLogEntry:not(:last-child) {
  padding-bottom: 10px;
}

.modificationLogEntry .message.messageReduced.messageReduced {
  background-color: var(--wcfContentContainerBackground);
  border: none !important;
  background-color: transparent !important;
  padding: 5px 0px !important;
}

.modificationLogEntry .message.messageReduced .messageHeader {
  background-color: var(--wcfContentContainerBackground);
  border: none;
  border-radius: var(--wcfBorderRadius);
  padding: 10px 14px;
}

.messageFooterNote.wbbPostEditNote, .blogEntryEditNote.messageFooterNote {
  border: none;
}

.messageFooterNote.wbbPostDeleteNote {
  border: none;
  color: #c60c0c;
  border-radius: var(--wcfBorderRadius);
  background-color: #ffe6e6;
}

.messageFooterNote.wbbPostEditNote::before, .blogEntryEditNote.messageFooterNote::before {
  content: "INFO";
  font-family: "Arial", Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  color: #fff;
  height: 16px;
  display: inline-block;
  background-color: #c60c0c;
  text-align: center;
  margin-right: 5px;
  margin-left: -10px;
  border-radius: 2px;
  padding: 0px 4px;
}

.messageSignature {
  opacity: 1;
  border-top: 1px solid var(--wcfEditorTableBorder);
}

.messageSignature a.externalURL::after {
  display: none;
}

#messageQuickReply .messageSidebar, #messageQuickReply .message.messageSidebarOrientationLeft .messageSidebar::before, #messageQuickReply .message.messageSidebarOrientationLeft .messageContent::before {
  display: none;
}

#messageQuickReply .messageSidebar + .messageContent {
  margin-left: 0px;
  flex-basis: calc(100% - 0px);
  max-width: calc(100% - 0px);
}

.message .messageBody .messageText .embeddedContent a {
  font-weight: 500 !important;
}

.messageSectionTitle::before, .messageSectionTitle::after {
  border-top: 1px solid var(--wcfContentHeadlineText);
}

.messageList:not(.messageReducedList) > li {
  border-bottom: 1px dashed var(--wcfContentBorder);
}

.messageAttachment {
  background-color: #f2f2f2;
  border: none;
}

.message .galleryImageSeries {
  background-color: #f2f2f2;
  box-shadow: none;
  border-radius: var(--wcfBorderRadius);
  padding: 14px;
}

@media screen and (max-width: 1024px) {
  .messageList > .messageGroupStarter > .message > .messageSidebar .messageAuthorContainer::before {
    content: "\f14b";
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    font-size: 17px;
    display: block;
    position: absolute;
    right: 0px;
    color: var(--wcfContentText);
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .messageList > .messageGroupStarter > .message > .messageSidebar .messageAuthorContainer::before {
    display: none;
  }
}
.gridListItem.gridListItemMessage {
  background-color: var(--wcfContentContainerBackground);
}

.messageUserConsent {
  background-color: #f2f2f2;
  border-radius: var(--wcfBorderRadius);
  box-shadow: none;
}

/* ================================================================ embeddedContent */
.embeddedContent {
  background-color: #f2f2f2;
  border: none;
  box-shadow: none;
  border-radius: var(--wcfBorderRadius);
}

.embeddedContentDescription::after {
  background-image: none;
}

.embeddedContentMeta {
  border-top: 1px solid var(--wcfContentContainerBackground);
}

.embeddedContentMetaAuthor {
  font-size: 13px;
  font-weight: 500;
}

.embeddedContent:hover .embeddedContentTitleLink {
  text-decoration: none;
}

/* ================================================================ Poll Container Modification by Gino Zantarelli */
.pollContainer {
  background-color: transparent;
  border: none;
  border-radius: 0px;
  box-shadow: none;
  padding: 0px;
}

.pollContainer h2 {
  font-size: 14px;
  background-color: var(--wcfHeaderBackground);
  color: #ffffff;
  padding: 6px 10px;
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
}

.pollContainer .pollInnerContainer {
  background-color: #f2f2f2;
  padding: 20px 14px;
  margin-top: 1px;
}

.pollContainer .pollResultItem .pollMeter {
  background-color: var(--wcfContentContainerBackground);
}

.pollContainer .pollResultItem .pollMeter > .pollMeterValue {
  background-color: #2bb82b;
}

.pollContainer .formSubmit:not(:first-child) {
  margin-top: 2px;
}

.pollContainer .formSubmit {
  background-color: #f2f2f2;
  border: none;
  border-radius: 0px 0px var(--wcfBorderRadius) var(--wcfBorderRadius);
  margin-top: 2px;
  padding: 10px 0px;
}

/* ================================================================ WSC 6 Code Box Modification by Gino Zantarelli */
.codeBox {
  background-color: #1a1a1a;
  box-shadow: 3.6em 0px 0px #000000 inset;
  border: none;
  border-radius: var(--wcfBorderRadius);
  padding: 0px 0px 1px;
  color: #ffffff;
}

.codeBox .codeBoxCode > code .codeBoxLine:target {
  background-color: #76d1e6;
}

.codeBox .codeBoxHeader {
  background-color: var(--wcfHeaderBackground);
  border-bottom: 1px solid;
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
  position: relative;
  top: 0px;
  margin: 0px 0 10px;
  padding: 5px 10px;
}

.codeBox .codeBoxHeader > .codeBoxHeadline {
  font-size: 13px;
  color: #fff;
}

.codeBox .codeBoxCode > code {
  padding-bottom: 10px;
}

.codeBox .icon {
  color: #fff;
}

.codeBox > .toggleButton {
  border-top: none;
  box-shadow: none;
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
  background-color: var(--wcfHeaderMenuDropdownBackground);
  margin: 10px;
  display: block;
  text-align: center;
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--wcfContentText);
  transition: all 0.1s;
}

.codeBox.collapsed > .toggleButton {
  border-top: none;
  box-shadow: none;
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
  background-color: var(--wcfContentContainerBackground);
  margin: 10px;
  display: block;
  text-align: center;
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--wcfContentText);
  transition: all 0.1s;
}

.codeBox > .toggleButton:hover, .codeBox.collapsed > .toggleButton:hover {
  background-color: #f3f3f3;
}

.codeBox.collapsed > .toggleButton::before {
  content: "\f0d7";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 14px;
  margin-right: 5px;
  vertical-align: -1px;
  background-image: none;
  position: relative;
  top: 0px;
}

.codeBox > .toggleButton::before {
  content: "\f0d8";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 14px;
  margin-right: 5px;
  vertical-align: -1px;
}

.codeBox .codeBoxCode {
  padding-left: 56px;
}

.codeBox .codeBoxCode > code .codeBoxLine > a {
  width: 50px;
  padding-right: 10px;
  color: #ffffff;
}

.anchorFixedHeader:not(.disableAnchorFixedHeader):target .codeBoxHeader {
  top: 0px;
}

@media screen and (max-width: 1024px) {
  .codeBox.collapsed > .toggleButton {
    left: 0;
  }
}
.codeBox .codeBoxCode > code {
  padding: 10px 0px;
}

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
  background: rgba(255, 255, 255, 0.7);
}

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 {
  background: rgba(255, 255, 255, 0.7);
}

/* ================================================================ Quote WSC 6 Modification by Gino Zantarelli */
woltlab-quote {
  background-color: #272934;
  box-shadow: none;
  border-radius: 0px;
  padding: 10px 10px;
}

.quoteBox {
  background-color: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0px;
  padding: 10px 0px;
}

.quoteBoxIcon {
  float: left;
  margin: 0px 10px 0px 0px;
}

.quoteBoxTitle {
  color: var(--wcfContentText);
  border-bottom: 2px solid;
  padding-bottom: 1px;
  margin-right: 0px;
  margin-left: 50px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.quoteBoxTitle a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--wcfContentText);
}

span.quoteBoxTitle {
  border-bottom: none;
  margin-left: 0px;
}

.quoteBoxContent {
  background-color: rgba(0, 0, 0, 0.05);
  margin-left: 80px;
  margin-top: -15px;
  padding: 14px;
  border-radius: 6px;
}

.quoteBoxContent .codeBox > .toggleButton {
  background-color: var(--wcfButtonBackground);
  border-top: 10px solid var(--wcfFooterBoxBackground);
}

span.quoteBoxTitle {
  border-bottom: none;
}

.quoteBoxIcon {
  margin: 0px;
  width: 60px;
}

.quoteBoxIcon .userLink {
  display: none;
}

.quoteBoxIcon::before {
  content: "\f10d";
  position: relative;
  font-family: "Font Awesome 7 Free";
  font-size: 50px;
  line-height: 50px;
  width: 60px;
  height: 50px;
  display: inline-block;
  text-align: center;
  color: var(--wcfContentText);
  font-weight: 600;
}

.quoteBox.quoteBoxSimple .quoteBoxIcon::before {
  display: none;
}

.quoteBoxIcon fa-icon[solid] {
  font-size: 50px !important;
  height: 50px;
  width: 60px;
}

.message .quoteBox > .toggleButton, .message .quoteBox.collapsed > .toggleButton, .message.messageSidebarOrientationLeft .quoteBox > .toggleButton, .message.messageSidebarOrientationLeft .quoteBox.collapsed > .toggleButton {
  border-top: none;
  background-color: var(--wcfContentLink);
  margin-left: 80px;
  box-shadow: none;
  border-radius: 3px;
  padding: 2px 6px;
  color: #fff;
  transition: all 0.1s;
}

.message .quoteBox > .toggleButton:hover, .message .quoteBox.collapsed > .toggleButton:hover, .message.messageSidebarOrientationLeft .quoteBox > .toggleButton:hover, .message.messageSidebarOrientationLeft .quoteBox.collapsed > .toggleButton:hover {
  background-color: var(--wcfEditorButtonBackgroundActive);
}

.quoteBox > .toggleButton {
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
}

.quoteBox.collapsed > .toggleButton::before {
  content: "\f0d7";
  font-family: "Font Awesome 7 Free";
  font-size: 14px;
  font-weight: 600;
  margin-right: 5px;
  vertical-align: -1px;
}

.quoteBox > .toggleButton::before {
  content: "\f0d8";
  font-family: "Font Awesome 7 Free";
  font-size: 14px;
  font-weight: 600;
  margin-right: 5px;
  vertical-align: -1px;
}

.quoteBox.collapsibleBbcode.quoteBoxSimple .quoteBoxContent {
  background-color: rgba(0, 0, 0, 0.08);
  padding: 10px;
  border-radius: 3px;
}

.quoteBox.collapsed > .quoteBoxContent {
  margin-bottom: 25px;
}

.quoteBox.collapsed > .toggleButton {
  right: 0px;
  margin-top: 10px;
}

.quoteBox > .toggleButton {
  margin-right: 0px;
}

/* ================================================================ Spoiler WSC 6 Modification by Gino Zantarelli */
.spoilerBox {
  border: none;
  border-radius: var(--wcfBorderRadius);
  color: var(--wcfHeaderText);
}

.spoilerBox summary.spoilerSummary::before {
  content: "\f070";
  font-family: "Font Awesome 7 Free";
  font-size: 16px;
  text-shadow: none !important;
  font-weight: 400;
  width: 20px;
  margin-right: 10px;
  display: inline-block;
  text-align: center;
}

.spoilerBox[open] summary.spoilerSummary::before {
  content: "\f06e";
  font-family: "Font Awesome 7 Free";
  font-size: 16px;
  text-shadow: none !important;
  font-weight: 400;
  width: 20px;
  margin-right: 10px;
  display: inline-block;
}

.spoilerBox[open] .spoilerContent {
  padding: 10px;
  background-color: #f2f2f2;
  color: var(--wcfContentText);
  border-radius: 0px 0px var(--wcfBorderRadius) var(--wcfBorderRadius);
}

.spoilerSummary {
  background-color: var(--wcfHeaderBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 8px 12px;
}

.spoilerBox[open=""] .spoilerSummary {
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
}

summary.spoilerSummary::marker {
  content: "";
}

/* ================================================================ Inline Code */
.inlineCode, kbd {
  background-color: #fff !important;
  border: 1px solid #000000 !important;
  border-radius: 0px !important;
  color: #000 !important;
}

/* ================================================================ Attachments */
.attachmentThumbnail {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 0px;
  border: 5px solid #fff;
  border-radius: 2px;
}

.attachmentThumbnail .attachmentMetaData {
  background-color: #fff;
  color: #444;
}

.attachmentThumbnail .attachmentFilename {
  font-size: 14px;
  font-family: consolas;
}

.attachmentThumbnail .attachmentThumbnailImage {
  background-color: #3a3d42;
}

/* ================================================================ Embedded Attachments Hover Mod by Gino Zantarelli */
.embeddedAttachmentLink.jsImageViewerEnabled:hover::before {
  content: "";
  display: block;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-animation: fadein 300ms;
  animation: fadein 300ms;
}

.embeddedAttachmentLink.jsImageViewerEnabled {
  border: none;
  padding: 0px;
  margin: 2px;
}

.embeddedAttachmentLinkEnlarge {
  display: none;
}

.embeddedAttachmentLink.jsImageViewerEnabled:hover::after {
  content: "\f00e";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
  bottom: 0px;
  color: white;
  display: block;
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-style: normal;
  font-size: 50px;
  border-radius: 0px;
  box-shadow: none;
  text-align: center;
  margin-top: -25px;
  line-height: 50px;
  opacity: 1;
  background-color: transparent;
  -webkit-animation: fadein 500ms;
  animation: fadein 500ms;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ================================================================ CKEditor 5 by Gino Zantarelli */
.ck.ck-toolbar {
  background-color: transparent;
  border: none;
  margin: 3px;
}

.ck.ck-editor__top .ck-sticky-panel .ck-toolbar .ck.ck-toolbar__items:not(.ck-dropdown__panel .ck-toolbar .ck.ck-toolbar__items) {
  margin-left: -3px;
}

.ck.ck-toolbar .ck.ck-toolbar__separator {
  background: transparent;
  border-left: 1px solid var(--wcfContentBorder);
  height: 26px;
  margin-top: 6px !important;
}

.ck.ck-toolbar .ck.ck-button.ck-off.ck-button:not(.ck-dropdown__panel .ck.ck-button.ck-off.ck-button) {
  background-color: var(--wcfEditorButtonBackground);
}

.ck.ck-toolbar .ck.ck-button.ck-off.ck-button:not(.ck-dropdown__panel .ck.ck-button.ck-off.ck-button):hover {
  background-color: var(--wcfEditorButtonBackgroundActive);
}

.ck.ck-content.ck-editor__editable {
  background-color: #ececec;
  border: none !important;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--wcfBorderRadiusContainer) !important;
}

.ck.ck-list__item .ck-button {
  background-color: transparent !important;
  color: #151515 !important;
}

button.ck.ck-button.ck-disabled.ck-off.ck-button_with-text {
  background-color: transparent !important;
  color: #151515 !important;
}

.ck.ck-list__item .ck-button:hover:not(.ck-disabled) {
  background: var(--ck-color-list-button-hover-background) !important;
}

.ck.ck-input:focus {
  box-shadow: none;
}

.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active:focus, .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active:focus {
  box-shadow: none;
}

.ck.ck-balloon-panel[class*=arrow_n]::before {
  border-color: transparent transparent #ffffff transparent;
  margin-top: calc(var(--ck-balloon-border-width) * 1);
}

.ck.ck-balloon-panel[class*=arrow_s]::before {
  border-color: #ffffff transparent transparent;
}

.ck.ck-balloon-panel.ck-toolbar-container[class*=arrow_s]::after {
  border-top-color: var(--wcfContentContainerBackground);
}

.ck.ck-balloon-panel.ck-toolbar-container[class*=arrow_n]::after {
  border-bottom-color: var(--wcfContentContainerBackground);
}

.ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::after, .ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::before {
  margin-top: 2px;
}

.ck.ck-button.ck-disabled.ck-off {
  background-color: #dfdfdf !important;
}

.ck.ck-button.ck-disabled.ck-off .ck.ck-icon.ck-icon_inherit-color :not([fill]) {
  fill: #848484;
}

.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) {
  background: var(--ck-color-button-on-background);
}

.ck.ck-splitbutton:not(:hover, .ck-splitbutton_open) > .ck-splitbutton__arrow::before {
  display: none;
}

.ck.ck-toolbar__items .ck.ck-splitbutton > .ck-splitbutton__arrow {
  margin-left: 1px;
}

[dir=ltr] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
  display: none;
}

.ck.ck-button:active, .ck.ck-button:focus, a.ck.ck-button:active, a.ck.ck-button:focus {
  border: none;
  box-shadow: none;
}

.ck.ck-button, a.ck.ck-button {
  transition: none;
}

.ck.ck-button.ck-off.ck-splitbutton__arrow {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-left: none !important;
}

.ck.ck-button.ck-splitbutton__action {
  border-top-right-radius: unset !important;
  border-bottom-right-radius: unset !important;
}

.ck.ck-splitbutton > .ck-file-dialog-button.ck-button .ck.ck-button.ck-off {
  border-top-right-radius: unset !important;
  border-bottom-right-radius: unset !important;
}

.ck-rounded-corners .ck.ck-dropdown .ck-dropdown__panel .ck-list, .ck.ck-dropdown .ck-dropdown__panel .ck-list.ck-rounded-corners, .ck.ck-dropdown__panel.ck-dropdown__panel_se {
  border-top-left-radius: 3px;
}

.ck-rounded-corners .ck.ck-button, .ck-rounded-corners a.ck.ck-button, .ck.ck-button.ck-rounded-corners, a.ck.ck-button.ck-rounded-corners {
  border-radius: 3px;
}

.ck.ck-button.ck-off.ck-splitbutton__arrow {
  border-radius: 0px 3px 3px 0px;
}

.ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__arrow {
  border-bottom-right-radius: 3px;
}

.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.ck.ck-dropdown__panel {
  background: var(--wcfContentContainerBackground);
  border: none;
  margin-top: 3px;
}

.ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  background: var(--wcfContentContainerBackground);
}

.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  background: var(--wcfContentContainerBackground);
}

.ck .ck-insert-table-dropdown-grid-box {
  border: 1px solid var(--wcfContentText);
}

.ck-content .table table {
  border: none !important;
}

.ck-content .table table td, .ck-content .table table th {
  border: 1px solid #353946;
}

.ck-content .table td, .ck-content .table th {
  border-radius: 0px !important;
}

.ck-content pre {
  background: #0a0a0a;
  border: none;
  border-radius: var(--wcfBorderRadius);
  color: #c4c4c4;
}

.ck.ck-content .ck-woltlabspoiler {
  background-color: #e4e4e4;
  border-radius: var(--wcfBorderRadius);
}

.ck.ck-content .ck-woltlabspoiler::after {
  display: none;
}

.ck.ck-content .ck-woltlabspoiler__title::before {
  color: #202020;
  border-bottom: 1px solid;
}

.ck.ck-content blockquote {
  background-color: #e4e4e4;
  border: none;
  border-radius: var(--wcfBorderRadius);
  margin-left: 50px;
  padding: 14px;
  position: relative;
  overflow: visible;
}

.ck.ck-content blockquote::before {
  color: var(--wcfContentText);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin: 0px;
  border-bottom: 1px solid;
}

.ck.ck-content blockquote::after {
  content: "\f10d";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 30px;
  line-height: 30px;
  width: 40px;
  height: 40px;
  display: inline-block;
  text-align: center;
  color: var(--wcfContentText);
  position: absolute;
  left: -50px;
  top: 0;
}

.messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active {
  background-color: #f2f2f2;
  border: none;
  border-radius: var(--wcfBorderRadius);
  padding: 14px;
  margin-top: 10px;
}

.messageTabMenu {
  margin-top: 10px;
}

.messageTabMenu > nav.tabMenu > ul, .messageTabMenuNavigation > ul {
  background-color: transparent;
  border: none;
}

.messageTabMenu > nav.tabMenu > ul > li, .messageTabMenuNavigation > ul > li {
  border-right: none;
}

.messageTabMenu > nav.tabMenu > ul > li > a, .messageTabMenuNavigation > ul > li > a {
  background-color: var(--wcfButtonBackground);
  color: var(--wcfButtonText);
  margin-right: 5px;
  padding: 8px 12px;
  border-radius: var(--wcfBorderRadius);
  font-size: 11px;
  transition: all 0.1s;
}

.messageTabMenu > nav.tabMenu > ul > li > a fa-icon, .messageTabMenuNavigation > ul > li > a fa-icon {
  --font-size: 12px;
  --icon-size: 14px;
}

.messageTabMenu > nav.tabMenu > ul > li:hover > a, .messageTabMenuNavigation > ul > li:hover > a {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
}

.messageTabMenu > nav.tabMenu > ul > li.active > a, .messageTabMenuNavigation > ul > li.active > a {
  background-color: var(--wcfButtonPrimaryBackground);
  color: var(--wcfButtonPrimaryTextActive);
}

.messageTabMenu.messageTabMenuContent > nav {
  border-bottom: 1px solid var(--wcfContentBorder);
  margin: -5px 0px 14px 0px;
  padding: 5px 0px 7px;
}

.messageTabMenu.messageTabMenuContent > nav > ul > li:not(:last-child) {
  margin-right: 5px;
}

.messageTabMenu.messageTabMenuContent > nav > ul > li > a {
  background-color: var(--wcfButtonBackground);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: var(--wcfBorderRadius);
}

.messageTabMenu.messageTabMenuContent > nav > ul > li.active > a {
  background-color: var(--wcfButtonPrimaryBackground);
  color: var(--wcfButtonPrimaryTextActive);
}

.messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active input {
  border-color: #9a9a9a !important;
}

.messageTabMenu > .messageTabMenuContent.active {
  background-color: #f2f2f2;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners {
  background-color: var(--wcfContentContainerBackground);
  border-radius: 0px;
}

.ck.ck-icon.ck-icon_inherit-color :not([fill]) {
  fill: var(--wcfEditorButtonText);
}

.ck.ck-toolbar .ck.ck-button.ck-off.ck-button:not(.ck-dropdown__panel .ck.ck-button.ck-off.ck-button) {
  color: var(--wcfEditorButtonText);
}

.ck.ck-button.ck-off.ck-button_with-text.ck-dropdown__button {
  background-color: #9da0a4;
  color: #ffffff !important;
}

.ck.ck-button, a.ck.ck-button {
  border: none;
  background-color: var(--wcfEditorButtonBackground);
}

.sortableNode:not(:last-child) {
  border-bottom: 1px solid var(--wcfContentBorder);
}

.ckeditor5__restoreDraft__dialog {
  background-color: var(--wcfContentContainerBackground);
  border: none;
  border-radius: var(--wcfBorderRadiusContainer);
}

.ck.ck-toolbar__items fa-icon, .ck.ck-toolbar__grouped-dropdown fa-icon {
  color: var(--wcfEditorButtonText);
}

.ck.ck-button.ck-color-selector__remove-color.ck-off.ck-button_with-text span, .ck.ck-button.ck-color-selector__color-picker.ck-off.ck-button_with-text span {
  color: #fff !important;
}

.ck.ck-image-insert-form > .ck.ck-button {
  color: #fff;
}

.ck.ck-image-insert-form > .ck.ck-button.ck-off.ck-button_with-text.ck-file-dialog-button:focus span, .ck.ck-image-insert-form > .ck.ck-button.ck-off.ck-button_with-text.ck-file-dialog-button:focus:hover span,
.ck.ck-image-insert-form > .ck.ck-button.ck-off.ck-button_with-text.ck-file-dialog-button:hover span {
  color: #fff;
}

.ck.ck-image-insert-url__action-row .ck.ck-button.ck-button-save.ck-disabled.ck-off.ck-button_with-text span {
  color: var(--wcfContentText);
}

.ck.ck-image-insert-url__action-row .ck.ck-button.ck-button-save.ck-off.ck-button_with-text span {
  color: #fff;
}

.ck.ck-image-insert-url__action-row .ck.ck-button.ck-button-cancel.ck-off.ck-button_with-text span {
  color: #fff;
}

.ck.ck-image-insert-form > .ck.ck-collapsible > .ck.ck-button:hover:not(:focus) span {
  color: var(--wcfContentText);
}

.ck.ck-image-insert-form > .ck.ck-collapsible > .ck.ck-button.ck-off.ck-button_with-text .ck.ck-icon.ck-icon_inherit-color :not([fill]) {
  fill: var(--wcfContentText);
}

.ck.ck-button.ck-off.ck-button_with-text.ck-file-dialog-button .ck.ck-icon.ck-reset_all-excluded.ck-icon_inherit-color.ck-button__icon :not([fill]) {
  fill: #fff !important;
}

.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
  border: none;
}

/* ================================================================ CKEditor 5 by Gino Zantarelli */
.ck.ck-toolbar {
  background-color: transparent;
  border: none;
  margin: 3px;
}

.ck.ck-editor__top .ck-sticky-panel .ck-toolbar .ck.ck-toolbar__items:not(.ck-dropdown__panel .ck-toolbar .ck.ck-toolbar__items) {
  margin-left: -3px;
}

.ck.ck-toolbar .ck.ck-toolbar__separator {
  background: transparent;
  border-left: 1px solid var(--wcfContentBorder);
  height: 26px;
  margin-top: 6px !important;
}

.ck.ck-toolbar .ck.ck-button.ck-off.ck-button:not(.ck-dropdown__panel .ck.ck-button.ck-off.ck-button) {
  background-color: var(--wcfEditorButtonBackground);
}

.ck.ck-toolbar .ck.ck-button.ck-off.ck-button:not(.ck-dropdown__panel .ck.ck-button.ck-off.ck-button):hover {
  background-color: var(--wcfEditorButtonBackgroundActive);
}

.ck.ck-content.ck-editor__editable {
  background-color: #ececec;
  border: none !important;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--wcfBorderRadiusContainer) !important;
}

.ck.ck-list__item .ck-button {
  background-color: transparent !important;
  color: #151515 !important;
}

button.ck.ck-button.ck-disabled.ck-off.ck-button_with-text {
  background-color: transparent !important;
  color: #151515 !important;
}

.ck.ck-list__item .ck-button:hover:not(.ck-disabled) {
  background: var(--ck-color-list-button-hover-background) !important;
}

.ck.ck-input:focus {
  box-shadow: none;
}

.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-off:active:focus, .ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on:active:focus {
  box-shadow: none;
}

.ck.ck-balloon-panel[class*=arrow_n]::before {
  border-color: transparent transparent #ffffff transparent;
  margin-top: calc(var(--ck-balloon-border-width) * 1);
}

.ck.ck-balloon-panel[class*=arrow_s]::before {
  border-color: #ffffff transparent transparent;
}

.ck.ck-balloon-panel.ck-toolbar-container[class*=arrow_s]::after {
  border-top-color: var(--wcfContentContainerBackground);
}

.ck.ck-balloon-panel.ck-toolbar-container[class*=arrow_n]::after {
  border-bottom-color: var(--wcfContentContainerBackground);
}

.ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::after, .ck.ck-balloon-panel.ck-balloon-panel_arrow_nw::before {
  margin-top: 2px;
}

.ck.ck-button.ck-disabled.ck-off {
  background-color: #dfdfdf !important;
}

.ck.ck-button.ck-disabled.ck-off .ck.ck-icon.ck-icon_inherit-color :not([fill]) {
  fill: #848484;
}

.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) {
  background: var(--ck-color-button-on-background);
}

.ck.ck-splitbutton:not(:hover, .ck-splitbutton_open) > .ck-splitbutton__arrow::before {
  display: none;
}

.ck.ck-toolbar__items .ck.ck-splitbutton > .ck-splitbutton__arrow {
  margin-left: 1px;
}

[dir=ltr] .ck.ck-splitbutton:hover > .ck-splitbutton__arrow:not(.ck-disabled)::after {
  display: none;
}

.ck.ck-button:active, .ck.ck-button:focus, a.ck.ck-button:active, a.ck.ck-button:focus {
  border: none;
  box-shadow: none;
}

.ck.ck-button, a.ck.ck-button {
  transition: none;
}

.ck.ck-button.ck-off.ck-splitbutton__arrow {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-left: none !important;
}

.ck.ck-button.ck-splitbutton__action {
  border-top-right-radius: unset !important;
  border-bottom-right-radius: unset !important;
}

.ck.ck-splitbutton > .ck-file-dialog-button.ck-button .ck.ck-button.ck-off {
  border-top-right-radius: unset !important;
  border-bottom-right-radius: unset !important;
}

.ck-rounded-corners .ck.ck-dropdown .ck-dropdown__panel .ck-list, .ck.ck-dropdown .ck-dropdown__panel .ck-list.ck-rounded-corners, .ck.ck-dropdown__panel.ck-dropdown__panel_se {
  border-top-left-radius: 3px;
}

.ck-rounded-corners .ck.ck-button, .ck-rounded-corners a.ck.ck-button, .ck.ck-button.ck-rounded-corners, a.ck.ck-button.ck-rounded-corners {
  border-radius: 3px;
}

.ck.ck-button.ck-off.ck-splitbutton__arrow {
  border-radius: 0px 3px 3px 0px;
}

.ck-rounded-corners .ck.ck-splitbutton.ck-splitbutton_open > .ck-splitbutton__arrow, .ck.ck-splitbutton.ck-splitbutton_open.ck-rounded-corners > .ck-splitbutton__arrow {
  border-bottom-right-radius: 3px;
}

.ck.ck-dropdown .ck-button.ck-dropdown__button.ck-on {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.ck.ck-dropdown__panel {
  background: var(--wcfContentContainerBackground);
  border: none;
  margin-top: 3px;
}

.ck.ck-labeled-field-view.ck-disabled.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  background: var(--wcfContentContainerBackground);
}

.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  background: var(--wcfContentContainerBackground);
}

.ck .ck-insert-table-dropdown-grid-box {
  border: 1px solid var(--wcfContentText);
}

.ck-content .table table td, .ck-content .table table th {
  border: 1px solid var(--wcfEditorTableBorder);
}

.ck-content .table table {
  border: none;
}

.ck-content .table td, .ck-content .table th {
  border-radius: 0px !important;
}

.ck-content pre {
  background: #0a0a0a;
  border: none;
  border-radius: var(--wcfBorderRadius);
  color: #c4c4c4;
}

.ck.ck-content .ck-woltlabspoiler {
  background-color: #e4e4e4;
  border-radius: var(--wcfBorderRadius);
}

.ck.ck-content .ck-woltlabspoiler::after {
  display: none;
}

.ck.ck-content .ck-woltlabspoiler__title::before {
  color: #202020;
  border-bottom: 1px solid;
}

.ck.ck-content blockquote {
  background-color: #e4e4e4;
  border: none;
  border-radius: var(--wcfBorderRadius);
  margin-left: 50px;
  padding: 14px;
  position: relative;
  overflow: visible;
}

.ck.ck-content blockquote::before {
  color: var(--wcfContentText);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin: 0px;
  border-bottom: 1px solid;
}

.ck.ck-content blockquote::after {
  content: "\f10d";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 30px;
  line-height: 30px;
  width: 40px;
  height: 40px;
  display: inline-block;
  text-align: center;
  color: var(--wcfContentText);
  position: absolute;
  left: -50px;
  top: 0;
}

.messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active {
  background-color: #f2f2f2;
  border: none;
  border-radius: var(--wcfBorderRadius);
  padding: 14px;
  margin-top: 10px;
}

.messageTabMenu {
  margin-top: 10px;
}

.messageTabMenu > nav.tabMenu > ul, .messageTabMenuNavigation > ul {
  background-color: transparent;
  border: none;
}

.messageTabMenu > nav.tabMenu > ul > li, .messageTabMenuNavigation > ul > li {
  border-right: none;
}

.messageTabMenu > nav.tabMenu > ul > li > a, .messageTabMenuNavigation > ul > li > a {
  background-color: var(--wcfButtonBackground);
  color: var(--wcfButtonText);
  margin-right: 5px;
  padding: 8px 12px;
  border-radius: var(--wcfBorderRadius);
  font-size: 11px;
  transition: all 0.1s;
}

.messageTabMenu > nav.tabMenu > ul > li > a fa-icon, .messageTabMenuNavigation > ul > li > a fa-icon {
  --font-size: 12px;
  --icon-size: 14px;
}

.messageTabMenu > nav.tabMenu > ul > li:hover > a, .messageTabMenuNavigation > ul > li:hover > a {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
}

.messageTabMenu > nav.tabMenu > ul > li.active > a, .messageTabMenuNavigation > ul > li.active > a {
  background-color: var(--wcfButtonPrimaryBackground);
  color: var(--wcfButtonPrimaryTextActive);
}

.messageTabMenu.messageTabMenuContent > nav {
  border-bottom: 1px solid var(--wcfContentBorder);
  margin: -5px 0px 14px 0px;
  padding: 5px 0px 7px;
}

.messageTabMenu.messageTabMenuContent > nav > ul > li:not(:last-child) {
  margin-right: 5px;
}

.messageTabMenu.messageTabMenuContent > nav > ul > li > a {
  background-color: var(--wcfButtonBackground);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: var(--wcfBorderRadius);
}

.messageTabMenu.messageTabMenuContent > nav > ul > li.active > a {
  background-color: var(--wcfButtonPrimaryBackground);
  color: var(--wcfButtonPrimaryTextActive);
}

.messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active input {
  border-color: #9a9a9a !important;
}

.messageTabMenu > .messageTabMenuContent.active {
  background-color: #f2f2f2;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners {
  background-color: var(--wcfContentContainerBackground);
  border-radius: 0px;
}

.ck.ck-icon.ck-icon_inherit-color :not([fill]) {
  fill: var(--wcfEditorButtonText);
}

.ck.ck-toolbar .ck.ck-button.ck-off.ck-button:not(.ck-dropdown__panel .ck.ck-button.ck-off.ck-button) {
  color: var(--wcfEditorButtonText);
}

.ck.ck-button.ck-off.ck-button_with-text.ck-dropdown__button {
  background-color: #9da0a4;
  color: #ffffff !important;
}

.ck.ck-button, a.ck.ck-button {
  border: none;
  background-color: var(--wcfEditorButtonBackground);
}

.sortableNode:not(:last-child) {
  border-bottom: 1px solid var(--wcfContentBorder);
}

.ckeditor5__restoreDraft__dialog {
  background-color: var(--wcfContentContainerBackground);
  border: none;
  border-radius: var(--wcfBorderRadiusContainer);
}

.ck.ck-toolbar__items fa-icon, .ck.ck-toolbar__grouped-dropdown fa-icon {
  color: var(--wcfEditorButtonText);
}

.ck.ck-button.ck-color-selector__remove-color.ck-off.ck-button_with-text span, .ck.ck-button.ck-color-selector__color-picker.ck-off.ck-button_with-text span {
  color: #fff !important;
}

.ck.ck-image-insert-form > .ck.ck-button {
  color: #fff;
}

.ck.ck-image-insert-form > .ck.ck-button.ck-off.ck-button_with-text.ck-file-dialog-button:focus span, .ck.ck-image-insert-form > .ck.ck-button.ck-off.ck-button_with-text.ck-file-dialog-button:focus:hover span,
.ck.ck-image-insert-form > .ck.ck-button.ck-off.ck-button_with-text.ck-file-dialog-button:hover span {
  color: #fff;
}

.ck.ck-image-insert-url__action-row .ck.ck-button.ck-button-save.ck-disabled.ck-off.ck-button_with-text span {
  color: var(--wcfContentText);
}

.ck.ck-image-insert-url__action-row .ck.ck-button.ck-button-save.ck-off.ck-button_with-text span {
  color: #fff;
}

.ck.ck-image-insert-url__action-row .ck.ck-button.ck-button-cancel.ck-off.ck-button_with-text span {
  color: #fff;
}

.ck.ck-image-insert-form > .ck.ck-collapsible > .ck.ck-button:hover:not(:focus) span {
  color: var(--wcfContentText);
}

.ck.ck-image-insert-form > .ck.ck-collapsible > .ck.ck-button.ck-off.ck-button_with-text .ck.ck-icon.ck-icon_inherit-color :not([fill]) {
  fill: var(--wcfContentText);
}

.ck.ck-button.ck-off.ck-button_with-text.ck-file-dialog-button .ck.ck-icon.ck-reset_all-excluded.ck-icon_inherit-color.ck-button__icon :not([fill]) {
  fill: #fff !important;
}

.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
  border: none;
}

.ck.ck-image-insert-form > .ck.ck-button:first-child {
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px !important;
}

.ck.ck-image-insert-form > .ck.ck-button:last-child {
  border-radius: 0px 0px var(--wcfBorderRadius) var(--wcfBorderRadius) !important;
}

.ck.ck-dialog.ck-dialog_modal {
  background-color: var(--wcfContentContainerBackground);
}

.ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
  background: var(--wcfContentContainerBackground) !important;
}

/* ================================================================ Best Answer by Gino Zantarelli */
.wbbThreadPostList .wbbGoToBestAnswer {
  padding: 15px 0px !important;
}

.wbbThreadPostList .wbbGoToBestAnswer .button.buttonPrimary {
  box-shadow: 0 0 0 0 #2e872e;
  -webkit-animation: pulsereg 2s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsereg 2s infinite cubic-bezier(0.66, 0, 0, 1);
  transition: background-color 0.2s;
  background-color: #2e872e !important;
  color: #ffffff;
}

.wbbThreadPostList .wbbGoToBestAnswer .button.buttonPrimary:hover {
  background-color: #246e24 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  animation: none;
}

.wbbThreadPostList .wbbGoToBestAnswer .button.buttonPrimary::before {
  content: "\f0eb";
  width: 18px;
  height: 22px;
  display: inline-block;
  text-align: center;
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  margin-right: 4px;
}

@media screen and (min-width: 1025px), print {
  .wbbPostBestAnswer .message::before {
    content: "\f0eb";
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #090;
    display: inline-block;
    text-align: center;
    color: #fff;
    z-index: 1;
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    border-radius: var(--wcfBorderRadius);
    margin-top: 4px;
    margin-left: 4px;
  }
  .wbbThreadPostList .wbbGoToBestAnswer::before {
    content: "\f054\f054\f054";
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    font-size: 22px;
    line-height: 22px;
    display: inline-block;
    vertical-align: -4px;
    padding-right: 10px;
    color: var(--wcfContentText);
  }
  .wbbThreadPostList .wbbGoToBestAnswer::after {
    content: "\f053\f053\f053";
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    font-size: 22px;
    line-height: 22px;
    display: inline-block;
    vertical-align: -4px;
    padding-left: 10px;
    color: var(--wcfContentText);
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .wbbPostBestAnswer .message::before {
    content: "\f0eb";
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #090;
    display: inline-block;
    text-align: center;
    color: #fff;
    z-index: 1;
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    border-radius: var(--wcfBorderRadius);
    margin-top: 4px;
    margin-left: 4px;
  }
  .wbbThreadPostList .wbbGoToBestAnswer::before {
    content: "\f054";
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    font-size: 20px;
    line-height: 22px;
    display: inline-block;
    vertical-align: -2px;
    padding-right: 10px;
    color: var(--wcfContentText);
  }
  .wbbThreadPostList .wbbGoToBestAnswer::after {
    content: "\f053";
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    font-size: 20px;
    line-height: 22px;
    display: inline-block;
    vertical-align: -2px;
    padding-left: 10px;
    color: var(--wcfContentText);
  }
}
/* ================================================================ Content Item */
.contentItem {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: none;
}

.contentItemImage {
  margin: 14px 14px 0px;
  border-radius: var(--wcfBorderRadius);
}

.contentItemImageLarge .contentItemImageElement {
  border-radius: var(--wcfBorderRadius);
}

.contentItemImagePreview {
  box-shadow: none;
}

.contentItemContent {
  padding: 14px 14px 10px;
}

.contentItemContentLinks {
  padding: 0 14px 10px 14px;
}

.contentItemContentLinks .blogEntryLink {
  border-bottom: 1px dotted;
  font-style: italic;
}

.contentItemMeta {
  border-top: 2px solid var(--wcfContentBackground);
  padding: 10px 14px;
}

.contentItemContentTruncate::after {
  background-image: linear-gradient(to top, var(--wcfContentContainerBackground), rgba(var(--wcfContentBackground-rgb)/0));
}

.boxTitle + .boxContent .containerList.blogList .contentItem.contentItemMultiColumn.blog .contentItemContentTruncate::after {
  background-image: linear-gradient(to top, var(--wcfContentBackground), rgba(var(--wcfContentBackground-rgb)/0));
}

.contentItemTitle {
  font-weight: 500;
}

.contentItemMetaAuthor {
  font-size: 14px;
}

.contentItemImage {
  overflow: hidden;
}

.contentItemLink:hover .contentItemImageLarge .contentItemImageElement {
  transform: scale(1.05);
}

.contentItemLink .contentItemImageLarge .contentItemImageElement {
  transition: transform 0.24s linear;
}

/* ================================================================ Tab Menu by Gino Zantarelli */
.tabMenu {
  margin-bottom: 15px;
}

.content > .section .tabMenuContent > .section:first-child, .content > .section .tabMenuContent > form > .section:first-child {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  margin-top: 0px;
  padding: 20px;
}

.tabMenu > ul {
  border-bottom: none;
}

.tabMenu::after {
  content: "";
  display: block;
  border-bottom: 8px solid var(--wcfHeaderBackground);
  border-radius: 0px var(--wcfBorderRadius) var(--wcfBorderRadius) var(--wcfBorderRadius);
}

.tabMenu > ul > li::before {
  bottom: 0px;
  border: none;
}

.tabMenu > ul > li:not(:last-child), .menu > ul > li:not(:last-child) {
  margin-right: 2px;
}

.tabMenu > ul > li > a {
  background-color: var(--wcfContentContainerBackground);
  padding: 7px 14px;
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
  transition: all 0.15s;
  font-size: 13px;
  color: var(--wcfContentLink);
  font-weight: 400;
}

.tabMenu > ul > li:hover > a {
  background-color: var(--wcfContentContainerBackground);
  margin-top: -2px;
  padding: 6px 14px 10px;
}

.tabMenu > ul > li.active > a {
  background-color: var(--wcfHeaderBackground);
  padding: 8px 14px 6px;
  margin-top: 0px;
  margin-bottom: -1px;
  font-size: 13px;
  color: #ffffff !important;
}

.tabMenu > ul > li.active > a::before {
  content: "\f0da";
  font-family: "Font Awesome 7 Free";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  padding-right: 5px;
}

#about.tabMenuContent {
  padding: 10px;
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
}

.box48.jsCommentAdd, .containerList > .comment {
  background-color: var(--wcfContentContainerBackground) !important;
}

.tabMenuContent .containerList > li.containerListButtonGroup {
  background-color: var(--wcfContentContainerBackground) !important;
}

#wall.tabMenuContent, #recentActivity.tabMenuContent, #likes.tabMenuContent, #blogs.tabMenuContent {
  background-color: transparent;
  padding: 0px;
}

#blogList.section {
  background-color: transparent;
  padding: 0px !important;
}

.main > div .userProfileContent .section {
  padding: 10px !important;
}

.main > div .userProfileContent .section .info {
  margin: -20px;
}

.main > div .userProfileContent .section:not(:first-child) {
  margin-top: 10px;
}

#overview.filebaseFileContent {
  background-color: transparent;
  padding: 0px;
}

#overview.filebaseFileContent > .section:first-child {
  padding: 20px;
  border-radius: var(--wcfBorderRadius);
}

#overview.filebaseFileContent > .section .section:first-child {
  margin-top: 0px;
}

.section.tabMenuContainer[data-type="com.woltlab.filebase.file"] .tabMenuContent {
  background-color: transparent;
  padding: 0px;
}

.section.tabMenuContainer[data-type="com.woltlab.filebase.file"] .tabMenuContent .section {
  background-color: transparent;
  padding: 0px;
}

.filebaseFileContent .filebaseFileTeaser {
  background-color: #ebebeb;
  border-radius: var(--wcfBorderRadius);
  margin-bottom: 20px;
  padding: 10px 16px 11px;
  color: var(--wcfContentLink);
  font-weight: 400;
}

#tpl_calendar_yearly .tabMenuContent {
  padding: 0px 20px 20px;
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
}

#tpl_calendar_yearly .tabMenuContent .section:not(.sectionContainerList) > .sectionTitle {
  border-bottom: none;
  background-color: var(--wcfEditorButtonBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 6px 14px;
  font-size: 16px;
}

#tpl_calendar_yearly .tabMenuContent .section:not(.sectionContainerList) > .sectionTitle a {
  color: #ffffff !important;
}

#tpl_calendar_weekly .tabMenuContent, .content > .section .tabMenuContent > .sectionContainerList.calendarWeekView {
  background-color: transparent;
  padding: 0px;
}

#reviews.tabMenuContent .info {
  margin: 0px;
}

.menu > ul > li:not(:last-child) {
  margin-right: 5px !important;
}

.menu > ul {
  border-bottom: none;
}

.menu > ul > li::before {
  border-top: none !important;
}

.menu > ul > li > a {
  background-color: var(--wcfFooterBackground);
  color: #ffffff;
  padding: 5px 10px;
  font-size: 12px !important;
  border-radius: 2px;
}

.menu > ul > li::before {
  border-top: 2px solid #393f4c;
}

.menu > ul > li.active > a {
  background-color: var(--wcfHeaderMenuDropdownBackgroundActive);
}

.dialogContainer > .dialogContent #galleryImageBrowserAlbum .section, .dialogContainer > .dialogContent #galleryImageBrowserImageList .section {
  margin-top: 0px;
}

/* ================================================================ Comments */
.commentAdd__content.jsOuterEditorContainer {
  background-color: var(--wcfContentContainerBackground);
  padding: 10px;
  border-radius: var(--wcfBorderRadius);
}

.commentAdd__content--collapsed.jsOuterEditorContainer {
  background-color: var(--wcfContentContainerBackground) !important;
  padding: 0px !important;
}

.commentAdd {
  padding: 0px 0px 3px;
  column-gap: 0px;
}

.commentAdd__avatar {
  display: none;
}

.comment {
  padding: 0px;
  row-gap: 0px;
}

.comment__footer {
  margin-top: 7px;
  padding-left: 65px;
}

.commentResponseList__item {
  border-top: none;
  padding-top: 0px;
}

.commentList {
  margin-top: 5px;
  padding: 0px;
}

.commentList__item:not(:first-child) {
  background-color: var(--wcfContentContainerBackground);
  padding: 10px;
  border-radius: var(--wcfBorderRadius);
  border-top: none;
  margin-top: -5px;
}

.comment__message {
  background-color: #ebebeb;
  margin-top: -20px;
  margin-left: 65px;
  padding: 6px 10px;
  border-radius: var(--wcfBorderRadiusContainer);
}

.comment__message::before {
  content: "";
  display: block;
  margin-left: -18px;
  border-top: 14px solid #ebebeb;
  border-left: 10px solid transparent;
  height: 0;
  position: absolute;
}

.comment__footer {
  grid-template-areas: "buttons reactions";
}

.comment__responses {
  margin-top: 10px;
  padding-left: 42px;
}

.commentResponse .reactionSummary {
  flex-wrap: nowrap;
}

.commentResponse {
  row-gap: 0px;
  margin-top: -7px;
  padding: 10px 0px;
  border-top: 1px dashed var(--wcfContentBorderInner);
}

.commentResponse__message {
  background-color: #efefef;
  margin-top: -5px;
  margin-left: 48px;
  padding: 6px 10px;
  border-radius: var(--wcfBorderRadiusContainer);
}

.commentResponse__message::before {
  content: "";
  display: block;
  margin-left: -18px;
  border-top: 14px solid #efefef;
  border-left: 10px solid transparent;
  height: 0;
  position: absolute;
}

.comment__permalink, .commentResponse__permalink {
  font-size: 10px;
}

.commentResponseAdd {
  border-top: none;
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  margin-top: 6px;
}

.commentAdd__placeholder fa-icon[solid][name=reply] {
  --font-size: 0px;
}

.commentAdd__content--collapsed .commentAdd__placeholder {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 20px;
}

.commentList .commentList__item.jsComment {
  background-color: var(--wcfContentContainerBackground) !important;
  padding: 10px;
  border-radius: var(--wcfBorderRadius);
  border-top: none;
}

.commentResponse__footer {
  grid-template-areas: "buttons reactions";
  margin-top: 5px;
  padding-left: 47px;
}

.comment__button.comment__button--reply.button.small {
  padding: 5px 8px;
  font-size: 11px;
  text-transform: none;
}

.commentResponseList__item {
  border-top: none;
  padding-top: 0px;
}

.comment__header {
  display: flex;
  position: relative;
}

.comment__author__link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.comment .comment__author {
  align-self: start;
  display: inline-block;
}

.comment .comment__date {
  display: inline-block;
  grid-area: author;
}

.comment__permalink {
  font-size: 10px;
  letter-spacing: -0.2px;
}

.comment__permalink::before {
  color: var(--wcfContentText);
  content: "·";
  margin-right: 5px;
  margin-left: -5px;
}

.comment__menu {
  position: absolute;
  right: 0px;
}

.comment__avatar .userAvatarImage {
  width: 48px;
  height: 48px;
}

.commentResponseList {
  row-gap: 0px;
}

.commentResponse__header {
  display: flex;
  position: relative;
}

.commentResponse__author__link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.commentResponse__author {
  align-self: start;
  display: inline-block;
}

.commentResponse__date {
  display: inline-block;
  grid-area: author;
}

.commentResponse__permalink {
  font-size: 10px;
  letter-spacing: -0.2px;
}

.commentResponse__permalink::before {
  color: var(--wcfContentText);
  content: "·";
  margin-right: 5px;
  margin-left: -5px;
}

.commentResponse__menu {
  position: absolute;
  right: 0px;
}

.button.small.commentLoadNextResponses__button {
  margin-left: 48px;
  padding: 5px 8px;
  font-size: 11px;
  text-transform: none;
}

.button.small.commentLoadNextResponses__button::before {
  content: "\f101";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 10px;
  padding-right: 2px;
  font-style: normal;
}

.comment + .comment__responses .commentResponseList {
  border-top: 1px solid var(--wcfContentContainerBorder);
}

.comment__buttons {
  gap: 5px;
}

.comment__button.comment__button--react.button.small {
  padding: 3px 5px;
}

.comment__button.comment__button--react.button.small fa-icon {
  --font-size: 12px;
  --icon-size: 14px;
}

.commentResponse__editor {
  padding: 4px 0px;
}

.commentList .comment__message .formSubmit {
  margin-bottom: 10px;
}

.commentResponse__footer {
  grid-template-areas: "buttons reactions";
  margin-top: 5px;
}

.commentResponse__button.commentResponse__button--react.button.small {
  padding: 5px 4px;
}

.commentResponse__button.commentResponse__button--react.button.small fa-icon {
  --font-size: 12px;
  --icon-size: 14px;
}

.comment + .comment__responses .commentResponseList {
  border-top: none;
}

.commentAdd__placeholder fa-icon[solid]::before {
  content: "\f044";
  font-family: "Font Awesome 7 Free";
  font-weight: 100 !important;
  height: 32px;
  line-height: 32px;
  width: 34px;
  text-align: center;
  display: block;
  font-size: 30px;
  color: var(--wcfContentText);
}

.comment__editor .ck.ck-toolbar.ck-toolbar_grouping {
  border-radius: var(--wcfBorderRadius) !important;
  margin-bottom: 10px;
  padding: 2px 8px;
}

.comment__editor .ck.ck-content.ck-editor__editable {
  background-color: #cecece;
}

.comment .htmlContent.userMessage .codeBox, .comment .userMessage.ck.ck-content.ck-editor__editable .codeBox, .comment .messageBody > .userMessage.messageText .codeBox, .comment .messageSignature > div.userMessage .codeBox {
  margin: 4px 0px !important;
}

/* ================================================================ Sidebar */
.boxesSidebarLeft .box:not(.boxBorderless), .boxesSidebarRight .box:not(.boxBorderless) {
  border: none;
}

@media screen and (min-width: 1025px), print {
  .boxesSidebarLeft #sidebarForm:not(:first-child), .boxesSidebarRight #sidebarForm:not(:first-child) {
    margin-top: 30px;
  }
}
.boxesSidebarLeft .boxTitle, .boxesSidebarRight .boxTitle {
  background-color: var(--wcfHeaderBackground);
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
  color: var(--wcfSidebarHeadlineText);
  font-size: 14px;
  font-weight: 400;
  padding: 11px 16px 10px;
  margin: -20px -20px 15px;
}

.sidebar .boxContent + .boxTitle {
  margin-top: 20px !important;
  border-radius: 0px;
}

.sidebar .tabularBoxTitle > header {
  padding: 11px 16px 10px;
}

.sidebar .tabularBoxTitle > header > h2 {
  font-size: 14px;
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::before, .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::before {
  content: "User Info";
  display: block;
  background-color: var(--wcfHeaderBackground);
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
  margin: -20px -20px 20px;
  padding: 11px 16px 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--wcfSidebarHeadlineText);
}

.sidebar .boxContent.box96::before {
  content: "User Info" !important;
  display: block !important;
  position: absolute;
  right: 0;
  left: 0px;
  top: 0px;
  background-color: var(--wcfHeaderBackground);
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
  margin: -64px -16px 40px;
  padding: 11px 16px 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--wcfSidebarHeadlineText);
}

.sidebar .boxContent.box96 {
  margin: 44px -4px 0px;
  position: relative;
}

.sidebar .boxContent + .boxTitle {
  margin-top: 20px !important;
}

.boxesSidebarLeft .box.boxInfo .boxTitle, .boxesSidebarRight .box.boxInfo .boxTitle {
  background-color: #86cdf1;
  background-image: none;
}

.boxesSidebarLeft .box.boxSuccess .boxTitle, .boxesSidebarRight .box.boxSuccess .boxTitle {
  background-color: rgb(111, 173, 85);
  background-image: none;
}

.boxesSidebarLeft .box.boxError .boxTitle, .boxesSidebarRight .box.boxError .boxTitle {
  background-color: rgb(200, 54, 54);
  background-image: none;
}

.boxesSidebarLeft .box.boxWarning .boxTitle, .boxesSidebarRight .box.boxWarning .boxTitle {
  background-color: rgb(246, 204, 102);
  background-image: none;
  color: #463622;
}

.boxesSidebarLeft .box.boxError .boxTitle, .boxesSidebarRight .box.boxError .boxTitle, .boxesSidebarLeft .box.boxInfo .boxTitle, .boxesSidebarRight .box.boxInfo .boxTitle, .boxesSidebarLeft .box.boxSuccess .boxTitle, .boxesSidebarRight .box.boxSuccess .boxTitle {
  color: #ffffff !important;
}

.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) {
  border-bottom: 1px dotted;
}

.boxesSidebarLeft .box .boxMenu .boxMenuLink::before, .boxesSidebarRight .box .boxMenu .boxMenuLink::before {
  content: "\f10c";
  font-family: "Font Awesome 7 Free";
  font-weight: 100;
  padding-right: 5px;
  font-size: 10px;
  line-height: 22px;
}

.boxesSidebarLeft .box .boxMenu .boxMenuLink:hover::before, .boxesSidebarRight .box .boxMenu .boxMenuLink:hover::before {
  content: "\f192";
}

.boxesSidebarLeft .box .boxMenu li.active > .boxMenuLink::before, .boxesSidebarRight .box .boxMenu li.active > .boxMenuLink::before {
  content: "\f111";
  font-weight: 600;
}

.boxesSidebarLeft .box .boxMenu .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuLink {
  padding: 1px 20px;
  color: var(--wcfSidebarText);
  transition: all 0.2s;
  letter-spacing: -0.5;
}

.boxesSidebarLeft .box .boxMenu .boxMenuLink:hover, .boxesSidebarRight .box .boxMenu .boxMenuLink:hover {
  color: var(--wcfSidebarDimmedText);
}

.boxesSidebarLeft .box .boxMenu li.active > .boxMenuLink, .boxesSidebarRight .box .boxMenu li.active > .boxMenuLink {
  background-color: var(--wcfSidebarBackground);
  color: var(--wcfSidebarText) !important;
  font-weight: 500;
}

.sidebar .boxMenu .calendarCategoryEventColor {
  border-radius: 4px;
  height: 4px;
  width: 9px;
}

.boxesSidebarLeft .box.boxInfo:not(.box[data-box-identifier*="com.woltlab.wcf.RegisterButton"]) .formSubmit, .boxesSidebarRight .box.boxInfo:not(.box[data-box-identifier*="com.woltlab.wcf.RegisterButton"]) .formSubmit {
  display: block;
  text-align: center;
}

.boxesSidebarLeft .box.boxInfo:not(.box[data-box-identifier*="com.woltlab.wcf.RegisterButton"]) .button.buttonPrimary, .boxesSidebarRight .box.boxInfo:not(.box[data-box-identifier*="com.woltlab.wcf.RegisterButton"]) .button.buttonPrimary {
  width: 100%;
}

.boxesSidebarLeft .box.boxInfo:not(.box[data-box-identifier*="com.woltlab.wcf.RegisterButton"]) small, .boxesSidebarRight .box.boxInfo:not(.box[data-box-identifier*="com.woltlab.wcf.RegisterButton"]) small {
  color: var(--wcfStatusInfoLink);
}

.boxesSidebarLeft .box .box24.sidebarItem.new .sidebarItemTitle > h3::before, .boxesSidebarRight .box .box24.sidebarItem.new .sidebarItemTitle > h3::before {
  content: "";
  background-color: var(--wcfUserMenuIndicator);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
  vertical-align: 4px;
}

/* ================================================================ Sidebar Symbols by Gino Zantarelli */
.boxesSidebarLeft .boxTitle, .boxesSidebarRight .boxTitle {
  position: relative;
  overflow: hidden;
}

.boxesSidebarLeft .boxTitle::after, .boxesSidebarRight .boxTitle::after {
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-style: normal;
  position: absolute;
  font-size: 60px;
  right: -10px;
  line-height: 80px;
  top: -20px;
  transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  opacity: 0.15;
  pointer-events: none;
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.DonationGoal"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.DonationGoal"] .boxTitle::after {
  content: "\f283";
}

.boxesSidebarLeft .box[data-box-identifier*="de.softcreatr.wsc.TwitchBox"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="de.softcreatr.wsc.TwitchBox"] .boxTitle::after {
  content: "\f1e8";
}

.boxesSidebarLeft .box[data-box-identifier*="de.softcreatr.wsc.DiscordWidgetBox"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="de.softcreatr.wsc.DiscordWidgetBox"] .boxTitle::after {
  content: "\f0e6";
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.UsersOnline"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.UsersOnline"] .boxTitle::after {
  content: "\f129";
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wbb.HotThreads"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wbb.HotThreads"] .boxTitle::after,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.blog.MostCommentedEntries"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.blog.MostCommentedEntries"] .boxTitle::after {
  content: "\f14c";
  transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wbb.LatestPosts"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wbb.LatestPosts"] .boxTitle::after {
  content: "\f086";
  transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  right: -15px;
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wbb.BoardTagCloud"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wbb.BoardTagCloud"] .boxTitle::after,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.gallery.TagCloud"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.gallery.TagCloud"] .boxTitle::after,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.filebase.TagCloud"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.filebase.TagCloud"] .boxTitle::after,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.blog.TagCloud"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.blog.TagCloud"] .boxTitle::after {
  content: "\f02b";
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.Statistics"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.Statistics"] .boxTitle::after {
  content: "\f080";
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.RegisterButton"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.RegisterButton"] .boxTitle::after {
  content: "\f044" !important;
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.NewestMembers"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.NewestMembers"] .boxTitle::after {
  content: "\f234";
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.MostActiveMembers"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.MostActiveMembers"] .boxTitle::after {
  content: "\f007";
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.gallery.LatestComments"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.gallery.LatestComments"] .boxTitle::after,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.filebase.LatestComments"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.filebase.LatestComments"] .boxTitle::after {
  content: "\f14b";
  transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  top: -25px;
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.gallery.Categories"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.gallery.Categories"] .boxTitle::after,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.filebase.Categories"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.filebase.Categories"] .boxTitle::after,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.blog.Categories"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.blog.Categories"] .boxTitle::after,
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.ArticleCategories"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.ArticleCategories"] .boxTitle::after,
.boxesSidebarLeft .box[data-box-identifier*="com.viecode.marketplace.Categories"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.viecode.marketplace.Categories"] .boxTitle::after {
  content: "\f0c9";
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.filebase.MostActiveAuthors"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.filebase.MostActiveAuthors"] .boxTitle::after {
  content: "\f005";
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.blog.LatestEntries"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.blog.LatestEntries"] .boxTitle::after,
.boxesSidebarLeft .box[data-box-identifier*="com.viecode.marketplace.LatestEntries"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.viecode.marketplace.LatestEntries"] .boxTitle::after {
  content: "\f27b";
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.StaffOnline"] .boxTitle::after,
.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.StaffOnline"] .boxTitle::after {
  content: "\f0c0";
}

.boxesSidebarLeft .box.boxInfo .boxTitle::after,
.boxesSidebarRight .box.boxInfo .boxTitle::after {
  content: "\f05a";
}

.boxesSidebarLeft .box.boxSuccess .boxTitle::after,
.boxesSidebarRight .box.boxSuccess .boxTitle::after {
  content: "\f058";
}

.boxesSidebarLeft .box.boxWarning .boxTitle::after,
.boxesSidebarRight .box.boxWarning .boxTitle::after {
  content: "\f06a";
  color: #fff;
  opacity: 0.15;
}

.boxesSidebarLeft .box.boxError .boxTitle::after,
.boxesSidebarRight .box.boxError .boxTitle::after {
  content: "\f06a";
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::after, .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::after {
  content: "\f21b";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-style: normal;
  position: absolute;
  font-size: 70px;
  right: 0px;
  line-height: 90px;
  top: -10px;
  opacity: 0.15;
  pointer-events: none;
  display: block;
  overflow: hidden;
  height: 52px;
  width: 50px;
  color: #fff;
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless), .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless) {
  position: relative;
}

/* ======================================================= Sidebar Stats & Boxed small Userlink */
.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList, .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList {
  font-size: 12px !important;
  color: #222222;
  overflow: visible;
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList > dt, .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList > dt {
  color: #333333;
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.Statistics"] a, .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.Statistics"] a {
  font-weight: 600;
}

.boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList .userLink, .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList .userLink {
  border: 1px solid;
  color: var(--wcfSidebarLink);
  padding: 1px 3px;
  border-radius: var(--wcfBorderRadius);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 500;
}

.boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList .userLink fa-icon {
  display: none;
}

.boxesSidebarLeft small .userLink, .boxesSidebarRight small .userLink {
  border: 1px solid;
  color: var(--wcfSidebarLink);
  padding: 1px 3px;
  border-radius: var(--wcfBorderRadius);
  text-transform: uppercase;
  font-size: 9px;
  margin-right: 5px;
  font-weight: 500;
}

.boxesSidebarLeft small .userLink fa-icon, .boxesSidebarRight small .userLink fa-icon {
  display: none;
}

/* ================================================================ Sidebar Boxmenu Reset Button */
.boxMenuResetFilter {
  margin-top: 20px;
  text-align: center;
}

.boxMenuResetFilter .boxMenuLink::before {
  display: none !important;
}

.boxMenuResetFilter .boxMenuLink {
  background-color: var(--wcfButtonBackground) !important;
  border-radius: var(--wcfBorderRadius);
  color: rgba(255, 255, 255, 0.8) !important;
  cursor: pointer;
  display: inline-block !important;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 12px !important;
  transition: background-color 0.15s;
}

.boxMenuResetFilter .boxMenuLink:hover {
  background-color: var(--wcfButtonBackgroundActive) !important;
  color: rgb(255, 255, 255) !important;
}

/* ================================================================ Box Edit Button by Gino Zantarelli */
.boxWithEditButton .boxEditButton {
  background-color: var(--wcfContentLink);
  color: var(--wcfContentBackground) !important;
  padding: 0px 4px 1px;
  border-radius: 3px;
  border: none !important;
  z-index: 1;
}

.sidebar .boxWithEditButton .boxEditButton {
  background-color: var(--wcfContentBackground);
  color: var(--wcfContentLink) !important;
  top: 7px;
  right: 7px;
}

.boxWithEditButton .boxEditButton::after {
  content: "EDIT";
  font-family: "Arial", Helvetica, sans-serif;
  font-size: 9px;
  padding-left: 1px;
  vertical-align: 1px;
  font-weight: normal !important;
  text-shadow: none;
}

.boxWithEditButton .boxEditButton fa-icon[name=pen-to-square]::before {
  content: "\f040";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 12px;
  text-shadow: none;
}

.boxWithEditButton .boxEditButton fa-icon[name=pen-to-square] {
  --font-size: 0px;
}

.content .boxContainer .boxWithEditButton .boxEditButton {
  right: 7px;
  top: 7px;
}

.boxesFooterBoxes .box .boxEditButton {
  top: 10px;
  right: 10px;
  background-color: var(--wcfContentLink);
  color: var(--wcfContentBackground) !important;
  padding: 1px 4px 1px;
}

/* ================================================================ Button */
input[type=button], input[type=reset], input[type=submit], .button, a.button {
  transition: all 0.1s;
}

.buttonList.smallButtons .button {
  font-size: 10px;
  text-transform: uppercase;
  padding: 7px 6px;
}

.buttonList.smallButtons .button span {
  padding-right: 4px;
}

.buttonList.smallButtons .button fa-icon[size="16"] {
  --font-size: 14px;
  --icon-size: 16px;
}

.sidebar input[type=button].buttonPrimary, .sidebar input[type=submit], .sidebar .button.buttonPrimary, .sidebar a.button.buttonPrimary, .sidebar .button, .sidebar a.button {
  padding: 6px 12px !important;
  font-size: 12px;
}

.messageFooter.buttonList.smallButtons {
  margin-top: 20px;
  margin-left: 5px;
}

.messageFooter.buttonList.smallButtons #spnbottom {
  display: inline-block;
}

.dialogContainer > .dialogContent .dialogFormSubmit .button, .dialogContainer > .dialogContent .dialogFormSubmit input, .dialog__control .button {
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: -0.2px;
}

.contentHeader.filebaseFile .button {
  background-color: #4b9a15;
  color: #ffffff;
  min-width: 160px;
  padding: 14px;
  font-size: 14px;
  letter-spacing: -0.5px;
}

.contentHeader.filebaseFile .button:hover {
  background-color: #3f8510 !important;
  color: #ffffff !important;
}

.commentList .comment__message .formSubmit .button:not(.button.buttonPrimary), .commentResponseAdd .formSubmit .button:not(.button.buttonPrimary) {
  background-color: #212730;
}

.commentList .comment__message .formSubmit .button:not(.button.buttonPrimary):hover, .commentResponseAdd .formSubmit .button:not(.button.buttonPrimary):hover {
  background-color: #1a1f27;
}

.calendarDateNavigationGroup .button.small {
  height: 24px;
  border-radius: 3px;
  margin-top: 2px;
  margin-left: 5px;
}

.loginForm > form .thirdPartyLogin .thirdPartyLoginButton.twitterLoginButton {
  background-color: #242732;
}

.loginForm > form .thirdPartyLogin .thirdPartyLoginButton.twitterLoginButton:hover {
  background-color: #232631;
}

.contentInteractionShareButton .button.small.wsShareButton {
  padding: 5px;
}

.contentInteractionDropdown .dropdownToggle {
  padding: 6px 5px !important;
}

.messageFooter.buttonList.smallButtons {
  margin-top: 20px;
  margin-left: 5px;
}

.contentHeader > .contentHeaderNavigation .button.buttonPrimary, .contentFooter > .contentFooterNavigation .button.buttonPrimary {
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.contentHeader > .contentHeaderNavigation .button.buttonPrimary:after, .contentFooter > .contentFooterNavigation .button.buttonPrimary:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.contentHeader > .contentHeaderNavigation .button.buttonPrimary:before, .contentFooter > .contentFooterNavigation .button.buttonPrimary:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--wcfButtonPrimaryBackgroundActive);
  transition: all 0.4s;
  z-index: -1;
}
.contentHeader > .contentHeaderNavigation .button.buttonPrimary:hover:before, .contentFooter > .contentFooterNavigation .button.buttonPrimary:hover:before {
  width: 100%;
}

.contentHeader > .contentHeaderNavigation .button, .contentFooter > .contentFooterNavigation .button {
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.contentHeader > .contentHeaderNavigation .button:after, .contentFooter > .contentFooterNavigation .button:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.contentHeader > .contentHeaderNavigation .button:before, .contentFooter > .contentFooterNavigation .button:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--wcfButtonBackgroundActive);
  transition: all 0.4s;
  z-index: -1;
}
.contentHeader > .contentHeaderNavigation .button:hover:before, .contentFooter > .contentFooterNavigation .button:hover:before {
  width: 100%;
}

.buttonGroup > li .button::before, .messageFooterButtons > li .button::before, .messageFooterButtonsExtra > li .button::before, .userProfileButtonContainer .button::before, .contentHeader.messageGroupContentHeader.filebaseFile .button::before {
  display: none;
}

.button.loginFormRegisterButton {
  box-shadow: 0 0 0 0 #a61e1e;
  -webkit-animation: pulsereg 2s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsereg 2s infinite cubic-bezier(0.66, 0, 0, 1);
  transition: background-color 0.2s;
  background-color: #c11f1f !important;
  color: #ffffff;
  margin: 0px 5px 8px;
}

.button.loginFormRegisterButton:hover {
  background-color: #a61e1e !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

button.jsButtonFilebaseMarkAll, button.jsButtonGalleryMarkAll {
  background-color: #3d8429 !important;
  color: #fff;
}

button.jsButtonFilebaseMarkAll:hover, button.jsButtonGalleryMarkAll:hover {
  background-color: #397827 !important;
}

#tpl_calendar_calendar .contentHeaderNavigation .buttonGroup > li:first-child .button, #tpl_calendar_calendar .contentHeaderNavigation .messageFooterButtons > li:first-child .button, #tpl_calendar_calendar .contentHeaderNavigation .messageFooterButtonsExtra > li:first-child .button, #tpl_calendar_weekly .contentHeaderNavigation .buttonGroup > li:first-child .button, #tpl_calendar_weekly .contentHeaderNavigation .messageFooterButtons > li:first-child .button, #tpl_calendar_weekly .contentHeaderNavigation .messageFooterButtonsExtra > li:first-child .button, #tpl_calendar_daily .contentHeaderNavigation .buttonGroup > li:first-child .button, #tpl_calendar_daily .contentHeaderNavigation .messageFooterButtons > li:first-child .button, #tpl_calendar_daily .contentHeaderNavigation .messageFooterButtonsExtra > li:first-child .button, #tpl_calendar_yearly .contentHeaderNavigation .buttonGroup > li:first-child .button, #tpl_calendar_yearly .contentHeaderNavigation .messageFooterButtons > li:first-child .button, #tpl_calendar_yearly .contentHeaderNavigation .messageFooterButtonsExtra > li:first-child .button {
  border-top-left-radius: var(--wcfBorderRadius);
  border-bottom-left-radius: var(--wcfBorderRadius);
}

#tpl_calendar_calendar .contentHeaderNavigation .buttonGroup > li:last-child .button, #tpl_calendar_calendar .contentHeaderNavigation .messageFooterButtons > li:last-child .button, #tpl_calendar_calendar .contentHeaderNavigation .messageFooterButtonsExtra > li:last-child .button, #tpl_calendar_weekly .contentHeaderNavigation .buttonGroup > li:last-child .button, #tpl_calendar_weekly .contentHeaderNavigation .messageFooterButtons > li:last-child .button, #tpl_calendar_weekly .contentHeaderNavigation .messageFooterButtonsExtra > li:last-child .button, #tpl_calendar_daily .contentHeaderNavigation .buttonGroup > li:last-child .button, #tpl_calendar_daily .contentHeaderNavigation .messageFooterButtons > li:last-child .button, #tpl_calendar_daily .contentHeaderNavigation .messageFooterButtonsExtra > li:last-child .button, #tpl_calendar_yearly .contentHeaderNavigation .buttonGroup > li:last-child .button, #tpl_calendar_yearly .contentHeaderNavigation .messageFooterButtons > li:last-child .button, #tpl_calendar_yearly .contentHeaderNavigation .messageFooterButtonsExtra > li:last-child .button {
  border-top-right-radius: var(--wcfBorderRadius);
  border-bottom-right-radius: var(--wcfBorderRadius);
}

#tpl_calendar_calendar .contentHeaderNavigation .buttonGroup > li:not(:last-child), #tpl_calendar_calendar .contentHeaderNavigation .messageFooterButtons > li:not(:last-child), #tpl_calendar_calendar .contentHeaderNavigation .messageFooterButtonsExtra > li:not(:last-child), #tpl_calendar_weekly .contentHeaderNavigation .buttonGroup > li:not(:last-child), #tpl_calendar_weekly .contentHeaderNavigation .messageFooterButtons > li:not(:last-child), #tpl_calendar_weekly .contentHeaderNavigation .messageFooterButtonsExtra > li:not(:last-child), #tpl_calendar_daily .contentHeaderNavigation .buttonGroup > li:not(:last-child), #tpl_calendar_daily .contentHeaderNavigation .messageFooterButtons > li:not(:last-child), #tpl_calendar_daily .contentHeaderNavigation .messageFooterButtonsExtra > li:not(:last-child), #tpl_calendar_yearly .contentHeaderNavigation .buttonGroup > li:not(:last-child), #tpl_calendar_yearly .contentHeaderNavigation .messageFooterButtons > li:not(:last-child), #tpl_calendar_yearly .contentHeaderNavigation .messageFooterButtonsExtra > li:not(:last-child) {
  margin-right: -3px;
}

.contentItemOption.button {
  background-color: var(--wcfButtonPrimaryBackground);
  color: var(--wcfButtonPrimaryText);
  padding: 4px 8px !important;
  border-radius: 4px;
}

.contentItemOption.button:hover {
  background-color: var(--wcfButtonPrimaryBackgroundActive) !important;
  color: var(--wcfButtonPrimaryTextActive) !important;
}

.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);
}

/* == Small Button == */
@media screen and (min-width: 1025px), print {
  #tpl_wcf_membersList .userList .box48 > .details.userInformation .buttonGroupNavigation, #tpl_wcf_team .containerList.userList .box48 > .details.userInformation .buttonGroupNavigation {
    right: 10px;
    top: 10px;
  }
  .containerList.userList > li .buttonGroupNavigation > ul > li > a > fa-icon, .containerList.userList > li .buttonGroupNavigation > ul > li > a > .invisible, .containerList.userList > li .buttonGroupNavigation > ul > li > button > fa-icon, .containerList.userList > li .buttonGroupNavigation > ul > li > button > .invisible {
    opacity: 0.9;
  }
  .containerList.userList > li .buttonGroupNavigation > ul > li > a, .containerList.userList > li .buttonGroupNavigation > ul > li > button {
    background-color: #e6e6e6;
    color: #111111;
    border-radius: 2px;
    padding: 1px;
    opacity: 0.8;
    transition: all 0.1s;
  }
  .containerList > li .buttonGroupNavigation {
    right: 15px;
    top: 15px;
  }
  .containerList > li .buttonGroupNavigation > ul > li > a fa-icon, .containerList > li .buttonGroupNavigation > ul > li > button fa-icon {
    color: #111111;
    --font-size: 12px;
  }
  .containerList > li .buttonGroupNavigation {
    right: 12px;
  }
  .containerList > li .buttonGroupNavigation > ul {
    background-color: transparent;
    border: none;
    border-radius: 0px;
    box-shadow: none;
  }
  .containerList > li .buttonGroupNavigation > ul > li:not(:last-child) {
    border-right: none;
    margin-right: 2px;
  }
  .containerList > li .buttonGroupNavigation > ul > li > a, .containerList > li .buttonGroupNavigation > ul > li > button {
    background-color: #e6e6e6;
    border-radius: 2px;
    padding: 1px;
    opacity: 0.8;
    transition: all 0.1s;
  }
  .containerList > li .buttonGroupNavigation > ul > li.active > a, .containerList > li .buttonGroupNavigation > ul > li:hover > a, .containerList > li .buttonGroupNavigation > ul > li:hover > button {
    opacity: 1;
  }
  .containerList > li .buttonGroupNavigation > ul > li.active > a > fa-icon, .containerList > li .buttonGroupNavigation > ul > li:hover > a > fa-icon, .containerList > li .buttonGroupNavigation > ul > li:hover > button > fa-icon {
    color: #111111;
  }
}
.inlineList.dotSeparated.small.messageGroupInfo .messageGroupEditLink a {
  background-color: var(--wcfButtonBackground);
  color: var(--wcfButtonText);
  font-family: "Arial", Helvetica, sans-serif;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
}

.inlineList.dotSeparated.small.messageGroupInfo .messageGroupEditLink a:hover {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
}

/* ================================================================ Page Navigation */
.pagination__link:not(.pagination__link:hover):not(.pagination__link[aria-current=page]) {
  background-color: var(--wcfButtonBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 4px 9px;
  font-size: 11px;
  color: var(--wcfButtonText);
}

.pagination__link[aria-current=page], body:not(.touch) .pagination__link:hover {
  background-color: var(--wcfButtonPrimaryBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 4px 9px;
  color: var(--wcfButtonPrimaryTextActive);
  font-size: 11px;
}

.pagination__item.pagination__item--ellipsis button {
  color: var(--wcfButtonTextActive);
}

body:not(.touch) .pagination__prev .pagination__link {
  color: var(--wcfContentText) !important;
  opacity: 0.4;
  padding: 3px !important;
  background-color: transparent !important;
}

body:not(.touch) .pagination__prev .pagination__link:hover {
  background-color: transparent;
  color: var(--wcfContentText) !important;
  opacity: 1;
}

body:not(.touch) .pagination__next .pagination__link {
  color: var(--wcfContentText) !important;
  opacity: 0.4;
  padding: 3px !important;
  background-color: transparent !important;
}

body:not(.touch) .pagination__next .pagination__link:hover {
  background-color: transparent;
  color: var(--wcfContentText) !important;
  opacity: 1;
}

/* ================================================================ To Bottom Fade Button by Gino Zantarelli */
.gzToBottom {
  bottom: 10px;
  display: flex;
  justify-content: flex-start;
  margin-right: 10px;
  position: fixed;
  right: 0;
  z-index: 1;
}

.gzToBottom .pageActionButt {
  display: flex;
  flex: 0 auto;
  overflow: auto;
}

.gzToBottom .pageActionButt, .pageActionDown .pageActionButtonToBottom {
  opacity: 1;
  visibility: visible;
}

.gzToBottom .pageActionButtonToBottom {
  align-self: flex-start;
  flex: 0 0 auto;
  margin-left: 5px;
  padding: 2px;
}

.gzToBottom .pageActionButtonToBottom fa-icon {
  --font-size: 14px;
  width: 34px;
  height: 34px;
}

/* ================================================================ Tags animated by Gino Zantarelli */
.boxesSidebarLeft .tagList li a, .boxesSidebarRight .tagList li a {
  background-color: transparent !important;
  display: inline-block;
  margin-right: 2px;
  padding: 2px !important;
  border: none;
  transition: all 0.1s;
  line-height: 1.1;
}

.boxesSidebarLeft .tagList li a::before, .boxesSidebarRight .tagList li a::before {
  content: "\f02c";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  margin-right: 3px;
  border: none;
  display: inline-block;
  position: relative;
  left: 0px;
}

.boxesSidebarLeft .tagList li:hover a:before, .boxesSidebarRight .tagList li:hover a::before {
  -webkit-animation: ring 4s 0.1s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  animation: ring 6s 0.1s ease-in-out infinite;
  transform-origin: 50% 4px;
}

.tagList .tagWeight7 {
  font-weight: 500;
  letter-spacing: -2px;
}

.boxesFooterBoxes .layoutBoundary .tagList .tag, .boxesFooterBoxes .layoutBoundary .tagList a.tag {
  background-color: transparent;
  display: inline-block;
  margin-left: 0px;
  padding: 2px;
  position: relative;
  text-decoration: none;
  border-radius: 0px;
  font-family: "Arial", Helvetica, sans-serif;
  font-size: 15px;
  letter-spacing: -0.5px;
  color: var(--wcfContentText);
}

.boxesFooterBoxes .layoutBoundary .tagList .tag:hover, .boxesFooterBoxes .layoutBoundary .tagList a.tag:hover {
  transition: all 0.1s;
  opacity: 0.7;
}

.tagList {
  margin-bottom: 0px;
  margin-right: 0px;
}

.tagList > li {
  margin-bottom: 2px;
}

.tagList .tag {
  background-color: var(--wcfSidebarLink);
  color: #ffffff;
  display: inline-block;
  margin-left: 0px;
  padding: 2px 7px;
  position: relative;
  text-decoration: none;
  text-transform: none;
  font-weight: normal !important;
  font-size: 11px;
  border-radius: 2px;
}

.tagList .tag::before {
  display: none;
}

.tagList .tag:hover, .tagList a.tag:hover {
  background-color: var(--wcfSidebarLinkActive);
  transition: all 0.1s;
  color: #ffffff;
}

.sidebar .tagList .tag {
  color: var(--wcfSidebarLink) !important;
  font-size: 13px;
}

.boxesFooterBoxes .layoutBoundary .tagList .tag::before, .boxesFooterBoxes .layoutBoundary .tagList a.tag::before {
  display: inline-block;
  content: "\f02b";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  margin-right: 5px;
  border: none;
  left: 0px;
  position: relative;
}

.boxesFooterBoxes .layoutBoundary .tagList .tag:hover::before, .boxesFooterBoxes .layoutBoundary .tagList a:hover.tag::before {
  -webkit-animation: ring 4s 0.1s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  animation: ring 6s 0.1s ease-in-out infinite;
  transform-origin: 50% 4px;
}

.tagList.section .tag, .boxesFooterBoxes .layoutBoundary .tagList .tag, .boxesFooterBoxes .layoutBoundary .tagList a.tag, .articleTagList .tag, .tagList .tag {
  clip-path: none;
}

/* ================================================================ Badges */
.badge, a.badge {
  letter-spacing: 0px;
  text-transform: none;
  font-family: "Arial", Helvetica, sans-serif;
  font-size: 11px;
}

a.badge:hover {
  color: #fff;
  text-decoration: none;
}

.wbbBoardList .tabularBoxTitle.jsCollapsed > header .badge {
  top: 0px;
  margin-right: 5px;
  background-color: #fff;
  color: #222;
}

.userPanel > ul > li > a > .badgeUpdate {
  box-shadow: none;
  left: 4px;
  position: relative;
  padding: 0px 5px;
  top: 0px;
  background-color: #cc0001;
  min-width: 40px;
  text-align: right;
  font-family: "Arial", Helvetica, sans-serif;
  color: #fff;
  font-size: 10px;
}

.mainMenu .boxMenu > li > a > .boxMenuLinkOutstandingItems {
  margin-left: 5px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: "Arial", Helvetica, sans-serif;
}

.pageHeaderPanel.sticky .mainMenu .boxMenu > li > a > .boxMenuLinkOutstandingItems {
  padding: 1px 5px;
  font-size: 10px;
}

.mainMenu .boxMenu .boxMenuDepth1 > li > a .badge, .mainMenu .boxMenu .boxMenuDepth1 > li > span .badge, .mainMenu .boxMenu .boxMenuDepth2 > li > a .badge, .mainMenu .boxMenu .boxMenuDepth2 > li > span .badge {
  font-weight: 400;
  padding: 1px 5px;
  font-size: 10px;
  margin-left: 4px;
}

.wbbBoardNode__headline .wbbBoardNode__badge .badge.badgeUpdate {
  vertical-align: 3px;
  margin-left: 3px;
  padding: 2px 6px;
  font-weight: 400;
}

.galleryNewImageBadge {
  background-color: #ac2121;
  color: #fff;
  font-weight: 400;
  margin: 10px;
  padding: 5px 14px;
  border-radius: 3px;
}

.badge.filebaseFileNew {
  background-color: #ac2121;
  color: #fff;
}

.badge.label.newContentBadge {
  background-color: #cc0001;
}

.contentItemBadge {
  border: none;
}

.tabMenu > ul > li a .badge {
  padding: 1px 5px;
  font-size: 9px;
  margin-top: -3px;
  line-height: 14px;
  position: relative;
}

.tabMenu > ul > li.active a .badge {
  background-color: #ffffff;
  color: #222222;
}

.sidebar .boxTitle .badge {
  top: 0px;
  right: -5px;
  background-color: #ffffff;
  color: #222222;
}

.boxesSidebarLeft .box .boxMenu .boxMenuLink .badge::before, .boxesSidebarRight .box .boxMenu .boxMenuLink .badge::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 5px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid var(--wcfContentText);
  border-bottom: 5px solid transparent;
}

.badge.label.newMessageBadge {
  background-color: #ac2121;
  color: #fff;
  text-transform: uppercase;
  font-family: var(--wcfFontFamily);
  font-weight: 500;
}

.badge.badgeUpdate, a.badge.badgeUpdate {
  font-weight: 400;
}

.containerHeadline > h3 > .badge {
  top: -1px;
  margin-left: 3px;
}

.pollContainer h2 .badge {
  background-color: #ffffff;
  color: #222222;
  font-weight: 400;
  margin-top: -4px;
  margin-left: 6px;
}

a.badge:hover.yellow {
  color: #111;
}

/* ================================================================ Announcement Windows by Gino Zantarelli */
.error, .info, .success, .warning, #errorMessage, .userExceptionMessage {
  padding: 10px 12px;
  border-radius: var(--wcfBorderRadius);
  border: none;
}

.error a, .info a, .success a, .warning a {
  font-weight: 400;
  border-bottom: 1px dotted;
}

.error, #errorMessage, .userExceptionMessage {
  border-left: 50px solid var(--wcfStatusErrorBorder) !important;
}

.info {
  border-left: 50px solid var(--wcfStatusInfoBorder) !important;
}

.success {
  border-left: 50px solid var(--wcfStatusSuccessBorder) !important;
}

.warning {
  border-left: 50px solid var(--wcfStatusWarningBorder) !important;
}

#errorMessage, .userExceptionMessage {
  background-color: var(--wcfStatusErrorBackground);
  color: var(--wcfStatusErrorText);
}

#errorMessage a, .userExceptionMessage a {
  color: var(--wcfStatusErrorLink);
}

.info::before, .error::before, .success::before, .warning::before, #errorMessage::before, .userExceptionMessage::before {
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  font-size: 21px;
  margin-top: -5px;
  margin-left: -52px;
  width: 30px;
  text-align: center;
  margin-right: 14px;
  position: absolute;
  height: 30px;
  line-height: 30px;
  border-radius: 100%;
}

p.info::before, p.error::before, p.success::before, p.warning::before, #errorMessage::before, .userExceptionMessage::before {
  margin-right: 17px;
  line-height: 28px;
}

.error::before, #errorMessage::before, .userExceptionMessage::before {
  content: "\f05e";
}

.success::before {
  content: "\f00c";
}

.info::before {
  content: "\f129";
}

.warning::before {
  content: "\f12a";
}

.info.notice.noticeDismissible.active .icon, .success.notice.noticeDismissible.active .icon, .error.notice.noticeDismissible.active .icon, .warning.notice.noticeDismissible.active .icon {
  float: right;
  margin-right: -4px;
  margin-top: -2px;
  width: 16px;
  height: 16px;
  display: inline-block;
  line-height: 16px;
  font-size: 10px;
  text-align: center;
}

.info span.icon, .success span.icon, .error span.icon, .warning span.icon {
  color: #151515;
}

#systemNotification p {
  border-radius: var(--wcfBorderRadius);
  border: none !important;
  margin-top: 20px !important;
  padding: 10px 20px;
}

#systemNotification > p::before {
  display: none;
}

.ignoredUserMessage {
  background-image: none !important;
  border: none !important;
  border-radius: var(--wcfBorderRadius) !important;
  margin: 0px;
  padding: 0px;
  position: relative;
}

.ignoredUserMessage::before {
  padding: 10px 20px 10px 40px;
  border: none !important;
  border-radius: var(--wcfBorderRadius);
}

.ignoredUserMessage::after {
  content: "\f070";
  position: absolute;
  font-family: "Font Awesome 7 Free";
  font-weight: 600 !important;
  font-style: normal !important;
  left: 12px;
  top: 5px;
  font-size: 20px;
  color: var(--wcfStatusInfoText);
}

.boxesContentTop .box.boxInfo, .boxesContentBottom .box.boxInfo {
  padding: 14px;
  text-align: center;
  border-radius: var(--wcfBorderRadius);
  border: none;
}

.boxesContentTop .boxInfo a.button.buttonPrimary, .boxesContentBottom .boxInfo a.button.buttonPrimary {
  background-color: #1d4f68;
  color: rgb(255, 255, 255);
  box-shadow: none !important;
  -webkit-transition: 150ms linear 0s;
  transition: 150ms linear 0s;
}

.boxesContentTop .boxInfo a.button.buttonPrimary:hover, .boxesContentBottom .boxInfo a.button.buttonPrimary:hover {
  background-color: #3f7f9f;
  color: rgb(255, 255, 255);
}

.boxesContentTop .boxInfo a:not(.button), .boxesContentBottom .boxInfo a:not(.button) {
  font-weight: 400;
  border-bottom: 1px dotted;
}

.boxesContentTop .box.info a.button.buttonPrimary, .boxesContentBottom .box.info a.button.buttonPrimary {
  background-color: #1d4f68;
  color: rgb(255, 255, 255);
  border: none !important;
  box-shadow: none !important;
  -webkit-transition: 150ms linear 0s;
  transition: 150ms linear 0s;
}

.boxesContentTop .box.info a.button.buttonPrimary:hover, .boxesContentBottom .box.info a.button.buttonPrimary:hover {
  background-color: #3f7f9f;
  color: rgb(255, 255, 255);
}

.boxesContentTop .box.info, .boxesContentBottom .box.info {
  border-radius: var(--wcfBorderRadius);
  text-align: center;
  border: none !important;
  padding: 20px;
}

.boxesContentTop .box.info::before, .boxesContentBottom .box.info::before {
  display: none;
}

.boxesContentTop .boxInfo .boxTitle, .boxesContentBottom .boxInfo .boxTitle {
  letter-spacing: -1px;
  font-weight: 600 !important;
  color: #255972 !important;
  font-size: 23px !important;
}

.boxesContentTop .box.info .boxTitle, .boxesContentBottom .box.info .boxTitle {
  background-color: transparent !important;
  background-image: none !important;
  letter-spacing: -1px;
  font-weight: 600 !important;
  color: #255972 !important;
  font-size: 23px !important;
}

.boxesContentTop .box.info .boxTitle::before, .boxesContentBottom .box.info .boxTitle::before {
  display: none !important;
}

.boxesContentTop .box.info p a, .boxesContentBottom .box.info p a {
  font-weight: 400;
  border-bottom: 1px dotted;
}

.boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] {
  border-radius: var(--wcfBorderRadius);
  border: none;
  position: relative;
}

.boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] {
  border-radius: var(--wcfBorderRadius);
  border: none;
  position: relative;
}

@media screen and (min-width: 1025px), print {
  .boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] {
    padding: 14px 350px 14px 80px;
    text-align: left;
  }
  .boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit {
    position: absolute;
    right: 20px;
    top: 14px;
    margin-top: 10px;
  }
  .boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] {
    padding: 14px 350px 14px 80px;
    text-align: left;
  }
  .boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit {
    position: absolute;
    right: 20px;
    top: 14px;
    margin-top: 10px;
  }
}
.boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent {
  margin-top: 5px;
}

.boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent::before {
  content: "\f05a";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  margin-left: -62px;
  line-height: 60px;
  font-size: 50px;
  position: absolute;
  top: 12px;
  color: #255972 !important;
}

.boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent {
  margin-top: 5px;
}

.boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent::before {
  content: "\f05a";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  margin-left: -62px;
  line-height: 60px;
  font-size: 50px;
  position: absolute;
  top: 12px;
  color: #255972 !important;
}

@media screen and (max-width: 1024px) {
  .boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] {
    padding: 14px 14px 14px 80px;
    text-align: left;
  }
  .boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit {
    margin-left: -66px;
    display: block;
  }
  .boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit a.button.buttonPrimary {
    width: 100%;
  }
  .boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit a.button.buttonPrimary:first-child {
    margin-bottom: 10px;
  }
  .boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] {
    padding: 14px 14px 14px 80px;
    text-align: left;
  }
  .boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit {
    margin-left: -66px;
    display: block;
  }
  .boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit a.button.buttonPrimary {
    width: 100%;
  }
  .boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit a.button.buttonPrimary:first-child {
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit {
    display: flex;
  }
  .boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit a.button.buttonPrimary {
    width: auto;
    height: 40px;
  }
  .boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit {
    display: flex;
  }
  .boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent .formSubmit a.button.buttonPrimary {
    width: auto;
    height: 40px;
  }
}
/* ================================================================ Notice Icons WSC 6.1 */
woltlab-core-notice.info fa-icon[size="24"], woltlab-core-notice.success fa-icon[size="24"], woltlab-core-notice.error fa-icon[size="24"], woltlab-core-notice.warning fa-icon[size="24"] {
  display: none;
}

woltlab-core-notice.info::before, woltlab-core-notice.success::before, woltlab-core-notice.error::before, woltlab-core-notice.warning::before {
  margin-top: 0px;
}

woltlab-core-notice.info, woltlab-core-notice.success, woltlab-core-notice.error, woltlab-core-notice.warning {
  display: flex;
}

.noticeDismissible > .jsDismissNoticeButton {
  position: absolute;
  right: 8px;
  top: 8px;
}

woltlab-core-notice {
  position: relative;
}

/* ================================================================ Access denied Icon Fix */
.box64.userException.box64 > :first-child:not(:last-child) {
  display: none;
}

.box64.userException.box64 > :last-child {
  overflow: visible;
}

/* ================================================================ Permission Denied by Gino Zantarelli */
#tpl_wcf_permissionDenied .main > div .content::after, #tpl_wcf_error .main > div .content::after {
  content: "\f023";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  padding-right: 4px;
  font-size: 150px;
  color: var(--wcfContentText);
  border: 10px solid;
  padding: 20px;
  border-radius: 100%;
  display: inline-block;
  line-height: 200px;
  width: 260px;
  margin-top: 50px;
  left: 50%;
  position: relative;
  text-align: center;
  margin-left: -130px;
  margin-bottom: 50px;
}

#tpl_wcf_userException .main > div .content::after {
  content: "\f1e5";
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  padding-right: 4px;
  font-size: 150px;
  color: var(--wcfContentText);
  border: 10px solid;
  padding: 20px 20px 40px;
  border-radius: 100%;
  display: inline-block;
  line-height: 180px;
  width: 260px;
  margin-top: 50px;
  left: 50%;
  position: relative;
  text-align: center;
  margin-left: -130px;
  margin-bottom: 50px;
}

/* ================================================================ Login & Register Page */
@media screen and (min-width: 1025px), print {
  #tpl_wcf_login a.loginLink {
    display: none;
  }
  #tpl_wcf_register a.registrationLink {
    display: none;
  }
  .authFlow .pageHeaderContainer {
    padding-top: 50px;
  }
  .authFlow .pageHeaderPanel {
    display: block;
  }
  .authFlow .contentHeader {
    text-align: left;
  }
  .authFlow .contentHeader .contentTitle::before {
    margin-right: 15px !important;
  }
}
.authFlow .content {
  max-width: none;
}

.authFlow .contentHeader .contentHeaderDescription a {
  font-weight: 600;
}

.authFlow .pageHeaderLogo {
  text-align: left;
}

.pageHeader.pageHeader--authFlow {
  justify-content: left;
}

form#registerForm input.long, form#loginForm input.long {
  max-width: 450px;
}

@media screen and (max-width: 1024px) {
  .authFlow .contentHeader .contentHeaderTitle:not(.userProfileUserWithCoverPhoto .contentHeaderTitle) .contentHeaderDescription {
    margin-left: 0px;
  }
}
/* ================================================================ WSC 6 Image Viewer Modification by Gino Zantarelli */
.wcfImageViewer {
  background-color: var(--wcfContentBackground);
}

.wcfImageViewer > div {
  top: 140px;
  bottom: 140px;
}

.wcfImageViewer > div, .wcfImageViewer > footer {
  background-color: var(--wcfContentBackground);
  border-top: none;
  border-bottom: none;
}

.wcfImageViewer > header {
  background-color: var(--wcfContentContainerBackground);
  height: 94px;
}

.wcfImageViewer > header h1 {
  font-size: 24px;
  line-height: 1.2;
}

.wcfImageViewer > header h2 {
  font-size: 15px;
}

.wcfImageViewer > header h1, .wcfImageViewer > header h2, .wcfImageViewer > header h3, .wcfImageViewer > header h1 > a, .wcfImageViewer > header h2 > a, .wcfImageViewer > header h3 > a {
  color: var(--wcfContentLink);
}

.wcfImageViewer > header > div > a > img {
  border-radius: var(--wcfBorderRadius);
}

.wcfImageViewer:not(.wcfImageViewerMobile) > footer {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  margin: 10px 20px;
}

.wcfImageViewer.wcfImageViewerMobile > header, .wcfImageViewer.wcfImageViewerMobile > footer {
  background-color: var(--wcfContentContainerBackground);
}

.wcfImageViewer > footer {
  height: 90px;
  padding: 5px;
}

.wcfImageViewer > header > .wcfImageViewerButtonClose:hover {
  opacity: 0.8;
}

.wcfImageViewer > header > .wcfImageViewerButtonClose fa-icon {
  color: var(--wcfContentText) !important;
}

.wcfImageViewer > header > .wcfImageViewerButtonClose fa-icon:hover {
  color: var(--wcfContentLinkActive) !important;
}

.wcfImageViewer:not(.wcfImageViewerMobile) .wcfImageViewerButtonClose {
  display: block;
  transition: ease 1s all;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.wcfImageViewer:not(.wcfImageViewerMobile) .wcfImageViewerButtonClose:hover {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  text-decoration: none;
  cursor: pointer;
  display: block;
}

.wcfImageViewer:not(.wcfImageViewerMobile) .wcfImageViewerButtonClose fa-icon {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: inline-block;
  text-align: center;
  line-height: 42px !important;
  border: 3px solid;
}

.wcfImageViewer:not(.wcfImageViewerMobile) .wcfImageViewerButtonClose:hover fa-icon {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: inline-block;
  text-align: center;
}

.wcfImageViewer:not(.wcfImageViewerMobile) > div > ul {
  background-color: #ffffff;
  opacity: 0.5;
  border: none;
  border-radius: var(--wcfBorderRadius);
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.5);
  bottom: 20px;
}

.wcfImageViewer:not(.wcfImageViewerMobile) > div > ul:hover {
  opacity: 0.9;
  -webkit-transition: 200ms linear 0s;
  transition: 200ms linear 0s;
}

.wcfImageViewer:not(.wcfImageViewerMobile) > div > ul > li.wcfImageViewerSlideshowButtonEnlarge, .wcfImageViewer:not(.wcfImageViewerMobile) > div > ul > li.wcfImageViewerSlideshowButtonFull {
  border-left: none;
}

.wcfImageViewer:not(.wcfImageViewerMobile) .pointer:hover fa-icon {
  color: #151515;
}

.galleryImageContainer > .galleryImage > .galleryPreviousImageButton, .galleryImageContainer > .galleryImage > .galleryNextImageButton,
body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryPreviousImageButton, body[data-application=gallery][data-template=imageAdd] #imageContainer > .galleryNextImageButton {
  background-color: transparent;
  border: 3px solid;
  color: var(--wcfContentLink);
}

/* ================================================================ Top Registerbox by Gino Zantarelli */
.top_registerbox {
  background-color: #017877;
}

.top_registerbox .layoutBoundary {
  display: flex;
  justify-content: flex-end;
  padding: 15px 0px;
  color: var(--wcfHeaderText);
}

.top_registerbox .layoutBoundary fa-icon {
  margin-right: 5px;
  margin-left: -45px;
  vertical-align: -4px;
  color: var(--wcfHeaderText);
  font-weight: 900 !important;
}

.top_registerbox .top_registercontent {
  display: flex;
  width: 100%;
  margin: 0px 20px 20px;
  padding: 10px;
  border-radius: 10px;
  background-color: #31698a;
  z-index: 2;
}

.top_registercontentLeft {
  width: 100%;
  padding: 2px 10px 0px 45px;
}

.top_registercontentLeft p a {
  text-decoration: underline dotted !important;
  font-weight: 600;
  color: var(--wcfHeaderLinkActive) !important;
}

.top_registercontentLeft p a:hover {
  color: var(--wcfHeaderLink) !important;
}

.top_registercontentRight {
  flex: 0 0 auto;
}

#tpl_wcf_register .top_registerbox {
  display: none;
}

.top_registerbox .top_registercontentRight .button.loginLink {
  transition: all 0.2s;
  background-color: transparent !important;
  border-radius: var(--wcfBorderRadius);
  color: var(--wcfHeaderLinkActive) !important;
  border: 1px solid #ffffff;
}

.top_registerbox .top_registercontentRight .button.loginLink:hover {
  background-color: var(--wcfHeaderLinkActive) !important;
  color: var(--wcfContentLink) !important;
}

/* === DO NOT TOUCH === Mobile & Tablet Modus */
@media screen and (max-width: 1024px) {
  .top_registerbox {
    text-align: center;
  }
  .top_registerbox .layoutBoundary {
    display: block;
    justify-content: flex-end;
    padding: 15px;
  }
  .top_registercontentLeft {
    padding: 10px 0px 15px;
  }
  .top_registerbox .layoutBoundary fa-icon {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0px;
    --font-size: 90px;
    --icon-size: 110px;
  }
}
/* ================================================================ Woltlab Suite 6 Top User Xtrabox by Gino Zantarelli */
#UserXtraboxContainer {
  background-color: transparent;
}

#UserXtraboxContainer .layoutBoundary {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  margin-top: 30px;
  margin-bottom: 24px;
  padding: 14px;
  color: var(--wcfContentText);
  position: relative;
}

#UserXtraboxContainer .layoutBoundary::after {
  content: "";
  height: 4px;
  background-color: var(--wcfContentText);
  border-radius: var(--wcfBorderRadius);
  opacity: 0.25;
  display: inline-block;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: -30px;
}

.UBcontainer {
  display: flex;
  font-size: 13px;
  line-height: 1.28;
}

.UBcontainer a:hover {
  color: var(--wcfContentText);
  opacity: 0.7;
}

.UBcontainer a {
  color: var(--wcfContentHeadlineText);
  transition: all 0.1s;
}

.UBcontainer a:hover {
  color: var(--wcfContentHeadlineText);
  opacity: 0.7;
}

.UBleft {
  width: 100%;
  padding: 0px 10px 0px 0px;
}

.UBright {
  width: 100%;
  padding: 0px 0px 0px 10px;
}

.UBcenter {
  width: 400px;
  text-align: center;
  padding-top: 10px;
}

.UBregleft + .UBleft {
  padding: 0px;
}

.UBregleft {
  width: 124px;
  text-align: left;
}

.UBleft p.registermessage {
  margin-top: 10px;
  margin-bottom: 10px;
}

.UBregButton .button.buttonPrimary {
  margin-top: 5px;
  font-size: 13px;
  padding: 6px 13px;
  border-radius: var(--wcfBorderRadius);
}

.UBlefttext .button.small.buttonPrimary {
  margin-top: 10px;
  padding: 6px 13px;
  border-radius: var(--wcfBorderRadius);
  font-size: 13px;
}

.UBlefttext .button.small.buttonPrimary span fa-icon {
  --font-size: 12px;
  --icon-size: 12px;
}

.UBcontainer h2.boxTitle {
  font-size: var(--wcfFontSizeHeadline);
  border-bottom: 1px solid;
  margin-top: 0px;
  margin-bottom: 10px;
  padding: 0px 0px 2px;
  position: relative;
  display: block;
}

.UBcontainer h2.boxTitle::before, .UBcontainer h2.boxTitle::after {
  display: none;
}

.UBtime {
  float: right;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.3px;
}

.UBtime span fa-icon {
  --font-size: 12px;
}

.UBmoderation {
  border-left: 2px solid;
  margin-left: -2px;
  padding-left: 10px;
  padding-right: 10px;
}

.UBmoderation .icon {
  font-size: 20px;
  color: #dcdcdc;
  font-weight: 400;
  line-height: 11px;
  vertical-align: -3px;
}

.UBmoderation .icon:hover {
  color: #9b9b9b;
}

.UBmoderation .badge.badgeUpdate {
  --background-color: #027abb;
  width: 6px;
  height: 6px;
  font-size: 0px;
  padding: 0px;
  border-radius: 100%;
  margin-top: -19px;
  margin-left: -5px;
  margin-right: -4px;
  border: none;
  box-shadow: none;
}

html[data-color-scheme=dark] .UBadmin a::before {
  content: "ACP";
  padding: 4px 5px;
  text-shadow: none;
  font-size: 10px;
  font-weight: 600;
  line-height: 11px;
  color: #151515;
  background-color: #dcdcdc;
  border-radius: 2px;
  vertical-align: 1px;
}

.UBadmin a::before {
  content: "ACP";
  padding: 4px 5px;
  text-shadow: none;
  font-size: 10px;
  font-weight: 600;
  line-height: 11px;
  color: #ffffff;
  background-color: var(--wcfContentHeadlineText);
  border-radius: 2px;
  vertical-align: 1px;
}

.UBlefttext, .UBrow {
  margin: 0px 5px 10px;
}

.UBrow {
  padding-bottom: 10px;
  border-bottom: 1px solid;
  min-height: 100px;
}

.UBlefttext .usermessage, .UBlefttext .usermessage_b {
  margin-bottom: 10px;
}

.UBavatar img {
  background-color: rgba(0, 0, 0, 0.1);
  border: none;
}

.UBcenter .userRankImage img {
  margin-top: 10px;
  background-color: transparent !important;
  height: auto !important;
  border: none !important;
  padding: 0px !important;
  width: auto !important;
}

.UBrang {
  margin: 6px;
}

.UBboxnewannouncement a, .UBboxnewpm a {
  font-size: 16px;
  font-weight: 500;
  vertical-align: -1px;
}

.UBboxstartpm {
  margin: 10px 0px 0px;
  font-size: 14px;
}

.UBrowExtra {
  display: flex;
  padding: 0px 10px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  height: 16px;
}

.UBrowExtra a {
  display: inline-block;
}

.UBrowExtra .styleChanger {
  padding: 0px !important;
  position: relative;
  right: 0px;
}

.UBboxnewannouncement span fa-icon[size="32"] {
  --font-size: 22px;
  --icon-size: 28px;
  vertical-align: -3px;
  margin-left: -5px;
}

.UBboxnewpm span fa-icon[size="32"] {
  --font-size: 22px;
  --icon-size: 28px;
  vertical-align: -3px;
  margin-left: -5px;
}

.UBboxstartpm span fa-icon[size="32"] {
  --font-size: 18px;
  --icon-size: 28px;
  vertical-align: -1px;
  margin-left: -5px;
}

.UBrowExtra a span fa-icon[size="24"] {
  --font-size: 18px;
  --icon-size: 15px;
}

.UBaccount a span fa-icon[size="24"] {
  --font-size: 16px;
  --icon-size: 15px;
}

.UBrefresh a span fa-icon[size="24"] {
  height: 19px;
}

.UBrefresh a span {
  display: inline-block;
  margin-top: -2px;
}

.UBrefresh a span:hover {
  margin-top: -2.5px;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.UBprofile {
  border-right: 2px solid;
  padding-right: 10px;
}

.UBaccount {
  border-right: 2px solid;
  padding-right: 10px;
  padding-left: 10px;
}

.UBstyleChanger {
  border-right: 2px solid;
  padding-right: 10px;
  padding-left: 10px;
}

.UBrefresh {
  padding-left: 10px;
  padding-right: 12px;
}

.UBadmin {
  border-left: 2px solid;
  margin-left: -2px;
  padding-left: 10px;
}

.UBcontainer #pageLanguageContainer {
  list-style: none;
  font-size: 0px;
  float: right;
  margin-top: -1px;
  padding-left: 12px;
  color: #ffffff;
  position: relative;
  z-index: 1;
}

.UBcontainer #pageLanguageContainer .box24 > :first-child:not(:last-child) {
  margin-right: 0px;
}

.UBcontainer #pageLanguageContainer .boxFlag.box24 > :last-child {
  display: none;
}

/* === DO NOT TOUCH === Mobile & Tablet Modus */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .UBcontainer {
    display: inline-block;
  }
  .UBleft, .UBright {
    padding: 10px 0px;
  }
  .UBregleft {
    display: none;
  }
  .UBcenter {
    display: none;
  }
  .UBcontainer h2.boxTitle {
    font-size: 20px !important;
  }
}
@media screen and (max-width: 1024px) {
  #UserXtraboxContainer .layoutBoundary {
    padding: 0px;
    margin: 30px 20px 20px;
    width: auto;
  }
  .UBcontainer {
    padding: 10px;
    display: inline-block;
  }
  .UBleft, .UBright {
    padding: 10px 0px;
  }
  .UBregleft {
    display: none;
  }
  .UBcenter {
    display: none;
  }
  .UBcontainer h2.boxTitle {
    font-size: 18px;
  }
  .UBtime {
    display: none;
  }
}
/* ============================================================================================= */
/* ~~~~~~~~~~~~~~~ WSC 6 Simple Add Footer v3 by Gino Zantarelli ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ============================================================================================= */
#add_footerv3 {
  background-color: var(--wcfFooterCopyrightBackground);
}

#add_footerv3 .layoutBoundary {
  padding: 20px 0px;
  font-size: 13px;
}

#add_footerv3 .layoutBoundary a {
  transition: all 0.1s;
  position: relative;
}

#add_footerv3 .addv3Inbox {
  color: var(--wcfFooterText);
  display: flex;
}

#add_footerv3 .addv3_boxleft {
  flex: 0 0 23%;
  margin-top: 0;
  max-width: 23%;
  margin-right: 2%;
}

#add_footerv3 .addv3_boxleft_second {
  flex: 0 0 23%;
  margin-top: 0;
  max-width: 23%;
  margin-right: 2%;
}

#add_footerv3 .addv3_boxright {
  flex: 0 0 50%;
  margin-top: 0;
  max-width: 50%;
}

#add_footerv3 .layoutBoundary h3.boxTitle:before {
  content: "";
  display: block;
  background-color: var(--wcfFooterText);
  height: 1px;
  position: absolute;
  top: 50%;
  width: 100%;
}

#add_footerv3 .layoutBoundary h3.boxTitle {
  font-size: 14px;
  position: relative;
  margin-bottom: 10px;
}

#add_footerv3 .layoutBoundary h3.boxTitle span {
  background-color: var(--wcfFooterCopyrightBackground);
  position: relative;
  z-index: 1;
  padding: 1px 8px 1px 0px;
  color: var(--wcfFooterText);
}

#add_footerv3 .addv3Inbox h2.boxTitle {
  background-color: var(--wcfFooterBackground);
  border-radius: var(--wcfBorderRadius);
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 9px 14px;
  font-size: 14px;
}

#add_footerv3 .inlinecontent {
  padding: 0px 10px;
}

#add_footerv3 .addv3_boxleft p a::before, #add_footerv3 .addv3_boxleft_second p a::before {
  content: "";
  position: absolute;
  left: -15px;
  right: 100%;
  bottom: 7px;
  background-color: var(--wcfFooterHeadlineLink);
  height: 2px;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
  width: 5px;
  display: inline-block;
}

#add_footerv3 .addv3_boxleft p a:hover::before, #add_footerv3 .addv3_boxleft_second p a:hover::before {
  width: 8px;
}

#add_footerv3 .addv3_boxleft p a, #add_footerv3 .addv3_boxleft_second p a {
  color: var(--wcfFooterHeadlineLink);
  font-weight: 600;
  line-height: 1.6;
  margin-left: 15px;
}

#add_footerv3 .addv3_boxleft p a:hover, #add_footerv3 .addv3_boxleft_second p a:hover {
  opacity: 0.6;
}

#add_footerv3 .addv3_boxright .textbox {
  font-size: 13px;
  line-height: 1.38;
}

#add_footerv3 .addv3_boxright .textbox .pageHeaderLogoSmall {
  display: flex;
  float: right;
  padding: 5px 0px 5px 10px;
  max-height: 120px;
  max-width: 200px;
}

#add_footerv3 .addv3_boxright .textbox a {
  font-size: 13px;
  color: var(--wcfFooterHeadlineLink);
  font-weight: 600;
  text-decoration: underline dotted !important;
}

#add_footerv3 .addv3_boxright .textbox a:hover {
  color: var(--wcfFooterHeadlineLink);
  opacity: 0.6;
}

#add_footerv3 .addv3_boxright a {
  color: var(--wcfFooterHeadlineLink);
  font-weight: 600;
  font-style: italic;
}

#add_footerv3 .addv3_boxright a:hover {
  color: var(--wcfFooterHeadlineLink);
  opacity: 0.6;
}

#add_footerv3 .addv3_boxsocial .sharetext {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  color: var(--wcfFooterText);
  font-size: 11px;
}

#add_footerv3 .addv3_boxsocial {
  border-top: 1px solid var(--wcfFooterText);
  margin-top: 10px;
  padding: 10px 10px 0px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

#add_footerv3 .addv3_boxsocial .messageShareButtons .inlineList {
  gap: 2px;
}

#add_footerv3 .addv3_boxsocial li {
  list-style: none;
  margin-right: 0px;
  margin-bottom: 3px;
}

#add_footerv3 .messageShareButtons .messageShareProvider {
  background-color: var(--wcfContentContainerBackground) !important;
  color: var(--wcfHeaderMenuLink);
  padding: 0px;
  border-radius: 100%;
  display: inline-block;
  line-height: 54px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: all 0.1s;
  font-size: 0px;
  opacity: 1 !important;
}

#add_footerv3 .messageShareButtons .messageShareProvider .icon {
  color: var(--wcfHeaderMenuLink) !important;
  line-height: 36px;
}

#add_footerv3 .messageShareButtons .messageShareProvider:hover {
  background-color: var(--wcfContentContainerBackground) !important;
  opacity: 0.8 !important;
}

#add_footerv3 .messageShareButtons .messageShareProvider .icon:hover {
  opacity: 0.8 !important;
}

#add_footerv3 .addv3_boxsocial .sharetext fa-icon {
  color: #e00606;
  padding-right: 1px;
}

/* === DO NOT TOUCH ===== Mobile Mode for SimpleAddFooter */
@media screen and (max-width: 1024px) {
  #add_footerv3 .layoutBoundary {
    padding: 20px;
    font-size: 14px;
  }
  #add_footerv3 .addv3Inbox {
    display: inline-block;
  }
  #add_footerv3 .addv3_boxleft {
    width: 100%;
    max-width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 30px;
  }
  #add_footerv3 .addv3_boxleft_second {
    width: 100%;
    max-width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 30px;
  }
  #add_footerv3 .addv3_boxright {
    width: 100%;
    max-width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }
  #add_footerv3 .addv3_boxright .textbox .pageHeaderLogoSmall {
    display: none;
  }
  #add_footerv3 .addv3_boxleft p a::before, #add_footerv3 .addv3_boxleft_second p a::before {
    display: none;
  }
  #add_footerv3 .addv3_boxleft p a, #add_footerv3 .addv3_boxleft_second p a {
    background-color: var(--wcfButtonPrimaryBackground);
    color: var(--wcfButtonPrimaryText);
    border-radius: var(--wcfBorderRadius);
    width: 100%;
    display: block;
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
    margin: 8px 0px;
    padding: 8px;
    opacity: 1 !important;
  }
  #add_footerv3 .addv3_boxleft p a:hover, #add_footerv3 .addv3_boxleft_second p a:hover {
    background-color: var(--wcfButtonPrimaryBackgroundActive);
    color: var(--wcfButtonPrimaryTextActive);
  }
  #add_footerv3 .addv3_boxright .textbox, #add_footerv3 .addv3_boxright .textbox a {
    font-size: 14px;
  }
  #add_footerv3 .addv3_boxsocial .sharetext {
    margin-bottom: 10px;
    font-size: 12px;
  }
  #add_footerv3 .messageShareButtons .messageShareProvider {
    width: 104px;
    height: 104px;
    line-height: 0;
  }
  #add_footerv3 .messageShareButtons .button.messageShareProvider fa-brand[size="24"] {
    --icon-size: 60px;
  }
  #add_footerv3 .messageShareButtons .button.messageShareProvider fa-brand[size="24"] svg {
    height: 60px;
  }
  #add_footerv3 .addv3_boxsocial li {
    margin: 0px 3px 6px;
  }
}
/* ================================================================ Article */
@media screen and (min-width: 1281px) {
  #tpl_wcf_articleList .contentItemList {
    --columns: 3;
  }
}
.articleImage .articleImageWrapper, .articleImage .contentCoverPhotoImageWrapper, .contentCoverPhotoImage .articleImageWrapper, .contentCoverPhotoImage .contentCoverPhotoImageWrapper {
  box-shadow: none;
  border-radius: var(--wcfBorderRadius);
}

.articleDateBox {
  background-color: #0f1115;
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  margin-top: -58px;
  padding: 5px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  margin-left: 22px;
  border-radius: 3px;
}

.articleListDate {
  letter-spacing: -1px;
  font-size: 21px;
  line-height: 23px;
  margin-top: -3px;
}

.articleListMonth {
  font-size: 10px;
  text-transform: uppercase;
  margin-top: -2px;
}

.articleListYear {
  font-size: 10px;
  text-transform: uppercase;
}

.section.articleTeaserContainer {
  background-color: var(--wcfContentContainerBackground);
  padding: 14px !important;
  border-radius: var(--wcfBorderRadius);
}

.section.articleContent {
  background-color: var(--wcfContentContainerBackground);
  padding: 14px !important;
  border-radius: var(--wcfBorderRadius);
}

.section.htmlContent[itemprop="description articleBody"], .section.ck.ck-content.ck-editor__editable[itemprop="description articleBody"], .messageBody > .section.messageText[itemprop="description articleBody"], .messageSignature > div.section[itemprop="description articleBody"] {
  margin-top: 0px;
}

.tableOfContentsContainer {
  background-color: rgba(93, 105, 118, 0.08);
  border-radius: var(--wcfBorderRadius);
  border: none;
}

.section.articleAboutAuthor .box128 {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 14px;
}

.articleAboutAuthor .articleAboutAuthorUsername .username {
  font-size: 19px;
}

.articleTeaser {
  font-weight: 600;
  color: var(--wcfContentLink);
}

.section.articleAboutAuthor .box128 > :first-child:not(:last-child) {
  flex: 0 0 96px;
  margin-right: 10px;
}

.articleAboutAuthorAvatar .userAvatarImage {
  width: 96px;
  height: 96px;
}

.articleContent .articleTagList {
  margin-top: 60px;
  position: relative;
}

.articleContent .articleTagList::before {
  content: "Tags";
  border-bottom: 1px solid;
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  top: -32px;
  font-size: 16px;
  letter-spacing: -0.5px;
}

.articleContent .articleTagList .tag {
  background-color: #bfc4cb;
}

/* ================================================================ Woltlab Suite 6 Gallery by Gino Zantarelli */
@media screen and (min-width: 1281px) {
  .galleryImageList {
    --columns: 3 !important;
  }
}
@media screen and (min-width: 1025px), print {
  .galleryImageList > li {
    background-color: var(--wcfContentContainerBackground);
    padding: 10px 10px 0px;
    border-radius: var(--wcfBorderRadius);
  }
  .galleryImageList {
    --columns: 2;
  }
}
@media screen and (max-width: 1024px) {
  .galleryImageList > li {
    background-color: var(--wcfContentContainerBackground);
    padding: 10px 10px 0px;
    border-radius: var(--wcfBorderRadius);
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .galleryImageList {
    --columns: 2;
  }
  .galleryImageList > li {
    background-color: var(--wcfContentContainerBackground);
    padding: 10px 10px 0px;
    border-radius: var(--wcfBorderRadius);
  }
}
.galleryMasonry > li {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  padding: 10px;
}

.galleryImageList > li > a, .galleryMasonry > li > a {
  overflow: hidden;
}

.galleryImageList > li > a > img, .galleryMasonry > li > a > img {
  transition: transform 0.24s linear;
}

.galleryImageList > li:hover > a > img, .galleryMasonry > li:hover > a > img {
  transition: transform 0.24s linear;
  transform: scale(1.05);
}

.galleryImageList > li > div, .galleryMasonry > li > div {
  background-color: var(--wcfContentContainerBackground);
  color: #151515;
}

.galleryImageList > li.jsMarked > div, .galleryMasonry > li.jsMarked > div {
  right: 10px;
  left: 10px;
  width: auto;
  padding: 10px;
  border-bottom: 10px solid var(--wcfContentContainerBackground);
}

.galleryImageList > li > div > label, .galleryMasonry > li > div > label {
  bottom: 5px;
  right: 15px;
}

.galleryImageList > li.jsMarked > div > label, .galleryMasonry > li.jsMarked > div > label {
  right: 5px;
}

.galleryImageList > li > div > div, .galleryMasonry > li > div > div {
  height: 2.5em;
  opacity: 1;
  transition-delay: 0s;
}

.galleryImageList > li > div > p, .galleryMasonry > li > div > p {
  letter-spacing: -0.5px;
  font-weight: 400 !important;
  font-size: 17px;
}

.galleryImageList > li > div > p, .galleryImageList > li > div > div > ul, .galleryImageList > li > div > div > dl, .galleryMasonry > li > div > p, .galleryMasonry > li > div > div > ul, .galleryMasonry > li > div > div > dl {
  margin: 0px;
}

.galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li:first-child {
  height: 140px;
}

.galleryAlbumList ul.galleryAlbumCoverImages {
  max-height: 140px;
}

.galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li:first-child > a > img {
  top: 0px;
}

.galleryAlbumList ul.galleryAlbumCoverImages.galleryMediumAlbumCoverImages > li a img {
  max-width: none;
  max-height: 150px;
  margin: 2px;
}

.containerList.galleryAlbumList.containerList > li:not(:last-child) {
  margin-bottom: 5px;
}

.galleryImageGrid > .imageGridMain {
  background-color: var(--wcfContentContainerBackground);
  border: none;
  padding: 0px;
  border-radius: var(--wcfBorderRadius);
}

.galleryImageGrid {
  height: 430px;
}

.galleryImageGrid > .imageGridColumn {
  height: 430px;
}

.galleryImageGrid > .imageGridMain > a {
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.galleryImageGrid > .imageGridColumn > li {
  background-color: var(--wcfContentContainerBackground);
  border: none;
  border-radius: var(--wcfBorderRadius);
  margin: 0 0 20px 20px;
  padding: 10px;
  max-height: 230px;
}

.galleryImageGrid > .imageGridColumn > li > a > img {
  height: 180px;
}

.embeddedContentImageElement.embeddedContentImageElement.embeddedContentImageElement {
  max-width: calc(100% + 10px);
  width: calc(100% + 0px);
  border-radius: var(--wcfBorderRadius);
  margin: 0px 0px 10px;
}

.boxesContentTop .box .boxContent .jsClipboardContainer[data-type="com.woltlab.gallery.image"], .boxesContentBottom .box .boxContent .jsClipboardContainer[data-type="com.woltlab.gallery.image"] {
  background-color: transparent;
  padding: 0px;
}

.galleryImagesInMotion {
  background-color: var(--wcfContentContainerBackground);
  border: 10px solid var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
}

/* ================================================================ Woltlab Suite 6 Filebase */
.filebaseFileCard {
  background-color: var(--wcfContentContainerBackground);
  border: none;
  border-radius: var(--wcfBorderRadius);
  box-shadow: none;
  padding: 14px;
}

.filebaseFileCardHeader {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px;
  border-bottom: 2px solid var(--wcfContentBackground);
  margin: -14px -14px 0px;
  padding: 10px 14px;
  color: var(--wcfContentLink);
}

.filebaseFileCardBody {
  padding: 10px 0px;
}

.filebaseFileCardFooter {
  background-color: #f2f2f2;
  border-top: none;
  min-height: 32px;
  border-radius: var(--wcfBorderRadius);
  padding: 5px;
}

.filebaseFileCardTitle a {
  font-weight: 500;
  letter-spacing: -0.5px;
}

.filebaseFileCardIcon img {
  border-radius: 3px;
}

.filebaseFileRatingStar fa-icon[solid], .filebaseFileRatingStar fa-icon[size="16"] {
  --font-size: 10px;
  --icon-size: 10px;
}

.filebaseFileRatingStar:not(:last-child) {
  margin-right: 0px;
}

.filebaseFileFeatured .filebaseFileCardHeader {
  padding-right: 45px;
  overflow: visible;
}

.filebaseFileFeatured .filebaseFileCardHeader .filebaseFileIsFeatured {
  bottom: auto;
  position: absolute;
  right: -5px;
  top: -10px;
  transform: rotate(15deg);
}

.filebaseFileFeatured .filebaseFileCardHeader .filebaseFileIsFeatured fa-icon[size="48"] {
  position: absolute;
  --font-size: 0px;
  --icon-size: 0px;
}

.filebaseFileFeatured .filebaseFileCardHeader .filebaseFileIsFeatured fa-icon[size="48"]::before {
  content: "\f058";
  display: inline-block;
  font-family: "Font Awesome 7 Free";
  font-weight: 100 !important;
  font-style: normal !important;
  font-size: 30px;
  color: #d8d8d8;
}

.containerContent[itemprop=reviewBody] .htmlContent, .containerContent[itemprop=reviewBody] .ck.ck-content.ck-editor__editable, .containerContent[itemprop=reviewBody] .messageBody > .messageText, .containerContent[itemprop=reviewBody] .messageSignature > div {
  background-color: #ebebeb;
  border: none;
  border-radius: var(--wcfBorderRadiusContainer);
  padding: 10px;
}

.containerContent[itemprop=reviewBody] .htmlContent::before, .containerContent[itemprop=reviewBody] .ck.ck-content.ck-editor__editable::before, .containerContent[itemprop=reviewBody] .messageBody > .messageText::before, .containerContent[itemprop=reviewBody] .messageSignature > div::before {
  content: "";
  display: block;
  margin-left: -18px;
  border-top: 14px solid #ebebeb;
  border-left: 10px solid transparent;
  height: 0;
  position: absolute;
  margin-top: 6px;
}

.filebaseReviewResponse {
  background-color: #efefef;
  border: none;
  border-radius: var(--wcfBorderRadiusContainer);
  padding: 10px;
}

.filebaseReviewResponse::before {
  content: "";
  display: block;
  margin-left: -18px;
  border-top: 14px solid #efefef;
  border-left: 10px solid transparent;
  height: 0;
  position: absolute;
  margin-top: 6px;
}

/* ================================================================ Woltlab Suite 6 Calendar */
/* === radius === */
.calendarWeeks {
  border-radius: var(--wcfBorderRadius);
}

.calendarMonthView .calendarMonthViewHeader {
  border-top-left-radius: var(--wcfBorderRadius);
  border-top-right-radius: var(--wcfBorderRadius);
}

.calendarMonthView > .calendarWeeks > li:last-child {
  border-bottom-left-radius: var(--wcfBorderRadius);
  border-bottom-right-radius: var(--wcfBorderRadius);
}

.sidebar .calendarMonthView > .calendarWeeks > li:last-child > .calendarWeekDays > li:first-child {
  border-bottom-left-radius: var(--wcfBorderRadius);
}

.calendarMonthView > .calendarWeeks > li:last-child > .calendarWeekDays > li:last-child {
  border-bottom-right-radius: var(--wcfBorderRadius);
}

.calendarFullMonthView .calendarWeeks > li:last-child > div {
  border-bottom-left-radius: var(--wcfBorderRadius);
}

#tpl_calendar_yearly .calendarMonthView > .calendarWeeks > li:last-child > .calendarWeekDays > li:first-child {
  border-bottom-left-radius: var(--wcfBorderRadius);
}

/* === content === */
.calendarMonthView .calendarMonthViewHeader {
  background-color: #151515;
  border-bottom: none;
}

.calendarFullMonthView .calendarMonthViewHeader > li {
  padding: 6px 10px;
}

.calendarFullMonthView .calendarMonthViewHeader > li:first-child {
  border-left: 1px solid var(--wcfContentContainerBackground);
}

.calendarFullMonthView .calendarMonthViewHeader > li:not(:last-child) {
  border-right: 1px solid var(--wcfContentContainerBackground);
}

.calendarMonthView .calendarWeeks > li:last-child {
  border-bottom-color: var(--wcfContentBorderInner);
}

.calendarWeeks {
  border-left: 1px solid var(--wcfContentBorderInner);
  border-right: 1px solid var(--wcfContentBorderInner);
}

.calendarFullMonthView .calendarWeeks > li > div {
  background-color: var(--wcfContentContainerBackground) !important;
}

.calendarMonthView .calendarWeeks .calendarWeekDays > li {
  background-color: var(--wcfContentContainerBackground);
}

.calendarFullMonthView .calendarWeeks .calendarWeekDays > li:hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
}

.calendarMonthView .calendarWeeks .calendarWeekDays > li.calendarWeekend:not(.calendarToday) {
  background-color: rgb(247, 247, 247);
}

.calendarMonthView .calendarWeeks .calendarWeekDays > li.calendarWeekend:not(.calendarToday):hover {
  background-color: #eef0f2;
}

.sidebar .calendarMonthView .calendarWeeks .calendarWeekDays > li.calendarWeekend:not(.calendarToday) {
  background-color: rgb(249, 249, 249);
}

.calendarWeekView .calendarEvents > li {
  background-color: transparent;
  padding: 3px 5px;
}

.section.sectionContainerList.calendarWeekView .containerList > li:not(:last-child) {
  margin-bottom: 4px;
}

.calendarWeekView .calendarDay {
  background-color: #151515;
  border: none;
  border-radius: var(--wcfBorderRadius);
  color: #fff;
}

.calendarWeekView li:hover .calendarDay {
  background-color: #545b60;
  transition: all 0.1s;
}

.calendarWeekView .calendarDay > p {
  color: rgb(189, 192, 195);
}

.calendarWeekView .calendarDay > h3 > a {
  color: #fff;
}

.calendarWeekView .containerList > li.calendarToday .calendarDay {
  background-color: var(--wcfHeaderMenuDropdownBackgroundActive);
}

.calendarWeekView .containerList > li.calendarToday .calendarDay > p {
  color: #fff;
}

.calendarFullMonthView .calendarWeeks > li {
  border-bottom-color: var(--wcfContentBorderInner);
}

.calendarWeekView .calendarEvents > li:not(:last-child) {
  border-bottom: none;
  margin-bottom: 2px;
}

.calendarWeekView .calendarEvents > li:nth-child(2n) {
  background-color: transparent;
}

.calendarMonthView .calendarWeeks .calendarWeekDays > li.calendarToday {
  background-color: var(--wcfSidebarBackground) !important;
}

.calendarMonthView .calendarWeeks .calendarWeekDays > li.calendarToday > h3 a {
  background-color: #d1d4d8;
  padding: 0px 5px;
  color: #151515;
  border-radius: 2px;
}

.calendarMonthView:not(.calendarFullMonthView) .calendarWeekDays > li > h3 > a {
  border-radius: 2px;
  box-shadow: none;
  background-color: #e6e6e6;
}

.sidebar .calendarMonthView {
  font-size: 12px;
}

.calendarFullMonthView .calendarEventLink {
  text-shadow: none;
}

.calendarFullMonthView .calendarEventLink.calendarEventTextColorDark {
  text-shadow: none;
}

.calendarFullMonthView .calendarEventLink.calendarEventTextColorLight {
  text-shadow: none;
}

.calendarMonthView .calendarWeeks .calendarWeekDays > li:hover {
  background-color: #f7f7f7;
}

.sidebar .calendarMonthView .calendarWeeks .calendarWeekDays > li.calendarWeekend:not(.calendarToday):hover {
  background-color: #ebebeb;
}

@media screen and (max-width: 1024px) {
  .calendarFullMonthView .calendarWeeks .calendarWeekDays > li {
    border-top: 1px solid var(--wcfContentBorderInner);
  }
  .calendarMonthView .calendarWeeks {
    border-top: 1px solid var(--wcfContentBorderInner);
  }
  .calendarFullMonthView .calendarWeeks .calendarWeekDays > li {
    border-top: 1px solid var(--wcfContentBorderInner);
  }
  .calendarFullMonthView .calendarWeeks > li .calendarWeekNumber:first-child {
    border-radius: var(--wcfBorderRadiusContainer) var(--wcfBorderRadiusContainer) 0px 0px;
  }
  .calendarWeekView .calendarDay {
    width: 76px;
  }
}
/* ================================================================ WSC 6, 5 & 3 CalendarPastDay Scanlines by Gino Zantarelli */
.calendarFullMonthView .calendarPastDay::after {
  background-color: transparent;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0, 0, 0, 0.05) 3px, rgba(0, 0, 0, 0.05) 3px, transparent 4px);
}

/* ================================================================ Woltlab Suite 6 Blog */
@media screen and (min-width: 1025px), print {
  .contentItem.contentItemMultiColumn.blog {
    margin-left: 80px;
    overflow: visible;
    flex-basis: calc(50% - 80px);
  }
  .content:first-child:last-child .contentItemMultiColumn {
    flex-basis: calc(33.3333333333% - 80px);
  }
  .blogDateBox {
    background-color: var(--wcfContentText);
    border-radius: var(--wcfBorderRadius);
    display: block;
    position: absolute;
    width: 50px;
    height: 80px;
    padding: 5px;
    line-height: 1.2;
    text-align: center;
    color: #ffffff;
    z-index: 10;
    left: -60px;
    top: 0px;
  }
  .blogListDate {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-size: 26px;
    line-height: 26px;
    margin-top: 4px;
  }
  .blogListMonth {
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 6px;
  }
  .blogListYear {
    font-size: 13px;
    text-transform: uppercase;
    margin-top: 2px;
  }
}
@media screen and (max-width: 1024px) {
  .blogDateBox {
    background-color: #151515;
    border-radius: 3px;
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 108px;
    right: 20px;
    padding: 5px;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    z-index: 10;
  }
  .blogListDate {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-size: 19px;
    line-height: 22px;
    margin-top: -3px;
  }
  .blogListMonth {
    font-size: 10px;
    text-transform: uppercase;
    margin-top: -2px;
  }
  .blogListYear {
    font-size: 10px;
    text-transform: uppercase;
  }
}
.blogEntryNavigation .blogPreviousEntryButton .blogEntryNavigationLink, .blogEntryNavigation .blogNextEntryButton .blogEntryNavigationLink {
  flex: 0 0 100%;
  max-width: 100%;
  color: var(--wcfContentLinkActive);
}

.blogEntryNavigation .blogPreviousEntryButton .blogEntryNavigationLink:hover, .blogEntryNavigation .blogNextEntryButton .blogEntryNavigationLink:hover {
  color: var(--wcfContentText);
}

@media screen and (min-width: 1025px), print {
  .boxTitle + .boxContent .containerList.blogList .contentItem.contentItemMultiColumn.blog {
    margin-left: 60px;
  }
}
@media screen and (max-width: 1024px) {
  .boxTitle + .boxContent .containerList.blogList .contentItem.contentItemMultiColumn.blog {
    margin-left: 0px;
  }
}
/* ================================================================ Viecode Lexicon */
.tabularBox.lexiconCategoryList .tabularBoxTitle > header {
  background-color: var(--wcfHeaderBackground);
  border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px !important;
  padding: 14px 20px 18px !important;
}

.lexiconMainCategory.lexiconDepth1.tabularBox.tabularBoxTitle header + ul li.lexiconCategoryContainer.lexiconDepth1.tabularBox:first-child {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top: none;
  margin-top: -4px;
}

li.lexiconCategoryContainer.lexiconDepth1.tabularBox:first-child {
  border-top-left-radius: var(--wcfBorderRadius);
  border-top-right-radius: var(--wcfBorderRadius);
}

li.lexiconCategoryContainer.lexiconDepth1.tabularBox:last-child {
  border-bottom-left-radius: var(--wcfBorderRadius);
  border-bottom-right-radius: var(--wcfBorderRadius);
  border-bottom: none;
}

.lexiconCategoryList > li.lexiconCategoryContainer:first-child {
  border-top: none;
}

.lexiconCategoryList .lexiconCategoryContainer {
  background-color: var(--wcfContentContainerBackground);
  border-bottom: 3px solid var(--wcfContentBackground);
  transition: background-color 0.12s;
}

.lexiconCategoryList .lexiconCategoryContainer:hover {
  background-color: var(--wcfTabularBoxBackgroundActive);
}

.lexiconCategoryList .lexiconCategoryContainer:last-child {
  border-bottom-left-radius: var(--wcfBorderRadius);
  border-bottom-right-radius: var(--wcfBorderRadius);
  border-bottom: none;
}

.lexiconCategoryList .lexiconCategory {
  padding: 10px;
}

.lexiconCategoryList .lexiconCategory > span {
  margin-left: 0px;
  margin-right: 8px;
}

.lexiconCategoryList .lexiconCategory > span fa-icon {
  --font-size: 24px;
  --icon-size: 28px;
}

@media screen and (min-width: 1025px), print {
  .section.sectionContainerList.lexiconIndexEntryList > ul {
    width: 33.333% !important;
  }
}
.buttonList.smallButtons.lexiconAlphabetNavigation > li:not(:last-child) {
  margin-right: 3px;
}

.buttonList.smallButtons.lexiconAlphabetNavigation .button {
  margin-bottom: 3px;
  padding: 7px 11px;
}

.buttonList.smallButtons.lexiconAlphabetNavigation .button span {
  padding-right: 0px;
}

.section.sectionContainerList.lexiconIndexEntryList {
  margin: 20px -10px -10px !important;
}

.section.sectionContainerList.lexiconIndexEntryList > ul > li {
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  margin: 10px;
  padding: 10px !important;
}

@media screen and (max-width: 1024px) {
  .lexiconCategoryList .lexiconCategoryDescription {
    display: block;
    font-size: 90%;
  }
}
@media screen and (max-width: 1024px) {
  .menuOverlayItemList {
    padding: 0px;
  }
  .menuOverlayLogoWrapper {
    background-color: var(--wcfHeaderMenuLinkBackground);
  }
  .menuOverlayItemLink.active, .menuOverlayItemLinkIcon.active {
    background-color: var(--wcfButtonBackground);
  }
  .pageMenuMainItemLink {
    padding: 0 14px;
  }
  .pageMenuMainContainer .pageMenuMainItemLink[aria-current=page]::before {
    content: "\f105\f105";
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    font-size: 10px;
    width: 10px;
    margin-right: 6px;
    letter-spacing: -2px;
    margin-top: 2px;
  }
  .userMenuButtons {
    margin-right: 10px;
  }
  .pageMenuMainItemLabel, .pageMenuMainItemLink {
    font-weight: 500;
    letter-spacing: -0.5px;
  }
  .searchBarOpen .pageHeaderSearch {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
  }
  .pageHeaderSearch .pageHeaderSearchInputContainer .pageHeaderSearchType {
    border-bottom: 1px solid var(--wcfHeaderBackground);
  }
  .wbbBoardNode {
    padding: 10px;
  }
  .wbbBoardNode__lastPost::before {
    width: 0;
    height: 0;
    border-bottom: 8px solid #ececec;
    border-right: 10px solid transparent;
    content: "";
    position: absolute;
    top: -8px;
    left: 10px;
  }
  .wbbBoardNode__lastPost {
    background-color: #ececec;
    border-radius: var(--wcfBorderRadius);
    padding: 10px;
    margin-top: 10px;
  }
  .messageGroupList .tabularListRowHead .columnSubject, .messageGroupList .tabularListRowHead .columnLastPost {
    padding: 8px 10px;
  }
  .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns {
    padding: 14px;
  }
  .wbbThreadPostList.messageList :not(.modificationLogEntry) + .modificationLogEntry {
    border-top: none;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .main > div {
    padding: 30px 20px;
  }
  .pageNavigation {
    padding: 0px;
  }
  .pageNavigation .layoutBoundary {
    min-height: auto;
  }
  .content > .section, .content > form, .sectionContainer {
    margin-left: 0px;
    margin-right: 0px;
  }
  .boxesFooterBoxes .boxContainer {
    margin-left: 0px;
    margin-right: 0px;
  }
  .boxesFooterBoxes .box {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0%;
    margin-right: 0%;
  }
  .boxesFooterBoxes .box.boxFullWidth {
    flex-basis: 100%;
    max-width: 100%;
  }
  .tabMenu, .menu {
    padding-left: 0px;
    padding-right: 0px;
  }
  .tabMenu > ul, .menu > ul {
    padding-top: 4px;
  }
  .containerList.doubleColumned > li + li, .containerList.tripleColumned > li + li {
    margin-top: 0px;
  }
  #messageQuickReply .messageSidebar + .messageContent {
    border-radius: var(--wcfBorderRadius) !important;
  }
  .messageList:not(.messageReducedList) > li {
    margin-bottom: 30px;
  }
  .messageReduced .messageHeader {
    margin: 0px;
  }
  .messageList:not(.messageReducedList) > .messageListPagination {
    margin: 0px;
    border-top: none;
  }
  .messageList:not(.messageReducedList) .messageSidebar {
    border-top: none;
    margin: 0px;
    border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0px 0px !important;
  }
  .messageSidebar {
    padding: 15px;
  }
  .messageSidebar + .messageContent {
    margin-top: 2px;
    border-radius: 0px 0px var(--wcfBorderRadius) var(--wcfBorderRadius);
  }
  .messageList:not(.messageReducedList) > li + #messageQuickReply .messageSidebar + .messageContent {
    margin-top: 15px;
  }
  .sidebar {
    margin: 0px;
  }
  .boxesSidebarLeft .box:not(.boxBorderless), .boxesSidebarRight .box:not(.boxBorderless) {
    padding: 20px;
  }
  .boxesSidebarLeft #sidebarForm:not(:first-child), .boxesSidebarRight #sidebarForm:not(:first-child) {
    margin-top: 30px;
  }
  .boxesSidebarLeft .box .boxMenu .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuLink {
    padding: 1px 10px;
  }
  .boxesSidebarLeft .box .boxMenu li.active > .boxMenuLink {
    margin-left: 0px;
    margin-right: 0px;
  }
  .boxesSidebarLeft .box .boxMenu .boxMenuItemDepth1 .boxMenuLink, .boxesSidebarRight .box .boxMenu .boxMenuItemDepth1 .boxMenuLink {
    padding-left: 10px;
  }
  .boxesFooterBoxes .boxContainer {
    padding: 30px 20px;
  }
  .boxesFooterBoxes .layoutBoundary::before {
    left: 20px;
    right: 20px;
  }
  .boxesFooter {
    padding: 10px 20px;
  }
  .pageFooterCopyright {
    padding: 10px 20px 20px;
  }
  .contentFooter > .contentFooterNavigation {
    padding-top: 20px;
  }
  .contentInteraction {
    padding-top: 20px;
  }
  .boxesSidebarLeft::before {
    background-color: var(--wcfButtonPrimaryBackground);
    color: var(--wcfButtonPrimaryText);
    border-radius: var(--wcfBorderRadius);
    transition: all 0.1s;
  }
  .boxesSidebarLeft:hover::before, .boxesSidebarLeft.open::before {
    background-color: var(--wcfButtonPrimaryBackgroundActive);
    color: var(--wcfButtonPrimaryTextActive);
  }
  .wbbBoardNode__lastPost:not(:first-child) {
    margin-top: 15px;
  }
  .messageSidebar .badgeOnline::before {
    border: none;
    height: 6px;
    width: 12px;
    border-radius: 4px;
    top: 5px;
    left: 32px;
  }
  .messageFooterGroup > .messageFooterButtonsExtra + .messageFooterButtons .button {
    border-radius: var(--wcfBorderRadius);
  }
  .containerList > li .buttonGroupNavigation > .buttonList {
    overflow: hidden;
  }
  .buttonGroupNavigation > ul > li:not(:last-child) {
    margin-right: 0px;
  }
  .containerList.userList li {
    margin-bottom: 0px;
  }
  .boxesSidebarRight .box .boxMenu li.active > .boxMenuLink {
    margin-left: 0px;
    margin-right: 0px;
  }
  .messageList:not(.messageReducedList) > li {
    margin-bottom: 0px;
  }
  .messageList:not(.messageReducedList) .messageSidebar {
    margin-top: 20px;
  }
  .messageList > li:not(:last-child) {
    padding-bottom: 20px;
  }
  .messageList:not(.messageReducedList) > li .ignoredUserMessage {
    margin-top: 20px;
  }
  .messageList:not(.messageReducedList) > li + #messageQuickReply .messageSidebar + .messageContent {
    margin-top: 20px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .wbbBoardNode__lastPost {
    background-color: transparent;
    border: none;
    border-left: 3px solid var(--wcfContentText);
    padding: 0px 0px 0px 10px;
    box-shadow: none;
    border-radius: 0px;
    margin-top: 0px;
  }
  .wbbBoardNode__lastPost::before {
    display: none;
  }
  .boxesSidebarLeft #sidebarForm:not(:first-child), .boxesSidebarRight #sidebarForm:not(:first-child) {
    margin-top: 0px !important;
  }
  .contentInteraction {
    padding-top: 0px;
  }
  .messageList:not(.messageReducedList) > li {
    margin-bottom: 0px;
  }
  .messageSidebar + .messageContent {
    margin-top: 0px;
  }
  .message.messageSidebarOrientationLeft .messageSidebar::before {
    margin-top: 0px;
  }
  .messageList:not(.messageReducedList) .messageSidebar {
    margin-top: 0px;
  }
  .messageList > li:not(:last-child) {
    padding-bottom: 30px;
  }
  .messageList:not(.messageReducedList) > li .ignoredUserMessage {
    margin-top: 0px;
  }
  .messageList:not(.messageReducedList) > li + #messageQuickReply .messageSidebar + .messageContent {
    margin-top: 0px;
  }
}
.plain.wbbBoardNode__statItem.wbbBoardNode__statItem--threads {
  width: 70px;
}

.tabularBox.lexiconCategoryList .tabularBoxTitle > header {
  border-bottom: none;
}

.socialShare:not(.shareOpen.shareHideToolbar) .ck-editor {
  border-bottom: 10px solid var(--wcfContentContainerBackground);
}

.socialShare .shareContainer .actionArea {
  background: var(--wcfContentContainerBackground);
}

#socialShare #sharePicture {
  border-radius: var(--wcfBorderRadius);
}

.socialShare {
  background-color: var(--wcfContentContainerBackground);
  border: none !important;
  border-radius: var(--wcfBorderRadius);
  margin-bottom: 2px;
  padding: 10px;
  transition: background-color 0.12s;
}

.timelineActivityItem:hover {
  background-color: var(--wcfTabularBoxBackgroundActive) !important;
}

.courseList .progressBarContainer {
  border-radius: var(--wcfBorderRadius) !important;
  margin: 10px 0px !important;
}

.userMenu[data-origin=jcoinsPanel] .userMenuItemImage {
  grid-row: span 3;
}

.jcoinsShopItemList .jcoinsShopItemDiv {
  border: none;
  background-color: var(--wcfContentContainerBackground);
  border-radius: var(--wcfBorderRadius);
  box-shadow: none;
}

html[data-color-scheme=dark] .jcoinsShopItemList .jcoinsShopItemFooter {
  background-color: transparent;
  border-top: 2px solid #0e1116;
}

html[data-color-scheme=dark] .jcoinsShopItemDiv .jcoinsShopItemPrice {
  color: #d9d9d9;
  font-weight: 600;
}

.box128 > :first-child:not(:last-child).jcoinsShopItemImage {
  margin-right: 30px;
}

.cocBasesFilters {
  border-radius: var(--wcfBorderRadius) !important;
  border: none !important;
}

.cocBasesCard {
  border-radius: var(--wcfBorderRadius) !important;
  border: none !important;
}

.cocSearchBox, .cocTable {
  background-color: var(--wcfContentContainerBackground) !important;
  border-radius: var(--wcfBorderRadius) !important;
  box-shadow: none !important;
}

.jCoinsBadgeUpdate {
  margin-left: 4px;
  left: 0;
  position: relative;
  top: 0;
}

html[data-color-scheme=dark] {
  /*
  Woltlab Suite 6.1 Theme Color Drop Multi Dark Mode
  Design & coding by Gino Zantarelli
  https://www.powerstylez.com
  All under Copyright-no Freeware
  */
}
@media screen and (min-width: 1025px), print {
  html[data-color-scheme=dark] .messageSidebar .badgeOnline::before {
    color: var(--wcfContentLink);
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  html[data-color-scheme=dark] .messageSidebar .badgeOnline::before {
    color: var(--wcfContentLink);
  }
}
html[data-color-scheme=dark] .recentActivityListItem__time {
  border: 1px solid var(--wcfContentDimmedLinkActive);
  color: var(--wcfContentDimmedLinkActive);
}
html[data-color-scheme=dark] .containerList > li .containerHeadline > .containerContentType {
  border: 1px solid var(--wcfContentDimmedLinkActive);
  color: var(--wcfContentDimmedLinkActive);
}
html[data-color-scheme=dark] .containerList > li:hover .containerHeadline > .containerContentType {
  border: 1px solid var(--wcfContentLink);
  color: var(--wcfContentLink);
}
html[data-color-scheme=dark] .userCard__onlineIndicator::before {
  color: var(--wcfContentLink);
}
html[data-color-scheme=dark] .unfurlUrlCard {
  background-color: #1b2029;
  border: none !important;
}
html[data-color-scheme=dark] .top_registerbox .top_registercontentRight .button.loginLink:hover {
  color: #151515 !important;
}
html[data-color-scheme=dark] select {
  background-color: #0b0e12 !important;
  border: 1px solid #232c38 !important;
}
html[data-color-scheme=dark] .wbbPost.wbbPostDeleted.messageCollapsedExpandable {
  color: #b31111 !important;
}
html[data-color-scheme=dark] .wbbPost.wbbPostDeleted.messageCollapsedExpandable .messageTitle, html[data-color-scheme=dark] .wbbPost.wbbPostDeleted.messageCollapsedExpandable .messageTitle a {
  color: #b31111 !important;
}
html[data-color-scheme=dark] .messageFooterNote.wbbPostDeleteNote {
  color: #f1d3d3;
  background-color: #c60c0c;
}
html[data-color-scheme=dark] .spinner {
  background-color: rgba(255, 255, 255, 0.16) !important;
}
html[data-color-scheme=dark] .dialog, html[data-color-scheme=dark] .dialogContainer {
  border: none;
}
html[data-color-scheme=dark] .dialogContainer, html[data-color-scheme=dark] .dialog__document {
  background-color: var(--wcfContentContainerBackground);
}
html[data-color-scheme=dark] .pageHeaderPanel {
  background-color: var(--wcfContentBackground);
}
html[data-color-scheme=dark] #pageHeaderPanel.sticky {
  background-color: #151920;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);
}
html[data-color-scheme=dark] .dropdownMenuContainer .userMenu .userMenuHeader {
  background-color: #2d3442;
}
html[data-color-scheme=dark] .dropdownMenuContainer .userMenu .userMenuHeader::before {
  border-color: transparent transparent #2d3442 transparent;
}
html[data-color-scheme=dark] .userMenuFooter {
  background-color: #1e242e;
  color: var(--wcfUserMenuText);
}
html[data-color-scheme=dark] .userMenuFooter:hover {
  background-color: #1c212b;
  color: var(--wcfUserMenuLinkActive);
}
html[data-color-scheme=dark] .userMenuFooter:hover {
  color: var(--wcfUserMenuLinkActive);
}
html[data-color-scheme=dark] .dialogContainer > header, html[data-color-scheme=dark] .dialog__header {
  background-color: #2c3441;
}
html[data-color-scheme=dark] .searchBarOpen .pageHeaderSearch {
  background-color: #1b2029;
}
html[data-color-scheme=dark] .pageHeaderSearchInputContainer .pageHeaderSearchType > .button, html[data-color-scheme=dark] .pageHeaderSearchInputContainer .pageHeaderSearchInputButton.pageHeaderSearchInputButton {
  background-color: #262e3e;
}
html[data-color-scheme=dark] .pageHeaderSearchInputContainer .pageHeaderSearchType > .button:hover, html[data-color-scheme=dark] .pageHeaderSearchInputContainer .pageHeaderSearchType.dropdownOpen > .button, html[data-color-scheme=dark] .pageHeaderSearchInputContainer .pageHeaderSearchInputButton.pageHeaderSearchInputButton:hover {
  background-color: #2c3546;
}
html[data-color-scheme=dark] .pageNavigation > div #dateandtime {
  color: #151515;
}
html[data-color-scheme=dark] .conversationQuotaMeter {
  background: #202630;
  border-radius: var(--wcfBorderRadius);
}
html[data-color-scheme=dark] .boxesSidebarLeft .box .boxMenu .boxMenuLink .badge::before, html[data-color-scheme=dark] .boxesSidebarRight .box .boxMenu .boxMenuLink .badge::before {
  border-right: 5px solid #fff;
}
html[data-color-scheme=dark] #UserXtraboxContainer .layoutBoundary::after, html[data-color-scheme=dark] .boxesFooterBoxes .layoutBoundary::before {
  background-color: #3a485d;
}
html[data-color-scheme=dark] .showhidesidebar a {
  background-color: var(--wcfContentContainerBackground);
  color: var(--wcfContentText);
}
html[data-color-scheme=dark] .showhidesidebar a:hover {
  background-color: #29313e;
  color: var(--wcfContentLink);
}
html[data-color-scheme=dark] .mainMenu .boxMenu .boxMenuDepth1 > li > a:hover, html[data-color-scheme=dark] .mainMenu .boxMenu .boxMenuDepth2 > li > a:hover {
  background-color: var(--wcfHeaderMenuDropdownBackgroundActive);
  color: var(--wcfHeaderMenuDropdownLinkActive);
}
html[data-color-scheme=dark] .wbbSimpleBoardNodeList {
  border: none;
}
html[data-color-scheme=dark] .wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNodeList .wbbSimpleBoardNode:first-child {
  background-color: #0e1218;
}
html[data-color-scheme=dark] .wbbSimpleBoardNodeContainer--category .wbbSimpleBoardNodeList .wbbSimpleBoardNode:last-child {
  border-radius: var(--wcfBorderRadius);
}
html[data-color-scheme=dark] .wbbSimpleBoardNode {
  background-color: #0e1218;
}
html[data-color-scheme=dark] .wbbSimpleBoardNode:not(.wbbSimpleBoardNode--disabled):hover {
  background-color: #0e1116 !important;
}
html[data-color-scheme=dark] .message.messageSidebarOrientationLeft .messageHeader, html[data-color-scheme=dark] .messageReduced .messageHeader, html[data-color-scheme=dark] .embeddedContent, html[data-color-scheme=dark] .filebaseFileCardFooter, html[data-color-scheme=dark] .filebaseFileContent .filebaseFileTeaser, html[data-color-scheme=dark] .main > div .userProfileContent.section .sectionTitle,
html[data-color-scheme=dark] .pollContainer .pollInnerContainer, html[data-color-scheme=dark] .pollContainer .formSubmit, html[data-color-scheme=dark] .messageAttachment, html[data-color-scheme=dark] .quoteBoxContent {
  background-color: #1b2029;
}
html[data-color-scheme=dark] #tpl_wcf_accountManagement .section .sectionTitle, html[data-color-scheme=dark] #tpl_wcf_avatarEdit .section .sectionTitle, html[data-color-scheme=dark] #tpl_wcf_signatureEdit .section .sectionTitle, html[data-color-scheme=dark] #tpl_wcf_settings .section .sectionTitle, html[data-color-scheme=dark] #tpl_wcf_notificationSettings .section .sectionTitle, html[data-color-scheme=dark] #tpl_wcf_notificationList .section .sectionTitle, html[data-color-scheme=dark] #tpl_wcf_ignoredUsers .section .sectionTitle, html[data-color-scheme=dark] .notificationSettingsCategory {
  background-color: #1b2029;
}
html[data-color-scheme=dark] .htmlContent table th, html[data-color-scheme=dark] .ck.ck-content.ck-editor__editable table th, html[data-color-scheme=dark] .messageBody > .messageText table th, html[data-color-scheme=dark] .messageSignature > div table th, html[data-color-scheme=dark] .table th {
  background-color: var(--wcfEditorTableBorder);
}
html[data-color-scheme=dark] .htmlContent table td, html[data-color-scheme=dark] .ck.ck-content.ck-editor__editable table td, html[data-color-scheme=dark] .messageBody > .messageText table td, html[data-color-scheme=dark] .messageSignature > div table td, html[data-color-scheme=dark] .table td {
  background-color: #161b23;
}
html[data-color-scheme=dark] .htmlContent table tr:hover > td, html[data-color-scheme=dark] .ck.ck-content.ck-editor__editable table tr:hover > td, html[data-color-scheme=dark] .messageBody > .messageText table tr:hover > td, html[data-color-scheme=dark] .messageSignature > div table tr:hover > td, html[data-color-scheme=dark] .table tr:hover > td {
  background-color: #141920;
}
html[data-color-scheme=dark] .messageShareButtons .messageShareProvider[data-identifier=Twitter] {
  background-color: #242732;
}
html[data-color-scheme=dark] .messageShareButtons .messageShareProvider[data-identifier=Twitter]:hover {
  background-color: #2b2f3c;
}
html[data-color-scheme=dark] .userMention {
  background-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
html[data-color-scheme=dark] .codeBox {
  background-color: #0c0f13;
}
html[data-color-scheme=dark] .codeBox .codeBoxHeader {
  border-bottom: 1px solid var(--wcfContentContainerBackground);
}
html[data-color-scheme=dark] .codeBox.collapsed > .toggleButton {
  background-color: #232a35;
}
html[data-color-scheme=dark] .codeBox.collapsed > .toggleButton:hover {
  background-color: #1b2029;
}
html[data-color-scheme=dark] .message .quoteBox > .toggleButton, html[data-color-scheme=dark] .message .quoteBox.collapsed > .toggleButton, html[data-color-scheme=dark] .message.messageSidebarOrientationLeft .quoteBox > .toggleButton, html[data-color-scheme=dark] .message.messageSidebarOrientationLeft .quoteBox.collapsed > .toggleButton {
  background-color: #232a35;
}
html[data-color-scheme=dark] .message .quoteBox > .toggleButton:hover, html[data-color-scheme=dark] .message .quoteBox.collapsed > .toggleButton:hover, html[data-color-scheme=dark] .message.messageSidebarOrientationLeft .quoteBox > .toggleButton:hover, html[data-color-scheme=dark] .message.messageSidebarOrientationLeft .quoteBox.collapsed > .toggleButton:hover {
  background-color: #1f2530;
}
html[data-color-scheme=dark] .quoteBox.collapsibleBbcode.quoteBoxSimple .quoteBoxContent {
  background-color: #1b2029;
}
html[data-color-scheme=dark] .spoilerBox[open] .spoilerContent {
  background-color: #29303c;
}
html[data-color-scheme=dark] .message .galleryImageSeries {
  background-color: #1b2029;
}
html[data-color-scheme=dark] .section.editHistoryDiff {
  color: #4f4f4f;
}
html[data-color-scheme=dark] .messageReduced .messageHeaderMetaData .messagePublicationTime, html[data-color-scheme=dark] .messageReduced .messageHeaderMetaData > li:not(:last-child)::after {
  color: var(--wcfContentText);
}
html[data-color-scheme=dark] .containerList.styleList > li:hover {
  background-color: #12151a;
}
html[data-color-scheme=dark] .menu > ul > li:not(li.active) > a {
  background-color: #1d232f;
}
html[data-color-scheme=dark] .section .sectionDescription {
  color: #abafb5;
}
html[data-color-scheme=dark] .ck.ck-button.ck-off.ck-button_with-text.ck-dropdown__button {
  background-color: #ffffff;
  color: #161616 !important;
}
html[data-color-scheme=dark] .ck.ck-list {
  background: #ffffff;
}
html[data-color-scheme=dark] .ck.ck-list__item .ck-button:hover:not(.ck-disabled) {
  background: #e6e6e6 !important;
}
html[data-color-scheme=dark] .ck.ck-list__item .ck-button.ck-on {
  background: #e0e0e0 !important;
}
html[data-color-scheme=dark] .ck.ck-button.ck-on, html[data-color-scheme=dark] a.ck.ck-button.ck-on {
  background: #465263;
}
html[data-color-scheme=dark] .ck.ck-content.ck-editor__editable {
  background-color: #0c0e12;
}
html[data-color-scheme=dark] .ck.ck-button.ck-disabled.ck-off {
  background-color: #1c212b !important;
}
html[data-color-scheme=dark] .messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active .button {
  background-color: #323846;
}
html[data-color-scheme=dark] .messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active .button:hover {
  background-color: #2e3441;
}
html[data-color-scheme=dark] .messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active input {
  border-color: #2e3845 !important;
}
html[data-color-scheme=dark] .sortableNode:not(:last-child) {
  border-bottom: 1px solid #39404b;
}
html[data-color-scheme=dark] .ck.ck-balloon-panel {
  background: #14181f;
  border: none;
}
html[data-color-scheme=dark] .ck.ck-balloon-panel[class*=arrow_n]::before {
  border-color: transparent transparent #14181f transparent;
}
html[data-color-scheme=dark] .ck.ck-balloon-panel[class*=arrow_n]::after {
  border-color: transparent transparent #14181f transparent;
}
html[data-color-scheme=dark] .ck.ck-balloon-panel[class*=arrow_s]::before {
  border-color: #14181f transparent transparent;
}
html[data-color-scheme=dark] .ck.ck-balloon-panel[class*=arrow_s]::after {
  border-color: #14181f transparent transparent transparent;
}
html[data-color-scheme=dark] .ck .ck-insert-table-dropdown-grid-box.ck-on {
  background: #495467;
}
html[data-color-scheme=dark] .messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active {
  background-color: #222933;
}
html[data-color-scheme=dark] .messageTabMenu > .messageTabMenuContent.active {
  background-color: #222933;
}
html[data-color-scheme=dark] .messageTabMenu.messageTabMenuContent > nav {
  border-bottom: 1px solid #404753;
}
html[data-color-scheme=dark] .messageTabMenu.messageTabMenuContent > nav > ul > li:not(li.active) > a {
  background-color: #333c49;
}
html[data-color-scheme=dark] .comment__message .messageTabMenu:not(.messageTabMenuContent) > .messageTabMenuContent.active {
  background-color: #252b35;
}
html[data-color-scheme=dark] .comment__message .messageTabMenu > .messageTabMenuContent.active {
  background-color: #252b35;
}
html[data-color-scheme=dark] .comment__message .messageTabMenu.messageTabMenuContent > nav {
  border-bottom: 1px solid #3f4757;
}
html[data-color-scheme=dark] .comment__message .messageTabMenu.messageTabMenuContent > nav > ul > li:not(li.active) > a {
  background-color: #363d4d;
}
html[data-color-scheme=dark] .ck-content .table th:first-child {
  border-left: 1px solid var(--wcfEditorTableBorder) !important;
}
html[data-color-scheme=dark] .ck.ck-content pre {
  background-color: #151921;
}
html[data-color-scheme=dark] .ck.ck-content .ck-woltlabspoiler {
  background-color: #1a1f29;
}
html[data-color-scheme=dark] .ck.ck-content .ck-woltlabspoiler__title::before {
  color: #ffffff;
}
html[data-color-scheme=dark] .ck.ck-content blockquote {
  background-color: #1a1f29;
}
html[data-color-scheme=dark] .ckeditor5__restoreDraft__dialog {
  background-color: #1a1f29;
}
html[data-color-scheme=dark] .comment__message::before {
  border-top: 14px solid #1c2129;
}
html[data-color-scheme=dark] .comment__message {
  background-color: #1c2129;
}
html[data-color-scheme=dark] .commentResponse__message::before {
  border-top: 14px solid #191e26;
}
html[data-color-scheme=dark] .commentResponse__message {
  background-color: #191e26;
}
html[data-color-scheme=dark] .comment__editor .ck.ck-content.ck-editor__editable {
  background-color: #08090b;
}
html[data-color-scheme=dark] .comment__editor .ck.ck-toolbar.ck-toolbar_grouping {
  background-color: #1c2129 !important;
}
html[data-color-scheme=dark] .codeBox .codeBoxHeader {
  background-color: #28303c;
}
html[data-color-scheme=dark] .boxesContentTop .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent::before {
  color: #ffffff !important;
}
html[data-color-scheme=dark] .boxesContentBottom .box.boxInfo[data-box-identifier="com.woltlab.wcf.RegisterButton.content"] .boxTitle + .boxContent::before {
  color: #ffffff !important;
}
html[data-color-scheme=dark] .boxesContentTop .boxInfo .boxTitle, html[data-color-scheme=dark] .boxesContentBottom .boxInfo .boxTitle {
  color: #ffffff !important;
}
html[data-color-scheme=dark] .boxesContentTop .boxInfo a.button.buttonPrimary, html[data-color-scheme=dark] .boxesContentBottom .boxInfo a.button.buttonPrimary {
  background-color: #022a49;
}
html[data-color-scheme=dark] .boxesContentTop .boxInfo a.button.buttonPrimary:hover, html[data-color-scheme=dark] .boxesContentBottom .boxInfo a.button.buttonPrimary:hover {
  background-color: #03243f;
  color: #c0c0c0;
}
html[data-color-scheme=dark] .boxesFooterBoxes .layoutBoundary .tagList .tag, html[data-color-scheme=dark] .boxesFooterBoxes .layoutBoundary .tagList a.tag {
  background-color: transparent !important;
}
html[data-color-scheme=dark] .tagList .tag {
  background-color: #282e3a;
}
html[data-color-scheme=dark] .tagList .tag:hover {
  background-color: #2c3341;
}
html[data-color-scheme=dark] .userMenu, html[data-color-scheme=dark] .wbbBoardNodeList, html[data-color-scheme=dark] .contentItem, html[data-color-scheme=dark] .filebaseFileCard, html[data-color-scheme=dark] .dropdownMenu, html[data-color-scheme=dark] .reactionPopover {
  border: none !important;
}
html[data-color-scheme=dark] .boxesSidebarLeft .boxTitle, html[data-color-scheme=dark] .boxesSidebarRight .boxTitle, html[data-color-scheme=dark] .boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::before,
html[data-color-scheme=dark] .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::before, html[data-color-scheme=dark] .sidebar .boxContent.box96::before {
  color: #ffffff;
}
html[data-color-scheme=dark] .boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList, html[data-color-scheme=dark] .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList {
  color: var(--wcfSidebarText);
}
html[data-color-scheme=dark] .boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList > dt, html[data-color-scheme=dark] .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.Statistics"] dl.dataList > dt {
  color: var(--wcfSidebarText);
}
html[data-color-scheme=dark] .boxesSidebarLeft .boxTitle::after, html[data-color-scheme=dark] .boxesSidebarRight .boxTitle::after {
  opacity: 0.035;
}
html[data-color-scheme=dark] .boxesSidebarLeft .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::after, html[data-color-scheme=dark] .boxesSidebarRight .box[data-box-identifier*="com.woltlab.wcf.SignedInAs"]:not(.boxBorderless)::after {
  opacity: 0.035;
}
html[data-color-scheme=dark] .boxesSidebarLeft .box.boxInfo .boxTitle, html[data-color-scheme=dark] .boxesSidebarRight .box.boxInfo .boxTitle {
  background-color: #054475;
}
html[data-color-scheme=dark] .boxesSidebarLeft .box.boxSuccess .boxTitle, html[data-color-scheme=dark] .boxesSidebarRight .box.boxSuccess .boxTitle {
  background-color: #347925;
}
html[data-color-scheme=dark] .boxesSidebarLeft .box.boxError .boxTitle, html[data-color-scheme=dark] .boxesSidebarRight .box.boxError .boxTitle {
  background-color: #a21a0d;
}
html[data-color-scheme=dark] .boxesSidebarLeft .box.boxWarning .boxTitle, html[data-color-scheme=dark] .boxesSidebarRight .box.boxWarning .boxTitle {
  background-color: #da8d16;
}
html[data-color-scheme=dark] .sidebar .boxWithEditButton .boxEditButton {
  background-color: var(--wcfContentLink);
  color: var(--wcfContentBackground) !important;
}
html[data-color-scheme=dark] .pageFooterCopyright {
  background-image: none;
}
html[data-color-scheme=dark] .boxesFooter + .pageFooterCopyright {
  background-image: linear-gradient(rgb(25, 30, 39), rgb(25, 30, 39));
}
html[data-color-scheme=dark] .badge, html[data-color-scheme=dark] a.badge {
  --background-color: #ffffff;
  --color: #151515;
}
html[data-color-scheme=dark] .tabMenu > ul > li a .badge {
  margin-left: 3px;
}
html[data-color-scheme=dark] .contentInteractionButton .button.small[data-is-subscribed="1"] {
  background-color: #394050;
}
html[data-color-scheme=dark] #add_footerv3 {
  background-color: #181c24;
}
html[data-color-scheme=dark] #add_footerv3 .addv3Inbox h2.boxTitle {
  background-color: #262d38;
}
html[data-color-scheme=dark] #add_footerv3 .layoutBoundary h3.boxTitle span {
  background-color: #181c24;
}
html[data-color-scheme=dark] #add_footerv3 .messageShareButtons .messageShareProvider {
  background-color: var(--wcfFooterLinkActive) !important;
  color: #1d1d1d;
}
html[data-color-scheme=dark] #add_footerv3 .messageShareButtons .messageShareProvider:hover {
  background-color: var(--wcfFooterLinkActive) !important;
  color: #343434;
  opacity: 0.85 !important;
}
html[data-color-scheme=dark] .filebaseFileCardHeader {
  border-bottom: 1px solid var(--wcfContentBackground);
}
html[data-color-scheme=dark] .filebaseFileFeatured .filebaseFileCardHeader .filebaseFileIsFeatured fa-icon[size="48"]::before {
  color: #282e37;
}
html[data-color-scheme=dark] .containerContent[itemprop=reviewBody] .htmlContent, html[data-color-scheme=dark] .containerContent[itemprop=reviewBody] .ck.ck-content.ck-editor__editable, html[data-color-scheme=dark] .containerContent[itemprop=reviewBody] .messageBody > .messageText, html[data-color-scheme=dark] .containerContent[itemprop=reviewBody] .messageSignature > div {
  background-color: #1c2129;
}
html[data-color-scheme=dark] .containerContent[itemprop=reviewBody] .htmlContent::before, html[data-color-scheme=dark] .containerContent[itemprop=reviewBody] .ck.ck-content.ck-editor__editable::before, html[data-color-scheme=dark] .containerContent[itemprop=reviewBody] .messageBody > .messageText::before, html[data-color-scheme=dark] .containerContent[itemprop=reviewBody] .messageSignature > div::before {
  border-top: 14px solid #1c2129;
}
html[data-color-scheme=dark] .filebaseReviewResponse::before {
  border-top: 14px solid #191e26;
}
html[data-color-scheme=dark] .filebaseReviewResponse {
  background-color: #191e26;
}
html[data-color-scheme=dark] .galleryImageList > li > div, html[data-color-scheme=dark] .galleryMasonry > li > div {
  color: var(--wcfContentHeadlineText);
}
html[data-color-scheme=dark] .calendarMonthView .calendarMonthViewHeader {
  background-color: var(--wcfContentBorderInner);
}
html[data-color-scheme=dark] .calendarWeekView .calendarDay {
  background-color: var(--wcfContentBackground);
}
html[data-color-scheme=dark] .calendarMonthView .calendarWeeks .calendarWeekDays > li.calendarWeekend:not(.calendarToday):hover {
  background-color: #131820;
}
html[data-color-scheme=dark] .calendarWeekView .containerList > li.calendarToday .calendarDay {
  background-color: #2d3749;
}
html[data-color-scheme=dark] .calendarWeekView li:hover .calendarDay {
  background-color: #1e242d;
}
html[data-color-scheme=dark] #tpl_calendar_yearly .tabMenuContent .section:not(.sectionContainerList) > .sectionTitle {
  background-color: #242a35;
}
html[data-color-scheme=dark] .calendarMonthView:not(.calendarFullMonthView) .calendarWeekDays > li > h3 > a {
  background-color: #222731;
}
html[data-color-scheme=dark] .calendarMonthView .calendarWeeks .calendarWeekDays > li:hover {
  background-color: #151a23;
}
html[data-color-scheme=dark] .calendarWeekView .containerList > li.calendarToday .calendarDay {
  background-color: #212731;
}
html[data-color-scheme=dark] .blogDateBox {
  background-color: #1b2029;
}
html[data-color-scheme=dark] .badge.green, html[data-color-scheme=dark] a.badge.green {
  --background-color: rgba(0, 133, 0, 1);
  --color: rgba(238, 255, 238, 1);
}
html[data-color-scheme=dark] .badge.red, html[data-color-scheme=dark] a.badge.red {
  --background-color: rgba(204, 0, 0, 1);
  --color: rgba(255, 238, 238, 1);
}
html[data-color-scheme=dark] .badge.black, html[data-color-scheme=dark] a.badge.black {
  --background-color: #333;
  --color: #fff;
}
html[data-color-scheme=dark] .badge.brown, html[data-color-scheme=dark] a.badge.brown {
  --background-color: #b85c2e;
  --color: #fff;
}
html[data-color-scheme=dark] .badge.orange, html[data-color-scheme=dark] a.badge.orange {
  --background-color: #f90;
  --color: #000;
}
html[data-color-scheme=dark] .badge.yellow, html[data-color-scheme=dark] a.badge.yellow {
  --background-color: #ff0;
  --color: #333;
}
html[data-color-scheme=dark] .badge.blue, html[data-color-scheme=dark] a.badge.blue {
  --background-color: #369;
  --color: #fff;
}
html[data-color-scheme=dark] .badge.purple, html[data-color-scheme=dark] a.badge.purple {
  --background-color: #c000f0;
  --color: #fff;
}
html[data-color-scheme=dark] .badge.pink, html[data-color-scheme=dark] a.badge.pink {
  --background-color: #f0c;
  --color: #000;
}
html[data-color-scheme=dark] a.badge:hover.black {
  --background-color: #000;
}
html[data-color-scheme=dark] a.badge:hover.brown {
  --background-color: #930;
}
html[data-color-scheme=dark] a.badge:hover.red {
  --background-color: #900;
}
html[data-color-scheme=dark] a.badge:hover.orange {
  --background-color: #f60;
  --color: #000;
}
html[data-color-scheme=dark] a.badge:hover.yellow {
  --background-color: #cc0;
  --color: #333;
}
html[data-color-scheme=dark] a.badge:hover.green {
  --background-color: #060;
}
html[data-color-scheme=dark] a.badge:hover.blue {
  --background-color: #036;
}
html[data-color-scheme=dark] a.badge:hover.purple {
  --background-color: #90c;
}
html[data-color-scheme=dark] a.badge:hover.pink {
  --background-color: #c09;
  --color: #fff;
}
html[data-color-scheme=dark] .box.wbbSimilarThreadList.boxFullWidth .containerBoxList.tripleColumned > li {
  background-color: #1b2029;
}
html[data-color-scheme=dark] .containerBoxList.tripleColumned:not(.boxesContentTop .box .containerBoxList.tripleColumned):not(.boxesContentTop .box .containerBoxList.tripleColumned) > li {
  background-color: #1b2029;
}
html[data-color-scheme=dark] .dialog__content .containerList.jsGroupedUserList > li {
  background-color: var(--wcfHeaderBackground);
}
html[data-color-scheme=dark] .messageUserConsent {
  background-color: #1b2029;
  border-radius: var(--wcfBorderRadius);
  box-shadow: none;
}
@media screen and (max-width: 1024px) {
  html[data-color-scheme=dark] .pageHeaderSearchInputContainer .pageHeaderSearchType > .button, html[data-color-scheme=dark] html[data-color-scheme=dark] .pageHeaderSearchInputContainer .pageHeaderSearchInputButton.pageHeaderSearchInputButton {
    background-color: #2c3546;
  }
  html[data-color-scheme=dark] .pageHeaderSearch .pageHeaderSearchInputContainer .pageHeaderSearchInputButton {
    border-left: 1px solid var(--wcfHeaderBackground);
  }
  html[data-color-scheme=dark] .wbbBoardNode__lastPost::before {
    border-bottom: 8px solid #222834;
  }
  html[data-color-scheme=dark] .wbbBoardNode__lastPost {
    background-color: #222834;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  html[data-color-scheme=dark] .wbbBoardNode__lastPost::before {
    display: none;
  }
  html[data-color-scheme=dark] .wbbBoardNode__lastPost {
    background-color: transparent;
  }
}