/home/bdqbpbxa/demo-subdomains/billine.goodface.com.ua/css/styles.css
/* Homepage */

/* Homepage | Main section */

.homepage-main-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}

.homepage-main-section .homepage-main__text-box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 596px;
}

.homepage-main-section .homepage-main__text *,
.homepage-main-section .homepage-main__text {
  color: var(--shades-400);
}

.homepage-main-section .homepage-main__image {
  position: relative;

  max-width: 563px;
  margin-right: 10%;

  background-color: var(--white);
  border: 1px solid var(--shades-150);
  box-shadow: 0 16px 40px rgba(61, 62, 64, 0.04);
  -webkit-border-radius: 16px;
  border-radius: 16px;
}

.homepage-main-section .homepage-main__image:before {
  content: "";
  position: absolute;
  top: 32px;
  right: 32px;
  left: 32px;
  bottom: -24px;
  z-index: -1;

  background: linear-gradient(
    45.9deg,
    rgba(2, 104, 206, 0.5) 0%,
    #9681ff 85.18%
  );
  filter: blur(34px);
  -webkit-border-radius: 16px;
  border-radius: 16px;

  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.homepage-main-section .homepage-main__image img,
.homepage-main-section .homepage-main__image svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Homepage | Partners section */

.partners-section .partners-section__description {
  text-align: center;
  margin-bottom: 16px;
}

.partners-section .partners-section__description *,
.partners-section .partners-section__description {
  color: var(--shades-400);
}

.partners-section .partners-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 160px;
  grid-gap: 8px;
}

.partners-section .partners-section__grid li {
  border: 1px solid var(--shades-150);
  -webkit-border-radius: 16px;
  border-radius: 16px;
}

.partners-section .partners-section__grid img,
.partners-section .partners-section__grid svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: darken;
}

/* Homepage | Support section */

.support-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  padding: 48px 64px 48px 48px;

  background-color: var(--shades-150);
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
}

.support-section .support-section__image {
  width: 100%;
  max-width: 455px;
}

.support-section .support-section__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: cover;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

.support-section .support-section__text-box {
  max-width: 499px;
}

.support-section .support-section__text p:not(:first-child),
.support-section .support-section__text {
  margin-top: 24px;
}

.support-section .support-section__text *,
.support-section .support-section__text {
  color: var(--shades-400);
}

.support-section .support-section__button {
  margin-top: 32px;
}

.support-section .support-section__messangers {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 32px;
}

.support-section .support-section__messangers > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  aspect-ratio: 1 / 1;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.support-section .support-section__messangers img {
  display: block;
  height: auto;
}

.support-section .support-section__email {
  background-color: var(--shades-600);
}

.support-section .support-section__email .--mask-item {
  width: 20px;
  aspect-ratio: 1 / 1;
  background-color: var(--white);
}

.support-section .support-section__telegram {
  background: linear-gradient(0deg, #1d93d2 0%, #38b0e3 100%);
}

.support-section .support-section__telegram img {
  width: 16px;
  margin-left: -2px;
}

.support-section .support-section__viber {
  background-color: #7f4da0;
}

.support-section .support-section__viber img {
  width: 16px;
  margin-bottom: -1px;
}

.support-section .support-section__watsap {
  background-color: #25d366;
}

.support-section .support-section__watsap img {
  width: 20px;
}

.support-section .support-section__skype {
  background-color: #ffffff;
}

.support-section .support-section__skype img {
  width: 22px;
}

/* About | Feature section */

.feature-section .feature-section__title {
  text-align: center;
}

.feature-section .info-block__editor h1,
.feature-section .info-block__editor h2,
.feature-section .info-block__editor h3,
.feature-section .info-block__editor h4,
.feature-section .info-block__editor h5,
.feature-section .info-block__editor h6 {
  font-size: 48px;
  line-height: 115%;
  letter-spacing: -0.03em;
}

.feature-section .feature-section__list > *:nth-child(even) {
  flex-direction: row-reverse;
}

/* Connect | Main section */

.connect-main-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}

.connect-main-section .connect-main__title,
.connect-main-section .connect-main__subtitle {
  text-align: center;
}

