pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/
.hljs {
  color: #24292e;
  background: #ffffff
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #d73a49
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #6f42c1
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #005cc5
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #032f62
}
.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #e36209
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #6a737d
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #22863a
}
.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #24292e
}
.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #005cc5;
  font-weight: bold
}
.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #735c0f
}
.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #24292e;
  font-style: italic
}
.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #24292e;
  font-weight: bold
}
.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #22863a;
  background-color: #f0fff4
}
.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #b31d28;
  background-color: #ffeef0
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
  
}


.hljs {
  background: inherit;
}

@font-face {
  font-family: "Inter";
  src: url("/font/Inter-Regular.ttf");
}
@font-face {
  font-family: "Inter";
  src: url("/font/Inter-Thin.ttf");
  font-weight: 100;
}
@font-face {
  font-family: "Inter";
  src: url("/font/Inter-ExtraLight.ttf");
  font-weight: 200;
}
@font-face {
  font-family: "Inter";
  src: url("/font/Inter-Light.ttf");
  font-weight: 300;
}
@font-face {
  font-family: "Inter";
  src: url("/font/Inter-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: "Inter";
  src: url("/font/Inter-Bold.ttf");
  font-weight: bold;
}

/* For Carbone examples */
@font-face {
  font-family: "UbuntuMono";
  src: url("/font/UbuntuMono-Regular.ttf");
}

@font-face {
  font-family: "UbuntuMono";
  src: url("/font/UbuntuMono-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "Kalam";
  src: url("/font/Kalam-Light.ttf");
}

.padding-horizontal {
  padding: 0 0;
}

.merge-with-footer {
  /* use for image in about-us page */
  margin-bottom: -35px;
}


@media(max-width: 767px) {
  body>footer,body>header,body>main,section {
    --pico-block-spacing-vertical:calc(var(--pico-spacing) * 1.25)
  }
  article{
    --pico-block-spacing-horizontal:calc(var(--pico-spacing) * 1.25)
  }
  .padding-horizontal {
    padding: 0 20px;
  }
}
@media(min-width: 768px) {
  body>footer,body>header,body>main,section {
    --pico-block-spacing-vertical:calc(var(--pico-spacing) * 1.5)
  }
  article{
    --pico-block-spacing-horizontal:calc(var(--pico-spacing) * 1.5)
  }
  .merge-with-footer {
    margin-bottom: -60px;
  }
}
@media(min-width: 1024px) {
  body>footer,body>header,body>main,section {
    --pico-block-spacing-vertical:calc(var(--pico-spacing) * 1.75)
  }
  article{
    --pico-block-spacing-horizontal:calc(var(--pico-spacing) * 1.75)
  }
  .merge-with-footer {
    margin-bottom: -80px;
  }
}
@media(min-width: 1280px) {
  body>footer,body>header,body>main,section {
    --pico-block-spacing-vertical:calc(var(--pico-spacing) * 1.75)
  }
  article{
    --pico-block-spacing-horizontal:calc(var(--pico-spacing) * 1.75)
  }
  .merge-with-footer {
    margin-bottom: -100px;
  }
}
@media(min-width: 1536px) {
  body>footer,body>header,body>main,section {
    --pico-block-spacing-vertical:calc(var(--pico-spacing) * 1.75)
  }
  article{
    --pico-block-spacing-horizontal:calc(var(--pico-spacing) * 1.75)
  }
  .padding-horizontal {
    padding: 0 20px;
  }
  .merge-with-footer {
    margin-bottom: -150px;
  }
}



:root {
  --pico-font-family-sans-serif: 'Inter', sans-serif;
  --pico-border-radius: 0.45rem;
  --pico-img-border-radius: 0.90rem;

  --pico-nav-element-spacing-vertical: 0.8rem; /* default 1 */
  --pico-typography-spacing-vertical: 0.8rem; /* default 1 */
  --pico-nav-link-spacing-vertical: calc(var(--pico-nav-element-spacing-vertical)/2);
  --pico-form-element-spacing-vertical:  calc(var(--pico-nav-element-spacing-vertical)/2);
  /*--pico-nav-element-spacing-vertical : 0.5rem;*/
  --pico-header-height: calc(4.5rem + var(--pico-border-width));

  --pico-nav-bar-offset: 5rem;
  --pico-nav-bar-height: 75px; /* not fixed because it depends on margin above/below login button */

  --carbone-example-padding: calc(1.5 * var(--pico-spacing));

  /* landing page font size increase */
  --large-font-size: 190%;
  --large-font-size768: 190%;
  --large-font-size1024: 240%;
  --large-font-size1280: 290%;
  --large-font-size1536: 300%;

  /* pricing gradient */
  --pricing-gradient: linear-gradient(90deg,rgba(179,0,255,1) 0%, rgba(0,174,255,1) 100%);

  /* user review */
  --heightReviewCard: 350px;
  --marginRightReviewCard: 30px;
  --heightReviewCardOnMobile: 230px;
  --marginRightReviewCardOnMobile: 15px;

  --dark-background: #23112a; /* only footer? */
  --medium-background: #f3e0ff; /* only user assitance? */
  --light-background: #eff1f4; /* landing page alternance */

  --line-height-landing : 1.8; /* for landing p */

  /* pricing */ 
  --switch-toggle-width: 15px;
  /* -- range slider */
  --track-w: 100%;
  --track-h: .30em;
  --thumb-d: 1.5em;
  --track-c: #ccc;
  --dist: calc(var(--track-w) - var(--thumb-d));
  --rangeHorizPadding: 0.8em;
  --unitTick: 5px;
  --border-width: 1px;
  --spacing: 1rem;
  --transition: 0.2s ease-in-out;
  /*--color: hsl(205deg, 20%, 32%);*/
  --color: #403147; /* TODO uniquement pour les tableau des example ??? */
  --muted-color: hsl(205deg, 10%, 50%); /* TODO #726479 */
  --muted-border-color: hsl(205deg, 20%, 94%);
  --accordion-border-color: --muted-border-color;
  --accordion-close-summary-color: --color;
  --accordion-open-summary-color: --muted-color;
  --accordion-active-summary-color: --carbone;
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  --icon-check-pricing: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path d="m424-408-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-408Zm56 328q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>');

  --scrollbar-doc-color: #f1f1f1;
  --color-badge-doc: var(--dark-background);
  --color-background-badge-doc: var(--medium-background);
  --color-background-badge-new: #d0d8f5;
  --color-background-badge-updated: #d0d8f5;
  --color-background-badge-version: #e8e8e8;
  --color-background-badge-deprecated: #c39ed0;
  --color-badge-white: #ffffff;
  --color-badge-blue: #0299e5;
  --color-badge-green: #86a546;
  --color-badge-yellow: #b2a64e;
  --color-badge-red: #c14a75;
  --color-method-get-head-light: #ddf1fc;
  --color-method-post-light: #e4f2c8;
  --color-method-put-patch-light: #f7f2c3;
  --color-method-delete-light: #f2d8e1;
  --color-method-get-head-dark: #0099e5;
  --color-method-post-dark: #85a546;
  --color-method-put-patch-dark: #b1a74e;
  --color-method-delete-dark: #c14a74;

}
@media (min-width: 1536px) {
  :root {
    --pico-font-size: 125%;
  }
}

/* Purple color for light color scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme=light],
:root:not([data-theme=dark]) {
  --pico-text-selection-color: rgba(205, 104, 224, 0.25);
  --pico-primary: #A544C5;
  --pico-primary-background: #A544C5; /* #23112a */
  --pico-primary-underline: rgba(170, 64, 191, 0.5);
  --pico-primary-hover: #802e90;
  --pico-primary-hover-background: #802e90;
  --pico-primary-focus: rgb(255 255 255 / 0%); /* rgba(205, 104, 224, 0.25); */
  --pico-switch-background-color: #dfdfdf; /* also used for tabs in pricing */
  --pico-primary-inverse: #fff;
  --pico-header-background: rgba(255, 255, 255, .8);


  --pico-chapter-color: #aa40bf;

  /* couleur déjà teiunté violet */

  --pico-muted-border-color: #ece7f0;
  --pico-muted-color: #736479;

  --pico-contrast-background: #211825;
  --pico-code-background-color: #f6f3f7;
  --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgb(139 104 153 / 2%),
                     0.0335rem 0.067rem 0.402rem rgb(139 104 153 / 2%),
                     0.0625rem 0.125rem 0.75rem rgb(139 104 153 / 3%),
                     0.1125rem 0.225rem 1.35rem rgb(139 104 153 / 4%),
                     0.2085rem 0.417rem 2.502rem rgb(139 104 153 / 4%),
                     0.5rem 1rem 6rem rgb(139 104 153 / 6%),
                     0 0 0 0.0625rem rgb(139 104 153 / 2%);

  --pico-h1-color: #352d38;
  --pico-h2-color: #413744;
  --pico-h3-color: #4d4251;
  --pico-h4-color: #594d5e;
  --pico-h5-color: #6a5c70;
  --pico-h6-color: #726479;

  --pico-secondary: #7f6b85;
  /*--pico-secondary-background: #593667;*/
  --pico-secondary-background: #7f6b85;
  /*--pico-secondary-border: #593667;*/
  --pico-secondary-hover: #5e486b;
  --pico-secondary-hover-background: #5f486b;
  --pico-secondary-hover-border: var(--pico-secondary-hover-background);
  --pico-secondary-hover-underline: var(--pico-secondary-hover);
  --pico-color: #423744;

  /* add tertiary button for changelog */
  --pico-tertiary-background: #eee6f2;
  --pico-tertiary-border: var(--pico-tertiary-background);
  --pico-tertiary-hover: #e2d6e8;
  --pico-tertiary-hover-background: #e3d7e9;
  --pico-tertiary-hover-border: var(--pico-tertiary-hover-background);
  --pico-tertiary-inverse: #4c4053;
}

/* Purple color for dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme=dark] {
  --pico-text-selection-color: rgba(212, 125, 228, 0.1875);
  --pico-primary: #d47de4;
  --pico-primary-background: #23112a; /*  #9236a4; */
  --pico-primary-underline: rgba(212, 125, 228, 0.5);
  --pico-primary-hover: #e2a3eb;
  --pico-primary-hover-background: #aa40bf;
  --pico-primary-focus: rgba(212, 125, 228, 0.25);
  --pico-primary-inverse: #fff;
  --pico-chapter-color: #aa40bf;

  /* couleur déjà teinté violet */ 
  --pico-h3-color: #cbc2d0;
  --pico-h4-color: #c0b3c5;
  --pico-muted-border-color: #2e2032;
  --pico-secondary-hover: #c0b3c5;
  --pico-secondary: #ae96af;
  --pico-secondary-underline: rgb(173 150 175 / 50%);
  --pico-color: #cbc2d0;
}

[role=group] [role=button], [role=group] [type=button], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=submit], [role=search] button {
  --pico-form-element-spacing-horizontal: 1.5rem;
}

.dark-background {
  background-color: var(--dark-background);
}
.dark-background-fill {
  fill: var(--dark-background);
}
.medium-background {
  background-color: var(--medium-background);
}
.light-background {
  background-color: var(--light-background);
}

.secondary-text {
  color:var(--pico-secondary);
}

.handwritten-text {
  color:var(--pico-secondary);
  font-family: "Kalam";
}
/* Deactivate all transitions by default, and activate it after page load with JS to avoid blinking */
.no-transition * {
  transition: none !important;
}
.no-margin {
  margin: 0;
}
.no-border {
  border: none;
}
.selectable {
  user-select: all;
}

.landing-img  {
  border-radius: var(--pico-img-border-radius);
  box-shadow: rgb(43 9 66 / 15%) 0px 0.5rem 1rem 0px;
}
.landing-img-transparent  {
  border-radius: initial;
  box-shadow: none;
}

/* small button */
[role=button].small, [type=button].small, button.small {
  padding: calc(var(--pico-form-element-spacing-vertical)/2) calc(var(--pico-form-element-spacing-horizontal)/2);
  font-size: 0.8rem;
}
[role=button].tiny, [type=button].tiny, button.tiny {
  padding: calc(var(--pico-form-element-spacing-vertical)/2) calc(var(--pico-form-element-spacing-horizontal)/2);
  font-size: 0.6rem;
  font-weight: normal;
}

body>main {
  padding-block: calc(var(--pico-block-spacing-vertical)*2);
  padding-bottom: 0; /* important for background transition */
  font-size: 0.8rem;
  /*overflow-wrap: anywhere;  TODO check why */  /* break long blockcode to avoid horizontal scroll on mobile in documentation */
}
code, kbd, pre, samp {
  font-size: .8em;
}
code, kbd {
  padding: 0.2rem;
}

footer {
  --pico-nav-element-spacing-vertical: 0;
  background: var(--pico-primary-background);
}

#topnav > div  {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main > aside {
  --pico-font-size: 16px;
  font-size: var(--pico-font-size);
}

@media (min-width: 1024px) {
  body>header.is-fixed-above-lg {
    /*z-index: 2;*/
    position: sticky;
    top: 0;
  }
}
body > header {
  z-index: 4;
  position: relative;
  padding: 0;
  border-bottom: var(--pico-border-width) solid var(--pico-header-border-color);
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  background-color: var(--pico-header-background);
}

#topnav {
  box-shadow: none;
  transition: box-shadow ease 0.2s;
}
#topnav.navbar-shadow {
  box-shadow: var(--pico-card-box-shadow);
}


td, th {
  /* reduce default table spacing of pico */
  padding: calc(var(--pico-spacing)/ 4) calc(var(--pico-spacing)/2);
}

body>main[role=landing] {
  /*font-size: 0.9rem;*/
}

body>footer {
  font-size: 0.8rem;
  background-color: var(--pico-primary-background);
}

/* add the noborder option to pico button */
:is(button,[type=submit],[type=button],[role=button]).noborder, [type=reset].noborder, :is(button,[type=submit],[type=button],[role=button]).outline.contrast {
  --pico-border-color: transparent;
}
:is(button,[type=submit],[type=button],[role=button]).noborder:is([aria-current],:hover,:active,:focus) {
  --pico-border-color: transparent;
}
/* modify default pico behavior with section. Use padding instead of margin to avoid creating whitepace on background wave transition on landing page for example */
section {
  margin-bottom: 0;
  padding-bottom: var(--pico-block-spacing-vertical);
}
/* fix pico bad margin of ul if used in vertical aside menu */
aside nav ol:first-of-type, aside nav ul:first-of-type {
  margin-left : 0;
}
/* fix pico bad margin of ul if used in vertical aside menu */
aside nav ol:last-of-type, aside nav ul:last-of-type {
  margin-right : 0;
}

nav.network svg {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 5px;
  transform: translateY(-0.0625rem);
}

/* smooth scroll when clicking on href */
html.smooth-scroll {
  scroll-behavior: smooth;
}

table tbody tr:nth-child(odd) td, table tbody tr:nth-child(odd) th {
  background-color: var(--pico-table-row-stripped-background-color);
}

.space {
  padding-bottom: var(--pico-spacing);
}
.space2 {
  padding-bottom: calc(2*var(--pico-spacing));
}
.space3 {
  padding-bottom: calc(3*var(--pico-spacing));
}


/*hgroup > *:not(:first-child):last-child {
  --pico-color: var(--pico-muted-color);
  font-size: 1rem;
  margin: ;
}*/

