/*
*/
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 {
  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 #course-player #course-player-window {
  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 .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 {
  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 {
  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 .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 .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;
}
.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 {
  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 .customHoverBg.has-submenu.expanded,
.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');
}
/* */
.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 {
  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;
}
/* 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;
}
.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;
}
.user-lightmode-color #canvas-container {
  border: 1px solid #ddd;
  background-color: #FFF;
}
.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 .default-white-block 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. */
  .user-lightmode-color .default-white-block:has(> .list-table-scroll-wrap > table.mobile-cards) {
    background-color: transparent;
    box-shadow: none;
  }
  .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;
  }
  /* Responsive player drawer: theme the slide-in panel + handle like the menu buttons. */
  .user-lightmode-color .course-player-responsive #course-right-panel,
  .user-lightmode-color .course-player-handle {
    background-color: #0754a6;
    color: rgba(255,255,255,0.9);
  }
}