@charset "utf-8";

/*
 * ------------------------------------------------------------------
 *
 * INSTRUCTIONS
 *
 * 
 * - USE TWO SPACES at the start of the row INSTEAD OF A TAB.
 * 
 */

/*
 * ------------------------------------------------------------------
 *  
 * Fonts.
 *  
 */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:wght@300;400;600;700display=swap");
@import url("https://fonts.googleapis.com/css?family=Figtree:wght@300;400;600;700display=swap");

@font-face {
  font-family: "Glyphicons Halflings";
  src: url(resources/fonts/glyphicons-halflings-regular.eot),
  url(resources/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
  url(resources/fonts/glyphicons-halflings-regular.woff2) format('woff2'),
  url(resources/fonts/glyphicons-halflings-regular.woff) format('woff'),
  url(resources/fonts/glyphicons-halflings-regular.ttf) format('truetype'),
  url(resources/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg');
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
  url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff'),
  url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 300,400,600,700;
}

html,
body {
  min-width: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
}

/*
 * ------------------------------------------------------------------
 *  
 * Layout
 *  
 */

/* 15.02.2018: Wider container DIV for bigger screens to have more horizontal space for images */

@media only screen and (min-width : 1900px) {
  .container {
    width: 1400px;
  }
  
  .footer > .container {
    width: unset !important;  
  }
}

/*
* ------------------------------------------------------------------
*
* Paragraphs
*
*/

.p {
  margin-top: 1em;
}

/*
* ------------------------------------------------------------------
*
* Bootstrap modifications
*
*/

/*
.navbar-brand{
    height:auto;
}
*/

.navbar {
  border: none;
  border-radius: 0;
  margin: 0;
}

/* Raine L. 25.11.2016: Header color changed */

.wh_header {
  background: #0A1541;
  color: #ffffff;
  padding: 1rem 2rem 2rem 2rem;
}

.wh_header > a:hover {
  background: #006eef;
}

.wh_header_flex_container {
  margin-top: 8px;
  margin-bottom: 5px;
}

a,
a:visited {
  color: #006EEF;
  transition: color 0.4s ease;
}

a:hover {
  color: #0A1541;
  text-decoration: none;
}

.wh_topic_toc a {
  color: #0A1541;
  font-size: 13px;
  transition: color 0.4s ease;
}

.wh_publication_toc a {
  color: #0A1541;
  font-size: 13px;
  transition: color 0.1s ease;
}

.wh_publication_toc a:hover, .wh_topic_toc a:hover {
  color: #006EEF;
}

.wh_publication_toc {
  background-color: #F2F4F9;
  padding: 2rem;
  border-radius: 2rem;
}

/* Raine L. 1.12.2016: Make the product title and logo href work as expected */

.navbar-collapse:after {
  display: initial;
}

/* Raine L. 19.4.2017: Removed the ">>" icon from the top menu list items that have subitems */

@media only screen and (min-width : 768px) {
  .wh_top_menu ul ul li.has-children:after {
    content: none;
  }
}

/*
     * ------------------------------------------------------------------
     *
     * Header
     *
     */

.wh_logo_and_publication_title {
  font-family: 'Figtree', 'Open Sans', sans-serif;
  line-height: 1.6em;
}

a.wh_logo {
  display: block;
}

a.wh_logo > img {
  max-height: 52px;
}

@keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}

a.wh_logo > img:hover {
  animation: bounce .6s;
}

/*
 * ------------------------------------------------------------------
 *  
 * Publication titles
 *  
 */

/* Raine L. 25.11.2016: Style changes to publication titles. */
/* Raine V. 11 Oct 2023: Hiding the titles */

div.wh_publication_title {
  /*color: #fff !important;
  font-size: 1.8em !important;
  margin-left: 10px !important;
  text-align: left;*/
  display: none;
}

div.wh_publication_subtitle {
  /*font-family: 'Figtree' !important;
  font-size: 1.2em !important;
  color: #fff !important;
  margin-left: 10px !important;
  font-weight: 100 !important;
  text-align: left;*/
  display: none;
}

/*
 * ------------------------------------------------------------------
 *  
 * Menu
 *  
 */

/* Raine L. 2.12.2016: The main container containing the header menus is now relative, enabling the elements to be placed absolutely (e.g. to the bottom right) */

div.container {
  position: relative;
}

.wh_top_menu {
  font-family: 'Open Sans', 'Figtree', sans-serif;
  text-transform: uppercase;
  font-size: 0.8em;
  margin: 1.2rem 0 0 0;
}

.dropdown-menu {
  margin: 0;
  border: 0;
}

.wh_indexterms_link {
  margin: 1.9rem 0 0 0.5rem;
  background: #3B4467;
  border-radius: 16px;
  font-size: 10.6px;
  padding: 0 9px 1px 0;
} 

.wh_top_menu a {
  color: #fff;
  line-height: 2em;
}

/* Raine L. 16.12.2016: The "Contacting Support" topic title in the top menu now changes opacity if it's hovered (does not have child topics) */

a[data-id = "contacting_support"]:hover {
  opacity: 0.6;
}

a[data-id = "contacting_support"] {
  transition: opacity 0.4s ease;
}

/* ----- Support topic title hover definition ends ----- */

/* Raine L. 2.12.2016: Top menu, language and version selector, and PDF link are now placed absolutely to 
the right in the header -- in the desktop layout, the PDF link is placed left of the selector, the selector
is placed in the top-right corner, and the top_menu and the index link are placed under it. I the mobile
layout the selector is placed in the top-right corner of the top_menu and the PDF link under it.
No index link in the mobile layout. */

/* --- Desktop layout starts --- */

/* Raine V. 28.1.2020: Added a small padding for the PDF download link as removing the language selector
from the Swedish user guide causes it to be awkwardly placed.  */

#settingsButton {
  cursor: pointer;
  background: #3B4467;
  padding: 5px 20px;
  border-radius: 12px;
  font-size: 85%;
  margin-left: 2rem;
  display: none; /* Raine L. 7.12.2016: Button not to be shown if language-version-selector.js cannot be found */

  /* Raine L. 8.12.2016: Hover transitions for the PDF link and the index term link */

  transition: opacity 0.4s ease;
}

