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

/* Import Adesy design tokens with Solveon theming */
@import url('solveon-design-tokens.css');

/* Import 'Montserrat' from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Import 'Poppins' from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --background-surface-primary: #051D41;
  --background-surface-base: #ffffff;
  --background-surface-hover: #DCE7F7;
  
  --font-color-primary: #051D41;
  --font-color-secondary: #5B6064;
  --font-color-inverse: #ffffff;
  
  --font-family-heading: "Montserrat", "Arial", "Helvetica", sans-serif;
  --font-family-body: "Poppins", "Arial", "Helvetica", sans-serif;
  
  --font-title-xl: 51px 700;
  --font-body-s: 14px 500;
}

body
{
  font-family: var(--font-family-body) !important;
  font-size: var(--font-body-s) !important;
  margin: 0px;
  padding: 0px;
  text-align:left;
  line-height: 1.5;
}

/*a
{
  color: black !important;
}

a:hover
{
  color: #555 !important;
  text-shadow: 0 0 6px white !important;
}*/

.BaseMaster_container {
  font-family: var(--font-family-body) !important;
  font-size: var(--font-body-s) !important;
}

.BaseMaster_mainMenuContainer
{  
  background-color: var(--background-surface-base) !important;
  /*text-decoration: none !important;*/
}

/* Note: main menu dropdown arrows are not customized, because readers will never see them */
.BaseMaster_menuItem,
.BaseMaster_menuItem a,
.BaseMaster_profileLink
{
  /* This line makes header links white for readers */
  color: var(--font-color-primary) !important;
  /*background-color: transparent !important;  */
}

.BaseMaster_mainMenuContainer .BaseMaster_menuItemHover,
.BaseMaster_mainMenuContainer .BaseMaster_menuItemHover 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
{
  /*text-shadow: 0 0 6px white !important;
  background-color: transparent !important; */ 
}

/* Portal Logo */
.BaseMaster_logoContainer 
{
	height: 60px;
}

.BaseMaster_imgLogo {
	object-fit: cover;
	min-height: 60px;
}

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

/* Nav panel product name */
.ArticleSelector_templateHeader {
  padding: var(--style-spacing-m);
  padding: 32px;
}

.ArticleEditor_projectNameLabel.ArticleEditor_projectName {
  font-family: var(--font-family-title) !important;
  font-weight: 700;
  color: var(--font-color-inverse);
}

.QuickFilterBox_nullText input {
  font-family: var(--font-family-body) !important;
}

.ArticleSelector_container {
  background-color: var(--background-surface-primary);
  color: var(--font-color-inverse);
}

.ArticleSelector_tabContent {
  background-color: var(--background-surface-primary);
}

.Articles_splitter .dxtc-content,
.dxtlIndent_DefaultTheme,
.dxtlNode_DefaultTheme,
.IndexViewer_list
{ /* Uncomment the line below to make the TOC / Index navigation panel have light-gray background */
  /*background-color: #efefef;*/
}

/* Breadcrumb */
.CHBreadcrumb_item {
  font-family: var(--font-family-body);
  font-size: 14px;
}

.CHBreadcrumb_itemSelf {
  color: var(--font-color-secondary);
}

/* Updated date */
.UpdatedOn_container {
  font-family: var(--font-family-body);
  font-size: 14px;
}

.dxtlFocusedNode_DefaultTheme
{ /* Set background color for the focused TOC tree node */
  background-color: var(--color-bg-default-surface-neutral-tint) !important;
}

.TocTreeLight_headerContainer {
  padding: var(--style-spacing-m);
}

/*Article filter drop-button caret*/
.TocTreeLight_btnBatch:hover i.fal:before {
  color: var(--font-color-primary);
}

/* Article filter dropdown items */
.dxm-hovered {
  background-color: var(--color-bg-default-surface-hover);
  color: var(--font-color-primary) !important;
}

.TocTreeLight_treeContainer {
  overflow: auto !important;
  padding-inline: 16px; /*TODO: vaihda tähän design token --style-spacing-m*/
}

.TocTreeLight_treeContainer .CHTree_tree {
  font-family: var(--font-family-body) !important;
  color: var(--font-color-inverse) !important;
}

