* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  height: 100%;
  min-width: 360px;
  margin: 0;
  padding: 0;
  font-family: Open Sans, Roboto-Light, sans-serif;
  color: #333333;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a,
input,
button,
textarea {
  font-family: Open Sans, Roboto-Light, sans-serif;
  color: #333333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  outline: 0;
}

img {
  max-width: 100%;
}

b,
strong {
  font-weight: 600;
  color: #333333;
}

pre,
code,
box,
box-inline-block,
box-inline {
  white-space: pre-wrap;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  background-color: #e9ecf0;
  font-size: 14px;
  font-family: "Inconsolata", monospace;
  line-height: 130%;
}

box,
pre {
  border: 1px solid #cfd2d5;
  display: block;
  padding: 2px 6px;
}

box-inline-block {
  border: 1px solid #cfd2d5;
  display: inline-block;
  padding: 2px 6px;
}

box-inline,
code {
  display: inline;
  padding: 2px;
}

.caption {
  font-size: 12px;
  line-height: 1.2;
  padding: 0 8px 12px 8px;
}

.content .main p:has(+ .caption),
.imageWrapper:has(+ .caption) img {
  margin-bottom: 0;
  padding-bottom: 0;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-family: Open Sans, Roboto-Light, sans-serif;
  color: #333333;
}

::-moz-placeholder {
  /* Firefox 19+ */
  font-family: Open Sans, Roboto-Light, sans-serif;
  color: #333333;
}

:-ms-input-placeholder {
  /* IE 10+ */
  font-family: Open Sans, Roboto-Light, sans-serif;
  color: #333333;
}

:-moz-placeholder {
  /* Firefox 18- */
  font-family: Open Sans, Roboto-Light, sans-serif;
  color: #333333;
}

.wrapper {
  margin: 0 auto;
  max-width: 1400px;
  width: auto;
}

.wrapper:hover > .card {
  -webkit-box-shadow: 0 1px 34px 1px rgba(0, 0, 0, 0);
          box-shadow: 0 1px 34px 1px rgba(0, 0, 0, 0);
  border: 1px solid rgba(90, 90, 90, 0.1);
}

.wrapper:hover > .card:hover {
  -webkit-box-shadow: 0 1px 34px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 34px 1px rgba(0, 0, 0, 0.1);
  border: 1px solid transparent;
}

body > h1 {
  padding: 50px 0 40px 0;
  text-align: center;
  margin: 0 auto;
}

button:hover {
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
  -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.scrollToTop {
  width: 45px;
  height: 45px;
  padding: 10px;
  text-align: center;
  position: fixed;
  right: 10px;
  bottom: 15px;
  display: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5Mi4wMDIgNDkyLjAwMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzQxYTlkNSIgZD0iTTQ4NC4xMzYsMzI4LjQ3M0wyNjQuOTg4LDEwOS4zMjljLTUuMDY0LTUuMDY0LTExLjgxNi03Ljg0NC0xOS4xNzItNy44NDRjLTcuMjA4LDAtMTMuOTY0LDIuNzgtMTkuMDIsNy44NDQgTDcuODUyLDMyOC4yNjVDMi43ODgsMzMzLjMzMywwLDM0MC4wODksMCwzNDcuMjk3YzAsNy4yMDgsMi43ODQsMTMuOTY4LDcuODUyLDE5LjAzMmwxNi4xMjQsMTYuMTI0IGM1LjA2NCw1LjA2NCwxMS44MjQsNy44NiwxOS4wMzIsNy44NnMxMy45NjQtMi43OTYsMTkuMDMyLTcuODZsMTgzLjg1Mi0xODMuODUybDE4NC4wNTYsMTg0LjA2NCBjNS4wNjQsNS4wNiwxMS44Miw3Ljg1MiwxOS4wMzIsNy44NTJjNy4yMDgsMCwxMy45Ni0yLjc5MiwxOS4wMjgtNy44NTJsMTYuMTI4LTE2LjEzMiBDNDk0LjYyNCwzNTYuMDQxLDQ5NC42MjQsMzM4Ljk2NSw0ODQuMTM2LDMyOC40NzN6Ii8+PC9zdmc+Cg==");
  background-position: center center;
  background-size: 22px 25px;
  background-repeat: no-repeat;
  background-color: rgba(119, 119, 119, 0.1);
  border: 1px solid transparent;
  border-radius: 6px;
}

.scrollToTop:hover {
  background-color: rgba(119, 119, 119, 0.2);
}

#percentageRead {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background-color: #41a9d5;
  z-index: 1000;
  -webkit-transition: width 0.4s;
  transition: width 0.4s;
  will-change: width;
}

.sidebar::-webkit-scrollbar,
#jumplist ul::-webkit-scrollbar,
#licensePopup::-webkit-scrollbar {
  background-color: #f3f3f4;
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb,
#jumplist ul::-webkit-scrollbar-thumb,
#licensePopup::-webkit-scrollbar-thumb {
  background-color: #ddd;
  outline: 0;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 300;
}

.modalContent {
  display: none;
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  z-index: 400;
  margin: 0 auto;
}

.card {
  vertical-align: top;
  display: inline-block;
  -webkit-box-shadow: 1px 1px 34px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 1px 1px 34px 1px rgba(0, 0, 0, 0.1);
  background-color: white;
  padding: 20px;
  border: 1px solid transparent;
  -webkit-transition: -webkit-box-shadow 0.2s ease;
  transition: -webkit-box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
  will-change: box-shadow;
}

.card input,
.card select,
.card textarea {
  background-color: #f2f2f2;
}

.gettingStartedPage .modalContent {
  width: 1024px;
  top: 40px;
  max-width: 90%;
}

.gettingStartedPage .modalContent #video {
  padding: 0;
}

video {
  max-width: 90%;
}

#video {
  max-width: 90% !important;
  padding: 30px;
  margin: 0 auto;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.displayinline {
  display: inline;
}

.displayinlineblock {
  display: inline-block;
}

