@charset "UTF-8";
/*
    Author: Kogulan Ledanan
*/
:root {
  /* Colors */
  /* - Base Scales --color-[name]-[shade] */
  --color-blue: #673ab0;
  --color-blue-dark: #5b2f9d;
  --color-blue-extra-dark: #4d2786;
  --color-green: #107670;
  --color-green-dark: #0d655f;
  --color-green-extra-dark: #0a544f;
  --color-red-light: #f1b3c9;
  --color-red: #cc0055;
  --color-red-dark: #b00049;
  --color-red-extra-dark: #91003c;
  --color-grey-extra-light: rgba(28, 29, 29, 0.12);
  --color-grey-light: rgba(28, 29, 29, 0.24);
  --color-grey: rgba(28, 29, 29, 0.56);
  --color-grey-dark: rgba(28, 29, 29, 0.6);
  --color-grey-extra-dark: rgba(28, 29, 29, 0.72);
  --color-dark-grey: rgba(28, 29, 29, 0.72);
  --color-black: #1c1d1d;
  --color-white: #ffffff;
  /* - Special */
  --color-background-grey: #f2f1f1;
  --color-background-yellow: #e7fde7;
  --color-background-pink: #e6e6df;
  --color-background-info-blue: #eaddf1;
  --color-background-error-red: #f3d1e0;
  --color-background-warning-yellow: #f8e7b6;
  --color-illustration-blue: #673ab0;
  --color-illustration-green: #107670;
  --color-illustration-red: #cc0055;
  /* - Font Scale */
  /* Inter */
  --font-family-text: "Inter", sans-serif;
  --font-size-extra-small: 12px;
  --font-line-height-extra-small: 18px;
  --font-size-small: 14px;
  --font-line-height-small: 20px;
  --font-size-normal: 16px;
  --font-line-height-normal: 24px;
  --font-size-large: 18px;
  --font-line-height-large: 26px;
  /* Whereby Roslindale Text */
  --font-family-sub-headline: "Whereby Text", Georgia, serif;
  --font-size-sub-headline-small: 24px;
  --font-line-height-sub-headline-small: 32px;
  --font-size-sub-headline-normal: 28px;
  --font-line-height-sub-headline-normal: 38px;
  --font-size-sub-headline-large: 32px;
  --font-line-height-sub-headline-large: 46px;
  /* Whereby Roslindale Display Condensed */
  --font-family-headline: "Whereby Condensed", Georgia, serif;
  --font-size-headline-small: 40px;
  --font-line-height-headline-small: 52px;
  --font-size-headline-normal: 80px;
  --font-line-height-headline-normal: 90px;
  --font-size-headline-large: 120px;
  --font-line-height-headline-large: 124px;
  /* - Border Radius */
  --border-radius-extra-small: 4px;
  --border-radius-small: 8px;
  --border-radius-large: 12px;
  /* - Drop Shadow */
  --drop-shadow-small: 0px 1px 4px rgba(28, 29, 29, 0.16);
  --drop-shadow-large: 0px 8px 16px rgba(28, 29, 29, 0.16),
    0px 1px 4px rgba(28, 29, 29, 0.16);
  /* - Spacing Scale */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-192: 192px;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://d2qulvgqu65efe.cloudfront.net/assets/fonts/inter/Inter-Regular.woff2")
      format("woff2"),
    url("https://d2qulvgqu65efe.cloudfront.net/assets/fonts/inter/Inter-Regular.woff")
      format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://d2qulvgqu65efe.cloudfront.net/assets/fonts/inter/Inter-Medium.woff2")
      format("woff2"),
    url("https://d2qulvgqu65efe.cloudfront.net/assets/fonts/inter/Inter-Medium.woff")
      format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://d2qulvgqu65efe.cloudfront.net/assets/fonts/inter/Inter-SemiBold.woff2")
      format("woff2"),
    url("https://d2qulvgqu65efe.cloudfront.net/assets/fonts/inter/Inter-SemiBold.woff")
      format("woff");
}