.TocTreeLight_treeContainer .CHTree_btn,.IndexViewerLight_contentContainer .CHTree_btn {
    padding-bottom: 0px;
    padding-inline-end: 0px ;
}

.TocTreeLight_nodeText {
  color: var(--font-color-inverse); 
}

.CHTree_nodeContainer a.CHTree_nodeFocused .CHTree_nodeContent .TocTreeLight_nodeText,
.CHTree_nodeContainer a.CHTree_nodeFocused .fal:before{
  color: var(--font-color-primary); 
}

a.CHTree_node:hover .TocTreeLight_nodeText,
a.CHTree_node:hover .fal:before {
  color: var(--font-color-primary); 
}

.CHTree_btn CHTree_nodeBtnCollapse {
  width: 36px !important;
  height: 36px !important;
}

.TocTreeLight_treeContainer .CHTree_nodeFocused {
  color: var(--font-color-primary) !important;
  font-weight: var(--font-weight-400-regular);
}

.TocTreeLight_treeContainer .CHTree_nodeFocused:hover .CHTree_nodeContent {
  color: var(--font-color-primary);
}

.fal.fa-angle-right::before {
  /* Positioning the caret correctly */
  display: inline-block !important;
  position: relative;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px;
  
  /* and colouring it */
  color: var(--font-color-inverse);
}

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

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

.TocTree_tocNode.TocSprite_book_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;
  background-position: 0 0 !important;*/
}

/* Right panel mini TOC hiding */
.DeepSpace_miniToc.CHNavCaption {
  /*display: none;*/
}

.DeepSpace_miniToc.CHMiniToc {
  /* display: none; */
}

