@keyframes blur-in {
    from {
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    to {
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }
}

@keyframes blur-out {
    from {
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }

    to {
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
}

@keyframes horizontal-shaking {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(5px)
    }

    50% {
        transform: translateX(-5px)
    }

    75% {
        transform: translateX(5px)
    }

    100% {
        transform: translateX(0)
    }
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background: white;
}

#results-container, #results-container-audio {
    position: relative;
}

#processing-overlay {
    display: none;
    opacity: 0.5;
    background-color: black;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    z-index: 10;
    text-align: center;
    align-content: center;
}

#processing-overlay.processing {
    display: block;
}

#processing-overlay > img {
    width: 24px;
    height: 24px;
}

::placeholder {
    color: lightgray;
}

fieldset {
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: rgb(192, 192, 192);
    border-image: initial;
}

fieldset fieldset {
    width: calc(100% - 8px) !important;
}

legend {
    width: fit-content;
    margin-top: -1em;
    background: white;
    display: block;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
    unicode-bidi: isolate;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    position: absolute;
}

input#input-prompt, input#input-prompt-audio {
    width: 100%;
}

input#input-prompt[readonly], input#input-prompt-audio[readonly] {
    background: gray;
}

.shaking {
    animation-name: horizontal-shaking;
    animation-duration: 0.4s;
    animation-iteration-count: 1;
}