@font-face {
  font-family: "Whereby Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://d2qulvgqu65efe.cloudfront.net/assets/fonts/whereby-roslindale/WherebyRoslindaleText-Regular.woff2")
      format("woff2"),
    url("https://d2qulvgqu65efe.cloudfront.net/assets/fonts/whereby-roslindale/WherebyRoslindaleText-Regular.woff")
      format("woff");
}

@font-face {
  font-family: "Whereby Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://d2qulvgqu65efe.cloudfront.net/assets/fonts/whereby-roslindale/WherebyRoslindaleDisplayCondensed-Regular.woff2")
      format("woff2"),
    url("https://d2qulvgqu65efe.cloudfront.net/assets/fonts/whereby-roslindale/WherebyRoslindaleDisplayCondensed-Regular.woff")
      format("woff");
}

body {
  background-color: #03291a;
  background-color: #03291a;
  font-family: var(--font-family-text);
}

h1,
h2,
h3 {
  font-family: var(--font-family-sub-headline);
}

h1 {
  font-size: var(--font-size-sub-headline-large);
  line-height: var(--font-line-height-sub-headline-large);
}

h2 {
  font-size: var(--font-size-sub-headline-normal);
  line-height: var(--font-line-height-sub-headline-normal);
}

h3,
h4,
h5 {
  font-size: var(--font-size-sub-headline-small);
  line-height: var(--font-line-height-sub-headline-small);
}

p {
  font-family: var(--font-family-text);
  color: var(--color-black);
}

hr {
  height: 1px;
  background-color: var(--color-grey-extra-light);
  border: none;
}

.container-fluid {
  max-width: 1200px;
}

#contentArea {
  padding: 0 24px;
}

@media (max-width: 768px) {
  #contentArea {
    padding: 0 8px;
  }
}

#docsSearch {
  background-color: #03291a;
  height: 400px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-bottom: none;
  padding: 0;
  margin-bottom: 32px;
}

#docsSearch h1 {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-headline-normal);
  line-height: var(--font-line-height-headline-normal);
  margin: 0;
  margin-bottom: 16px;
  color: var(--color-white);
}

#docsSearch #searchBar {
  width: 520px !important;
}

#docsSearch #searchBar button {
  background: var(--color-blue);
  height: 56px;
  border-radius: 0 12px 12px 0;
  border: 1px solid var(--color-blue);
  text-shadow: none;
  font-size: var(--font-size-large);
  font-family: var(--font-family-text);
  font-weight: 400;
  padding: 0 32px;
  line-height: 0;
  transition: all 0.1s ease-in !important;
  outline: none;
}

#docsSearch #searchBar button .icon-search::before {
  content: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='11' cy='11' r='6.5' stroke='%23eaddf1' stroke-width='2'/><path d='M16.5 16.5L21 21' stroke='%23eaddf1' stroke-width='2' stroke-linecap='round'/></svg>");
}

#docsSearch #searchBar button:hover {
  background: var(--color-blue-dark);
}

#docsSearch #searchBar button:focus {
  background: var(--color-blue-extra-dark);
}

#docsSearch textarea,
#docsSearch input[type="text"] {
  box-shadow: none;
  transition: none;
  -webkit-appearance: none;
  transition: all 0.1s ease-in;
}

#docsSearch .search-query {
  border: 1px solid var(--color-grey-extra-light) !important;
  border-radius: 12px !important;
  color: var(--color-black) !important;
  height: 56px !important;
  font-family: var(--font-family-text) !important;
  font-size: 18px !important;
  padding-left: 16px !important;
  padding-right: 132px;
}

#docsSearch .search-query:hover {
  border: 1px solid var(--color-grey-light) !important;
}

#docsSearch .search-query:focus {
  border-color: var(--color-blue) !important;
  box-shadow: inset 0px 0px 0px 1px var(--color-blue);
}

#docsSearch #serp-dd {
  border-radius: 9px;
  box-shadow: var(--drop-shadow-large);
  top: 84px;
}

#docsSearch #serp-dd .noResults {
  padding: 16px 24px;
  font-size: var(--font-size-normal);
  color: var(--color-grey);
}

#docsSearch #serp-dd a {
  color: var(--color-blue);
  font-size: var(--font-size-normal);
  padding: 16px 16px;
}

