:root {
    --blue-50: #F1F8FD;
    --blue-400: #41AEFF;

    --gray-900: rgba(17, 24, 39, 1);
    --green-50: #EFFDF5; 
    --green-400: #4ADE7F;
}

.maxw-520 {
    max-width: 520px;
}

.maxw-560 {
    max-width: 560px;
}

.border-lightblue {
    border: 2px solid var(--blue-200);
}

.cool-select {
    box-sizing: border-box;
    background: #FFFFFF;
    min-width: 200px;
    line-height: 42px;
    font-size: 15px;
    border: 1px solid #CCC;
    outline: none;
    margin: 0;
    padding: 0 36px 0 8px;
    font-weight: 400;
    width: 100%;
    max-width: 600px;
    appearance: none;
}

label.for-audio-file {
    box-sizing: border-box;
    display: grid;
    align-content: center;
    justify-content: center;
    background: var(--blue-50);
    border: 1px dashed var(--blue-400);
    color: var(--gray-900);
    width: 100%;
    max-width: 600px;
    min-height: 160px;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.7s;
}

button#upload-button {
    transition: opacity 0.7s;
}

.stack-layout label.for-audio-file.disabled,
button#upload-button:disabled {
    opacity: 0.2;
    cursor: inherit;
}

#upload-progressbar {
    margin-block: 0.75rem;
    width: 100%;
    height: 1.25rem;
    opacity: 0;
}

.upload-fail {
    background-color: palevioletred;
    color: white;
}

.upload-wait {
    background-color: dodgerblue;
    color: white;
}

.almost-done {
    background-color: mediumpurple;
    color: white;
}

.upload-done {
    background-color: seagreen;
    color: white;
}

a.white, a.white:hover {
    color: white;
}

a.white:hover {
    text-decoration: underline;
}

.transition-transofrm-500 {
    transition: 500ms transform;
}

label.for-audio-file.dragging, label.for-audio-file.is-valid {
    background: var(--green-50);
    border: 1px dashed var(--green-400);
}

.dragging i.fa-upload {
    transform: rotate(0.5turn);
}

.audio-swap-reqs i.fa-check {
    color: #0cba80;
}

.audio-swap i.fa-circle-info {
    font-size: 1.5rem;
    margin-right: 0.25rem;
    vertical-align: middle;
    color: var(--blue-500);
    background: var(--blue-100);
    padding: 0.25rem;
    border-radius: 6px;
}

.stack-layout {
    display: grid;
    grid-template: 1fr / 1fr;
}

.stack-layout .stack-card {
    display: flex; 
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.7s;
}

.stack-layout .stack-card.stack-card-show {
    z-index: 1;
    opacity: 1;
}