@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 /* 1. GT Standard Regular (Leipäteksti) */
@font-face {
  font-family: 'GT Standard';
  font-style: normal;
  font-weight: 400; 
  font-display: block;
  src: url('/hc/theming_assets/01M5BZNBVQFSBC0N88ZVHWMPHH') format('woff2'),
       url('$assets-gt-standard-l-standard-regular-woff') format('woff');
}

/* 2. GT Standard Bold (Lihavoinnit) */
@font-face {
  font-family: 'GT Standard';
  font-style: normal;
  font-weight: 600; 
  font-display: block;
  src: url('/hc/theming_assets/01M5BZN7J3ZD0PEX4MDEC9R8S3') format('woff2'),
       url('$assets-gt-standard-l-standard-bold-woff') format('woff');
}

/* 3. GT Standard Heavy (Normaalit otsikot) */
@font-face {
  font-family: 'GT Standard';
  font-style: normal;
  font-weight: 800; 
  font-display: block;
  src: url('/hc/theming_assets/01M5BZN938VVHQB7AK8SQ9NN9S') format('woff2'),
       url('$assets-gt-standard-l-standard-heavy-woff') format('woff');
}

/* 4. GT Standard EXTENDED Heavy (Erikoisotsikot, esim. etusivu) */
@font-face {
  font-family: 'GT Standard Extended'; /* Huom: Nimetty erikseen! */
  font-style: normal;
  font-weight: 800; 
  font-display: block; 
  src: url('/hc/theming_assets/01M5C7TD33EBAFBQ7R5A0CDYMT') format('woff2');
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'GT Standard', Inter, Helvetica, Arial, sans-serif;
  font-weight: 800;
}

.hero-frontpage  h1{
  font-family: 'GT Standard Extended', Helvetica, Arial, sans-serif; /* Käyttää leveää fonttia */
  font-weight: 800;
  font-size: 48px;
}
body {
  margin: 0;
}

main {
  display: block;
}


/*Custom HOLVI */
.copy-to-clipboard-container {
  position: relative;
  background-color: #fcede6;
  border-radius: 8px;
  text-wrap: wrap;
  margin-bottom: 24px
}
.copy-to-clipboard-container > .copy-to-clipboard-button {
  position: absolute;
  right: 30px;
  top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  width: 30px;
  height: 30px;
  border: none;
  text-align: center;
  padding: 0;
  color: #a69b8f;
  cursor: pointer;

}

.copy-to-clipboard-container > .copy-to-clipboard-text {
  padding: 30px 30px 30px 24px; /* top, right, bottom, left */
}

/* Remove top margin from the quote block and the heading inside it */
.copy-to-clipboard-text > :first-child,
.copy-to-clipboard-text > :first-child > :first-child {
  margin-top: 2 !important;
}

.copy-to-clipboard-text > :last-child {
  margin-bottom: 0 !important;
}

.copy-to-clipboard-container > .copy-toast {
  position: absolute;
  top: 19px;
  right: 54px; /* just left of the copy icon */
  background: #1F2428;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.copy-to-clipboard-container > .copy-toast.is-visible {
  opacity: 1;
  transform: none;
}

@media only screen and (max-width: 600px) {
  table {
    width:100%;
    overflow-y:scroll;
    display: block;
	}
}
.cta-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    background: #BBE5EE;
    border-radius: 30px !important;
    padding: 1.5rem;
    margin: 2rem 0px;
  
    }
h4.cta-heading {
    font-size: 1.4rem;
    line-height: 1.6rem;
   margin: 0!important;
}
.cta-box .article-content p {
    margin: 0;
}
.cta-box-p .article-content p {
    margin: 0;
}
.cta-box-p p {
  margin:0;
}

.cta-box-p .cta-box-p-content .article-content p {
    margin: 0;
}
.cta-box-p-content .article-content p {
    margin: 0;
}
.cta-box-p {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #BBE5EE;
    padding: 1.5rem;
    margin: 2rem 0px;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.cta-box-p-content {
    display: flex;
    flex-direction: column;
    margin-right: 3rem;
}

p.cta-p {
    margin: 0!important;
    margin-top: 1rem!Important;
}

.article-body .cta-box.cta-box--split {
  display: grid !important;
  border-radius: 30px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "heading action"
    "meta    action";
  justify-content: normal !important;
  align-items: center;
  column-gap: 2rem;
  row-gap: 0.25rem;
  padding-left: 2.75rem !important;    /* text distance from left edge */
  padding-right: 2.75rem !important;
}

.article-body .cta-box--split > .cta-heading {
  grid-area: heading;
  margin: 0 !important;
  align-self: end;
}

.article-body .cta-box--split > .cta-meta {
  grid-area: meta;
  margin: 0 !important;
  align-self: start;
}

.article-body .cta-box--split > .cta-action {
  grid-area: action;
  justify-self: end;
  margin: 0 1rem 0 0 !important;       /* button distance from right edge (on top of padding) */
}

@media (max-width: 600px) {
  .article-body .cta-box.cta-box--split {
    grid-template-columns: 1fr !important;
    grid-template-areas: "heading" "meta" "action";
  }
  .article-body .cta-box--split > .cta-action {
    justify-self: start;
    margin: 0.75rem 0 0 0 !important;
  }
}


.notebox {
    background: #FBE7FD !important;
    padding: 2rem !important;
    margin: 1.5rem 0 !important;
    border-radius: 30px !important;
    border: none !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    box-sizing: border-box !important;
}

h3.notebox-heading {
    border-radius: 30px !important;
    font-size: 1.3rem;
    line-height: 1.6rem;
    margin: 0 0 1rem!Important;
}
p.notebox-paragraph {
    border-radius: 30px !important;
    margin: 0!Important;
}

.notebox ul:last-child {
    margin-bottom: 0 !important;
  
}

.external-icon {
    margin-right: 10px;
}

a.see-all-sections {
    border: solid 1px #23282d;
    padding: 1rem;
  border-radius: 2px;
}
  .hero-short .hero-content, .hero-subtitle .hero-content {
    width: 100%;
}

ul.social-wrapper {
    display: flex;
}
.text-none a {
  display: block;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  color: #fff;
  margin-right: 1.3rem;
  background-size: contain;
  background-repeat: no-repeat;
  width: 32px;
  height: 32px; }

.text-none.twitter a {
  background-image: url("/hc/theming_assets/01HZM3GP74BWDRD0P6FXRQVQ8K"); }

.text-none.facebook a {
  background-image: url("$assets-facebook_white-png"); }

.text-none.instagram a {
  background-image: url("$assets-instagram_white-png"); }

.text-none.youtube a {
  background-image: url("$assets-youtube_white-png"); }

.text-none.linkedin a {
  background-image: url("/hc/theming_assets/01HZM3GP290XH8QDHHCP7M83Y4"); }


.footer .legal-list-item {
    padding: 1rem 1rem 1rem 0rem;
    font-size: .625rem;
}
a.pagination-next-link:hover {
  color: white;
}
a.pagination-last-link:hover {
    color: white;
}
h2.search-result-title a {
    font-weight: bold;
}
.breadcrumb-divider {
    border-bottom: 1px solid #E8EDF0;
    margin-bottom: 20px;
}

.footer .fineprint {
  font-size: .625rem;
  padding-top: 2rem;
  padding-bottom: 3rem; 
}

.footer .legal-list {
  font-size: .625rem;
}

ul.legal-list-wrapper {
  display: flex;
}
li.legal-list-item {
  padding-right: 0.5rem;
}

  

#site-footer li a,
  .sitemap li a {
    font-weight: 400;
    text-decoration: none !important; 
}
    #site-footer li a:not(:hover),
    .sitemap li a:not(:hover) {
      color: inherit; }
    #site-footer li a:hover,
    .sitemap li a:hover {
      text-decoration: none;
      color: rgba(35, 40, 45, 0.75); }

.section-container.section-page {
    display: flex;
    justify-content: flex-start;
}

.error-page .search-container {
    position: relative;
    max-width: 100%;
    /*border: solid 1px #23282d;*/
}
div#header-language-selector {
  font-size: 0.9rem;
}
a.sidenav-item.current-article {
    font-weight: bold;
}
/*.home-page-image {
  width: 44px;
  height: auto;
  margin-bottom: 0.5rem;

}*/
section.section.knowledge-base {
  margin-top: 60px;
}
.collapsible-sidebar-body li {
    padding: 5px 0px 0px 0px;
    line-height: 1.5;
    border-bottom: 1px solid #D0DDE1;
}
span#section-articles-title {
  font-size: 1.2rem;
  font-family: 'GT Standard', Helvetica, Arial, sans-serif;
  font-weight: 800;
}
.homepage-link a {
   font-family: 'GT Standard', Helvetica, Arial, sans-serif;
  font-weight: 600;
}

.lead {
  font-size: 1.5rem;
 font-family: 'GT Standard', Helvetica, Arial, sans-serif;
  font-weight: 400; 
  line-height: 1.9rem;
}

section.help {
  background: #f7f7f7;
  padding: 2rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  border-radius: 6px;
}
.help-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-content {
  display: flex;
  flex-direction: column;
}
.help-content a {
  text-decoration: underline;
  
  transition: all 0.2s linear;
}
.help-content a:hover, .help-content a:focus {
color: #575A61;
}

.help-img {
    display: flex;
    justify-content: center;
}
.help-img img {
    display: flex;
}

a.btn-dark.btn {
    text-decoration: none;
    color: #F3FCFF !important;
}
.btn {
    display: inline-block;
    font-weight: 400;
    color: #fff!important;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #23282d;
    border: 2px solid #23282d;
    padding: 0.5rem 2rem!important;
    font-size: .975rem;
    line-height: 2rem!important;
    border-radius: 0.125rem;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.btn-dark, .btn-outline-dark, .btn-outline-light {
    margin: 1rem 0;
    min-width: 11rem;
}

.btn-dark {
  color: #ffffff !important;
  background-color: #23282d;
  border: 1px solid #23282d;
  border-radius: 9999px;
}

.btn-dark:hover {
  color: #fff !important;
  background-color: #064545 !important;
  border-color: #064545;
  text-decoration: none !important;
}

h1 {
  font-size: 3rem;
  margin: 0.67em 0;
  line-height: 1.2;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
      text-decoration: underline;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  font-weight: 300;
}

a:visited {
  color: inherit; 
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: 600;
}

/* Bold + italic, in either nesting order */
.article-content strong em,
.article-content em strong,
.article-content b i,
.article-content i b,
.article-content strong i,
.article-content i strong,
.article-content b em,
.article-content em b {
  font-weight: 700 !important;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/***** Base *****/
* {
  box-sizing: border-box;
}

body {
  background-color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #23282d;
}

@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'GT Standard', Helvetica, Arial, sans-serif;
  font-weight: 800;
  margin-top: 0;
}

h1 {
  font-size: 3.2rem;
  line-height: 1.2;
}

h2 {
  font-size: 2.2rem;
  line-height: 1.2;
}

h3 {
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 600;
}

h4 {
  font-size: 16px;
  line-height: 1.2;
}

a {
  color: rgba(2, 51, 51, 1) !important;
  text-decoration: none;
}

a:visited {
  color: rgba(2, 51, 51, 1) !important;
}

a:hover, a:active, a:focus !important {
  text-decoration: underline;
  color: #0B7E80 !important;
}

input,
textarea {
  color: #000;
  font-size: 1rem;
}

input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
}

input:not([type="checkbox"]) {
  outline: none;
}

input:not([type="checkbox"]):focus {
  border: 1px solid rgba(35, 40, 45, 1);
}