.background-doc {
  background-image: url(/img/background-doc-large.webp);
  background-repeat: no-repeat;
  background-position: 0 100px;
  background-size: 100%;
}
.background-doc2 {
  background-image: url(/img/background-doc-large-purple.webp);
  background-repeat: no-repeat;
  background-position: -250px 0;
  background-size: 100%;
}

details summary {
  transition: margin 250ms ease-out;
}

.reveal {
  animation: fade-in-right 0.4s 0s both;
}
.reveal2 {
  animation: fade-in-right 0.4s 0.1s both;
}
.reveal3 {
  animation: fade-in-right 0.2s 0.2s both;
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/***************************************************************/
/* article with image */
/***************************************************************/

.image-card {
  padding: 0;
  max-width: 220px;
  overflow: hidden; /* to make visible border radius */
  margin-bottom: 0;
}
.image-card footer {
  height: 100%;
  margin: 0;
  padding: 1rem;
}
.image-card img {
  width: 100%;
  height: ;
}



/* TODO, should we do this only for .doc and layout2 class? Yes for pricing */
/* add invisible navbar offset when clicking on #href */
/*main.doc h2:before, h3:before {
  content: '';
  display: block;
  position: relative;
  width: 0;
  height: var(--pico-nav-bar-offset);
  visibility: hidden;
  margin-top: calc(-1 * var(--pico-nav-bar-offset));
}*/
/* Add space above for table of content scrolling  */
/* add invisible navbar offset when clicking on #href */
h2:before, main.doc h3:before {
  content: '';
  display: block;
  position: relative;
  width: 0;
  height: var(--pico-nav-bar-offset);
  visibility: hidden;
  margin-top: calc(-1* var(--pico-nav-bar-offset));
}
.plan-header h2:before, h3:before {
  content: none; /* cancel for pricing to avoid bug with month/year checkbox */
}


.nostyle {
  all: unset;
}

.nostyle li {
  list-style: none;
}
.nowrap {
  white-space: nowrap;
}


.grid-equal {
  display: grid;
  gap: calc(var(--pico-spacing) * 2);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.grid-title-content {
  grid-template-columns: 2fr 3fr;
}
.grid-equal.no-align {
  align-items: start;
}

@media (max-width: 767px) {
  .grid-equal {
    grid-auto-flow: row;
  }
  .grid-title-content {
    grid-template-columns: 1fr;
  }
}

/* Create a backrgound gradient for about us,  faq */ 

/*** FAQ ***/

.boxed {
  position: relative;
  background: transparent;
  border-radius: 20px;
  padding: 40px;
}

.boxed:before {
  border-radius: 22px;
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  opacity: 0.2;
  background-size: 100% 100%;
  background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
  background-image: radial-gradient(68% 52% at 24% 50%, #FFD2F9FF 4%, #073AFF00 100%),radial-gradient(18% 28% at 18% 71%, #FFFFFF59 6%, #073AFF00 100%),radial-gradient(70% 53% at 36% 76%, #FFFFFFFF 2%, #073AFF00 100%),radial-gradient(42% 53% at 15% 94%, #B81BFFFF 7%, #073AFF00 100%),radial-gradient(42% 53% at 34% 72%, #A140FFFF 7%, #B607FF00 100%),radial-gradient(18% 28% at 35% 87%, #CB73FFFF 7%, #073AFF00 100%),radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%, #073AFF00 100%),radial-gradient(59% 50% at 91% -16%, #86FFFC9C 24%, #073AFF00 100%),radial-gradient(35% 56% at 91% 74%, #FFA1F6F5 9%, #073AFF00 100%),radial-gradient(74% 73% at 67% 38%, #FF9FE1F5 24%, #073AFF00 100%),linear-gradient(125deg, #C179FFFF 1%, #AE8AFFFF 100%);
  /*background-image: radial-gradient(68% 52% at 24% 50%, #ffa0f2 4%, #073AFF00 100%), radial-gradient(18% 28% at 18% 71%, #FFFFFF59 6%, #073AFF00 100%), radial-gradient(70% 53% at 36% 76%, #FFFFFFFF 2%, #073AFF00 100%), radial-gradient(42% 53% at 15% 94%, #f0d0ff 7%, #073AFF00 100%), radial-gradient(42% 53% at 34% 72%, #a74cff 7%, #B607FF00 100%), radial-gradient(18% 28% at 35% 87%, #ca70ff 7%, #073AFF00 100%), radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%, #073AFF00 100%), radial-gradient(59% 50% at 91% -16%, #dbf3ff9c 24%, #073AFF00 100%), radial-gradient(35% 56% at 91% 74%, #FFA1F6F5 9%, #073AFF00 100%), radial-gradient(74% 73% at 67% 38%, #FF9FE1F5 24%, #073AFF00 100%), linear-gradient(125deg, #f4e7ff 1%, #d5b3ff 100%);*/
  z-index: -1;
}
.boxed hr {
  border-top: 1px solid #f3dafb;
}
.boxed details p {
  color: var(--pico-secondary);
  font-size: 0.85em;
}

.boxed details summary {
  font-weight: 500;
}
.boxed details summary:after {
  color: var(--pico-secondary);
}



/* Better tooltip than picocss (support <br>) */
.tooltip {
  position: relative;
  border-bottom: 1px dotted #AAA;
  text-decoration: none;
  cursor: help;
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 260px;
  background-color: var(--pico-contrast);
  color: white;
  font-size: 0.9em;
  padding: 8px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--pico-contrast) transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Add tertiary button for changelog */
:is(button, [type=submit], [type=button], [role=button]).tertiary {
  --pico-background-color: var(--pico-tertiary-background);
  --pico-border-color: var(--pico-tertiary-border);
  --pico-color: var(--pico-tertiary-inverse);
  cursor: pointer;
}
:is(button, [type=submit], [type=button], [role=button]).tertiary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
  --pico-background-color: var(--pico-tertiary-hover-background);
  --pico-border-color: var(--pico-tertiary-hover-border);
  --pico-color: var(--pico-tertiary-inverse);
}
details summary[role=button]:is(.tertiary)::after {
  filter: none;
}
summary[role=button]:is(.small)::after {
  height: calc(1rem* var(--pico-line-height, 1.2) / 1.2);
}

/******************************************************************************************************************************
 * TOP nav
*******************************************************************************************************************************/
.top-nav-logo {
  height: 20px;
}

@media (min-width: 768px) {
  .top-nav-logo {
    height: 28px;
  }
}
@media (min-width: 1280px) {
  .top-nav-logo {
    height: 38px;
  }
}

.icon-nav {
  font-size: inherit;
  vertical-align: text-top;
  margin-right: 10px;
}
#topnav .icon-nav {
  font-size: 1.5rem;
}

#topnav nav.menu details.dropdown {
  display: inline-block; /* fix small vertical misalignment (inline by default) */
}   

#topnav .dropdown summary:not([role]) {
  border-color: transparent; /* make it transparent to keep alignment */
  background-color: transparent;
  color: var(--pico-contrast);
}
#topnav .dropdown summary:after {
  /* remove arrow and fix firefox margin at the same time*/
  all:unset;
}
#topnav .dropdown summary:not([role]):focus,
#topnav .dropdown summary:not([role]):hover {
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
}
#topnav .dropdown:has(a[aria-current]) summary a {
  text-decoration: underline;
}

#topnav nav > ul > li > a:where([aria-current]) {
  text-decoration: underline;
}
#topnav a > svg {
  /* size of icon in sub menu Navigation */
  width: 1.6rem;
  height: 1.6rem;
}
#topnav a > i  {
  font-size: 1.6rem;
}
#topnav .subtitle {
  font-size: 70%;
  color:var(--pico-muted-color);
  display: block;
}
#topnav details.dropdown ul li a {
  display: flex;
  gap:10px;
  align-items: center;
}
/* 
 * Enable to have multiple summary/details openned at the same time 
 * Deactivate default behavior when class dropdown is used with pico css
 */
#topnav details.dropdown[open] summary::before {
  display: none;
}
/* remove margin between button on detail bloc to avoid losing hover */
#topnav details.dropdown summary+ul {
  margin-top:0;
}

#topnav a {
  color: var(--pico-contrast);
}

#topnav .github-icon {
  /*font-size: 1.35em;*/
  vertical-align: middle;
}


@keyframes open-summary {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
@keyframes close-summary {
  0% { opacity: 1 }
  100% { opacity: 0 }
}
#topnav details.dropdown details[open] {
  animation: open-summary .4s
}
#topnav details.closing summary~* {
  animation: close-summary .4s
}


#hamburger {
  display: none;
}
@media (max-width: 1024px) {
  .hide-below-lg {
    display: none;
  }
  #topnav details.dropdown {
    display: block;
    /*margin-bottom: var(--pico-spacing);*/
    margin:0;
  }
  #topnav details.dropdown summary+ul  {
    position: relative;
    border: none;
    box-shadow: none;
  }
  /* remove padding of dropdown list on mobile */
  #topnav .dropdown summary:not([role]) {
    border:none;
    padding-left:0;
    padding-right:0;
  }

  #hamburger {
    display: block;
  }

  .menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    min-height: 100vh;
    width: 100vw;
    background-color: var(--pico-background-color);
  }

  .menu.show {
    display: block;
  }

  .menu ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }
}


/******************************************************************************************************************************
 * Landing page style
 *******************************************************************************************************************************/
.dark-background  .grid-equal div {
  background-color: transparent;
  color: var(--pico-h4-color);;
}

.dark-background .grid-equal div  p {
  font-weight: 200;
}

svg.fix  {
  /* fixes display problem on Safai at certain resolution
   https://stackoverflow.com/questions/48873510/off-center-rendering-of-inline-svg-on-ios-safari */
  -webkit-transform: translate(0px,0px); 
  /* but fix for Safari create the issue on Firefox. I fixed Firefox issue with a negative margin */
  margin-bottom: -1px;
  display: block;
}


.carbone-output {
  transform: scale(1.8);
  transform-origin: 10% 50%;
}
.carbone-role {
  margin-top: 300px;
  margin-bottom: 300px;
}
.carbone-template {
  margin-bottom: -280px;
}
.carbone-wave {
  background-image: url(/img/carbone-wave.svg);
  overflow: hidden;
  background-size: 100% 85%;
  background-position-y: center;
}

