/*
*/
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 h2,
.user-darkmode-color .fc-icsButton-button.fc-state-default,
.user-darkmode-color .common-text-color,
.user-darkmode-color .userCourseInfoButtonDashboard {
  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 #course-player #course-player-window {
  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 .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-visible,
.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-state-default,
.user-darkmode-color .fc-icsButton-button.fc-state-default:hover,
.user-darkmode-color .dashboard-blockbg,
.user-darkmode-color .checkbox-container input[type="radio"] ~ .checkbox-image:after {
  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 {
  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-state-default {
  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-visible,
.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 .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-visible,
.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 .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 .readonly .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 {
  background-color: #200000 !important;
  border: 1px solid #622 !important;
}
.user-darkmode-color .checkbox-container input[type=checkbox]:checked ~ .checkbox-image.redShadowBox:after {
  border-color: #9F3A38 !important;
}
.user-darkmode-color .redBackground {
  background-color: #200000 !important;
}
/* custom color on hyperlinks */
.user-darkmode-color .custom-color-font,
.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-visible,
.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-state-default {
  color: rgba(255,255,255,0.9);
}
/* Border color for checkbox on custom color background */
.user-darkmode-color .white-checkbox span,
.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 .menu-selected,
.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-state-default:hover,
.user-darkmode-color div#right-panel-ecerts-content table tr:hover {
  background-image: url('./../img/menu-overlay.png');
}
/* */
.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 {
  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-visible::after {
  border-color: #0754a6 transparent transparent transparent;
}
.user-darkmode-color .tooltip-bottom .tooltip-content-visible::after {
  border-color: transparent transparent #0754a6 transparent;
}
.user-darkmode-color .tooltip-right .tooltip-content-visible::after {
  border-color: transparent #0754a6 transparent transparent;
}
.user-darkmode-color .tooltip-left .tooltip-content-visible::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 {
  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;
}
/* 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-unthemed th,
.user-darkmode-color .fc-unthemed td,
.user-darkmode-color .fc-unthemed thead,
.user-darkmode-color .fc-unthemed tbody,
.user-darkmode-color .fc-unthemed .fc-divider,
.user-darkmode-color .fc-unthemed .fc-row,
.user-darkmode-color .fc-unthemed .fc-content,
.user-darkmode-color .fc-unthemed .fc-popover,
.user-darkmode-color .fc-unthemed .fc-list-view,
.user-darkmode-color .fc-unthemed .fc-list-heading td,
.user-darkmode-color .ui-state-default,
.ui-widget-content .ui-state-default {
  border-color: #444 !important;
}
.user-darkmode-color .fc-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;
}
.user-darkmode-color #canvas-container {
  border: 1px solid #333;
  background-color: #222;
}
.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;
}