@media (max-width: 768px) {
  #docsSearch #searchBar {
    padding: 1.5em 0;
    width: 90% !important;
    max-width: 575px;
  }
}

@media (max-width: 480px) and (max-width: 768px) {
  #docsSearch #searchBar button {
    padding: 0 24px;
  }
}

@media (max-width: 480px) and (max-width: 768px) {
  #docsSearch .search-query {
    padding-right: 88px !important;
  }
}

.collection-category {
  color: var(--color-black);
}

.collection-category h2 {
  text-align: center;
  font-size: 3em;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.category {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-position-x: 50% !important;
  background-position-y: 24px !important;
  background-color: var(--color-white) !important;
  border-radius: var(--border-radius-small);
  border-radius: var(--border-radius-large);
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  box-shadow: var(--drop-shadow-small);
  padding-top: 120px !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box;
  width: 31% !important;
  transition: all 0.1s ease-in !important;
}

.category h3 {
  color: var(--color-black);
  font-size: var(--font-size-sub-headline-small);
  line-height: var(--font-line-height-sub-headline-small);
  margin-left: 24px;
  margin-right: 24px;
  margin-bottom: 24px;
  margin-top: 0;
  border-radius: 12px;
}

.category .article-count,
.category p {
  display: none;
}

.category:hover {
  box-shadow: 0 0 0 2px var(--color-blue), var(--drop-shadow-large);
}

@media (max-width: 768px) {
  .category {
    width: 42% !important;
  }
}

@media (max-width: 600px) and (max-width: 768px) {
  .category {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
}

.icon-print {
  opacity: 0.72;
}

.icon-print:before {
  content: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='6' y='3' width='12' height='6' rx='1' stroke='%23673ab0' stroke-width='2'/><rect x='4' y='9' width='16' height='7' rx='1' stroke='%23673ab0' stroke-width='2'/><rect x='6' y='14' width='12' height='7' rx='1' stroke='%23673ab0' stroke-width='2'/><circle cx='18' cy='11' r='1' fill='%23673ab0'/></svg>");
}

.icon-article-doc {
  opacity: 0.72;
  position: relative;
  top: 6px;
  margin-right: 8px !important;
}

.icon-article-doc:before {
  content: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='3' width='14' height='18' rx='2' stroke='%23107670' stroke-width='2'/><line x1='8' y1='8' x2='16' y2='8' stroke='%23107670' stroke-width='2' stroke-linecap='round'/><line x1='8' y1='12' x2='16' y2='12' stroke='%23107670' stroke-width='2' stroke-linecap='round'/><line x1='8' y1='16' x2='13' y2='16' stroke='%23107670' stroke-width='2' stroke-linecap='round'/></svg>");
}

.navbar {
  padding-top: 12px;
  padding-bottom: 12px;
}

.navbar .navbar-inner {
  background: none;
  box-shadow: none;
}

.navbar .brand {
  padding: 0;
  height: 75px;
}

.navbar .brand img {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.navbar .brand::before {
  content: url("data:image/svg+xml;utf8,<svg width='129' height='44' viewBox='0 0 129 44' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M40.9768 24.775H44.2651C41.064 34.2085 32.9035 41.6228 22.9846 43.3511C15.6748 44.3772 7.4271 43.8791 0 43.8791L4.40336 24.775H1.14517L6.81093 0.161909C12.6811 0.161909 27.5323 -0.747241 33.4024 1.74317C41.5359 5.22975 43.5617 14.1082 41.6801 22.0205C41.536 22.9593 41.3004 23.8818 40.9768 24.775ZM19.1373 10.9727L15.9663 24.775H19.2245L17.3159 32.9783C23.688 32.9783 27.2377 30.5779 29.2065 24.775H25.9483C26.2699 23.9829 26.5043 23.0437 26.7688 21.9305C28.5873 14.3423 26.357 10.9727 19.1343 10.9727H19.1373Z' fill='%2387FFA2'/><path d='M64.5644 12.6106V32.0606H62.2254L61.8126 30.3934H61.5374C61.5374 30.3934 60.4367 32.3384 58.3729 32.3384H55.8963C53.5573 32.3384 51.9062 30.6713 51.9062 28.5874V21.641C51.9062 19.557 53.5573 17.8899 55.8963 17.8899H61.1247V12.6106H64.5644ZM61.1247 20.8074H56.8594C55.8963 20.8074 55.346 21.3631 55.346 22.1967V28.0317C55.346 28.8652 55.8963 29.4209 56.8594 29.4209H58.9233C60.4367 29.4209 61.1247 27.8927 61.1247 27.8927V20.8074ZM79.5093 21.3631V26.3645H70.566V27.7538C70.566 28.5874 71.1164 29.1431 72.0795 29.1431H78.9589V32.0606H71.1164C68.7774 32.0606 67.1263 30.3934 67.1263 28.3095V21.3631C67.1263 19.2792 68.7774 17.612 71.1164 17.612H75.5192C77.8582 17.612 79.5093 19.2792 79.5093 21.3631ZM70.566 21.9188V23.447H76.0695V21.9188C76.0695 21.0852 75.5192 20.5295 74.5561 20.5295H72.0795C71.1164 20.5295 70.566 21.0852 70.566 21.9188ZM90.603 17.612V20.6685H87.4385C85.925 20.6685 85.2371 22.0577 85.2371 22.0577V32.0606H81.7974V17.8899H84.1364L84.5491 19.557H84.8243C84.8243 19.557 85.925 17.612 87.9888 17.612H90.603ZM95.3663 17.8899V32.0606H91.9266V17.8899H95.3663ZM95.3663 12.1938V16.0838H91.9266V12.1938H95.3663ZM101.369 32.0606L96.8289 19.2792V17.8899H100.269L103.296 28.4484H103.571L106.598 17.8899H110.037V19.2792L105.497 32.0606H101.369ZM123.469 21.3631V26.3645H114.526V27.7538C114.526 28.5874 115.076 29.1431 116.039 29.1431H122.918V32.0606H115.076C112.737 32.0606 111.086 30.3934 111.086 28.3095V21.3631C111.086 19.2792 112.737 17.612 115.076 17.612H119.479C121.818 17.612 123.469 19.2792 123.469 21.3631ZM114.526 21.9188V23.447H120.029V21.9188C120.029 21.0852 119.479 20.5295 118.516 20.5295H116.039C115.076 20.5295 114.526 21.0852 114.526 21.9188ZM125.344 28.5874H128.509V32.0606H125.344V28.5874Z' fill='white' style='mix-blend-mode:difference'/><g style='mix-blend-mode:saturation'><path d='M64.5644 12.6106V32.0606H62.2254L61.8126 30.3934H61.5374C61.5374 30.3934 60.4367 32.3384 58.3729 32.3384H55.8963C53.5573 32.3384 51.9062 30.6713 51.9062 28.5874V21.641C51.9062 19.557 53.5573 17.8899 55.8963 17.8899H61.1247V12.6106H64.5644ZM61.1247 20.8074H56.8594C55.8963 20.8074 55.346 21.3631 55.346 22.1967V28.0317C55.346 28.8652 55.8963 29.4209 56.8594 29.4209H58.9233C60.4367 29.4209 61.1247 27.8927 61.1247 27.8927V20.8074ZM79.5093 21.3631V26.3645H70.566V27.7538C70.566 28.5874 71.1164 29.1431 72.0795 29.1431H78.9589V32.0606H71.1164C68.7774 32.0606 67.1263 30.3934 67.1263 28.3095V21.3631C67.1263 19.2792 68.7774 17.612 71.1164 17.612H75.5192C77.8582 17.612 79.5093 19.2792 79.5093 21.3631ZM70.566 21.9188V23.447H76.0695V21.9188C76.0695 21.0852 75.5192 20.5295 74.5561 20.5295H72.0795C71.1164 20.5295 70.566 21.0852 70.566 21.9188ZM90.603 17.612V20.6685H87.4385C85.925 20.6685 85.2371 22.0577 85.2371 22.0577V32.0606H81.7974V17.8899H84.1364L84.5491 19.557H84.8243C84.8243 19.557 85.925 17.612 87.9888 17.612H90.603ZM95.3663 17.8899V32.0606H91.9266V17.8899H95.3663ZM95.3663 12.1938V16.0838H91.9266V12.1938H95.3663ZM101.369 32.0606L96.8289 19.2792V17.8899H100.269L103.296 28.4484H103.571L106.598 17.8899H110.037V19.2792L105.497 32.0606H101.369ZM123.469 21.3631V26.3645H114.526V27.7538C114.526 28.5874 115.076 29.1431 116.039 29.1431H122.918V32.0606H115.076C112.737 32.0606 111.086 30.3934 111.086 28.3095V21.3631C111.086 19.2792 112.737 17.612 115.076 17.612H119.479C121.818 17.612 123.469 19.2792 123.469 21.3631ZM114.526 21.9188V23.447H120.029V21.9188C120.029 21.0852 119.479 20.5295 118.516 20.5295H116.039C115.076 20.5295 114.526 21.0852 114.526 21.9188ZM125.344 28.5874H128.509V32.0606H125.344V28.5874Z' fill='white' style='mix-blend-mode:difference'/></g></svg>");
}

.navbar .nav a {
  font-size: var(--font-size-normal);
  line-height: var(--font-line-height-normal);
  color: var(--color-black) !important;
  padding: 0 24px 24px 0 !important;
}

.navbar .nav a [class^="icon-"] {
  color: var(--color-black) !important;
}

.navbar .nav a:hover {
  color: var(--color-blue-dark) !important;
}

.navbar .nav .active .caret {
  display: none !important;
  color: var(--color-background-yellow);
}

.navbar .icon-bar {
  background: var(--color-black) !important;
  box-shadow: none !important;
  width: 22px !important;
}

.navbar .nav-collapse {
  padding-top: var(--spacing-32);
}

@media (max-width: 768px) {
  .navbar {
    padding-bottom: 0;
  }
}

@media (max-width: 768px) {
  .navbar .brand {
    padding-left: 0px;
  }
}

@media (max-width: 768px) {
  .navbar .nav {
    margin: 0;
  }

  .navbar .nav li a {
    line-height: var(--font-line-height-large);
    font-size: var(--font-size-large);
    margin: 0;
    padding: 0 !important;
    padding-bottom: var(--spacing-32) !important;
  }
}

#sidebar {
  margin-top: 40px;
}

#sidebar #searchBar {
  margin-bottom: 40px;
}

#sidebar #searchBar.sm button {
  height: 56px;
}