@media (max-width: 767px) {

  .hide-on-mobile {
    display: none;
  }
  .center-on-mobile {
    text-align: center;
  }
  .carbone-wave {
    background-size: 100% 35%;
    background-position-y: 130px;
  }
  .carbone-template {
    margin-bottom: -200px;
  }
  .carbone-input-output > div:nth-child(1) { order: 2; }
  .carbone-input-output > div:nth-child(2) { order: 1; }
  .carbone-input-output > div:nth-child(3) { order: 3; }
  .carbone-input-output .carbone-input {
    display: none;
  }
  .carbone-input-output .carbone-output {
    transform: scale(1.4);
    transform-origin: 20% 120%;
    margin-bottom: 0;
  }
  .carbone-input-output .carbone-role {
    margin-top: 240px;
    margin-bottom: 180px;
  }
  .large h1 {
    font-size: var(--large-font-size);
    text-align: center;
  }
  .large h2 {
    font-size: calc(var(--large-font-size)*1);
  }
  .large h3 {
    font-size: calc(var(--large-font-size)*0.8);
  }
  /*.large p {
    font-size: 110%;
    text-align: center;
  }*/
}
@media (min-width: 768px) {
  .large h1 {
    font-size: var(--large-font-size768);
  }
  .large h2 {
    font-size: calc(var(--large-font-size768)*1);
  }
  .large h3 {
    font-size: calc(var(--large-font-size768)*0.5);
  }
  /*.large p {
    font-size: 110%;
  }*/
}
@media (min-width: 1024px) {

  .large h1 {
    font-size: var(--large-font-size1024);
  }
  .large h2 {
    font-size: calc(var(--large-font-size1024)*1);
  }
  .large h3 {
    font-size: calc(var(--large-font-size1024)*0.5);
  }
  /*.large p {
    font-size: 140%;
  }*/
}
@media (min-width: 1280px) {
  .large h1 {
    font-size: var(--large-font-size1280);
  }
  .large h2 {
    font-size: calc(var(--large-font-size1280)*0.8);
  }
  .large h3 {
    font-size: calc(var(--large-font-size1280)*0.5);
  }
  /*.large p {
    font-size: 150%;
  }*/
}
@media (min-width: 1536px) {
  .large h1 {
    font-size: var(--large-font-size1536);
  }
  .large h2 {
    font-size: calc(var(--large-font-size1536)*0.9);
  }
  .large h3 {
    font-size: calc(var(--large-font-size1536)*0.5);
  }
  .carbone-input-output {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  /*.large p {
    font-size: 150%;
  }*/
}

.marker-yellow {
  background-color: #fedc12;
  padding: 3px 8px;
  border-radius: calc(var(--pico-border-radius)/2);
}

.marker-gradient {
  background: linear-gradient(90deg,rgba(179,0,255,0.2) 0%, rgba(0,85,255,0.2) 100%);
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  border-radius: calc(var(--pico-border-radius)/2);
}

.text-gradient {
  white-space: nowrap;
  background: linear-gradient(45deg, #3d4ae3, #c92eaa 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient 15s ease infinite;
  background-size: 200% auto;
}

.no-anim {
  animation: none;
}

/* put on grid parent to verticaly align flexbox */
.vertical-center {
  align-items: center;
}
.grid-center {
  justify-items: center;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/*** Trusted by ****/

.generic-badge {
  display: flex; 
  align-items: center;
  justify-content: center;
  height: 100% ;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  border-radius: 60px;
  opacity: 0.8;
}
.badge-1 {
  background-image: linear-gradient(to right, #c51eff 0%, #a082e9 51%, #c51eff 100%);
}
.badge-2 {
  background-image: linear-gradient(to right, #a082e9 0%, #b774ff 51%, #b774ff 100%);
}
.badge-3 {
  background-image: linear-gradient(to right, #b774ff 0%, #948ff4 51%, #84fab0 100%);
}
.badge-4 {
  background-image: linear-gradient(to right, #948ff4 0%, #ec75ff 51%, #a1c4fd 100%);
}
.badge-5 {
  background-image: linear-gradient(to right, #ec75ff 0%, #c51eff 51%, #ffecd2 100%);
}
.badge-6 {
  background-image: linear-gradient(to right, #c51eff 0%, #a082e9 51%, #c51eff 100%);
}

.grid8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: auto;
  grid-auto-rows: 1fr; /* same height on all rows*/
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .grid8 {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 0.6rem;
    grid-row-gap: 0.5rem;
  }
}
@media (min-width: 768px) {
  .grid8 {
    /*grid-column-gap: 20px;*/
  }
}
@media (min-width: 1280px) {
  .grid8 {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1rem;
    /*grid-column-gap: 40px;*/
  }
}

/*****************************************************
 * User review
 ***************************************************/

.testimonial footer {
  display: flex;
  align-items: center;
  gap: calc(var(--pico-block-spacing-horizontal)/2);
}

.testimonial {
  font-size: 0.9em;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* Prevent shrinking */
  flex-grow: 0; /* Prevent growing */
  flex-basis: auto; /* Maintain the intrinsic width */
}

.avatar img {
  width: 100%; /* Ensure the image fills the circle */
  height: 100%; /* Maintain the circular aspect */
  object-fit: cover; /* Crop the image to fill the circle */
}

@media(max-width: 767px) {
  .avatar {
    width: 40px;
    height: 40px;
  }
}

.review-extern {
  align-items: center;
  display: flex;
  gap: calc(var(--pico-block-spacing-horizontal)/2);
  text-decoration: none;
  flex-direction: column;
  color: #423744;
}
.review-extern i {
  font-size: 2em;
  color: var(--pico-primary);
  /*color: #fedc12;*/
}


.review-card {
  font-size: 0.9em;
  width: 300px;
  height: min-content;
  margin-right: var(--marginRightReviewCard);

  /* on mobile, keep card width and activate horizontal scroll*/
  flex-shrink: 0;
  flex-grow: 0;

  /* hover effect */
  transition-property: transform;
  transition-timing-function: cubic-bezier(.075, .82, .165, 1);
  transition-duration: .6s;

  position: relative;
  top: calc(var(--marginRightReviewCard)*2);
}
@media (max-width:767.98px) {
  .review-card {
    scroll-snap-align: start;
    margin-right: var(--pico-block-spacing-horizontal);
    top: calc(var(--marginRightReviewCard));
    /*height: var(--heightReviewCardOnMobile);*/
  }
}
/* hover review card, except on mobile */
@media (min-width:767.98px) {
  .review-card:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    transition-duration: .8s;
  }
}

.review-card.large {
  width: 350px;
}
@media (min-width:767.98px) {
  .review-card.large {
    width: 450px;
  }
}

.reviews-row-wr {
  height: calc(var(--heightReviewCard) + var(--marginRightReviewCard));
  width: 100%;
  overflow: hidden;
  position: relative;
}
.reviews-row-wr .reviews-row {
  position: absolute;
  display: flex;
  animation: 300s linear infinite;
  animation-name: slide-left;
}
@media (max-width:767.98px) {
  .reviews-row-wr .reviews-row {
    -webkit-animation: initial;
    animation: initial;
    position: static;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
  }
}
.reviews-row-wr .reviews-row.product {
  animation-name: slide-right;
}
/* stop animation when hovering a card */
.reviews-row-wr .reviews-row:has(.review-card:hover) {
  animation-play-state: paused;
}
.reviews-row-wr .reviews-row::-webkit-scrollbar {
  display: none;
}
@media (max-width:767.98px) {
  .reviews-row-wr {
    height: calc(var(--heightReviewCardOnMobile) + var( --pico-block-spacing-horizontal));
    /*margin-left: var(--pico-block-spacing-horizontal);*/
    display: flex;
  }
}

@keyframes slide-left {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  to {
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

/* Add space for hyperlinks */
#success-story:before {
  content: '';
  display: block;
  position: relative;
  width: 0;
  height: var(--pico-nav-bar-offset);
  visibility: hidden;
  margin-top: calc(-1* var(--pico-nav-bar-offset));
}
/****/


/*******************************************************************************************************************************
 * Carbone template example
 ******************************************************************************************************************************/

.cresult, .ctemplate {
  --pico-typography-spacing-top: 2rem;
}

.template-p {
  display: block;
  font-size: calc(var(--pico-font-size) * 0.75);
  margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.8);
}
.template-h1 {
  display: block;
  font-weight: bold;
  /*color: var(--pico-h1-color);*/
  /*color: #666066;*/
  color: #347dd0;
  font-size: calc(var(--pico-font-size) * 1.2);
  margin-top: calc(var(--pico-typography-spacing-top) * 0.3);
}
.template-h2 {
  display: block;
  font-weight: bold;
  /*color: var(--pico-h2-color);**/
  /*color: #787678;*/
  color: #5e98d9;
  font-size: calc(var(--pico-font-size) * 1.1);
  margin-top: calc(var(--pico-typography-spacing-top) * 0.2);
  /*margin-top: var(--pico-typography-spacing-top);*/
}
.template-h3 {
  display: block;
  font-weight: bold;
  /*color: var(--pico-h3-color);*/
  /*color: #8f8f8f;*/
  color: #7cafe7;
  font-size: calc(var(--pico-font-size) * 1.0);
  margin-top: calc(var(--pico-typography-spacing-top) * 0.1);
}
/*.template-h4 {
  display: block;
  color: var(--pico-h4-color);
}
.template-h5 {
  display: block;
  color: var(--pico-h5-color);
}
.template-h6 {
  display: block;
  color: var(--pico-h6-color);
}*/
.template-table {
  display: table;
  font-size: calc(var(--pico-font-size)* 0.75);
  /*width: 100%;*/
}
.template-tr {
  display: table-row;
}
.template-td {
  display: table-cell;
}
.template-th {
  display: table-cell;
}
.template-thead {
  display: table-header-group;
}
.template-tbody {
  display: table-row-group;
}

.template-ul { 
  display: block;
  list-style-type: disc;
  list-style-position: inside;
  margin-left: 15px;
}

.template-li {
  display: list-item;
  font-size: calc(var(--pico-font-size)* 0.75);
}

.template-thead .template-th {
  /*--pico-font-weight: 600;*/
  --pico-border-width: 0.1500rem;
  font-weight: bold;
}

.template-td, .template-th {
  padding: calc(var(--spacing) / 6) calc(var(--spacing)/2.8);
  /*border-bottom: var(--border-width) solid var(--table-border-color);*/
  border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
  color: #615766;
}

/* for :color formatter doc, inherit color of row if there is a color */
.template-tr[style*="color"] .template-td, .template-th {
  color: inherit;
}

.template-tbody .template-tr:nth-child(odd) {
  /*background-color: var(--table-row-stripped-background-color);*/
  background-color: var(--pico-table-row-stripped-background-color);
}

/* Specific color to explain :set formatter */
.set-new {
  color: #a544c5;
  background: #fbefff;
}
.set-old {
  color: #0066c5;
  background: #ecf6ff;
}

pre:has(.ctemplate), pre:has(.cresult) {
  background-color: white;
  font-family: 'UbuntuMono', Monospace;
  font-size: 0.8rem;
}
pre:has(.cdata), pre:has(.ctemplate), pre:has(.cresult) {
  flex: 1; /* use remaning height space */
  display: flex;
  margin-bottom: 0;
  border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) var(--pico-border-radius);
}

code.ctemplate, code.cresult {
  color: #626262;
  flex-grow: 1; /* force the scroll to be at the bottom when the template or result is larger*/
}

.formatter {
  font-family: var(--pico-font-family-monospace);
}

.carbone-example figure {
  display: flex;
  flex-flow: column;
  margin-top: var(--carbone-example-padding);
  overflow: visible;
  border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) var(--pico-border-radius);
}
.carbone-example figure.ctemplate, .carbone-example figure.cresult {
  background-color: white;
  /*box-shadow: var(--pico-card-box-shadow);*/
  box-shadow: 0px 0px 8px 3px rgb(139 104 153 / 12%);
}

.carbone-example figure figcaption {
  padding: 0 calc(var(--carbone-example-padding) / 2);
  line-height: var(--carbone-example-padding);
  margin-top: calc(-1 * var(--carbone-example-padding));
  width: min-content;
  font-size: 0.6rem;
  font-weight: bold;
  color: var(--pico-h3-color);
  /*font-style: italic;*/
  border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0 ;
}
.carbone-example figcaption::first-letter {
  text-transform: capitalize;
}
.carbone-example figure.cresult figcaption, .carbone-example figure.ctemplate figcaption {
  background-color: white;
  /*box-shadow: 3px -1px 7px rgba(0,0,0,0.08);*/
  box-shadow: 0px 0px 8px 3px rgb(139 104 153 / 12%);

}
.carbone-example figure.cdata figcaption {
  background: var(--pico-code-background-color);
}

.carbone-example figure.cdata  {
  grid-area: data-example;
}
.carbone-example figure.ctemplate  {
  grid-area: template-example;
}
.carbone-example img.mergeIcon  {
  grid-area: merge-icon;
}
.carbone-example figure.cresult  {
  grid-area: result-example;
}

.carbone-example {
  display: grid;
  gap: calc(var(--pico-spacing));
  column-gap: calc(var(--pico-spacing)/2);
  grid-template-rows: auto 1fr;
  /* minmax(0, 1fr) forces the children node to add horiztonal scroll when the code is too large */ 
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  grid-template-areas:
      "data-example data-example data-example"
      "template-example merge-icon result-example";
  margin-bottom: var(--pico-typography-spacing-vertical);
}

@media (max-width: 767px) {
  .carbone-example {
    grid-template-columns: 100%;
    grid-template-areas:
        "data-example"
        "template-example"
        "result-example";
  }
  img.mergeIcon {
    display: none;
  }
}



/*
.carbone-example {
  display: grid;
  gap: calc(var(--pico-spacing) * 2);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

@media (max-width: 767px) {
  .grid-equal {
    grid-auto-flow: row;
  }
}*/

/*h1 {
  --pico-font-size: 2rem;
  --pico-line-height: 1.25;
  --pico-typography-spacing-top: 3rem;
}

h2 {
  --pico-font-size: 1.75rem;
  --pico-line-height: 1.3;
  --pico-typography-spacing-top: 2.625rem;
}

h3 {
  --pico-font-size: 1.5rem;
  --pico-line-height: 1.35;
  --pico-typography-spacing-top: 2.25rem;
}

h4 {
  --pico-font-size: 1.25rem;
  --pico-line-height: 1.4;
  --pico-typography-spacing-top: 1.874rem;
}

h5 {
  --pico-font-size: 1.125rem;
  --pico-line-height: 1.45;
  --pico-typography-spacing-top: 1.6875rem;
}

h6 {
  --pico-font-size: 1rem;
  --pico-typography-spacing-top: 1.5rem;
}*/



.badge {
  background-color: var(--color-background-badge-doc);
  color: var(--color-badge-doc);
  padding: .2rem .4rem;
  font-size: 0.6rem;
  text-align: center;
  border-radius: 6px;
  display: inline;
}

.badge.product {
  cursor: help;
  position: relative;
}
/* 
  Tooltip 
  I don't use tooltip of pico because I need to inject html inside the tooltupe for icons
*/
.badge.product > span {
  display: block;
  z-index: 99;
  position: absolute;
  top: 140%;
  bottom: auto;
  left: 50%;
  padding: 0.25rem 0.5rem;
  transform: translate(-50%,-0.25rem);
  border-radius: var(--pico-border-radius);
  background: var(--pico-tooltip-background-color);
  color: var(--pico-tooltip-color);
  white-space: nowrap;
  opacity: 0;
  text-align: left;
  pointer-events: none;
}
/* little arrow above tooltip */
.badge.product > span:after {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  content: "";
  color: var(--pico-tooltip-background-color);
  transform: translate(-50%,-0.3rem);
  border: 0.3rem solid transparent;
  border-bottom: 0.3rem solid;
  position: absolute;
  top: -0.3rem;
  left: 50%;
}
.badge.product:hover > span {
  --pico-tooltip-slide-to: translate(-50%, -0.25rem);
  transform: translate(-50%,0.75rem);
  animation-duration: .2s;
  animation-fill-mode: forwards;
  animation-name: tooltip-slide;
  opacity: 0;
}

.badge.deprecated {
  background: var(--color-background-badge-deprecated);
}
.badge.updated {
  background: var(--color-background-badge-updated);
}
.badge.new {
  background: var(--color-background-badge-new);
}
.badge.version {
  background: var(--color-background-badge-version);
}

/*******************************************************************************************************************************
 * Copy-paste header
 ******************************************************************************************************************************/

.heading-link {
  text-decoration: none;
  color: var(--pico-color);
}
h1 .heading-link {
  color: var(--pico-h1-color);
}
h2 .heading-link {
  color: var(--pico-h2-color);
}
h3 .heading-link {
  color: var(--pico-h3-color);
}
h4 .heading-link {
  color: var(--pico-h4-color);
}
h5 .heading-link {
  color: var(--pico-h5-color);
}
h6 .heading-link {
  color: var(--pico-h6-color);
}

.heading-link svg {
  margin-left: 10px;
  color: transparent;
  transition: color var(--pico-transition);
}

.heading-link:hover svg {
  color: var(--pico-secondary-hover);
}


/*******************************************************************************************************************************
 * Design documentation
 ******************************************************************************************************************************/

.table-features td {
  background-color: unset;
  color: unset;
}
.table-features > table > tbody > tr:has(b) {
  background-color: var(--pico-dropdown-hover-background-color);
}

.table-features > table > tbody > tr:last-child {
  font-size: 0.7rem;
}


/*******************************************************************************************************************************
 * Two column style (ex. changelog page)
 ******************************************************************************************************************************/

.hide-if-one-column {
  display: none;
}
body>main.layout2 {
  display: grid;

  /* mobile by default */
  grid-template-rows:auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "header" 
                       "table-of-content"
                       "body-content";

  row-gap: 2rem;
  /* column-gap: 3rem; ???? */
}
body>main.layout2>* {
  min-width: 0;
  margin-bottom: 0;
}

body>main>hgroup {
  grid-area: header;
}
body>main.layout2>aside#table-of-contents {
  grid-area: table-of-content;
  padding-bottom: 1rem;
}
/* hide scroll bar but allow scroll */ 
body>main.layout2>aside#table-of-contents {
  scrollbar-width: none;  /* Firefox */
}
body>main.layout2>aside#table-of-contents::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}
body>main.layout2>[role=document]  {
  grid-area: body-content;
}


@media(min-width: 1024px) {
  body>main.layout2>hgroup {
    /* remove layout3 specific padding  */
    padding-top: 0;
  }
  .hide-if-one-column {
    display: block;
  }
  body>main.layout2 {
    column-gap: 3rem;
    row-gap: 3rem;
    grid-template-columns: 1fr 16rem;
    grid-template-areas: "header       header" 
                         "body-content table-of-content";
  }
}
@media(min-width: 1280px) {
  body>main.layout2 {
    row-gap: 4rem;
  }
  body>main.layout2>aside#table-of-contents {
    position: sticky;
    top: var(--pico-nav-bar-offset);
    overflow-y: auto;
    align-self: start; /* use columns has its own height, instead of using the height of the highest column */
    height: calc(100vh - var(--pico-nav-bar-offset));
  }
}
@media(min-width: 1536px) {
  body>main.layout2 {
    row-gap: 5rem;
  }
}



/**** break ****/

/************************************************************************************************************************************
 * API Specific 
 ******************************************************************************************************************************/

.method {
  font-family: var(--pico-font-family-monospace);
  border-radius: 3px;
  padding: 11px 8px;
  margin-bottom: 10px;
  color: #000;
}
.method:before {
  border-radius: 3px;
  padding: 6px;
  color: var(--color-badge-white);
}
.method.post:before {
  content: 'POST';
  background-color: var(--color-method-post-dark);
}
.method.post {
  background-color: var(--color-method-post-light);
}
.method.get:before {
  content: 'GET';
  background-color: var(--color-method-get-head-dark);
}
.method.get {
  background-color: var(--color-method-get-head-light);
}
.method.head:before {
  content: 'HEAD';
  background-color: var(--color-method-get-head-dark);
}
.method.head {
  background-color: var(--color-method-get-head-light);
}
.method.put:before {
  content: 'PUT';
  background-color: var(--color-method-put-patch-dark);
}
.method.put {
  background-color: var(--color-method-put-patch-light);
}
.method.patch:before {
  content: 'PATCH';
  background-color: var(--color-method-put-patch-dark);
}
.method.patch {
  background-color: var(--color-method-put-patch-light);
}
.method.del:before {
  content: 'DELETE';
  background-color: var(--color-method-delete-dark);
}
.method.del {
  background-color: var(--color-method-delete-light);
}

/****************************************************************************************************************************/
/* Specific CSS for documentation
/****************************************************************************************************************************/

body>main.doc .info {
  color: #112264;
  /*background: var(--medium-background);*/
  background: #e6f2ff;
  margin-bottom: var(--pico-typography-spacing-vertical);
  padding: 1em;
  border-radius: 2pt;
  font-weight: 400;
  display: inline-block;
  /*border-left: 2pt solid var(--dark-background);*/
  border-left: 2pt solid #112264;
}
body>main.doc .info p, body>main.doc .info li {
  color: #112264;
}
body>main.doc .warn {
  color: #6d4f00;
  background: #fff2be;
  margin-bottom: var(--pico-typography-spacing-vertical);
  padding: 1em;
  border-radius: 2pt;
  font-weight: 400;
  display: inline-block;
  border-left: 2pt solid #897801;
}
body>main.doc.warn p, body>main.doc.warn li {
  color: #6d4f00;
}
body>main.doc .warn code {
  background: #ffe786;
  color: #4d4900;
}
body>main.doc .info code {
  background: #c3e0ff;
  color: #001a4d;
}

.hljs-comment {
  font-size: 0.65rem;
}
.hljs-comment a {
  color: inherit;
}
.hljs-required {
  color:#c30000;
}
.hljs-space {
  margin-top: 25px;
  display: inline-block;
}

/* SVG has no shadow for schema, ... */
body>main.doc img[src$=".jpg"], body>main.doc img[src$=".png"], body>main.doc img[src$=".webp"]  {
  box-shadow: var(--pico-card-box-shadow);
}

.compact-table {
  font-size: .775em;
}
.compact-table code {
  margin-bottom: 4px;
  padding: 0.275rem;
}
    
/************************************************************************************************************************************
 * Three column style
 ******************************************************************************************************************************/

/*.scroll-shadows {
  background:
    linear-gradient(
      white 30%,
      rgba(255, 255, 255, 0)
    ) center top,
    
    linear-gradient(
      rgba(255, 255, 255, 0), 
      white 70%
    ) center bottom,
    
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center top,
    
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center bottom;
  
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}*/

body>main.doc h2, .doc-h2 h2 {
  border-bottom: 1px solid var(--pico-muted-border-color);
}


/* define grid aera */
body>main.doc>hgroup {
  grid-area: header;
}
body>main.doc>aside#table-of-contents {
  grid-area: table-of-content;
}
body>main.doc>[role=document] {
  grid-area: body;
  padding-bottom: 1rem;
}
body>main.doc>aside#left-menu {
  grid-area: menu;
  padding-bottom: 1rem;
}
body>main.doc>* {
  min-width: 0;
  margin-bottom: 0;
}