.DeepSpace_sidebarControlsContainer {
  /*border: none;*/
  margin: none !important;
  padding: none !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
{ /* Set hover background color for image buttons like Print or Remove Highlighting */
  background-color: var(--background-surface-hover) !important;
  color: var(--font-color-primary) !important;
  border-radius: 50%;
}

.CHImageButton:hover i:before {
  color: var(--font-color-primary);
}

.CHImageButton i {
  position: relative;
  top: 1px;
}

.CHImageButton:hover i {
  background-color: transparent !important;
}

i.fa-link,
i.fa-print,
i.fa-file-pdf {
  font-size: 20px;
}

i.fa-link:before,
i.fa-print:before,
i.fa-file-pdf:before {
  font-size: 20px;
  font-weight: 400;
  color: var(--font-color-secondary);
  position: relative;
  top: -3px;
}

.Articles_content {
  max-width: 1200px; /* Ensures short enough text lines for optimal readability */
}

.ArticleEditor_rating div
{ /* Set rating star background (appears after voting) */
  background-color: var(--background-surface-hover) !important;
}

.dxeListBoxItemSelected_DefaultTheme
{ /* Set background color for the selected publication in the publications dropdown */
  background-color: var(--background-surface-hover) !important;
}

/* === Application footer styles === */

/* Uncomment the following rules to get white header with black text and blue link */
.BaseMaster_footer
{
  background: #E2E3E4 !important;
  color: #333 !important;
}

.BaseMaster_footer a
{
  color: #333 !important;
  text-decoration: none;
}

/* Top right Search box */
.SearchBox_editor {
  border: 2px solid var(--color-fg-default-border-extrastrong);
  border-radius: var(--style-radius-md);
}

input.dxeEditAreaSys {
  height: 29px !important; /* completely random number... */
  min-height: 0;
}

.dxeNullText_DefaultTheme .dxeEditArea_DefaultTheme
{
  color: var(--color-fg-default-text-disabled) !important;
  text-transform: none !important;
}

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

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

.dxeFocused_DefaultTheme
{ /* Set border color for focused Search edit boxes in the app header and on the Search page */
  border-color: rgb(255,119,0) !important;
}

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

.Search_container a,
.SearchBox_completionWindow .SearchBox_moreResultsItem a
{
  color: #AAA !important;
}

.SearchBox_completionWindow .CHListBox_item:hover
{  
  background-color: #CCC !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: black !important;
  background-color: transparent !important;
}

a.SearchBox_button:hover
{
  color: #777 !important;
  background-color: transparent !important;
}

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

.CHTree_nodeContentFocused 
{
  background-color: #0072C6 !important;
  color: white !important;
}

.CHTree_nodeContent:hover,
.CHListBox_item:hover
{
  background-color: var(--color-bg-default-surface-hover) !important;
  color: var(--color-fg-default-text-primary) !important;
  border-radius: var(--style-radius-md);
}

/* 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;
}*/


/* SOLVEON TocTree Filter Box */
.TocTreeLight_filterContainer {
  border-radius: var(--style-radius-md);
  border: 2px solid var(--color-bg-default-surface-neutral-tint);
  border: 2px solid var(--background-surface-hover); /* decide which color is better... */
}

.TocTreeLight_filterContainer table.QuickFilterBox_editBox {
  border: none;
  border-radius: 0;
}

.TocTreeLight_filterContainer input.dxeEditAreaSys {
  font-family: var(--font-family-body) !important;
  color: var(--font-color-inverse) !important; /* Font color when text typed */
  padding-left: var(--style-spacing-xs);
}

.TocTreeLight_filterContainer input.dxeEditAreaSys.dxh0 {
  color: var(--color-fg-default-text-disabled) !important; /* Font color when text NOT typed (placeholder text showing) */
}

.TocTreeLight_filterContainer .TocTreeLight_btnBatch {
  margin: 0;
}

/* Expand button */
.dxm-popupMain.dxm-popup {
  border-radius: var(--style-radius-md); 
}

/* SOLVEON TocTree nodes */
.CHTree_nodeContainer a.CHTree_node {
  background-color: transparent;
  border-radius: var(--style-radius-md);
  height: 36px;
  /*margin-bottom: 16px;*/ /*TODO: poista tämä ja käytä tokenia*/
  direction: rtl; /* this sets the table column direction right-to-left, thus making the arrow appear on the right side of the item (it's on the left by default)*/
}

.CHTree_nodeContainer a.CHTree_nodeFocused {
  background-color: var(--color-bg-default-surface-neutral-tint) !important;
  color: var(--font-color-primary);
}

.CHTree_nodeContainer a.CHTree_nodeFocused:hover {
  background-color: var(--background-surface-hover) !important;
  color: var(--font-color-primary) !important;
  cursor: pointer;
}

.CHTree_nodeContainer a.CHTree_node .CHTree_nodeContent {
  padding-inline: 16px;
  vertical-align: middle;
}

.CHTree_nodeContainer a.CHTree_nodeFocused .CHTree_nodeContent {
  color: var(--font-color-primary); 
}

.CHTree_nodeContainer a.CHTree_node:hover {
  color: var(--font-color-primary) !important;
  cursor: pointer;
}

.CHTree_nodeChildren:not(.CHTree_nodeChildrenL0) {
  /* padding-left: 32px; */ /* Kommentoitu pois väliaikaisesti, koska hierarkiassa syvällä olevat sivut sisentyivät niin kapeiksi, että niistä tuli lukukelvottomia */
  /* TODO: Adesy fix */
}

.CHTree_nodeChildren:not(.CHTree_nodeChildrenCollapsed):not(:empty):not(.CHTree_nodeChildrenOfHiddenNode) {
  /* Controlling spacing of child elements. Fancy job... */
  margin-top: var(--style-spacing-m);  
}

.CHTree_nodeChildren li.CHTree_nodeContainer:not(:last-child) a.CHTree_node {
  margin-bottom: var(--style-spacing-m) !important;
}


/* Login page*/
.Login_container
{
  background: white !important;
  border: 2px rgb(255,119,0) solid !important;
  box-shadow: 0 0 10px #777 !important;
}

.Login_back
{
  background-color: white !important;
  background-image: none !important;  
}

.Login_header img
{
  margin-left:4px !important;
  
}

.Login_header td
{
  padding: 0px !important;
}

/* Right sidebar */
.BaseMaster_templateRightSidebar {
  font-family: var(--font-family-body);
  color: var(--font-color-primary);
  text-transform: inherit
}

/* Reader Feedback Widget */
.ArticleEditor_readerFeedbackContainer{
    display: block;
}

/* happy face / sad face buttons */
.ArticleEditor_readerFeedbackContainer button { 
  color: var(--font-color-secondary);
}

/* Hides the floating feedback dialog */
.ArticleEditor_pnlWasItHelpful {
  display: none !important;
}