#settingsButton:hover {
  opacity: 0.6;
}

.PDFLink {
  transition: opacity 0.4s ease;
}

.PDFLink:hover {
  opacity: 0.5;
}

.wh_indexterms_link {
  transition: opacity 0.4s ease;
}

.wh_indexterms_link:hover {
  opacity: 0.5;
}

/* --- End of hover transition changes --- */

@media only screen and (min-width : 768px) {
  
  .wh_top_menu {
    right: 7.5em;
    bottom: 3px;
  }

  .top-buttons {
    right: 3.5em;
    top: 0.6em;
    display: flex;
    justify-content: flex-end;
  }

  a#pdflink {
    display: flex;
    align-items: center;
  }

}

/* --- Desktop layout ends and mobile starts --- */

@media only screen and (max-width : 767px) {
  
  .top-buttons {
    right: 0.5em;
    top: 0.5em;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
  }

  .PDFLink {
    position: absolute;
    right: 0.2em;
    top: 4em;
  }

  div.wh_top_menu_and_indexterms_link {
    position: relative;
  }
  .navbar.collapse {
    padding-left: 20px;
  }
  
  .wh_indexterms_link {
    margin: 0 0 0 -0.3rem;
  } 

  /* Raine V: Removing this rule for mobile.
	
	.wh_child_links {
		display: none;
	} */
}

/* --- Mobile layout ends --- */

/* User guid selector pane */

.userGuideSelector {
  display: none;
  margin-top: 1rem;
  color: #0A1541;
  font-family: 'Open Sans', 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 13px;
  background: #FFF;
  padding: 0.5em 0 0.6em 1em !important;
}

.userGuideSelector div,
.userGuideSelector input {
  overflow: hidden;
  padding: 0 1rem 1rem 0.2rem;
}

.userGuideSelector div:first-child {
  float: left;
}

.userGuideSelector:before,
.userGuideSelector:after {
  display: table;
  line-height: 0;
  content: "";
}

.userGuideSelector:after,
.userGuideSelector .select {
  clear: both;
}

div[aria-describedby="userGuideSelector"] {
  border-radius: 1rem;
  background: #FFF;
  width: auto !important;
  padding: 0.7rem 0.5rem 1.3rem 1rem !important;
}

/* TITLE BAR */

div[aria-describedby="userGuideSelector"] > div.ui-dialog-titlebar {
  border-radius: 1rem;
  background: #FFF;
  color: #0A1541;
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 0.7rem 1.3rem;
  border: none;
}

/* SELECTORS */

select#languageSelector {
  margin-right: 1rem;
}

select#languageSelector, select#versionSelector {
  padding: 0.3rem;
  font-family: 'Open Sans', 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 12px;
  border-radius: 0.5rem;
  color: #0A1541;
}

/* WIDGET FOOTER W/ BUTTONS */

div.ui-dialog-buttonpane {
  background: #FFF;
  padding: 0 0.5rem 0 0 !important;
}

/* WIDGET BUTTONS */

div.ui-widget-content > div > button {
  padding: 0.3rem 1.1rem;
  background: #FFF;
  border: 1px solid #9DA1B3;
  border-radius: 1rem;
  font-family: 'Open Sans', 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #0A1541;
  transition: opacity 0.4s ease;
}

div.ui-widget-content > div > button:nth-child(1) {
  background: #006EEF;
  color: #FFF;
  transition: opacity 0.4s ease;
}

div.ui-widget-content > div > button:nth-child(1):hover {
  opacity: 70%;
}

div.ui-widget-content > div > button:nth-child(2):hover {
  opacity: 50%;
}

/* The "Looking for the latest user guide?" note */

#noteContainer {
  position: absolute;
  opacity: 0;
  top: -90px;
}

#noteContainer #arrow {
  position: absolute;
  width: 0px;
  height: 40px;
  background-image: url("resources/images/header-arrow.png");
  background-repeat: no-repeat;
}

#selectorNote {
  background-color: rgb(231, 236, 241);
  border-radius: 2px;
  display: inline-block;
  margin-top: 42px;
  cursor: default;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  font-family: Tahoma;
  text-align: center;
}

#selectorNote #noteTitle {
  font-size: 9pt;
  color: rgb(0, 125, 198);
  padding: 5px 13px 4px 13px;
}

/* Raine V. 15.1.2020: Formatting for a new outputclass, announcementnote */

div.announcementnote {
  text-align: center;
  border: darkgray 1px solid;
  background: #dae9ef;
}

div.announcementnote > span.notetitle {
  display: none;
}

span.notetitle {
  padding-right: 0;
}

#selectorNote #noteSubtitle {
  font-size: 8pt;
  color: rgb(97, 97, 97);
  padding: 0px 13px 8px 13px;
}

/* The submenus */

.wh_top_menu ul ul {
  background-color: #0A1541;
}

.wh_top_menu ul ul li a:hover {
  background: #3B4467;
}
.wh_top_menu ul ul li {
  border-top-color: #0A1541;
  /*width: 400px;*/
  text-transform: none; /* Raine L 10.4.2017: The text-transform parameter was capitalizing unwanted words in the titles. */
}
.wh_top_menu ul ul li.has-children:after {
}