/* default behavior on on mobile */
body>main.doc {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  row-gap: 2rem;
  grid-template-areas: "menu"
                       "header" 
                       "table-of-content" 
                       "body";
}

/* on other screens */
@media(min-width: 1024px) {
  body>main.doc>hgroup {
    /* replace default margin of main.doc */
    padding-top: var(--pico-block-spacing-vertical);
  }
  body>main.doc {
    /* Remove the default padding var(--pico-block-spacing-vertical)  to fix left-menu. 
     * This margin is placed inside each element.
     * See message "replace default margin of main.doc"  */
    padding-top: 0;  
    column-gap: 3rem;
    row-gap: 3rem;
    grid-template-rows: auto 1fr;
    grid-template-columns: 10rem 1fr;
    grid-template-areas: "menu header" 
                         "menu body";
  }
  body>main.doc:has(aside#table-of-contents) {
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 10rem 1fr;
    grid-template-areas: "menu header"
                         "menu table-of-content"
                         "menu body";
  }
  body>main.doc>nav[aria-label=breadcrumb] {
    display: none;
  }
  /* make the left menu sticky on big screen and allow scroll */
  body>main.doc>aside#left-menu {
    padding-top: var(--pico-block-spacing-vertical);  /* replace default margin of main.doc */
    position: sticky;
    /* top: 1rem version with moving top ; */
    top: var(--pico-nav-bar-height);
    overflow-y: auto;
    align-self: start; /* use columns has its own height, instead of using the height of the highest column */
    height: calc(100vh - var(--pico-nav-bar-height));
  }
  /* Firefox scrollbar */
  body>main>aside#left-menu {
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-doc-color) transparent;
  }
  /* Safari and Chrome scrollbar */
  body>main>aside#left-menu::-webkit-scrollbar { 
    width: 16px;
  }
  body>main>aside#left-menu::-webkit-scrollbar-track { 
    background: transparent;
  }
  body>main>aside#left-menu::-webkit-scrollbar-thumb { 
    background-color: var(--scrollbar-doc-color);
    border-radius: 16px;
  }
}

@media(min-width: 1280px) {
  body>main.doc {
    row-gap: 4rem;
    grid-template-rows:auto 1fr;
    grid-template-columns: 10rem 1fr;
    grid-template-areas: "menu header"
                         "menu body";
  }
  body>main.doc:has(aside#table-of-contents) {
    grid-template-rows: auto 1fr;
    grid-template-columns: 10rem 1fr 10rem;
    grid-template-areas: "menu header table-of-content"
                         "menu body table-of-content";
  }
  /* make the table of content sticky on big screen and allow scroll */
  body>main.doc>aside#table-of-contents{
    padding-top: var(--pico-block-spacing-vertical); /* replace default margin of main.doc */
    --margin-below-navbar : 1rem;
    position: sticky;
    /*top: var(--pico-nav-bar-height);*/
    top: var(--margin-below-navbar);
    overflow-y: auto;
    align-self: start; /* use columns has its own height, instead of using the height of the highest column */
    height: calc(100vh - var(--margin-below-navbar));
  }
  /* hide scroll bar but allow scroll */ 
  body>main>aside#table-of-contents {
    scrollbar-width: none;  /* Firefox */
  }
  body>main>aside#table-of-contents::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
  }

}
@media(min-width: 1536px) {
  body>main.doc {
    row-gap: 5rem;
    grid-template-rows:auto 1fr;
    grid-template-columns: 10rem 1fr 10rem;
    grid-template-areas: "menu header table-of-content" 
                         "menu body table-of-content";
  }
}


/* header style, for all website */
main>hgroup h1 {
  margin-bottom: calc(var(--pico-spacing) * .5);
  font-size: 3rem;
  line-height: 1;
}
main>hgroup p.chapter {
  margin-bottom: calc(var(--pico-spacing) * .25);
}
.chapter {
  width: -moz-fit-content;
  width: fit-content;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--pico-chapter-color);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .0625em;
  text-transform: uppercase;
}



/*************************************************************************************************************/
/* Breadcrum */ 

main>[aria-label=breadcrumb] {
    z-index: 3;
    position: sticky;
    top: -1px;
    margin: 0 calc(var(--pico-spacing) * -1);
    padding: 0 var(--pico-spacing);
    border-bottom: var(--pico-border-width) solid transparent;
    background-color: var(--pico-background-color);
    transition: border var(--pico-transition),box-shadow var(--pico-transition);
}

@media(min-width: 576px) and (max-width:1023px) {
    main>[aria-label=breadcrumb] {
        margin:0 calc((100vw - 510px)/-2);
        padding: 0 calc((100vw - 510px)/2);
    }
}

@media(min-width: 768px) and (max-width:1023px) {
    main>[aria-label=breadcrumb] {
        margin:0 calc((100vw - 700px)/-2);
        padding: 0 calc((100vw - 700px)/2);
    }
}

main>[aria-label=breadcrumb].is-sticky {
    border-bottom-color: var(--pico-header-border-color);
    box-shadow: var(--pico-card-box-shadow);
}

main>[aria-label=breadcrumb] ul {
    max-width: 100%;
}

main>[aria-label=breadcrumb] ul li {
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main>[aria-label=breadcrumb] ul li:not(:last-child):after {
    content: ">";
}

main>[aria-label=breadcrumb] ul li:first-child a {
    color: var(--pico-secondary);
    cursor: pointer;
}

main>[aria-label=breadcrumb] ul li:first-child a:hover {
    color: var(--pico-secondary-hover);
}

main>[aria-label=breadcrumb] ul li:last-child {
    flex-shrink: 1;
}

@media(min-width: 576px) {
    main>[aria-label=breadcrumb] ul li:first-child:after {
        display:inline-block;
    }
}

main>[aria-label=breadcrumb] svg {
    width: auto;
    height: 1.125rem;
    margin-right: var(--pico-nav-link-spacing-horizontal);
    transform: translateY(-.0625rem);
}

main>[aria-label=breadcrumb] a[aria-current] {
    pointer-events: auto;
}

/*************************************************************************************************************/
/* aside menu (left or right ) */ 

main>aside {
  --pico-font-size: 15px;
  font-size: var(--pico-font-size);
}
main>aside nav details:last-of-type {
  margin-bottom: 0;
}
main>aside nav details summary {
  font-weight: 600;
  line-height: var(--pico-line-height);
}
main>aside nav details summary:focus-visible:not([role]) {
  outline-offset: 0;
}

main>aside nav details summary:after {
  height: calc(1em * var(--pico-line-height));
}

@media(min-width: 1024px) {
  main>aside nav details summary:not(:focus-visible):after {
      display:none;
  }
}

main>aside nav details[open]>summary {
  margin-bottom: calc(var(--pico-spacing) * .5);
}

main>aside nav details[open]>summary:not([role]):not(:focus) {
  color: inherit;
}

main>aside nav details ul {
  border-left: var(--pico-border-width) solid var(--pico-muted-border-color);
}

main>aside nav details ul:first-of-type {
  margin: 0;
  padding: 0;
}

main>aside nav details ul li {
  margin: 0;
  padding: calc(var(--pico-nav-element-spacing-vertical) * .15) 0;
}

main>aside nav details ul li a {
  margin: 0;
  margin-left: calc(var(--pico-border-width) * -1);
  padding: 0;
  padding-left: calc(var(--pico-nav-element-spacing-horizontal) * 1.5);
  border-left: var(--pico-border-width) solid transparent;
  border-radius: 0;
  font-weight: 400;
  transition: background-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition),border-color var(--pico-transition),font-weight var(--pico-transition),-webkit-text-decoration var(--pico-transition);
  transition: background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition),border-color var(--pico-transition),font-weight var(--pico-transition);
  transition: background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition),border-color var(--pico-transition),font-weight var(--pico-transition),-webkit-text-decoration var(--pico-transition);
}

main>aside nav details ul li a:hover {
  border-color: var(--pico-secondary-underline);
}

main>aside nav details ul li a[aria-current] {
  border-color: var(--pico-primary);
  color: var(--pico-primary-hover);
  font-weight: 600;
}

main>aside nav details ul li a[aria-current]:hover {
  text-decoration: none;
}

main>aside nav details ul li a mark {
  border-radius: .125rem;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  vertical-align: text-bottom;
}

/*************************************************************************************************************/
/* specific style of left menu */

main>aside#left-menu {
  position: relative;
}

main>aside#left-menu header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: var(--pico-header-height);
  margin-bottom: var(--pico-spacing);
}

main>aside#left-menu header h2 {
  --pico-font-size: 1.25rem;
  margin-bottom: 0;
}

main>aside#left-menu header a {
  opacity: .5;
  transition: background-color var(--pico-transition),color var(--pico-transition),opacity var(--pico-transition);
}

main>aside#left-menu header a svg {
  display: block;
  width: auto;
  height: 1.125rem;
}

main>aside#left-menu header a:hover {
  opacity: 1;
}

@media(min-width: 1024px) {
  main>aside#left-menu header {
    display:none;
  }
}

@media(max-width: 1023px) {
  main>aside#left-menu {
    display:grid;
    z-index: 4;
    position: fixed;
    inset: 0;
    grid-template-rows: auto 1fr;
    transform: translate(calc(-100% - var(--pico-spacing)));
    transition: transform var(--pico-transition);
  }

  main>aside#left-menu header,main>aside#left-menu nav {
    padding: 0 var(--pico-spacing);
  }

  main>aside#left-menu nav {
    margin-bottom: var(--pico-spacing);
    margin-block:calc(var(--pico-outline-width) * -1);
    padding-block: var(--pico-outline-width);
    overflow: auto;
  }

  main>aside#left-menu:before {
    z-index: -1;
    position: fixed;
    inset: 0;
    background-color: var(--pico-background-color);
    content: "";
  }
  main>aside#left-menu.is-open-on-mobile {
    transform: translate(0);
  }
}

@media(max-width: 1023px) and (min-width:576px) and (max-width:1023px) {
  main>aside#left-menu.is-open-on-mobile {
    max-width:calc(510px + var(--pico-spacing) * 2);
    margin-right: auto;
    margin-left: auto;
  }
  main>aside#left-menu.is-open-on-mobile:before {
    inset: 0 calc((100vw - 510px)/-2);
  }
}

@media(max-width: 1023px) and (min-width:768px) and (max-width:1023px) {
  main>aside#left-menu.is-open-on-mobile {
    max-width:calc(700px + var(--pico-spacing) * 2);
  }
  main>aside#left-menu.is-open-on-mobile:before {
    inset: 0 calc((100vw - 700px)/-2);
  }
}

@media(min-width: 1024px) {
  main>aside#left-menu {
    transition:none;
  }
}

main>aside#left-menu nav details ul li a:active, main>aside#left-menu nav details ul li a:focus {
  color: var(--pico-primary-hover);
}

@media(max-width: 1023px) {
  html:has(aside#left-menu.is-open-on-mobile) {
    overflow:hidden;
  }
}


/*************************************************************************************************************/
/* specific style of right menu  (table of content */


main>aside#table-of-contents details {
  border-bottom: none;
}

main>aside#table-of-contents details summary {
  pointer-events: none;
}

main>aside#table-of-contents details summary:after {
  display: none;
}

@media(max-width: 1279px) {
  main>aside#table-of-contents details ul li a:not(:hover) {
    text-decoration:underline;
    text-decoration-color: var(--pico-secondary-underline);
  }

  main>aside#table-of-contents details ul li a[aria-current] {
    border-color: transparent;
    color: var(--pico-secondary);
    font-weight: 400;
    text-decoration-color: var(--pico-secondary-underline);
  }

  main>aside#table-of-contents details ul li a[aria-current]:hover {
    border-color: var(--pico-secondary-underline);
    color: var(--pico-secondary-hover);
    text-decoration: underline;
  }
}

main>[role=document] article form>:last-child:not(footer,.grid),main>[role=document] article>:last-child:not(footer,.grid) {
  margin-bottom: 0;
}



/******************************************************************************************/
/* Min integration page  */
/******************************************************************************************/


.tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  column-gap: calc(var(--pico-block-spacing-vertical)/2);
}
.tiles article{
  cursor: pointer;
  width: 300px;
  transition: all 200ms;
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
  margin-bottom: calc(var(--pico-block-spacing-vertical)/2);
}
/* activate hover except on mobile to avoid bad user experience (slow click) */ 
@media (hover: hover) {
  .tiles article:hover{
    transform: scale(1.06)
  }
}

.tiles article span {
  color: var(--pico-secondary);
}

/******************************************************************************************/
/* secondary landing page style (ex. integration) */
/******************************************************************************************/

