/* soundbooth style overrides */
/* global style */
:root {
    --color-default-button: #fff;
    --color-default-button-text: #000;
    --color-tc-text: hsl(0, 0%, 100%);
    --color-tc-highlight: #3e9dd0; /* #83ABBC > 3e9dd0 contrast 3.0:1*/
    --color-en-text: hsl(0, 0%, 100%);
    --color-en-highlight: #8a84fb; /* #A4A0CD > 8a84fb contrast 3.1:1*/
}
/* global padded line style */
/* source https://css-tricks.com/multi-line-padded-text/ Adam Campbell’s box-decoration-break Method */
.padded-multiline { 
    /* line-height: 1.4;  */
    /* padding: 2px 0;  */
    /* width: 400px; */
    /* margin: 20px auto; */
}
.padded-multiline .text-tc,
.padded-multiline .text-en {
    background-color: initial !important;
    padding: .25rem 0 !important;
}
.padded-multiline .text-tc span,
.padded-multiline .text-en span { 
    /* background-color: var(--color-tc-highlight); */
    /* color: var(--color-tc-text);  */
    display: inline !important;
    padding: .22em .5em;

    /* Needs prefixing */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* step 1 + 2: opening message + language selector */

.opening-message-container .question-container[aria-details="title"] {
    font-size: 72px;
}

.opening-message-container .question-container[aria-details="description"] {
    font-size: 42px;
}

.question-container-description.padded-multiline .text-tc,
.question-container-description.padded-multiline .text-en {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.opening-message-container
.opening-message-container-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
    height: 100%;
}

.opening-message-container .question-container {
    max-width: 65vw;
}

.opening-message-container .question-container[aria-details="title"] .text-tc,
.opening-message-container .text-tc span,
.langauge-selector-container .question-container .text-tc {
    background-color: var(--color-tc-highlight) !important;
    color: var(--color-tc-text) !important;
}

.opening-message-container .question-container[aria-details="title"] .text-en,
.opening-message-container .text-en span,
.langauge-selector-container .question-container .text-en {
    background-color: var(--color-en-highlight) !important;
    color: var(--color-en-text) !important;
}

.opening-message-container.enter .question-container .text-tc,
.langauge-selector-container.enter .question-container .text-tc,
.opening-message-container.enter .question-container .text-tc span,
.langauge-selector-container.enter .question-container .text-tc span {
    animation: enter .8s .4s ease forwards
}

.opening-message-container.enter .question-container .text-en,
.langauge-selector-container.enter .question-container .text-en,
.opening-message-container.enter .question-container .text-en span,
.langauge-selector-container.enter .question-container .text-en span {
    animation: enter .8s .5s ease forwards
}

/* step 3: disclaimer */

.custom-toast-message-container .custom-toast-message-wrapper .messages {
    text-wrap: balance;
    text-wrap: pretty;
}
.custom-toast-message-container .custom-toast-message-wrapper .messages {
    background-color: var(--color-tc-highlight) !important;
}
.lang-zh-tw .custom-toast-message-container .custom-toast-message-wrapper .messages {
    background-color: var(--color-tc-highlight) !important;
}
.lang-en-us .custom-toast-message-container .custom-toast-message-wrapper .messages {
    background-color: var(--color-en-highlight) !important;
}


/* step 4: question container */

.custom-question-container {
    height: unset;
    top: 50%;
    transform: translateY(-40%);
}
.custom-question-container.toast-in {
    transform: translateY(-55%);
}

.custom-question-container .custom-question-wrapper span {
    background-color: initial !important;
}
.ba-recorder-theme-minimalist-dashboard .ba-videorecorder-controlbar .ba-videorecorder-stop-container .ba-videorecorder-stop-button-container .ba-videorecorder-button-primary {
    background-color: var(--color-default-button) !important;
    color: var(--color-default-button-text) !important;
}

.emotion-buttons-container {
    position: absolute;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    /* display: none; */
    text-align: center;
    opacity: 0;
    transition: opacity 0.1s ease;
}
.emotion-buttons-container.active {
    display: block;
    pointer-events: auto;
    opacity: 1;
}

.emotion-buttons-container .emotion-button {
    opacity: 0;
}
.emotion-buttons-container.active .emotion-button {
    opacity: 1;
}

.mic-indicator-container {
    opacity: 0;
    position: fixed;
    bottom: 146px;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 99;
    width: 220px;
    height: 220px;
    pointer-events: none;
    transition: .5s ease opacity 0s;
}
.mic-indicator-container.active {
    opacity: 1;
    transition: 2s ease opacity 2s;
}

#mic-indicator {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 50%;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.8) 100%);
}