.connect-main-section .connect-main__subtitle:after {
  opacity: 1;
}

.connect-main-section .connect-main__way {
  position: relative;
  width: 100%;
}

.connect-main-section .connect-main__way-img {
  position: absolute;
  left: -86px;
  top: 65px;
  z-index: -1;
  display: block;
  width: 1380px;
  height: 388px;
}

.connect-main-section .connect-main__way-img .way-img {
  display: block;
  width: 100%;
  height: 100%;
}

.connect-main-section .connect-main__way-img .way-img:not(:first-child) {
  display: none;
}

.connect-main-section .connect-main__way:after {
  content: "";
  position: absolute;
  left: 100%;
  bottom: 107px;
  height: 2px;
  width: calc(50vw - 573px);
  background-color: var(--shades-150);
}

.connect-main-section .connect-way__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 197px 86px;
  padding-right: 86px;
}

.connect-main-section .connect-way__list > *:nth-child(8) {
  display: none;
}

.connect-main-section .connect-way__item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 24px;
}

.connect-main-section .connect-way__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  aspect-ratio: 1 / 1;

  background: linear-gradient(45deg, #0268ce 0%, #9681ff 100%);
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.connect-main-section .connect-way__dot:after {
  content: "";
  display: block;
  width: 6px;
  aspect-ratio: 1 / 1;
  background: var(--white);
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.connect-main-section .connect-way__title {
  height: 72px;
}

/* Connect way animations */

@keyframes timeDot {
  0%,
  1%,
  50% {
    opacity: 1;
  }
  51%,
  99%,
  100% {
    opacity: 0;
  }
}

.connect-main-section .container:not([data-animate]) .connect-way__time span {
  animation: timeDot 2s steps(1, end) infinite;
  animation-play-state: running;
}

.connect-main__way.-not-in-viewport .connect-way__dot {
  animation-play-state: paused;
}

.connect-main-section .connect-way__item {
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
  opacity: 0;

  -webkit-transition: opacity 0.7s, transform 0.7s;
  transition: opacity 0.7s, transform 0.7s;
}

.connect-main-section .way-arrow {
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
}

.connect-main-section .-animated .way-arrow {
  opacity: 1;
}

.connect-main-section .-animated .connect-way__item {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Contacts */

.contacts-main-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 32px;
}

.contacts-main-section .contacts-main__text {
  max-width: 680px;
}

.contacts-main-section .contacts-main__text *,
.contacts-main-section .contacts-main__text {
  color: var(--shades-400);
}

.contacts-main-section .contacts-main__button .default-button__icon {
  width: 16px;
  aspect-ratio: 1 / 1;
}

.contacts-address-section .info-block .info-block__editor a *,
.contacts-address-section .info-block .info-block__editor a,
.contacts-address-section .info-block .info-block__editor p *,
.contacts-address-section .info-block .info-block__editor p {
  font-size: 19px;
  line-height: 150%;
  color: var(--shades-600);
}

.contacts-address-section .info-block .info-block__editor br {
  display: block;
}

.contacts-address-section .info-block .info-block__editor strong {
  font-weight: 700;
}

.contacts-address-section .info-block__image {
  height: 420px;
}

.contacts-address-section .info-block__image iframe {
  width: 100%;
  height: 100%;
}

/* API */

body.-api main {
  margin-top: 140px;
}

.api-section-container {
  display: grid;
  grid-template-columns: 302px 1fr;
  align-items: start;
  grid-column-gap: 48px;
}

.api-error {
  display: none;
}

/* API | Navigation */

.api-navigation {
  position: sticky;
  top: 140px;

  padding: 24px;

  max-height: 680px;
  overflow: hidden;

  border: 1px solid var(--shades-150);
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
}

.api-navigation .api-nav__button .--mask-item,
.api-navigation .api-nav__button p,
.api-navigation .api-nav__button a {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.api-navigation .api-nav__content .--accordion__content {
  padding-top: 16px;
}

.api-navigation .api-nav__content ul {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 12px;
}

.api-navigation .api-nav__nav {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.api-navigation .api-nav__content .api-nav__request {
  width: fit-content;
  padding: 3px 3px 2px;
  margin-right: 8px;

  -webkit-border-radius: 2px;
  border-radius: 2px;

  font-weight: 700;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}

.api-navigation .api-nav__content .api-nav__request.-get {
  background-color: #6bd1e6;
}

.api-navigation .api-nav__content .api-nav__request.-post {
  background-color: var(--success-500);
}

.api-navigation .api-nav__nav-link {
  margin-top: 2px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.api-navigation .api-nav__nav-link *,
.api-navigation .api-nav__nav-link {
  line-height: 100%;
}

.api-navigation [href].-active:after {
  opacity: 1;
}

.api-navigation .os-content {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  gap: 24px;
}

.api-navigation .os-content:before,
.api-navigation .os-content:after {
  display: none;
}

.api-navigation.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden
  > .os-scrollbar-vertical {
  top: 20px;
  bottom: 20px;
  right: 3px;
  width: 5px;
  padding: 1px;

  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
}

.api-navigation.os-theme-dark
  > .os-scrollbar
  > .os-scrollbar-track
  > .os-scrollbar-handle,
.api-navigation.os-theme-light
  > .os-scrollbar
  > .os-scrollbar-track
  > .os-scrollbar-handle {
  background-color: var(--shades-250);

  cursor: pointer;

  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
}

.api-navigation.os-theme-dark > .os-scrollbar > .os-scrollbar-track,
.api-navigation.os-theme-light > .os-scrollbar > .os-scrollbar-track {
  background-color: var(--shades-150);
}

/* API | Content block/container/box */

.api-content-container {
  --title-space: 72px;
  --element-space: 32px;
  --line-space: 16px;

  padding-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--shades-150);
}

.api-content-container .--margin-title-top {
  margin-top: var(--title-space);
}

.api-content-container .--margin-element-top {
  margin-top: var(--element-space);
}

.api-content-container .--margin-line-top {
  margin-top: var(--line-space);
}

.api-content-container .api-content-box {
  display: grid;
  grid-template-columns: 1fr 330px;
  align-items: start;
  grid-column-gap: 48px;
}

.api-content-container:first-child {
  padding-top: 0;
}

.api-content-container:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* API | Content */

.api-content > *:first-child {
  margin-top: 0;
}

.api-content > *:last-child {
  margin-bottom: 0;
}

.api-content code {
  padding: 3px 7px;

  border: 1px solid var(--shades-200);
  background-color: var(--shades-150);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  font-family: "Source Code Pro";
  font-size: 12px;
  line-height: 2;

  word-break: break-word;
}

/* API | Editor */

.api-editor > *:first-child {
  margin-top: 0;
}

.api-editor > *:last-child {
  margin-bottom: 0;
}

/*.api-content-box:first-child .api-editor:first-child > *:first-child {*/
/*  margin-top: 0;*/
/*}*/

/*.api-content-box:last-child .api-editor:last-child > *:last-child {*/
/*  margin-bottom: 0;*/
/*}*/

.api-editor h1,
.api-editor h2,
.api-editor h3,
.api-editor h4,
.api-editor h5,
.api-editor h6 {
  margin-top: var(--title-space);
  margin-bottom: var(--element-space);
}

.api-editor h1 *,
.api-editor h1 {
  font-weight: 700;
  font-size: 40px;
  line-height: 120%;
  letter-spacing: -0.02em;
}

.api-editor h2 *,
.api-editor h2 {
  font-weight: 700;
  font-size: 33px;
  line-height: 125%;
  letter-spacing: -0.02em;
}

.api-editor h3 *,
.api-editor h3 {
  font-weight: 500;
  font-size: 28px;
  line-height: 125%;
}

.api-editor h4 *,
.api-editor h5 *,
.api-editor h6 *,
.api-editor h4,
.api-editor h5,
.api-editor h6 {
  font-weight: 500;
  font-size: 23px;
  line-height: 135%;
}

.api-editor [id] {
  width: fit-content;
  cursor: pointer;

  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.api-editor [id] span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: normal;
}

.api-editor [id] span:after {
  content: "";
  display: block;
  width: 24px;
  min-width: 24px;
  height: 24px;

  background: url(../images/icons/link-simple.svg) no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
}

.api-editor li,
.api-editor p {
  font-size: 16px;
  line-height: 150%;
}

.api-editor a {
  text-decoration: underline;
}

.api-editor img,
.api-editor p,
.api-editor ul,
.api-editor li {
  margin-top: var(--line-space);
}

.api-editor li {
  position: relative;
  padding-left: 17px;
}

.api-editor li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;

  display: block;
  width: 5px;
  aspect-ratio: 1 / 1;

  background-color: var(--shades-600);
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.api-editor code {
  color: var(--danger-500);
}

.api-editor p em {
  font-style: italic;
}

.api-editor p strong {
  font-weight: 700;
}

.api-editor img {
  display: block;
  width: 100%;
  height: auto;
}

/* API | Accordion */

.api-accordion {
  margin-top: var(--element-space);
  margin-bottom: var(--element-space);

  overflow: hidden;
}

.api-accordion .api-accordion__button {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 16px;

  background-color: #e7f4e1;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.api-accordion .api-accordion__button p strong {
  font-weight: 700;
}

.api-accordion .api-accordion__button .--mask-item {
  width: 16px;
  min-width: 16px;
  aspect-ratio: 1 / 1;
  background-color: var(--shades-600);
  margin-left: 8px;
  margin-top: 4px;
}

.api-accordion .api-accordion__content .--accordion__content {
  padding-top: var(--element-space);
  padding-bottom: var(--element-space);
}

.api-accordion .api-accordion__content .--accordion__content .api-response {
  margin-top: 0;
  margin-bottom: 0;
}

/* API | Response */

.api-response {
  padding-left: 16px;
  padding-right: 16px;
  margin-top: var(--element-space);
  margin-bottom: var(--element-space);
}

.api-response .api-response__title {
  margin-bottom: var(--element-space);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--shades-250);

  text-transform: uppercase;
  color: var(--shades-300);
}

.api-response .api-response__title strong {
  text-transform: none;
}

.api-response .api-response__precode {
  margin-bottom: var(--line-space);
}

.api-response .api-response__subcode {
  margin-top: var(--line-space);
}

.api-response .api-response__list {
  margin-left: 32px;
}

.api-response .api-response__list li {
  display: grid;
  grid-template-columns: 166px 1fr;
  grid-column-gap: var(--line-space);
  margin-top: var(--line-space);
}

.api-response .api-response__list li:first-child {
  margin-top: 0;
}

.api-response .api-response__response-box {
  position: relative;
  padding-left: 18px;
}

.api-response .api-response__response-box:before {
  /*content: "├";*/
  content: "\251C";

  position: absolute;
  top: 0;
  left: 0;

  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.api-response .api-response__subresponse {
  color: var(--danger-500);
}

.api-response .api-response__description {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8px;

  padding-bottom: 8px;
  border-bottom: 1px solid var(--shades-250);
}

/* API | Table */

.api-table {
  margin-top: var(--element-space);
  margin-bottom: var(--element-space);
}

.api-table table {
  width: 100%;
  border-collapse: collapse;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border-style: hidden;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--shades-250); /* this draws the table border  */
}

.api-table table,
.api-table th,
.api-table td {
  border: 1px solid var(--shades-250);
}

.api-table th {
  text-align: left;
  font-weight: 700;
}

.api-table th,
.api-table td {
  padding: 5px 5px;
}

.api-table td {
  font-weight: 500;
}

.api-table td:nth-child(1),
.api-table td:nth-child(2) {
  font-family: "Source Code Pro";
}

.api-table td:nth-child(1),
.api-table td:nth-child(2),
.api-table td:nth-child(3) {
  width: 20%;
}

/* API | Additional info */

.api-addition-info > *:first-child {
  margin-top: 0;
}

/* API | Additional info | Response */

.api-info-response {
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 16px 32px rgba(61, 62, 64, 0.08);
  -webkit-border-radius: 24px;
  border-radius: 24px;
}

.api-info-response .api-info-response__button {
  padding: 16px 24px;
}

.api-info-response .api-info-response__button-text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.api-info-response .api-info-response__request {
  padding: 8px;
  margin-right: 8px;
  -webkit-border-radius: 2px;
  border-radius: 2px;

  font-weight: 700;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}

.api-info-response .api-info-response__request.-get {
  background-color: #6bd1e6;
}

.api-info-response .api-info-response__request.-post {
  background-color: var(--success-500);
}

.-apple .api-info-response .api-info-response__button-text p {
  margin-top: -2px;
}

.api-info-response .api-info-response__content .--accordion__content {
  padding: 0 24px 16px;
}

.api-info-response .api-info-response__request-link {
  word-break: break-word;
  padding: 10px 8px;
  border: 1px solid var(--shades-150);
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

/* API | Additional info | Example */

.api-info-example {
  margin-top: var(--element-space);
}

.api-info-example .api-info-example__number,
.api-info-example .api-info-example__title {
  margin-bottom: var(--line-space);
}

.api-info-example .api-info-example__number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  padding: 8px 24px;

  background: var(--shades-600);
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.api-info-example .api-info-example__code-block {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 16px;
  padding: 24px;

  background-color: var(--white);
  box-shadow: 0 16px 32px rgba(61, 62, 64, 0.08);
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
  overflow: hidden;
}

.api-info-example .api-info-example-code {
  position: relative;
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
}

.api-info-example .api-info-example-code .os-content {
  display: flex;
}

.api-info-example .api-info-example-code .os-content:after {
  width: 24px;
  min-width: 24px;
}

.api-info-example
  .api-info-example-code:not(.os-host-scrollbar-horizontal-hidden) {
  padding-bottom: 24px;
}

.api-info-example .os-theme-dark > .os-scrollbar,
.api-info-example .os-theme-light > .os-scrollbar {
  right: 24px;
  left: 24px;

  height: 12px;
  padding: 2px;

  background-color: var(--shades-50);
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
}

.api-info-example
  .os-theme-dark
  > .os-scrollbar
  > .os-scrollbar-track
  > .os-scrollbar-handle,
.api-info-example
  .os-theme-light
  > .os-scrollbar
  > .os-scrollbar-track
  > .os-scrollbar-handle,
.api-info-example .os-theme-dark > .os-scrollbar > .os-scrollbar-track,
.api-info-example .os-theme-light > .os-scrollbar > .os-scrollbar-track {
  -webkit-border-radius: 16px;
  border-radius: 16px;
}

.api-info-example
  .os-theme-dark
  > .os-scrollbar
  > .os-scrollbar-track
  > .os-scrollbar-handle {
  background-color: var(--shades-200);
  cursor: pointer;

  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
}

.api-info-example .api-info-example-code__type {
  width: 100%;
  padding: 14px 16px 13px;

  background: var(--primary-blue-50);
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.api-info-example .api-info-example-code__box {
  width: 100%;
}

.api-info-example .api-info-example-code__buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: var(--line-space);
}

.api-info-example .api-info-example-code__button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.api-info-example .api-info-example-code__button.-copied {
  pointer-events: none;
}

.api-info-example .api-info-example-code__button.-copied:after {
  -webkit-transition: 0s;
  transition: 0s;
}

/* Code style */

div.code-toolbar > .toolbar {
  display: none;
}

pre[class*="language-"] {
  margin: 0;
  padding: 0;
  overflow: visible;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background-color: transparent;
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.url,
.token.constant,
.token.deleted,
.token.property,
.token.symbol,
.token.tag,
.token.punctuation {
  color: var(--shades-600);
  background-color: transparent;
}

.token.boolean {
  color: var(--danger-500);
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
  color: var(--success-500);
}

.token a {
  color: #6bd1e6;
  text-decoration: underline;
}

.token.operator,
.token.number {
  color: var(--primary-blue-500);
  background-color: transparent;
}

code summary > span:first-child::before {
  content: "+";
  color: var(--shades-400);

  cursor: pointer;
}

code details[open] > summary > span:first-child::before {
  content: "-";
  -webkit-transform: none;
  transform: none;
}

code details:not([open]) > summary::after {
  cursor: pointer;
}

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}