/*
*/
body.user-darkmode-color.main-body {
  background-color: #121212;
  color: #BBB;
}
.user-darkmode-color a.invisibleHyperlink,
.user-darkmode-color a.invisibleHyperlink:visited,
.user-darkmode-color .fc-toolbar-title,
.user-darkmode-color .fc-icsButton-button.fc-button-primary,
.user-darkmode-color .fc-col-header-cell-cushion,
.user-darkmode-color .fc-daygrid-day-number,
.user-darkmode-color .common-text-color,
.user-darkmode-color .userCourseInfoButtonDashboard,
.user-darkmode-color .custom-background .menu-selected,
.user-darkmode-color .custom-background .customHoverBg.has-submenu.expanded {
  color: #BBB !important;
}
.user-darkmode-color .faPrimaryDefault {
  --fa-primary-color: #BBB;
}
/* Default block with white background and shadow */
.user-darkmode-color .default-white-block,
.user-darkmode-color .infoBox,
.user-darkmode-color .support-table,
.user-darkmode-color .userCourseTilesDiv,
.user-darkmode-color .rounded-shadow-block,
.user-darkmode-color table.rounded-table,
.user-darkmode-color table.rounded-cards-table td,
.user-darkmode-color #course-player #course-player-window {
  box-shadow: 0 1px 4px #000;
}
/* The profile baseTabs card. Kept in its own rule rather than joined to the group above: an unsupported
   `:has()` invalidates the whole selector list it sits in, which would drop every shadow listed there. */