#sidebar .search-query {
  border: 1px solid var(--color-grey-extra-light) !important;
  border-radius: 12px !important;
  color: var(--color-black) !important;
  height: 56px !important;
  font-family: var(--font-family-text) !important;
  font-size: 18px !important;
  padding-left: 16px !important;
  padding-right: 48px !important;
}

#sidebar .search-query:hover {
  border: 1px solid var(--color-grey-light) !important;
}

#sidebar .search-query:focus {
  border-color: var(--color-blue) !important;
  box-shadow: inset 0px 0px 0px 1px var(--color-blue) !important;
}

#sidebar textarea,
#sidebar input[type="text"] {
  box-shadow: none;
  transition: none;
  transition: all 0.1s ease-in-out !important;
}

#sidebar form button {
  right: 16px;
}

#sidebar .icon-search:before {
  content: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='11' cy='11' r='6.5' stroke='%23107670' stroke-width='2'/><path d='M16.5 16.5L21 21' stroke='%23107670' stroke-width='2' stroke-linecap='round'/></svg>");
  position: 24px;
  width: 24px;
  height: 24px;
  opacity: 0.72;
}

#sidebar #serp-dd {
  top: 60px;
  box-shadow: var(--drop-shadow-large);
  color: var(--color-blue);
  border-radius: 8px;
}