.landing-style1-section {
  line-height: var(--line-height-landing);
  display: flex;
  align-items: stretch;
  /*column-gap: 3em;*/
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.landing-style1-section > div:not(.grid-equal)  {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;
}
.landing-style1-section > div:has(img):not(.grid-equal), .landing-style1-section > div:has(video):not(.grid-equal)  {
  display: flex;
  justify-content: center;
  padding-left: calc(var(--pico-spacing) * 2);
  padding-right: calc(var(--pico-spacing) * 2);
}
.landing-style1-section > div p:last-child  {
  margin-bottom:0
}

.landing-style1-section .img-container img  {
  /*object-fit: contain;*/
  /*width: 100%;*/
  /*object-position: left top;*/
  border-radius: var(--pico-img-border-radius);
  /*box-shadow: rgb(43 9 66 / 15%) 0px 0.5rem 1rem 0px;*/
  
  /*height: 0;
  min-height: 100%;
  max-width: 100%;*/
  /*filter: drop-shadow(0 0 0.75rem var(--pico-primary));*/
}

.landing-style1-section .img-container img[src$=".jpg"] {
  box-shadow: rgb(43 9 66 / 15%) 0px 0.5rem 1rem 0px;
}


.landing-style1-section ul {
  position: relative;
}
.landing-style1-section li {
  list-style: none;
  /*font-weight: bold;  */
  margin-bottom: calc(var(--pico-spacing)*0.8);
}
.landing-style1-section li:before {
  content: url('/img/list-style-img2.svg');
  position: absolute;
  left:0;
  height: 24px;
  width: 24px;
}
.landing-style1-section a[type=button] {
  margin-bottom: 0;
}
.landing-style1-section h3 {
  font-size: 1.2rem;
}
.landing-style1-section .grid-equal div {
  background: var(--light-background);
  padding: calc(var(--pico-spacing) * 2);
  border-radius: var(--pico-img-border-radius);
  /*padding-left: var(--pico-spacing);
  border-left-width: 1px;
  border-left-style: solid;
  border-image: linear-gradient(to bottom, var(--pico-primary), rgba(0, 0, 0, 0)) 1 100%;*/
  /*border-left: 1px solid linear-gradient(to bottom, red, rgba(0, 0, 0, 0)) 1 100%;*/
  /*border-left: var(--pico-border-width) solid var(--pico-primary);*/
  /*border-left: var(--pico-border-width) solid var(--pico-muted-border-color);*/
  /*border-image: linear-gradient(to bottom, red, rgba(0, 0, 0, 0)) 1 100%;*/
  /*border-image: linear-gradient(to bottom, #ffc0ff , rgba(0, 0, 0, 0)) 1 100%;
  background: linear-gradient(to right, rgba(255, 0, 255, 0), rgba(0, 0, 0, 0) 10%)  ;*/
}
.landing-style1-section .grid-equal {
  margin-top: calc(var(--pico-spacing)*3);
  display: grid;
  gap: calc(var(--pico-spacing) * 2);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

@media (max-width: 767px) {
  .landing-style1-section > div:not(.grid-equal)  {
    flex-basis: 100%;
  }
  .landing-style1-section > div:has(img):not(.grid-equal), .landing-style1-section > div:has(video):not(.grid-equal)  {
    min-height: 300px;
    padding: calc(var(--pico-spacing) * 2) 0 0 0;
    justify-content: center;
  }
  .landing-style1-section p:has(a[type=button]) {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .landing-style1-section .grid-equal {
    grid-auto-flow: row;
  }
}


.landing-style1-section.reverse-row {
  flex-direction: row-reverse;
}

.landing-style1-section.reverse-row > div:has(img):not(.grid-equal), .landing-style1-section.reverse-row > div:has(video):not(.grid-equal)  {
  padding-left: 0;
  justify-content: start;
}

.light-background .landing-style1-section .grid-equal div {
  background: white;
}


#pricing .plans {
  width: 100%;
  grid-column-gap: calc(var(--pico-grid-column-gap)*2);
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  place-content: center;
}
#pricing article {
  /*max-width: 260px;*/
  margin-bottom: var(--pico-spacing);
  background-image: url(/img/pricing-background.svg);
  background-repeat: no-repeat;
  background-position: 0 -20px;
  background-size: 500%;
  padding: var(--pico-spacing);

  border-radius: calc(var(--pico-border-radius)*2);
  display: flex; /* to push the link to the bottom */
  flex-direction: column;
}

#pricing .plan-body .grid {
  grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
#pricing .plan-header {
  padding-top: 0.6em;
}
#pricing .plan-header.private-cloud {
  padding-top: 0; /* remove padding top when text is too long for AWS */
}

@media(min-width: 1024px) {
  #pricing article {
    background-position: 0 0;
  }
}

/* gradient */
#pricing article:nth-child(1) {
  background-position-x: 0;
}
#pricing article:nth-child(2) {
  background-position-x: 25%;
}
#pricing article:nth-child(3) {
  background-position-x: 50%;
}
#pricing article:nth-child(4) {
  background-position-x: 75%;
}
#pricing article:nth-child(5) {
  background-position-x: 100%;
}
#pricing article h2 {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  color:white;
  margin-bottom: 70px;
}

#pricing .plan-header p {
  text-align: right;
  font-size: 1.8em;
}
#pricing .gradient{
  background: var(--pricing-gradient);
  background-clip: text;
  background-repeat: no-repeat;
  background-position: 0 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 500%;
}
#pricing .plan-header p strong {
  font-weight: bold;
}
#pricing article:nth-child(1) .plan-header .gradient,
#pricing article:nth-child(1) .plan-footer a,
#pricing article:nth-child(1) ul li:before {
  background-position-x: 0;
}
#pricing article:nth-child(2) .plan-header .gradient,
#pricing article:nth-child(2) .plan-footer a,
#pricing article:nth-child(2) ul li:before  {
  background-position-x: 25%;
}
#pricing article:nth-child(3) .plan-header .gradient,
#pricing article:nth-child(3) .plan-footer a,
#pricing article:nth-child(3) ul li:before  {
  background-position-x: 50%;
}
#pricing article:nth-child(4) .plan-header .gradient,
#pricing article:nth-child(4) .plan-footer a,
#pricing article:nth-child(4) ul li:before  {
  background-position-x: 75%;
}
#pricing article:nth-child(5) .plan-header .gradient,
#pricing article:nth-child(5) .plan-footer a,
#pricing article:nth-child(5) ul li:before  {
  background-position-x: 100%;
}
#pricing .plan-header p small {
  font-size: 0.4em;
  display: block;
  font-weight: normal;
}
#pricing .plan-footer {
  padding-bottom: var(--pico-typography-spacing-vertical);
  margin-top: calc(var(--pico-typography-spacing-vertical)*2);
  flex-grow: 1;
  display:flex;
}
#pricing .plan-footer a {
  margin: auto auto 0;
  background: var(--pricing-gradient);
  background-size: 500%;
  border: none;
  font-size: 1em;
}

/* most valuable plan */ 
#pricing article:nth-child(4) {
  transform: scale(1.07);
}

#pricing .plans ul,
#pricing .plans ul li,
#pricing .plans ul ul li {
  margin:0;
  padding: 0 0 0 24px; 
  text-indent: 0;
  list-style-type: none;
}
#pricing .plans ul li {
  padding: calc(var(--pico-typography-spacing-vertical)/4) 0;
}
#pricing .plans ul li {
  line-height: 1.2em;
}

#pricing ul .value {
  font-weight: bold;
  color: var(--pico-contrast);
}
#pricing ul small {
  color: var(--pico-muted-color);
  font-size: 0.8em;
}

#pricing .plans ul {
  position: relative;
}
#pricing .plans ul li:before {
  --size: 17px;
  --cicon: var(--icon-check-pricing);
  content: " ";
  position: absolute;
  left:0;
  height: 17px;
  width: 17px;

  mask-position: center;
  mask-size: var(--size);
  mask-repeat: no-repeat;
  mask-image: var(--cicon); 
  -webkit-mask-position: center;
  -webkit-mask-size: var(--size);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: var(--cicon);
  background: var(--pricing-gradient);
  background-size: 500%;
}
#pricing .plans ul li {
  grid-column-gap: 0rem;
}

.pricing-dynamic-frequency .year {
  display: none;
}
.pricing-dynamic-frequency.year .month {
  display: none;
}
.pricing-dynamic-frequency.year .year {
  display: inherit;
}
.pricing-dynamic-frequency.year .grid.year {
  display: grid;
}
.pricing-dynamic-frequency.year tr.year {
  display: table-row;
}



/** Pricing tabs **********************************************/

.radio-tabs .tabs .twa{
  height: 1.5em;
  width: 1.5em;
  --size: 1.4em;
  vertical-align: -0.4em;
}

.radio-tabs input[type=radio]  {
  position: absolute;
  left: -10000px;
}
.radio-tabs label[role="button"] {
  color: var(--pico-secondary);
  background: none;
  border-radius: 2em;
  border: none;
}


.radio-tabs .tabs {
  left: 50%;
  transform: translateX(-50%);
  
  background-color: #eaecf5;
  box-shadow: inset 0 1px 7px var(--pico-switch-background-color), inset 0 -1px #fff;
  border-radius: 2em;
  padding: 5px;
}


@media(max-width: 767px) {
  .radio-tabs .tab {
    padding-left: var(--pico-spacing);
    padding-right: var(--pico-spacing);
    font-size: 0.9em;
  }
}

.radio-tabs .tab:hover {
  color: var(--pico-secondary-hover);
}
#cloud:checked ~ .tabs #cloud-tab,
#on-premise:checked ~ .tabs #on-premise-tab,
#private-cloud:checked ~ .tabs #private-cloud-tab {
  box-shadow: 0 0 0 1px #2c405e0f, 0 1px 1px #2c405e0a, 0 2px 4px #2c405e14;
  background-color: #fff;
  color: var(--pico-secondary-hover);
}


.radio-tabs .panels ul {
  padding-inline-start: 0;
}
.radio-tabs .panel {
  display: none;
}
#cloud:checked ~ .panels #cloud-panel,
#on-premise:checked ~ .panels #on-premise-panel,
#private-cloud:checked ~ .panels #private-cloud-panel {
  display: block;
}

#pricing [role=group] {
  width: inherit; /* remove pico 100% width */
}



/** Pricing comparison table **************************/

.pricing-dynamic.cloud .on-premise,
.pricing-dynamic.cloud .on-premise,
.pricing-dynamic.cloud .open-source,
.pricing-dynamic.cloud .open-source,
.pricing-dynamic.cloud .private-cloud,
.pricing-dynamic.cloud .private-cloud {
  display: none;
}

.pricing-dynamic.on-premise .cloud,
.pricing-dynamic.on-premise .cloud,
.pricing-dynamic.on-premise .open-source,
.pricing-dynamic.on-premise .open-source
/*table.on-premise td.private-cloud,
table.on-premise th.private-cloud*/ {
  display: none;
}

.pricing-dynamic.private-cloud .cloud,
.pricing-dynamic.private-cloud .cloud,
.pricing-dynamic.private-cloud .open-source,
.pricing-dynamic.private-cloud .open-source
/*table.on-premise td.private-cloud,
table.on-premise th.private-cloud*/ {
  display: none;
}



#pricing .pricing-table table {
  border-collapse: separate; /* keep bottom border on sticky header */
}
#pricing .pricing-table .plan-header {
  text-align: right;
  font-size: 1em;
}
#pricing .pricing-table .plan-header b {
  font-size: 1.2em;
}
#pricing .pricing-table .plan-header p {
  margin-bottom: calc(var(--pico-typography-spacing-vertical)/2);
}
#pricing .pricing-table .plan-header small {
  margin-top: -5px;
}
#pricing .pricing-table th .plan-header a {
  margin: auto auto 0;
  background: var(--pricing-gradient);
  background-size: 500%;
  border: none;
  margin-bottom: calc(var(--pico-typography-spacing-vertical)/2);
  white-space: nowrap;
}
#pricing  .pricing-table table thead th {
  text-align: right;
  vertical-align: top;
  /* remove overflow on  pricing-table to make it work */
  background-color: white;
  position: sticky;
  top: 3.7rem;
  z-index: 1; /* hides arrow of summary/detail */
}


@media (max-width: 767px) {
  #pricing .pricing-table .overflow-x {
    overflow-x: auto;
    position: relative;
  }
  #pricing  .pricing-table table thead th {
    position: unset;
  }
}

#pricing  .pricing-table table tbody td {
  text-align: right;
  vertical-align: top;
}
#pricing  .pricing-table table tbody td:nth-child(n+2), #pricing  .pricing-table table thead th:nth-child(n+2) {
  border-left: dashed 1px #d7d7d7;
}

#pricing  .pricing-table table tbody td:nth-child(1) {
  text-align: left;
  vertical-align: unset;
}
#pricing  .pricing-table table summary {
  /* font-weight: bold; */
}

#pricing  .pricing-table table details p {
  max-width: 400px;
  font-size: 0.8em;
  color: var(--pico-muted-color);
}

#pricing  .pricing-table table tbody tr:has(b) td {
  background-color: var(--pico-dropdown-hover-background-color);
  font-size: 1.1em;
}
#pricing  .pricing-table details[open]>summary:not([role]):not(:focus) {
   color: inherit;
}
#pricing  .pricing-table details[open]>summary {
  margin-bottom: calc(var(--pico-spacing) * 0.3);
}

#pricing  .pricing-table details summary::after {
  display: none;
}

#pricing  .pricing-table details summary::before {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  transform: rotate(-90deg);
  background-image: var(--pico-icon-chevron);
  background-position: right center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
  content: "";
  transition: transform var(--pico-transition);
  vertical-align: middle;
  margin-right: 5px;
  margin-left: -5px;
}
#pricing  .pricing-table details[open]>summary::before {
  transform: rotate(0);
}

#pricing .cross-icon {
  color: #ccc;
}
#pricing .check-icon {
  --size: 17px;
  --cicon: var(--icon-check-pricing);
  height: var(--size);
  width: var(--size);

  mask-position: center;
  mask-size: var(--size);
  mask-repeat: no-repeat;
  mask-image: var(--cicon); 
  -webkit-mask-position: center;
  -webkit-mask-size: var(--size);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: var(--cicon);
  background: var(--pricing-gradient);
  background-size: 500%;
}

/* Color gradient on icons and pricings  */
#pricing .pricing-table th:nth-child(2) .plan-header p strong,
#pricing .pricing-table th:nth-child(2) .plan-header a,
#pricing .pricing-table td:nth-child(2) .check-icon,
/* Restart gradient  for on-prem/private-cloud */
#pricing .pricing-table th:nth-child(8) .plan-header p strong,
#pricing .pricing-table th:nth-child(8) .plan-header a,
#pricing .pricing-table td:nth-child(8) .check-icon {
  background-position-x: 0;
}
#pricing .pricing-table th:nth-child(3) .plan-header p strong,
#pricing .pricing-table th:nth-child(3) .plan-header a,
#pricing .pricing-table td:nth-child(3) .check-icon,
#pricing .pricing-table th:nth-child(9) .plan-header p strong,
#pricing .pricing-table th:nth-child(9) .plan-header a,
#pricing .pricing-table td:nth-child(9) .check-icon  {
  background-position-x: 20%;
}
#pricing .pricing-table th:nth-child(4) .plan-header p strong,
#pricing .pricing-table th:nth-child(4) .plan-header a,
#pricing .pricing-table td:nth-child(4) .check-icon,
#pricing .pricing-table th:nth-child(10) .plan-header p strong,
#pricing .pricing-table th:nth-child(10) .plan-header a,
#pricing .pricing-table td:nth-child(10) .check-icon {
  background-position-x: 40%;
}
#pricing .pricing-table th:nth-child(5) .plan-header p strong,
#pricing .pricing-table th:nth-child(5) .plan-header a,
#pricing .pricing-table td:nth-child(5) .check-icon,
#pricing .pricing-table th:nth-child(11) .plan-header p strong,
#pricing .pricing-table th:nth-child(11) .plan-header a,
#pricing .pricing-table td:nth-child(11) .check-icon {
  background-position-x: 60%;
}
#pricing .pricing-table th:nth-child(6) .plan-header p strong,
#pricing .pricing-table th:nth-child(6) .plan-header a,
#pricing .pricing-table td:nth-child(6) .check-icon,
#pricing .pricing-table th:nth-child(12) .plan-header p strong,
#pricing .pricing-table th:nth-child(12) .plan-header a,
#pricing .pricing-table td:nth-child(12) .check-icon {
  background-position-x: 80%;
}
#pricing .pricing-table th:nth-child(7) .plan-header p strong,
#pricing .pricing-table th:nth-child(7) .plan-header a,
#pricing .pricing-table td:nth-child(7) .check-icon,
#pricing .pricing-table th:nth-child(13) .plan-header p strong,
#pricing .pricing-table th:nth-child(13) .plan-header a,
#pricing .pricing-table td:nth-child(13) .check-icon {
  background-position-x: 100%;
}