input[disabled] {
  background-color: #ddd;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}

select:focus {
  border: 1px solid rgba(35, 40, 45, 1);
}

select::-ms-expand {
  display: none;
}

textarea {
  border: 1px solid #ddd;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}

textarea:focus {
  border: 1px solid rgba(35, 40, 45, 1);
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/***** Buttons *****/
.button, .split-button button, .section-subscribe button, .article-subscribe button, .community-follow button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
  background-color: transparent;
  border: 1px solid rgba(35, 40, 45, 1);
  border-radius: 2px;
  color: rgba(35, 40, 45, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
.article-subscribe button:hover {
  color: white;
}
.article-votes-controls .button:hover {
  color: white!Important;
}
@media (min-width: 768px) {
  .button, .split-button button, .section-subscribe button, .article-subscribe button, .community-follow button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
    width: auto;
  }
}

.button:visited, .split-button button:visited, .section-subscribe button:visited, .article-subscribe button:visited, .community-follow button:visited, .requests-table-toolbar .organization-subscribe button:visited, .subscriptions-subscribe button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .button:hover, .split-button button:hover, .section-subscribe button:hover, .article-subscribe button:hover, .community-follow button:hover, .requests-table-toolbar .organization-subscribe button:hover, .subscriptions-subscribe button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .button:active, .split-button button:active, .section-subscribe button:active, .article-subscribe button:active, .community-follow button:active, .requests-table-toolbar .organization-subscribe button:active, .subscriptions-subscribe button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .button:focus, .split-button button:focus, .section-subscribe button:focus, .article-subscribe button:focus, .community-follow button:focus, .requests-table-toolbar .organization-subscribe button:focus, .subscriptions-subscribe button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .button.button-primary, .split-button button.button-primary, .section-subscribe button.button-primary, .section-subscribe button[data-selected="true"], .article-subscribe button.button-primary, .article-subscribe button[data-selected="true"], .community-follow button.button-primary, .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected="true"], .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected="true"], .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link {
  background-color: rgba(35, 40, 45, 1);
  color: rgba(35, 40, 45, 1);
  text-decoration: none;
}

.button.button-primary:hover, .split-button button:hover, .section-subscribe button.button-primary:hover, .section-subscribe button:hover[data-selected="true"], .article-subscribe button.button-primary:hover, .article-subscribe button:hover[data-selected="true"], .community-follow button.button-primary:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button:hover[data-selected="true"], .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button:hover[data-selected="true"], .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .button.button-primary:focus, .split-button button.button-primary:focus, .section-subscribe button.button-primary:focus, .section-subscribe button:focus[data-selected="true"], .article-subscribe button.button-primary:focus, .article-subscribe button:focus[data-selected="true"], .community-follow button.button-primary:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button:focus[data-selected="true"], .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button:focus[data-selected="true"], .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .button.button-primary:active, .split-button button.button-primary:active, .section-subscribe button.button-primary:active, .section-subscribe button:active[data-selected="true"], .article-subscribe button.button-primary:active, .article-subscribe button:active[data-selected="true"], .community-follow button.button-primary:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button:active[data-selected="true"], .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button:active[data-selected="true"], .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active {
  background-color: #000;
  border-color: #000;
}

.button[data-disabled], .split-button button[data-disabled], .section-subscribe button[data-disabled], .article-subscribe button[data-disabled], .community-follow button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .subscriptions-subscribe button[data-disabled], .pagination-next-link[data-disabled], .pagination-prev-link[data-disabled], .pagination-first-link[data-disabled], .pagination-last-link[data-disabled] {
  cursor: default;
}

.button-large, input[type="submit"] {
  cursor: pointer;
  background-color: rgba(35, 40, 45, 1);
  border: 0;
  border-radius: 4px;
  color: white;
  font-size: 15px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}

@media (min-width: 768px) {
  .button-large, input[type="submit"] {
    width: auto;
  }
}

.button-large:hover, .button-large:active, .button-large:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus {
  background-color: #000;
}

.button-large[disabled], input[type="submit"][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #069595;
  border: 1px solid #ddd;
  background-color: transparent;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(2, 51, 51, 1);
  border: 1px solid #ddd;
  background-color: #f7f7f7;
}

/***** Split button *****/
.split-button {
  display: flex;
}

.split-button button {
  background-color: rgba(35, 40, 45, 1);
  border: 0;
  color: white;
  height: 32px;
  line-height: 16px;
  outline-color: rgba(35, 40, 45, 1);
  border-radius:300px;
}

[dir="rtl"] .split-button button:not(:only-child):first-child {
  border-left: 1px solid rgba(35, 40, 45, 1);
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

[dir="ltr"] .split-button button:not(:only-child):first-child {
  border-right: 1px solid rgba(35, 40, 45, 1);
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}

[dir="rtl"] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

[dir="ltr"] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
table {
   margin-bottom: 2rem;
   width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;

}
table, th, td {
 border: 1px solid #D0DDE1;
  font-size: 15px;
}
table .article-content p {
    margin: 0!Important;
}
table p {
    margin: 0!Important;
    margin-bottom: 0.5rem!important;
    margin-top: 0.5rem!important;
}
tr {
  padding: 1rem!important;
}
th {
  background: #D0DDE1;
}
td {
  padding: 1rem!important;
}
thead tr:first-child {
    background: #e9f3f9;
    font-weight: 600;
  	font-size: 1.2rem;
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
    vertical-align: middle;
}

@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}

.table th,
.table th a {
  color: #069595;
  font-size: 13px;
  text-align: left;
}

[dir="rtl"] .table th, [dir="rtl"]
.table th a {
  text-align: right;
}

.table tr {
  border-bottom: 1px solid #D0DDE1;
  display: block;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}

.table td {
  display: block;
}

@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}

@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}

@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

/***** Forms *****/
.form {
  max-width: 650px;
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 15px;
  margin-bottom: 5px;
  font-weight: 500;
}

.form-field input {
  border: 1px solid #DCE6E8;
  border-radius: 2px;
  padding: 15px;
  width: 100%;
}

.form-field input:focus {
  border: 1px solid rgba(35, 40, 45, 1);
}

.form-field input[type="text"] {
  border: 1px solid #DCE6E8;
  border-radius: 2px;
}

.form-field input[type="text"]:focus {
  border: 1px solid rgba(35, 40, 45, 1);
}

.form-field input[type="checkbox"] {
  width: auto;
}

.form-field .nesty-input {
  border-radius: 4px;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}

.form-field .nesty-input:focus {
  border: 1px solid rgba(35, 40, 45, 1);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(35, 40, 45, 1);
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type="checkbox"] + label {
  margin: 0 0 0 10px;
}

.form-field .optional {
  color: #626363;
  margin-left: 4px;
}

.form-field p {
  color: #064545;
  font-size: 12px;
  margin: 5px 0;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: #064545;
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}

.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}

.form .suggestion-list li {
  padding: 10px 0;
}

.form .suggestion-list li a:visited {
  color: rgba(2, 51, 51, 1);
}

/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 80px;
  justify-content: space-between;
}

@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

.logo img {
  max-height: 37px;
  vertical-align: middle;
}

.logo span {
  margin: 0 10px;
  color: rgba(35, 40, 45, 1);
}

.logo a {
    font-family: 'GT Standard', Helvetica, Arial, sans-serif;
    font-weight: 400;
    display: flex;
    align-items: center;
  font-size:14px;
}

.logo a:hover, .logo a:focus, .logo a:active {
  text-decoration: none;
}

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

.user-nav[aria-expanded="true"] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}

.user-nav[aria-expanded="true"] > a {
  display: block;
  margin: 20px;
}

.user-nav[aria-expanded="true"] > .user-nav-list li {
  display: block;
}

.user-nav[aria-expanded="true"] > .user-nav-list a {
  display: block;
  margin: 20px;
}

.user-nav-list {
  display: block;
  list-style: none;
}

.user-nav-list > li {
  display: inline-block;
  padding-right: 20px;
     font-family: 'GT Standard', Helvetica, Arial, sans-serif;
  font-weight: 400;

}

.nav-wrapper-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: flex;
    align-items: center;
  }
}

.nav-wrapper-desktop a {
  border: 0;
  color: rgba(2, 51, 51, 1);
  display: none;
  font-size: 16px;
  padding: 0 20px 0 0;
  width: auto;
}

@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}

[dir="rtl"] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}

.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: #8D969D;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}

.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}

.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 5px;
  vertical-align: middle;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: black;
}

.nav-wrapper-mobile .menu-button-mobile[aria-expanded="true"] .icon-menu {
  background: #f3f3f3;
}

.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded="false"] {
  display: none;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded="true"] {
  display: block;
}

.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}

.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}

.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}

.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}

.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(2, 51, 51, 1);
  cursor: pointer;
  text-align: start;
}

.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}

.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(2, 51, 51, 1);
}

.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}

.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}

.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}

.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}

[dir="rtl"] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}

[dir="rtl"] .skip-navigation {
  left: initial;
  right: -999px;
}

.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}

[dir="rtl"] .skip-navigation:focus, [dir="rtl"] .skip-navigation:active {
  left: initial;
  right: auto;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
  font-size: 0.9rem;
}

.user-info .dropdown-toggle::after {
  display: none;
}

@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}

.user-info > button {
  border: 0;
  color: rgba(2, 51, 51, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > button:hover, .user-info > button:focus {
  color: rgba(2, 51, 51, 1);
  background-color: transparent;
}

.user-info > button::after {
  color: rgba(2, 51, 51, 1);
  padding-right: 15px;
}

[dir="rtl"] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}

@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}

#user #user-name:hover {
  text-decoration: underline;
}

/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}

.avatar img {
  height: 40px;
  width: 40px;
}

.avatar .icon-agent {
  color: rgba(35, 40, 45, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: rgba(35, 40, 45, 1);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  margin-top: 60px;
      padding: 4rem 0rem 2rem 0rem;
  background-color: #f5f5f5;
  color: #23282d;
}

.footer a {
  color: #23282d;
}
.sub-footer {
  display: flex;
  justify-content: space-between;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
}

@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 100%;
  }
}

.footer-language-selector button {
  color: #023333;
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #069595;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
}

@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}

.breadcrumbs li {
  color: #069595;
  display: inline;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumbs li + li::before {
  content: "\00BB";
  margin: 0 4px;
}

.breadcrumbs li a:visited {
  color: rgba(2, 51, 51, 1);
}
.breadcrumbs li a {
    font-weight: normal;
}

/***** Search field *****/
.search-container {
  position: relative;
  max-width: 100%;
  width:100%;
}
.search-container .search {
 border-color: white;
}
.search {
  border-color: #23282d;
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
  max-width:100%;
  border-radius: 300px;
      width: 100%;
}
nav.sub-nav .search {
  border: solid 1px #23282d;
  border-radius: 2px;
}
.search:focus-within {
  border-color: rgba(35, 40, 45, 1);
}
.search input[type="search"],
.search .clear-button {
  background-color: #fff;
  border-radius: 300px;
  border: solid 1px #000;
}

.search-full input[type="search"],
.search-full .clear-button {
  border-color: #fff;
}

.search input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 60px;
  width: 100%;
}

.search input[type="search"]:focus {
  color: #555;
}

.search input[type="search"]::-webkit-search-decoration, .search input[type="search"]::-webkit-search-cancel-button, .search input[type="search"]::-webkit-search-results-button, .search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.search input[type="search"]:-webkit-autofill, .search input[type="search"]:-webkit-autofill:hover, .search input[type="search"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}

.search .clear-button:hover {
  background-color: rgba(35, 40, 45, 1);
  color: #fff;
}

.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(35, 40, 45, 1);
}

.search-has-value .clear-button {
  display: flex;
}

[dir="ltr"] .search input[type="search"] {
  padding-left: 40px;
  padding-right: 20px;
}

[dir="ltr"] .search-has-value input[type="search"] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}

[dir="ltr"] .search-has-value input[type="search"]:focus {
  border-right-color: rgba(35, 40, 45, 1);
}

[dir="ltr"] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}

[dir="ltr"] .search .clear-button:focus {
  border-left-color: rgba(35, 40, 45, 1);
}

[dir="rtl"] .search input[type="search"] {
  padding-left: 20px;
  padding-right: 40px;
}

[dir="rtl"] .search-has-value input[type="search"] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}

[dir="rtl"] .search-has-value input[type="search"]:focus {
  border-left-color: rgba(35, 40, 45, 1);
}

[dir="rtl"] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}

[dir="rtl"] .search .clear-button:focus {
  border-right-color: rgba(35, 40, 45, 1);
}

.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 15px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #777;
  pointer-events: none;
}

[dir="rtl"] .search-icon {
  left: auto;
  right: 15px;
}
/***** Header search: icon + popup *****/
.search-icon-wrapper {
  position: relative;
  top: 8px;
  left: -8px;
  display: flex;
  align-items: center;
}
.search-icon-wrapper .header-search-toggle {
  display: flex !important; /* stops your theme's header link styles from stretching the link */
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  color: #23282d;
  transition: background-color .2s ease;
}
.search-icon-wrapper .header-search-toggle:hover,
.search-icon-wrapper .header-search-toggle[aria-expanded="true"] { background: rgba(0,0,0,.06); }
.search-icon-wrapper .header-search-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245,191,160,.9); }

.search-icon-header {
  display: block;
  width: 22px;
  height: 22px;
  color: inherit;
  pointer-events: none;
}

/* Popup header search panel + open/close animation */
.header-search-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 1000;
  width: min(440px, calc(100vw - 32px));
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 40px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  white-space: normal;
  text-align: left;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s;
}
.header-search-panel.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s;
}
.header-search-panel button,
.header-search-panel .clear-button { display: none !important; } /* the theme's own clear button */

/* Zendesk's instant-search dropdown inside the panel */
.header-search-panel zd-search-autocomplete,
.header-search-panel .search-autocomplete {
  margin-top: 12px;
  border-radius: 10px !important;
  overflow: hidden;
}

/* Input */
.header-search-form { margin: 0; }
.header-search-panel .header-search-form input[type="search"] {
  width: 800%; height: 48px; margin: 0;
  padding: 0 12px 0 40px;
  font-size: 16px; color: #24282d;
  border: 1px solid #e3e5e8; border-radius: 100px; outline: none;
  background: #f7f8f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 12'%3E%3Ccircle cx='4.5' cy='4.5' r='4' fill='none' stroke='%2368737d'/%3E%3Cpath stroke='%2368737d' stroke-linecap='round' d='M11 11L7.5 7.5'/%3E%3C/svg%3E") no-repeat 14px center;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.header-search-panel .header-search-form input[type="search"]:focus {
  background-color: #fff;
  border-color: #24282d;
  box-shadow: 0 0 0 2px rgba(245,191,160,.6);
}
.header-search-form input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin: 0 -2px 0 8px;
  cursor: pointer; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='%2324282d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
  transition: opacity .15s ease;
}
.header-search-form input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }

/* remove from the wrapper — keep it unrounded and unclipped */
.search,
form.search {
  border-radius: 0 !im;
  overflow: visible;
}

/* round only the input */
.search input[type="search"] {
  border-radius: 9999px;   /* full pill */
  padding-left: 48px;      /* room for the magnifier icon if it overlaps */
}

/* optional: give the dropdown its own, softer corners */
.search-autocomplete,
zd-search-autocomplete {
  border-radius: 12px !important;
  overflow: hidden;        /* only here is clipping fine */
}