.user-darkmode-color #profile-main-div > div:has(> .tab-ul) {
  box-shadow: 0 1px 4px #000;
}
.user-darkmode-color div.infoBox:hover,
.user-darkmode-color .default-list-table > tbody > tr:hover,
.user-darkmode-color .hyperlinkBox:hover,
.user-darkmode-color .filter-table table.filter-table-items td:hover,
.user-darkmode-color .content .linked:hover,
.user-darkmode-color .support-add-question:hover,
.user-darkmode-color .tableList li > div:hover {
  background-color: #2A2A2A;
}
/* Default background color for inputs. */
.user-darkmode-color .default-white-background,
.user-darkmode-color .default-white-block,
.user-darkmode-color .infoBox,
.user-darkmode-color #submenu-panel,
.user-darkmode-color .tooltip-content,
.user-darkmode-color .errorTooltip,
.user-darkmode-color .pcr-app,
.user-darkmode-color .tab-active,
.user-darkmode-color .ui-datepicker,
.user-darkmode-color .table-menu li,
.user-darkmode-color .button-right-help,
.user-darkmode-color .support-table,
.user-darkmode-color input:not(:checked) + .toggleSlider,
.user-darkmode-color .reverseSlider input:checked + .toggleSlider,
.user-darkmode-color input:checked + .toggleSlider:before,
.user-darkmode-color .reverseSlider input:not(:checked) + .toggleSlider:before,
.user-darkmode-color .userCourseTilesDiv,
.user-darkmode-color .userCourseTableList td,
.user-darkmode-color .userSurveyTableList td,
.user-darkmode-color .userKPITableList td,
.user-darkmode-color .userTrainingEventsTableList td,
.user-darkmode-color .userTrainingEventsTableList div,
.user-darkmode-color .tileOverlay .playButton,
.user-darkmode-color #course-player #course-player-window,
.user-darkmode-color .content-box,
.user-darkmode-color .fc-icsButton-button.fc-button-primary,
.user-darkmode-color .fc-icsButton-button.fc-button-primary:hover,
.user-darkmode-color .dashboard-blockbg,
.user-darkmode-color .checkbox-container input[type="radio"] ~ .checkbox-image:after,
.user-darkmode-color .custom-background .menu-selected,
.user-darkmode-color .custom-background .customHoverBg.has-submenu.expanded {
  background-color: #1f1e1c;
}
.user-darkmode-color .checkbox-container input[type="checkbox"]:checked ~ .checkbox-image:after {
  border-color: #1f1e1c;
}
.user-darkmode-color .custom-color-reverse-button {
  background-color: rgba(255,255,255,0.9) !important;
}
/* Box shadow for submenu */
.user-darkmode-color #submenu-panel {
  box-shadow: 0 0px 4px #1f1e1c;
}
/* Border color for inputs and some items. */
.user-darkmode-color .table-menu li,
.user-darkmode-color .button-right-help,
.user-darkmode-color .filter-table table.filter-table-items td,
.user-darkmode-color .checkbox-container input ~ .checkbox-image,
.user-darkmode-color .sumoSelectOptWrapper .select-all > span i,
.user-darkmode-color .sumoSelectOptWrapper.multiple > .options li.opt span i,
.user-darkmode-color input:checked ~ .toggleSlider,
.user-darkmode-color .light-gray-border,
.user-darkmode-color .dashboard-course-block .dashboard-course-ico {
  border: 1px solid #333;
}
.user-darkmode-color .table-menu li.empty {
  border: none !important;
  background: none !important;
}
/* Bottom border color for items in drop. */
.user-darkmode-color .sumoSelectOptWrapper > .options li.opt,
.user-darkmode-color .sumoSelectOptWrapper > .options li.group > label,
.user-darkmode-color .organizational-structure-pick-user-list-table tr {
  border-bottom: 1px solid #333;
}
.user-darkmode-color .user-color-border-bottom {
  border-bottom: 1px solid #0754a6;
}
.user-darkmode-color .user-color-border-top {
  border-top: 1px solid #0754a6;
}
/* color of watermarks */
.user-darkmode-color #confirm-modal:before,
.user-darkmode-color #study-reports-modal-body:before,
.user-darkmode-color .watermark:before {
  color: rgba(255, 255, 255, 0.02);
}
/* custom background color */
.user-darkmode-color .custom-background,
.user-darkmode-color input[type="submit"],
.user-darkmode-color input[type="button"],
.user-darkmode-color .custom-background-selected,
.user-darkmode-color .custom-background-hover:hover,
.user-darkmode-color .custom-background-focus:focus,
.user-darkmode-color .default-list-table > tbody > tr > th,
.user-darkmode-color .sumoSelectOptWrapper.multiple > .options li.opt.selected span i,
.user-darkmode-color .sumoSelectOptWrapper .select-all.selected > span i,
.user-darkmode-color .filter-table table.filter-table-items td.selected,
.user-darkmode-color .icoButton,
.user-darkmode-color .ui-datepicker-calendar .ui-state-active,
.user-darkmode-color #course-right-panel div.button,
.user-darkmode-color .fc-button-primary {
  background-color: #0754a6;
}
.user-darkmode-color input:checked + .toggleSlider,
.user-darkmode-color .reverseSlider input:not(:checked) + .toggleSlider,
.user-darkmode-color input:not(:checked) + .toggleSlider:before,
.user-darkmode-color .reverseSlider input:checked + .toggleSlider:before,
.user-darkmode-color .checkbox-container input:checked ~ .checkbox-image {
  background-color: #3986d8;
}
/* custom 1px border color */
.user-darkmode-color input[type="submit"],
.user-darkmode-color input[type="button"],
.user-darkmode-color input[type="text"]:hover,
.user-darkmode-color input[type="number"]:hover,
.user-darkmode-color input[type="password"]:hover,
.user-darkmode-color input[type="file"]:hover,
.user-darkmode-color textarea:hover,
.user-darkmode-color input[type="text"]:focus,
.user-darkmode-color input[type="number"]:focus,
.user-darkmode-color input[type="password"]:focus,
.user-darkmode-color input[type="file"]:focus,
.user-darkmode-color .checkbox-container:hover .checkbox-image,
.user-darkmode-color .checkbox-container:focus .checkbox-image,
.user-darkmode-color .checkbox-container input:checked ~ .checkbox-image,
.user-darkmode-color textarea:focus,
.user-darkmode-color .default-selectbox:hover,
.user-darkmode-color .custom-border,
.user-darkmode-color .tooltip-content,
.user-darkmode-color .filter-table table.filter-table-items td.selected,
.user-darkmode-color .icoButton,
.user-darkmode-color .ui-state-highlight,
.user-darkmode-color .ui-widget-content .ui-state-highlight,
.user-darkmode-color .ui-widget-header .ui-state-highlight,
.user-darkmode-color .ui-datepicker-calendar .ui-state-active,
.user-darkmode-color input:not(:checked) ~ .toggleSlider,
.user-darkmode-color .my-courses-list-type:hover,
.user-darkmode-color .my-courses-list-type:focus,
.user-darkmode-color .catalog-list-type:hover,
.user-darkmode-color .catalog-list-type:focus,
.user-darkmode-color .submenu-filter-folded .filter-toggle:hover,
.user-darkmode-color .submenu-filter-folded .filter-toggle:focus,
.user-darkmode-color .sumoSelectOptWrapper .options,
.user-darkmode-color .sumoSelectOptWrapper .select-all,
.user-darkmode-color .sumoSelectOptWrapper .no-match {
  border: 1px solid #3986d8;
}
/* custom box shadow custom color */
.user-darkmode-color input[type="submit"],
.user-darkmode-color input[type="button"],
.user-darkmode-color input[type="text"]:hover,
.user-darkmode-color input[type="number"]:hover,
.user-darkmode-color input[type="search"]:hover,
.user-darkmode-color input[type="password"]:hover,
.user-darkmode-color input[type="file"]:hover,
.user-darkmode-color textarea:hover,
.user-darkmode-color input[type="text"]:focus,
.user-darkmode-color input[type="number"]:focus,
.user-darkmode-color input[type="search"]:focus,
.user-darkmode-color input[type="password"]:focus,
.user-darkmode-color input[type="file"]:focus,
.user-darkmode-color .checkbox-container:hover .checkbox-image,
.user-darkmode-color .checkbox-container:focus .checkbox-image,
.user-darkmode-color textarea:focus,
.user-darkmode-color .default-selectbox:hover,
.user-darkmode-color .checkbox-container:hover .custom-border,
.user-darkmode-color .checkbox-container:focus .custom-border,
.user-darkmode-color .tooltip-content,
.user-darkmode-color .errorTooltip,
.user-darkmode-color .my-courses-list-type:hover,
.user-darkmode-color .my-courses-list-type:focus,
.user-darkmode-color .catalog-list-type:hover,
.user-darkmode-color .catalog-list-type:focus,
.user-darkmode-color .submenu-filter-folded .filter-toggle:hover,
.user-darkmode-color .submenu-filter-folded .filter-toggle:focus,
.user-darkmode-color .sumoSelectOptWrapper .options,
.user-darkmode-color .sumoSelectOptWrapper .select-all,
.user-darkmode-color .sumoSelectOptWrapper .no-match {
  box-shadow: 0 0 2px #0754a6;
}
/* readonly inputs */
.user-darkmode-color input[type="text"]:read-only,
.user-darkmode-color input[type="number"]:read-only,
.user-darkmode-color input[type="file"]:disabled,
.user-darkmode-color input[type="password"]:read-only,
.user-darkmode-color textarea:read-only,
.user-darkmode-color .addButton.disabled {
  background-color: #1E1E1E !important;
  color: #999 !important;
  border: 1px #333 solid !important;
}
/** readonly checkbox and radio */
.user-darkmode-color input:disabled ~ .custom-border {
  background-color: #333 !important;
  border: 1px #333 solid !important;
}
.user-darkmode-color .cbHelpButton {
  border-color: #666 !important;
}
.user-darkmode-color .checkbox-container.readonly:hover .custom-border,
.user-darkmode-color .checkbox-container.readonly:focus .custom-border {
  box-shadow: none !important;
}
.user-darkmode-color .redShadowBox,
.user-darkmode-color .redShadowBoxParent .SumoSelect {
  background-color: #200000 !important;
  border: 1px solid #622 !important;
}
.user-darkmode-color .checkbox-container input[type=checkbox]:checked ~ .checkbox-image.redShadowBox:after,
.user-darkmode-color .checkbox-container input[type=radio]:checked ~ .checkbox-image.redShadowBox:after {
  border-color: #9F3A38 !important;
  background-color: #9F3A38 !important;
}
.user-darkmode-color .redBackground {
  background-color: #200000 !important;
}
/* Inline form-validation tooltip (uniInput.hbs). Only its shape comes from tooltips.css.less —
   every colour has to be supplied per theme, or the arrow falls back to currentColor.
   The light themes use #9F3A38 text; on the dark #1f1e1c background that drops to ~2.3:1
   contrast, so the dark themes lighten the text and keep the arrow on the dark red palette. */
