/*
*/
body.user-lightmode-color.main-body {
  background-color: #F0F3F6;
  color: #505050;
}
.user-lightmode-color a.invisibleHyperlink,
.user-lightmode-color a.invisibleHyperlink:visited,
.user-lightmode-color .fc-toolbar-title,
.user-lightmode-color .fc-icsButton-button.fc-button-primary,
.user-lightmode-color .fc-col-header-cell-cushion,
.user-lightmode-color .fc-daygrid-day-number,
.user-lightmode-color .common-text-color,
.user-lightmode-color .userCourseInfoButtonDashboard,
.user-lightmode-color .custom-background .menu-selected,
.user-lightmode-color .custom-background .customHoverBg.has-submenu.expanded {
  color: #505050 !important;
}
.user-lightmode-color .faPrimaryDefault {
  --fa-primary-color: #505050;
}
/* Default block with white background and shadow */
.user-lightmode-color .default-white-block,
.user-lightmode-color .infoBox,
.user-lightmode-color .support-table,
.user-lightmode-color .userCourseTilesDiv,
.user-lightmode-color .dashboard-blockbg,
.user-lightmode-color .rounded-shadow-block,
.user-lightmode-color table.rounded-table,
.user-lightmode-color table.rounded-cards-table td,
.user-lightmode-color #course-player #course-player-window {
  box-shadow: 0 1px 4px #eaeaea;
}
/* 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-lightmode-color #profile-main-div > div:has(> .tab-ul) {
  box-shadow: 0 1px 4px #eaeaea;
}
.user-lightmode-color div.infoBox:hover,
.user-lightmode-color .default-list-table > tbody > tr:hover,
.user-lightmode-color .hyperlinkBox:hover,
.user-lightmode-color .filter-table table.filter-table-items td:hover,
.user-lightmode-color .content .linked:hover,
.user-lightmode-color .support-add-question:hover,
.user-lightmode-color .tableList li > div:hover {
  background-color: #FAFAFA;
}
/* Default background color for inputs. */
.user-lightmode-color .default-white-background,
.user-lightmode-color .default-white-block,
.user-lightmode-color .infoBox,
.user-lightmode-color #submenu-panel,
.user-lightmode-color .tooltip-content,
.user-lightmode-color .errorTooltip,
.user-lightmode-color .pcr-app,
.user-lightmode-color .tab-active,
.user-lightmode-color .ui-datepicker,
.user-lightmode-color .table-menu li,
.user-lightmode-color .button-right-help,
.user-lightmode-color .support-table,
.user-lightmode-color input:not(:checked) + .toggleSlider,
.user-lightmode-color .reverseSlider input:checked + .toggleSlider,
.user-lightmode-color input:checked + .toggleSlider:before,
.user-lightmode-color .reverseSlider input:not(:checked) + .toggleSlider:before,
.user-lightmode-color .userCourseTilesDiv,
.user-lightmode-color .userCourseTableList td,
.user-lightmode-color .userSurveyTableList td,
.user-lightmode-color .userKPITableList td,
.user-lightmode-color .userTrainingEventsTableList td,
.user-lightmode-color .userTrainingEventsTableList div,
.user-lightmode-color .tileOverlay .playButton,
.user-lightmode-color #course-player #course-player-window,
.user-lightmode-color .content-box,
.user-lightmode-color .fc-icsButton-button.fc-button-primary,
.user-lightmode-color .fc-icsButton-button.fc-button-primary:hover,
.user-lightmode-color .dashboard-blockbg,
.user-lightmode-color .checkbox-container input[type="radio"] ~ .checkbox-image:after,
.user-lightmode-color .custom-background .menu-selected,
.user-lightmode-color .custom-background .customHoverBg.has-submenu.expanded {
  background-color: #FFF;
}
.user-lightmode-color .sumoSelectOptWrapper.multiple > .options li.opt.selected span i::after,
.user-lightmode-color .sumoSelectOptWrapper .select-all.selected > span i::after {
  color: #FFF;
}
.user-lightmode-color .checkbox-container input[type="checkbox"]:checked ~ .checkbox-image:after {
  border-color: #FFF;
}
.user-lightmode-color .white-checkbox input[type="checkbox"]:checked ~ .checkbox-image:after,
.user-lightmode-color .filter-overlay input[type="checkbox"]:checked ~ .checkbox-image:after {
  border-color: #000;
}
.user-lightmode-color .custom-color-reverse-button {
  background-color: rgba(255,255,255,0.9) !important;
}
/* Box shadow for submenu */
.user-lightmode-color #submenu-panel {
  box-shadow: 0 0px 4px #cfcfcf;
}
/* Border color for inputs and some items. */
.user-lightmode-color .table-menu li,
.user-lightmode-color .button-right-help,
.user-lightmode-color .filter-table table.filter-table-items td,
.user-lightmode-color .checkbox-container input ~ .checkbox-image,
.user-lightmode-color .sumoSelectOptWrapper .select-all > span i,
.user-lightmode-color .sumoSelectOptWrapper.multiple > .options li.opt span i,
.user-lightmode-color input:checked ~ .toggleSlider,
.user-lightmode-color .light-gray-border,
.user-lightmode-color .dashboard-course-block .dashboard-course-ico {
  border: 1px solid #ddd;
}
.user-lightmode-color .table-menu li.empty {
  border: none !important;
  background: none !important;
}
/* Bottom border color for items in drop. */
.user-lightmode-color .sumoSelectOptWrapper > .options li.opt,
.user-lightmode-color .sumoSelectOptWrapper > .options li.group > label,
.user-lightmode-color .organizational-structure-pick-user-list-table tr {
  border-bottom: 1px solid #f5f5f5;
}
.user-lightmode-color .user-color-border-bottom {
  border-bottom: 1px solid #0754a6;
}
.user-lightmode-color .user-color-border-top {
  border-top: 1px solid #0754a6;
}
/* color of watermarks */
.user-lightmode-color #confirm-modal:before,
.user-lightmode-color #study-reports-modal-body:before,
.user-lightmode-color .watermark:before {
  color: rgba(0, 0, 0, 0.02);
}
/* custom background color */
.user-lightmode-color .custom-background,
.user-lightmode-color input[type="submit"],
.user-lightmode-color input[type="button"],
.user-lightmode-color .custom-background-selected,
.user-lightmode-color .custom-background-hover:hover,
.user-lightmode-color .custom-background-focus:focus,
.user-lightmode-color .default-list-table > tbody > tr > th,
.user-lightmode-color .filter-table table.filter-table-items td.selected,
.user-lightmode-color .icoButton,
.user-lightmode-color .ui-datepicker-calendar .ui-state-active,
.user-lightmode-color #course-right-panel div.button,
.user-lightmode-color .fc-button-primary {
  background-color: #0754a6;
}
.user-lightmode-color input:checked + .toggleSlider,
.user-lightmode-color .reverseSlider input:not(:checked) + .toggleSlider,
.user-lightmode-color input:not(:checked) + .toggleSlider:before,
.user-lightmode-color .reverseSlider input:checked + .toggleSlider:before,
.user-lightmode-color .checkbox-container input:checked ~ .checkbox-image,
.user-lightmode-color .sumoSelectOptWrapper.multiple > .options li.opt.selected span i,
.user-lightmode-color .sumoSelectOptWrapper .select-all.selected > span i {
  background-color: #0754a6;
}
/* custom 1px border color */
.user-lightmode-color input[type="submit"],
.user-lightmode-color input[type="button"],
.user-lightmode-color input[type="text"]:hover .user-lightmode-color input[type="number"]:hover,
.user-lightmode-color input[type="password"]:hover,
.user-lightmode-color input[type="file"]:hover,
.user-lightmode-color textarea:hover,
.user-lightmode-color input[type="text"]:focus,
.user-lightmode-color input[type="number"]:focus,
.user-lightmode-color input[type="password"]:focus,
.user-lightmode-color input[type="file"]:focus,
.user-lightmode-color .checkbox-container:hover .checkbox-image,
.user-lightmode-color .checkbox-container:focus .checkbox-image,
.user-lightmode-color .checkbox-container input:checked ~ .checkbox-image,
.user-lightmode-color textarea:focus,
.user-lightmode-color .default-selectbox:hover,
.user-lightmode-color .custom-border,
.user-lightmode-color .tooltip-content,
.user-lightmode-color .filter-table table.filter-table-items td.selected,
.user-lightmode-color .icoButton,
.user-lightmode-color .ui-state-highlight,
.user-lightmode-color .ui-widget-content .ui-state-highlight,
.user-lightmode-color .ui-widget-header .ui-state-highlight,
.user-lightmode-color .ui-datepicker-calendar .ui-state-active,
.user-lightmode-color input:not(:checked) ~ .toggleSlider,
.user-lightmode-color .my-courses-list-type:hover,
.user-lightmode-color .my-courses-list-type:focus,
.user-lightmode-color .catalog-list-type:hover,
.user-lightmode-color .catalog-list-type:focus,
.user-lightmode-color .submenu-filter-folded .filter-toggle:hover,
.user-lightmode-color .submenu-filter-folded .filter-toggle:focus,
.user-lightmode-color .sumoSelectOptWrapper .options,
.user-lightmode-color .sumoSelectOptWrapper .select-all,
.user-lightmode-color .sumoSelectOptWrapper .no-match {
  border: 1px solid #0754a6;
}
/* custom box shadow custom color */
.user-lightmode-color input[type="submit"],
.user-lightmode-color input[type="button"],
.user-lightmode-color input[type="text"]:hover,
.user-lightmode-color input[type="number"]:hover,
.user-lightmode-color input[type="search"]:hover,
.user-lightmode-color input[type="password"]:hover,
.user-lightmode-color input[type="file"]:hover,
.user-lightmode-color textarea:hover,
.user-lightmode-color input[type="text"]:focus,
.user-lightmode-color input[type="number"]:focus,
.user-lightmode-color input[type="search"]:focus,
.user-lightmode-color input[type="password"]:focus,
.user-lightmode-color input[type="file"]:focus,
.user-lightmode-color .checkbox-container:hover .checkbox-image,
.user-lightmode-color .checkbox-container:focus .checkbox-image,
.user-lightmode-color textarea:focus,
.user-lightmode-color .default-selectbox:hover,
.user-lightmode-color .checkbox-container:hover .custom-border,
.user-lightmode-color .checkbox-container:focus .custom-border,
.user-lightmode-color .tooltip-content,
.user-lightmode-color .errorTooltip,
.user-lightmode-color .my-courses-list-type:hover,
.user-lightmode-color .my-courses-list-type:focus,
.user-lightmode-color .catalog-list-type:hover,
.user-lightmode-color .catalog-list-type:focus,
.user-lightmode-color .submenu-filter-folded .filter-toggle:hover,
.user-lightmode-color .submenu-filter-folded .filter-toggle:focus,
.user-lightmode-color .sumoSelectOptWrapper .options,
.user-lightmode-color .sumoSelectOptWrapper .select-all,
.user-lightmode-color .sumoSelectOptWrapper .no-match {
  box-shadow: 0 0 2px #0754a6;
}
/* readonly inputs */
.user-lightmode-color input[type="text"]:read-only,
.user-lightmode-color input[type="number"]:read-only,
.user-lightmode-color input[type="file"]:disabled,
.user-lightmode-color input[type="password"]:read-only,
.user-lightmode-color textarea:read-only,
.user-lightmode-color .addButton.disabled {
  background-color: #eee !important;
  color: #555 !important;
  border: 1px #ddd solid !important;
}
/** readonly checkbox and radio */
.user-lightmode-color input:disabled ~ .custom-border {
  background-color: #e4e4e4 !important;
  border: 1px #e4e4e4 solid !important;
}
.user-lightmode-color .cbHelpButton {
  border-color: #C0C0C0 !important;
}
.user-lightmode-color .checkbox-container.readonly:hover .custom-border,
.user-lightmode-color .checkbox-container.readonly:focus .custom-border,
.user-lightmode-color .checkbox-container:hover input:disabled ~ .custom-border,
.user-lightmode-color .checkbox-container:focus input:disabled ~ .custom-border {
  box-shadow: none !important;
}
.user-lightmode-color .redShadowBox,
.user-lightmode-color .redShadowBoxParent .SumoSelect {
  background-color: #FFF2F2 !important;
  border: 1px solid #DAA !important;
}
.user-lightmode-color .checkbox-container input[type=checkbox]:checked ~ .checkbox-image.redShadowBox:after,
.user-lightmode-color .checkbox-container input[type=radio]:checked ~ .checkbox-image.redShadowBox:after {
  border-color: #9F3A38 !important;
  background-color: #9F3A38 !important;
}
.user-lightmode-color .redBackground {
  background-color: #FFF2F2 !important;
}
.user-lightmode-color .errorTooltip,
.user-lightmode-color .errorTooltip::after {
  color: #9F3A38;
}
/* 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-lightmode-color .errorTooltip {
  border: 1px solid #DAA;
}
.user-lightmode-color .errorTooltip:before {
  border-color: transparent transparent #DAA transparent;
}
/* custom color on hyperlinks */
.userColor,
.user-lightmode-color .custom-color-font,
.user-lightmode-color #mainmenu-panel.menu-open #mainmenu-left .mainmenu-submenu-item.submenu-active,
.user-lightmode-color a,
.user-lightmode-color a:visited,
.user-lightmode-color .hyperlink,
.user-lightmode-color .hyperlink:visited,
.user-lightmode-color .SumoSelect > .CaptionCont > label > i:before,
.user-lightmode-color .tooltip-content,
.user-lightmode-color .tab-active,
.user-lightmode-color .ui-datepicker .ui-datepicker-prev:before,
.user-lightmode-color .ui-datepicker .ui-datepicker-next:before,
.user-lightmode-color .ui-state-highlight,
.user-lightmode-color .ui-widget-content .ui-state-highlight,
.user-lightmode-color .ui-widget-header .ui-state-highlight,
.user-lightmode-color .support-table th {
  color: #0754a6;
}
.user-lightmode-color .custom-color-reverse-button {
  color: #0754a6 !important;
}
/* font color on custom color background */
.user-lightmode-color .custom-background,
.user-lightmode-color .custom-background a,
.user-lightmode-color .custom-background a:visited,
.user-lightmode-color .SumoSelect.sumo_mainmenuLang > .CaptionCont > label > i:before,
.user-lightmode-color input[type="submit"],
.user-lightmode-color input[type="button"],
.user-lightmode-color .custom-background-selected,
.user-lightmode-color .custom-background-hover:hover,
.user-lightmode-color .custom-background-focus:focus,
.user-lightmode-color .default-list-table > tbody > tr > th,
.user-lightmode-color .filter-table table.filter-table-items td.selected,
.user-lightmode-color .icoButton,
.user-lightmode-color .ui-datepicker-calendar .ui-state-active,
.user-lightmode-color #course-right-panel div.button,
.user-lightmode-color .fc-button-primary {
  color: rgba(255,255,255,0.9);
}
/* Border color for checkbox on custom color background */
.user-lightmode-color .white-checkbox span,
.user-lightmode-color .filter-overlay .checkbox-image {
  border-color: rgba(255,255,255,0.9) !important;
}
/* overlay background image for hovered/selected item on custom color */
.user-lightmode-color .custom-background .customHoverBg:hover,
.user-lightmode-color .custom-background .customSelectedBg,
.user-lightmode-color .sumoSelectOptWrapper li.opt:hover,
.user-lightmode-color .sumoSelectOptWrapper .select-all:hover,
.user-lightmode-color input[type="submit"]:hover,
.user-lightmode-color input[type="button"]:hover,
.user-lightmode-color input[type="submit"]:focus,
.user-lightmode-color input[type="button"]:focus,
.user-lightmode-color .red-button:hover,
.user-lightmode-color .red-button:focus,
.user-lightmode-color .addButton:hover,
.user-lightmode-color .addButton:focus,
.user-lightmode-color .icoButton:hover,
.user-lightmode-color .icoButton:focus,
.user-lightmode-color .fc-button-primary:hover,
.user-lightmode-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-lightmode-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-lightmode-color #mainmenu-toggle,
.user-lightmode-color #player-close-btn,
.user-lightmode-color #player-overlay-toggle {
  background-color: #064c95;
}
.user-lightmode-color #mainmenu-toggle:hover,
.user-lightmode-color #player-close-btn:hover,
.user-lightmode-color #player-overlay-toggle:hover {
  background-color: #053e7b;
}
/* */
.user-lightmode-color .modal-header,
.user-lightmode-color .dark-color-background,
.user-lightmode-color div#right-panel-info,
.user-lightmode-color div#right-panel-help,
.user-lightmode-color div#right-panel-helpdesk,
.user-lightmode-color div#right-panel-ecerts,
.user-lightmode-color .ui-state-highlight,
.user-lightmode-color .ui-widget-content .ui-state-highlight,
.user-lightmode-color .ui-widget-header .ui-state-highlight,
.user-lightmode-color .userCourseInfoButton,
.user-lightmode-color .userCourseInfoButtonLines,
.user-lightmode-color .userCourseInfoButtonDashboard {
  background-color: rgba(7,84,166, 0.05);
}
.user-lightmode-color .userCourseInfoButton:hover,
.user-lightmode-color .userCourseInfoButtonLines:hover,
.user-lightmode-color .userCourseInfoButtonDashboard:hover {
  background-color: rgba(7,84,166, 0.13);
}
/* Background transition of login form. */
.user-lightmode-color #login-block,
.user-lightmode-color #sign-in-block {
  border: 1px solid #F8F8F8;
  background: #F8F8F8;
  background: -moz-linear-gradient(top, #F8F8F8 0%, #F0F0F0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F8F8F8), color-stop(100%, #F0F0F0));
  background: -webkit-linear-gradient(top, #F8F8F8 0%, #F0F0F0 100%);
  background: -o-linear-gradient(top, #F8F8F8 0%, #F0F0F0 100%);
  background: -ms-linear-gradient(top, #F8F8F8 0%, #F0F0F0 100%);
  background: linear-gradient(to bottom, #F8F8F8 0%, #F0F0F0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F0F0F0', GradientType=0);
  -webkit-box-shadow: 1px 1px 2px 0px #9e9e9e;
  -moz-box-shadow: 1px 1px 2px 0px #9e9e9e;
  box-shadow: 1px 1px 2px 0px #9e9e9e;
}
/* Inputs */
.user-lightmode-color input[type="file"],
.user-lightmode-color input[type="text"],
.user-lightmode-color input[type="number"],
.user-lightmode-color input[type="search"],
.user-lightmode-color input[type="password"],
.user-lightmode-color textarea,
.user-lightmode-color .default-selectbox,
.user-lightmode-color .organizational-structure-pick-user-list,
.user-lightmode-color #toggle-filter-list,
.user-lightmode-color .toggle-filter-list,
.user-lightmode-color .my-courses-list-type,
.user-lightmode-color .catalog-list-type,
.user-lightmode-color .submenu-filter-folded .filter-toggle {
  border: 1px #ddd solid;
  background: #FFF;
  color: #444;
}
.user-lightmode-color .sumoSelectOptWrapper .no-match,
.user-lightmode-color .sumoSelectOptWrapper .select-all,
.user-lightmode-color .sumoSelectOptWrapper .options {
  background: #FFF;
  color: #444;
}
/* Disable inputs. */
.user-lightmode-color input[type="text"]:disabled,
.user-lightmode-color input[type="number"]:disabled,
.user-lightmode-color input[type="file"]:disabled,
.user-lightmode-color input[type="password"]:disabled,
.user-lightmode-color textarea:disabled,
.user-lightmode-color .SumoSelect.disabled {
  background-color: #EEE;
  color: #888;
}
.user-lightmode-color .lightBackgound {
  background-color: #EEE;
}
.user-lightmode-color input[type="text"]:disabled:hover,
.user-lightmode-color input[type="number"]:disabled:hover,
.user-lightmode-color input[type="password"]:disabled:hover,
.user-lightmode-color input[type="file"]:disabled:hover,
.user-lightmode-color input[type="textarea"]:disabled:hover,
.user-lightmode-color .SumoSelect.disabled:hover {
  box-shadow: none;
  border: 1px #ddd solid;
}
/* Ico in login form on left side */
.user-lightmode-color div.input i {
  border-right: 1px solid #DDD;
  color: #777;
}
/* borders for tooltip arrows */
.user-lightmode-color .tooltip-top .tooltip-content::after {
  border-color: #0754a6 transparent transparent transparent;
}
.user-lightmode-color .tooltip-bottom .tooltip-content::after {
  border-color: transparent transparent #0754a6 transparent;
}
.user-lightmode-color .tooltip-right .tooltip-content::after {
  border-color: transparent #0754a6 transparent transparent;
}
.user-lightmode-color .tooltip-left .tooltip-content::after {
  border-color: transparent transparent transparent #0754a6;
}
.user-lightmode-color .user-color-left-border {
  border-left: 1px solid #0754a6;
}
.user-lightmode-color table.default-list-table > tbody > tr > td,
.user-lightmode-color .tableList li > div {
  border-bottom: 1px solid #F2F2F2;
  border-top: 1px solid #EEE;
}
.user-lightmode-color .dashboard-grid-item .grid-stack-item-content,
.user-lightmode-color .gray-background {
  background-color: #ddd !important;
}
.user-lightmode-color .light-gray-background {
  background-color: #F8F8F8;
}
/* New line in table */
.user-lightmode-color .newLineTR td,
.user-lightmode-color .newLineTR {
  background-color: #DFD !important;
}
/* Select all line int sumo select */
.user-lightmode-color .sumoSelectOptWrapper .select-all {
  border-bottom: 1px solid #ddd;
}
.user-lightmode-color .borderRight1,
.user-lightmode-color .organizational-structure-table-selected > tbody > tr > td {
  border-right: 1px solid #DDD;
}
/* rule between the stacked selection columns below the tablet breakpoint */
@media (max-width: 768px) {
  .user-lightmode-color .organizational-structure-table-selected > tbody > tr > td {
    border-bottom-color: #DDD;
  }
}
/* Color for rating stars. */
.user-lightmode-color .course-score-stars {
  color: #ffcc66;
}
/** gray color */
.user-lightmode-color .ui-datepicker-title {
  color: #444 !important;
}
/** Blue background, used in userForm - eCourses - Certificate column */
.user-lightmode-color .blueBackground {
  background-color: #f1f6ff !important;
}
.user-lightmode-color .modal-wrapper {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}
.user-lightmode-color .modal-wrapper .modal {
  background-color: #fefefe;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.user-lightmode-color #main-loader-wrapper .full-loader-block {
  background-color: #fefefe;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.user-lightmode-color .fc-theme-standard td,
.user-lightmode-color .fc-theme-standard th,
.user-lightmode-color .fc-theme-standard .fc-scrollgrid,
.user-lightmode-color .fc-theme-standard .fc-list,
.user-lightmode-color .fc-theme-standard .fc-popover,
.user-lightmode-color .ui-state-default,
.ui-widget-content .ui-state-default {
  border-color: #DDD !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). Dark counterpart lives in user-darkmode-color. */
.user-lightmode-color .dashboard-courses .dashboard-course-record:not(:first-child),
.user-lightmode-color .dashboard-recommended-courses .dashboard-course-record:not(:first-child),
.user-lightmode-color .dashboard-ecerts table tr.hover:not(:first-child) > td {
  border-top: 1px solid #DDD !important;
}
/* userEntityList (user entity-list rows) — themed counterparts of the dashboard record:
   framed icon border + a per-record white card background (rows sit on their own
   background, separated by the 8px gap from userEntityList.css.less — no divider line). */
.user-lightmode-color .userEntityList .uel-ico {
  border: 1px solid #ddd;
}
.user-lightmode-color .userEntityList .uel-record {
  background-color: #FFF;
}
.user-lightmode-color .fc-daygrid-day-top {
  color: #505050 !important;
}
.user-lightmode-color .courseImgPreview i.coursePreview,
.user-lightmode-color .courseIcoPreview i.coursePreview,
.user-lightmode-color .support-table:before {
  color: #E6E6E6 !important;
}
/* The add-question plus icon is tinted slightly green to stand apart from the FAQ items */
.user-lightmode-color .support-add-question:before {
  color: #B8E4CC !important;
}
.user-lightmode-color #canvas-container {
  border: 1px solid #ddd;
  background-color: #FFF;
  border-radius: 4px;
}
.user-lightmode-color div.dashboard-news:before,
.user-lightmode-color div.dashboard-calendar:before,
.user-lightmode-color div.dashboard-manual:before,
.user-lightmode-color div.dashboard-courses:before,
.user-lightmode-color div.dashboard-stats:before,
.user-lightmode-color div.dashboard-help:before,
.user-lightmode-color div.dashboard-ecerts:before,
.user-lightmode-color div.dashboard-invitation:before {
  color: rgba(0, 0, 0, 0.02);
}
.user-lightmode-color .sumoSelectOptWrapper .sumo-bottom-delimiter {
  background-color: #f5f5f5;
  border-bottom: 2px solid #fff;
  border-top: 1px solid #fff;
}
.user-lightmode-color .searchHighlight {
  background-color: #fcf585;
}
/* Mobile card list (etapa 6) — user-side light theme (mirrors the admin rule for user pages like cmHelpdesk). */
@media (max-width: 768px) {
  /* The card list's container panel must not paint behind the cards: making the wrapper transparent lets
     the grey page body show through the gaps and below the last card, so only the white cards are white and
     they read as distinct blocks (matches the dark theme, where the #121212 body shows). The earlier #ECEEF1
     table fill is dropped — the page body now provides the grey field. `.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-lightmode-color .default-white-block:has(> .list-table-scroll-wrap > table.mobile-cards),
  .user-lightmode-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-lightmode-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 white panel must be dropped there. */
  .user-lightmode-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-lightmode-color .list-back-card {
    background-color: #FFFFFF !important;
    color: #0754a6 !important;
  }
  .user-lightmode-color table.mobile-cards > tbody > tr {
    background-color: #FFFFFF !important;
  }
  .user-lightmode-color table.mobile-cards .mobile-title,
  .user-lightmode-color table.mobile-cards .mobile-title a {
    color: #2A2F36 !important;
  }
  /* Drop the grey avatar tile behind the leading icon so the icon sits directly on the card. */
  .user-lightmode-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-lightmode-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-lightmode-color table.mobile-cards.mobile-header-controls tr:has(> th) > th.mobile-keep i,
  .user-lightmode-color table.mobile-cards.mobile-header-controls tr:has(> th) > th.mobile-keep .library-go-up-inner {
    color: #0754a6;
  }
  .user-lightmode-color table.mobile-cards.mobile-header-controls tr:has(> th) > th.mobile-keep {
    background-color: #FFFFFF;
    color: #2A2F36;
  }
}