/** FAQ **********************************************/

#pricing .pricing-faq details {
  background: linear-gradient(90deg,rgba(179,0,255,0.06) 0%, rgba(0,85,255,0.03) 100%);
  padding: calc(var(--pico-form-element-spacing-vertical)*2) calc(var(--pico-form-element-spacing-horizontal));
  border-radius: calc(var(--pico-border-radius)* 2);
}

#pricing .pricing-faq summary {
  font-weight: bolder;
}

#pricing .pricing-faq details p {
  font-size: 0.9em;
}
table details  {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}


/**
 * Skipped minification because the original files appears to be already minified.
 * Original file: /npm/@docsearch/css@3.5.2/dist/style.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*! @docsearch/css 3.5.2 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
:root {
  --docsearch-primary-color: var(--pico-primary);
  --docsearch-text-color: #1c1e21;
  --docsearch-spacing: 12px;
  --docsearch-icon-stroke-width: 1.4;
  --docsearch-highlight-color: var(--docsearch-primary-color);
  --docsearch-muted-color: #969faf;
  --docsearch-container-background: rgba(101, 108, 133, 0.8);
  --docsearch-logo-color: var(--pico-primary);
  --docsearch-modal-width: 560px;
  --docsearch-modal-height: 600px;
  --docsearch-modal-background: #f5f6f7;
  --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64;
  --docsearch-searchbox-height: 56px;
  --docsearch-searchbox-background: transparent;
  --docsearch-searchbox-focus-background: #fff;
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
  --docsearch-hit-height: 56px;
  --docsearch-hit-color: #444950;
  --docsearch-hit-active-color: #fff;
  --docsearch-hit-background: #fff;
  --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
  --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
  --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
  --docsearch-footer-height: 44px;
  --docsearch-footer-background: #fff;
  --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12)
}

html[data-theme=dark] {
  --docsearch-text-color: #f5f6f7;
  --docsearch-container-background: rgba(9, 10, 17, 0.8);
  --docsearch-modal-background: #15172a;
  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
  --docsearch-searchbox-background: #090a11;
  --docsearch-searchbox-focus-background: #000;
  --docsearch-hit-color: #bec3c9;
  --docsearch-hit-shadow: none;
  --docsearch-hit-background: #090a11;
  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, 0.3);
  --docsearch-footer-background: #1e2136;
  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
  --docsearch-logo-color: #fff;
  --docsearch-muted-color: #7f8497
}

.DocSearch-VisuallyHiddenForAccessibility {
  display: none;
}

.DocSearch-Button {
  align-items: center;
  background: var(--docsearch-searchbox-background);
  border: 0;
  border-radius: 40px;
  color: var(--docsearch-muted-color);
  cursor: pointer;
  display: flex;
  font-weight: 500;
  height: 36px;
  justify-content: space-between;
  margin: 0 0 0 16px;
  padding: 0 8px;
  user-select: none;

  /*--pico-background-color: var(--pico-form-element-background-color);
  --pico-border-color: var(--pico-form-element-border-color);
  --pico-color: var(--pico-form-element-color);
  --pico-box-shadow: none;*/
  /*border: var(--pico-border-width) solid var(--pico-border-color);*/
  /*border: 0.0625rem solid #cfd5e2;*/
  /*border-radius: var(--pico-border-radius);*/
  outline: 0;
}


.DocSearch-Button:active,
.DocSearch-Button:focus,
.DocSearch-Button:hover {
  /*background: var(--docsearch-searchbox-focus-background);
  box-shadow: var(--docsearch-searchbox-shadow);*/
  color: var(--docsearch-text-color);
  outline: none
}

button.DocSearch-Button:focus {
  box-shadow: none;
}

.DocSearch-Button-Container {
  align-items: center;
  display: flex
}

.DocSearch-Search-Icon {
  stroke-width: 1.6
}

.DocSearch-Button .DocSearch-Search-Icon {
  /*color: var(--docsearch-text-color)*/
  /*color: var(--docsearch-muted-color);*/
}

.DocSearch-Button-Placeholder {
  font-size: 1rem;
  padding: 0 12px 0 6px;
  display: none;
}

.DocSearch-Button-Keys {
  display: flex;
  min-width: calc(40px + .8em);
  display: none;
}

.DocSearch-Button-Key {
  align-items: center;
  background: var(--docsearch-key-gradient);
  border-radius: 3px;
  box-shadow: var(--docsearch-key-shadow);
  color: var(--docsearch-muted-color);
  display: flex;
  height: 18px;
  justify-content: center;
  margin-right: .4em;
  position: relative;
  padding: 0 0 2px;
  border: 0;
  top: -1px;
  width: 20px
}

@media (max-width:768px) {

  .DocSearch-Button-Keys,
  .DocSearch-Button-Placeholder {
    display: none
  }
}

.DocSearch--active {
  overflow: hidden !important
}

.DocSearch-Container,
.DocSearch-Container * {
  box-sizing: border-box
}

.DocSearch-Container {
  background-color: var(--docsearch-container-background);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 200
}

.DocSearch-Container a {
  text-decoration: none
}

.DocSearch-Link {
  appearance: none;
  background: none;
  border: 0;
  color: var(--docsearch-highlight-color);
  cursor: pointer;
  font: inherit;
  margin: 0;
  padding: 0
}

.DocSearch-Modal {
  background: var(--docsearch-modal-background);
  border-radius: 6px;
  box-shadow: var(--docsearch-modal-shadow);
  flex-direction: column;
  margin: 60px auto auto;
  max-width: var(--docsearch-modal-width);
  position: relative
}

.DocSearch-SearchBar {
  display: flex;
  padding: var(--docsearch-spacing) var(--docsearch-spacing) 0
}

.DocSearch-Form {
  align-items: center;
  background: var(--docsearch-searchbox-focus-background);
  border-radius: 4px;
  box-shadow: var(--docsearch-searchbox-shadow);
  display: flex;
  height: var(--docsearch-searchbox-height);
  margin: 0;
  padding: 0 var(--docsearch-spacing);
  position: relative;
  width: 100%
}

.DocSearch-Input {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--docsearch-text-color);
  flex: 1;
  font: inherit;
  font-size: 1.2em;
  height: 100%;
  outline: none;
  padding: 0 0 0 8px;
  width: 80%
}

input[type=search].DocSearch-Input  {
  background-image: none;
  margin-bottom: 0;
  height: 100%;
  box-shadow:none;
  transition:none;
  padding-inline-start:inherit;
  -webkit-padding-start:inherit;
}
.DocSearch-Container, .DocSearch-Container svg {
  vertical-align: inherit;
  line-height: 1;
}
.DocSearch-Container {
  text-align: inherit;
}
[role=button].DocSearch-Container {
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

section.DocSearch-Hits {
  padding-bottom:inherit;
}
.DocSearch-Hits a {
  transition: none;
}
.DocSearch-Hit-action-button  {
  margin-bottom: inherit;
}
.DocSearch-Commands > li{
  margin-bottom: inherit;
}
.DocSearch-Modal {
  font-size: 0.8em;
}

.DocSearch-Input::placeholder {
  color: var(--docsearch-muted-color);
  opacity: 1
}

.DocSearch-Input::-webkit-search-cancel-button,
.DocSearch-Input::-webkit-search-decoration,
.DocSearch-Input::-webkit-search-results-button,
.DocSearch-Input::-webkit-search-results-decoration {
  display: none
}

.DocSearch-LoadingIndicator,
.DocSearch-MagnifierLabel,
.DocSearch-Reset {
  margin: 0;
  padding: 0
}

.DocSearch-MagnifierLabel,
.DocSearch-Reset {
  align-items: center;
  color: var(--docsearch-highlight-color);
  display: flex;
  justify-content: center
}

.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
.DocSearch-LoadingIndicator {
  display: none
}

.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
  align-items: center;
  color: var(--docsearch-highlight-color);
  display: flex;
  justify-content: center
}

@media screen and (prefers-reduced-motion:reduce) {
  .DocSearch-Reset {
    animation: none;
    appearance: none;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--docsearch-icon-color);
    cursor: pointer;
    right: 0;
    stroke-width: var(--docsearch-icon-stroke-width)
  }
}

.DocSearch-Reset {
  animation: fade-in .1s ease-in forwards;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--docsearch-icon-color);
  cursor: pointer;
  padding: 2px;
  right: 0;
  stroke-width: var(--docsearch-icon-stroke-width)
}

.DocSearch-Reset[hidden] {
  display: none
}

.DocSearch-Reset:hover {
  color: var(--docsearch-highlight-color)
}

.DocSearch-LoadingIndicator svg,
.DocSearch-MagnifierLabel svg {
  height: 24px;
  width: 24px
}

.DocSearch-Cancel {
  display: none
}

.DocSearch-Dropdown {
  max-height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));
  min-height: var(--docsearch-spacing);
  overflow-y: auto;
  overflow-y: overlay;
  padding: 0 var(--docsearch-spacing);
  scrollbar-color: var(--docsearch-muted-color) var(--docsearch-modal-background);
  scrollbar-width: thin
}

.DocSearch-Dropdown::-webkit-scrollbar {
  width: 12px
}

.DocSearch-Dropdown::-webkit-scrollbar-track {
  background: transparent
}

.DocSearch-Dropdown::-webkit-scrollbar-thumb {
  background-color: var(--docsearch-muted-color);
  border: 3px solid var(--docsearch-modal-background);
  border-radius: 20px
}

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

.DocSearch-Label {
  font-size: .75em;
  line-height: 1.6em
}

.DocSearch-Help,
.DocSearch-Label {
  color: var(--docsearch-muted-color)
}

.DocSearch-Help {
  font-size: .9em;
  margin: 0;
  user-select: none
}

.DocSearch-Title {
  font-size: 1.2em;
  color: #666;
}

.DocSearch-Logo a {
  display: flex
}

.DocSearch-Logo svg {
  color: var(--docsearch-logo-color);
  margin-left: 8px
}

.DocSearch-Hits:last-of-type {
  margin-bottom: 24px
}

.DocSearch-Hits mark {
  background: none;
  padding: 0;
  color: var(--docsearch-highlight-color)
}

.DocSearch-HitsFooter {
  color: var(--docsearch-muted-color);
  display: flex;
  font-size: .85em;
  justify-content: center;
  margin-bottom: var(--docsearch-spacing);
  padding: var(--docsearch-spacing)
}

.DocSearch-HitsFooter a {
  border-bottom: 1px solid;
  color: inherit
}

.DocSearch-Hit {
  border-radius: 4px;
  display: flex;
  padding-bottom: 4px;
  position: relative
}

@media screen and (prefers-reduced-motion:reduce) {
  .DocSearch-Hit--deleting {
    transition: none
  }
}

.DocSearch-Hit--deleting {
  opacity: 0;
  transition: all .25s linear
}

@media screen and (prefers-reduced-motion:reduce) {
  .DocSearch-Hit--favoriting {
    transition: none
  }
}

.DocSearch-Hit--favoriting {
  transform: scale(0);
  transform-origin: top center;
  transition: all .25s linear;
  transition-delay: .25s
}

.DocSearch-Hit a {
  background: var(--docsearch-hit-background);
  border-radius: 4px;
  box-shadow: var(--docsearch-hit-shadow);
  display: block;
  padding-left: var(--docsearch-spacing);
  width: 100%
}

.DocSearch-Hit-source {
  background: var(--docsearch-modal-background);
  color: var(--docsearch-highlight-color);
  font-size: .85em;
  font-weight: 600;
  line-height: 32px;
  margin: 0 -4px;
  padding: 8px 4px 0;
  position: sticky;
  top: 0;
  z-index: 10
}

.DocSearch-Hit-Tree {
  color: var(--docsearch-muted-color);
  height: var(--docsearch-hit-height);
  opacity: .5;
  stroke-width: var(--docsearch-icon-stroke-width);
  width: 24px
}

.DocSearch-Hit[aria-selected=true] a {
  background-color: var(--docsearch-highlight-color)
}

.DocSearch-Hit[aria-selected=true] mark {
  text-decoration: underline
}

.DocSearch-Hit-Container {
  align-items: center;
  color: var(--docsearch-hit-color);
  display: flex;
  flex-direction: row;
  height: var(--docsearch-hit-height);
  padding: 0 var(--docsearch-spacing) 0 0
}

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

.DocSearch-Hit-action,
.DocSearch-Hit-icon {
  color: var(--docsearch-muted-color);
  stroke-width: var(--docsearch-icon-stroke-width)
}

.DocSearch-Hit-action {
  align-items: center;
  display: flex;
  height: 22px;
  width: 22px
}

.DocSearch-Hit-action svg {
  display: block;
  height: 18px;
  width: 18px
}

.DocSearch-Hit-action+.DocSearch-Hit-action {
  margin-left: 6px
}

.DocSearch-Hit-action-button {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  padding: 2px
}

svg.DocSearch-Hit-Select-Icon {
  display: none
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon {
  display: block
}

.DocSearch-Hit-action-button:focus,
.DocSearch-Hit-action-button:hover {
  background: rgba(0, 0, 0, .2);
  transition: background-color .1s ease-in
}

@media screen and (prefers-reduced-motion:reduce) {

  .DocSearch-Hit-action-button:focus,
  .DocSearch-Hit-action-button:hover {
    transition: none
  }
}

.DocSearch-Hit-action-button:focus path,
.DocSearch-Hit-action-button:hover path {
  fill: #fff
}

.DocSearch-Hit-content-wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-weight: 500;
  justify-content: center;
  line-height: 1.2em;
  margin: 0 8px;
  overflow-x: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 80%
}

.DocSearch-Hit-title {
  font-size: .9em
}