.topbar {
  position: fixed;
  z-index: 600;
  background-color: #41a9d5;
  height: 50px;
  width: 100%;
  -webkit-box-shadow: 0 2px 6px 0 #ccc;
          box-shadow: 0 2px 6px 0 #ccc;
}

.topbar .wrapper {
  padding: 0 10px 0 10px;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.topbar .wrapper .logo {
  padding-top: calc((50px/ 2) - 16px);
}

.navigation {
  list-style: none;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 20px;
  width: 100%;
  height: 100%;
  -webkit-padding-start: 0;
}

.navigation a {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  color: white;
  padding: 0 16px;
  text-decoration: none;
  white-space: nowrap;
}

.navigation #versionSwitchContainer {
  margin-left: auto;
}

.navigation #versionSwitch {
  cursor: pointer;
  background: #41a9d5;
  color: white;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.navigation .dropbtn {
  width: 94px;
  height: 32px;
  background-color: #41a9d5;
  background-image: url(../images/caret-down.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: right 6px center;
  color: white;
  font-size: 16px;
  border: 1px solid white;
  border-radius: 3px;
  text-align: left;
}

.navigation .dropbtn:hover {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.navigation .versionSwitchDropDown {
  position: relative;
  display: inline-block;
  border: 1px solid #41a9d5;
}

.navigation .dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 94px;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  border-right: 1px solid white;
  z-index: 1;
}

.navigation .dropdown-content a {
  background-color: #41a9d5;
  color: #ffffff;
  padding-left: 6px;
  height: 32px;
  font-size: 1rem;
  line-height: 32px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.navigation .dropdown-content a:hover {
  background-color: #ffffff;
  color: #41a9d5;
  border-left: 1px solid #41a9d5;
  border-bottom: 1px solid #41a9d5;
  border-right: 1px solid #41a9d5;
}

.navigation .versionSwitchDropDown:hover .dropdown-content {
  display: block;
}

.navigation .searchContainer {
  width: 180px;
  /*Algolia search result changes start*/
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
  /*Algolia search result changes end*/
}

.navigation .searchContainer a:hover {
  background-color: transparent;
  text-decoration: underline;
}

.navigation .searchContainer ::-webkit-input-placeholder {
  /* Edge */
  color: #bbbbbb;
}

.navigation .searchContainer :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #bbbbbb;
}

.navigation .searchContainer ::-ms-input-placeholder {
  color: #bbbbbb;
}

.navigation .searchContainer ::placeholder {
  color: #bbbbbb;
}

.navigation .searchContainer .ds-dataset-1 {
  max-height: calc(100vh - 50px);
  overflow-y: auto;
  -webkit-box-shadow: 0px 4px 6px rgba(80, 80, 80, 0.2), -6px 6px 8px rgba(80, 80, 80, 0.2), 6px 6px 8px rgba(80, 80, 80, 0.2);
          box-shadow: 0px 4px 6px rgba(80, 80, 80, 0.2), -6px 6px 8px rgba(80, 80, 80, 0.2), 6px 6px 8px rgba(80, 80, 80, 0.2);
}

.navigation .searchContainer .ds-dataset-1::-webkit-scrollbar {
  width: 8px;
}

.navigation .searchContainer .ds-dataset-1::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.navigation .searchContainer .ds-dataset-1::-webkit-scrollbar-thumb {
  background: rgba(51, 51, 51, 0.2);
}

.navigation .searchContainer .ds-dataset-1::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 51, 51, 0.3);
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion--content {
  width: 100%;
  padding: 4px 2px;
  float: none;
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
  padding: 0;
  float: none;
}