.user-darkmode-color .errorTooltip,
.user-darkmode-color .errorTooltip::after {
  color: #E88;
}
/* Shares the border colour of the .redShadowBox input it annotates — the ::before arrow below is
   the tip of this border, so the two must stay in sync. */
.user-darkmode-color .errorTooltip {
  border: 1px solid #622;
}
.user-darkmode-color .errorTooltip:before {
  border-color: transparent transparent #622 transparent;
}
/* custom color on hyperlinks */
.user-darkmode-color .custom-color-font,
.user-darkmode-color #mainmenu-panel.menu-open #mainmenu-left .mainmenu-submenu-item.submenu-active,
.user-darkmode-color a,
.user-darkmode-color a:visited,
.user-darkmode-color .hyperlink,
.user-darkmode-color .hyperlink:visited,
.user-darkmode-color .SumoSelect > .CaptionCont > label > i:before,
.user-darkmode-color .tooltip-content,
.user-darkmode-color .tab-active,
.user-darkmode-color .ui-datepicker .ui-datepicker-prev:before,
.user-darkmode-color .ui-datepicker .ui-datepicker-next:before,
.user-darkmode-color .ui-state-highlight,
.user-darkmode-color .ui-widget-content .ui-state-highlight,
.user-darkmode-color .ui-widget-header .ui-state-highlight,
.user-darkmode-color .support-table th {
  color: #3986d8;
}
.user-darkmode-color .custom-color-reverse-button {
  color: #0754a6 !important;
}
/* font color on custom color background */
.user-darkmode-color .custom-background,
.user-darkmode-color .custom-background a,
.user-darkmode-color .custom-background a:visited,
.user-darkmode-color .SumoSelect.sumo_mainmenuLang > .CaptionCont > label > i:before,
.user-darkmode-color input[type="submit"],
.user-darkmode-color input[type="button"],
.user-darkmode-color .custom-background-selected,
.user-darkmode-color .custom-background-hover:hover,
.user-darkmode-color .custom-background-focus:focus,
.user-darkmode-color .default-list-table > tbody > tr > th,
.user-darkmode-color .filter-table table.filter-table-items td.selected,
.user-darkmode-color .icoButton,
.user-darkmode-color .ui-datepicker-calendar .ui-state-active,
.user-darkmode-color #course-right-panel div.button,
.user-darkmode-color .fc-button-primary {
  color: rgba(255,255,255,0.9);
}
/* Border color for checkbox on custom color background */
.user-darkmode-color .white-checkbox span,
.user-darkmode-color .filter-overlay .checkbox-image,
.user-darkmode-color .sumoSelectOptWrapper.multiple > .options li.opt.selected span i::after,
.user-darkmode-color .sumoSelectOptWrapper .select-all.selected > span i::after {
  border-color: rgba(255,255,255,0.9) !important;
}
/* overlay background image for hovered/selected item on custom color */
.user-darkmode-color .custom-background .customHoverBg:hover,
.user-darkmode-color .custom-background .customSelectedBg,
.user-darkmode-color .sumoSelectOptWrapper li.opt:hover,
.user-darkmode-color .sumoSelectOptWrapper .select-all:hover,
.user-darkmode-color input[type="submit"]:hover,
.user-darkmode-color input[type="button"]:hover,
.user-darkmode-color input[type="submit"]:focus,
.user-darkmode-color input[type="button"]:focus,
.user-darkmode-color .red-button:hover,
.user-darkmode-color .red-button:focus,
.user-darkmode-color .addButton:hover,
.user-darkmode-color .addButton:focus,
.user-darkmode-color .icoButton:hover,
.user-darkmode-color .icoButton:focus,
.user-darkmode-color .fc-button-primary:hover,
.user-darkmode-color div#right-panel-ecerts-content table tr:hover {
  background-image: url('./../img/menu-overlay.png');
}
/* FullCalendar v6 injects `.fc .fc-button-primary:hover` (its own dark navy) into <head> at
   runtime. That selector out-specifies the themed `.fc-button-primary` rules above, so the
   calendar's prev/next buttons dropped the custom colour on hover and went dark instead of just
   taking the overlay image like a main-menu item. Restate both colours on hover at a higher
   specificity. The ICS button styles itself inverted, so it is excluded here. */
