body {
    padding: 0;
    margin: 0
}

#app {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom)
}

.top-background {
    background-color: #000;
    height: env(safe-area-inset-top, 50px);
    width: 100%
}

.bottom-background {
    background-color: #000;
    height: env(safe-area-inset-bottom, 50px);
    width: 100%
}

.buttom-download {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    background: linear-gradient(90deg, #1e84fe -40%, #bd24ff)
}

.buttom-download .left .logo {
    float: left;
    width: 40px;
    height: 40px;
    border: 2px solid #000;
    border-radius: 5px
}

.buttom-download .left .left-title {
    float: left;
    margin-top: 2.5px;
    margin-left: 10px;
    color: hsla(0, 0%, 100%, .78)
}

.buttom-download .left .left-title>li {
    font-size: 12px
}

.buttom-download .left .left-title .title {
    font-size: 16px
}

.buttom-download .right .button {
    display: block;
    margin: 4.5px auto 4.5px;
    width: 120px;
    height: 35px;
    outline: none;
    border: 1px solid transparent
}

.buttom-download .right .btn-android {
    background: url(../icon-android.d76f9efe.png) no-repeat;
    background-size: 100% 100%
}

.buttom-download .right .btn-ios {
    background: url(../icon-ios.3d8f744e.png) no-repeat;
    background-size: 100% 100%
}

.download-btn:active,
.mask-btn:active {
    transform: translateY(4px)
}

.chat-icon {
    margin: 20px auto;
    width: 100%;
    height: 27px;
    line-height: 27px;
    text-align: center
}

.chat-icon .chat-my {
    vertical-align: top;
    color: #8a8a8a;
    font-size: 15px
}

.chat-icon .chat-icon-img {
    margin-left: 12px;
    width: 27px;
    height: 27px;
    opacity: .7;
    border-radius: 50%
}

.android-prompt {
    margin: 10px auto;
    text-align: center
}

.android-prompt>p {
    margin: 0
}

.android-prompt-t,
.android-prompt>p {
    color: hsla(0, 0%, 100%, .72);
    font-size: .8rem
}

.android-prompt-t {
    margin: 10px auto 0
}

.b-text {
    font-size: 12px;
    color: #fff;
    padding: 0 20px
}

.h5-message {
    font-size: .8rem;
    color: hsla(0, 0%, 100%, .72);
    padding: 0 20px
}

.button-container,
.h5-message {
    text-align: center
}

.button-container .download-btn {
    margin: 5px;
    padding: 8px 10px;
    width: 70%;
    outline: none;
    border: none;
    background-image: linear-gradient(270deg, #9226ff, #ff30f8);
    border-radius: 24px;
    color: #fff
}

.btn-android {
    background: url(../icon-android.d76f9efe.png) no-repeat;
    background-size: 100% 100%
}

.btn-ios {
    background: url(../icon-ios.3d8f744e.png) no-repeat;
    background-size: 100% 100%
}

.btn-android-second {
    background: url(../btn-android-second.72fbf6a2.png) no-repeat;
    background-size: 100% 100%
}

.btn-ios-second {
    background: url(../btn-ios-second.92006fe3.png) no-repeat;
    background-size: 100% 100%
}

.icon-ios {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAArCAYAAAD/lEFzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApJJREFUeNrEmDtoFEEYx/cueiIG8xIRFQQVfBEJpLFJCkFBkIAoFjYiacRKFGIhGhALFUFsAqIGiRY2HmIhKFaCIEElJsZGiQHvwERBE1+oScbfwCysw+7cbNyd+cOP4x47+79vHvt9X0EIETjQItgMIzBT68fFnM10wB34Ai9gidVVMlI50AS3xb/6DQWb6xfkEJ3V8Ag2aJ+/kjGwGSDr6SvB3RhDUmXrUTKetjMiXlPQbDtO1uvoW4KpI2nGynL69ibsrpvQl2agLE21ae9n4RwcSjtQlrtvlXr9A/fhLDybz0CFFCd6IzTDNHyK+X6r2n1vYCryeZPajfXqunF1mM57922HAahoC7cK12EH1MVctxFOwfOYRT8Lg3AaVqTZfXLQx8JO0uBlOAgn4amw1w84AcVapvbAd+FWZSglmeqCGeFH10If0YW+Bl5CQ+BeY9AFo/qRcMGToSHYBR/0I2ELDDvIr3RNQDtU4070Ax4MSR3VDUUjJaPU6tjQO1gPc3HPPpk/b/IQpXKcodDU2oyfgbYaNGUJSwM/mjSZWujJVL3J1LQnU+tMpiY9mdpdK5/6agpnTppT0RpPSoeHPERK3vu8KUd/4mkK98OxJFMPAn+6CD1yKelrqk49pZd5NPdQRW20GCmHbgV+tVPNWDGaGVy1bUDkqAG5K6OmXsM9j4Z+hZW0nkP1Jj25HagfKkl13xUPRcNnWG4qsRrgvWNT3TbFaIfDUqustx1NJXuPA0Nj0JimaSbd38h5HbWmbcTKM6sbfsJhw+8q6jR+qw5h2WXZBp2GCqmqis+R/+l57oPhyL/8CP3QqTcnIqyE46rzEq7PCbgELab7pelPhb2mkioi0zbnFqu8rab+CjAAigwE0pLveJwAAAAASUVORK5CYII=) no-repeat;
    background-size: 100% 100%
}

.icon-android,
.icon-ios {
    display: inline-block;
    margin-right: 5px;
    width: 18px;
    height: 22px;
    vertical-align: text-bottom
}

.icon-android {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAoCAYAAAB5ADPdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhZJREFUeNrsmL9LgkEYx1/tJclKCkosgihcIohqqGiqhCiooaGlsc0tcEpaWwIhqrUlyCCngvwDAiMbMhxaampwiIh+Oajo9T25t96u9339+coN7xc+8uo9532957n33lMihEgqlsEriAIX11ZvguAThPg2PvCa/CoOOk0wYwM75K+cRqYWQUYVnADuEoM4QBfwgJYyDB1whvZKzRRlAaRVne5Br6p9GGyCC/BE/usDXIFd4AMy69cEDrnYEDNa0hRlluVb0SNYZymtVCmwBU64z7f1ZtRoqqfBGzFHQaM02yV9JUFcqr9ewLlhhI7bPpAk5omWxkol6aOGHoj5yoFVLVPFylfJCWJgVGqMsmCOjfkjvqb2G2iIqhmcArdeTc2AgsY0X4Ih0M1udJWKlsIU2x02dMYIa9UUTeOtzpd6VR3sVdQbX9BnGjHU6AR/S5gHYzpTnFZdF0C+whR9ce9zGjE2EODTFzH4pbStlc1SoIr03bB9UXkKyRqsRo+SPge3pWiJbtLvNSz/PHskKiW/kr5J0FbGKnHVsMroOJ1lxPmU4BFJHI0rpgYFMtUPZGqqQyBTxTTLeLkDEYGMEX7vE0Iy2xC9AnkK05k6xsWaSMVulwSUZcoyZZmyTFmmLFMmPrpQUymBDGXAMzUVruIsZ5aOisbYecxvcB5rlGKgnf/XZQAsgZ4G1xo9gSdAlJ3ApW8BBgC47N39KZ8pSAAAAABJRU5ErkJggg==) no-repeat;
    background-size: 100% 100%
}

/* Hide all iOS download buttons globally */
.btn-ios,
.btn.ios,
.c-button .ios,
.c-button button.ios,
[class*="btn-ios"],
.buttom-download .right .btn-ios,
.buttom-download-alone .right .btn-ios,
.content-btn .btn-ios,
.icon-ios {
    display: none !important
}

/* Hide QR code scanning download elements */
.btn-code,
.show-code,
[class*="btn-code"],
[class*="show-code"],
.content-btn .btn-code,
.content-btn .show-code {
    display: none !important
}