.DocSearch-Hit-path {
  color: var(--docsearch-muted-color);
  font-size: .75em
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,
.DocSearch-Hit[aria-selected=true] mark {
  color: var(--docsearch-hit-active-color) !important
}

@media screen and (prefers-reduced-motion:reduce) {

  .DocSearch-Hit-action-button:focus,
  .DocSearch-Hit-action-button:hover {
    background: rgba(0, 0, 0, .2);
    transition: none
  }
}

.DocSearch-ErrorScreen,
.DocSearch-NoResults,
.DocSearch-StartScreen {
  font-size: .9em;
  margin: 0 auto;
  padding: 36px 0;
  text-align: center;
  width: 80%
}

.DocSearch-Screen-Icon {
  color: var(--docsearch-muted-color);
  padding-bottom: 12px
}

.DocSearch-NoResults-Prefill-List {
  display: inline-block;
  padding-bottom: 24px;
  text-align: left
}

.DocSearch-NoResults-Prefill-List ul {
  display: inline-block;
  padding: 8px 0 0
  color: #666;
}

.DocSearch-NoResults-Prefill-List li {
  list-style-position: inside;
  list-style-type: "» "
}

.DocSearch-Prefill {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 1em;
  color: var(--docsearch-highlight-color);
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: 700;
  padding: 0
}

.DocSearch-Prefill:focus,
.DocSearch-Prefill:hover {
  outline: none;
  text-decoration: underline
}

.DocSearch-Footer {
  align-items: center;
  background: var(--docsearch-footer-background);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--docsearch-footer-shadow);
  display: flex;
  flex-direction: row-reverse;
  flex-shrink: 0;
  height: var(--docsearch-footer-height);
  justify-content: space-between;
  padding: 0 var(--docsearch-spacing);
  position: relative;
  user-select: none;
  width: 100%;
  z-index: 300
}

.DocSearch-Commands {
  color: var(--docsearch-muted-color);
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0
}

.DocSearch-Commands li {
  align-items: center;
  display: flex
}

.DocSearch-Commands li:not(:last-of-type) {
  margin-right: .8em
}

.DocSearch-Commands-Key {
  align-items: center;
  background: var(--docsearch-key-gradient);
  border-radius: 2px;
  box-shadow: var(--docsearch-key-shadow);
  display: flex;
  height: 18px;
  justify-content: center;
  margin-right: .4em;
  padding: 0 0 1px;
  color: var(--docsearch-muted-color);
  border: 0;
  width: 20px
}

@media (max-width:768px) {
  :root {
    --docsearch-spacing: 10px;
    --docsearch-footer-height: 40px
  }

  .DocSearch-Dropdown {
    height: 100%
  }

  .DocSearch-Container {
    height: 100vh;
    height: -webkit-fill-available;
    height: calc(var(--docsearch-vh, 1vh)*100);
    position: absolute
  }

  .DocSearch-Footer {
    border-radius: 0;
    bottom: 0;
    position: absolute
  }

  .DocSearch-Hit-content-wrapper {
    display: flex;
    position: relative;
    width: 80%
  }

  .DocSearch-Modal {
    border-radius: 0;
    box-shadow: none;
    height: 100vh;
    height: -webkit-fill-available;
    height: calc(var(--docsearch-vh, 1vh)*100);
    margin: 0;
    max-width: 100%;
    width: 100%
  }

  .DocSearch-Dropdown {
    max-height: calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))
  }

  .DocSearch-Cancel {
    appearance: none;
    background: none;
    border: 0;
    color: var(--docsearch-highlight-color);
    cursor: pointer;
    display: inline-block;
    flex: none;
    font: inherit;
    font-size: 1em;
    font-weight: 500;
    margin-left: var(--docsearch-spacing);
    outline: none;
    overflow: hidden;
    padding: 0;
    user-select: none;
    white-space: nowrap
  }

  .DocSearch-Commands,
  .DocSearch-Hit-Tree {
    display: none
  }
}

@keyframes fade-in {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}/* 
 * This Emoji icons comes from https://cdn.jsdelivr.net/gh/SebastianAigner/twemoji-amazing/twemoji-amazing.css
 * 
 * Source: https://github.com/SebastianAigner/twemoji-amazing 
 * 
 * How to use:
 * 
 * <i class="twa twa-red-circle"></i>
 * 
 * TODO: replace all current icon with this system! (footer, header, tables)
 *
 */ 
.twa {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1em 1em;

  --size: 1em;
  /* For Google Font icons, use mask instead of background-image to make the icon color dynamic according to the parent div */
  mask-position: center;
  mask-size: var(--size);
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: var(--size);
  -webkit-mask-repeat: no-repeat;
}

.twa-2x {
  height: 2em;
  width: 2em;
  margin: 0 0.1em 0 0.2em;
  vertical-align: -0.2em;
  background-size: 2em 2em;
}


.twa-cross-mark {
  /*background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@master/assets/svg/274c.svg") */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0REMkU0NCIgZD0iTTIxLjUzMyAxOC4wMDJMMzMuNzY4IDUuNzY4Yy45NzYtLjk3Ni45NzYtMi41NTkgMC0zLjUzNS0uOTc3LS45NzctMi41NTktLjk3Ny0zLjUzNSAwTDE3Ljk5OCAxNC40NjcgNS43NjQgMi4yMzNjLS45NzYtLjk3Ny0yLjU2LS45NzctMy41MzUgMC0uOTc3Ljk3Ni0uOTc3IDIuNTU5IDAgMy41MzVsMTIuMjM0IDEyLjIzNEwyLjIwMSAzMC4yNjVjLS45NzcuOTc3LS45NzcgMi41NTkgMCAzLjUzNS40ODguNDg4IDEuMTI4LjczMiAxLjc2OC43MzJzMS4yOC0uMjQ0IDEuNzY4LS43MzJsMTIuMjYyLTEyLjI2MyAxMi4yMzQgMTIuMjM0Yy40ODguNDg4IDEuMTI4LjczMiAxLjc2OC43MzIuNjQgMCAxLjI3OS0uMjQ0IDEuNzY4LS43MzIuOTc2LS45NzcuOTc2LTIuNTU5IDAtMy41MzVMMjEuNTMzIDE4LjAwMnoiLz48L3N2Zz4=")
}

.twa-check-mark-button {
  /* background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@master/assets/svg/2705.svg") */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iIzc3QjI1NSIgZD0iTTM2IDMyYzAgMi4yMDktMS43OTEgNC00IDRINGMtMi4yMDkgMC00LTEuNzkxLTQtNFY0YzAtMi4yMDkgMS43OTEtNCA0LTRoMjhjMi4yMDkgMCA0IDEuNzkxIDQgNHYyOHoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjkuMjggNi4zNjJjLTEuMTU2LS43NTEtMi43MDQtLjQyMi0zLjQ1OC43MzZMMTQuOTM2IDIzLjg3N2wtNS4wMjktNC42NWMtMS4wMTQtLjkzOC0yLjU5Ni0uODc1LTMuNTMzLjEzOC0uOTM3IDEuMDE0LS44NzUgMi41OTYuMTM5IDMuNTMzbDcuMjA5IDYuNjY2Yy40OC40NDUgMS4wOS42NjUgMS42OTYuNjY1LjY3MyAwIDEuNTM0LS4yODIgMi4wOTktMS4xMzkuMzMyLS41MDYgMTIuNS0xOS4yNyAxMi41LTE5LjI3Ljc1MS0xLjE1OS40MjEtMi43MDctLjczNy0zLjQ1OHoiLz48L3N2Zz4=")
}

.twa-green-circle {
  /*  background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@master/assets/svg/1f7e2.svg") */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBmaWxsPSIjNzhCMTU5IiBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiLz48L3N2Zz4=")
}

.twa-red-circle {
  /* background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@master/assets/svg/1f534.svg")*/
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBmaWxsPSIjREQyRTQ0IiBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiLz48L3N2Zz4=")
}

.twa-orange-circle {
  /* background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@master/assets/svg/1f7e0.svg") */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBmaWxsPSIjRjQ5MDBDIiBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiLz48L3N2Zz4=")
}