/* Suggestions list */
.header-search-results {
  list-style: none; margin: 10px 0 0; padding: 0;
  max-height: min(65vh, 480px);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #d5d9dd transparent;
  transition: opacity .15s ease;
}
.header-search-results[hidden] { display: none; }
.header-search-results.is-loading { opacity: .55; }
.header-search-results::-webkit-scrollbar { width: 6px; }
.header-search-results::-webkit-scrollbar-thumb { background: #d5d9dd; border-radius: 3px; }

.header-search-results a,
.header-search-results a:hover,
.header-search-results a:focus,
.header-search-results a:visited {
  display: block; padding: 10px 12px; border-radius: 8px !important;
  color: #24282d; text-decoration: none !important;
  overflow-wrap: anywhere;
  transition: background-color .12s ease;
}
.header-search-results a:hover,
.header-search-results [aria-selected="true"] a { background: #f4f5f6; }

.header-search-results li[role="option"] { animation: hs-in .18s ease both; }
@keyframes hs-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.hs-title { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
.hs-snippet {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 3px; font-size: 13px; line-height: 1.45; color: #68737d;
}
.hs-snippet mark { background: none; color: #24282d; font-weight: 600; }
.hs-status { padding: 10px 12px; font-size: 13px; color: #68737d; }
.hs-all { border-top: 1px solid #eef0f2; margin-top: 4px; padding-top: 4px; }
.hs-all a { font-size: 13px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .header-search-panel, .header-search-panel.is-open { transition: none; }
  .header-search-results li[role="option"] { animation: none; }
}

/***** Hero component *****/
.hero-frontpage {
  display: flex;
  height: 550px;
  padding: 0 20px;
  text-align: left;
  width: 100%;
   font-family: 'GT Standard Extended'; /* Huom: Nimetty erikseen! */
  font-style: normal;
  font-weight: 800; 
}

.hero {
 background-image: url(/hc/theming_assets/01M5BZ3ZZGJ1T7GK1H5M6MCVPC);
  background-position: center center;
  background-size: cover;
  height: 550px;
  padding: 0 20px;
  text-align: left;
  width: 100%;
  display: flex;
}
.hero-frontpage-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
  text-align:center;
}
.hero-frontpage-inner {
  display: flex;
  flex-direction: row;
   width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  align-items: center;
}
.hero-frontpage-img {
  width: 40%;
  display: flex;
  justify-content: end;
}
.hero-frontpage-img img {
  width:100%;
}
.hero-frontpage-content h1 {
    margin-bottom: 0rem;
   font-family: 'GT Standard Extended'; /* Huom: Nimetty erikseen! */
  font-style: normal;
  font-weight: 800; 
  text-align:center;
}
.hero-content {
    display: flex;
    flex-direction: column;
  width:100%;
}
.hero-inner {
  display: flex;
  flex-direction: row;
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
}

.hero-short {
    display: flex;
    align-items: center;
  height: 300px;
  padding: 0 20px;
  text-align: left;
  width: 100%;
  background: #DAEA9A;  
}

.hero-error {
    display: flex;
    align-items: center;
  height: 400px;
  padding: 0 20px;
  text-align: left;
  width: 100%;
  background: #DAEA9A;  
}

.hero-subtitle {
    display: flex;
    align-items: center;
  height: 400px;
  padding: 0 20px;
  text-align: left;
  width: 100%;
  background: #FFBD9C;  
  background-image: url("/hc/theming_assets/01M5BZ3ZZGJ1T7GK1H5M6MCVPC");
    background-position: center center;
    background-size: cover;
  font-family: 'GT Standard', Helvetica, Arial, sans-serif;
  font-weight: 400;
}

.hero-submit {
  background: #DAEA9A;  
}
.hero-submit h1 {
  margin-bottom: 0;
}
.hero-section {
    background: #DAEA9A;
    height: 400px;
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}

@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    margin: 0;
  }
}

.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}

.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}

.page-header-description {
  font-size: 1.5rem;
    font-weight: 400;
  margin: 0 0 30px 0;
  word-break: break-word;
   font-family: 'GT Standard', Helvetica, Arial, sans-serif;
  font-weight: 400;
}

@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}

.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}

@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}

.sub-nav .breadcrumbs {
  margin: 0;
}

.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}

@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}

.sub-nav input[type="search"]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: grid;
  /* Automatically adjusts column count (3 columns, 2 columns, or 1 column) based on zoom level */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px; /* Controls the spacing between cards */
  padding: 0;
  list-style-type: none;
}
}

@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}

.blocks-item {
  border: solid 1px #EDF5CD;
  background:#EDF5CD;
  border-radius: 30px;
  box-sizing: border-box;
  color: rgba(35, 40, 45, 1);
 /* Zoom & Responsiveness Fixes */
  display: flex;
  flex-direction: column; /* Stacks the icon and text nicely inside the card */
  width: 100%;            /* Allows the card to perfectly fill its grid slot */
  height: auto;           /* Allows the card to grow taller if zoomed text wraps */
  margin: 0;              /* Removed because the Grid 'gap' property handles spacing */

}

img.home-page-image {
    width: 60px;
    margin-bottom: 20px;
}
}

@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}

.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: #DAEA9A;
   border: solid 1px #DAEA9A;
}

.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(35, 40, 45, 1);
  text-decoration: none;
}

.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}

.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}

.blocks-item-internal a {
  color: rgba(2, 51, 51, 1);
}

.blocks-item-link {
  color: rgba(35, 40, 45, 1);
  padding: 50px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;   /* was: center */
  border-radius: inherit;
}

.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}

.blocks-item-link:focus {
  outline: 2;
  text-decoration: none;
 border:solid 1px black;
}

.blocks-item-title {
  margin-bottom: 0;
  font-size: 1.3rem;
   font-family: 'GT Standard', Helvetica, Arial, sans-serif;
  font-weight: 800;

}

.blocks-item-description {
  margin: 0;
}

.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/***** Homepage *****/
.section {
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .section {
    margin-bottom: 30px;
  }
}

.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
}

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}

.promoted-articles-item {
  flex: 1 0 auto;
}

@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%;
    /* Three columns on desktop */
  }
  [dir="rtl"] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}

.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}

.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}

.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}

.promoted-articles-item:last-child a {
  border: 0;
}

@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}

.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01M5BZ3ZZGJ1T7GK1H5M6MCVPC);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}

.community a {
  color: rgba(2, 51, 51, 1);
  text-decoration: underline;
}

.community a:visited {
  color: rgba(2, 51, 51, 1);
}

.community a:hover, .community a:active, .community a:focus {
  color: rgba(79, 79, 79, 1);
}

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}

.recent-activity-list {
  padding: 0;
}

.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}

.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}

.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}

@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}

.recent-activity-item-link {
  font-size: 14px;
}

.recent-activity-item-meta {
  color: rgba(2, 51, 51, 1);
  margin: 15px 0 0 0;
  float: none;
}

@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir="rtl"] .recent-activity-item-meta {
    float: left;
  }
}

.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}

.recent-activity-item-comment {
  padding-left: 5px;
}

[dir="rtl"] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}

.recent-activity-item-comment::before {
  display: inline-block;
}

.recent-activity-controls {
  padding-top: 15px;
}

.recent-activity-controls a {
  color: rgba(2, 51, 51, 1);
  text-decoration: underline;
}

.recent-activity-controls a:visited {
  color: rgba(2, 51, 51, 1);
}

.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(79, 79, 79, 1);
}

.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(35, 40, 45, 1);
  width: 16px;
  height: 16px;
}

.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}

[dir="rtl"] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-start;
}

.category-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 100%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .section-tree {
    display: block;          /* switch off flex */
    column-count: 2;
    column-gap: 10%;
  }
  .section-tree .section {
    display: inline-block;   /* stops a section splitting across columns */
    width: 100%;
    break-inside: avoid;
    margin-bottom: 2.5rem;
  }
  .section-tree-title {
    margin-top: 0;           /* so the right column's first heading isn't pushed down */
  }
}

.section-tree-title {
  margin-bottom: 0;
  margin-top: 2rem;
  font-size: 2rem;
  font-weight: 600;
}

.section-tree-title a {
  color: rgba(2, 51, 51, 1);
}

.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 0.3rem 0;
}

.article-list-item a {
  color: rgba(2, 51, 51, 1);
}

.icon-star {
  color: rgba(35, 40, 45, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}

.section-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}

.section-list {
  margin: 40px 0;
}

.section-list-item {
  border-bottom: 1px solid #e7e7e7;
  font-size: 18px;
    padding: 17px 10px 17px 0px;
   font-family: 'GT Standard', Helvetica, Arial, sans-serif;
  font-weight: 600;
}
.section-list-item:hover {
  background: #F7F7F7;
}

.section-list-item:first-child {
  border-top: 1px solid #e7e7e7;
}

.section-list-item a {
  align-items: center;
  color: rgba(2, 51, 51, 1);
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}

.see-all-sections-trigger[aria-hidden="true"] {
  display: none;
}
.section-tree-title a {
   font-family: 'GT Standard', Helvetica, Arial, sans-serif;
  font-weight: 800;
}

.subsection { margin-bottom: 48px; }
.subsection-title { font-size: 24px; margin: 0 0 16px; }
.subsection-title a { color: inherit; text-decoration: none; }
.subsection-title a:hover { text-decoration: underline; }
.see-all-articles { display: inline-block; margin-top: 16px; }
/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}

/***** Subsection tiles (category page) *****/
.subsection-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.subsection-list-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  transition: border-color .15s ease, background-color .15s ease;
}
.subsection-list-item a:hover,
.subsection-list-item a:focus-visible {
  border-color: #c9d68a;
  background: #f6f8e8; /* light tint of your hero green */
}
.subsection-list-item span { flex: 1; }
.subsection-icon { flex-shrink: 0; opacity: .6; }
.subsection-chevron { flex-shrink: 0; width: 14px; height: 14px; opacity: .6; }

/* Even spacing between tiles and the article list */
.subsection-list + .section-list { margin-top: 24px; }

/* Section page: subsection + "More articles" headings */
.subsection-title,
.subsection-title a {
  font-family: 'GT Standard', Helvetica, Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: rgba(2, 51, 51, 1);
  text-decoration: none;
}
.subsection-title {
  margin: 0 0 8px !important;
}
.subsection {
  margin-bottom: 56px;
}


@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px 0 100px;
  }
}

.article-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}

.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}

.article-avatar {
  margin-right: 10px;
}

.article-author {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%;
    /* Take entire row */
  }
}

.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.article [role="button"] {
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}

@media (min-width: 768px) {
  .article [role="button"] {
    width: auto;
  }
}

.article-info {
  max-width: 100%;
}

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

.article-body a {
  color: rgba(2, 51, 51, 1);
  text-decoration: underline;
  font-weight: normal;
}

.article-body a:visited {
  color: rgba(2, 51, 51, 1);
}

.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #C4D5D9;
}

.article-body img {
  height: auto;
  max-width: 100%;
}

.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .article-body ul, [dir="rtl"]
.article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}

.article-body ul {
  list-style-type: disc;
}

.article-body li {
 padding-bottom: 0.5rem;
}

.article-body li {
 padding-bottom: 0.5rem;
}

/* Nested lists: no extra space after the last sub-item, so gaps stay even */
.article-body li > ul > li:last-child,
.article-body li > ol > li:last-child {
  padding-bottom: 0;
}

/* Tighter spacing between sub-bullets */
.article-body li li {
  padding-bottom: 0.25rem;
}

.article-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.article-body blockquote {
  border-left: 1px solid #ddd;
  padding: 0 15px;
}

.article-body > p:last-child {
  margin-bottom: 1;
}

/* 1. Article Body Container & Paragraphs */
.article-content {
  line-height: 1.6;
  margin: 30px 0 24px;
  word-wrap: break-word;
}

/* General paragraphs */
.article-content p,
.article-body p {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* Paragraphs and headings inside tables */
.article-content table p,
.article-body table p,
.article-content table th,
.article-body table th,
.article-content table h2,
.article-content table h3,
.article-content table h4,
.article-body table h2,
.article-body table h3,
.article-body table h4 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}

/* No extra space below the last paragraph in a cell */
.article-content td p:last-child,
.article-content th p:last-child,
.article-body td p:last-child,
.article-body th p:last-child {
  margin-bottom: 0 !important;
}

/* 2. Base Heading Spacing & Weights */
.article-content h1 {
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1.2rem;
}

.article-content h2 {
  font-weight: 500;
  margin-top: 2.2rem;
  margin-bottom: 1rem;
}

.article-content h3 {
  font-weight: 300;
  margin-top: 1.9rem;
  margin-bottom: 1rem;
}

.article-content h4,
.article-content h5,
.article-content h6 {
  font-weight: 300;
  margin-top: 1.7rem;
  margin-bottom: 1rem;
}

/* 3. Heading Sizes & Line Heights */
.article-content h1 { font-size: 2.4rem; line-height: 1.2; font-family: 'GT Standard';font-style: normal;font-weight: 800;  }
.article-content h2 { font-size: 2rem; line-height: 1.25; font-family: 'GT Standard';font-style: normal;font-weight: 800;}
.article-content h3 { font-size: 1.5rem; line-height: 1.3; font-family: 'GT Standard';font-style: normal;font-weight: 800;}
.article-content h4 { font-size: 1.3rem; line-height: 1.35; font-family: 'GT Standard';font-style: normal;font-weight: 800;}
.article-content h5 { font-size: 1.0rem; line-height: 1.4; font-family: 'GT Standard';font-style: normal;font-weight: 800;}
.article-content h6 { font-size: 0.875rem; line-height: 1.4; font-family: 'GT Standard';font-style: normal;font-weight: 800;}

/* 4. Tightened Space for Stacked Headings */
.article-content :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 25px !important;
}

/* 5. Margin Resets (Top of Article & Inside Tables) */
.article-content > :first-child { 
  margin-top: 0 !important; 
}