/* Antti A. 07.12.2017: Stack the top menu items under the overlay DIV */
.wh_top_menu ul {
  z-index: 99;
}

@media only screen and (min-width: 768px) {

  .wh_top_menu {
    margin-top: 1.8rem;  
  }
  
  .wh_top_menu > ul > li {
    background-color: #3B4467;
    border-radius: 12px;
    margin: 0 0 0 0.8rem;
	transition: background-color 0.6s ease, border-radius 0.4s ease;
  }
  .wh_top_menu > ul > li[aria-expanded="true"]:hover {
    background-color: #6C728D;
	border-radius: 0.8rem 0.8rem 0 0;
  }
  .wh_top_menu ul li:not([aria-expanded]):hover {
    background-color: #6C728D !important;
  }
  
  .wh_top_menu ul ul li {
    border-top-color: #6C728D;
    background-color: #6C728D;
  }
  
  .wh_top_menu ul ul li a:hover {
    background: #3B4467;
  }
}

/*
 * ------------------------------------------------------------------
 *  
 * Link to the index.
 * 
 */
.wh_indexterms_link a span {
  display: none;
}

.wh_indexterms_link a:before {
  color: #fff;
}

.wh_indexterms_link {
  display: inline-block;
  vertical-align: middle;
}

/*
 * ------------------------------------------------------------------
 *  
 * Breadcrumb
 *  
 */
.wh_breadcrumb ol {
  color: #878787;
  font-size: 13px;
}
.wh_breadcrumb ol a {
  color: inherit;
}

/* Raine L. 13.12.2016: Display breadcrumb without background color */

.wh_breadcrumb {
  display: inherit;
}

.wh_tools {
  background-color: transparent !important;
}

/*
 * ------------------------------------------------------------------
 *  
 * Tools and navigation
 * 
 */
.wh_tools {
  background-color: #ECF2F9;
  margin: 1em 0 2em;
}

.wh_print_link,
.wh_navigation_links,
.wh_navigation_links .navnext,
.wh_navigation_links .navprev {
}

/* Antti A 16.11.2017: Hide buggy duplicate next/previous arrows */
.navnext:not(:nth-child(-n+2)),
.navprev:not(:nth-child(-n+2)) {
  display: none;
}

.wh_print_link a,
.wh_navigation_links a,
.wh_navigation_links a:hover,
.wh_navigation_links a:active,
.wh_navigation_links a:visited,
.wh_print_link a:before,
.wh_navigation_links a:before,
.wh_navigation_links a:hover:before,
.wh_navigation_links a:active:before,
.wh_navigation_links a:visited:before {
  color: #0A1541;
  text-decoration: none;
}

/*
 * ------------------------------------------------------------------
 *  
 * Tiles
 * 
 */
.wh_tile > div {
  margin: 0.5em 1em 0.5em 1em;
  padding: 1.1em;

  /* Raine V. 29.12.2017: Removed the tile background color, was previously the same as for a note */

  /* background-color: #f4f6f9; */

  height: auto; /* Raine L. 16.12.2016: Removed the fixed height definition for a main page topic title tile */
  font-weight: 400;
  /*transition: background-color 0.3s ease;*/
}

.wh_tile {
  width: 60%;
  margin: auto;
  padding: 0;
  min-height: 0;
}

.wh_tile_shortdesc {
  margin-top: 0.4em; /* Raine V. 29.12.2017: Reduced the margin from 1em to 0.4em */
  text-align: center;
  color: #0D1A2B;
  font-size: 1em;
}

/* Raine L. 16.12.2016: Background color hover effect for main page topic title tiles, transition set in the non-hover selector above */

/*
.wh_tile > div:hover {
    background-color: #fafcfe;
}
*/

/* Raine L. 16.12.2016: Remove the fade effect from topic title tiles on the main page */

/*
.wh_tile_text:after{
    background: linear-gradient(to bottom, rgba(236, 242, 249, 0), rgba(236, 242, 249, 1) 75%);
}

*/

.wh_tile_title:hover {
  opacity: 0.7; /* Raine L. 16.12.2016: Opacity changes when the main page topic title is hovered, transition set in the non-hover element below */
}

.wh_tile_title {
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-size: 1.8em; /* Raine V. 29.12.2017: Enlarged the font size to 1.8 from 1.7 */
  text-align: center;
  text-decoration: none;
  font-weight: 400;
  transition: opacity 0.3s ease;
}

/* Raine V. 21.3.2022: Spans should be displayed inline on the front page -- not on a separate row */

.wh_tile_title span {
  display: inline;
}

.wh_tile_title a {
  color: #001F88;
}
@media only screen and (max-width : 767px) {
  .wh_tile > div {
    height: auto;
  }
}

/* 
You can style some of the tiles in a special way. 
Example:
.wh_tiles *[data-id='getting_started']{
    background-color:gray;
}
*/


/*
 * ------------------------------------------------------------------
 *  
 * Search area
 * 
 */

.wh_search_input {
  display: block;
  margin: 0;
  position: relative;
  padding: 3rem 0 2rem 0;
  background-image: url(resources/images/svg/round_corner_left.svg), url(resources/images/svg/round_corner_right.svg);
  background-position: top left, top right;
  background-repeat:no-repeat;
}

#textToSearch:focus-visible {
  outline: 2px solid #0072ce;
  outline-offset: 2px;
}