.navigation .searchContainer a {
  line-height: 12px;
  height: auto;
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
  display: none;
  width: auto;
  text-align: left;
  padding-left: 0;
  font-size: 12px;
  font-weight: normal;
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
  float: none;
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight {
  color: inherit;
  background: inherit;
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before,
.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion--content:before {
  display: none;
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-footer {
  height: 10px;
  width: 90px;
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion--title {
  line-height: 16px;
  font-weight: normal;
  text-decoration: none;
  margin: 0;
}

.navigation .searchContainer .algolia-autocomplete
.algolia-docsearch-suggestion--category-header
.algolia-docsearch-suggestion--category-header-lvl0
.algolia-docsearch-suggestion--highlight,
.navigation .searchContainer .algolia-autocomplete
.algolia-docsearch-suggestion--category-header
.algolia-docsearch-suggestion--category-header-lvl1
.algolia-docsearch-suggestion--highlight,
.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
  color: #4d5156;
  background: inherit;
  font-weight: bold;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header,
.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
  font-weight: normal;
  color: #41a9d5;
  font-size: 16px;
  line-height: 18px;
  text-decoration: none;
}

.navigation .searchContainer .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
  text-decoration: underline;
  border: none;
  padding: 2px;
}

.navigation .searchContainer .algolia-autocomplete
.ds-dropdown-menu
.ds-suggestion.ds-cursor
.algolia-docsearch-suggestion:not(.suggestion-layout-simple)
.algolia-docsearch-suggestion--content,
.navigation .searchContainer .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--category-header {
  background-color: rgba(65, 169, 213, 0.1);
}

.navigation .searchInput,
.navigation .searchInput:focus,
.navigation .searchbox__input {
  border: 0;
  outline: 0;
  border-radius: 0;
  height: 32px;
  padding: 0 4px;
  width: 100%;
  background-color: #ffffff;
}

.navigation a:hover {
  background-color: #3d9ec7;
}

.navigation li {
  padding-bottom: 0;
}

/*more Algolia Search */
:root {
  --docsearch-primary-color: #41a9d5;
  --docsearch-logo-color: #41a9d5;
  --docsearch-text-color: #1c1e21;
  --docsearch-spacing: 6px;
  --docsearch-icon-stroke-width: 1.4;
  --docsearch-highlight-color: var(--docsearch-primary-color);
  --docsearch-muted-color: #969faf;
  --docsearch-container-background: rgba(101, 108, 133, 0.4);
  --docsearch-modal-width: 560px;
  --docsearch-modal-height: 600px;
  --docsearch-modal-background: #f5f6f7;
  --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.2), 0 3px 8px 0 #555a64;
  --docsearch-searchbox-height: 36px;
  --docsearch-searchbox-background: #3d9ec7;
  --docsearch-searchbox-focus-background: #fff;
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
  --docsearch-hit-height: 40px;
  --docsearch-hit-color: #444950;
  --docsearch-hit-active-color: #fff;
  --docsearch-hit-background: #fff;
  --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
  --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
  --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
  --docsearch-footer-height: 20px;
  --docsearch-footer-background: #fff;
  --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
}

.DocSearch-Dropdown {
  max-height: calc(100vh - (50px + 70px + 16px));
}

.DocSearch-Button-Keys {
  display: none;
}

.DocSearch-Button,
.DocSearch-Button:focus {
  border-radius: 3px;
  border: 1px solid white;
  background: #41a9d5;
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 94px;
  height: 32px;
  color: white;
  outline: none;
}

.DocSearch-Button:hover,
.DocSearch-Button:active {
  background: #3d9ec7;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: white;
  outline: none;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.DocSearch-Hit-source {
  line-height: 30px;
  padding: 4px 4px 0;
}

.DocSearch-Logo {
  -webkit-transform: scale(0.6) !important;
          transform: scale(0.6) !important;
}

.DocSearch-Input {
  font-size: inherit;
}

.DocSearch-Button-Container .DocSearch-Search-Icon {
  height: 16px;
  width: 16px;
}

.DocSearch-Button-Container .DocSearch-Search-Icon path {
  stroke: #ffffff;
}

.DocSearch-Footer {
  overflow: hidden;
}

.DocSearch-Commands-Key,
.DocSearch-Label {
  display: none;
}

.DocSearch-Hit-icon svg {
  height: 16px;
  width: 16px;
}

@media (max-width: 750px) {
  .DocSearch-Container {
    position: fixed;
  }
  .DocSearch-Modal {
    margin-top: 50px;
  }
  .DocSearch-Button-Keys {
    display: none;
  }
  .DocSearch-Button-Placeholder {
    display: inline;
  }
}

.navigation.showMobile {
  width: 160px;
  right: -4px;
}

.navigation.showMobile li,
.navigation.showMobile li a {
  width: 100%;
  padding: 0 6px;
}

.navigation.showMobile a {
  height: 40px;
  line-height: 40px;
}

.navigation.showMobile #versionSwitchContainer {
  -webkit-box-ordinal-group: 101;
      -ms-flex-order: 100;
          order: 100;
  margin-top: 12px;
}

.navigation.showMobile #versionSwitchContainer a {
  height: 32px;
  line-height: 32px;
}

.navigation.showMobile .DocSearch-Button {
  margin: 0;
}

.navigation.showMobile #searchContainer {
  padding-left: 3px;
}

.navigation.showMobile .searchContainer {
  width: 148px;
}

.hamburger {
  display: none;
  position: fixed;
  right: 0;
  padding-right: 50px;
  height: 50px;
  line-height: 50px;
  color: white;
  width: 160px;
  text-align: right;
  background-color: transparent;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgZmlsbD0iI2ZmZmZmZiIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDM5Ni42NjcgMzk2LjY2NyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzk2LjY2NyAzOTYuNjY3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGc+PHBhdGggZD0iTTE3LDg3LjgzM2gzNjIuNjY3YzkuMzUsMCwxNy03LjY1LDE3LTE3cy03LjY1LTE3LTE3LTE3SDE3Yy05LjM1LDAtMTcsNy42NS0xNywxN0MwLDgwLjE4Myw3LjY1LDg3LjgzMywxNyw4Ny44MzN6Ii8+PHBhdGggZD0iTTE3LDIxNS4zMzNoMzYyLjY2N2M5LjM1LDAsMTctNy42NSwxNy0xN3MtNy42NS0xNy0xNy0xN0gxN2MtOS4zNSwwLTE3LDcuNjUtMTcsMTdTNy42NSwyMTUuMzMzLDE3LDIxNS4zMzN6Ii8+PHBhdGggZD0iTTE3LDM0Mi44MzNoMzYyLjY2N2M5LjM1LDAsMTctNy42NSwxNy0xN3MtNy42NS0xNy0xNy0xN0gxN2MtOS4zNSwwLTE3LDcuNjUtMTcsMTdTNy42NSwzNDIuODMzLDE3LDM0Mi44MzN6Ii8+PC9nPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: right 10px top 10px;
  background-size: 30px 30px;
  cursor: pointer;
}

.footer {
  background-color: #41a9d5;
  width: 100%;
  height: 30px;
}

.footer .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: white;
}

.footer .wrapper a {
  padding: 0 6px;
  color: white;
  font-size: 12px;
  text-decoration: none;
}

.footer .wrapper a:hover {
  text-decoration: underline;
}

.content {
  padding: 50px 0 0 0;
  min-height: calc(100vh - 30px);
  /*animated gif*/
}

.content .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #f3f3f4;
}

.content h1 {
  text-align: center;
  margin: 60px 0;
}

.content button {
  background-color: #41a9d5;
  color: white;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px;
  font-size: 16px;
  will-change: transform;
}

.content .main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 10px 20px 10px;
  background-color: white;
  margin-left: 300px;
  max-width: calc(100% - 300px - 250px);
  border-right: 1px solid #cccdcb;
}

.content .main p,
.content .main td,
.content .main li,
.content .main a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}

.content .main h1,
.content .main h2,
.content .main h3,
.content .main h4,
.content .main h5,
.content .main h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.content .main h1 {
  text-align: left;
  margin: 0;
  padding: 20px 0 12px 0;
  color: #3d3d3d;
  position: relative;
  text-shadow: 0 2px 0 rgba(220, 220, 220, 0.3);
  font-size: 28px;
  line-height: 170%;
  font-weight: 600;
}