#sidebar #serp-dd .noResults {
  padding: 16px 24px;
  font-size: var(--font-size-normal);
  color: var(--color-grey);
}

#sidebar #serp-dd a {
  color: var(--color-blue);
  font-size: var(--font-size-normal);
  padding: 16px 24px;
}

#sidebar h3 {
  display: none;
}

#sidebar .nav-list li {
  margin: 0;
}

#sidebar .nav-list a {
  color: var(--color-black);
  font-size: var(--font-size-normal);
  line-height: 40px !important;
  padding: 0 !important;
  text-shadow: none !important;
}

#sidebar .nav-list a:focus {
  color: var(--color-grey-extra-dark);
}

#sidebar .nav-list a:hover {
  color: var(--color-blue-dark);
}

#sidebar .nav-list .active a {
  color: var(--color-blue);
  font-size: var(--font-size-normal);
  line-height: var(--font-line-height-normal);
  font-weight: 600 !important;
}

#sidebar .nav-list .active a i {
  visibility: hidden;
}

#sidebar .nav-list .active a::before {
  content: "-> ";
}

#sidebar .nav-list .active a:focus {
  color: var(--color-blue) !important;
}

#sidebar .nav-list a:hover {
  color: var(--color-blue) !important;
}

@media (max-width: 768px) {
  #sidebar {
    margin-top: 32px;
    padding-bottom: 32px;
  }
}