/* 6. Margin Resets (Inside notebox) */
.notebox > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* 6. Margin Resets (Inside feature-box) */
.feature-box > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* Restores full spacing for headings placed directly after noteboxes or feature boxes */
.notebox + h1,
.notebox + h2,
.notebox + h3,
.notebox + h4,
.feature-box + h1,
.feature-box + h2,
.feature-box + h3,
.feature-box + h4 {
  margin-top: 3rem !important;
}

/* Removes bottom margin from the last element inside the note box */
.notebox > :last-child {
  margin-bottom: 0 !important;
}

/* Zeroes out padding as well as margin for paragraphs inside note boxes */
/* Restore normal spacing between paragraphs inside the notebox and featurebox */
.notebox p,
.feature-box p {
  margin-bottom: 1rem;
}

/* Remove margin ONLY from the very last element in notebox and featurebox*/
.notebox > :last-child,
.notebox p:last-child 
.feature-box > :last-child,
.feature-box p:last-child {
  margin-bottom: 0 !important;
}

/* 1. Add top and bottom space around tables */
.article-body table {
  margin-top: 0.75rem !important;
  margin-bottom: 1rem !important;
}

/* 2. Standardize top and bottom spacing for noteboxes */
.notebox {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  }

}

/* 3. Add vertical spacing around lists */
.article-body ul,
.article-body ol {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Force spacing on elements after tables/wrappers, EXCEPT headings */
.article-body table + :not(h1, h2, h3, h4, h5, h6),
.article-body figure + :not(h1, h2, h3, h4, h5, h6),
.article-body [class*="table"] + :not(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.75rem !important;
}

/* 2. Increase top spacing specifically when a note box follows text/lists */
.article-body * + .notebox,
.notebox {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;

}

/* Ensures high-contrast readable links inside note boxes */
.notebox a
  background-color: transparent;
      text-decoration: underline;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  font-weight: 300;
}

/* 1. Normal and Visited links */
.notebox a,
.notebox a:visited {
  color: inherit;
  text-decoration: underline;
}

/* 2. Reset focus state when mouse leaves (prevents the color from sticking after a click) */
.notebox a:focus:not(:hover) {
  color: inherit;
  text-decoration: underline;
}

/* 3. Active Hover state */
.notebox a:hover,
.notebox a:visited:hover {
  color: #8D969D !important;
  font-weight: inherit;
  background-color: transparent;
  text-decoration: none !important;
}

.article-content table :is(h1, h2, h3, h4, h5, h6) { 
  margin-top: 0 !important; 
}

h1.article-title {
    font-size: 2.4rem;
    line-height: 1.2;

}

.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}

.article-comment-count {
  color: #069595;
}

.article-comment-count:hover {
  text-decoration: none;
}

.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(35, 40, 45, 1);
  width: 18px;
  height: 18px;
}

.article-sidebar {
  
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}

@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 25%;
    height: auto;
  }
}

.article-relatives {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}

.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}

.article-relatives > *:last-child {
  padding: 0;
}

@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}

.article-votes {
    padding: 3rem 2rem;
    text-align: center;
    background: #F7F7F7;
    margin-bottom: 2rem;
  border-radius:20px;
}
.article-votes-controls {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
span#article-votes-label {
  font-family: 'GT Standard'; /* Huom: Nimetty erikseen! */
  font-style: normal;
  font-weight: 600; 
  font-size: 1.3rem;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
  
}
.article-more-questions {
  margin: 2rem 0;
  text-align: center;
}

.article-more-questions a {
  color: rgba(2, 51, 51, 1);
  text-decoration: underline;
}

.article-more-questions a:visited {
  color: rgba(2, 51, 51, 1);
}

.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(79, 79, 79, 1);
}

.article-return-to-top {
  border-top: 1px solid #ddd;
}

@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}

.article-return-to-top a {
  color: rgba(2, 51, 51, 1);
  display: block;
  padding: 20px 0;
}

.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}

.article-return-to-top-icon {
  transform: rotate(0.5turn);
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}

.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
}

.recent-articles li,
.related-articles li {
    padding: 15px 0px 15px 0px;
    line-height: 1.5;
    border-bottom: 1px solid #D0DDE1;
}
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */

.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}


.article-attachments li.attachment-item {
    border: 1px solid #D0DDE1;
    padding: 1rem;
    margin-bottom: 0.5rem;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}

.attachments .attachment-item .attachment-icon {
  color: rgba(2, 51, 51, 1);
  left: 0;
  position: relative;
  top: 5px;
}

[dir="rtl"] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}

[dir="rtl"] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #069595;
}


/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share li {
  height: 25px;
  width: 25px;
}

.share a {
  color: #069595;
}

.share a:hover {
  text-decoration: none;
  color: rgba(35, 40, 45, 1);
}

.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 20px;
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}

.comment-overview p {
  margin-top: 0;
}

.comment-callout {
  color: #069595;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}

.comment-callout a {
  color: rgba(2, 51, 51, 1);
  text-decoration: underline;
}

.comment-callout a:visited {
  color: rgba(2, 51, 51, 1);
}

.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(79, 79, 79, 1);
}

.comment-sorter {
  display: inline-block;
  float: right;
}

.comment-sorter .dropdown-toggle {
  color: #069595;
  font-size: 13px;
}

[dir="rtl"] .comment-sorter {
  float: left;
}

.comment-wrapper {
  display: flex;
  position: relative;
}

.comment-wrapper.comment-official {
  border: 1px solid rgba(35, 40, 45, 1);
  padding: 40px 20px 20px;
}

@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}

.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}

.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}

.comment-avatar {
  margin-right: 10px;
}

[dir="rtl"] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.comment-meta {
  flex: 1 0 auto;
}

.comment-labels {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}

.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}

.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}

.comment-container {
  width: 100%;
}

.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}

@media (min-width: 768px) {
  [dir="ltr"] .comment-form-controls {
    text-align: right;
  }
}

.comment-form-controls input[type="submit"] {
  margin-top: 15px;
}

@media (min-width: 1024px) {
  .comment-form-controls input[type="submit"] {
    margin-left: 15px;
  }
  [dir="rtl"] .comment-form-controls input[type="submit"] {
    margin-left: 0;
    margin-right: 15px;
  }
}

.comment-form-controls input[type="checkbox"] {
  margin-right: 5px;
}

.comment-form-controls input[type="checkbox"] [dir="rtl"] {
  margin-left: 5px;
}

.comment-ccs {
  display: none;
}

.comment-ccs + textarea {
  margin-top: 10px;
}

.comment-attachments {
  margin-top: 10px;
}

.comment-attachments a {
  color: rgba(35, 40, 45, 1);
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}

.comment-body a {
  color: rgba(2, 51, 51, 1);
  text-decoration: underline;
}

.comment-body a:visited {
  color: rgba(2, 51, 51, 1);
}

.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(79, 79, 79, 1);
}

.comment-body img {
  height: auto;
  max-width: 100%;
}

.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .comment-body ul, [dir="rtl"]
.comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}

.comment-body ul {
  list-style-type: disc;
}

.comment-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #069595;
  font-style: italic;
  padding: 0 15px;
}

.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #069595;
  display: block;
  margin: 3px 0;
}

[dir="rtl"] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up svg {
  transform: scale(1, -1);
}

.vote-up:hover,
.vote-down:hover {
  color: rgba(35, 40, 45, 1);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #069595;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: rgba(35, 40, 45, 1);
}

.vote-voted:hover {
  color: #000;
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari*/
}

.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01M5BZ3ZZGJ1T7GK1H5M6MCVPC);
  margin-bottom: 10px;
}

.community-footer {
  padding-top: 50px;
  text-align: center;
}

.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}

.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}

.community-header {
  margin-bottom: 30px;
}

.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.post-to-community {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}

.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}

@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}

.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}

@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}

.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}

.community-follow button:hover {
  background-color: rgba(35, 40, 45, 1);
}

.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: rgba(35, 40, 45, 1);
  color: rgba(35, 40, 45, 1);
}

.community-follow button[data-selected="true"] {
  background-color: rgba(35, 40, 45, 1);
  color: rgba(35, 40, 45, 1);
}

.community-follow button[data-selected="true"]::after {
  border-left: 1px solid rgba(35, 40, 45, 1);
  color: rgba(35, 40, 45, 1);
}

.community-follow button[data-selected="true"]:hover {
  background-color: #000;
  border-color: #000;
}

.community-follow button::after {
  border-left: 1px solid rgba(35, 40, 45, 1);
  content: attr(data-follower-count);
  color: rgba(35, 40, 45, 1);
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}

@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}

[dir="rtl"] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(35, 40, 45, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}

.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}

.striped-list-info {
  flex: 2;
}

.striped-list-title {
  color: rgba(2, 51, 51, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}

.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}

.striped-list-title:visited {
  color: rgba(2, 51, 51, 1);
}

.striped-list .meta-group {
  margin: 5px 0;
}

.striped-list-count {
  color: #069595;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}

@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}

.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}

@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}

.striped-list-count-item:last-child::after {
  display: none;
}

.striped-list-number {
  text-align: center;
}

@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(2, 51, 51, 1);
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}

.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}

.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(35, 40, 45, 1);
}

.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}

[dir="rtl"] .status-label-official {
  left: 30px;
  right: auto;
}

.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #069595;
}

.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}

.status-label-open {
  background-color: #c72a1c;
}

.status-label-solved {
  background-color: #68737d;
}

.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}

.status-label-hold {
  background-color: #000;
}

.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}

@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}

.post-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}

.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}

.post-header .status-label {
  vertical-align: super;
}

.post-title {
  margin-bottom: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}

.post-title h1 {
  display: inline;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}

.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.post-avatar {
  margin-bottom: 30px;
}

.post-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}

.post-info-container {
  display: flex;
  margin-bottom: 40px;
}

.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .post-info {
  padding-right: 0;
  padding-left: 20px;
}

.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}

[dir="rtl"] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}

.post-body a {
  color: rgba(2, 51, 51, 1);
  text-decoration: underline;
}

.post-body a:visited {
  color: rgba(2, 51, 51, 1);
}

.post-body a:hover, .post-body a:active, .post-body a:focus {
  color:#C4D5D9;
}

.post-body img {
  height: auto;
  max-width: 100%;
}

.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .post-body ul, [dir="rtl"]
.post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}

.post-body ul {
  list-style-type: disc;
}

.post-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #069595;
  font-style: italic;
  padding: 0 15px;
}

.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.post-comment-count {
  color: #069595;
}

.post-comment-count:hover {
  text-decoration: none;
}

.post-comment-count .icon-comments {
  color: rgba(35, 40, 45, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}

.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}

@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir="rtl"] .post-sidebar {
    padding: 0 50px 0 0;
  }
}

.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}

.post-comments {
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-flex;
  line-height: 18px;
  vertical-align: middle;
}

.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}

.community-badge-container-achievements {
  display: flex;
}

.community-badge-container-achievements > .community-badge-titles {
  margin-left: calc(28px - 0.5em);
}

[dir="rtl"] .community-badge-container-achievements > .community-badge-titles {
  margin-right: calc(28px - 0.5em);
}

.community-name-and-title-badges {
  display: flex;
  flex-wrap: wrap;
}

.community-badge {
  margin: 2px;
}

.community-badge-achievements {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}

.profile-info .community-badge-achievements {
  height: 40px;
  width: 40px;
}

.community-title-badges {
  flex-basis: 100%;
  margin-top: 15px;
}

.community-badge-achievements-rest {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}

.community-badge-achievements img {
  width: 100%;
  height: 100%;
}

.community-badge-titles img {
  width: 20px;
  height: 20px;
}

.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}

@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: calc(45px / 2);
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}

[dir="rtl"] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}

.collapsible-nav-toggle-icon {
  display: none;
}

.collapsible-nav-toggle[aria-expanded="false"] .chevron-icon {
  display: inline-block;
}

.collapsible-nav-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}

.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid rgba(35, 40, 45, 1);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}

.collapsible-nav-list li {
  color: rgba(2, 51, 51, 1);
  line-height: 45px;
  order: 1;
}

@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir="rtl"] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}

.collapsible-nav-list li a {
  color: rgba(2, 51, 51, 1);
  display: block;
}

@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current="page"]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}

.collapsible-nav-list li:not([aria-selected="true"]),
.collapsible-nav-list li:not(.current) {
  display: none;
}

@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected="true"]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"] {
    padding: 15px 0 11px 0;
  }
}

.collapsible-nav-list li[aria-selected="true"],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(35, 40, 45, 1);
    order: 1;
  }
}

.collapsible-nav-list li[aria-selected="true"] a,
.collapsible-nav-list li.current a {
  color: rgba(2, 51, 51, 1);
}

.collapsible-nav[aria-expanded="true"] li:not([aria-selected="true"]),
.collapsible-nav[aria-expanded="true"] li:not(.current) {
  display: block;
}

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 60px;
  overflow: hidden;
  padding: 15px 0;
  position: relative;
}

@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}

.collapsible-sidebar-title {
  margin-top: 0;
}

.collapsible-sidebar-toggle {
  position: absolute;
  top: calc(65px / 2);
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}

[dir="rtl"] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}

.collapsible-sidebar-toggle-icon {
  display: none;
}

.collapsible-sidebar-toggle[aria-expanded="false"] .chevron-icon {
  display: inline-block;
}

.collapsible-sidebar-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}

.collapsible-sidebar-toggle:focus {
  outline: none;
  border: none;
}

.collapsible-sidebar-body {
  display: none;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}

.collapsible-sidebar[aria-expanded="true"] {
  max-height: none;
}

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-body {
  display: block;
  padding-top: 0.5rem;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #f2f2f2;
  margin-bottom: 20px;
}

.my-activities-sub-nav {
  margin-bottom: 30px;
}