.content .main h2 {
  margin: 0;
  padding: 20px 0 12px 0;
  color: #3d3d3d;
  position: relative;
  font-size: 24px;
  line-height: 170%;
  font-weight: normal;
  border-top: 1px solid #d9d9d9;
}

@-webkit-keyframes h2bold {
  0% {
    text-shadow: 0 0 0 black;
  }
  50% {
    text-shadow: 0 0 2px black;
  }
  100% {
    text-shadow: 0 0 0 black;
  }
}

@keyframes h2bold {
  0% {
    text-shadow: 0 0 0 black;
  }
  50% {
    text-shadow: 0 0 2px black;
  }
  100% {
    text-shadow: 0 0 0 black;
  }
}

.content .main .accentuate {
  -webkit-animation-name: h2bold;
          animation-name: h2bold;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

.content .main h3 {
  margin: 0;
  color: #3d3d3d;
  position: relative;
  font-size: 20px;
  line-height: 170%;
  font-weight: normal;
}

.content .main h4 {
  margin: 0;
  padding: 8px 0 6px 0;
  color: #3d3d3d;
  position: relative;
  font-size: 18px;
  line-height: 170%;
  font-weight: 600;
}

.content .main h5 {
  margin: 0;
  padding: 0;
  color: #3d3d3d;
  position: relative;
  font-size: 18px;
  line-height: 170%;
  font-weight: normal;
}

.content .main h6 {
  margin: 0;
  padding: 0;
  color: #3d3d3d;
  position: relative;
  font-size: 14px;
  line-height: 170%;
  font-weight: 600;
}

.content .main p {
  margin: 12px 0;
}

.content .main h1 ~ p > span.date {
  display: block;
  font-size: 14px;
  color: #757575;
}

.content .main h2 ~ p > span.date {
  display: block;
  margin-top: -16px;
  font-size: 14px;
  color: #757575;
}

.content .main .function {
  color: #2457a6;
}

.content .main .type {
  color: #2eb398;
}

.content .main .service {
  color: #a53860;
}

.content #jumplist {
  margin-bottom: 6px;
  padding-top: 5px;
  width: 250px;
}

.content #jumplist ul {
  overflow-y: auto;
  position: fixed;
  top: calc(50px - 20px);
  max-height: calc(100vh - 50px - 10px);
  margin: 20px 0 0 0;
  padding: 40px 4px 30px 4px;
  list-style-position: outside;
  width: calc(250px - 2px);
  list-style: none;
}

.content #jumplist li {
  padding: 0;
  position: relative;
  line-height: 18px;
  margin-bottom: 6px;
  border-left: 2px solid transparent;
}

.content #jumplist li span {
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #231f20;
}

.content #jumplist li span:hover {
  text-decoration: underline;
}

.content #jumplist li:first-child {
  color: #808486;
  font-size: 14px;
}

.content #jumplist .current {
  border-left: 2px solid #0d7ca4;
  padding-left: 2px;
}

.content #jumplist .current > span {
  font-weight: bold;
  color: #0d7ca4;
}

.content #jumplist .current > span:hover {
  text-decoration: none;
}

.content .sidebar {
  font-size: 14px;
  line-height: 16px;
  overflow-y: auto;
  background-color: #f3f3f4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  border-right: 1px solid #cccdcb;
  padding: 10px 0 16px 6px;
  max-height: calc(100vh - (50px + 0px));
  height: calc(100vh - (50px + 0px));
  min-height: calc(100% - (50px + 0px));
  position: fixed;
}

.content .sidebar > ul > ul {
  display: none;
}

.content .sidebar > ul > li {
  margin-bottom: 2px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.content .sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  cursor: default;
}

.content .sidebar li {
  margin: 2px 0 0 0;
  padding: 2px;
  position: relative;
}

.content .sidebar li.parent {
  padding: 2px 0 0 14px;
}

.content .sidebar li.parent:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 18px;
  height: 26px;
  background: url(../images/arrow.svg) center center/10px 10px no-repeat transparent;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

.content .sidebar li.parent > a {
  position: relative;
  left: -16px;
  padding-left: 16px;
}

.content .sidebar li a {
  text-decoration: none;
  text-transform: capitalize;
  word-break: break-word;
  padding: 0 6px 0 2px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.content .sidebar li.article a {
  text-transform: none;
}

.content .sidebar li a:hover {
  text-decoration: underline;
  -webkit-text-decoration-color: #7a7a7a;
          text-decoration-color: #7a7a7a;
}

.content .sidebar ul li > ul {
  position: relative;
  display: none;
}

.content .sidebar ul li.active > ul {
  display: block;
}

.content .sidebar ul li > ul > li {
  padding-bottom: 2px;
}

.content .sidebar > ul > li.active {
  padding-bottom: 2px;
}

.content .sidebar ul li.active.parent:before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  left: -3px;
}

.content .sidebar .selectedParent {
  background-color: #d2d3d5;
}

.content .sidebar .selected {
  font-weight: 600;
  background-color: inherit;
  color: #333;
  cursor: default;
}

.content .sidebar .selected:hover {
  text-decoration: none;
}

.content .sidebar .parent > .selected,
.content .sidebar .sidebar > ul > li > .selected {
  font-weight: 600;
  background-color: inherit;
  color: #333;
}

.content .sidebar li.type:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 26px;
  background: bottom left/14px 14px no-repeat transparent;
  /* color */
}

.content .sidebar li.function:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 26px;
  background: bottom left/14px 14px no-repeat transparent;
  /* color */
}

.content .sidebar li.service:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 26px;
  background: bottom left/14px 14px no-repeat transparent;
  /* color */
}

