@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');
}

@-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 fadeIn {
  0% { opacity: 0 }
  100% { opacity: 1 }
}

@-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 fadeOut {
  0% { opacity: 1 }
  100% { opacity: 0 }
}

*, *::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; }
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; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
.aspect-ratio--square { padding-top: 100%; }

.home-section { width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.home-section .loader { width: 100px; height: 100px; }

.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: -webkit-box; display: -webkit-flex; display: flex; height: 100%; }
.action-section .actions { width: 100%; height: 100%; overflow: auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding-top: 16px; padding-bottom: 16px; }
.action-section .actions-wrapper { width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: 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: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: 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: -webkit-calc(33% - (24px)); 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-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: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: 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; -webkit-box-shadow: 1px 3px 15px rgb(0 0 0 / 30%); box-shadow: 1px 3px 15px rgb(0 0 0 / 30%); -webkit-transition: background-color 175ms ease; 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; }

.image-section .image-container { width: 100%; height: 100%; position: relative; overflow: hidden; }
.image-section .image-container img  { width: 100%; -webkit-user-select: none; user-select: none; pointer-events: none; }
.image-section .img-container__button { width: 72px; height: 72px; position: absolute; top: 16px; right: 16px; border-radius: 50%; background-color: #fff; -webkit-box-shadow: 1px 3px 15px rgb(0 0 0 / 30%); box-shadow: 1px 3px 15px rgb(0 0 0 / 30%); cursor: pointer; -webkit-transition: background-color 200ms ease; transition: background-color 200ms ease; }
.image-section .img-container__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; }
.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; }