#textToSearch::-webkit-search-decoration,
#textToSearch::-webkit-search-cancel-button,
#textToSearch::-webkit-search-results-button,
#textToSearch::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.wh_welcome:not(:empty) {
  font-size: 4em;
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif; /* 23.11.2016 Raine L.: Changed the body font to Open Sans */
  padding: 0 0 1.5em 0;
  text-shadow: none;
}

.wh_search_textfield {
  font-family: 'Figtree', 'Open Sans', sans-serif;
  font-size: 16px;
  border: solid 1px #CED0D9;
  padding: 0 2rem;
  position: relative;
  height: 3.5rem;
}
.wh_search_button {
  background: transparent;
  color: #767676;
  height: 3.5rem;
  font-weight: 600;
  padding-top: 7px;

  /* Raine L. 8.12.2016: Added a hover transition for the search button */

  transition: color 0.4s ease;
}
.wh_search_button:focus {
  outline: none;
}

button.wh_search_button:hover {
  color: #0A1541;
}

/*@media only screen and (max-width: 999px) {*/
/*.wh_search_input:after{*/
/*display:none;*/
/*}*/

/*}*/
@media only screen and (max-width : 768px) {
  .wh_main_page .wh_search_input,
  .wh_search_input {
    padding: 3em 0;
  }
}

#searchForm > div {
  max-width: 500px;
  width: 30%;
}

/*
 * ------------------------------------------------------------------
 *  
 * Search results page
 * 
 */

.wh_search_results_for {
  font-size: 1em;
}

.searchresult li a.foundResult {
  font-size: 1em;
}

.wh_search_results_header_docs {
  font-size: 1em;
  flex-grow: 2;
}

.searchresult .relativePath {
  display: none;
}

.wh_search_results_header {
  border-bottom: none;
}

.search-breadcrumb {
  margin-top: .5em;
}

.search-breadcrumb li a {
  color: #001F88 !important;
}

/*
 * ------------------------------------------------------------------
 *  
 * Side TOC
 * 
 */
.wh_side_toc {
  border-radius: 3px;
  padding: 1em 1em; /* Raine L. 25.11.2016: Reduced the padding */
  background-color: #f9f9f9;
  border: solid 1px #f5f5f5;
  margin-left: 12px; /* Raine L. 25.11.2016: Added more space to the left of the side toc */
}

/* Raine v. 22.12.2017: Increased the space between the side TOC expand/collapse button and the title from 4 to 8 px */

.wh_side_toc .wh-expand-btn:before {
  margin-right: 8px;
}

.wh_side_toc .active {
  color: #006EEF;
}
.wh_side_toc a,
.wh_side_toc a:visited,
.wh_side_toc a:hover {
  color: #777;
}
.wh_side_toc a:hover {
  text-decoration: underline;
}

.wh_side_toc ul li {
  margin: .7em 0;
}
.wh_side_toc > ul > li > span {
  font-size: 1.2em;
  font-weight: 600;
}

div.wh_publication_toc li.active > span.topicref {
  background: #CCD2E7;
  border-radius: 8px;
}

div.wh_publication_toc li > span.topicref {
  padding: 6px;
}

.wh_publication_toc li {
    line-height: 2em;
    margin: 0;
}

/* 27.10.2017 Antti A: Pointer cursor for side TOC expand/collapse icon */
.wh-expand-btn {
  cursor: pointer;
}

/* 02.11.2017 Antti A: Style modifications for the shortdesc tooltip shown when hovering over a topic in either the breadcrumb or the side TOC */
.wh_breadcrumb .topicref .wh-tooltip,
.wh_side_toc .topicref .wh-tooltip {
  display: flex;
  align-items: baseline;
  visibility: hidden;
  background-color: #444;
  color: #fff;
  font-weight: normal;
  font-size: 15px;
  text-align: left;
  line-height: 1em;
  padding: 12px;
  margin: 8px;
  border-radius: 0;
  min-width: 15em;
  min-height: 2em;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: .5s opacity 1s;
}

/*
 * ------------------------------------------------------------------
 *
 * Topic TOC
 * 
 */

/* Raine V. 7.5.2018: Modifications to the current node style */

#wh_topic_toc a.current_node {
  text-decoration: none;
}

/* Raine V. 10.1.2020: Forcing wintitle elements to be bolded in wh_topic_toc current nodes */

div.wh_topic_toc ul li a.current_node span.wintitle {
  font-weight: 700;
}

/*
 * ------------------------------------------------------------------
 *
 * Child links section
 * 
 */

/* 
.wh_child_links {
    border-radius: 3px;
    padding: 1em 1em;
    background-color: #f9f9f9;
    border: solid 1px #f5f5f5;
    margin-left: 12px;
    margin-top: 40px;
}
 */

.wh_child_links ul li {
  margin: .5em 0;
}

.related-links-title {
  margin: 1em 0 1em 0;
  font-size: 1.3em;
  font-weight: bold;
  font-style: normal;
}

/*
 * ------------------------------------------------------------------
 *  
 * Topic content
 * 
 */

/* Antti A. 22.11.2017: Removed min-height to avoid unnecessary empty space between topic content and child links section */

.wh_topic_content,
.wh_content_area {
  color: #000000;
  /* min-height: 400px; */
}
.wh_main_page .wh_content_area {
  margin: 3.5rem auto 8rem auto;
  min-height: unset;
}
.wh_topic_content .title.topictitle1,
p.main-heading-example {
  font-family: 'Figtree', 'Open Sans', sans-serif;
  color: #0A1541;
  font-size: 34px;
  font-weight: 400;
  margin-bottom: 1em;
}

/* Raine V. 19.10.2017: Outputclass for multiple columns */

.twocolumns {
  column-count: 2;
  column-gap: 2em;
}


/* Antti A. 30.05.2017: Retain the title font weight for wintitle elements appearing in titles */