.content .sidebar li.article:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 26px;
  /*
			background:
				url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGc+PHBhdGggZmlsbD0iI2FhYSIgZD0iTTQ0Ny45MzgsMTI5LjcwNGMtMC4wODktMi45OTctMS4yODMtNS45MjEtMy40OS04LjEyOEwzMjYuMzgzLDMuNTExYy0wLjAwNS0wLjAwNS0wLjAxLTAuMDA3LTAuMDE0LTAuMDEyQzMyNC4yLDEuMzM3LDMyMS4yMDksMCwzMTcuOTA3LDBIODkuMjc4Qzc1LjM2MSwwLDY0LjA0LDExLjMyLDY0LjA0LDI1LjIzN3Y0NjEuNTI1YzAsMTMuOTE2LDExLjMyLDI1LjIzNywyNS4yMzcsMjUuMjM3aDMzMy40NDRjMTMuOTE2LDAsMjUuMjM3LTExLjMyLDI1LjIzNy0yNS4yMzd2LTM1Ni43MUM0NDcuOTYsMTI5LjkzNCw0NDcuOTQ2LDEyOS44Miw0NDcuOTM4LDEyOS43MDR6IE0zMjkuODk1LDQwLjkzMWw3Ny4xMzUsNzcuMTM1aC03Mi4wNzZjLTIuNzksMC01LjA1OS0yLjI2OS01LjA1OS01LjA1OVY0MC45MzF6IE00MjMuOTg0LDQ4Ni43NjRjLTAuMDAxLDAuNjk0LTAuNTY3LDEuMjYtMS4yNjIsMS4yNkg4OS4yNzhjLTAuNjk1LDAtMS4yNjEtMC41NjYtMS4yNjEtMS4yNjFWMjUuMjM3YzAtMC42OTUsMC41NjYtMS4yNjEsMS4yNjEtMS4yNjFoMjE2LjY0MXY4OS4wMzFjMCwxNi4wMDksMTMuMDI1LDI5LjAzNSwyOS4wMzUsMjkuMDM1aDg5LjAzMVY0ODYuNzY0eiIvPjwvZz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PC9zdmc+) 
				center left / 14px 14px
				no-repeat              
				transparent;           */
}

.content .sidebar:before {
  display: none;
}

.content .firstSolutionImg {
  text-decoration: underline;
  color: #2457a6;
  cursor: pointer;
  display: none;
}

.content .ff-container.ff-responsive {
  margin-bottom: 20px;
  margin-top: 6px;
}

.content .ff-container:hover {
  background-image: none;
}

.content .ff-container {
  display: inline-block;
  position: relative;
  background-image: url("data:image/png;base64,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");
  background-repeat: no-repeat;
}

.content .ff-container .ff-image {
  z-index: 0;
  vertical-align: top;
  opacity: 0;
}

.content .ff-container .ff-canvas {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  vertical-align: top;
  opacity: 0;
}

.content .ff-container .ff-canvas.ff-canvas-ready {
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
  opacity: 1;
}

.content .ff-container.ff-active .ff-image {
  opacity: 1;
}

.content .ff-container.ff-active .ff-canvas.ff-canvas-ready {
  -webkit-transition: none;
  transition: none;
  opacity: 0;
}

.content .ff-container.ff-active .ff-overlay {
  display: none;
}

.content .ff-container.ff-inactive .ff-canvas.ff-canvas-ready {
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
  opacity: 1;
}

.content .ff-container.ff-inactive .ff-image {
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
  -webkit-transition-delay: 170ms;
          transition-delay: 170ms;
  opacity: 0;
}

.content .ff-container.ff-responsive {
  width: 100%;
}

.content .ff-container.ff-responsive .ff-image,
.content .ff-container.ff-responsive .ff-canvas {
  width: 100%;
}

.content .ff-container.ff-loading-icon:before {
  content: "";
  position: absolute;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSc1MHB4JyBoZWlnaHQ9JzUwcHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLXNwaW4iPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MCA1MCkiPjxnIHRyYW5zZm9ybT0icm90YXRlKDApIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwcyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBmcm9tPSIxLjUiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC4xMnMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuMTJzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCkgdHJhbnNsYXRlKDM0IDApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMSIgYmVnaW49IjAuMjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjI1cyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTM1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC4zN3MiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuMzdzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODApIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwLjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMjUpIHRyYW5zbGF0ZSgzNCAwKSI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjgiIGZpbGw9IiNmZmZmZmYiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGZyb209IjEiIHRvPSIwLjEiIGJlZ2luPSIwLjYycyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBmcm9tPSIxLjUiIHRvPSIxIiBiZWdpbj0iMC42MnMiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCkgdHJhbnNsYXRlKDM0IDApIj48Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZnJvbT0iMSIgdG89IjAuMSIgYmVnaW49IjAuNzVzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGZyb209IjEuNSIgdG89IjEiIGJlZ2luPSIwLjc1cyIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzE1KSB0cmFuc2xhdGUoMzQgMCkiPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI4IiBmaWxsPSIjZmZmZmZmIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBmcm9tPSIxIiB0bz0iMC4xIiBiZWdpbj0iMC44N3MiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgZnJvbT0iMS41IiB0bz0iMSIgYmVnaW49IjAuODdzIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvZz48L2c+PC9zdmc+");
  background-position: center center;
  background-repeat: no-repeat;
  height: 46px;
  width: 46px;
  z-index: 3;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.content .ff-container .ff-overlay {
  background-image: url("data:image/png;base64,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");
  background-repeat: no-repeat;
  max-width: 94px;
  max-height: 94px;
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  margin: auto;
  background-size: contain;
  background-position: center;
  pointer-events: none;
  z-index: 100;
}

/*Zoomed Images*/
.main img {
  padding: 8px;
}

.main img[align="left"] {
  padding: 8px 8px 8px 0;
}

.main img[align="right"] {
  padding: 8px 0 8px 8px;
}

.main img {
  max-width: 100%;
}

.main .imageWrapper {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  display: inline-block;
  max-width: 100%;
}

img.zoomedImage {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto !important;
  max-width: 100% !important;
  max-height: calc(100vh - 50px) !important;
  opacity: 0;
  height: auto !important;
  z-index: 50;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  z-index: 40;
}

#licensePopup {
  position: fixed;
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 6px;
  overflow-y: auto;
  top: 0;
  left: 0;
  right: 0;
  margin: 60px auto 20px auto;
  width: 90vw;
  max-width: 650px;
  height: auto;
  max-height: calc(100vh - 80px);
  z-index: 50;
  -webkit-box-shadow: 2px 2px 7px 2px rgba(122, 122, 122, 0.6);
          box-shadow: 2px 2px 7px 2px rgba(122, 122, 122, 0.6);
  padding-bottom: 12px;
}

