/*
@import url("./global/styles/base/variables.css");
@import url("./global/styles/base/fonts.css");
@import url("./global/styles/base/colors.css");
@import url("./global/styles/base/animations.css");
@import url("./global/styles/base/error.css");

@import url("./global/styles/page-parts/header.css");
@import url("./global/styles/page-parts/main.css");
@import url("./global/styles/page-parts/footer.css");

@import url("global/components/backup/dialog/dialog.css");
@import url("global/components/backup/details/details.css");
@import url("global/components/backup/link.css");
@import url("global/components/backup/list.css");
*/
@import url(global/styles/base/page.css);
@import url(global/styles/base/fonts.css);
@import url(global/styles/base/colors.css);
@import url(global/styles/base/variables.css);
@import url(global/styles/base/animations.css);
@import url(global/styles/header.css);
@import url(global/styles/footer.css);
/*@import url(global/styles/login/login.css);*/

@import url(global/styles/components/product-card.css);
@import url(global/styles/components/total-sum-card.css);
@import url(global/styles/components/shopping-cart.css);
@import url(global/styles/components/links.css);
@import url(global/styles/components/buttons.css);
@import url(global/styles/components/navigation.css);
@import url(global/styles/components/step-box.css);
@import url(global/styles/components/page_title.css);
@import url(global/styles/components/info-banner.css);
@import url(global/styles/components/orb.css);
@import url(global/styles/components/togglebox.css);
@import url(global/styles/components/overlay.css);
@import url(global/styles/components/select.css);
@import url(global/styles/components/WEBdetails.css);

@import url(global/styles/components/debug.css);
* {
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -ms-overflow-style: none;
  /* scrollbar-width: none; */
  box-sizing: border-box;
  /* hyphens: auto; */
  touch-action: manipulation;
  font-weight: normal;
  scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
/* *::-webkit-scrollbar {
    display: none;
} */

[tabindex]:focus-visible::-webkit-slider-thumb,
[tabindex]:focus-visible {
  outline-offset: 4px;
  outline-width: 4px;
  outline-color: inherit;
  box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.5);
  opacity: 1 !important;
  outline-style: solid;
  border-radius: 1px;
}

html {
  font-family: var(--ci-font-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-s);
  color: var(--color-ci-black);
  background-color: black;
}

body {
  position: relative;
  overflow-x: hidden;
  background-color: #171717;
  transition: background 0.3s ease;
}

/*
body[data-view="prepare"] * {
  opacity: 0;
}
*/
body[data-app-bg="bg1"] { background-image: url(global/assets/backgrounds/bg1.png); }
body[data-app-bg="bg2"] { background-image: url(global/assets/backgrounds/bg2.png); }
body[data-app-bg="bg3"] { background-image: url(global/assets/backgrounds/bg3.png); }
body[data-app-bg="bg4"] { background-image: url(global/assets/backgrounds/bg4.png); }
body[data-app-bg="bg5"] { background-image: url(global/assets/backgrounds/bg5.png); }

body[data-app-bg="#626162"] {
  background-image: none;
  background-color: #626162;
}
body[data-app-bg="#018452"] {
  background-image: none;
  background-color: #018452;
}
body[data-app-bg="#3E0290"] {
  background-image: none;
  background-color: #3E0290;
}
body[data-app-bg="#016589"] {
  background-image: none;
  background-color: #016589;
}

h1, h2, h3, h4 {
  font-family: var(--ci-font-light);
  font-weight: normal;
  line-height: 1.15;
  margin: 0 0 24px 0;
}

h2 {
  font-size: var(--font-size-xl);
  line-height: var(--font-line-xl);
}

h3 {
  font-family: var(--ci-font-bold);
  font-size: var(--font-size-m);
  line-height: var(--font-line-m);
}

p {
  margin: 0;
}

strong {
  font-family: var(--ci-font-bold);
  font-weight: normal;
}

a {
  text-decoration: none;
  color: inherit;
}

hr {
  margin: 16px 0;
  border: 1px solid black;
}

[id] {
  scroll-margin-top: calc(var(--header-height) + var(--edge-distance));
}

video {
  width: 100%;
}


.hidden,
.is-hidden {
  display: none;
}

.visible-on-mobile {
  display: none;
}

/****************
  MEDIA QUERIES
*****************/
@media only screen and (max-width: 959px) {}

@media only screen and (max-width: 768px) {
  .visible-on-desktop {
    display: none;
  }

  .visible-on-mobile {
    display: block;
  }
}


/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) and (min-width: 500px) {}

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {}

/*REWORK*/

html, body {
  height: 100dvh;
  overflow-x: hidden;
}

html {
  overscroll-behavior-y: none; /* Only disables vertical pull-to-refresh */
}


body {
  /*background-image: url(global/assets/backgrounds/bg1.png);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  margin: 0;
  padding: 0;
  min-height: inherit;
}


.bold {
  font-family: "Roboto Condensed Bold", sans-serif;
}

td {
  font-family: "Roboto Light", sans-serif;
}


/*
button,
div, p {
  transition: all .8s ease;
}
*/

button[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.inactive {
  opacity: 0.3;
  pointer-events: none;
}
button.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.margin-top-24 {
  margin-top: 24px;
}

.info {
  margin-top: 24px;
}

button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  transform: translate(-50%, -50%);
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (min-width: 960px) {
html {
  font-size: 20px;
  line-height: 24px;
}

}

[data-view="home"] .header,
[data-view="products"] .header,
[data-view="invitations"] .header,
[data-view="settings"] .header,
[data-view="results"] .header,
[data-view="shop"] .header {
  transform: translateY(0);
}

[data-view="home"] footer,
[data-view="products"] footer,
[data-view="invitations"] footer,
[data-view="settings"] footer,
[data-view="results"] footer,
[data-view="shop"] footer {
  transform: translateY(0);
}
.container * {
  opacity: 1;
}
[data-view="prepare"] .container * {
  opacity: 0;

}
.container .togglebox__container,
.container .togglebox__container + .action-container {
  transition: transform 0.3s ease;
}
[data-view="prepare"] .container .togglebox__container {
  transform: translateY(20%);
}
[data-view="prepare"] .container .togglebox__container + .action-container {
  transform: translateY(40%);
}
.container .page-title {
  scale: 1;
  transition: scale 0.3s ease;
}
[data-view="prepare"] .container .page-title {
  scale: 0.8;

}

[data-tutorial-visible] {
  display: none;

}
[data-tutorial] [data-tutorial-hidden] {
  display: none;
  pointer-events: none;
}

[data-tutorial] [data-tutorial-invisible] {
  opacity: 0;
  pointer-events: none;
}

[data-tutorial] [data-tutorial-visible] {
  display: block;
}