#category-6 {
  background-size: 200px 54px;
  background-image: url(https://brandfolder.xero.com/NE531UQB/at/nnk89h2hrxmbspnntgbtj49/Xero_Wordmark_Blue.png?auto=webp&format=png&width=200&height=54);
  order: -1;
}

#categoryHead {
  margin-bottom: 32px;
}

#categoryHead h1 {
  font-size: var(--font-size-sub-headline-large);
  line-height: var(--font-line-height-sub-headline-large);
  color: var(--color-black);
  margin-right: 224px;
  margin-bottom: 8px;
}

#categoryHead .sort {
  top: 0;
}

#categoryHead #sortBy {
  border: 1px solid var(--color-grey-extra-light);
  border-radius: 12px;
  padding: 0 12px;
  width: 220px;
  height: 48px;
  margin: 0;
  color: var(--color-black);
  font-family: var(--font-family-text);
  font-size: var(--font-size-normal);
  line-height: var(--font-line-height-normal);
  -webkit-appearance: none;
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACeSURBVHgB7dZbCsMwDETR2aln51mCl9CGtoISEvqInVjkHhD4S5r5swQAAAAAF1DmqfNMr3e2/Y/Ft7dpeaQsdld1UBdHWpUoK3sndeCVQ3tLlI2dVidWuxKHhw/W/hKnhQ/W/yVODx+s30sMEz5Y35cYLnywPpcYNnywtksMHz5Y60FThA9W4vDBShw+WInDB+v5KatKGB4AAAC4gDvnIpU1Nol5ewAAAABJRU5ErkJggg==");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  cursor: pointer;
  padding-right: 28px;
  text-indent: 0.01px;
  text-overflow: "";
}

#categoryHead #sortBy:hover {
  border: 1px solid var(--color-grey-light) !important;
}

#categoryHead #sortBy:focus {
  border: 1px solid var(--color-blue) !important;
  box-shadow: inset 0px 0px 0px 1px var(--color-blue) !important;
  outline: 0;
}

#main-content {
  background-image: none;
  padding-top: 40px;
}

@media only screen and (max-width: 768px) {
  #main-content {
    padding-top: 0;
  }
}

.contentWrapper {
  background-color: var(--color-white);
  border-radius: var(--border-radius-small);
  box-shadow: var(--drop-shadow-small);
  border: none !important;
  padding: var(--spacing-40);
}

.contentWrapper a {
  text-decoration: underline;
  word-break: break-word;
  font-weight: 500;
}

.related {
  border-radius: var(--border-radius-small);
  margin-top: 40px;
}

@media only screen and (max-width: 768px) {
  .contentWrapper {
    padding: 24px 24px;
  }
}

.articleList li {
  margin-top: 18px;
  margin-bottom: 18px;
  padding-left: 24px !important;
}

#serp h1 {
  color: var(--color-black);
  font-size: var(--font-line-height-sub-headline-normal);
  line-height: var(--font-line-height-sub-headline-normal);
  margin-bottom: 12px !important;
}

#serp .articlesFound {
  color: var(--color-grey) !important;
  margin-bottom: 24px;
  font-size: 16px;
}

#serp ul {
  margin-bottom: 0;
}

#serp li {
  margin: 24px 0;
  max-width: 560px;
}