.my-activities-table .striped-list-title {
  /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}

@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.my-activities-table thead {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}

.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}

.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}

.my-activities-table td:not(:first-child) {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}

.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}

.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}

.requests-table-toolbar .request-table-filter {
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}

.requests-table-toolbar .request-filter {
  display: block;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}

.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}

.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir="rtl"] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}

.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}

.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}

.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}

.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}

.requests-table-toolbar + .requests {
  margin-top: 40px;
}

.requests .requests-table-meta {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}

.requests .requests-table thead {
  display: none;
}

@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}

.requests .requests-table-info {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}

.requests .requests-table .requests-link {
  position: relative;
}

.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}

.subscriptions-table td:last-child {
  display: block;
}

@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}

.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}

.subscriptions-table .user-avatar {
  margin-right: 10px;
}

.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #069595;
  font-size: 13px;
}

@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #069595;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}

.request-container .comment-container {
  min-width: 0;
}

.request-breadcrumbs {
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}

.request-main {
  flex: 1 0 auto;
  order: 1;
}

.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}

.request-main .comment-fields.shown {
  display: block;
}

.request-main .request-submit-comment.shown {
  display: inline;
}

@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}

.request-main .comment-form-controls {
  display: block;
}

.request-main .comment-ccs {
  display: block;
}

.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #069595;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}

.request-main .comment-show-container.hidden {
  display: none;
}

.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  border: 1px solid rgba(35, 40, 45, 1);
}

.request-main .form-field.comment-ccs > input[type="text"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(35, 40, 45, 1);
}

.request-main input#mark_as_solved {
  display: none;
}

.request-title {
  width: 100%;
}

@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}

.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}

@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}

.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}

@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}

.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}

.request-details:last-child {
  border: 0;
}

.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}

.request-details dd {
  padding: 0 10px;
  width: 60%;
}

.request-details dd::after {
  content: "\A";
  white-space: pre;
}

.request-details dt {
  color: #069595;
  width: 40%;
}

.request-details .request-collaborators {
  display: inline-block;
}

.request-attachments dt, .request-attachments dd {
  width: 100%;
}

.request-attachments dd {
  margin: 10px 0 0 0;
}

.request-form textarea {
  min-height: 120px;
}

.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}

.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}

.pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.pagination-next-link {
  padding-right: 10px;
}

.pagination-next-text {
  margin-right: 10px;
}

[dir="rtl"] .pagination-next-link {
  padding-left: 10px;
}

[dir="rtl"] .pagination-next-text {
  margin-left: 10px;
}

.pagination-prev-link {
  padding-left: 10px;
}

.pagination-prev-text {
  margin-left: 10px;
}

[dir="rtl"] .pagination-prev-link {
  padding-right: 10px;
}

[dir="rtl"] .pagination-prev-text {
  margin-right: 10px;
}

/***** Metadata *****/
.meta-group {
  display: block;
}

.meta-group-opposite {
  float: right;
}

[dir="rtl"] .meta-group-opposite {
  float: left;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #5c6d73 !important;
  font-size: 13px;
}

.meta-data:not(:last-child)::after {
  content: "\00B7";
  margin: 0 5px;
}

/* User Profiles */
.profile-header {
  padding: 60px 0;
  background-color: #EDF5CD;
}

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
h1.name {
  font-family: 'GT Standard';
  font-style: normal;
  font-weight: 800; /* 800 tai 900 vastaa Heavy/Black -painoa */
   font-size: 2.6rem;
      line-height: 1.2;
}
h1.name a{
  font-family: 'GT Standard';
  font-style: normal;
  font-weight: 800; /* 800 tai 900 vastaa Heavy/Black -painoa */
   font-size: 2.6rem;
      line-height: 1.2;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}

[dir="rtl"] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 80px;
  height: 80px;
}

.profile-avatar .icon-agent {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir="rtl"] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir="rtl"] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: #069595;
  flex: 0 0 100px;
  margin-right: 10px;
}

[dir="rtl"] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}

@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir="rtl"] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}

@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(35, 40, 45, 1);
  border-radius: 2px;
  color: rgba(35, 40, 45, 1);
  padding: 6px 20px;
  font-size: 14px;
  text-align: center;
  width: 100%;
  border-radius:100px;
}

.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}

@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #f2f2f2;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}

@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #069595;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #D0DDE1;
  font-size: 13px;
}

.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}

.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}

[dir="rtl"] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}

@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}

@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir="rtl"] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-badges-items {
  margin-top: 25px;
}

.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}

.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}

.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}

.profile-badges-item-image img {
  max-height: 40px;
}

[dir="rtl"] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}

.profile-badges-item-title, .profile-badges-item-metadata-title {
  font-size: 15px;
  margin-bottom: 10px;
}

.profile-badges-item-title {
  font-weight: 600;
}

.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #069595;
  font-size: 13px;
  margin: 0;
}

.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}

[dir="rtl"] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}

.profile-contribution-header {
  margin-bottom: 5px;
}

.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #D0DDE1;
}

@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir="rtl"] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #D0DDE1;
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}

[dir="rtl"] .profile-contribution-icon {
  right: 0;
}

.profile-contribution-icon svg {
  vertical-align: middle;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}

[dir="rtl"] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}

@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}

[dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}

@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.private-activity-icon {
  margin-right: 10px;
}

[dir="rtl"] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir="rtl"] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir="rtl"] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}

[dir="rtl"] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}

@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}

[dir="rtl"] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}

@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir="rtl"] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}

[dir="rtl"] .profile-activity-icon {
  right: 0;
}

@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir="rtl"] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}

.search-results-column {
  flex: 1;
}

@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}

.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}

@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
h3.collapsible-sidebar-title.sidenav-title {
  font-size: 1.2rem;
}
.search-results-sidebar .sidenav-item {
  border-radius: 2px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: rgba(2, 51, 51, 1);
}

.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #F7F7F7;
  text-decoration: none;
}

.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}

.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}

.search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
  display: none;
}

@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
    display: block;
  }
}

.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n + 6) {
  display: none;
}

.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}

.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(2, 51, 51, 1);
}

.search-results-sidebar .see-all-filters[aria-hidden="true"] {
  display: none;
}

.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}

.search-results-sidebar .see-all-filters::after {
  content: ' \2304';
  font-weight: bold;
}

.search-results-subheading {
  font-size: 2rem;
  font-weight: 600;
}

.search-results-list {
  margin-bottom: 25px;
}

.search-results-list > li {
  padding: 20px 0;
  border-bottom: 1px solid #E8EDF0;
}

.search-results-list > li:first-child {
   border-top: 1px solid #E8EDF0; 
}

.search-results-list > li h2 {
  margin-bottom: 0;
}

.search-results .meta-group {
  display: block;
  align-items: center;
  clear: both;
  color: #23282D;
}

@media (min-width: 1024px) {
  .search-results .meta-group {
    display: flex;
  }
}

.search-results .meta-group > li {
  display: block;
}

@media (min-width: 1024px) {
  .search-results .meta-group > li {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .search-results .meta-group li:first-child {
    flex: 1;
  }
}

.search-results .meta-group .meta-data {
  color: inherit;
}

[dir="ltr"] .search-results .meta-group .meta-data:not(:last-child) {
  margin-right: 20px;
}

[dir="rtl"] .search-results .meta-group .meta-data:not(:last-child) {
  margin-left: 20px;
}

.search-results .meta-group .meta-data::after {
  content: none;
}

.search-results-description {
  margin-top: 10px;
  word-break: break-word;
}

.search-result-title {
  font-size: 1.5rem;
  padding-bottom: 1rem;
  display: inline-block;
}

[dir="ltr"] .search-result-icons {
  float: right;
}

[dir="rtl"] .search-result-icons {
  float: left;
}

.search-result-votes, .search-result-meta-count {
  color: #069595;
  display: inline-block;
  font-size: 13px;
  padding: 4px 5px;
  position: relative;
}

.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(35, 40, 45, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}

.search-result .meta-group {
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}

@media (min-width: 1024px) {
  .search-result-breadcrumbs {
    display: table-row;
  }
}

@media (min-width: 1024px) {
  .search-result-breadcrumbs li {
    display: table-cell;
  }
}

/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}

/* Add a yellow background for Chinese */
html[lang|="zh"] .search-results-description em {
  font-style: normal;
  background: yellow;
}

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height .2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}

/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: .6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

[dir="rtl"] .notification-inline {
  text-align: right;
}

.notification-inline[aria-hidden="true"] {
  display: none;
}

.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}

[dir="rtl"] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}

.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}

.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir="rtl"] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: baseline;
}

.dropdown-toggle:hover {
  text-decoration: none;
}

.dropdown-toggle > * {
  display: inline-block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}

[dir="rtl"] .dropdown-menu {
  text-align: right;
}

.dropdown-menu[aria-expanded="true"] {
  display: block;
}

.dropdown-menu [role="separator"] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}

.dropdown-menu [role="menuitem"] {
  color: #333;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}

[dir="rtl"] .dropdown-menu [role="menuitem"] {
  padding: 7px 20px 7px 40px;
}

.dropdown-menu [role="menuitem"]:hover, .dropdown-menu [role="menuitem"]:focus {
  background: #f3f3f3;
  text-decoration: none;
  color: #333;
}

.dropdown-menu [role="menuitem"][aria-selected="true"] {
  cursor: default;
}

.dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}

[dir="rtl"] .dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}

.dropdown-menu [role="menuitem"][hidden], .dropdown-menu [role="menuitem"][aria-hidden="true"] {
  display: none !important;
}

.dropdown-menu-end {
  left: auto;
  right: 0;
}

.dropdown-menu-top {
  bottom: 100%;
  margin-bottom: 1px;
}

[dir="rtl"] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}

[dir="rtl"] .dropdown-menu-end {
  left: 0;
  right: auto;
}

.dropdown-chevron-icon {
  vertical-align: middle;
}


/*Holvi specific mobile*/
@media only screen and (max-width: 768px) {
  .footer-inner {
    padding: 0;
  }
  .footer .legal-list-item {
    padding: 0.2rem;
    font-size: .625rem;
}

  ul.legal-list-wrapper {
    display: flex;
    flex-wrap: wrap;
	}
  .footer .legal-list-item {
    padding: 0 1rem 1rem 0;
    font-size: .625rem;
	}
}

@media only screen and (max-width: 600px) {
.help-content-wrapper {
  flex-direction: column;
	}
  h1 {
    font-size: 2.2rem;
    line-height: 1.2;
	}
  .hero-frontpage {
    display: flex;
    height: auto;
    padding: 2rem;
    text-align: left;
    width: 100%;
    background: #BBE5EE;
	}
  .hero-frontpage-content {
    display: flex;
    flex-direction: column;
    width: 100%;
	}
  .hero-short {
    height: auto;
    padding: 2rem;
	}
  .help-content-wrapper {
    flex-direction: column-reverse;
	}
  .search-container {
    position: relative;
    width: 100%;
    max-width: 800px;
}
.profile-private-badge {
    flex-basis: 100%;
    border: solid 1px rgba(35, 40, 45, 1);
    border-radius: 2px;
    color: rgba(35, 40, 45, 1);
    padding: 10px 10px;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 0.5rem;
      border-radius:300px;
	}
  .split-button button {
    background-color: rgba(35, 40, 45, 1);
    border: 0;
    color: white;
    height: 49px;
    line-height: 16px;
    outline-color: rgba(35, 40, 45, 1);
    font-size: 1rem;
    border-radius:300px;
}
  .page-header-description {
    font-size: 1.2rem;
	}
  .help-img img {
    height: 250px;
}
  section.help {
    padding: 2rem;
    padding-top: 1rem;
    margin-top: 1rem;
	}
    .hero-short .hero-content, .hero-subtitle .hero-content {
    width: 100%;
	}
  .hero-short, .hero-subtitle {
    height: 300px;
  }
  .sub-footer {
    flex-wrap: wrap;
}
  .cta-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    padding-top: 3rem;
    margin: 2rem 0px;
	}
  .cta-box-p {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: #BBE5EE;
    padding: 1.5rem;
    margin: 2rem 0px;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
}
/* ------------------------------------------------------------------
------------------------------------------------------------------
   Article collapsible sections (built by article-collapse.js)
------------------------------------------------------------------
------------------------------------------------------------------- */

/* ------------------------------------------------------------------
   Article collapsible sections (built by article-collapse.js)
------------------------------------------------------------------- */

.article-body .article-collapse {
  --collapse-ink: #1f2a2e;
  --collapse-arrow: #2a7489;
  --collapse-focus: #7fbfd1;
  --collapse-line: #b9dde7;
  --collapse-hover: #f7f7f7;
  --collapse-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --collapse-speed: 0.35s;
  margin: 24px 0;
}

/* The heading keeps its size from the theme; only spacing changes */
.article-body .article-collapse .article-collapse__heading {
  margin: 0;
  /* Ignore indents added in the editor or by the theme, so titles line up */
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

/* The clickable title */
.article-body .article-collapse .article-collapse__toggle {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 12px 8px 12px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  font: inherit;
  line-height: 1.35;
  text-align: left;
  color: var(--collapse-ink);
  cursor: pointer;
}

/* Bold text in a title keeps the heading's weight. Otherwise the theme's
   bold weight (often lighter than the heading's) makes it look thinner. */
.article-body .article-collapse .article-collapse__toggle strong,
.article-body .article-collapse .article-collapse__toggle b {
  font-weight: inherit;
}

.article-body .article-collapse .article-collapse__toggle:hover {
  background: var(--collapse-hover);
}

.article-body .article-collapse .article-collapse__toggle:focus-visible {
  outline: 2px solid var(--collapse-focus);
  outline-offset: -2px;
}

/* Arrow: points right when closed, down when open */
.article-body .article-collapse .article-collapse__chevron {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--collapse-arrow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--collapse-speed) var(--collapse-ease);
}

