.back-button-container {
    /* padding: 0 40px; */
    display: flex;
    column-gap: 0.5em;
}

.back-button-container>* {
    cursor: pointer;
}

.back-button-container img {
    height: 25px;
}

/* dialog */

dialog {
    margin: auto;
}

#progress {
    box-sizing: content-box;
    padding: 20px;
    width: 25vw;
    height: 25vh;
}

#progress>* {
    display: grid;
    place-content: center;
    height: 100%;
}

.dialog-close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    /* width: 1.6rem; */
}

.process-finish-text,
.step {
    display: none;
}

[data-step=finish] .finish,
[data-step=count] .loading,
[data-step=process] .loading {
    display: flex;
}

[data-step=pay] #result,
#progress[data-result=ok] #ok,
#progress[data-result=aborted] #aborted,
#progress[data-result=pass] #pass {
    display: block;
}

/* #progress:not([data-result=ok]) #download,
#progress:not([data-result=ok]) #ok,
#progress:not([data-result=aborted]) #aborted,
#progress:not([data-result=pass]) #aborted, */
#progress:not([data-step=count]) .loading-text-count,
#progress:not([data-step=process]) .loading-text-process {
    display: none;
}

/* [data-step=loading] .loading,
[data-step=pay] #result,
[data-result=ok] #ok,
[data-result=abort] #abort,
[data-result=pass] #pass
{
    display: initial;
} */

.finish {
    flex-direction: column;
    row-gap: 1em;
    align-items: center;
}

#download a {
    color: blue;
}

#newPage {
    cursor: pointer;
}

#loading {
    flex-direction: column;
    row-gap: 20px;
}

dialog .ax-loading {
    width: 38px;
    height: 38px;
}

@keyframes scroll-x {
    from {
        transform: translateX(0px) rotate(90deg);
    }

    to {
        transform: translateX(calc(25vw - 14px)) rotate(90deg);
    }
}

.animation-containers {
    align-items: center;
    position: absolute;
    bottom: 20px;
}

.el-icon-scissors {
    position: absolute;
    left: 0;
    transform: rotate(90deg);
    animation: scroll-x 5s linear 1s infinite;
}

.dashed-line {
    width: calc(25vw);
    border-top: dashed 1px;
}

dialog img:not(#refreshQrcode) {
    width: 100px;
    height: 100px;
}

.qrcodeContainer {
    display: grid;
    grid-template-columns: auto 5em auto;
    grid-template-rows: auto auto;
    row-gap: 0.6rem;
}

#alipay {
    grid-column: 3 / 4;
}

#refreshQrcode {
    justify-self: center;
    align-self: center;
    width: 16px;
}

.qrcodeContainer p {
    padding: 0;
}