#serp li a {
  font-size: var(--font-size-normal) !important;
  font-weight: 500;
}

#serp li:last-of-type {
  margin-bottom: 0;
}

#serp li:first-of-type {
  margin-top: 0;
}

#serp li p {
  color: var(--color-dark-grey);
  margin-left: 12px;
  font-size: var(--font-size-small);
  line-height: var(--font-line-height-small);
}

#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5,
#fullArticle strong,
#fullArticle p,
#fullArticle i {
  color: var(--color-black);
}

#fullArticle h1,
#fullArticle .title {
  font-family: "Whereby Text";
  font-size: var(--font-size-sub-headline-large);
  line-height: var(--font-line-height-sub-headline-large);
  margin-bottom: var(--spacing-16);
}

#fullArticle h2 {
  font-family: "Whereby Text";
  font-size: var(--font-size-sub-headline-normal);
  line-height: var(--font-line-height-sub-headline-normal);
  font-weight: 400 !important;
  margin: var(--spacing-12) 0;
  margin-top: 32px;
}

#fullArticle h3 {
  font-family: "Whereby Text";
  font-size: var(--font-size-sub-headline-small);
  line-height: var(--font-line-height-sub-headline-small);
  font-weight: 400 !important;
  margin-top: 32px;
  margin-bottom: 12px;
}

#fullArticle h4 {
  font-size: var(--font-size-large);
  line-height: var(--font-size-large);
  margin-top: 32px;
  margin-bottom: 12px;
  font-weight: 600;
}

#fullArticle p {
  margin-bottom: var(--spacing-16);
}

#fullArticle strong {
  font-weight: 600;
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--color-black);
  font-size: var(--font-size-normal);
  line-height: var(--font-line-height-normal);
}

#fullArticle img {
  border: none;
  border: 1px solid var(--color-grey-extra-light);
  padding: 0;
  border-radius: var(--border-radius-extra-small);
}

#fullArticle hr {
  border: none;
  margin: var(--spacing-40) 0;
}

#fullArticle article {
  margin-bottom: 32px;
}

#fullArticle dl {
  margin: var(--spacing-32) 0;
}

#fullArticle dt {
  color: var(--color-black);
  background: none;
  font-size: var(--font-size-normal);
  font-weight: 600;
  line-height: var(--font-line-height-normal);
  padding: 0;
  padding-top: 4px;
  text-align: left;
  width: 32px;
}

#fullArticle dt::after {
  content: ".";
}

#fullArticle dd {
  padding-top: var(--spacing-4);
  margin-left: var(--spacing-40);
  margin-bottom: var(--spacing-16);
}

#fullArticle dd h1,
#fullArticle dd h2,
#fullArticle dd h3,
#fullArticle dd h4,
#fullArticle dd h5,
#fullArticle dd h6 {
  margin: 0;
  margin-bottom: 4px;
  font-size: var(--font-size-large);
  line-height: var(--font-line-height-large);
  font-weight: 600;
  margin: 0;
  color: var(--color-black);
}

#fullArticle dd p {
  margin: 0;
}

#fullArticle dd img {
  margin: 0;
  margin-top: 16px;
  margin-bottom: 24px;
}

#fullArticle ul {
  list-style: none;
  margin-left: 32px;
}

#fullArticle li {
  margin-bottom: 12px;
}

#fullArticle li strong + p {
  margin-top: 0;
}

#fullArticle li:last-of-type {
  margin-bottom: 0;
}

#fullArticle ul li::before {
  content: "•";
  color: var(--color-black);
  font-weight: bold;
  display: inline-block;
  width: 24px;
  margin-left: -24px;
  color: var(--color-blue);
}

/* Our Custom Classes below */
.articleRatings {
  box-shadow: none;
  border-radius: 4px;
  border-color: var(--color-grey-light);
  margin-top: 64px;
}

.beaconContent {
  display: none;
}

.userGuides ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
}

.userGuides li {
  width: 29%;
  border-top: solid 2px var(--color-blue);
  border-top: solid 2px var(--color-grey-extra-light);
  padding: 0;
  padding-bottom: 40px;
  padding-top: 8px;
  margin-left: 2% !important;
  margin-right: 2% !important;
  margin-bottom: 24px !important;
}