.article-body .article-collapse [aria-expanded="true"] > .article-collapse__chevron {
  transform: rotate(90deg);
}

/* Sliding open and closed */
.article-body .article-collapse .article-collapse__content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--collapse-speed) var(--collapse-ease),
              opacity var(--collapse-speed) var(--collapse-ease);
}

.article-body .article-collapse .article-collapse__content.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.article-body .article-collapse .article-collapse__content > div {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;                     /* keeps hidden links out of keyboard tabbing */
  padding: 0 4px 0 30px;                  /* lines content up with the title text */
  transition: visibility 0s linear var(--collapse-speed);
}

.article-body .article-collapse .article-collapse__content.is-open > div {
  visibility: inherit;                    /* stays hidden inside a closed H1 */
  padding-bottom: 12px;
  transition-delay: 0s;
}

.article-body .article-collapse .article-collapse__content > div > :first-child {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .article-body .article-collapse .article-collapse__chevron,
  .article-body .article-collapse .article-collapse__content {
    transition: none;
  }
}

/* Print: everything open, no arrows */
@media print {
  .article-body .article-collapse .article-collapse__content {
    display: block;
    opacity: 1;
  }
  .article-body .article-collapse .article-collapse__content > div {
    visibility: visible;
    overflow: visible;
  }
  .article-body .article-collapse .article-collapse__chevron {
    display: none;
  }
}

/* ------------------------------------------------------------------
   FAQ look: opt in with <div class="collapsible collapsed faq">
   Put all questions in ONE wrapper. Each question is a soft grey card
   (matching the "In this article" box) in the body font, not the big
   display font. An open question gets a deep blue-teal bar on the left
   and its question turns the same colour.
------------------------------------------------------------------- */
.article-body .article-collapse.faq {
  --faq-card: #f7f7f7;
  --faq-card-hover: #FEFDE2;
  --faq-ink: #1f2a2e;
  --faq-bar: #0B7E80;
  --faq-open-ink: #000000 !important;
  --faq-arrow: #730A5A !important;
  display: grid;
  gap: 8px;
  margin: 6px 0 32px;
}

.article-body .article-collapse.faq .article-collapse__section {
  overflow: hidden;
  border-left: 6px solid transparent;
  border-radius: 12px;
  background: var(--faq-card);
  transition: border-color var(--collapse-speed) var(--collapse-ease);
}

/* Open question: a thick bar down the left that follows the rounded corners */
.article-body .article-collapse.faq .article-collapse__section.is-open {
  border-left-color: var(--faq-bar);
}

.article-body .article-collapse.faq .article-collapse__heading {
  font-family: inherit;                   /* body font, not the display font */
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: normal;
}

.article-body .article-collapse.faq .article-collapse__toggle {
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 14px 14px;
  border-radius: 0;
  color: var(--faq-ink);
}

.article-body .article-collapse.faq .article-collapse__toggle:hover {
  background: var(--faq-card-hover);
}

/* Hovering a closed question also colours the strip on the left where the
   bar sits when open, so the hover fills the whole card */
.article-body .article-collapse.faq .article-collapse__section:not(.is-open):has(.article-collapse__toggle:hover) {
  border-left-color: var(--faq-card-hover);
}

.article-body .article-collapse.faq .article-collapse__toggle[aria-expanded="true"] {
  color: var(--faq-open-ink);
}

.article-body .article-collapse.faq .article-collapse__toggle:focus-visible {
  outline-color: var(--faq-bar);
}

.article-body .article-collapse.faq .article-collapse__chevron {
  width: 16px;
  height: 16px;
  margin-top: 4px;   /* centres the arrow on the first line of the question */
  stroke: var(--faq-arrow);
}

.article-body .article-collapse.faq .article-collapse__content > div {
  padding-left: 40px;                     /* lines answers up with the question text */
  padding-right: 16px;
}

.article-body .article-collapse.faq .article-collapse__content.is-open > div {
  padding-top: 3px;
  padding-bottom: 16px;
}

/* No extra space under the last line of an answer, even if the theme
   adds paragraph spacing (the script also removes empty end lines) */
.article-body .article-collapse.faq .article-collapse__content > div > :last-child,
.article-body .article-collapse.faq .article-collapse__content > div > :last-child > :last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .article-body .article-collapse.faq .article-collapse__section {
    transition: none;
  }
}

/* Print: plain list, no card backgrounds */
@media print {
  .article-body .article-collapse.faq .article-collapse__section {
    background: none;
    border-left-color: transparent;
  }
}

/* ------------------------------------------------------------------
   "Expand all / Collapse all" link above each block of sections
   Plain text link: no border or background, underline on hover.
   !important overrides the theme's own button borders and shadows.
------------------------------------------------------------------- */
.article-body .article-collapse__toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 0;
}

.article-body .article-collapse__toolbar + .article-collapse {
  margin-top: 4px;
}

/* Above an FAQ list: pull the link up closer to the heading, and use
   the same blue as the FAQ's arrows and open-question bar */
.article-body .article-collapse__toolbar:has(+ .article-collapse.faq) {
  margin-top: -8px;
}

.article-body .article-collapse__toolbar:has(+ .article-collapse.faq) .article-collapse__toggle-all {
  color: #691757 !important;
}

.article-body .article-collapse__toggle-all {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 4px;
  outline: none;
  background: none !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: #3c767d !important;
  cursor: pointer;
}

.article-body .article-collapse__toggle-all:hover span {
  color: #92a5a8;
}

.article-body .article-collapse__toggle-all:focus-visible {
  outline: 2px solid #7fbfd1;
  outline-offset: 2px;
}

/* Arrow after the text: points down for "Expand all", up for "Collapse all" */
.article-body .article-collapse__toggle-all .article-collapse__chevron {
  order: 2;
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.article-body .article-collapse__toggle-all.is-expanded .article-collapse__chevron {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .article-body .article-collapse__toggle-all .article-collapse__chevron {
    transition: none;
  }
}

@media print {
  .article-body .article-collapse__toolbar {
    display: none;
  }
}

/* ======================================================
   Table & layout fixes
   ====================================================== */

/* 1. Expand Overall Page Width */
.article-container,
.article {
  max-width: 1100px !important;
  width: 100% !important;
}

/* 2. Reset Table Wrappers (Sets Base Top & Bottom Spacing) */
.article-body figure.wysiwyg-table,
.article-body figure.wysiwyg-table-align-left,
.article-body figure.wysiwyg-table-align-right,
.article-body figure.wysiwyg-table-align-center {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  height: auto !important;
  margin-top: 18px !important;     /* Space BEFORE table */
  margin-bottom: 18px !important;  /* Space AFTER table for regular text/paragraphs */
  padding-bottom: 0px !important;
  overflow-x: auto !important;
}

/* 3. Force Inner Table Elements to Shrink/Expand Naturally */
.article-body figure.wysiwyg-table table,
.article-body figure.wysiwyg-table tbody,
.article-body figure.wysiwyg-table tr,
.article-body figure.wysiwyg-table td {
  height: auto !important;
}

/* 4. Table Structure & Layout */
.article-body table {
  display: table !important;
  table-layout: auto !important;
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 0px !important;
}

/* 5. Cell Padding, Borders & Text Formatting */
.article-body td, 
.article-body th {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border: 1px solid #e7e7e7 !important; /* Restores vertical & horizontal lines for all cells */
}


/* Style explicit <th> header cells */
.article-body table:not(.no-header) th {
  font-weight: bold !important;
  background-color: #F8FBEB !important;
  color: #23282E !important;
}

/* Style the 1st row ONLY if the table doesn't already have a header */
.article-body table:not(.no-header):not(:has(th)) tbody > tr:first-child > td,
.article-body table:not(.no-header):not(:has(th)) > tr:first-child > td {
  font-weight: bold !important;
  background-color: #F8FBEB !important;
  color: #23282E !important;
}


/* Enable smooth scrolling across the article */
html {
  scroll-behavior: smooth;
}

/*TOC Container */
#toc {
  background-color: #FFF4EF; /* Soft brand peach tint matching hero background */
  border: 1px solid #FCE3D7;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

#toc .toc-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

#toc .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #000000 !important;
}

#toc .toc-list li {
  margin-bottom: 10px;
}

#toc .toc-list li:last-child {
  margin-bottom: 0;
}

#toc .toc-list a {
  color: #000000 !important;
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
  padding-left: 0;
}

/* Hover and ScrollSpy Active States */
#toc .toc-list a:hover {
  color: #1F2937;
  padding-left: 4px;
}

#toc .toc-list a.active {
  color: #1F2937;
  font-weight: 600;
  border-left: 3px solid #FF8A65; /* Accent line */
  padding-left: 8px;
}

/* Keep article tables inside the article column */
.article-body figure.wysiwyg-table {
  width: 100% !important;
  max-width: 100%;
  margin: 1.5em 0;          /* browsers add 40px side margins to <figure> by default */
  overflow-x: auto;          /* last resort on phones: the table scrolls instead of clipping */
}

.article-body table {
  width: 100% !important;
  table-layout: fixed;       /* columns follow the <col> widths and can't push the table wider */
}

.article-body th,
.article-body td {
  padding: 0.6em 0.5em;
  overflow-wrap: break-word; /* breaks a long word only if it can't fit at all */
  hyphens: auto;
}

@media (max-width: 768px) {
  .article-body th,
  .article-body td { font-size: 0.875em; padding: 0.5em 0.35em; }
}

/* ------------------------------------------------------------------
   Outlined notebox for contact us page
------------------------------------------------------------------- */
.outline-box {
  border: 4px solid #88013C !important;
  border-radius: 30px !important;
  padding: 2rem !important;
  margin: 1.5rem 0 !important;
  background: #FDF5FE !important;
}

.outline-box > :first-child {
  margin-top: 0 !important;
}

.outline-box > :last-child {
  margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------
   Feature highlight box for articles
------------------------------------------------------------------- */
/* ---------- Feature box: colour variables ---------- */
.feature-box {
  --fb-accent: #076D6F;   /* stripe, h4 labels, table headers */
  --fb-bg: #EDF5CD;       /* box background */
  --fb-heading: #064545;  /* h3 colour */

  border: none !important;
  border-radius: 10px !important;
  padding: 2.2rem 2.2rem 1.75rem calc(2.2rem + 12px) !important;
  margin: 1.5rem 0 !important;
  background: linear-gradient(to right, var(--fb-accent) 12px, var(--fb-bg) 12px) !important;
}
.feature-box > :first-child {
  margin-top: 0 !important;
}

/* Headings */
.feature-box h2 {
  color: var(--fb-heading) !important;
  font-size: 1.9rem !important;
  line-height: 1.15 !important;
  margin-bottom: 1.2rem !important;
}

.feature-box h3 {
  color: var(--fb-heading) !important;
  font-size: 1.7rem !important;
  line-height: 1.15 !important;
  margin-bottom: 1.2rem !important;
}
.feature-box h3,
.feature-box .article-collapse .article-collapse__toggle {
  font-family: 'GT Standard Extended', sans-serif !important;
}
.feature-box h4 {
  font-size: 0.7rem !important;
  font-family: 'GT Standard Extended', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
  color: var(--fb-accent) !important;
  margin: 1.25rem 0 0.4rem !important;
}

/* ---------- Tables inside feature boxes ---------- */
.article-body .feature-box table {
  width: 100%;
  border-collapse: collapse !important;
  background: transparent !important;
  border: none !important;
  margin: 0.25rem 0 0 !important;
}
.article-body .feature-box table thead,
.article-body .feature-box table tr,
.article-body .feature-box table th,
.article-body .feature-box table td {
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}
.article-body .feature-box table th,
.article-body .feature-box table td {
  padding: 0.6rem 1.5rem 0.6rem 0 !important;
  vertical-align: top;
}
.article-body .feature-box table thead th,
.article-body .feature-box table tr:first-child th {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fb-accent) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--fb-accent) 35%, transparent) !important;
  padding-bottom: 0.5rem !important;
}
.article-body .feature-box table tbody tr + tr > * {
  border-top: 1px solid color-mix(in srgb, var(--fb-accent) 12%, transparent) !important;
}
.article-body .feature-box table tr > *:first-child { width: 22%; }
.article-body .feature-box table tr > *:last-child {
  width: auto;
  padding-right: 0 !important;
}
.article-body .feature-box table p { margin: 0 !important; }

/* ---------- Colour variants ---------- */
.feature-box--blue {
  --fb-accent: #05506A;
  --fb-bg: #E1F8FF;
  --fb-heading: #05506A;
}
.feature-box--pink {
  --fb-accent: #A80D50;
  --fb-bg: #FEE5EC;
  --fb-heading: #730032;
}
.feature-box--pink-inverse {
  --fb-accent: #ba2263;
  --fb-bg: #88013C;
  --fb-heading: #FDCBD9;
  color: #FFF5F7 !important!;
}