.ba-exit-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 999;
}
#change-emotion-link {
    display: block;
    appearance: none;
    border: none;
    border-radius: 1.5rem;
    /* margin: 3rem 1rem 1rem; */
    pointer-events: auto;
    font-size: 30px;
    padding: 2rem 2rem;
    background: white;
    color: black;
    opacity: 0;
    pointer-events: none;
    /* position: fixed; */
    /* top: 12px;
    right: 120px; */
}
#change-emotion-link.active {
    opacity: 1;
    pointer-events: auto;
}

.emotion-buttons-wrapper h3 {
    color: black;
    font-size: 24px;
    margin-bottom: 30px;
    text-align: left;
}

.emotion-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* display: flex;
    flex-direction: column; */
    /* display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px; */
}

.emotion-button {
    width:18vmax;
    height:18vmax;
    /* padding: .5em .5em; */
    line-height: 1;
    border-radius: 50%;
    border: none;
    font-size: 48px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    transform: translate3d(-50%, -50%, 0);
    color: black;
    position: absolute;
    /* box-shadow: 
    rgba(255,255,255,0.2) -10px -10px 30px inset, 
    rgba(0,0,0,0.1) 0px 10px 35px 0px; */
}
/* Emotion Button Styles */
.emotion-button {
    /* position: relative; */
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    /* border: 1px solid #0f0; */
}

/* Emotion Image Styles */
.emotion-image {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: block;
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
    transform: scale(1.3);
}

/* Absolutely center the span text */
.emotion-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* font-weight: bold; */
    /* color: white; */
    /* text-shadow: 0 2px 4px rgba(0,0,0,0.5); */
    z-index: 2;

    /* border: 1px solid red; */
}

/* pulse animation */
@keyframes pulse {
    0% { transform: translate3d(-50%, -50%, 0) scale(1); }
    50% { transform: translate3d(-50%, -50%, 0) scale(1.05); }
    100% { transform: translate3d(-50%, -50%, 0) scale(1); }
}

.emotion-buttons-header {
    position: fixed;
    left: 84px;
    bottom: 120px;
    /* transform: translateX(-50%); */
}

.emotion-buttons-header span {
    font-size: 40px;
    padding: .2em .5em;
    background-color: var(--color-tc-highlight) !important;
    color: var(--color-tc-text) !important;
}

.emotion-button {
    animation: pulse 5s infinite;
}



.emotion-button:hover {
    /* transform: translateY(-3px); */
}

.emotion-button[data-emotion="joy"] {
    transition: opacity 1s ease 0s;
    /* background: #FFBA45; */
    left: 40%;
    top: 20%;
    animation: pulse 5s infinite 0s;
}

.emotion-button[data-emotion="calm"] {
    transition: opacity 1s ease  .1s;
    /* background: #A4BDAC; */
    left: 15%;
    top: 45%;
    animation: pulse 5s infinite .5s;
}

.emotion-button[data-emotion="doubt"] {
    transition: opacity 1s ease .2s;
    /* background: #B39BC8; */
    left: 60%;
    top: 45%;
    animation: pulse 5s infinite 1s;
}

.emotion-button[data-emotion="anxiety"] {
    transition: opacity 1s ease .3;
    /* background: #CF7883; */
    left: 37%;
    top: 65%;
    animation: pulse 5s infinite 1.5s;
}

.emotion-button[data-emotion="sad"] {
    transition: opacity 1s ease .4s;
    /* background: #5CADD8; */
    left: 85%;
    top: 30%;
    animation: pulse 5s infinite 2s;
}

.emotion-button[data-emotion="wonder"] {
    transition: opacity 1s ease .5;
    /* background: #B777B9; */
    left: 80%;
    top: 70%;
    animation: pulse 5s infinite 2.5s;
}