.title .wintitle {
  font-weight: inherit;
}

.wh_topic_content .related-links {
  background-color: #F8F8F8;
  padding: 1.5em;
  margin-top: 1.5em;
}
.wh_topic_content .related-links strong {
  font-weight: 500;
}
.wh_topic_content .related-links .olchildlinks,
.wh_topic_content .related-links .ullinks,
.wh_topic_content .related-links .relinfo {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wh_topic_content .related-links a,
.wh_topic_content .related-links a:visited {
  color: #5185cb;
  padding-bottom: .3em;
  display: inline-block;
}
.wh_topic_content .related-links li {
  color: #757575;
  font-size: .9em;
}

h2.title.sectiontitle:not(.expander),
h2.title.topictitle2,
.title.topictitle3 {
  font-family: 'Figtree', 'Open Sans', sans-serif;
  margin: 2em 0 1em 0;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
}

p.section-heading-example {
  font-family: 'Figtree', 'Open Sans', sans-serif;
  margin: 2em 0 1em 0;
  font-size: 1.3em;
  font-weight: 600;
  font-style: normal;
}

h2.title.sectiontitle.expander {
  margin: 1em 0 1em 0; /* Raine L. 30.11.2016: Added a top and bottom margin for .sectiontitle.expander */
}

ul.ul,
ol.ol {
  margin-top: 5px; /* Raine L. 1.12.2016: Ul lists inside topics now have a small top margin */
  margin-bottom: 5px; /* Raine L. 7.12.2016: Ul lists inside topics now have a small bottom margin */
}

/* Raine L. 1.12.2016: Override bootstrap settings for user input */

kbd {
  padding: 0 2px;
  font-size: 90%;
  color: inherit;
  background-color: inherit;
  border-radius: inherit;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
}

/* Raine L. 2.12.2016: Make two-row topic titles align better -- now the second row is aligned with the first row, not the w�th expand_btn */

.wh_expand_btn {
  cursor: pointer;
  margin-right: 0.1em;
}

/* Raine L. 1.12.2016: Varnames should be orange */

var.keyword.varname {
  color: #006EEF;
}

/* Raine L. 2.12.2016: The "Info" text shoud not be shown for task info sections with no text */

span.itemgroup.info.title.nolabel {
  display: none;
}

/* Raine L. 7.12.2016: Set the max height of codeblock windows to 400 pixels */

pre.pre.codeblock {
  max-height: 400px;
  border-radius: 0;
  font-family: "Jetbrains Mono", monospace !important;
  font-weight: 300 !important;
  font-size: 12px;
}

span.ph.tt, code, var.keyword.varname {
  font-family: "Jetbrains Mono", monospace !important;
  font-weight: 300 !important;
  font-size: 12px;
}

/* Terhi T. 2.4.2020: wintitle elements bolded. Decision made in the Doc team. */

.wintitle,
.uicontrol {
  font-weight: 700;
}

/* Button output class */

.uicontrol.button {
  display: inline-block;
  background-color: #e1e1e1;
  border: 1px solid #adacad;
  padding-left: 4px;
  padding-right: 4px;
  font-weight: normal;
}

/* Raine L. 16.12.2016: Do not show short descriptions in topic body content */

div.wh_topic_content.body p.shortdesc {
  display: none;
}

/*
 * ------------------------------------------------------------------
 *  
 * Images
 * 
 */

/* Raine L. 25.11.2016 Image width changed to 100% to stop overflow */
/* Antti A. 30.08.2017: Added image rendering directives for block-level images and fancybox images that have been scaled down to make them appear sharper */

.fig .image {
  max-width: 100%;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

.fancybox-image {
  image-rendering: -webkit-optimize-contrast;
}

.figcap {
  padding-top: 4px;
  display: block;
  font-style: italic;
}

/* Top margin for images in step item groups such as step results */
.itemgroup .fig {
  margin-top: 10px;
}

/* Raine V. 18 Oct 2021: Added a new class for images where border-radius must be 0. */

img.image.minicon {
  border-radius: 0 !important;
}

/*
 * ------------------------------------------------------------------
 *  
 * Search results.
 * 
 */

.searchresult {
  list-style: none;
}

.searchresult li {
  padding: .5em;
}

.searchresult li a,
.wh_search_expression {
  color: #006EEF;
}

.searchresult .shortdesclink {
  margin: .3em .5em 0;
}

.wh_search_expression {
  font-weight: bold;
}

/*
 * ------------------------------------------------------------------
 *  
 * Index terms.
 * 
 */
.wh_index_terms li.first_letter {
  color: #0A1541;
}
.wh_index_terms #indexList {
  padding: 0;
}

li.wh_term_group {
  margin-top: 20px;
}

span.wh_first_letter {
  font-weight: bold;
}

/* Remove extra left margin and left padding for index terms embedded within another index term */
.wh_term .wh_term {
  padding-left: 0;
  margin-left: 0;
}

/*
 * ------------------------------------------------------------------
 *  
 * Tree TOC for the main page.
 * 
 */
.wh_main_page_toc {
}


.wh_main_page_toc .expanded,
.wh_main_page_toc .wh_main_page_toc_accordion_header:hover,
.wh_main_page_toc > .wh_main_page_toc_entry:hover,
.wh_main_page_toc_accordion_entries {
  background-color: #F2F8FF;
}

/**
 *
 * Styles used for RTL pages
 *
 */

html[dir = 'rtl'] .wh_top_menu ul li:hover > ul {
  max-width: 270px;
}

/* responsive style definitions for embedded YouTube videos */

.expander + .content {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.embedded-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* scalable VIDEO element */
video {
  max-width: 100%;
}

.embed-responsive .embed-responsive-item {
  width: inherit;
}

/* 27.08.2018 Antti A.: container DIV for VIDEO elements */
.embed-responsive {
  background-color: transparent;
}

/* 21.11.2016 Antti A.: play icon for the .expander class */

.expander {
  cursor: pointer;
  padding-left: 30px !important;
  background-position: 3px;
  background-repeat: no-repeat;
  background-color: transparent !important;
}

span.ph.cmd.expander {
  padding-left: 0 !important;
}

.expander.expanded {
  color: #f37c1f;
  background-image: url("resources/images/play_expanded.png");
}

.expander.collapsed {
  color: #006EEF;
  background-image: url("resources/images/play_collapsed.png");
}

/* 25.10.2017 Antti A.: Hide native expand/collapse arrows for .expander class */
.expander .wh_expand_btn {
  display: none;
}

/* 16.01.2018 Antti A: Collapse/expand style definitions for step as the expander and substeps as the collapsible content */
/* The definitions that have been commented out add padding and a faint background color for the expander step and the collapsible substeps */
.expander.cmd.expanded,
.expander.cmd.collapsed {
  cursor: pointer;
  background-image: none;
  color: inherit !important;
  /* background-color: #f7f7f7 !important; */
  /* padding: 10px !important; */
  /* display: block; */
  /* padding-left: 0 !important; */
}

.expander.cmd + .content.substeps {
  position: inherit;
  width: inherit;
  height: inherit;
  margin-top: inherit;
  padding-bottom: inherit;
  /* margin-top: 0; */
  /* padding-bottom: 5px; */
  /* padding-top: 1px; */
  /* background-color: #f7f7f7; */
}

/* Expand/collapse icon */

.expander.cmd:after {
  content: "\e258";
  color: #006EEF;
  font-family: "Glyphicons Halflings", serif;
  font-style: normal;
  font-size: 13px;
  font-weight: bolder;
  display: inline-block;
  opacity: 0.5;
  transition: opacity .3s;
  padding-left: 10px;
}

.expander.cmd.expanded:after {
  content: "\e259";
}

.expander.cmd:hover:after {
  opacity: 1;
  transition: opacity .3s;
}

/*
 * ------------------------------------------------------------------
 *  
 * Tips and notes
 * 
 */

div.note {
  background-image: url(resources/images/svg/note.svg);
  background-repeat: no-repeat;
  background-position: 11px center;
  background-size: 20px;
}

div.note.important {
  background-image: url(resources/images/svg/important.svg);
}

div.note.tip {
  background-image: url(resources/images/svg/tip.svg);
}

div.note.warning {
  background-image: url(resources/images/svg/warning.svg);
}

.tiptitle,
div[class = "tip"] > h3 {
  background-image: none !important;
  background-repeat: no-repeat;
  padding: 0;
  font-weight: bold;
}

.warningtitle {
  font-weight: 700;
}

.notetitle,
div[class = "note"] > h3 {
  background-image: none !important;
  background-repeat: no-repeat;
  padding: 0;
}

.importanttitle {
  padding: 0;
  background-image: none !important;
  font-weight: bold;
}

.note,
div.example {
  margin-top: 1rem;
  margin-bottom: 1rem;
  background: #E7F0EF;
  padding: 1.6rem;
  font-size: 95%;
  border-radius: 1rem;
}

div.example .title.sectiontitle,
div.example .example.sectiontitle {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/*
 * ------------------------------------------------------------------
 *  
 * Tables
 * 
 */

table.table,
table.choicetable {
  border-color: #CCC !important;
  border: solid 1px;
}

table[border = "1"].table,
.table.frame-all {
  border: solid 1px;
}

table[frame = "hsides"].choicetable {
  border-top: solid 1px;
  border-bottom: solid 1px;
}

.choicetable .stentry {
  border-right: 0;
  border-bottom: 1px solid;
  border-color: inherit;
}

table[frame = "void"].table,
table[frame = "void"].table > tbody > tr > td {
  border: none !important;
}

.ph.cmd + .choicetable {
  margin-top: 10px;
}

/* color coding for checkmarks in tables where @outputclass is "comparison" */
.comparison .entry.checkmark {
  color: #23e223;
  border: solid 1px;
  border-color: inherit;
}

/* color coding for x marks in tables where @outputclass is "comparison" */
.comparison .entry.xmark {
  color: #fb0000;
  border: solid 1px;
  border-color: inherit;
}

table.basic {
  padding-left: 16px;
}

table.basic .entry {
  padding: 5px;
  border: 1px solid;
}

.entry.compatible,
.entry.yes {
  background-color: rgb(182, 230, 158);
}

.entry.notcompatible,
.entry.no {
  background-color: rgb(236, 236, 236);
}

.headerrow .entry.empty {
  border: none !important;
  background-color: transparent;
}

thead.thead,
.headerrow .entry,
div.tablenoborder thead,
table.simpletable.choicetable thead {
  font-weight: 600;
  background-color: #E5F0FD;
}

table.loose {
  margin-top: 25px;
  margin-bottom: 25px;
}

table.loose td {
  padding: 5px;
}

/* Raine L. 1.12.2016: List items should not have top margin inside table cells if there's nothing else in the cell */

td > ul.ul {
  margin: 0 0 2px 0;
}

/* Raine L. 13.6.2017: Using the 'fineprint' output class for a table makes text a bit smaller */

table.fineprint {
  font-size: 0.84em;
}

/* Antti A 26.10.2017: No scrollbar for overflowing tables */
.tablenoborder,
.simpletable-container,
.table-container {
  overflow-x: visible;
}

div.wh_topic_toc ul li a.current_node span.wintitle {
  font-weight: 700;
}

table td.entry.colsep-0.rowsep-0 {
  border: 0;
}

.rowsep-1 {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.colsep-1 {
  border-left: 1px solid;
  border-right: 1px solid;
}

/* Raine V. 7.9.2018: Captions that have no content should be hidden */

table caption:empty {
  display: none;
}

/* Raine V. 28.10.2021: Formatting for cells, where text should be bolded */

td.headercell {
  font-weight: 700;
}

/* 5 July 2024: Added a new class for creating tables that do not use the whole page width */

table.narrow-table {
  max-width: 65%;
}

table.narrow-table-no-border {
  max-width: 65%;
  border-color: transparent !important;
}

@media only screen and (max-width : 1439px) {
  table.narrow-table {
    max-width: 75%;
  }
}

@media only screen and (max-width : 1079px) {
  table.narrow-table {
    max-width: 95%;
  }
}

/*
 * ------------------------------------------------------------------
 *  
 * Tasks
 *  
 */

.itemgroup.stepresult.title,
.itemgroup.info.title,
.itemgroup.note.title,
.itemgroup.stepxmp.title,
.example.title {
  font-weight: bold;
  display: inline-block;
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 0;
}

/* Antti A 24.03.2017: Top margin for separating adjacent itemgroups */

.itemgroup + .itemgroup {
  margin-top: 10px;
}

.stepexpand,
.step {
  margin-top: 1em;
  margin-bottom: 1em;
}

ul.ul.choices > li > div.ol {
  margin: 5px 0;
}

.ph.cmd + .itemgroup.info {
  margin-top: 10px;
}

/* Antti A 01.11.2017: No additional formatting for ">" */
abbr[title = 'and then'] {
  cursor: default;
  border-bottom: none;
  text-decoration: none;
}

/*
 * ------------------------------------------------------------------
 *  
 * Navbar Button
 *  
 */

button.navbar-toggle {
  border-color: #fff;
  background-color: rgba(221, 221, 221, 0);
  padding: 6px 7px;
  margin-top: 15px;
}

span.icon-bar {
  background-color: #fff !important;
  width: 20px !important;
}

/*
 * ------------------------------------------------------------------
 *  
 * Keyboard keys
 *  
 */

.keyboard {
  border: 1px solid #CED0D9;
  -webkit-border-radius: 0.4em;
  border-radius: 0.4em;
  -moz-box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.1);
  box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.1);
  background-color: #F3F3F6;
  background-image: linear-gradient(to bottom, #eee, #F3F3F6, #eee);
  padding: 0.2em 0.4em;
  font-family: inherit;
  font-size: 80%;
  margin: 0 2px;
}

/*
 * ------------------------------------------------------------------
 *  
 * Example headings (in the "About This User Guide")
 *  
 */

p.main-heading-example,
p.section-heading-example {
  margin: 0 !important;
}

/*
 * ------------------------------------------------------------------
 *  
 * Footer
 *  
 */

.wh_footer {
  text-align: center;
  padding: 2rem;
  position: relative;
  bottom: 2rem;
  width: 100%;
  color: #ffffff;
  background: none #0A1541;
  margin-top: 2em;  
}

.wh_footer a {
  color: #E5E9F3;
  transition: all 0.2s ease;
}

.wh_footer a:hover {
  color: #66A8F5;
  transition: all 0.2s ease;
}

#footer-row {
  flex-wrap: nowrap;
  align-items: center;
  display: flex;
  flex: 0 0 100%;
  justify-content: center;
}

#go2top {
  background-color: #0A1541;
  padding: 0.5rem 1.32rem;
  font-weight: 300;
  transition: all 0.2s ease;
  border-radius: 1.8rem;
}

#go2top:hover {
  background-color: #0069E0;
  transition: all 0.2s ease;
}