#licensePopup > h1,
#licensePopup > p,
#licensePopup > h3,
#licensePopup > h2 {
  padding: 12px;
  margin: 0;
}

#licensePopup ul {
  padding-left: 40px;
}

#licensePopup h1 {
  padding-top: 20px;
}

#licensePopup h1,
#licensePopup #author-twenty57 {
  background-color: #d9eef7;
  color: #231f20;
}

#licensePopup #author-twenty57 {
  font-size: 14px;
  font-weight: bold;
}

#licensePopup p,
#licensePopup td,
#licensePopup li,
#licensePopup a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}

.linx5MessageBox {
  display: inline-block;
  border-radius: 8px;
  background-color: #e9ecf0;
  color: #007ba3;
  padding: 12px;
}

.linx5MessageBox a {
  color: #007ba3;
}

.accordion-content > .accordion {
  margin-left: 20px;
}

.accordion-title {
  display: block;
  -webkit-box-shadow: 0 2px 6px 0 #ccc;
          box-shadow: 0 2px 6px 0 #ccc;
  background-color: #f1f1f1;
  margin-bottom: 4px;
  padding: 6px;
  cursor: pointer;
  margin: 8px 0;
}

.accordion-content {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 0.2s ease;
  transition: max-height 0.2s ease;
}

.accordion-content.expand {
  max-height: 600px;
  -webkit-transition: max-height 0.5s ease;
  transition: max-height 0.5s ease;
}

.accordion-content .getFile {
  display: block;
  padding: 0 0 10px 40px;
  margin: 0;
  font-weight: bold;
}

.accordion-content ul li {
  margin: 6px 0;
}

.articlelist > .accordion-title {
  font-weight: bold;
}

/*tabs*/
.tab {
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
  top: 1px;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: 1px solid #008c9f;
}

.tabcontent.active {
  display: block;
  background-color: transparent;
}

.tablinks {
  height: 30px;
  line-height: 30px;
  text-transform: uppercase;
  background-color: #f4f4f4;
  float: left;
  color: #008c9f;
  border: 1px solid white;
  outline: none;
  cursor: pointer;
  padding: 0 10px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  margin: 0 4px;
  border-bottom: 1px solid #008c9f;
}

.tablinks:hover {
  background-color: #ddd;
}

.tablinks.active {
  background-color: #fff;
  border: 1px solid #008c9f;
  border-bottom: 1px solid white;
  height: 30px;
}

.tablinks.active:hover {
  background-color: #fff;
}

.main table {
  border-collapse: collapse;
}

.main table th {
  border: 1px solid #ccc;
  padding: 2px;
  text-align: left;
}

.main table td {
  border: 1px solid #ccc;
  padding: 2px;
}

.main ul {
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
  -webkit-margin-after: 12px;
          margin-block-end: 12px;
}

.main .feedbackContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 12px;
}

.main .feedbackContainerText {
  border-top: 1px solid #d9d9d9;
  font-weight: bold;
  font-size: 12px;
  margin-top: 30px;
  margin-bottom: 10px;
}

.main .feedbackControlResponse {
  background-repeat: no-repeat;
  background-size: 24px 24px;
  height: 24px;
  width: 24px;
  cursor: pointer;
}

.main .feedbackControlYes {
  background-image: url(/docs/images/thumbs-up.svg);
}

.main .feedbackControlNo {
  background-image: url(/docs/images/thumbs-down.svg);
}

.main .enableMe:hover {
  -webkit-animation: shake 0.18s;
          animation: shake 0.18s;
}

.main .disableMe {
  -webkit-animation: showDisabled 0.2s;
          animation: showDisabled 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
            transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
            transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
            transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(3px, 2px) rotate(0deg);
            transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
            transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
            transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
            transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(3px, 1px) rotate(-1deg);
            transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
            transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 2px) rotate(0deg);
            transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
            transform: translate(1px, -2px) rotate(-1deg);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
            transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
            transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
            transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(3px, 2px) rotate(0deg);
            transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
            transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
            transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
            transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(3px, 1px) rotate(-1deg);
            transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
            transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 2px) rotate(0deg);
            transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
            transform: translate(1px, -2px) rotate(-1deg);
  }
}

@-webkit-keyframes showDisabled {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes showDisabled {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.tutorialspage .scrollToTop {
  display: none;
}

.tutorialspage .content > .wrapper {
  display: block;
  padding: 20px;
  margin-bottom: 40px;
  min-height: calc(100vh - 50px);
  height: 100%;
}

.tutorialspage .content > .wrapper h1 {
  margin: 20px 0 40px 0;
}

.tutorialspage .tutorialswrapper {
  margin-top: 20px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.tutorialspage .tutorialsIntro {
  text-align: center;
}

.tutorialspage .tutorialcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.tutorialspage .tutorialcontainer h4 {
  margin: 10px 0 4px 0;
  font-size: 22px;
  line-height: 26px;
}

.tutorialspage .tutorialcontainer .videodescription {
  font-size: 14px;
  line-height: 20px;
}

.tutorialspage .tutorialcontainer .controlflow {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0)), to(rgba(22, 55, 74, 0))), url(../images/control-flow-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0), rgba(22, 55, 74, 0)), url(../images/control-flow-vid.jpg);
}

.tutorialspage .tutorialcontainer .controlflow:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0.75)), to(rgba(22, 55, 74, 0.75))), url(../images/control-flow-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0.75), rgba(22, 55, 74, 0.75)), url(../images/control-flow-vid.jpg);
}