/* Collapsible section inside a feature box (e.g. Europe) */
.feature-box .region-grid + .article-collapse {
  border-top: 1px solid color-mix(in srgb, var(--fb-heading) 20%, transparent) !important;  /* faint Emerald */
  margin: 1.25rem 0 0 !important;
  padding-top: 0.25rem !important;
}
.feature-box .article-collapse .article-collapse__heading {
  margin: 0 !important;
}
.feature-box .article-collapse .article-collapse__toggle {
  padding: 1rem 0 0.6rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: none !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
  color: var(--fb-accent) !important;
  text-decoration: none !important;
}
.feature-box .article-collapse .article-collapse__toggle[aria-expanded="false"] {
  text-decoration: underline !important;  /* hint that it opens */
  text-underline-offset: 3px;
}
.feature-box .article-collapse .article-collapse__toggle:focus-visible {
  outline: 2px solid var(--fb-accent) !important;  /* keyboard users only */
  outline-offset: 2px !important;
}
.feature-box .article-collapse .article-collapse__chevron {
  stroke: var(--fb-accent) !important;
  width: 14px !important;
  height: 14px !important;
}
.feature-box .article-collapse .article-collapse__content > div {
  padding-left: 0 !important;             /* align with the grid columns */
}

/* Region sections: thin line between each one */
.feature-box .article-collapse {
  margin: 0 !important;
}
/* Lines only between region sections, never above the first one */
.feature-box .article-collapse__section {
  border-top: 0 !important;
}
.feature-box .article-collapse .article-collapse__section + .article-collapse__section,
.feature-box .article-collapse + .article-collapse > .article-collapse__section:first-child {
  border-top: 1px solid color-mix(in srgb, var(--fb-heading) 20%, transparent) !important;
}
/* Whole box collapsible: main heading keeps its own look */
.feature-box.article-collapse > .article-collapse__section > .article-collapse__heading {
  margin: 0 !important;
}
.feature-box.article-collapse > .article-collapse__section > .article-collapse__heading .article-collapse__toggle {
  align-items: flex-start !important;
  gap: 0.6rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: none !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
}
.feature-box.article-collapse > .article-collapse__section > .article-collapse__heading .article-collapse__chevron {
  width: 0.7em !important;
  height: 0.7em !important;
  margin-top: 0.3em !important;          /* centres it on the first line */
  stroke: var(--fb-heading) !important;
}
.feature-box.article-collapse > .article-collapse__section > .article-collapse__heading .article-collapse__toggle:focus-visible {
  outline: 2px solid var(--fb-accent) !important;
  outline-offset: 4px !important;
}

/* Content under the main heading: no indent, space only when open */
.feature-box.article-collapse > .article-collapse__section > .article-collapse__content > div {
  padding: 0 !important;
}
/* Spacing that slides with the content, so closing has no jump */
.feature-box .article-collapse__content > div,
.feature-box .article-collapse__content.is-open > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.feature-box.article-collapse > .article-collapse__section > .article-collapse__content > div > :first-child {
  margin-top: 1.25rem !important;      /* gap under the main heading */
}
.feature-box .article-collapse .article-collapse__content > div > :last-child {
  margin-bottom: 0.75rem !important;   /* gap under each region's list */
}

/* A bit slower for the whole box, since it moves more content */
.feature-box.article-collapse {
  --collapse-speed: 0.45s !important;
}
/* ------------------------------------------------------------------
   Article table of contents (built by article-toc.js)
------------------------------------------------------------------- */

/* The box */
.article-body .article-toc {
  --toc-ink: #23282d;                     /* main text */
  --toc-ink-soft: #3d4f55;                /* subheading text */
  --toc-arrow: #23282d;                   /* arrows and top-level dots */
  --toc-accent: #7fbfd1;                  /* focus outline */
  --toc-line: #b9dde7;                    /* guide lines */
  --toc-dot-soft: #064545;                /* subheading dots */
  --toc-hover: rgba(127, 191, 209, 0.3);  /* button hover background */
  --toc-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --toc-speed: 0.35s;
  background: #F7F7F7;
  border-radius: 30px;
  padding: 18px 28px 18px 22px;
  margin: 24px 0;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  width:100%;
}

/* Next to a notebox, both run the full width so their edges line up */
.article-body .notebox + .article-toc,
.article-body .article-toc + .notebox {
  width: 100%;
}

/* Arrows: point right when closed, down when open */
.article-body .article-toc .article-toc__chevron {
  display: block;
  flex: none;
  fill: none;
  stroke: var(--toc-arrow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--toc-speed) var(--toc-ease);
}

.article-body .article-toc [aria-expanded="true"] > .article-toc__chevron {
  transform: rotate(90deg);
}

/* Title ("In this article"): opens and closes the whole TOC */
.article-body .article-toc .article-toc__title {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0 0 0 -2px;
  padding: 2px 6px 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  font-size: 0.82em;
  font-weight: 800;
  line-height: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: #1d5869;
  cursor: pointer;
}
.article-body .article-toc .article-toc__title {
  font-family: 'GT Standard Extended'; /* Huom: Nimetty erikseen! */
  font-style: normal;
  font-weight: 800; 
  font-size: 16px;
  
}
.article-body .article-toc .article-toc__title .article-toc__chevron {
  width: 22px;
  height: 22px;
}

/* Sliding open and closed */
.article-body .article-toc .article-toc__collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--toc-speed) var(--toc-ease),
              opacity var(--toc-speed) var(--toc-ease);
}

.article-body .article-toc .article-toc__collapse.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.article-body .article-toc .article-toc__collapse > * {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;                     /* keeps hidden links out of keyboard tabbing */
  transition: visibility 0s linear var(--toc-speed);
}

.article-body .article-toc .article-toc__collapse.is-open > * {
  visibility: visible;
  transition-delay: 0s;
}

/* Lists */
.article-body .article-toc ul {
  margin: 0;
  padding: 0 0 0 26px;
  list-style: none;
}

.article-body .article-toc #article-toc-list > ul {
  padding-top: 8px;
}

/* Subheadings: guide line straight under the arrow that opens them */
.article-body .article-toc ul ul {
  margin-left: -15px;
  padding: 2px 0 0 37px;
  border-left: 1px solid var(--toc-line);
}

.article-body .article-toc li {
  position: relative;
  margin: 0;
  padding: 3px 0;
  line-height: 1.5 !important;
  line-height: round(1.5em, 1px) !important;   /* whole-pixel rows, so markers render evenly */
}

.article-body .article-toc ul ul li {
  padding: 2px 0;
}

/* Links: main headings semibold, subheadings normal and softer */
.article-body .article-toc a {
  color: var(--toc-ink);
  text-decoration: none;
  text-underline-offset: 3px;
}

.article-body .article-toc a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.article-body .article-toc #article-toc-list > ul > li > a {
  font-weight: 600;
}

.article-body .article-toc ul ul a {
  color: var(--toc-ink-soft);
}

/* Arrow buttons for headings with subheadings */
.article-body .article-toc .article-toc__toggle {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: -26px;
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  line-height: inherit;
  cursor: pointer;
}

.article-body .article-toc ul ul li.article-toc__parent > .article-toc__toggle {
  top: 3px;
}

.article-body .article-toc .article-toc__toggle .article-toc__chevron {
  width: 16px;
  height: 16px;
}

.article-body .article-toc .article-toc__title:hover,
.article-body .article-toc .article-toc__toggle:hover {
  background: var(--toc-hover);
}

.article-body .article-toc .article-toc__title:focus-visible,
.article-body .article-toc .article-toc__toggle:focus-visible {
  outline: 2px solid var(--toc-accent);
  outline-offset: -2px;                   /* inside the button, so it isn't clipped */
}

/* Dots for headings with nothing to open: strong on the top level, soft below */
.article-body .article-toc li:not(.article-toc__parent)::before {
  content: "\2022";                       /* • */
  position: absolute;
  left: -26px;
  top: 0;
  width: 22px;
  padding-top: inherit;                   /* lines up with the text on every level */
  line-height: inherit;
  text-align: center;
  color: var(--toc-dot-soft);
}

.article-body .article-toc #article-toc-list > ul > li:not(.article-toc__parent)::before {
  content: "\2726";                       /* ✦ */
  font-size: 0.85em;
  line-height: inherit;                   /* stays centred on the text at the smaller size */
  color: #4f93a8;
}
/* Subheading counts are turned off */
.article-body .article-toc .article-toc__count {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .article-body .article-toc .article-toc__chevron,
  .article-body .article-toc .article-toc__collapse {
    transition: none;
  }
}

/* Leave a little room above a heading when a TOC link jumps to it */
.article-body h1[id], .article-body h2[id], .article-body h3[id], .article-body h4[id] {
  scroll-margin-top: 24px;
}

/* Hide the placeholder writers see in the editor */
.article-body .toc {
  display: none;
}

/* ------------------------------------------------------------------
   TOC "Expand all / Collapse all" link (built by article-toc.js)
   Paste at the END of article-toc.css.
------------------------------------------------------------------- */

/* Title on the left, link on the right, on one line */
.article-body .article-toc .article-toc__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.article-body .article-toc .article-toc__header .article-toc__title {
  flex: 1 1 auto;
  width: auto;
}

.article-body .article-toc .article-toc__toggle-all {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 2px 4px !important;
  border: 0 !important;
  border-radius: 4px;
  outline: none;
  background: none !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: #3c767d !important;
  cursor: pointer;
}

.article-body .article-toc .article-toc__toggle-all:hover span {
  color: #92a5a8;
}

.article-body .article-toc .article-toc__toggle-all:focus-visible {
  outline: 2px solid var(--toc-accent);
  outline-offset: 2px;
}

/* Arrow after the text: down for "Expand all", up for "Collapse all" */
.article-body .article-toc .article-toc__toggle-all .article-toc__chevron {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  transform: rotate(90deg);
}

.article-body .article-toc .article-toc__toggle-all.is-expanded .article-toc__chevron {
  transform: rotate(-90deg);
}

@media print {
  .article-body .article-toc .article-toc__toggle-all {
    display: none;
  }
}

/* ------------------------------------------------------------------
   ------------------------------------------------------------------
   Multi-column lists
------------------------------------------------------------------
------------------------------------------------------------------- */
/* Column lists – usable anywhere */
.two-col-list,
.three-col-list,
.four-col-list {
  column-gap: 2rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
}
.two-col-list   { columns: 2 220px !important; }
.three-col-list { columns: 3 180px !important; }
.four-col-list { columns: 4 160px !important; }

.four-col-list {
  column-count: 4 !important;
  column-gap: 1.25rem !important;
}

.two-col-list li,
.three-col-list li,
.four-col-list li {
  margin: 0 !important;
  padding: 0.3rem 0 !important;
  break-inside: avoid;
}

@media (max-width: 768px) {
  .four-col-list  { column-count: 2 !important; }
  .three-col-list { column-count: 2 !important; }
  .search { width: 100%; max-width: 100% !important; }
  .search-container { position: relative; width: 100%; max-width: 100%; }
}

@media (max-width: 480px) {
  .two-col-list { column-count: 1 !important; }
  .hero { height: auto; padding: 4rem 20px; width: 100%; }
}

@media (max-width: 480px) {
  .feature-box {
    padding: 1.5rem 1.25rem 1.25rem calc(1.25rem + 12px) !important;
  }
}
@media (max-width: 768px) {
  .four-col-list,
  .three-col-list { columns: 2 auto !important; }
  .search { width: 100%; max-width: 100% !important; }
  .search-container { position: relative; width: 100%; max-width: 100%; }
}

@media (max-width: 480px) {
  .two-col-list,
  .four-col-list { columns: 1 auto !important; }
  .three-col-list { column-gap: 1rem !important; }
  .hero { height: auto; padding: 4rem 20px; width: 100%; }
}

/* ------------------------------------------------------------------
   "Opens in a new tab" icon for links the external-links.js snippet
   marks with .link--new-tab. The icon is drawn with a CSS mask so it
   takes the link's own colour (including hover and visited colours).
------------------------------------------------------------------- */
.article-body a.link--new-tab::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5H3a1 1 0 0 0-1 1V13a1 1 0 0 0 1 1h8.5a1 1 0 0 0 1-1V9.5'/><path d='M9.5 2H14v4.5'/><path d='M14 2 7.5 8.5'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5H3a1 1 0 0 0-1 1V13a1 1 0 0 0 1 1h8.5a1 1 0 0 0 1-1V9.5'/><path d='M9.5 2H14v4.5'/><path d='M14 2 7.5 8.5'/></svg>") no-repeat center / contain;
}

/* Don't show the icon on buttons styled as links, or inside headings */
.article-body h1 a.link--new-tab::after,
.article-body h2 a.link--new-tab::after,
.article-body h3 a.link--new-tab::after,
.article-body .button.link--new-tab::after {
  display: none;
}

/* Screen-reader-only text (skip if your theme already defines this) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.article-body,
.article-body table td,
.article-body table th {
  -webkit-hyphens: manual;
  hyphens: manual;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.article-body table ul,
.article-body table ol {
  margin: 0;
  padding-left: 1.1em;   /* default is about 2.5em, lower = less indent */
}

.article-body table li {
  margin: 0 0 0.2em;    /* gap below each point */
  line-height: 1.4;
}

.article-body table li:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Submit a request page (templates/new_request_page.hbs)
   Paste at the bottom of style.css
   Uses the Holvi brand palette; headings, fonts and the form itself keep
   the theme's own styles.
------------------------------------------------------------------- */

.request-page {
  --rp-ink: #23282d;          /* Coal Black */
  --rp-ink-hover: #3a4046;
  --rp-emerald: #064545;      /* Emerald Green (links) */
  --rp-spruce: #daea9a;       /* Spruce Green (hero) */
  --rp-spruce-2: #edf5cd;     /* Spruce tint (category cards) */
  --rp-spruce-3: #f8fbeb;     /* Spruce lightest (icon circles) */
  --rp-white: #fffef7;        /* Alabaster White */
  --rp-line: #dee6e8;         /* form field borders */
  --rp-focus: #07696f;        /* Obsidian Teal, dark */
  /* Same font as the big home page heading. If the heading doesn't change,
     copy the font-family name your theme uses for the home page hero title. */
  --rp-display-font: "GT Standard Extended", "GT Standard", sans-serif;
}