/* Raine V. 11.1.2022: Two small adjustments to the mobile layout */

@media only screen and (max-width : 768px) {

  #footer-links > #links {
	font-size: 0.9rem !important;
  }

  #copyright {
    font-size: 0.9rem !important;
	text-align: left;
  }
}

#footer-text {
  min-width: 200px;
  display: flex;
  font-size: 1.2rem;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
}

#footer-links {
  min-width:200px;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
}

#footer-links > #links {
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

#footer-text #copyright {
  font-family: 'Figtree';
  min-height: 1px;
  margin: 0;
  text-align: left;
  flex-shrink: 0;
}

#footer-links a {
  transition: opacity 0.4s ease;
}

#footer-links a:hover {
  opacity: 0.5;
}

.footer > .container {
  padding: 0;
}

.footer-divider {
  background-color: #6C728D;
  width: 0.1rem;
  height: 8rem;
  margin: 1rem 2rem;
}

/*
 * ------------------------------------------------------------------
 *  
 * Search results
 *  
 */

/* 03.01.2017 Antti A: Hide the "Similar Results..." link as it only lists the same page as a related search result. The link is shown if a topic is referenced more than once in the ditamap. */
.showSimilarPages {
  display: none;
}

/*
 * ------------------------------------------------------------------
 *  
 * Toggle search hit highlights, previous and next icons
 *  
 */