.tutorialspage .tutorialcontainer .expressions {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0)), to(rgba(22, 55, 74, 0))), url(../images/expression-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0), rgba(22, 55, 74, 0)), url(../images/expression-vid.jpg);
}

.tutorialspage .tutorialcontainer .expressions:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0.75)), to(rgba(22, 55, 74, 0.75))), url(../images/expression-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0.75), rgba(22, 55, 74, 0.75)), url(../images/expression-vid.jpg);
}

.tutorialspage .tutorialcontainer .functions {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0)), to(rgba(22, 55, 74, 0))), url(../images/functions-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0), rgba(22, 55, 74, 0)), url(../images/functions-vid.jpg);
}

.tutorialspage .tutorialcontainer .functions:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0.75)), to(rgba(22, 55, 74, 0.75))), url(../images/functions-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0.75), rgba(22, 55, 74, 0.75)), url(../images/functions-vid.jpg);
}

.tutorialspage .tutorialcontainer .server {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0)), to(rgba(22, 55, 74, 0))), url(../images/server-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0), rgba(22, 55, 74, 0)), url(../images/server-vid.jpg);
}

.tutorialspage .tutorialcontainer .server:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0.75)), to(rgba(22, 55, 74, 0.75))), url(../images/server-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0.75), rgba(22, 55, 74, 0.75)), url(../images/server-vid.jpg);
}

.tutorialspage .tutorialcontainer .services {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0)), to(rgba(22, 55, 74, 0))), url(../images/services-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0), rgba(22, 55, 74, 0)), url(../images/services-vid.jpg);
}

.tutorialspage .tutorialcontainer .services:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0.75)), to(rgba(22, 55, 74, 0.75))), url(../images/services-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0.75), rgba(22, 55, 74, 0.75)), url(../images/services-vid.jpg);
}

.tutorialspage .tutorialcontainer .types {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0)), to(rgba(22, 55, 74, 0))), url(../images/types-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0), rgba(22, 55, 74, 0)), url(../images/types-vid.jpg);
}

.tutorialspage .tutorialcontainer .types:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0.75)), to(rgba(22, 55, 74, 0.75))), url(../images/types-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0.75), rgba(22, 55, 74, 0.75)), url(../images/types-vid.jpg);
}

.tutorialspage .tutorialcontainer .settings {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0)), to(rgba(22, 55, 74, 0))), url(../images/settings-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0), rgba(22, 55, 74, 0)), url(../images/settings-vid.jpg);
}

.tutorialspage .tutorialcontainer .settings:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0.75)), to(rgba(22, 55, 74, 0.75))), url(../images/settings-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0.75), rgba(22, 55, 74, 0.75)), url(../images/settings-vid.jpg);
}

.tutorialspage .tutorialcontainer .plugins {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0)), to(rgba(22, 55, 74, 0))), url(../images/plugins-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0), rgba(22, 55, 74, 0)), url(../images/plugins-vid.jpg);
}

.tutorialspage .tutorialcontainer .plugins:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0.75)), to(rgba(22, 55, 74, 0.75))), url(../images/plugins-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0.75), rgba(22, 55, 74, 0.75)), url(../images/plugins-vid.jpg);
}

.tutorialspage .tutorialcontainer .debug {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0)), to(rgba(22, 55, 74, 0))), url(../images/debug-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0), rgba(22, 55, 74, 0)), url(../images/debug-vid.jpg);
}

.tutorialspage .tutorialcontainer .debug:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 55, 74, 0.75)), to(rgba(22, 55, 74, 0.75))), url(../images/debug-vid.jpg);
  background-image: linear-gradient(rgba(22, 55, 74, 0.75), rgba(22, 55, 74, 0.75)), url(../images/debug-vid.jpg);
}

.tutorialspage .videoplaceholder {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 125px;
  cursor: pointer;
  border: 1px solid #333333;
}

.tutorialspage .videoplaceholder .play-button {
  display: none;
  z-index: 50;
  height: 80px;
  width: 80px;
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.7);
          box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.tutorialspage .videoplaceholder:hover .play-button {
  display: block;
}

.tutorialspage .videoplayer {
  position: fixed;
  top: calc(50px + 5vh);
  left: 0;
  right: 0;
  z-index: 500;
  margin: 0 auto;
  width: auto;
  max-height: calc(85vh - 70px);
}

.tutorialspage .videooverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 40;
}

.tutorialspage video {
  border: 1px solid white;
}

.tutorialspage .videotitletag {
  position: fixed;
  bottom: 3vh;
  font-size: 6vh;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: white;
  z-index: 60;
  text-align: center;
}


/*** Message blocks **********************************************************/
.message-block {
  border-radius: 4px;
  border-left-style: solid;
  border-left-width: 3px;
  padding: 7px 10px 10px 10px;
  margin-bottom: 15px;
}

.message-block.message-block > h3 {
  font-weight: bold;
  margin-bottom: 8px;
}

.message-block a {
  color: rgba(255, 108, 22, 1);
}

.message-block.breaking-change {
  background-color: rgba(255, 108, 22, 0.1);
  border-left-color: rgba(255, 108, 22, 1);
}