/* Page heading in the extended font, like the home page hero.
   "Submit a request" keeps the regular heading font, like "Kategoriat". */
.request-page .rp-title {
  font-family: var(--rp-display-font);
  letter-spacing: -0.01em;
}

/* ---- Show only the text that matches the page language ------------- */
.request-page .rp-l { display: none; }
html[lang^="fi"] .request-page .rp-l[lang="fi"],
html[lang^="de"] .request-page .rp-l[lang="de"],
html:not([lang^="fi"]):not([lang^="de"]) .request-page .rp-l[lang="en"] {
  display: revert;
}

/* ---- Banner (same look as the home page hero) ----------------------- */
.request-page .rp-hero {
  padding: 72px 16px 128px;   /* bottom space is where the cards overlap */
  background-color: var(--rp-spruce);
  background-image: var(--rp-hero-img);
  background-position: center;
  background-size: cover;
  text-align: center;
}
.request-page .rp-hero__inner { max-width: 1200px; margin: 0 auto; }
.request-page .rp-hero .rp-title {
  margin: 0 0 16px;
  /* Scales with the screen so the heading fits on one line on laptops and
     desktops (the extended font is wide). On phones it wraps evenly. */
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  text-wrap: balance;
  color: var(--rp-ink);
}
.request-page .rp-hero__lead {
  margin: 0;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--rp-ink);
}

/* ---- Intro: the two ways to reach us -------------------------------- */

.request-page .rp-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  position: relative;          /* sits on top of the banner */
  margin: -88px 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: rp;
}

/* Cards side by side on wider screens, stacked on phones */
.request-page .rp-option {
  position: relative;
  counter-increment: rp;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(35, 40, 45, 0.08);
  color: var(--rp-ink);
}

/* Numbered circle above the title, like the icons on the category cards */
.request-page .rp-option::before {
  content: counter(rp);
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--rp-spruce-2);
  color: var(--rp-ink);
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}
.request-page .rp-option--primary::before { background: var(--rp-spruce); }

.request-page .rp-option__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.35;
}
.request-page .rp-option p { flex-grow: 1; margin: 0 0 18px; }

.request-page .rp-badge {
  position: absolute;   /* top-right corner, level with the number */
  top: 32px;
  right: 24px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--rp-spruce);
  color: var(--rp-ink);
  font-size: 13px;
  font-weight: 600;
}

/* ---- Phone line: one slim row under the cards ----------------------- */
.request-page .rp-phone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 0 0 56px;
  padding: 18px 24px;
  border-radius: 24px;
  background: var(--rp-spruce-3);
  color: var(--rp-ink);
}
.request-page .rp-phone__icon {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--rp-spruce-2);
  color: var(--rp-ink);
}
.request-page .rp-phone__text { flex: 1 1 220px; }
/* Numbers in their own column, set off by a line like the tips box */
.request-page .rp-phone .rp-phone__numbers {
  flex: 0 0 auto;
  justify-content: center;
  min-width: 220px;
  padding: 4px 8px 4px 32px;
  border-left: 1px solid var(--rp-spruce);
  text-align: center;
}
.request-page .rp-phone__text h2 { margin: 0 0 2px; font-size: 17px; line-height: 1.35; }
.request-page .rp-phone__text p { margin: 0; font-size: 14px; }
.request-page .rp-phone__numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.request-page .rp-phone__numbers a,
.request-page .rp-phone__numbers a:visited {
  display: block;
  color: var(--rp-ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.request-page .rp-phone__numbers a:hover { text-decoration: underline; }
.request-page .rp-phone__numbers a:focus-visible { outline: 3px solid var(--rp-focus); outline-offset: 2px; }
.request-page .rp-phone__numbers span { display: block; font-size: 13px; color: #4a5258; }

/* ---- Buttons and links ---------------------------------------------- */
/* Black pill, same as the "Open account" button in the header */
.request-page a.rp-btn,
.request-page a.rp-btn:visited {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--rp-ink);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
}
.request-page a.rp-btn:hover,
.request-page a.rp-btn:focus {
  background: var(--rp-ink-hover);
  color: #fff !important;
  text-decoration: none;
}
/* The theme colours spans inside links; keep the button text white */
.request-page a.rp-btn * { color: inherit !important; }

.request-page a.rp-link,
.request-page a.rp-link:visited { color: var(--rp-emerald); font-weight: 600; }
.request-page a.rp-link * { color: inherit !important; }

.request-page .rp-btn:focus-visible,
.request-page .rp-link:focus-visible,
.request-page .rp-suggest a:focus-visible {
  outline: 3px solid var(--rp-focus);
  outline-offset: 3px;
}

/* ---- Form section --------------------------------------------------- */
.request-page .rp-form { scroll-margin-top: 24px; }
.request-page .rp-form:focus { outline: none; }
.request-page .rp-form .follow-up-hint { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; }

/* Two tips side by side on wider screens, stacked on phones */
.request-page .rp-hints {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  margin: 0 0 32px;
  padding: 28px 36px;
  border-radius: 24px;
  background: var(--rp-spruce-3);
  font-size: 15px;
  color: var(--rp-ink);
}
.request-page .rp-hint h3 { margin: 0 0 10px; font-size: 15px; }
/* The theme removes bullets from lists, so turn them back on here */
.request-page .rp-hint ul { margin: 0; padding-left: 20px; list-style: disc outside; }
.request-page .rp-hint li { display: list-item; list-style: inherit; }
.request-page .rp-hint li + li { margin-top: 2px; }
.request-page .rp-hint p { margin: 0; max-width: 46ch; line-height: 1.65; }
.request-page .rp-hint--warn {
  padding-left: 40px;
  border-left: 1px solid var(--rp-spruce);
}
@media (max-width: 700px) {
  .request-page .rp-hints { grid-template-columns: 1fr; padding: 20px 24px; }
  .request-page .rp-hint--warn {
    margin-top: 16px;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rp-spruce);
  }
}
.request-page .rp-hint--warn h3::before { content: "🔒 "; }

/* ---- Suggested articles (built by request-page.js) ------------------ */
.request-page .rp-suggest {
  margin: 8px 0 20px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--rp-spruce-2);
}
.request-page .rp-suggest[hidden] { display: none; }
.request-page .rp-suggest__title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--rp-ink); }
.request-page .rp-suggest ul { margin: 0; padding: 0; list-style: none; }
.request-page .rp-suggest li + li { margin-top: 6px; }
.request-page .rp-suggest a,
.request-page .rp-suggest a:visited { color: var(--rp-emerald); }
.request-page .rp-suggest__note { margin: 10px 0 0; font-size: 13px; color: #4a5258; }


@media (max-width: 600px) {
  .request-page .rp-hero { padding: 48px 16px 104px; }
  .request-page .rp-options { margin-top: -72px; }
}

/* ---- Hide Zendesk's own "Suggested articles" list -------------------
   Our list (above) replaces it. Zendesk shows/hides it with an inline
   style, so !important is needed. Remove this rule to bring it back. */
.request-page .suggestion-list,
.request-page .searchbox { display: none !important; }

/* ---- Links in running text: same look as links in articles ----------- */
.request-page .rp-option p a,
.request-page .rp-phone__text a,
.request-page .rp-hint a {
  color: #023333;
  font-weight: normal;
  text-decoration: underline;
}
.request-page .rp-option p a:visited,
.request-page .rp-phone__text a:visited,
.request-page .rp-hint a:visited { color: #023333; }
.request-page .rp-option p a:hover,
.request-page .rp-phone__text a:hover,
.request-page .rp-hint a:hover,
.request-page .rp-option p a:focus,
.request-page .rp-phone__text a:focus,
.request-page .rp-hint a:focus { color: #c4d5d9 !important; }

/* "Opens in a new tab" icon, same as in articles. Add
   class="link--new-tab" target="_blank" rel="noopener" to the link. */
/* Keep the icon on the same line as the last word */
.request-page a.link--new-tab { white-space: nowrap; }
.request-page a.link--new-tab::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5H3a1 1 0 0 0-1 1V13a1 1 0 0 0 1 1h8.5a1 1 0 0 0 1-1V9.5'/><path d='M9.5 2H14v4.5'/><path d='M14 2 7.5 8.5'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5H3a1 1 0 0 0-1 1V13a1 1 0 0 0 1 1h8.5a1 1 0 0 0 1-1V9.5'/><path d='M9.5 2H14v4.5'/><path d='M14 2 7.5 8.5'/></svg>") no-repeat center / contain;
}

@media (max-width: 700px) {
  .request-page .rp-phone .rp-phone__numbers {
    min-width: 0;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rp-spruce);
    text-align: left;
    justify-content: flex-start;
    width: 100%;
  }
}

/* ---- Card disputes: "Report another payment" (dispute-repeat.js) ------
   Not scoped to .request-page: the box shows on the page Zendesk opens
   after sending (home page or the request page). Light Heather Purple so it
   stands out from the lime hero right below it. For a quieter look, change
   --dr-bg to #f7f7f7. */
.dispute-repeat {
  --dr-bg: #fbe7fd;
  max-width: 1160px;
  margin: 40px auto 32px;
  padding: 28px 36px;
  /* The page scrolls the box into view; leave space above it */
  scroll-margin-top: 40px;
  border-radius: 24px;
  background: var(--dr-bg);
  color: #23282d;
  box-sizing: border-box;
}
@media (max-width: 1208px) { .dispute-repeat { margin: 32px 16px; scroll-margin-top: 24px; } }
@media (max-width: 600px)  { .dispute-repeat { padding: 22px 20px; border-radius: 20px; } }
.dispute-repeat__title {
  margin: 0 0 8px;
  font-family: "GT Standard Extended", "GT Standard", sans-serif;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.2;
  color: #23282d;
}
.dispute-repeat__body { margin: 0 0 20px; font-size: 16px; line-height: 1.5; color: #23282d; }
.dispute-repeat__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
/* Black pill, same as the "Open account" button in the header */
a.dispute-repeat__button,
a.dispute-repeat__button:visited {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px;
  background: #23282d;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
a.dispute-repeat__button:hover,
a.dispute-repeat__button:focus { background: #3a4046; color: #fff !important; text-decoration: none; }
.dispute-repeat__done {
  padding: 0;
  border: 0;
  background: none;
  color: #023333;
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}
.dispute-repeat__done:hover { color: #4a5258; }
a.dispute-repeat__button:focus-visible,
.dispute-repeat__done:focus-visible { outline: 3px solid #07696f; outline-offset: 3px; }

/* Note above the pre-filled dispute form */
.dispute-repeat-note {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #edf5cd;
  color: #23282d;
  font-size: 15px;
  scroll-margin-top: 24px;
}

/* ------------------------------------------------------------------
------------------------------------------------------------------
   Article collapsible sections (built by article-collapse.js)
------------------------------------------------------------------
------------------------------------------------------------------- */

.article-body .article-collapse {
  --collapse-ink: #1f2a2e;
  --collapse-arrow: #2a7489;
  --collapse-focus: #7fbfd1;
  --collapse-line: #b9dde7;
  --collapse-hover: #f7f7f7;
  --collapse-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --collapse-speed: 0.35s;
  margin: 24px 0;
}

/* The heading keeps its size from the theme; only spacing changes */
.article-body .article-collapse .article-collapse__heading {
  margin: 0;
  /* Ignore indents added in the editor or by the theme, so titles line up */
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

/* The clickable title */
.article-body .article-collapse .article-collapse__toggle {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 12px 8px 12px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  font: inherit;
  line-height: 1.35;
  text-align: left;
  color: var(--collapse-ink);
  cursor: pointer;
}

/* Bold text in a title keeps the heading's weight. Otherwise the theme's
   bold weight (often lighter than the heading's) makes it look thinner. */
.article-body .article-collapse .article-collapse__toggle strong,
.article-body .article-collapse .article-collapse__toggle b {
  font-weight: inherit;
}

.article-body .article-collapse .article-collapse__toggle:hover {
  background: var(--collapse-hover);
}

.article-body .article-collapse .article-collapse__toggle:focus-visible {
  outline: 2px solid var(--collapse-focus);
  outline-offset: -2px;
}

/* Arrow: points right when closed, down when open */
.article-body .article-collapse .article-collapse__chevron {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--collapse-arrow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--collapse-speed) var(--collapse-ease);
}

.article-body .article-collapse [aria-expanded="true"] > .article-collapse__chevron {
  transform: rotate(90deg);
}

/* Sliding open and closed */
.article-body .article-collapse .article-collapse__content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--collapse-speed) var(--collapse-ease),
              opacity var(--collapse-speed) var(--collapse-ease);
}

.article-body .article-collapse .article-collapse__content.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.article-body .article-collapse .article-collapse__content > div {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;                     /* keeps hidden links out of keyboard tabbing */
  padding: 0 4px 0 30px;                  /* lines content up with the title text */
  transition: visibility 0s linear var(--collapse-speed);
}

.article-body .article-collapse .article-collapse__content.is-open > div {
  visibility: inherit;                    /* stays hidden inside a closed H1 */
  padding-top: 10px;
  padding-bottom: 12px;
  transition-delay: 0s;
}

.article-body .article-collapse .article-collapse__content > div > :first-child {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .article-body .article-collapse .article-collapse__chevron,
  .article-body .article-collapse .article-collapse__content {
    transition: none;
  }
}

/* Print: everything open, no arrows */
@media print {
  .article-body .article-collapse .article-collapse__content {
    display: block;
    opacity: 1;
  }
  .article-body .article-collapse .article-collapse__content > div {
    visibility: visible;
    overflow: visible;
  }
  .article-body .article-collapse .article-collapse__chevron {
    display: none;
  }
}