@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Quicksand-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/Quicksand-Medium.ttf') format('truetype');
}

@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
  }
  @-webkit-keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
  }
  @-moz-keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
  }
  @-o-keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
  }
  
  @keyframes fadeOut {
    0% { opacity: 1 }
    100% { opacity: 0 }
  }
  @-webkit-keyframes fadeOut {
    0% { opacity: 1 }
    100% { opacity: 0 }
  }
  @-moz-keyframes fadeOut {
    0% { opacity: 1 }
    100% { opacity: 0 }
  }
  @-o-keyframes fadeOut {
    0% { opacity: 1 }
    100% { opacity: 0 }
  }

@keyframes visualizerBar {

  0%, 100% {
    height: 8px;
  }

  50% {
    height: 56px;
  }

}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; margin: 0; font-family: 'Quicksand', sans-serif; font-weight: 400; background-color: #252227; color: #252227; overflow: hidden; -webkit-tap-highlight-color: transparent; }
input, textarea, button { color: inherit; background: 0; border: 0; border-radius: 0; outline: 0; padding: 0; margin: 0; font-family: inherit; font-weight: inherit; font-size: inherit; }

.page { background-color: inherit; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; overflow: hidden; }
.page.ng-enter { z-index: 88; animation: fadeIn 375MS; -webkit-animation: fadeIn 375MS; -moz-animation: fadeIn 375MS; -o-animation: fadeIn 375MS; }
.page.ng-leave { z-index: 99; animation: fadeOut 375MS; -webkit-animation: fadeOut 375MS; -moz-animation: fadeOut 375MS; -o-animation: fadeOut 375MS; }

.fade-transition { transition: visibility 375ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 375ms cubic-bezier(0.4, 0.0, 0.2, 1); -webkit-transition: visibility 375ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 375ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: visibility 375ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 375ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: visibility 375ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 375ms cubic-bezier(0.4, 0.0, 0.2, 1); }
.default-fade-state { visibility: hidden; opacity: 0; }
.fade-in { visibility: visible; opacity: 1; }

.aspect-ratio-container { position: relative; flex: 1; }
.aspect-ratio--square { padding-top: 100%; }