.message-block.breaking-change > h3 {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">]><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><defs></defs><path fill="%23D84315" d="M2.031,20c-0.274,0-0.533-0.055-0.776-0.159c-0.245-0.106-0.46-0.251-0.646-0.434c-0.187-0.184-0.335-0.396-0.444-0.642C0.055,18.522,0,18.263,0,17.99c0-0.326,0.07-0.636,0.212-0.934L8.18,1.122c0.17-0.34,0.419-0.611,0.752-0.816C9.264,0.101,9.619,0,10,0s0.736,0.101,1.068,0.306c0.333,0.205,0.582,0.477,0.752,0.816l7.968,15.935C19.93,17.354,20,17.664,20,17.99c0,0.272-0.055,0.532-0.164,0.775c-0.109,0.245-0.255,0.458-0.439,0.642c-0.184,0.183-0.397,0.327-0.645,0.434C18.504,19.945,18.243,20,17.969,20H2.031z M17.969,18.646c0.169,0,0.323-0.064,0.465-0.191c0.143-0.127,0.212-0.279,0.212-0.454c0-0.127-0.025-0.239-0.074-0.34L10.604,1.725c-0.058-0.12-0.139-0.211-0.249-0.275S10.127,1.354,10,1.354S9.756,1.387,9.646,1.455c-0.11,0.066-0.191,0.157-0.249,0.27L1.429,17.66c-0.049,0.101-0.074,0.209-0.074,0.33c0,0.183,0.068,0.337,0.206,0.464s0.295,0.191,0.471,0.191H17.969z M8.983,15.237c0-0.281,0.1-0.522,0.297-0.72c0.197-0.196,0.438-0.295,0.72-0.295s0.522,0.099,0.72,0.295c0.197,0.197,0.297,0.438,0.297,0.72c0,0.282-0.1,0.523-0.297,0.72c-0.197,0.197-0.438,0.296-0.72,0.296s-0.522-0.099-0.72-0.296C9.083,15.761,8.983,15.52,8.983,15.237z M9.322,12.528V7.11c0-0.183,0.067-0.342,0.201-0.477C9.657,6.501,9.816,6.433,10,6.433s0.343,0.068,0.477,0.201c0.134,0.135,0.201,0.294,0.201,0.477v5.418c0,0.185-0.067,0.344-0.201,0.476c-0.134,0.135-0.293,0.201-0.477,0.201s-0.343-0.066-0.477-0.201C9.39,12.872,9.322,12.713,9.322,12.528z"/></svg>');
  background-repeat: no-repeat;
  background-position: left;
  padding-left:25px;
}

.message-block.info {
  background-color: rgba(243, 243, 244, 1);
  border-left-color: rgba(65, 169, 213, 1);
}

/*** END: Message blocks **********************************************************/

.fourOFourPage .content {
  text-align: center;
  font-size: 50px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles */
  .navigation {
    display: -ms-flexbox;
  }
  .navigation li.hamburger,
  .navigation li.hamburger a {
    width: 160px;
  }
}

@media all and (max-width: 1530px) {
  .content #jumplist > ul {
    max-height: calc(100vh - 50px - 10px - 40px);
  }
  .scrollToTop {
    bottom: 5px;
  }
}

@media all and (max-width: 1240px) {
  .content .main {
    max-width: calc(100% - 300px - 18%);
  }
  .content #jumplist {
    max-width: 18%;
  }
  .content #jumplist > ul {
    width: calc(18% - 2px);
    max-height: calc(100vh - 50px - 10px - 40px);
  }
  .scrollToTop {
    bottom: 5px;
  }
}

@media all and (max-width: 1100px) {
  .content .main {
    max-width: calc(100% - 200px - 18%);
    margin-left: 200px;
  }
  .content .sidebar {
    max-width: 200px;
  }
  .tutorialspage .tutorialswrapper {
    margin-top: 10px;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media all and (max-width: 960px) {
  .navigation li a {
    padding: 0 10px;
  }
}

@media all and (max-width: 900px) {
  .content {
    padding: 50px 0 0 0;
  }
  .content #jumplist {
    width: 100%;
    max-width: 150px;
  }
  .content #jumplist > ul {
    width: calc(150px - 2px);
    max-height: calc(100vh - 50px - 10px - 40px);
  }
  .searchContainer {
    display: none;
  }
  .breadcrumb .wrapper {
    display: none;
  }
  .showMobile li.searchContainer {
    display: inline-block;
  }
  .hamburger {
    display: block;
  }
  .navigation {
    -webkit-transition: width 0.2s ease, padding 0.2s ease;
    transition: width 0.2s ease, padding 0.2s ease;
    position: fixed;
    padding: 0;
    top: 50px;
    right: -160px;
    height: 100%;
    width: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: left;
        -ms-flex-align: left;
            align-items: left;
    background-color: #41a9d5;
    border: 2px solid #41a9d5;
  }
  .landingPage .navigation {
    top: 50px;
  }
  .landingPage .hamburger span {
    height: 50px;
    line-height: 50px;
  }
  .landingPage .navigation a {
    height: 50px;
    line-height: 50px;
  }
  .landingPage .hamburger {
    background-position: right 10px top 24px;
  }
  .landingPage .hamburger span {
    line-height: 80px;
    height: 80px;
  }
}

@media all and (max-width: 800px) {
  .bigLink {
    min-width: calc(100% - 80px);
  }
}

@media all and (max-width: 760px) {
  .content {
    padding-left: 0;
  }
  .content .main {
    margin-left: 20px;
    max-width: 100%;
  }
  .content .main img {
    max-width: 100%;
  }
  .content .sidebar {
    position: absolute;
    max-width: 100%;
    -webkit-transition: left 0.4s ease;
    transition: left 0.4s ease;
    z-index: 100;
    overflow-y: hidden;
    left: calc(-100% + 20px);
  }
  .content .sidebar > ul {
    margin-right: 20px;
  }
  .content .sidebar.expand {
    position: fixed;
    left: 0;
    overflow-y: auto;
    width: -webkit-fill-available;
  }
  .content .sidebar:after {
    display: block;
    -webkit-transition: left 0.4s ease;
    transition: left 0.4s ease;
    position: fixed;
    height: 100%;
    left: 0;
    width: 20px;
    top: 20px;
    content: "";
    background-color: #bbbbbb;
    background-image: url(../images/right-arrow.svg);
    background-position: 1px 40px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 200;
  }
  .content .expand.sidebar:after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    background-position: left 1px bottom 40px;
    left: calc(100% - 20px - 8px);
  }
  .gettingStartedPage .sidebar {
    display: none;
  }
  .gettingStartedPage .main {
    margin-left: 0;
  }
  .tutorialspage .tutorialswrapper {
    margin-top: 10px;
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
}

@media all and (max-height: 440px) and (max-width: 900px) {
  .navigation a {
    height: 30px;
    line-height: 30px;
  }
}
/*# sourceMappingURL=style.css.map */