/* erroreille omat fontsizet */
nextjs-portal,
nextjs-portal div,
nextjs-portal span,
nextjs-portal p,
nextjs-portal h1,
nextjs-portal h2,
nextjs-portal h3,
nextjs-portal h4,
nextjs-portal h5,
nextjs-portal h6,
nextjs-portal xxx {
  font-size: 12px;
}

/* page - että ir:t toimii */
.akx-page {
  display: block !important;
}
/* optim safari repaint */
/* ei autakaan
.akx-page.akx-scrollpage {
  overflow-y: initial;
}
 */

html.fake-phone {
  font-size: 1px !important;
}
html.fake-phone .akx-page {
  width: 375px;
}
html.fake-phone .ReactModal__Overlay {
  width: 375px;
}

/* sms temp sectioiden ehkä aina pitäis olla relative ja Section-Header on prio */
[view-id="Home"] [data-figma-name="Section-Header"] {
  xxxposition: relative !important;
}

/* svg kuvat - .akx-img-normal */
/* wtf ei pääelementti voi olla näin
[data-akx-svg-imgpath],
 */
[data-akx-svg-imgpath] img {
  width: 100%;
  max-height: 100% !important;
  max-width: 100% !important;
}
.aksvgcont .akx-image-normal {
  xxxwidth: 100%; /* ei tartte */
  height: 100%; /* ilman tätä esim vastuu some napit menee scalella 0 heightiks :-o */
}
/* 0-svg ongelma, viewboxeja räplätty käsin, siks overflow */
svg {
  overflow: visible;
}

/* estää modalia avatessa että takana oleva sivu skrollaa ylös */
xxx.ReactModal__Body--open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

xxx.dialog-class {
  border: 1px solid red;
  padding: 20px;
  width: fit-content;
  height: fit-content;
  xxxdisplay: block !important;
  background-color: whitesmoke;
}
xxx.dialog-class .modal {
  /* TODO: mikä vaivaa aria dialogia ku nää tarttee... ? */
  display: initial !important;
  position: initial !important;
}


.item-enter {
}
/*, .item-appear-active - ei kuitenkaa appearilla ku välähtää eka lataus */
.item-enter-active {
  animation: akr-fade 3s ease-out;
}
.item-exit {
}
.item-exit-active {
  animation: akr-fade 3s ease-out reverse forwards;
}

@keyframes akr-fade {
  from {
    opacity: 0;
    xxx-transform: scale(0);
  }
}

/* blurhash */

.akr-blurhash {
  position: absolute !important;
  width: 100%;
  height: 100%
}
.akr-blurhash canvas {
  width: 100%;
  height: 100%
}

/* svg fill path */

.akr-svg-fill-path:not(.akr-svg-fill-path-start) {
  opacity: 0;
}
.akr-svg-fill-path-start {
  transform-box: fill-box;
  animation: akr-anim-svg-fill-path 0.5s ease-out 1s both;
}
@keyframes akr-anim-svg-fill-path {
  from {
    xtransform-origin: center center;
    xtransform: scale(0, 1);
    opacity: 0.01;
  } to {
  }
}

/* svg stroke path - lopuksi pois kun fillit animoituu sisään */

.akr-svg-tempstroke-path-start {
  opacity: 0;
  transition: opacity 0.5s 1s;
}

/* layers */

.akx-simple-layer-target {
  display: flex !important;
  align-items: center !important;
  flex-direction: column !important;
}
.akx-layer-container [data-figma-name^="Layer-"] {
  top: 0 !important;
  left: 0 !important;
}
[data-figma-name^="LayerTarget-"] {
  /* TODO: koska layereilla on zindexejä niin layertargetiin pitää luoda stacking context, mut mitähän tää tekee sectioiden välisille animeille */
  z-index: 0;
}
[data-figma-name^="LayerTarget-"]:not(.akx-simple-layer-target) {
  /*overflow: hidden;*/ /* zoomeissa tulee yli muuten, mut parempi olla containerissa ku layerissa jos layer koot muuttuu ... huom simplelayerit pitää overflowata? TODO: parempi kyllä ois että ne venyis */
}
/* TODO: vastuu ja 4h temp - zoomeissa tulee yli muuten, tän purkan takia ois parempi ehkä animoidessa merkata nää jotenkin tjsp, ainakaan kaikkia layereita ei pitäis overflow:hiddenoida kun esim tulessa pitääkin tulla yli */
[data-figma-name="LayerTarget-Haaste"], [data-figma-name="LayerTarget-Metsa"] {
  overflow: hidden;
}
.akx-parallax .akx-bgimg, .akx-parallax img, .akx-parallax svg {
  transform: none; /* hoidetaan toisin */
}
.ak-hidden-layer {
  opacity: 0 !important;
  z-index: -1 !important;
}
.ak-notshown-layer {
  opacity: 0 !important;
  z-index: -1 !important;
  transform: translateX(100vw); /* ulkona viewportista ennenku on näytetty niin visibilitysensor ei luule tän olevan näkyvissä */
}
.akx-layer {
  z-index: 0 !important;
}
.ak-current-layer {
  /*
  z-index: auto !important;
   */
  /* eiku pitää tän olla ylempi ku akx-layer eikä se ilm voi olla nega */
  z-index: 1 !important;
  opacity: 1 !important;
}