.user-darkmode-color .fc .fc-button-primary:not(.fc-icsButton-button):hover {
  background-color: #0754a6;
  color: rgba(255,255,255,0.9);
}
/* Responsive main-menu bar icon tiles (hamburger + player close/3-dots): a solid shade of the bar
   colour at rest, a stronger shade of the SAME direction on hover. Own style (not .customHoverBg) so
   both states shift the same way and stay visible on any bar, incl. the admin blue. */
.user-darkmode-color #mainmenu-toggle,
.user-darkmode-color #player-close-btn,
.user-darkmode-color #player-overlay-toggle {
  background-color: #064c95;
}
.user-darkmode-color #mainmenu-toggle:hover,
.user-darkmode-color #player-close-btn:hover,
.user-darkmode-color #player-overlay-toggle:hover {
  background-color: #053e7b;
}
/* */
.user-darkmode-color .modal-header,
.user-darkmode-color .dark-color-background,
.user-darkmode-color div#right-panel-info,
.user-darkmode-color div#right-panel-help,
.user-darkmode-color div#right-panel-helpdesk,
.user-darkmode-color div#right-panel-ecerts,
.user-darkmode-color .ui-state-highlight,
.user-darkmode-color .ui-widget-content .ui-state-highlight,
.user-darkmode-color .ui-widget-header .ui-state-highlight,
.user-darkmode-color .userCourseInfoButton,
.user-darkmode-color .userCourseInfoButtonLines,
.user-darkmode-color .userCourseInfoButtonDashboard {
  background-color: rgba(7,84,166, 0.08);
}
.user-darkmode-color .userCourseInfoButton:hover,
.user-darkmode-color .userCourseInfoButtonLines:hover,
.user-darkmode-color .userCourseInfoButtonDashboard:hover {
  background-color: rgba(7,84,166, 0.15);
}
/* Background transition of login form. */
.user-darkmode-color #login-block,
.user-darkmode-color #sign-in-block {
  border: 1px solid #333;
  background: #1f1e1c;
  background: -moz-linear-gradient(top, #1f1e1c 0%, #222 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1f1e1c), color-stop(100%, #222));
  background: -webkit-linear-gradient(top, #1f1e1c 0%, #222 100%);
  background: -o-linear-gradient(top, #1f1e1c 0%, #222 100%);
  background: -ms-linear-gradient(top, #1f1e1c 0%, #222 100%);
  background: linear-gradient(to bottom, #1f1e1c 0%, #222 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f1e1c', endColorstr='#222', GradientType=0);
  -webkit-box-shadow: 1px 1px 2px 0px #000000;
  -moz-box-shadow: 1px 1px 2px 0px #000000;
  box-shadow: 1px 1px 2px 0px #000000;
}
/* Inputs */
.user-darkmode-color input[type="file"],
.user-darkmode-color input[type="text"],
.user-darkmode-color input[type="number"],
.user-darkmode-color input[type="search"],
.user-darkmode-color input[type="password"],
.user-darkmode-color textarea,
.user-darkmode-color .default-selectbox,
.user-darkmode-color .organizational-structure-pick-user-list,
.user-darkmode-color #toggle-filter-list,
.user-darkmode-color .toggle-filter-list,
.user-darkmode-color .my-courses-list-type,
.user-darkmode-color .catalog-list-type,
.user-darkmode-color .submenu-filter-folded .filter-toggle {
  border: 1px #333 solid;
  background: #121212;
  color: #BBB;
}
.user-darkmode-color .sumoSelectOptWrapper .no-match,
.user-darkmode-color .sumoSelectOptWrapper .select-all,
.user-darkmode-color .sumoSelectOptWrapper .options {
  background: #121212;
  color: #BBB;
}
.user-darkmode-color input:-webkit-autofill,
.user-darkmode-color input:-webkit-autofill:hover,
.user-darkmode-color input:-webkit-autofill:focus {
  -webkit-text-fill-color: #BBB !important;
  background-color: #121212 !important;
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  border-radius: 4px !important;
}
/* Disable inputs. */
.user-darkmode-color input[type="text"]:disabled,
.user-darkmode-color input[type="number"]:disabled,
.user-darkmode-color input[type="file"]:disabled,
.user-darkmode-color input[type="password"]:disabled,
.user-darkmode-color textarea:disabled,
.user-darkmode-color .SumoSelect.disabled {
  background-color: #1E1E1E;
  color: #999;
}
.user-darkmode-color .lightBackgound {
  background-color: #222;
}
.user-darkmode-color input[type="text"]:disabled:hover,
.user-darkmode-color input[type="number"]:disabled:hover,
.user-darkmode-color input[type="password"]:disabled:hover,
.user-darkmode-color input[type="file"]:disabled:hover,
.user-darkmode-color input[type="textarea"]:disabled:hover,
.user-darkmode-color .SumoSelect.disabled:hover {
  box-shadow: none;
  border: 1px #333 solid;
}
/* Ico in login form on left side */
.user-darkmode-color div.input i {
  border-right: 1px solid #222;
  color: #777;
}
/* borders for tooltip arrows */
.user-darkmode-color .tooltip-top .tooltip-content::after {
  border-color: #0754a6 transparent transparent transparent;
}
.user-darkmode-color .tooltip-bottom .tooltip-content::after {
  border-color: transparent transparent #0754a6 transparent;
}
.user-darkmode-color .tooltip-right .tooltip-content::after {
  border-color: transparent #0754a6 transparent transparent;
}
.user-darkmode-color .tooltip-left .tooltip-content::after {
  border-color: transparent transparent transparent #0754a6;
}
.user-darkmode-color .user-color-left-border {
  border-left: 1px solid #0754a6;
}
.user-darkmode-color table.default-list-table > tbody > tr > td,
.user-darkmode-color .tableList li > div {
  border-bottom: 1px solid #333;
  border-top: 1px solid #222;
}
.user-darkmode-color .dashboard-grid-item .grid-stack-item-content,
.user-darkmode-color .gray-background {
  background-color: #333 !important;
}
.user-darkmode-color .light-gray-background {
  background-color: #060606;
}
/* New line in table */
.user-darkmode-color .newLineTR td,
.user-darkmode-color .newLineTR {
  background-color: #020 !important;
}
/* Select all line int sumo select */
.user-darkmode-color .sumoSelectOptWrapper .select-all {
  border-bottom: 1px solid #333;
}
.user-darkmode-color .borderRight1,
.user-darkmode-color .organizational-structure-table-selected > tbody > tr > td {
  border-right: 1px solid #333;
}
/* rule between the stacked selection columns below the tablet breakpoint */
@media (max-width: 768px) {
  .user-darkmode-color .organizational-structure-table-selected > tbody > tr > td {
    border-bottom-color: #333;
  }
}
/* Color for rating stars. */
.user-darkmode-color .course-score-stars {
  color: #ffcc66;
}
/** gray color */
.user-darkmode-color .ui-datepicker-title {
  color: #999 !important;
}
/** Blue background, used in userForm - eCourses - Certificate column */
.user-darkmode-color .blueBackground {
  background-color: #111133 !important;
}
.user-darkmode-color .modal-wrapper {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.6);
  /* Black w/ opacity */
}
.user-darkmode-color .modal-wrapper .modal {
  background-color: #1f1e1c;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.38);
}
.user-darkmode-color #main-loader-wrapper .full-loader-block {
  background-color: #2A2A2A;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.38);
}
.user-darkmode-color .fc-theme-standard td,
.user-darkmode-color .fc-theme-standard th,
.user-darkmode-color .fc-theme-standard .fc-scrollgrid,
.user-darkmode-color .fc-theme-standard .fc-list,
.user-darkmode-color .fc-theme-standard .fc-popover,
.user-darkmode-color .ui-state-default,
.ui-widget-content .ui-state-default {
  border-color: #444 !important;
}
/* 1px divider between the clickable record rows of the user-dashboard list widgets
   (assigned courses, invitations, recommended courses, e-certificates). Uses the same
   neutral gray as .ui-state-default above; :not(:first-child) keeps the top edge clean
   (dividers sit BETWEEN records only). Light counterpart lives in user-lightmode-color. */
.user-darkmode-color .dashboard-courses .dashboard-course-record:not(:first-child),
.user-darkmode-color .dashboard-recommended-courses .dashboard-course-record:not(:first-child),
.user-darkmode-color .dashboard-ecerts table tr.hover:not(:first-child) > td {
  border-top: 1px solid #444 !important;
}
/* userEntityList (user entity-list rows) — themed counterparts of the dashboard record:
   framed icon border + a per-record dark card background (rows sit on their own
   background, separated by the 8px gap from userEntityList.css.less — no divider line). */
.user-darkmode-color .userEntityList .uel-ico {
  border: 1px solid #333;
}
.user-darkmode-color .userEntityList .uel-record {
  background-color: #1f1e1c;
}
.user-darkmode-color .fc-daygrid-day-top {
  color: #BBB !important;
}
.user-darkmode-color .courseImgPreview i.coursePreview,
.user-darkmode-color .courseIcoPreview i.coursePreview,
.user-darkmode-color .support-table:before {
  color: #444 !important;
}
/* The add-question plus icon is tinted slightly green to stand apart from the FAQ items */
.user-darkmode-color .support-add-question:before {
  color: #3E7A57 !important;
}
.user-darkmode-color #canvas-container {
  border: 1px solid #333;
  background-color: #222;
  border-radius: 4px;
}
.user-darkmode-color div.dashboard-news:before,
.user-darkmode-color div.dashboard-calendar:before,
.user-darkmode-color div.dashboard-manual:before,
.user-darkmode-color div.dashboard-courses:before,
.user-darkmode-color div.dashboard-stats:before,
.user-darkmode-color div.dashboard-help:before,
.user-darkmode-color div.dashboard-ecerts:before,
.user-darkmode-color div.dashboard-invitation:before {
  color: rgba(0, 0, 0, 0.09);
}
.user-darkmode-color .sumoSelectOptWrapper .sumo-bottom-delimiter {
  background-color: #555;
  border-bottom: 2px solid #121212;
  border-top: 1px solid #121212;
}
.user-darkmode-color .searchHighlight {
  background-color: #45410d;
}
/* Mobile card list (etapa 6) — user-side dark theme. */
@media (max-width: 768px) {
  .user-darkmode-color table.mobile-cards > tbody > tr {
    background-color: #1E1E1E !important;
  }
  .user-darkmode-color table.mobile-cards .mobile-title,
  .user-darkmode-color table.mobile-cards .mobile-title a {
    color: #EDEDED !important;
  }
  /* The card list's container panel must not paint behind the cards: the wrapper is #1f1e1c, almost the same
     grey as the #1E1E1E cards, so the cards stop reading as elevated and the panel shows as a grey field
     below/around them. Making it transparent lets the #121212 body show through the gaps and below the last
     card, restoring the intended elevated-card look. `.default-white-background` covers tabbed pages
     (baseTabs.hbs puts it on every .tab-child, e.g. the Profile GDPR list tab), where the
     `.default-white-block` variant never matches. */
  .user-darkmode-color .default-white-block:has(> .list-table-scroll-wrap > table.mobile-cards),
  .user-darkmode-color .default-white-background:has(> .list-table-scroll-wrap > table.mobile-cards) {
    background-color: transparent;
    box-shadow: none;
  }
  /* With the GDPR tab transparent, the baseTabs wrapper's own `0 1px 4px` card shadow (defined above at
     `#profile-main-div > div:has(> .tab-ul)`) would linger a few px below the last card. Drop it while the
     GDPR card list is the visible tab — Alpine's x-show leaves the active tab with no inline style and marks
     the hidden one `display: none`, so `#profile-tab-gdpr:not([style*="display: none"])` pins "GDPR active".
     The form tab keeps the wrapper shadow (it paints the card white), and desktop is untouched. */
  .user-darkmode-color #profile-main-div > div:has(> .tab-ul):has( > #profile-tab-gdpr:not([style*="display: none"])) {
    box-shadow: none;
  }
  /* CatalogCategories is the one list carrying `default-white-block` directly on the <table> (its
     facade wrapper isn't a white block), so the same panel must be dropped there. */
  .user-darkmode-color table.mobile-cards.default-white-block {
    background-color: transparent;
    box-shadow: none;
  }
  /* Back-nav card (catalogRecords / catalogCategories): list-item surface + brand-coloured arrow
     (mobile), overriding the .custom-background brand fill so it reads as a card like the Library
     go-up arrow. */
  .user-darkmode-color .list-back-card {
    background-color: #1E1E1E !important;
    color: #3986d8 !important;
  }
  /* Drop the grey avatar tile behind the leading icon so the icon sits directly on the card. */
  .user-darkmode-color table.mobile-cards .mobile-lead {
    background: transparent;
  }
  /* Etapa-8 header-controls strip: the strip row must paint nothing (the generic card rule above
     also matches the implicit-tbody header row), and a KEPT header cell reads as a compact card —
     card surface + page text, never the desktop brand-colored header band. */
  .user-darkmode-color table.mobile-cards.mobile-header-controls tr:has(> th) {
    background-color: transparent !important;
  }
  /* The strip's back/go-up control uses the existing brand font color (same as the Library
     breadcrumb home icon) — desktop is untouched, where it inherits the header-band font. The bare
     `i` covers OrgStructure's arrow; `.library-go-up-inner` colours the Library arrow + "Zpět"
     label together. */
  .user-darkmode-color table.mobile-cards.mobile-header-controls tr:has(> th) > th.mobile-keep i,
  .user-darkmode-color table.mobile-cards.mobile-header-controls tr:has(> th) > th.mobile-keep .library-go-up-inner {
    color: #3986d8;
  }
  .user-darkmode-color table.mobile-cards.mobile-header-controls tr:has(> th) > th.mobile-keep {
    background-color: #1E1E1E;
    color: #EDEDED;
  }
}