/* This is your portal's Branding CSS file. You can find information on ClickHelp branding in the following topic:
   http://doc.clickhelp.co/articles/clickhelp-documentation/branding-general-information
*/

/* === Application header / main menu styles === */

/* Font styles */

@import url("/resources/Styles/common-styles/energyhub-common-fonts.css");

/*reader menu limitations*/
li.CHMenu_menuItem { 
display: none; 
}



/* General styles */

.dxcaLoadingPanel_DefaultTheme .dxlp-loadingImage, 
.dxlpLoadingPanel_DefaultTheme .dxlp-loadingImage,
.dxlpLoadingPanelWithContent_DefaultTheme .dxlp-loadingImage
{ /* Uncomment to change the color of all "Loading..." animations to blue. The color does not have to be the same for all the properties */
  /*border-inline-start-color: #0072C6 !important;
  border-inline-end-color: #0072C6 !important;
  border-bottom-color: #0072C6 !important;*/
}

.BaseMaster_mainMenuContainer
{  
  /* Uncomment the following lines to get custom header background image */
  /*background-image: url('/resources/Storage/Templates/Projects/Minimalist/escheresque.png') !important;
  background-repeat: repeat !important;*/
  
  /* Uncomment the following lines to get light gray header background */
 /* background-color: #efefef !important;
  background-image: none !important;*/
}

.CHMenu_menuItem a,
.BaseMaster_profileLink
{
  /* This line makes header links blue for readers */
  /*color: #2C72C8 !important;*/
  /* Uncomment the following line to get red header links */
  /*color: red !important;*/
}


.CHMenu_menuItem:hover a,
/* The two extra selectors below are for the "Log In" / user profile link - you can style them separately if needed */
.BaseMaster_profileLink:hover,
.BaseMaster_profileLink:hover a
{
  /* These lines make header links white with blue background on hover */
  /*color: white !important;
  background-color: #0072C6 !important;*/
  /* Uncomment the following line to get black header links with yellow background on hover */
  /*color: black !important;
  background-color: yellow !important;*/
}

.dxm-hovered,
.dxm-hovered a.dx
{ /* Uncomment to make the My Profile and Log Out dropdown menu items blue and white on hover for Power Readers */
  /*color: white !important;
  background-color: #0072C6 !important;*/
}

/*side-nav arrow styles*/
.CHTree_btn.CHTree_nodeBtnExpand > i,
.CHTree_btn.CHTree_nodeBtnCollapse > i {
    display: none !important;
}

/* Mobile-specific styles */

.BaseMaster_offCanvasHeader
{ /* Uncomment the following line to get light gray background in mobile menu header */
  /* background-color: #efefef !important; */
} 

.BaseMaster_hamburgerMenuIcon:hover
{ /* Uncoment the following lines to make the mobile "hamburger" button hover color blue and white */
  /*background-color: #0072C6 !important;
  color: white !important;*/
}

.CHMenu_menuItemSelected
{ /* Change the underline color for the selected mobile menu item.
     Also affects selected item in Web Help navigation panel */
  /*border-bottom-color: #0072C6 !important;*/
}

.dxeFocused_DefaultTheme
{ /* Change the focused edit box border color to blue */
  /*border-color: #0072C6 !important;*/
}

.dxRipple
{ /* This changes the color of the ripple which appears on clicks to gray */
  background-color: rgba(180,180,180,.4) !important;
}

/* Web Help */

/* Navigation panel */
.WebHelp_navMenu
{ /* Uncomment the following line to get light gray navigation panel background */
  /* background-color: #efefef !important; */
}

/* === TOC styles === */

.ArticleSelector_tabContent
{ /* Uncomment the line below to make the TOC / Index navigation panel have light-gray background */
  /*background-color: #efefef !important;*/
}

.TocTreeLight_container .CHTree_nodeFocused 
{ /* Set background color for the focused TOC tree node */
  /*background-color: #0072C6 !important;
  color: white !important;*/
}

.TocTree_tocNode.TocTreeLight_imgTopic
{
  /* Uncomment the following lines to replace the default topic icon with an icon from Storage */
  /*background-image: url('/resources/Storage/info.png') !important;*/
}

.TocTree_tocNode.TocTreeLight_imgBook
{
  /* Uncomment the following lines to replace the default "book" folder icon with an icon from Storage */
  /*background-image: url('/resources/Storage/info.png') !important;*/
}

.TocTree_tocNode.TocTreeLight_imgBook_open
{
  /* Uncomment the following lines to replace the default "open book" folder icon with an icon from Storage */
  /*background-image: url('/resources/Storage/warning.png') !important;*/
}

/* === Tab styles === */

.dxtc-activeTab a, 
.dxtc-tabHover a
{ /* Set background color for active / hovered tabs */
  /*background-color: #0072C6 !important;*/
}