/* slider */
.akx-range .slider {
  width: 100%;
  position: absolute;
  bottom: 10rem;
  left: 0;
  z-index: 1; /* ainaki 4h:ssa jää jotenkin gruuppien taa tms */
}

/* ei tää ookaan hyvä
.ftype-text:not(.akx-onerow) span {
  white-space: pre-line;
}
 */

/* SpeedometerComponent TODO: omaan */
/* op alussa vaaka-tasossa pointtaamassa nollaan eli vasempaan */
.speedometer [data-figma-name="Indicator"] {
  z-index: 0;
}
.speedometer .speedometer-arrow {
  z-index: 1;
  transform-origin: 100% 0;
}
.speedometer [data-figma-name="SpeedoBg"] {
  z-index: 2;
}
.speedometer [data-figma-name="Value"], .speedometer [data-figma-name="Description"] {
  z-index: 3;
}

  /* */
.inputhand {
  cursor: grab;
}

/* paulig sectio fixed vittu käännetty spessu */
[data-figma-name="FixedSectionSpecialComponent"] {
  position: fixed;
  top: unset !important;
  bottom: 100rem !important;
  margin: 0 !important;
  left: 1300rem !important;
  right: unset !important;
  z-index: 9;
  pointer-events: none;
  height: 300rem !important;
  xxx-border: 1px solid red !important;
  opacity: 0; /* laitetaan compissa */
}
[data-figma-name="FixedSectionSpecialComponent"] .ftype-text {
  transform: rotate(90deg);
  width: 300rem;
  min-height: 20px;
  transform-origin: left top;
  xxx-border: 1px solid blue;
}
[data-figma-name="FixedSectionSpecialComponent"] [data-figma-name="Arrow"] {
  top: unset !important;
  bottom: -10rem !important;
  left: -15rem !important;
}
[data-figma-name="FixedSectionSpecialComponent"] [data-figma-name="Arrow"] img {
  height: 100% !important;
}

/* */
#apptemptest {
  position: fixed;
  z-index: 99;
  top: 10px;
  right: 10px;
  font-size: 12px;
  color: yellow;
  padding: 10px;
  background-color: #88888860;
}
#apptemptest a {
  border: 1px solid orange;
  margin: 5px;
}

[data-figma-name="preanimsvg"] {
  animation: crossfade-in-anim 200ms ease-out forwards;
}

/* mailchimp */
[data-figma-name="MailChimpFormComponent"] textarea {
  font-size: 12rem;
  border: none;
  padding: 5rem; /* oletus 2px ei oikein riitä eikä oo suhteessa */
  resize: none;
}

.akx-elem-bgvideo {
  position: absolute;
  top: 0;
  left: 0;
}
.akx-elem-bgvideo, .akx-elem-bgvideo video {
  width: 100%;
  max-height: 100%;
}
/* TODO: kuskus */
/*
.akx-page-bgvideo, .akx-page-bgvideo video {
  opacity: 1 !important;
}
 */

/* bottom/right padding pois koska tänne luodaan dynaamisesti elementtejä ja figmassa ne on #skip ainaki paulig */
[data-figma-name="RadioButtonGroupComponent"] {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
[data-figma-name="RadioButtonGroupComponent"].akx-hor-auto {
  width: auto !important;
  white-space: nowrap;
}

.akx-inline .ftype-text {
  display: inline-flex;
}

[data-figma-name="ParallaxContainer"] {
  overflow-y: hidden;
}
[data-figma-name="ParallaxContainer"] img { /* TODO: tää pitäis olla kaikkialla muttei uskalla koska paulig */
  width: 100%;
  max-width: unset;
}

.ak-preanim-svg {
  animation: preanim-svg-anim 500ms ease-out both
}
@keyframes preanim-svg-anim {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
  }
}