.selected-emotion-name {
    display: inline-block !important;
    padding: .25em .5em !important;
    line-height: 1;
    border: none;
    font-size: 48px;
    margin-bottom: .5em;
    margin-left: 16px;
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 50% !important;
    padding: .5em 1em !important;
}

.selected-emotion-name.active {
    opacity: 1;
}

.custom-question-container .question-container {
    font-size: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.custom-question-container .custom-question-wrapper .question-what,
.custom-question-container .custom-question-wrapper .question-how,
.custom-question-container .custom-question-wrapper .question-creative {
    transition: all 1s ease;
    font-size: 36px;
    width: 24em;
    margin-top: .25em;
    margin-bottom: .25em;
    /* opacity: 0.5; */
    text-wrap: pretty;
}

.custom-question-container .custom-question-wrapper .question-what.active,
.custom-question-container .custom-question-wrapper .question-how.active,
.custom-question-container .custom-question-wrapper .question-creative.active {
    margin-top: .25em;
    margin-bottom: .25em;
    line-height: 1;
    width: 24em;
    font-size: 48px;
    opacity: 1;
}

.custom-question-container .custom-question-wrapper .question-what.hidden,
.custom-question-container .custom-question-wrapper .question-how.hidden,
.custom-question-container .custom-question-wrapper .question-creative.hidden {
    opacity: 0;
}


.custom-question-container .custom-question-wrapper .question-what.active > span span,
.custom-question-container .custom-question-wrapper .question-how.active > span span,
.custom-question-container .custom-question-wrapper .question-creative.active > span span {
    line-height: 1 !important;
    padding: .3em .5em !important;
}




.custom-question-container .custom-question-wrapper
.selected-emotion-name[data-emotion="joy"],
.selected-emotion-name[data-emotion="joy"] ~ span > span {
    border-radius: .2em;
    background-color: #FFBA45 !important;
    color: #000;
}
.selected-emotion-name[data-emotion="joy"] ~ span:not(.active) > span {
    background-color: #FFBA45AA !important;
    color: rgba(0,0,0,0.8);
}
.selected-emotion-name[data-emotion="joy"] ~ span.active > span {
    background-color: #FFBA45FF !important;
}

.custom-question-container .custom-question-wrapper
.selected-emotion-name[data-emotion="calm"],
.selected-emotion-name[data-emotion="calm"] ~ span > span {
    border-radius: .2em;
    background-color: #A4BDAC !important;
    color: #000;
}
.selected-emotion-name[data-emotion="calm"] ~ span:not(.active) > span {
    background-color: #A4BDACAA !important;
    color: rgba(0,0,0,0.8);
}
.selected-emotion-name[data-emotion="calm"] ~ span.active > span {
    background-color: #A4BDACFF !important;
}

.custom-question-container .custom-question-wrapper
.selected-emotion-name[data-emotion="doubt"],
.selected-emotion-name[data-emotion="doubt"] ~ span > span {
    border-radius: .2em;
    background-color: #B39BC8 !important;
    color: #000;
}
.selected-emotion-name[data-emotion="doubt"] ~ span:not(.active) > span {
    background-color: #B39BC8AA !important;
    color: rgba(0,0,0,0.8);
}
.selected-emotion-name[data-emotion="doubt"] ~ span.active > span {
    background-color: #B39BC8FF !important;
}

.custom-question-container .custom-question-wrapper
.selected-emotion-name[data-emotion="anxiety"],
.selected-emotion-name[data-emotion="anxiety"] ~ span > span {
    border-radius: .2em;
    background-color: #CF7883 !important;
    color: #000;
}
.selected-emotion-name[data-emotion="anxiety"] ~ span:not(.active) > span {
    background-color: #CF7883AA !important;
    color: rgba(0,0,0,0.8);
}
.selected-emotion-name[data-emotion="anxiety"] ~ span.active > span {
    background-color: #CF7883FF !important;
}

.custom-question-container .custom-question-wrapper
.selected-emotion-name[data-emotion="sad"],
.selected-emotion-name[data-emotion="sad"] ~ span > span {
    border-radius: .2em;
    background-color: #5CADD8 !important;
    color: #000;
}
.selected-emotion-name[data-emotion="sad"] ~ span:not(.active) > span {
    background-color: #5CADD8AA !important;
    color: rgba(0,0,0,0.8);
}
.selected-emotion-name[data-emotion="sad"] ~ span.active > span {
    background-color: #5CADD8FF !important;
}

.custom-question-container .custom-question-wrapper
.selected-emotion-name[data-emotion="wonder"],
.selected-emotion-name[data-emotion="wonder"] ~ span > span {
    border-radius: .2em;
    background-color: #B777B9 !important;
    color: #000;
}
.selected-emotion-name[data-emotion="wonder"] ~ span:not(.active) > span {
    background-color: #B777B9AA !important;
    color: rgba(0,0,0,0.8);
}
.selected-emotion-name[data-emotion="wonder"] ~ span.active > span {
    background-color: #B777B9FF !important;
}
.custom-question-container .custom-question-wrapper
.selected-emotion-name ~ span span span {
    /* padding: 0; */
    background-color: initial !important;
}
/* recording utility */

.ba-recorder-theme-minimalist-dashboard .ba-videorecorder-controlbar-middle-section .ba-videorecorder-timer-container .ba-videorecorder-label-container .ba-videorecorder-label {
    background-color: var(--color-default-button) !important;
    color: var(--color-default-button-text) !important;
}



/* video & ziggeo elements */

#gradient-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.9;
}

