/*!*******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/demo.scss ***!
  \*******************************************************************************************************************************************************/
@charset "UTF-8";
@font-face {
  font-family: "Satoshi-Regular";
  src: url(../images/design/Satoshi-Regular.9ec050.woff2) format("woff2"), url(../images/design/Satoshi-Regular.ca3da5.woff) format("woff"), url(../images/design/Satoshi-Regular.fe762a.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi-Italic";
  src: url(../images/design/Satoshi-Italic.f4acf4.woff2) format("woff2"), url(../images/design/Satoshi-Italic.a7000a.woff) format("woff"), url(../images/design/Satoshi-Italic.89c785.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Satoshi-Medium";
  src: url(../images/design/Satoshi-Medium.1ffe96.woff2) format("woff2"), url(../images/design/Satoshi-Medium.2419b4.woff) format("woff"), url(../images/design/Satoshi-Medium.759562.ttf) format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi-MediumItalic";
  src: url(../images/design/Satoshi-MediumItalic.6be6d5.woff2) format("woff2"), url(../images/design/Satoshi-MediumItalic.cb8316.woff) format("woff"), url(../images/design/Satoshi-MediumItalic.5db9ec.ttf) format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Satoshi-Bold";
  src: url(../images/design/Satoshi-Bold.a0e6d2.woff2) format("woff2"), url(../images/design/Satoshi-Bold.a875ff.woff) format("woff"), url(../images/design/Satoshi-Bold.137a52.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Satoshi-BoldItalic";
  src: url(../images/design/Satoshi-BoldItalic.99235b.woff2) format("woff2"), url(../images/design/Satoshi-BoldItalic.d6da0f.woff) format("woff"), url(../images/design/Satoshi-BoldItalic.95e245.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:
'wght' (range from 300.0 to 900.0
*/
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:
'wght' (range from 300.0 to 900.0
*/
.demo {
  font-family: "Satoshi-Medium";
}

body {
  margin: 0;
}

body {
  overflow-y: scroll;
}

.ds-container {
  max-width: 148rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.ds-container--top {
  background-color: var(--main-color);
  position: relative;
}
.ds-container--bottom {
  background-color: var(--color-bckg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
.ds-container em {
  font-style: normal;
}

.top-part {
  grid-column: 1/13;
  grid-row: 1;
  color: var(--main-color-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.top-part .hero {
  width: 100%;
  margin-top: auto;
  margin-bottom: 2rem;
  grid-template-columns: repeat(12, 1fr);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.top-part .hero__note {
  font-size: 1.4rem;
}
.top-part .hero__pre {
  margin-top: 1rem;
  padding-left: 2rem;
  grid-column: 1/3;
  grid-row: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.top-part .hero__pres {
  grid-column: 3/9;
  grid-row: 1;
  padding-left: 2rem;
}
.top-part .hero__pres h1 {
  margin-left: -4px;
}
.top-part .hero__pres p {
  font-size: 1.4rem;
}
.top-part .hero__more {
  padding-right: 2rem;
  grid-column: 8/14;
  grid-row: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.top-part .hero__more .current_screen_size {
  margin-top: 2rem;
  text-align: right;
  width: 38%;
}
.top-part .hero__more .current_screen_size .width, .top-part .hero__more .current_screen_size .height {
  font-family: "Satoshi-BoldItalic";
}
.top-part .hero__more .theme-switcher {
  margin-top: 2rem;
}
.top-part .hero__more .theme-switcher p {
  text-align: right;
}
.top-part .hero__more .theme-switcher .toolbar {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 0.2rem;
}
.top-part h1 {
  margin: 0;
  font-size: 4.8rem;
  line-height: 1.15;
  font-family: "Satoshi-Bold";
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.center-part {
  grid-column: 4/13;
  grid-row: 1;
  padding: 2rem;
}
.center-part .comp-list__title {
  color: var(--basic-color-text);
  line-height: 1.3;
}
.center-part .comp-list-preview + .comp-list__title {
  margin-top: 2rem;
}

.comp__single__title {
  color: var(--basic-color-text);
  font-family: "Satoshi-Bold", monospace;
}

.comp__single__paragraph {
  color: var(--basic-color-text);
  font-family: "Satoshi-Medium", monospace;
}

.component_set_intro h3 {
  color: var(--basic-color-text);
  font-family: "Satoshi-Bold", monospace;
}

.comp__args__title {
  color: var(--basic-color-text);
  margin-bottom: 1.6rem;
  font-family: "Satoshi-Bold", monospace;
}

.comp__white__space {
  margin-top: 4.4rem;
}

.right-part {
  display: none;
  position: sticky;
  top: 0;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.left-part, .right-part {
  padding: 2rem;
}

.left-part h3, .right-part h3 {
  margin-bottom: 2rem;
}

.left-part {
  grid-column: 1/3;
  grid-row: 1;
}
.left-part .comp-list {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem;
  margin: 1rem 0 0 0;
  list-style-type: none;
  padding-left: 0;
  width: 100%;
  height: 100%;
}
.left-part .comp-list__title {
  margin: 2.4rem 0 3.8rem 0;
  line-height: 1.2;
}
.left-part .comp-list > li:first-child {
  margin-top: 0;
}
.left-part .comp-list li {
  margin-top: 0.85rem;
}
.left-part .comp-list li a {
  color: var(--basic-color-text);
  text-decoration: none;
  position: relative;
  font-family: "Satoshi-Regular";
}
.left-part .comp-list li a:hover {
  text-decoration: underline;
}
.left-part .comp-list li.active a {
  color: var(--basic-color-text--active);
}
.left-part .comp-list li h4 {
  margin-top: 1rem;
  font-size: 2rem;
  font-family: "Satoshi-Bold";
  color: var(--basic-color-text);
}
.left-part .comp-list li ul {
  margin-bottom: 2.4rem;
}
.left-part .comp-list li:first-child h4:first-child {
  margin-top: 0;
}

.demo .demo-header__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
.demo .demo-header__menu li {
  padding: 1rem;
}
.demo .demo-header__menu li:last-child {
  padding-right: 0;
}
.demo .demo-header__menu li a {
  text-decoration: none;
  color: inherit;
}
.demo .demo-header__menu li a:hover {
  text-decoration: underline;
}

.demo .demo-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 2rem 0;
}

.demo .logo svg {
  width: 6.5rem;
  fill: var(--main-color-dark);
}

.comp-detail .component_set_intro:first-child {
  margin-top: 0;
}
.comp-detail .component_set_intro {
  margin-bottom: 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.footer.ds-footer {
  background-color: var(--main-color);
  color: var(--main-color-text);
  padding: 4rem 0 2rem;
}
.footer.ds-footer .link-contact {
  display: inline-block;
}
.footer.ds-footer .footer__logo svg {
  height: 4.8rem;
}
.footer.ds-footer .footer__logo svg * {
  fill: var(--main-color-text);
}

.table.ds-table {
  border-radius: 0;
  width: 100%;
}
.table.ds-table tr {
  border-radius: 0;
  background-color: var(--basic-color-bckg-light);
}
.table.ds-table thead tr:first-child th:last-child {
  border-top-right-radius: 0;
}
.table.ds-table thead tr:first-child th:first-child {
  border-top-left-radius: 0;
}
.table.ds-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
.table.ds-table tbody:last-child tr:last-child td {
  border-bottom-right-radius: 0;
}
.table.ds-table tr th, .table.ds-table tr td {
  color: var(--basic-color-text);
  font-family: "Satoshi-Medium", monospace;
}
.table.ds-table thead tr th, .table.ds-table thead tr td, .table.ds-table tbody tr th, .table.ds-table tbody tr td, .table.ds-table tfoot tr th, .table.ds-table tfoot tr td {
  border-bottom-color: white;
}

@media (min-width: 527px) {
  .left-part .comp-list {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-gap: 1.6rem;
       -moz-column-gap: 1.6rem;
            column-gap: 1.6rem;
  }
}
@media (min-width: 767px) {
  .top-part .hero {
    display: grid;
  }
  .top-part .hero__pre {
    margin-top: 0;
  }
  .top-part .hero__pres {
    padding-left: 0;
  }
}
@media (min-width: 992px) {
  .center-part {
    padding: 2rem 2rem 2rem 0;
  }
  .center-part .comp-list-preview--off {
    width: 100%;
  }
  .right-part {
    display: block;
    grid-row: 1;
  }
  .left-part {
    grid-column: 1/4;
  }
  .left-part .comp-list {
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
    margin-top: 0.5rem;
  }
  .top-part .hero__pres {
    grid-column: 4/8;
  }
  .top-part .hero__more {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .top-part .hero__more .current_screen_size, .top-part .hero__more .theme-switcher {
    margin-top: 0;
  }
  .top-part .hero__more .theme-switcher {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .ds-container--bottom {
    display: grid;
  }
}
@media (min-width: 1200px) {
  .center-part {
    grid-column: 4/13;
  }
}
@media (min-width: 1480px) {
  .top-part h1 {
    font-size: 6.4rem;
  }
}
.active-bckg-1 {
  background: -webkit-gradient(linear, right top, left top, color-stop(13.81%, #FFF), to(#BFD000));
  background: linear-gradient(270deg, #FFF 13.81%, #BFD000 100%);
}

.active-bckg-2 {
  background: -webkit-gradient(linear, right top, left top, color-stop(-1.67%, #E5EB96), color-stop(31.88%, #A1C915), color-stop(65.43%, #51B64C), to(var(--main-color)));
  background: linear-gradient(270deg, #E5EB96 -1.67%, #A1C915 31.88%, #51B64C 65.43%, var(--main-color) 100%);
}

.comp-list-preview {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(1, minmax(150px, 1fr));
  margin-top: 1rem;
  -webkit-column-gap: 2rem;
     -moz-column-gap: 2rem;
          column-gap: 2rem;
  row-gap: 2rem;
}
.comp-list-preview li {
  position: relative;
}
.comp-list-preview li svg {
  width: 100%;
  height: auto;
  display: block;
}
.comp-list-preview li svg rect {
  fill: white;
}
.comp-list-preview li h2 {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  width: 100%;
  font-size: 1.8rem;
  font-family: "Satoshi-Bold";
  color: var(--main-color-dark);
}
.comp-list-preview li svg .anim-scale, .comp-list-preview li svg .gra-dark, .comp-list-preview li svg .gra-dark-v, .comp-list-preview li svg .gra-light {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.comp-list-preview li svg .anim-scale {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.comp-list-preview li svg * {
  stroke: black;
  stroke-width: 2;
}
.comp-list-preview li.active svg *:not(rect:first-child) {
  stroke: var(--main-color-dark);
  stroke-width: 1px;
}
.comp-list-preview li.active svg rect:first-child {
  stroke-width: 0;
}
.comp-list-preview li.active svg .gra-dark {
  fill: url(#gra-dark);
}
.comp-list-preview li.active svg .gra-dark-v {
  fill: url(#gra-dark-v);
}
.comp-list-preview li.active svg .gra-light {
  fill: url(#gra-light);
}
.comp-list-preview li a:hover svg .gra-dark {
  fill: url(#gra-dark);
}
.comp-list-preview li a:hover svg .gra-dark-v {
  fill: url(#gra-dark-v);
}
.comp-list-preview li a:hover svg .gra-light {
  fill: url(#gra-light);
}
.comp-list-preview li a:hover svg .anim-scale {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.comp-list-preview li a:hover h2 {
  text-decoration: underline;
}

.icon-code {
  position: absolute;
  width: 80%;
  top: 200px;
  left: 10%;
  background-color: var(--main-color-text);
  padding: 2rem;
}

.icon-code-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.icon-code-content {
  background: #fff;
  max-width: 800px;
  width: 90%;
  padding: 20px;
  position: relative;
}

.close-icon-code {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.icon-code-content pre {
  max-height: 70vh;
  overflow-y: auto;
}

.icon-code-content--header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.icon-code-content--header .left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.rendered-icon svg {
  width: 32px;
  height: 32px;
}

@media (min-width: 527px) {
  .comp-list-preview {
    grid-template-columns: repeat(2, minmax(150px, 2fr));
  }
}
@media (min-width: 767px) {
  .comp-list-preview {
    margin-top: 2rem;
    grid-template-columns: repeat(3, minmax(150px, 3fr));
  }
}
.ds-field input {
  background-color: white;
  border: 1px solid var(--main-color-dark);
  padding: 1rem;
  color: var(--main-color-dark);
}
.ds-field input::-webkit-input-placeholder {
  color: var(--main-color-dark);
}
.ds-field input::-moz-placeholder {
  color: var(--main-color-dark);
}
.ds-field input:-ms-input-placeholder {
  color: var(--main-color-dark);
}
.ds-field input::-ms-input-placeholder {
  color: var(--main-color-dark);
}
.ds-field input::placeholder {
  color: var(--main-color-dark);
}
.ds-field input:hover {
  background: rgba(0, 0, 0, 0.06);
}
.ds-field input:focus {
  background: rgba(0, 0, 0, 0.12);
}

.ds-container--top.theme-demo .btn {
  padding: 0.2rem 0.6rem;
  background-color: rgba(255, 255, 255, 0.4);
}
.ds-container--top.theme-demo .btn--small {
  height: auto;
}
.ds-container--top.theme-demo .btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
.ds-container--top.theme-demo .btn + .btn {
  margin-left: 0.1rem;
}
.ds-container--top.theme-demo .btn.active {
  background-color: var(--main-color-text);
  color: var(--main-color);
}

.theme-demo {
  --main-color: rgb(214, 232, 227);
  --main-color-2:#0b1b2c;
  --main-color-dark: #2b8c72;
  --main-color-text: #000000;
  --basic-color-text: #000000;
  --basic-color-text--light: #a5e7b8;
  --basic-color-text--active: rgb(9, 206, 151);
  --basic-color-text--demo-link-1: rgb(9, 206, 151);
  --basic-color-text--demo-link-2: rgb(9, 206, 151);
  --basic-color-text--demo-link-1-dark: rgb(43, 140, 114);
  --basic-color-text--demo-link-2-dark: rgb(43, 140, 114);
  --basic-color-bckg-light: #efefef;
  --color-bckg: #ffffff;
}

.components__icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: 100vh;
}
.components__icons__item {
  height: 10rem;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-bottom: 3px solid white;
  border-left: 3px solid white;
  border-right: 3px solid white;
  background-color: rgba(0, 0, 0, 0.06);
  width: 25%;
}
.components__icons__item svg {
  width: 5rem;
  height: 5rem;
  display: block;
}
.components__icons__item p {
  text-align: center;
  font-size: 11px;
  line-height: 11px;
  height: 16px;
  margin-top: auto;
}
.components__icons__item + .components__icons__item {
  border-left: none;
}
.components__icons__item:nth-child(4n+1) {
  border-left: none;
}
.components__icons__item:nth-child(4n) {
  border-right: none;
}
.components__icons__item:nth-child(-n+4) {
  border-top: none;
}
.components__icons .demo-link {
  font-size: 1.2rem;
  margin-top: 0.4rem;
}

.page__content ol li {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.loader.loaderSection {
  background-color: rgba(255, 255, 255, 0.9);
}

.loader--unfixed {
  position: static;
  display: block;
  width: unset;
  height: unset;
}

code:not(.language-html) {
  background-color: var(--main-color-dark);
  color: #f5fed8;
  border-radius: 4px;
  padding: 0.1rem 0.4rem 0.2rem;
  font-size: 1.4rem;
  font-family: "Satoshi-Regular", monospace;
  white-space: nowrap;
}

.component_set--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem 0;
}
.component_set--inner-flexible, .component_set--inner-fixed {
  gap: 3rem;
}
.component_set--inner-flexible {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.component_set--inner-1-col, .component_set--inner-2-col, .component_set--inner-3-col, .component_set--inner-4-col, .component_set--inner-5-col {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.component_set--inner-1-col > .component_set--preview, .component_set--inner-2-col > .component_set--preview, .component_set--inner-3-col > .component_set--preview, .component_set--inner-4-col > .component_set--preview, .component_set--inner-5-col > .component_set--preview {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
.component_set--inner-1-col > .component_set--preview {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
.component_set--inner-2-col > .component_set--preview {
  -ms-flex-preferred-size: calc(50% - 3rem);
      flex-basis: calc(50% - 3rem);
  width: calc(50% - 3rem);
}
.component_set--inner-3-col > .component_set--preview {
  -ms-flex-preferred-size: calc(33.3333333333% - 3rem);
      flex-basis: calc(33.3333333333% - 3rem);
}
.component_set--inner-4-col > .component_set--preview {
  -ms-flex-preferred-size: calc(25% - 3rem);
      flex-basis: calc(25% - 3rem);
}
.component_set--inner-5-col > .component_set--preview {
  -ms-flex-preferred-size: calc(20% - 3rem);
      flex-basis: calc(20% - 3rem);
}

.component_set--preview {
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.component_set--preview-box {
  padding: 0 2rem 1rem;
  border: 1px solid black;
}
.component_set--preview--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  padding: 1rem 0;
}

.component_set--code {
  grid-column: 1/3;
  grid-row: 2;
  padding: 1px solid black;
  margin-top: 0.8rem;
}

.copy-link-btn {
  margin-left: 1em;
  font-size: 1.6rem;
  padding: 0.25em 0 0.25em 0.75em;
  cursor: pointer;
  text-align: right;
  font-size: 1.2rem;
}

.copy-code-btn {
  margin-bottom: 0.5rem;
}

.toggle-code-btn, .copy-code-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: auto;
  text-align: left;
  font-size: 1.2rem;
  cursor: pointer;
}
.toggle-code-btn:hover, .copy-code-btn:hover {
  text-decoration: underline;
  text-decoration-color: var(--main-color);
}
.toggle-code-btn .svg-icon, .copy-code-btn .svg-icon {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-block;
  margin-left: 0.5rem;
}

.toggle-code-btn[data-active=true] {
  text-decoration: underline;
  text-decoration-color: var(--main-color);
}

pre[class*=language-],
code[class*=language-] {
  font-size: 1.4rem !important; /* Adjust font size */
  line-height: 1.6 !important; /* Adjust line height */
  overflow: scroll;
  scrollbar-color: hsl(0, 0%, 37%) transparent;
  overflow-clip-margin: 1em;
  scrollbar-width: thin;
}

.demo-link {
  background: -webkit-gradient(linear, left top, right top, color-stop(10%, var(--basic-color-text--demo-link-1)), color-stop(130%, var(--basic-color-text--demo-link-2)));
  background: linear-gradient(90deg, var(--basic-color-text--demo-link-1) 10%, var(--basic-color-text--demo-link-2) 130%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Satoshi-Regular";
}
.demo-link:hover, .demo-link:hover .content {
  text-decoration: underline;
  text-decoration-color: var(--main-color); /* or another color */
}
.demo-link.flex .svg-icon {
  position: relative;
  top: 1px;
  margin-left: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.demo-link.flex .svg-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

.link-underline {
  opacity: 0.7;
  text-decoration: underline;
}
.link-underline:hover {
  opacity: 1;
}

.demo-link--dark, .bckg--dark .demo-link {
  background: -webkit-gradient(linear, right top, left top, color-stop(-1.67%, var(--basic-color-text--demo-link-1-dark)), to(var(--basic-color-text--demo-link-2-dark)));
  background: linear-gradient(270deg, var(--basic-color-text--demo-link-1-dark) -1.67%, var(--basic-color-text--demo-link-2-dark) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.demo-link--dark:hover, .demo-link--dark:hover .content, .bckg--dark .demo-link:hover, .bckg--dark .demo-link:hover .content {
  text-decoration: underline;
  text-decoration-color: var(--main-color-dark); /* or another color */
}
.demo-link--dark svg *, .bckg--dark .demo-link svg * {
  stroke: var(--main-color-dark);
}

.grid-visualizer {
  --columns: 12;
  --gutter: 2.4rem;
  --half-gutter: calc(var(--gutter) / 2);
  --col-width: calc((100% - ((var(--columns) - 1) * var(--gutter) + 2 * var(--half-gutter))) / var(--columns));
  --pattern: calc(var(--col-width) + var(--gutter));
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(to right, rgba(198, 227, 95, 0.6) 0, rgba(198, 227, 95, 0.6) var(--col-width), transparent var(--col-width), transparent var(--pattern));
  background-position: var(--half-gutter) 0; /* pour demi-gutter au début et à la fin */
}

pre, code {
  font-family: "Fira Code", "Source Code Pro", Consolas, Monaco, monospace;
  font-size: 12px;
}
/*!*******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/swiper/swiper.css ***!
  \*******************************************************************************************************************************************************************/
/**
 * Swiper 11.1.14
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 12, 2024
 */
/* FONT_START */
@font-face {
  font-family: "swiper-icons";
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
          transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
          transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  -ms-touch-action: pan-y;
      touch-action: pan-y;
}

.swiper-vertical {
  -ms-touch-action: pan-x;
      touch-action: pan-x;
}

.swiper-slide {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

.swiper-backface-hidden .swiper-slide {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  -webkit-perspective: 1200px;
          perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.swiper-3d {
  -webkit-perspective: 1200px;
          perspective: 1200px;
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  -ms-scroll-snap-type: none;
      scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-ordinal-group: 10000;
      -ms-flex-order: 9999;
          order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
          margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
          margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  -webkit-animation: swiper-preloader-spin 1s infinite linear;
          animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@-webkit-keyframes swiper-preloader-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* Slide styles end */
/*!*************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/tippy.js/dist/tippy.css ***!
  \*************************************************************************************************************************************************************************/
.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

.tippy-box {
  position: relative;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity;
}

.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333;
}

.tippy-arrow:before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.tippy-content {
  position: relative;
  padding: 5px 9px;
  z-index: 1;
}
/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/glightbox/dist/css/glightbox.min.css ***!
  \**************************************************************************************************************************************************************************************/
.glightbox-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999 !important;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: 0;
}

.glightbox-container.inactive {
  display: none;
}

.glightbox-container .gcontainer {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: hidden;
}

.glightbox-container .gslider {
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.glightbox-container .gslide {
  width: 100%;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0;
}

.glightbox-container .gslide.current {
  opacity: 1;
  z-index: 99999;
  position: relative;
}

.glightbox-container .gslide.prev {
  opacity: 1;
  z-index: 9999;
}

.glightbox-container .gslide-inner-content {
  width: 100%;
}

.glightbox-container .ginner-container {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 100%;
  margin: auto;
  height: 100vh;
}

.glightbox-container .ginner-container.gvideo-container {
  width: 100%;
}

.glightbox-container .ginner-container.desc-bottom, .glightbox-container .ginner-container.desc-top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.glightbox-container .ginner-container.desc-left, .glightbox-container .ginner-container.desc-right {
  max-width: 100% !important;
}

.gslide iframe, .gslide video {
  outline: 0 !important;
  border: none;
  min-height: 165px;
  -webkit-overflow-scrolling: touch;
  -ms-touch-action: auto;
  touch-action: auto;
}

.gslide:not(.current) {
  pointer-events: none;
}

.gslide-image {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.gslide-image img {
  max-height: 100vh;
  display: block;
  padding: 0;
  float: none;
  outline: 0;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-width: 100vw;
  width: auto;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  -ms-touch-action: none;
  touch-action: none;
  margin: auto;
  min-width: 200px;
}

.desc-bottom .gslide-image img, .desc-top .gslide-image img {
  width: auto;
}

.desc-left .gslide-image img, .desc-right .gslide-image img {
  width: auto;
  max-width: 100%;
}

.gslide-image img.zoomable {
  position: relative;
}

.gslide-image img.dragging {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
  -webkit-transition: none;
  transition: none;
}

.gslide-video {
  position: relative;
  max-width: 100vh;
  width: 100% !important;
}

.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster {
  display: none;
}

.gslide-video .gvideo-wrapper {
  width: 100%;
  margin: auto;
}

.gslide-video::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.34);
  display: none;
}

.gslide-video.playing::before {
  display: none;
}

.gslide-video.fullscreen {
  max-width: 100% !important;
  min-width: 100%;
  height: 75vh;
}

.gslide-video.fullscreen video {
  max-width: 100% !important;
  width: 100% !important;
}

.gslide-inline {
  background: #fff;
  text-align: left;
  max-height: calc(100vh - 40px);
  overflow: auto;
  max-width: 100%;
  margin: auto;
}

.gslide-inline .ginlined-content {
  padding: 20px;
  width: 100%;
}

.gslide-inline .dragging {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
  -webkit-transition: none;
  transition: none;
}

.ginlined-content {
  overflow: auto;
  display: block !important;
  opacity: 1;
}

.gslide-external {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  min-width: 100%;
  background: #fff;
  padding: 0;
  overflow: auto;
  max-height: 75vh;
  height: 100%;
}

.gslide-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
}

.zoomed .gslide-media {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.desc-bottom .gslide-media, .desc-top .gslide-media {
  margin: 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.gslide-description {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

.gslide-description.description-left, .gslide-description.description-right {
  max-width: 100%;
}

.gslide-description.description-bottom, .gslide-description.description-top {
  margin: 0 auto;
  width: 100%;
}

.gslide-description p {
  margin-bottom: 12px;
}

.gslide-description p:last-child {
  margin-bottom: 0;
}

.zoomed .gslide-description {
  display: none;
}

.glightbox-button-hidden {
  display: none;
}

.glightbox-mobile .glightbox-container .gslide-description {
  height: auto !important;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 19px 11px;
  max-width: 100vw !important;
  -webkit-box-ordinal-group: 3 !important;
  -ms-flex-order: 2 !important;
  order: 2 !important;
  max-height: 78vh;
  overflow: auto !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.75) 100%);
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  padding-bottom: 50px;
}

.glightbox-mobile .glightbox-container .gslide-title {
  color: #fff;
  font-size: 1em;
}

.glightbox-mobile .glightbox-container .gslide-desc {
  color: #a1a1a1;
}

.glightbox-mobile .glightbox-container .gslide-desc a {
  color: #fff;
  font-weight: 700;
}

.glightbox-mobile .glightbox-container .gslide-desc * {
  color: inherit;
}

.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
  color: #fff;
  opacity: 0.4;
}

.gdesc-open .gslide-media {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 0.4;
}

.gdesc-open .gdesc-inner {
  padding-bottom: 30px;
}

.gdesc-closed .gslide-media {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 1;
}

.greset {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.gabsolute {
  position: absolute;
}

.grelative {
  position: relative;
}

.glightbox-desc {
  display: none !important;
}

.glightbox-open {
  overflow: hidden;
}

.gloader {
  height: 25px;
  width: 25px;
  -webkit-animation: lightboxLoader 0.8s infinite linear;
  animation: lightboxLoader 0.8s infinite linear;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  display: block;
  z-index: 9999;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 47%;
}

.goverlay {
  width: 100%;
  height: calc(100vh + 1px);
  position: fixed;
  top: -1px;
  left: 0;
  background: #000;
  will-change: opacity;
}

.glightbox-mobile .goverlay {
  background: #000;
}

.gclose, .gnext, .gprev {
  z-index: 99999;
  cursor: pointer;
  width: 26px;
  height: 44px;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.gclose svg, .gnext svg, .gprev svg {
  display: block;
  width: 25px;
  height: auto;
  margin: 0;
  padding: 0;
}

.gclose.disabled, .gnext.disabled, .gprev.disabled {
  opacity: 0.1;
}

.gclose .garrow, .gnext .garrow, .gprev .garrow {
  stroke: #fff;
}

.gbtn.focused {
  outline: 2px solid #0f3d81;
}

iframe.wait-autoplay {
  opacity: 0;
}

.glightbox-closing .gclose, .glightbox-closing .gnext, .glightbox-closing .gprev {
  opacity: 0 !important;
}

.glightbox-clean .gslide-description {
  background: #fff;
}

.glightbox-clean .gdesc-inner {
  padding: 22px 20px;
}

.glightbox-clean .gslide-title {
  font-size: 1em;
  font-weight: 400;
  font-family: arial;
  color: #000;
  margin-bottom: 19px;
  line-height: 1.4em;
}

.glightbox-clean .gslide-desc {
  font-size: 0.86em;
  margin-bottom: 0;
  font-family: arial;
  line-height: 1.4em;
}

.glightbox-clean .gslide-video {
  background: #000;
}

.glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
}

.glightbox-clean .gclose path, .glightbox-clean .gnext path, .glightbox-clean .gprev path {
  fill: #fff;
}

.glightbox-clean .gprev {
  position: absolute;
  top: -100%;
  left: 30px;
  width: 40px;
  height: 50px;
}

.glightbox-clean .gnext {
  position: absolute;
  top: -100%;
  right: 30px;
  width: 40px;
  height: 50px;
}

.glightbox-clean .gclose {
  width: 35px;
  height: 35px;
  top: 15px;
  right: 10px;
  position: absolute;
}

.glightbox-clean .gclose svg {
  width: 18px;
  height: auto;
}

.glightbox-clean .gclose:hover {
  opacity: 1;
}

.gfadeIn {
  -webkit-animation: gfadeIn 0.5s ease;
  animation: gfadeIn 0.5s ease;
}

.gfadeOut {
  -webkit-animation: gfadeOut 0.5s ease;
  animation: gfadeOut 0.5s ease;
}

.gslideOutLeft {
  -webkit-animation: gslideOutLeft 0.3s ease;
  animation: gslideOutLeft 0.3s ease;
}

.gslideInLeft {
  -webkit-animation: gslideInLeft 0.3s ease;
  animation: gslideInLeft 0.3s ease;
}

.gslideOutRight {
  -webkit-animation: gslideOutRight 0.3s ease;
  animation: gslideOutRight 0.3s ease;
}

.gslideInRight {
  -webkit-animation: gslideInRight 0.3s ease;
  animation: gslideInRight 0.3s ease;
}

.gzoomIn {
  -webkit-animation: gzoomIn 0.5s ease;
  animation: gzoomIn 0.5s ease;
}

.gzoomOut {
  -webkit-animation: gzoomOut 0.5s ease;
  animation: gzoomOut 0.5s ease;
}

@-webkit-keyframes lightboxLoader {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes lightboxLoader {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes gfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes gfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes gslideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
  }
  to {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes gslideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
  }
  to {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes gslideOutLeft {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes gslideOutLeft {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    visibility: hidden;
  }
}
@-webkit-keyframes gslideInRight {
  from {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes gslideInRight {
  from {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes gslideOutRight {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
}
@keyframes gslideOutRight {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes gzoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
}
@keyframes gzoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes gzoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes gzoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@media (min-width: 769px) {
  .glightbox-container .ginner-container {
    width: auto;
    height: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .glightbox-container .ginner-container.desc-top .gslide-description {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .glightbox-container .ginner-container.desc-top .gslide-image, .glightbox-container .ginner-container.desc-top .gslide-image img {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .glightbox-container .ginner-container.desc-left .gslide-description {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .glightbox-container .ginner-container.desc-left .gslide-image {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .gslide-image img {
    max-height: 97vh;
    max-width: 100%;
  }
  .gslide-image img.zoomable {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }
  .zoomed .gslide-image img.zoomable {
    cursor: -webkit-grab;
    cursor: grab;
  }
  .gslide-inline {
    max-height: 95vh;
  }
  .gslide-external {
    max-height: 100vh;
  }
  .gslide-description.description-left, .gslide-description.description-right {
    max-width: 275px;
  }
  .glightbox-open {
    height: auto;
  }
  .goverlay {
    background: rgba(0, 0, 0, 0.92);
  }
  .glightbox-clean .gslide-media {
    -webkit-box-shadow: 1px 2px 9px 0 rgba(0, 0, 0, 0.65);
    box-shadow: 1px 2px 9px 0 rgba(0, 0, 0, 0.65);
  }
  .glightbox-clean .description-left .gdesc-inner, .glightbox-clean .description-right .gdesc-inner {
    position: absolute;
    height: 100%;
    overflow-y: auto;
  }
  .glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev {
    background-color: rgba(0, 0, 0, 0.32);
  }
  .glightbox-clean .gclose:hover, .glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  .glightbox-clean .gprev {
    top: 45%;
  }
  .glightbox-clean .gnext {
    top: 45%;
  }
}
@media (min-width: 992px) {
  .glightbox-clean .gclose {
    opacity: 0.7;
    right: 20px;
  }
}
@media screen and (max-height: 420px) {
  .goverlay {
    background: #000;
  }
}