.action-section { width: 100vw; height: 100vh; background-color: #F0F6F7; overflow: hidden; isolation: isolate; }
.action-section .face-container { width: 129px; height: 102px; background-color: #fff; border-radius: 8px; margin: 16px; padding: 16px; pointer-events: none; -webkit-user-select: none; user-select: none; }
.action-section .visuals { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.action-section .wave { position: absolute; }
.action-section .wave path { fill: #C5E8EE; }
.action-section .wave--top { top: -20%; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }
.action-section .wave--bottom { bottom: -10%; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.action-section .action-container { display: flex; height: 100%; }
.action-section .actions { width: 100%; height: 100%; overflow: auto; display: flex; flex-direction: column; padding-top: 16px; padding-bottom: 16px; }
.action-section .actions-wrapper { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: auto; }
.action-section .action { position: relative; cursor: pointer; border-width: 2px; border-style: solid; border-color: transparent; margin: 12px; background-color: #d0dfe2; display: flex; align-items: center; justify-content: center; padding: 24px; border-radius: 24px; overflow: hidden; font-size: 20px; font-weight: 500; -webkit-user-select: none; user-select: none; }
.action-section .action:disabled { opacity: .5; cursor: unset; }

.action-section .action--text { width: 50vw; min-height: 56px; padding: 16px 24px; }
.action-section .action--pictogram { width: calc(33% - (24px)); border-radius: 50%; padding: 1%; }
.action-section .action--pictogram .action__image { border-radius: 50%; }
.action-section .action--selected { border-color: #252227; }

/* .action-section .action--text { display: flex; align-items: center; justify-content: center; width: 50vw; min-height: 72px; background-color: #d0dfe2; border-radius: 24px; font-size: 20px; font-weight: 500; padding: 0 24px; text-align: center; -webkit-user-select: none; user-select: none; }
.action-section .action--text:disabled { background-color: rgba(255, 255, 255, .5); color: #959099; }
.action-section .action--selected { border: 2px solid #252227; }
.action-section .action--text:not(:last-child) { margin-bottom: 24px; }
.action-section .action--pictogram { width: 200px; height: 200px; background-color: #fff; border-radius: 50%; font-size: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 12px; -webkit-user-select: none; user-select: none; overflow: hidden; }
.action-section .action--pictogram:disabled, .action-section .action--image:disabled { opacity: .5; }
.action-section .action--image { width: 200px; height: 112px; margin-right: 24px; margin-bottom: 24px; border-radius: 8px; overflow: hidden; background-color: #fff; } */
.action-section .action-image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.action-section .action__image { width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.action-section .action__image-placeholder { color: #54575c; display: flex; align-items: center; justify-content: center; background-color: #b5c6c9; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; }
.action-section .repeat-question-btn { background-color: #0796b6; border-radius: 100%; width: 64px; height: 64px; cursor: pointer; font-size: 20px; font-weight: 500; padding: 16px; margin-right: 16px; margin-bottom: 16px; -webkit-user-select: none; user-select: none; box-shadow: 1px 3px 15px rgb(0 0 0 / 30%); transition: background-color 175ms ease; }
.action-section .repeat-question-btn:hover { background-color: #08b6dd; }
.action-section .repeat-question-btn:disabled { opacity: .5; }
.action-section .repeat-question-btn svg { fill: #fff; width: 100%; margin-top: -3px; }

.action-section .action-btn { border-radius: 100%; width: 64px; height: 64px; cursor: pointer; font-size: 20px; font-weight: 500; padding: 16px; margin-right: 16px; margin-bottom: 16px; -webkit-user-select: none; user-select: none; box-shadow: 1px 3px 15px rgb(0 0 0 / 30%); transition: background-color 175ms ease; }
.action-section .action-btn:disabled { opacity: .5; }
.action-section .action-btn svg { fill: #fff; width: 100%; margin-top: -3px; }

.action-section .action-btn.repeat-question-btn { background-color: #0796b6; }
.action-section .action-btn.repeat-question-btn:hover { background-color: #08b6dd; }

.action-section .action-btn.stop-interaction-btn { background-color: #cc1424; }
.action-section .action-btn.stop-interaction-btn:hover { background-color: #f52134; }

.animation-section canvas { background-color: #252227; display: none; transition: transform 750ms ease 1200ms; will-change: transform; }
.animation-section .canvas--visible { display: block; }
.animation-section .canvas--transformed { transform: scale(.5) translateX(100%); transition: transform 500ms ease; }
.animation-section .suggestion-wheel-btn { width: 72px; height: 72px; border-radius: 50%; position: absolute; left: 0; bottom: 0; background-color: #0796b6; box-shadow: 1px 3px 15px rgb(0 0 0 / 30%); transition: opacity 200ms ease, background-color 200ms ease, transform 200ms ease; will-change: opacity, transform; }
.animation-section .suggestion-wheel-btn:not(.suggestion-wheel-btn--main) { opacity: 0; }
.animation-section .suggestion-wheel-btn .suggestion-wheel-btn__icon { width: 48px; height: 48px; fill: #fff; transition: fill 200ms ease; }

.animation-section .suggestion-wheel-btn:not(.suggestion-wheel-btn--main) { pointer-events: none; }
.animation-section .suggestion-wheel--expanded .suggestion-wheel-btn:not(.suggestion-wheel-btn--main) { pointer-events: auto; }

.animation-section .suggestion-wheel { position: absolute; left: 0; bottom: 0; transform: translate(32px, 96px); opacity: 1; transition: opacity 90ms ease, transform 400ms ease; will-change: opacity, transform; }
.animation-section .suggestion-wheel--visible { transform: translate(32px, -32px); }
.animation-section .suggestion-wheel--expanded .suggestion-wheel-btn--main { transform: scale(.8); background-color: #fff; }
.animation-section .suggestion-wheel--expanded .suggestion-wheel-btn--main .suggestion-wheel-btn__icon { fill: #000; }

.animation-section .suggestion-wheel-btn--main .suggestion-wheel-btn__icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.animation-section .suggestion-wheel-btn--main .suggestion-wheel-btn--close { opacity: 0; transform: scale(0) rotate(-180deg); transition-property: fill, transform, opacity; transition-duration: 200ms; transition-timing-function: ease; will-change: opacity, transform; }
.animation-section .suggestion-wheel--expanded .suggestion-wheel-btn--close { opacity: 1; transform: scale(1) rotate(0); }
.animation-section .suggestion-wheel-btn--main .suggestion-wheel-btn--default { opacity: 1; transform: scale(1); transition-property: fill, transform, opacity; transition-duration: 200ms; transition-timing-function: ease; will-change: opacity, transform; }
.animation-section .suggestion-wheel--expanded .suggestion-wheel-btn--default { opacity: 0; transform: scale(0); }

.animation-section .suggestion-wheel-btn--action { width: 112px; height: 112px; background-color: #fff; overflow: hidden; padding: 2px; }

.animation-section .battry-status { width: 300px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); display: flex; align-items: center; padding: 8px 0; z-index: 1; transition: transform 400ms ease; will-change: transform; }
.animation-section .battry-status--visible { transform: translate(-50%, 0%); }
.animation-section .battry-status__icon { width: 38px; height: 38px; }
.animation-section .battry-status__icon path { fill: #fff; }
.animation-section .battry-status__wrapper { width: 100%; position: relative; margin: 0px 8px; }
.animation-section .battry-status__percentage { color: #fff; font-size: 16px; }
.animation-section .battry-status__track { background-color: #034959; border-radius: 8px; width: 100%; height: 8px; }
.animation-section .battry-status__filled { background-color: #08b6dd; width: 100%; height: 8px; border-radius: 5px; }

.animation-section .battry-status--medium .battry-status__track { background-color: #593b03; }
.animation-section .battry-status--medium .battry-status__filled { background-color: #dd9208; box-shadow: 0px 0px 20px 3px #dd9208; }

.animation-section .battry-status--low .battry-status__track { background-color: #941605; }
.animation-section .battry-status--low .battry-status__filled { background-color: #dd2108; box-shadow: 0px 0px 20px 3px #dd2108; }

.animation-section .daytime-btn { width: 72px; height: 72px; transform: translate(-32px, 96px); border-radius: 50%; position: absolute; right: 0; bottom: 0; background-color: #0796b6; box-shadow: 1px 3px 15px rgb(0 0 0 / 30%); transition: transform 400ms ease; will-change: transform; }
.animation-section .daytime-btn--visible { transform: translate(-32px, -32px); }
.animation-section .daytime-btn__icon { fill: #fff; width: 48px; height: 48px; }

.image-section .image-container, .audio-section .audio-container { width: 100%; height: 100%; position: relative; overflow: hidden; }
.image-section .image-container img  { width: 100%; height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; pointer-events: none; }
.image-section .image-placeholder { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #2ed3f7; background-color: #252227; }
.image-section .image-placeholder__loader { width: 10%; height: 10%; }
.image-section .img-container__button { width: 72px; height: 72px; position: absolute; top: 16px; right: 16px; border-radius: 50%; background-color: #fff; box-shadow: 1px 3px 15px rgb(0 0 0 / 30%); cursor: pointer; transition: background-color 200ms ease; }
.image-section .img-container__button:hover { background-color: #E0E0E0; }

.image-section .slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 1000ms ease; }
.image-section .slide--active { opacity: 1; }

.close-button { width: 72px; height: 72px; position: absolute; top: 16px; right: 16px; border-radius: 50%; background-color: #fff; box-shadow: 1px 3px 15px rgb(0 0 0 / 30%); cursor: pointer; transition: background-color 200ms ease; }
.close-button:hover { background-color: #E0E0E0; }

.stepper { font-size: 0;  position: relative;  margin-bottom: 16px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.stepper--hidden { display: none; }
.step { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; position: relative; border-radius: 50%; color: rgba(0, 0, 0, .48); background-color: #d0dfe2; font-size: 16px; margin: 4px; }
.step--current { background-color: #08b6dd; color: #252227; font-weight: 500; }

.visualizer__container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.visualizer { display: flex; align-items: center; justify-content: center; height: 56px; }
.visualizer__bar { width: 8px; height: 8px; background-color: #08b6dd; margin: 0 4px; border-radius: 4px; animation: visualizerBar 1.2s linear infinite; }
.visualizer__bar:nth-child(1), .visualizer__bar:nth-child(7) { animation-delay: 0s; }
.visualizer__bar:nth-child(2), .visualizer__bar:nth-child(6) { animation-delay: 0.3s; }
.visualizer__bar:nth-child(3), .visualizer__bar:nth-child(5) { animation-delay: 0.6s; }
.visualizer__bar:nth-child(4) { animation-delay: 0.9s; }