.ba-recorder-theme-minimalist.ba-videorecorder-container .ba-videorecorder-video {
    opacity: 1.0;
    /* display: none; */
}

.icon-rotate:before {
    filter: invert(1) !important;
    background-color: black !important;
    /* background-color: var(--color-default-button) !important;
    fill: var(--color-default-button-text) !important; */
}
.ba-recorder-theme-minimalist-dashboard .ba-videorecorder-controlbar .ba-videorecorder-controlbar-center-section .ba-videorecorder-primary-button-container .ba-videorecorder-button-primary {
    background-color: var(--color-default-button) !important;
    color: var(--color-default-button-text) !important;
}

.custom-question-container .custom-question-wrapper span.text-tc span, 
.custom-question-container .additional-custom-question-wrapper span.text-tc span {
    background-color: var(--color-tc-highlight) !important;
    /* color: #000 !important; */
}

.custom-question-container .custom-question-wrapper span.text-en span, 
.custom-question-container .additional-custom-question-wrapper span.text-en span {
    background-color: var(--color-en-highlight) !important;
    /* color: #000 !important; */
}

.ba-recorder-overlay {
    pointer-events: none;
    /* z-index: 99; */
}
.ba-recorder-overlay.countdown {
    z-index: 99;
}

.ba-recorder-overlay > * {
    pointer-events: auto;
}

.ba-recorder-loader-container {
    background-color: rgba(255, 255, 255, 0) !important;
    color: black !important;
}
.ba-recorder-loader-container.enlarged {
    pointer-events: auto;
}
.ba-recorder-loader-label {
    background-color: rgba(255, 255, 255, 1) !important;
    color: black !important;
    width: 180px !important;
    height: 180px !important;
    font-size: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -20px !important;
    border-radius: 100% !important;
}

#recording-progress-circle-svg {
    width: 84% !important;
    height: 84% !important;
}


/* player */
.ba-videoplayer-container .ba-videoplayer-video {
    opacity: 0 !important;
    display: none !important;
    pointer-events: none !important;
}

/* processing */

.uploading-progress-container p {
    padding: 3.25rem 5rem !important;
}

ba-videoplayer-playbutton .ba-player-rerecord-bar {
    left: unset !important;
    padding-right: 48px;
}
.ba-recorder-loader-loader {
    display: none !important;
}

.ba-videoplayer-message {
    display: none !important;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 0 !important;
}

.uploading-progress-container .progress-bar {
    background-color: #fff !important;
}
.custom-toast-message-container.processing-toast {
    /* padding-bottom: 240px !important; */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    z-index: 99 !important;
}
.custom-toast-message-container.processing-toast .messages {
    background-color: var(--color-en-highlight) !important;
}

.ba-videoplayer-overlay > :not(ba-videoplayer-playbutton),
.ba-recorder-message-container {
    display: none !important;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 0 !important;
}
ba-videoplayer-playbutton {
    /* display: none !important; */
}