.userGuides a {
  text-decoration: none;
  word-break: break-word !important;
}

.userGuides li::before {
  content: "" !important;
  width: 0 !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .userGuides li {
    width: 100%;
  }
}

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input + label {
  flex-grow: 3;
}

.tabs label {
  background: var(--color-grey-extra-light);
  order: 1;
  outline: none;
  display: block;
  padding: 1rem 2rem;
  margin: 0;
  width: auto;
  color: var(--color-dark-grey);
  font-size: var(--font-size-normal);
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}

.tabs label:hover {
  color: var(--color-blue-dark);
}

.tabs label:first-of-type {
  border-top-left-radius: 8px;
}

.tabs label:last-of-type {
  border-top-right-radius: 8px;
}

.tabs [id^="tab"]:checked + label {
  top: 0;
  padding-top: 17px;
  background: var(--color-background-grey);
  color: var(--color-blue);
  font-weight: 500;
}

.tabs [id^="tab"]:checked + label + .tab-content {
  display: block;
  width: 100%;
}

.tabs .tab-content {
  background: var(--color-background-grey);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  display: none;
  flex-grow: 1;
  order: 99;
  padding: 24px;
}

@media (max-width: 768px) {
  .tabs label {
    width: 100%;
  }

  .tabs label:first-of-type,
  .tabs label:last-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.callout {
  border-left: none !important;
  border-radius: 8px;
  padding: 32px !important;
  background: var(--color-background-info-blue) !important;
}

.callout h3 {
  margin: 0 0 12px !important;
  font-size: var(--font-size-sub-headline-small) !important;
  line-height: var(--font-line-height-sub-headline-small) !important;
}

.callout p {
  font-size: var(--font-size-normal) !important;
}

.callout.grey {
  background: var(--color-background-grey) !important;
}

.callout.yellow {
  background: var(--color-background-warning-yellow) !important;
}

.callout.warning {
  background: var(--color-background-error-red) !important;
}

.quick-answers details {
  margin: 0px 0px 12px 12px;
  outline: none;
}

.quick-answers details summary {
  background: var(--color-background-grey);
  padding: 24px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
}

.quick-answers details summary:hover {
  color: var(--color-blue-dark);
}

.quick-answers details[open] {
  background: var(--color-background-grey);
  border-radius: 12px;
  padding: 24px;
  margin: 12px;
  outline: none;
}

.quick-answers details[open] summary {
  padding: 0;
  padding-bottom: 16px;
  box-shadow: none;
  border-radius: 0;
  outline: none;
}

.quick-answers details p {
  margin-left: 20px;
}

/*-----------------------*/
#contactModal {
  border: none !important;
  border-radius: 12px;
  padding: 24px !important;
}

#contactModal h2 {
  border: none;
  color: var(--color-black);
  font-size: var(--font-size-sub-headline-normal);
  padding: 0;
}

#contactModal .form-horizontal .control-label {
  width: 100px;
  text-align: left;
  font-size: var(--spacing-16);
  color: var(--color-black);
}

#contactModal .controls input {
  text-align: left;
  font-size: var(--spacing-16);
  color: var(--color-black);
  border-radius: 8px;
  border: 1px solid var(--color-grey-extra-light);
}

.articleFoot {
  display: none;
}

footer {
  padding-top: 248px;
  color: var(--color-grey-dark) !important;
}

footer p,
footer span,
footer a {
  color: var(--color-grey-dark) !important;
  font-size: var(--font-size-small);
}

body {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  background-image: linear-gradient(180deg, #03291a 0%, #03291a 100%);
}

#category-412,
#category-555 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-408,
#category-583 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-511,
#category-559 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-397,
#category-584 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-407,
#category-585 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-411,
#category-586 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-410,
#category-588 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-713 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
  width: 75% !important;
  margin-top: 25px !important;
}

#category-673 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-674 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-675 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-677 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
}

#category-735 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
  order: -1;
}

#category-714 {
  background-size: 200px 200px;
  background-image: url("/derive-green-logo.svg");
  width: 75% !important;
  margin-top: 25px !important;
}

#collection-category-308,
#support-center {
  display: none;
}