/* TODO: temp river aos morphtestin takia - aossvgmorph ota layertarget overflow hidden pois ja laita se nimenomaan zoom elementeille vastuu! */
[data-figma-name="LayerTarget-River"] {
  overflow: visible !important;
}

.akx-tooltip.admin-highlight-closest {
  transform: none !important;
}

/* .akx-page-bgvideo on general.css:ssä opa:0, ja sit sinne on lätkitty video.js:ssä .playing, jolla otettu essin, huom jos tollasta tarttee, nyt vaan video essin vellamolla */
.akx-page-bgvideo {
  opacity: 1;
}

/* tools/admin/testing/user */
.aktools {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 10px;
  padding: 10px;
  background-color: #00000040;
  z-index: 9999; /* että voi rapsaa dialogeissakin */
  font-size: 12px;
  color: black;
  opacity: 1 !important; /* TODO: joku vittu piilottaa tän */
}
.akuser {
  left: unset;
  right: 0;
}
.aktesting-comp {
}
.aktesting-comp .action {
  color: blue;
  cursor: pointer;
}
.aktesting-comp .action:hover {
  color: white;
}
.aktesting-comp .instruction {
  color: red;
}
.aktesting-hover-elem {
  outline: 1px solid red;
  box-shadow: 0 0 10rem red inset !important;
  cursor: cell;
}
/* admin siirretty muualta - TODO: eikä enää kovin admin */
.admin-highlight-elem {
  outline: 3px solid blue !important;
  box-shadow: 0 0 50rem blue !important;
  opacity: 1 !important;
  z-index: 99 !important;
}

/* AosLegacyController */
.animated {
  animation-duration: 1000ms;
}

.akx-hotspot-pulse, a[data-figma-name="HotSpot"] {
  animation: infohotspot-anim-loop 5000ms linear 0ms infinite;
}

/* getsocial - siirretty ko comppiin */
/*
html .gs-buttons.gs-flat-colors.gs-medium a[class*="gs-"] {
  padding: var(--GS11) var(--GS10) !important;
}
html .gs-buttons a[class*="gs-"]:link, html .gs-buttons a[class*="gs-"]:visited, html .gs-buttons a[class*="gs-"]:active {
  margin: 0 var(--GS10) var(--GS10) 0 !important;
}
html .gs-buttons.gs-round a[class*="gs-"] {
  border-radius: var(--GS05) !important;
}
html .gs-buttons a[class*="gs-"]:not(.gs-plus) i, html .gs-buttons a[class*="gs-"]:not(.gs-hide) i {
  margin-right: -var(--GS01) !important;
}
html .gs-buttons.gs-medium a[class*="gs-"] i {
  font-size: var(--GS17) !important;
  width: var(--GS17) !important;
  bottom: -var(--GS01) !important;
  height: var(--GS17) !important;
}
html .gs-buttons a[class*="gs-"] i {
  border-width: 0 var(--GS01) 0 0 !important;
  /* jos counter vieressä */
/*
  xxx-padding-right: var(--GS08) !important;
  /* ilman counter vieressä */
/*
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html .gs-buttons.gs-medium a[class*="gs-"] span.gs-counter {
  font-size: var(--GS14) !important;
}
/* ilman counter vieressä */
/* ei toimi ku alkuperäsessäki important
html .gs-buttons.gs-flat-colors.gs-medium.gs-no-counter a[class*="gs-"], html .gs-buttons.gs-flat-colors.gs-medium a[class*="gs-"].gs-plus, html .gs-buttons.gs-flat-colors.gs-medium a[class*="gs-"].gs-hide {
 */
/*
html .gs-buttons.gs-flat-colors.gs-medium.gs-no-counter a[class*="gs-"].gs-tracking {
  padding-left: var(--GS12) !important;
  padding-right: var(--GS11) !important;
}
 */

.ak-runtime-error {
  position: absolute;
  font-size: 14px;
  font-family: courier, serif;
  font-weight: 700;
  color: red;
  top: 0;
  left: 0;
  border: 2px solid red;
  pointer-events: none;
  z-index: 99;
  padding: 4px;
  white-space: nowrap;
}