.github-icon {
  --cicon: url('data:image/svg+xml,<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/></svg>');
  background: #969faf;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}

/* Google fonts // weight 400, grade 0, 24px, rounded  */
.gf-cloud { 
  --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm0-80h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm220-240Z"/></svg>'); 
  /*background: linear-gradient(45deg,#3d4ae3,#c92eaa 50%);*/
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}
.gf-on-premise { 
  --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M300-720q-25 0-42.5 17.5T240-660q0 25 17.5 42.5T300-600q25 0 42.5-17.5T360-660q0-25-17.5-42.5T300-720Zm0 400q-25 0-42.5 17.5T240-260q0 25 17.5 42.5T300-200q25 0 42.5-17.5T360-260q0-25-17.5-42.5T300-320ZM160-840h640q17 0 28.5 11.5T840-800v280q0 17-11.5 28.5T800-480H160q-17 0-28.5-11.5T120-520v-280q0-17 11.5-28.5T160-840Zm40 80v200h560v-200H200Zm-40 320h640q17 0 28.5 11.5T840-400v280q0 17-11.5 28.5T800-80H160q-17 0-28.5-11.5T120-120v-280q0-17 11.5-28.5T160-440Zm40 80v200h560v-200H200Zm0-400v200-200Zm0 400v200-200Z"/></svg>'); 
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}
.gf-on-aws { 
  --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m480-420 85 65q6 5 12 .5t4-11.5l-33-106 89-70q5-5 3-11.5t-9-6.5H524l-34-107q-2-7-10-7t-10 7l-34 107H329q-7 0-9.5 6.5T322-542l88 70-33 107q-2 7 4 11.5t12-.5l87-66Zm0 336q-7 0-13-1t-12-3q-135-45-215-166.5T160-516v-189q0-25 14.5-45t37.5-29l240-90q14-5 28-5t28 5l240 90q23 9 37.5 29t14.5 45v189q0 140-80 261.5T505-88q-6 2-12 3t-13 1Zm0-80q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"/></svg>'); 
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}

.gf-sell {
  --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 -960 960 960" ><path d="M570-104q-23 23-57 23t-57-23L104-456q-11-11-17.5-26T80-514v-286q0-33 23.5-56.5T160-880h286q17 0 32 6.5t26 17.5l352 353q23 23 23 56.5T856-390L570-104Zm-57-56 286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640ZM160-800Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}

.gf-check {
   --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  height="24" viewBox="0 -960 960 960" width="24"><path d="m424-408-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-408Zm56 328q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}

.gf-arrow-forward {
  --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}

.gf-open-in-new {
  --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}

.gf-event-up-coming {
  --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M760-80H640q-17 0-28.5-11.5T600-120q0-17 11.5-28.5T640-160h120v-400H200v120q0 17-11.5 28.5T160-400q-17 0-28.5-11.5T120-440v-280q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80Zm-393-80H80q-17 0-28.5-11.5T40-200q0-17 11.5-28.5T80-240h287l-75-76q-11-11-11.5-27.5T292-372q11-11 28-11t28 11l144 144q12 12 12 28t-12 28L348-28q-11 11-27.5 11.5T292-28q-11-11-11-28t11-28l75-76Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}




/* TOp nav icons -  Google fonts // weight 300, grade 0, 24px, rounded  fot top nav */

.menu .twa {
  margin: 0;
}

.gf-download {
   --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M480-343.54q-7.23 0-13.46-2.31-6.23-2.3-11.85-7.92L330.31-478.15q-8.92-8.93-8.81-20.89.12-11.96 8.81-21.27 9.31-9.3 21.38-9.61 12.08-.31 21.39 9L450-444v-306q0-12.77 8.62-21.38Q467.23-780 480-780t21.38 8.62Q510-762.77 510-750v306l76.92-76.92q8.93-8.92 21.19-8.81 12.27.12 21.58 9.42 8.69 9.31 9 21.08.31 11.77-9 21.08L505.31-353.77q-5.62 5.62-11.85 7.92-6.23 2.31-13.46 2.31ZM252.31-180Q222-180 201-201q-21-21-21-51.31v-78.46q0-12.77 8.62-21.38 8.61-8.62 21.38-8.62t21.38 8.62q8.62 8.61 8.62 21.38v78.46q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85h455.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-78.46q0-12.77 8.62-21.38 8.61-8.62 21.38-8.62t21.38 8.62q8.62 8.61 8.62 21.38v78.46Q780-222 759-201q-21 21-51.31 21H252.31Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}

.gf-extension {
   --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M355.08-140H200q-24.92 0-42.46-17.54T140-200v-155.08q41.08-5 70.54-34.15Q240-418.39 240-460t-29.46-70.77q-29.46-29.15-70.54-34.15V-720q0-24.92 17.54-42.46T200-780h160q5.39-38.15 33.42-62.92 28.04-24.77 66.58-24.77t66.58 24.77Q554.61-818.15 560-780h160q24.92 0 42.46 17.54T780-720v160q38.15 5.39 62.92 33.42 24.77 28.04 24.77 66.58t-24.77 66.58Q818.15-365.39 780-360v160q0 24.92-17.54 42.46T720-140H564.92q-5.38-43.08-35.15-71.54Q500-240 460-240t-69.77 28.46q-29.77 28.46-35.15 71.54ZM200-200h108.46q20.54-52.92 64.89-76.46Q417.69-300 460-300t86.65 23.54Q591-252.92 611.54-200H720v-217.69h49.23q18.38-2.31 28.42-14.85 10.04-12.54 10.04-27.46 0-14.92-10.04-27.46-10.04-12.54-28.42-14.85H720V-720H502.31v-49.23q-2.31-18.38-14.85-28.42-12.54-10.04-27.46-10.04-14.92 0-27.46 10.04-12.54 10.04-14.85 28.42V-720H200v109.54q45.54 18.85 72.77 59.88Q300-509.54 300-460q0 48.92-27.23 89.96Q245.54-329 200-309.54V-200Zm260-260Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}
.gf-brush {
   --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M247.69-147.69q-34.33 0-67.89-15.08-33.57-15.08-55.95-40.31 22.92-6.54 43.38-27.81 20.46-21.26 20.46-56.8 0-41.93 29.04-70.96 29.04-29.04 70.96-29.04 41.93 0 70.96 29.04 29.04 29.03 29.04 70.96 0 57.75-41.12 98.87-41.13 41.13-98.88 41.13Zm0-60q33 0 56.5-23.5t23.5-56.5q0-17-11.5-28.5t-28.5-11.5q-17 0-28.5 11.5t-11.5 28.5q0 23-5.5 42t-14.5 36q5 2 10 2h10ZM460-370l-89.23-89.23 342.61-342.61q11-11 27.5-11.5t28.5 11.5l33.23 33.23q12 12 12 28t-12 28L460-370Zm-172.31 82.31Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}
.gf-task {
   --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="m437.38-348.85-63.69-63.69q-4.46-4.46-9.73-6.69-5.27-2.23-10.84-2.23-5.58 0-11.35 2.23t-10.23 6.69q-9.31 9.31-9.31 21.39 0 12.07 9.31 21.38L412.69-288q5.62 5.61 11.85 7.92 6.23 2.31 13.46 2.31t13.46-2.31q6.23-2.31 11.85-7.92l165.15-165.16q8.92-8.92 9.12-21.49.19-12.58-9.12-21.89-9.31-9.31-21.69-9.31t-21.69 9.31l-147.7 147.69ZM252.31-100Q222-100 201-121q-21-21-21-51.31v-615.38Q180-818 201-839q21-21 51.31-21h287.77q14.46 0 27.81 5.62 13.34 5.61 23.19 15.46l167.84 167.84q9.85 9.85 15.46 23.19 5.62 13.35 5.62 27.81v447.77Q780-142 759-121q-21 21-51.31 21H252.31ZM540-656.16V-800H252.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v615.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85h455.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46V-620H576.16q-15.47 0-25.81-10.35Q540-640.69 540-656.16ZM240-800v180-180V-160v-640Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}
.gf-bolt {
   --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="m422-232 207-248H469l29-227-185 267h139l-30 208Zm-38.92-148H261.39q-20.16 0-29.54-17.85-9.39-17.84 2.31-34.38L496.23-810.3q8.08-11.31 20.62-15.47 12.53-4.15 26.07.7 13.54 4.84 19.81 16.57t4.65 25.27L537.31-540h149.23q21.38 0 30.15 19.16 8.77 19.15-5.15 35.69L421.77-138.08q-8.69 10.31-21.23 13.35-12.54 3.03-24.46-2.43-11.92-5.46-18.5-16.69t-4.96-24.77L383.08-380ZM471-470Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}
.gf-edit {
   --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M553.08-136.16v-54.46q0-7.23 2.61-13.76 2.62-6.54 8.23-12.16l206.31-205.31q7.46-7.07 16.15-10.3 8.7-3.23 17.39-3.23 9.31 0 18.19 3.53 8.88 3.54 15.96 10.62l37 37.38q6.46 7.47 10 16.16 3.54 8.69 3.54 17.38t-3.23 17.69q-3.23 9-10.31 16.46L669.61-110.85q-5.61 5.62-12.15 8.23-6.54 2.62-13.77 2.62h-54.46q-15.46 0-25.81-10.35-10.34-10.34-10.34-25.81Zm287.69-214.15-37-37.38 37 37.38Zm-240 202.62h38l129.84-130.47-37-37.76-130.84 130.23v38ZM252.31-100Q222-100 201-121q-21-21-21-51.31v-615.38Q180-818 201-839q21-21 51.31-21h287.77q14.46 0 27.81 5.62 13.34 5.61 23.19 15.46l167.84 167.84q9.85 9.85 15.46 23.19 5.62 13.35 5.62 27.81v62q0 12.77-8.62 21.39-8.61 8.61-21.38 8.61t-21.38-8.61q-8.62-8.62-8.62-21.39V-620H576.16q-15.47 0-25.81-10.35Q540-640.69 540-656.16V-800H252.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v615.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85h183.07q12.77 0 21.39 8.62 8.61 8.61 8.61 21.38t-8.61 21.38q-8.62 8.62-21.39 8.62H252.31ZM240-160v-640 640Zm510.61-137.54-19-18.38 37 37.76-18-19.38Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}
.gf-code {
   --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="m178.77-479.38 162.31 162.3q8.3 8.31 8.5 20.89.19 12.57-8.5 21.27-8.7 8.69-21.08 8.69-12.38 0-21.08-8.69L119.15-454.69q-5.61-5.62-7.92-11.85-2.31-6.23-2.31-13.46t2.31-13.46q2.31-6.23 7.92-11.85l179.77-179.77q8.93-8.92 21.2-9.11 12.26-.19 21.57 9.11 9.31 9.31 9.31 21.39 0 12.07-9.31 21.38L178.77-479.38Zm602.46-1.24-162.31-162.3q-8.3-8.31-8.5-20.89-.19-12.57 8.5-21.27 8.7-8.69 21.08-8.69 12.38 0 21.08 8.69l179.77 179.77q5.61 5.62 7.92 11.85 2.31 6.23 2.31 13.46t-2.31 13.46q-2.31 6.23-7.92 11.85L661.08-274.92q-8.93 8.92-20.89 8.8-11.96-.11-21.27-9.42-9.3-9.31-9.3-21.38 0-12.08 9.3-21.39l162.31-162.31Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}
/* article */ 
.gf-log {
   --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h535.38Q778-820 799-799q21 21 21 51.31v535.38Q820-182 799-161q-21 21-51.31 21H212.31Zm0-60h535.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-535.38q0-4.62-3.85-8.46-3.84-3.85-8.46-3.85H212.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v535.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85ZM200-760v560-560Zm120 470h200q12.77 0 21.38-8.62Q550-307.23 550-320t-8.62-21.38Q532.77-350 520-350H320q-12.77 0-21.38 8.62Q290-332.77 290-320t8.62 21.38Q307.23-290 320-290Zm0-160h320q12.77 0 21.38-8.62Q670-467.23 670-480t-8.62-21.38Q652.77-510 640-510H320q-12.77 0-21.38 8.62Q290-492.77 290-480t8.62 21.38Q307.23-450 320-450Zm0-160h320q12.77 0 21.38-8.62Q670-627.23 670-640t-8.62-21.38Q652.77-670 640-670H320q-12.77 0-21.38 8.62Q290-652.77 290-640t8.62 21.38Q307.23-610 320-610Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}
.gf-apps {
   --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M240-175.39q-26.65 0-45.63-18.98-18.98-18.98-18.98-45.63 0-26.65 18.98-45.63 18.98-18.98 45.63-18.98 26.65 0 45.63 18.98 18.98 18.98 18.98 45.63 0 26.65-18.98 45.63-18.98 18.98-45.63 18.98Zm240 0q-26.65 0-45.63-18.98-18.98-18.98-18.98-45.63 0-26.65 18.98-45.63 18.98-18.98 45.63-18.98 26.65 0 45.63 18.98 18.98 18.98 18.98 45.63 0 26.65-18.98 45.63-18.98 18.98-45.63 18.98Zm240 0q-26.65 0-45.63-18.98-18.98-18.98-18.98-45.63 0-26.65 18.98-45.63 18.98-18.98 45.63-18.98 26.65 0 45.63 18.98 18.98 18.98 18.98 45.63 0 26.65-18.98 45.63-18.98 18.98-45.63 18.98Zm-480-240q-26.65 0-45.63-18.98-18.98-18.98-18.98-45.63 0-26.65 18.98-45.63 18.98-18.98 45.63-18.98 26.65 0 45.63 18.98 18.98 18.98 18.98 45.63 0 26.65-18.98 45.63-18.98 18.98-45.63 18.98Zm240 0q-26.65 0-45.63-18.98-18.98-18.98-18.98-45.63 0-26.65 18.98-45.63 18.98-18.98 45.63-18.98 26.65 0 45.63 18.98 18.98 18.98 18.98 45.63 0 26.65-18.98 45.63-18.98 18.98-45.63 18.98Zm240 0q-26.65 0-45.63-18.98-18.98-18.98-18.98-45.63 0-26.65 18.98-45.63 18.98-18.98 45.63-18.98 26.65 0 45.63 18.98 18.98 18.98 18.98 45.63 0 26.65-18.98 45.63-18.98 18.98-45.63 18.98Zm-480-240q-26.65 0-45.63-18.98-18.98-18.98-18.98-45.63 0-26.65 18.98-45.63 18.98-18.98 45.63-18.98 26.65 0 45.63 18.98 18.98 18.98 18.98 45.63 0 26.65-18.98 45.63-18.98 18.98-45.63 18.98Zm240 0q-26.65 0-45.63-18.98-18.98-18.98-18.98-45.63 0-26.65 18.98-45.63 18.98-18.98 45.63-18.98 26.65 0 45.63 18.98 18.98 18.98 18.98 45.63 0 26.65-18.98 45.63-18.98 18.98-45.63 18.98Zm240 0q-26.65 0-45.63-18.98-18.98-18.98-18.98-45.63 0-26.65 18.98-45.63 18.98-18.98 45.63-18.98 26.65 0 45.63 18.98 18.98 18.98 18.98 45.63 0 26.65-18.98 45.63-18.98 18.98-45.63 18.98Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}

.cross-icon {
  --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><path d="M480,80C700.766,80 880,259.234 880,480C880,700.766 700.766,880 480,880C259.234,880 80,700.766 80,480C80,259.234 259.234,80 480,80ZM424.211,480L316.911,587.3C301.516,602.695 301.516,627.693 316.911,643.089C332.307,658.484 357.305,658.484 372.7,643.089L480,535.789L587.3,643.089C602.695,658.484 627.693,658.484 643.089,643.089C658.484,627.693 658.484,602.695 643.089,587.3L535.789,480L643.089,372.7C658.484,357.305 658.484,332.307 643.089,316.911C627.693,301.516 602.695,301.516 587.3,316.911L480,424.211L372.7,316.911C357.305,301.516 332.307,301.516 316.911,316.911C301.516,332.307 301.516,357.305 316.911,372.7L424.211,480Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}
.star {
  --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="m480-292.46-155.61 93.84q-8.7 5.08-17.43 4.27-8.73-.81-15.8-5.88-7.08-5.08-10.93-13.27-3.84-8.19-1.23-18.12l41.31-176.69-137.38-118.92q-7.7-6.69-9.81-15.5-2.12-8.81 1.11-17.12 3.23-8.3 9.31-13.57t16.62-6.89l181.3-15.84L451.85-763q3.84-9.31 11.65-13.77 7.81-4.46 16.5-4.46 8.69 0 16.5 4.46 7.81 4.46 11.65 13.77l70.39 166.85 181.3 15.84q10.54 1.62 16.62 6.89 6.08 5.27 9.31 13.57 3.23 8.31 1.11 17.12-2.11 8.81-9.81 15.5L639.69-408.31 681-231.62q2.61 9.93-1.23 18.12-3.85 8.19-10.93 13.27-7.07 5.07-15.8 5.88-8.73.81-17.43-4.27L480-292.46Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}

.star-half {
  --cicon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M480-675v312l126 77-33-144 111-96-146-13-58-136Zm0 382.54-155.61 93.84q-8.7 5.08-17.43 4.27-8.73-.81-15.8-5.88-7.08-5.08-10.93-13.27-3.84-8.19-1.23-18.12l41.31-176.69-137.38-118.92q-7.7-6.69-9.81-15.5-2.12-8.81 1.11-17.12 3.23-8.3 9.31-13.57t16.62-6.89l181.3-15.84L451.85-763q3.84-9.31 11.65-13.77 7.81-4.46 16.5-4.46 8.69 0 16.5 4.46 7.81 4.46 11.65 13.77l70.39 166.85 181.3 15.84q10.54 1.62 16.62 6.89 6.08 5.27 9.31 13.57 3.23 8.31 1.11 17.12-2.11 8.81-9.81 15.5L639.69-408.31 681-231.62q2.61 9.93-1.23 18.12-3.85 8.19-10.93 13.27-7.07 5.07-15.8 5.88-8.73.81-17.43-4.27L480-292.46Z"/></svg>');
  background: currentColor;
  mask-image: var(--cicon); 
  -webkit-mask-image: var(--cicon);
}

.europe-icon {
  height: 1em;
  width: 1.5em;
  border-radius: 2px;
  background-size: 1.5em 1em;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI4MTAiIGhlaWdodD0iNTQwIj48ZGVzYz5FdXJvcGVhbiBmbGFnPC9kZXNjPjxkZWZzPjxnIGlkPSJzIj48ZyBpZD0iYyI+PHBhdGggaWQ9InQiIGQ9Ik0wLDB2MWgwLjV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0xKXJvdGF0ZSgxOCkiLz48dXNlIHhsaW5rOmhyZWY9IiN0IiB0cmFuc2Zvcm09InNjYWxlKC0xLDEpIi8+PC9nPjxnIGlkPSJhIj48dXNlIHhsaW5rOmhyZWY9IiNjIiB0cmFuc2Zvcm09InJvdGF0ZSg3MikiLz48dXNlIHhsaW5rOmhyZWY9IiNjIiB0cmFuc2Zvcm09InJvdGF0ZSgxNDQpIi8+PC9nPjx1c2UgeGxpbms6aHJlZj0iI2EiIHRyYW5zZm9ybT0ic2NhbGUoLTEsMSkiLz48L2c+PC9kZWZzPjxyZWN0IGZpbGw9IiMwMzkiIHdpZHRoPSI4MTAiIGhlaWdodD0iNTQwIi8+PGcgZmlsbD0iI2ZjMCIgdHJhbnNmb3JtPSJzY2FsZSgzMCl0cmFuc2xhdGUoMTMuNSw5KSI+PHVzZSB4bGluazpocmVmPSIjcyIgeT0iLTYiLz48dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI2Ii8+PGcgaWQ9ImwiPjx1c2UgeGxpbms6aHJlZj0iI3MiIHg9Ii02Ii8+PHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJyb3RhdGUoMTUwKXRyYW5zbGF0ZSgwLDYpcm90YXRlKDY2KSIvPjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0icm90YXRlKDEyMCl0cmFuc2xhdGUoMCw2KXJvdGF0ZSgyNCkiLz48dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InJvdGF0ZSg2MCl0cmFuc2xhdGUoMCw2KXJvdGF0ZSgxMikiLz48dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InJvdGF0ZSgzMCl0cmFuc2xhdGUoMCw2KXJvdGF0ZSg0MikiLz48L2c+PHVzZSB4bGluazpocmVmPSIjbCIgdHJhbnNmb3JtPSJzY2FsZSgtMSwxKSIvPjwvZz48L3N2Zz4=");
}

.france-icon {
  height: 1em;
  width: 1.6em;
  border-radius: 2px;
  background-size: 1.6em 1em;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAzNiAzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+PHBhdGggZmlsbD0iI0VEMjkzOSIgZD0iTTM2IDI3YTQgNCAwIDAgMS00IDRoLThWNWg4YTQgNCAwIDAgMSA0IDR2MTh6Ij48L3BhdGg+PHBhdGggZmlsbD0iIzAwMjQ5NSIgZD0iTTQgNWE0IDQgMCAwIDAtNCA0djE4YTQgNCAwIDAgMCA0IDRoOFY1SDR6Ij48L3BhdGg+PHBhdGggZmlsbD0iI0VFRSIgZD0iTTEyIDVoMTJ2MjZIMTJ6Ij48L3BhdGg+PC9zdmc+');
}



body>main.doc-example h2 {
  border-bottom: 1px solid #DDD;
}


.example-hero-thumb a:hover,
.gallery a:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Spacing between images */
  justify-content: center;
  align-items: flex-start;
}
/* if the galery is also printed inside the documentation of one example */
.example-documentation .gallery {
  justify-content: left;
  margin-bottom: 4em;
}

.example-hero-thumb a,
.gallery a {
  display: block;
  overflow: hidden;
  border: 1px solid #ddd;
  cursor: pointer;
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-card-box-shadow);
  transition: transform 0.3s;
}

.example-hero-thumb img,
.gallery img {
  display: block;
  max-height: 250px;
  max-width: 450px;
  object-fit: cover;
  border-radius: inherit; /* Match border radius of the parent <a> */
}

.example-hero-thumb a {
  width: fit-content;
  margin-left: auto;
}

 /* bigger than in galery */
.example-hero-thumb img {
  max-height: 350px;
  max-width: 500px;
}

@media(max-width: 767px) {
  .example-hero-thumb img,
  .gallery img {
    max-width: 350px;
  }
}


.example-hero-summary small {
  display: block;
  font-size: 11px;
  font-weight: bold;
  margin-top: 7px;
  margin-bottom: 2px;
  color:var(--pico-secondary);
}


@media(max-width: 767px) {
  .example-hero-thumb a {
    margin-right: auto; /* center on mobile */
  }
  .example-hero-summary {
    text-align: left;
  }
  .example-hero-summary p {
    text-align: center;
  }
}

.pill {
  align-items: center;
  font-family: "Open Sans", Arial, Verdana, sans-serif;
  font-size: 11px;
  display: inline-block;
  white-space: nowrap;
  width: auto;
  border-radius: 100px;
  line-height: 1;
  overflow: hidden;
  padding: 0px 12px 0px 12px;
  text-overflow: ellipsis;
  line-height: 24px;
  word-break: break-word;
}

.pill-1 {
  background: #edc9f1;
}
.pill-2 {
  background: #d8d0f1;
}
.pill-3 {
  background: #b7d9fc;
}
.pill-4 {
  background: #c5fffe;
}