.wh_hide_highlight {
  color: #006EEF;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

.wh_hide_highlight:hover {
  opacity: .6;
}

.wh_hide_highlight.hl-close {
  color: #838486;
}

.wh_hide_highlight:focus-visible {
  outline: 2px solid black;
  border-radius: 2px;
}

.link.glyphicon:hover {
  opacity: .6;
}

.link.glyphicon {
  transition: opacity 0.4s ease;
}

.highlight {
  color: inherit;
}

webhelp_expand_collapse_sections {
  color: #001F88;
}

/* 16.5.2018 Antti A: A note about JavaScript requirement can be displayed to the user. */
noscript {
  visibility: visible;
  display: block;
  background: #006EEF;
  color: white;
  text-align: center;
  padding: 3px;
}

/* 18.05.2018 Antti A: Optional welcome message on the front page */
#welcome-message {
  text-align: center;
  display: block;
}

/* Raine V. 21.4.2021: Overriding the overlay rule present in C:\DITA-OT3.2\plugins\com.oxygenxml.webhelp.responsive\oxygen-webhelp\lib\jquery-ui\jquery-ui.min.css
as it causes a gray bar to be shown when the language selector is opened. */

.ui-widget-overlay {
  background: #aaaaaa !important;
}

/* Raine V. 11.1.2022: Overriding a rule that breaks the menu in mobile layouts. */