.dxtc-leftIndent, 
.dxtc-activeTab, 
.dxtc-tab, 
.dxtc-spacer, 
.dxtc-rightIndent, 
.dxtc-sbWrapper, 
.dxtc-sbIndent, 
.dxtc-sbSpacer
{ /* Set color for the base border lines near the tabs */
  /*border-top-color: #0072C6 !important;*/
}

/* === Topic header styles === */

/* NOTE: You can also change header visibility and control elements displayed in it via the "Reader Experience section of global or project settings */
.ArticleEditor_header
{
  /* Uncomment the following lines to get black topic header with white text */
  /*background-color: black !important;
  color: white !important;*/
}

.ArticleEditor_title
{
  /* Uncomment the following line to get red topic title */
  /*color: red !important;*/
}

.CHImageButton:hover
{ /* Uncomment the following line to set hover background color for image buttons like Print or Remove Highlighting */
  /*background-color: #0072C6 !important;*/
}

.dxeListBoxItemSelected_DefaultTheme,
.dxeListBoxItemHover_DefaultTheme.dxeListBoxItemSelected_DefaultTheme
{ /* Set background color for the selected publication in the publications dropdown */
  /*background-color: #0072C6;
  color: white;*/
}

/* === Search page styles === */ 

/* The following rules make the search result links, the Search button and the filter tree have blue background with black text. */

.BaseMaster_mainMenuContainer .dxeFocused_DefaultTheme,
.BaseMaster_contentContainer .dxeFocused_DefaultTheme
{ /* Set border color for focused Search edit boxes in the app header and on the Search page */
  /*border-color: #0072C6;*/
}

/* Set colors for the Search box completion window and its items */

.SearchControl_results a,
.SearchBox_completionWindow .SearchBox_moreResultsItem a
{
  /*color: #2C72C8 !important;*/
}

.SearchBox_completionWindow .CHListBox_item:hover
{  
  /*background-color: #0072C6 !important;*/
}

.SearchBox_completionWindow .CHListBox_item:hover .ArticleCompletionBox_item,
.SearchBox_completionWindow .CHListBox_item:hover .ArticleCompletionBox_projectName,
.SearchBox_completionWindow .CHListBox_item:hover a
{
  /*color: white !important;*/
}

/* Set colors for the Search button */

a.SearchBox_button
{
  /*color: white !important;
  background-color: #0072C6 !important;*/
}

a.SearchBox_button:hover
{
  /*color: black !important;
  background-color: #E7E3E7 !important;*/
}

.SearchControl_filterByContainer .dxeButtonEditButtonHover_DefaultTheme,
.SearchControl_filterByContainer .dxeButtonEditButtonPressed_DefaultTheme
{ /* Change the filter dropdown arrow color on hover */
  /*background-color: #0072C6 !important;*/
}

/* Set colors for projects filter on the Search page */

.ProjectsTreeDropdown_dropDownContainer .CHTree_nodeFocused
{ /* Set the focused node color in the project filter dropdown on the Search page */
  /*background-color: #0072C6 !important;
  color: white !important;*/
}

.CHTree_node:hover,
.CHListBox_item:hover
{
  /*background-color: #E7E3E7 !important;
  color: black !important;*/
}

/* Uncomment the following two rules to specify different styles for odd and even search results */
/*.SearchResults_itemOdd
{
  background-color: #EFEFEF !important;
}

.SearchResults_itemEven
{
  background-color: white !important;
}*/

.ArticleEditor_templateHeader .BaseMaster_searchBoxContainer {
  width: 100%;
  max-width: 100%;
  padding-inline-start: 0 ;
  padding-inline-end: 0 ;
  margin-bottom: 16px;
}

.ClearSky_articleHeaderLine3 {
  
}

.energyhub-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #212851;
  padding-block-start: 8px ;padding-inline-end: 0 ;padding-block-end: 8px ;padding-inline-start: 0 ;
  border-bottom: 1px solid #212851;
}

.energyhub-breadcrumbs,
.energyhub-breadcrumbs a {
  font-size: 14px;
  color: #212851 !important;
}

.energyhub-breadcrumbs .CHBreadcrumb_itemSelf {
  font-weight: 700;
}

.energyhub-breadcrumbs a {
  text-decoration: underline;
}

.TocTreeLight_nodeText, .CHTree_nodeContent,
button#pnlContainer_cphMain_articleSelector_tocTreeLight_btnShowIndex,
button#pnlContainer_cphMain_articleSelector_indexViewer_pnlCallback_btnShowContents, 
input#pnlContainer_cphMain_articleSelector_tocTreeLight_quickFilter_quickFilter_edtFilter_edtQuickFilter_I,
input#pnlContainer_cphMain_articleSelector_indexViewer_pnlCallback_edtQuickFind,
.ArticleEditor_readerFeedbackCaption, 
input#pnlContainer_templatedHeader_searchbox2_edtSearch_edtQuery_edtArticleTitle_edtFilter_edtQuickFilter_I,
.BaseMaster_mainMenuContainer .CHMenu_menu .CHMenu_menuItem a
{
  font-family: Inter;
}