.ba-videoplayer-tracks,
.ba-player-playbutton-container,
.ba-videoplayer-tracks {
    display: none;
}


/* last step */

ba-videoplayer-playbutton .ba-player-rerecord-bar .ba-player-rerecord-frontbar .ba-player-rerecord-button-container {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
}
ba-videoplayer-playbutton .ba-player-rerecord-bar .ba-player-rerecord-frontbar .ba-player-rerecord-button-container:nth-child(1),
ba-videoplayer-playbutton .ba-player-rerecord-bar .ba-player-rerecord-frontbar .ba-player-rerecord-button-container:nth-child(2) {
   margin: 0 !important;
}

ba-videoplayer-playbutton .ba-player-rerecord-bar .ba-player-rerecord-frontbar .ba-player-rerecord-button-container:nth-child(3) {
    display: none !important;
}

/* processing thank you */
.processing-thank-you-message-container h1 {
    font-size: 42px;
    text-wrap: pretty;
    max-width: 65vw;
    text-align: left;
}
.processing-thank-you-message-container h1:nth-child(1) span {
    background-color: var(--color-tc-highlight) !important;
    color: var(--color-tc-text) !important;
    padding: 0.2em 0.4em !important;
}

.processing-thank-you-message-container h1:nth-child(2) span {
    /* background-color: var(--color-en-highlight) !important;
    color: var(--color-en-text) !important; */
    
}
.processing-thank-you-message-container .text-tc span {
    padding: 0.2em 0.4em !important;
    background-color: var(--color-en-highlight) !important;
    color: var(--color-en-text) !important;
}

.lang-en-us .processing-thank-you-message-container h1:nth-child(2) span {
    max-width: 70vw;
}

/* reminder */

.timeout-reminder-container { 
    z-index: 999;
}

.timeout-reminder-container .record-reminder,
.timeout-reminder-container .submit-reminder,
.timeout-reminder-container .emotion-selection-reminder {
    display: none
}

.timeout-reminder-container .record-reminder.active,
.timeout-reminder-container .submit-reminder.active,
.timeout-reminder-container .emotion-selection-reminder.active {
    display: block
}

/* thank you */

.thank-you-message-container h1 {
    font-size: 42px;
    text-wrap: pretty;
}
.thank-you-message-container h1:nth-child(1) span {
    background-color: var(--color-tc-highlight) !important;
    color: var(--color-tc-text) !important;
}

.thank-you-message-container h1:nth-child(2) span {
    /* background-color: var(--color-en-highlight) !important;
    color: var(--color-en-text) !important; */
}
.thank-you-message-container .text-tc span {
    padding: 0.2em 0.4em !important;
    background-color: var(--color-en-highlight) !important;
    color: var(--color-en-text) !important;
}

.thank-you-page.lang-en-us .thank-you-message-container h1:nth-child(2) span {
    max-width: 70vw;
}

/* utility */
.custom-toast-message-container .custom-toast-message-wrapper p {
    font-size: 32px !important;
}
.custom-toast-message-container .custom-toast-message-wrapper .disclaimer-agreement p {
    font-size: 24px !important;
    margin-bottom: 1em !important;
}

/* disagreement flow styling */
.custom-toast-message-wrapper {
    transition: height 0.75s ease, min-height 0.75s ease;
    overflow: hidden;
}
.custom-toast-message-container.toast-out {
    opacity: 0;
    filter: blur(0px) !important;
    -webkit-filter: blur(0px) !important;
}

.disagreement-buttons {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease 0.25s;
}

.disagreement-buttons.show {
    display: block;
    opacity: 1;
}

.disagreement-message {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease 0.25s;
}

.disagreement-message.active {
    display: block;
    opacity: 1;
}

.disclaimer-agreement {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.disclaimer-agreement.fade-out {
    opacity: 0;
}

.lang-zh-tw .disagreement-message,
.lang-zh-tw .disclaimer-agreement {
    min-height: 630px !important;
}
.lang-en-us .disagreement-message,
.lang-en-us .disclaimer-agreement {
    min-height: 840px !important;
}

.buttons-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
    height: 100%;
    justify-content: space-between;
    align-items: end;
}

.button-wrapper {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.button-wrapper.fade-out {
    opacity: 0 !important;
}