@media only screen and (max-width : 768px) {
  .wh_top_menu ul li.active > ul {
    right: auto !important;
  }
}

/* Raine V. 24.1.2022: Added a new outputclass for emphasis. */

.emphasis {
  font-weight: bold;
  color: #ff2116;
}

/* Raine V. 23.9.2022: Added a new outputclass for emphasizing good stuff. */

.emphasis-new {
  font-weight: bold;
  color: #00B294;
}

/* Raine V. 23.9.2022: Added a new outputclass for emphasis but without the red color. */

.emphasis-nocolor {
  font-weight: bold;
}



/* Raine V. 28.10.2022: Added a new outputclass for table clarifications. */

.table-clarification {
  font-style: italic;
  font-size: 0.9em;
  margin-top: -0.4rem;
}

/* Raine V. 8.12.2022: Added a new outputclass to emphasize important remarks. */

.section.important-container {
  background-color: #E7F0EF;
  border: 2px #9EC3BE solid;
  padding: 0.1em 2em 0.3em 1.3em;
  font-size: 0.9em;
  border-radius: 1rem;
}

.section.important-container > ul {
  padding-left: 2.5em;
}

.section.important-container > ul > li {
  padding: 0.3em;
}

.sectiondiv.important-container {
  background-color: #E7F0EF;
  border: 2px #9EC3BE solid;
  padding: 0.1em 2em 0.3em 1.3em;
  font-size: 0.9em;
}

.sectiondiv.important-container > ul {
  padding-left: 2.5em;
}

.sectiondiv.important-container > ul > li {
  padding: 0.3em;
}

/* Raine V. 20.1.2023: Added formatting for a feedback button. 
The button can be added in Oxygen as a feedback fragment in the 
settings for the transformation scenario.

Added the HTML and JS content here for safekeeping. */

/*  HTML and JS content for the feedback fragment:

<button id="feedback-button" class="feedback" style="vertical-align:middle">
	<span>
		<a id="feedback-link" href="User guide feedback">Send feedback</a>
	</span>
</button>

<script>$('#feedback-link').attr('href', 'mailto:documentation@m-files.com?subject=User guide feedback: "' + $('h1').eq(0).text() + '"');</script>

*/

.feedback {
  font-size: 1.4rem;
  margin-top: 3rem;
  margin-bottom: 2.5rem;
  display: inline-block;
  border-radius: 10px;
  background-color: #006EEF;
  border: none;
  color: #fff;
  text-align: center;
  padding: 0.7rem;
  width: 13em;
  transition: all 0.6s;
  cursor: pointer;
}

.feedback span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.6s;
}

.feedback span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.6s;
}

.feedback:hover span {
  padding-right: 18px;
}

.feedback:hover span:after {
  opacity: 1;
  right: 0;
}

.feedback a {
  color: #fff;
}

/* Don't display the feedback button on the main page */
.wh_main_page #feedback-button {
  display: none;
}

/* Raine V. 24.1.2023: Added a new output class for a section targeted for admins. */

.admin-aid > h2, .admin-aid > h3 {
  background-image: url("resources/images/svg/admin_aid.svg");
  background-position: 25px;
  background-repeat: no-repeat;
}

.admin-aid > h3 {
  font-size: 24px;
  font-weight: 400;
  font-family: 'Figtree', 'Open Sans', sans-serif;
}

.admin-aid .wh_expand_btn {
    margin-right: 0.6em;
}

/* Raine V.  26.1.2023: Added CSS rules for the the What's New section */

/* Don't show the What's New tile on the front page */

div.wh_tile[data-id = "what_s_new"] > div {
  display: none;
}

/* Formatting for the What's New link in the top menu */

nav.wh_top_menu > ul > li > span[data-id = "what_s_new"] {
  display: block;
  background-color: #ffffff;
  border-radius: 15px;
  transition: all .2s;
}

nav.wh_top_menu > ul > li > span[data-id = "what_s_new"]:hover {
  backface-visibility: hidden;
  margin-right: 2px;
  padding: 1px;
}

nav.wh_top_menu > ul > li > span[data-id = "what_s_new"] > span > a {
  color: #006EEF;
}

/* Don't show the submenu for the What's New link */

nav.wh_top_menu > ul > li > ul[aria-labelledby ^= "what_s_new"] {
  display: none;
}

/* Formatting for the release title ("Month 'YY") and subtitle
(for example, "User guide updates") */

.release_title {
  font-size: 2rem !important;
  color: #026491;
  margin: 8rem 0 5rem 0;
}

.release_subtitle {
  font-size: 1.3rem !important;
  margin: 3rem 0 0.3rem 0;
}

/* Hide the "In this section" container from the What's New page */

body#what_s_new div.wh_child_links {
  display: none;
}