/* TODO: temp salesconf page sectiot generoituu väärin koitetaan korjata tässä */
.akx-scpage .akx-section {
  position: relative;
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  min-height: 767rem;
}
/* TODO: lisää salesconf temppiä */
[data-figma-name="SCSectCardComponent"] {
  height: 199rem !important;
  position: relative;
  display: inline-block;
  xxx-border: 2px solid red;
  margin-top: 0 !important;
  margin-left: 0 !important;
  overflow: hidden;
}
[data-figma-name="SCSectCardComponent"] .akx-section {
  xxx-background-color: white;
  xxx-width: 100%;
  min-height: 767rem;
}

/* TODO: tuli spesifi, siirrä värit custom.css:ään? */
/* jos listasta mitä tahansa highlightattu niin oletus tekstiväri */
[data-figma-name="HighlightListComponent"].hlc-highlighted span {
  color: #BBB4B5 !important;
}
/* highlightatun tekstin väri */
[data-figma-name="HighlightListComponent"].hlc-highlighted > .hlc-highlighted span {
  color: #FEF8F9 !important;
}
/* highlightatun itemin taustaväri */
[data-figma-name="HighlightListComponent"].hlc-highlighted > .hlc-highlighted {
  background-color: #C36C83;
}

[data-figma-name="Btns"].akx-horlay-parent {
  white-space: nowrap;
}

[data-figma-name="DataItemsComponent"] {
  padding: 0 !important;
}

/* pride ainakin filtteritägit tarttee, mut näin pitäis olla ehkä muutenkin, ellei .akx-cards-parent joka taas antaa fiksatun widthin */
.akx-horlay-parent:not(.akx-cards-parent) [data-figma-name="DataItemComponent"] {
  width: auto;
}

/* TODO: pride custom.css:ään? */
.pride-partner-carousel [data-figma-name="DataItemsComponent"] {
  width: max-content;
}
/* pride tekstien valkoset taustat pitää olla samanlevysiä kun tekstit, mut tää vois olla hyvä muutenkin, ei tosin toimi ie11, mut se on dropattu */
[data-figma-name="Xutton"], [data-figma-name="Xutton"] .ftype-text {
  width: fit-content !important;
  min-width: unset;
}

.data-inline-link {
  text-decoration: underline !important;
}
.data-inline-link:hover {
  text-decoration: none !important;
}

/* .akx-horlay-parent :ssa pitää pystyä figmassa antaan tyhjää tilaa kasvua varten joka menis muuten padding-rightiksi */
.akx-horlay-parent:not([data-figma-name*="Button" i]) {
  padding-right: 0 !important;
}

/* videoelementin bg aiheuttaa helposti borderin ainakin youtube tapauksessa */
[compdef="Video"] {
  background-color: unset !important;
}

/* TODO: pride temp */
.pride-user-color {
  transform-origin: bottom right;
  animation: pride-color-anim 2s;
}
@keyframes pride-color-anim {
  from {
    /* hidas alussa kun tulee paljoon näitä
    width: 20rem;
    height: 20rem;
     */
    transform: scale(10);
  } to {}
}
[data-figma-name="KulkueKartta"] [data-figma-name^="Profiilikuva"] {
  background-color: white !important;
}

/* tuli näytetään/piilotetaan versiossa, huom versio 1 on default, appver katsotaan url paramista "appver" */
body[appver="1"] [data-hide-in-version="1"],
body[appver="2"] [data-hide-in-version="2"],
body[appver="3"] [data-hide-in-version="3"] {
  display: none !important;
}
body:not([appver="1"]) [data-show-in-version="1"],
body:not([appver="2"]) [data-show-in-version="2"],
body:not([appver="3"]) [data-show-in-version="3"] {
  display: none !important;
}

/* tuli temp koska ei jaksa säätää layout.ts asetteluja taas, ylämargin pois jostain sectiosta kun ne vinot taustakuvat menee oudosti - myös https://test--impactreports-spiceschef.netlify.app/spiceschef/Home#!_dlg=Dialog-Explore-2&_elid=akx-1093_41 */
.akx-no-mt {
  margin-top: 0 !important;
}

/* TODO: temp upm */
[data-figma-name="ScrollAdvice"] {
  animation: fadeout-scrolladvice 2s forwards;
  animation-delay: 2s;
}
@keyframes fadeout-scrolladvice {
  to {
    opacity: 0;
  }
}