.Articles_page .ClearSky_appHeaderLine1 .BaseMaster_searchBoxContainer {
    display: block;  
}

.Articles_page .ClearSky_appHeaderLine2 .BaseMaster_searchBoxContainer {
    display: none;
}

.ArticleEditor_readerFeedbackContainer, .ArticleEditor_readerFeedbackThankYou {
  display: none !important;
}

/* reader menu and home page updates to Inter font */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/resources/Storage/Branding/Inter/InterDisplay-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/resources/Storage/Branding/Inter/InterDisplay-SemiBold.woff2') format('woff2');
}

:root {
  --eh-font: 'Inter', sans-serif;
  --eh-nav-color: #243648; 
  --eh-nav-hover: #1E64BF; 
}

header .main-nav > .item > .link,
header .main-nav > .item > .link:visited,
header .main-nav > .item-collapse {
  font-family: var(--eh-font);
  color: var(--eh-nav-color);
}
header .main-nav > .item > .link:hover {
  color: var(--eh-nav-hover);
}

header .main-nav .subitems .link,
header .main-nav .subitems .link:visited,
header .main-nav .item-collapse .link,
header .sign-in,
header .sign-in * {
  font-family: var(--eh-font) !important;
  color: var(--eh-nav-color) !important;
}
header .main-nav .subitems .link:hover,
header .main-nav .item-collapse .link:hover,
header .sign-in:hover,
header .sign-in:hover * {
  color: var(--eh-nav-hover) !important;
}

header input {
  font-family: var(--eh-font);
}

.page h1.title {
  font-family: var(--eh-font);
  color: var(--eh-nav-color);
}

.Home_page .BaseMaster_mainMenuContainer,
.Home_page .BaseMaster_templateHeader {
  height: 72px !important;
}
.Home_page .ClearSky_appHeaderLine1 {
  height: 72px;
  background-color: #fff;
}
.Home_page .ClearSky_appHeaderLine1 .BaseMaster_logoContainer,
.Home_page .ClearSky_appHeaderLine1 .MainMenu_container {
  height: 72px;
  line-height: 72px;
}
.Home_page .ClearSky_appHeaderLine1 .BaseMaster_hamburgerMenuIcon {
  margin-top: 13px;   
}
.Home_page .ClearSky_appHeaderLine1 .BaseMaster_btnSearchMobile {
  margin-top: 6px;  
}

.Home_page .ClearSky_appHeaderLine1 img.BaseMaster_imgLogo {
  padding-top: 18px !important;
}

.Home_page .MainMenu_container li.CHMenu_menuItem {
  height: 72px !important;
}
.Home_page .MainMenu_container li.CHMenu_menuItem > a,
.Home_page .BaseMaster_profileLink,
.Home_page .BaseMaster_profileLink a {
  font-family: var(--eh-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--eh-nav-color) !important;
  line-height: 72px !important;
  height: 72px !important;
}
.Home_page .BaseMaster_profileLink,
.Home_page .BaseMaster_profileLink a {
  font-weight: 400 !important;
}
.Home_page .MainMenu_container li.CHMenu_menuItem > a {
  padding: 0 14px !important;  
}
.Home_page .MainMenu_container li.CHMenu_menuItem > a .fa-angle-down {
  font-size: 12px !important;
  margin-left: 4px !important;
  color: inherit !important;
}
.Home_page .MainMenu_container li.CHMenu_menuItem:hover > a,
.Home_page .BaseMaster_profileLink:hover,
.Home_page .BaseMaster_profileLink:hover a {
  color: var(--eh-nav-hover) !important;
  background: none !important;
}

.Home_page .MainMenu_container li.CHMenu_menuItem:hover,
.Home_page .MainMenu_container li.CHMenu_menuItemSelected {
  background: none !important;
}

.Home_page .MainMenu_container .CHMenu_popup {
  width: auto !important;
  min-width: 200px;
  padding: 10px 8px !important;
  background-color: #fff !important;
  border: 1px solid #E0E0E0 !important;
  border-radius: 8px !important;
  box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.12) !important;
}
.Home_page .MainMenu_container .CHMenu_popup .CHTree_nodeContainer {
  padding: 0 !important;
  height: auto !important;
}
.Home_page .MainMenu_container .CHMenu_popup a.CHTree_node,
.Home_page .MainMenu_container .CHMenu_popup .CHTree_nodeContent {
  font-family: var(--eh-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 20px !important;
  color: var(--eh-nav-color) !important;
}
.Home_page .MainMenu_container .CHMenu_popup .CHTree_nodeContent {
  padding: 6px 14px !important;
}
.Home_page .MainMenu_container .CHMenu_popup a.CHTree_node:hover,
.Home_page .MainMenu_container .CHMenu_popup a.CHTree_node:hover .CHTree_nodeContent {
  color: var(--eh-nav-hover) !important;
  background: none !important;
}