MibooGram/resources/zzz/agent_detail/css/style.css

.hyv-login-platform__loading {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    z-index: 100001;
    background: rgba(0, 0, 0, 0)
}

@-webkit-keyframes rotation {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

.hyv-login-platform__loading--rotation {
    width: 80px;
    height: 80px;
    background: #2b2e33;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.hyv-login-platform__loading--rotation div {
    border: none;
    width: 46px;
    height: 46px;
    background-size: 46px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAArdSURBVHgB7V1ZzCVFFf7+6zgjA8IMwqgMyIBGVHBDxRWFKIsbMcZlJMblDYgPaqJoolEfjMFEEzURE33iyahxxeXBKEZFE0UGBsQohHFQZphhcHA2HOG/fB9dxa1bt6q7qm/3XftLTk7f7v7vraqvzzlVp6rrBzp06NChQ4cOHTp06NChQ4cOs4MVzAH6/f6xVC+gPI3yTKMlKv/TjbZyiLLb0ZK/UO5cWVk5gBnHTBJiCHi+kVehaHyhh0GZ7XFMQveInJspv6HcNIsEzRQhJOIcqstQWINIUfl65rI9XskU9+/9c9dTbiAxN2BGMHVCSMJ6qrcaOQ7VDdtDdYO716qsRrKL8g3Kn0nOvZgipkaIIeItRo4zp3OsIUZQiKhewvdYYn5EUq7FlDAVQkjGBVTvpGxC+ZMNDDc8MNy47jEC51JIdf/WtZivk5gfYsKYKCEk4mSqKylno7yhqhowZCFANRlVnQLf/f2K8gUS829MCBMjhGRcSvUODNxT6pPbi1zzXZK9tyrWlN2DwO+oJyZSvo8JoHVCTKx4O+WNwEhwtWXoBa6VWUaKFZTdEzqPknuF60jK59EyWiWEZJxE9RHK6c7vhVxDnUbtZV6rikExUtxy3kG5isT8Cy2hNUIMGZ+knOz8VsgSgDQyDlO2U/ZQ7qbcRTnIxrnP+12N3DWQlGt8NuUllLMoxyf8Rsx1uZ8VTy5vi5RWCDFkfAIFGX4FYy7LnnOPj1B+TLmNDbAd45VJxFxAuZCyGdU9sJDbckl5TxukNE6IIeNqykmIP3F9lPv22ynfYYVvQwtgGV9KdQXlPFTHslDZLSlbmyalUUIMGR9HQYb9/piPDl2Xj/4uK3k7JgCW9xQUD88bkG8lEpEhUu5BQ2iakM9QnYbySoTkfsq1rNhfMQWw3G+j+hCKsgPphAgq87tY9v+iAfTQEFipd1Od6p4y4n+2smr0zyhXT4sMwYzI30+xY41UMqSVEP0oGkIjFkIyXkn1Qe87/R6K1VYUsH/AxvgFZgisyweoPoVqC4enP8u6fBNjYmxCWIGnoKjAeuc7/QL7cUNkaPS7EzMI1ul5KLK/1v0C1ZYil3XRuPGkCZeldMiTMOqSfHe1ao73Uj49q2QIxn1ejqIn9dgpjD5cvpxA+QrGxFiE8El6BdULESYAGI4Xgsi4hhW+HzMO053diiKX5XZ7gbCl6Nqr2SZbMQbGtZA3Idz4PhH2+tfmgQwLh5SDSAv0ko+RlONRE7UJ4Y8qWXgiwq4qJN9usr8+KZgx0ZdR3YW3156BYtBZC7UIMYH85QhbRchKbmTFfok5Bcv+LSpJKDH5+G2OvoJtdAJqoK6FPIuyEcOxwyUCzrFc1E8w//gSRRbux41QZllk1LKSuoRcgqLBbaO7RADD1nI9n7B9mHOYkfiHEXZToaz1laiBbELMUp2N7ilH++7qFlbkj1gQsC43Uqk+sTjiWskGttVrkIk6FiJCQjEDGA3k38Pi4YsIu6zQuauQiSxCyPgxVEpdh8jwA/k/+EQ9gAUD6/R7qj9gNKCHstjn5wb3XAvRutqYZej4EQyI+TkWF9cgbiGuyLWfjwzkEnK20T4pfu9qH5+kO7GgYN1+h+ERfNnYpFVCzsBo/Ajlr8aabp0TaHVjFSFq38syvjOdEPpCJRA3oJwMay2tTL3OGGQl7hgkNB4RtuTEkRwL0WoO1wr8IG6PD9Ok78KCg3X8LYqUe4rbem3q9+YQciaqrUN6qqvHJwzXSmCOn2Ck58iWxO/DGqTDpkqA4VG5hQolUhbeOhz8EwMyLBFud9j2PF+EROQQIj9ol8D4aRJgUJBdWB7ciqLelgwf1kJORyJyCHFnBS1ClnIEywMREiPDxZlIRA4hmnTpl1y31/6D5cF+pMXhjUhETlBfh/IxiNBn72M/lgSsqxtDyqBE45aE+7IsxKKfeb5DgaQHNcdC+omybPhcwj3bUj1HLiGhtHtskmpZ8FVUP/3Jy4NyCLHB2h8IwtXEBiwXHqS8nrIjcl0vLF2HROTEEEvCinfOt4p1WBLw4bNjEHV/L0KRInkfCovZicIydiAt8D+G5Bv54+9FMcCp6vr+lP7yViwBDCFPDF3yPq+yTR5BAnJc1n6EB4Z+QN+E5YFNlbgzhUA8yViJHJeld/lCBPiplCdjeWCTiDalBAzaw+qs3mcOIQpeq965kMWchuWBv1jOh72WTEiOy9rpfHmZrKNvXXhSWEdrHf6kVOhz84QwKD2E4TgSmw+RPhWLDwVzf+lPaOWJ2q4VCxH+jvi0rXvuxVh8iBBLguCvZLSSTAaQT8g9CI/YfYLW0qQX1kpYN8VedzIq1LuySOruWtQhRK4rNFL35TwsLo4x2reG0Bqt9gihL/wfRoN7bBnpZj5Jm7FgYJ3UZq67ilmH9MM58QOot7ZXm0j6OayQC9O5l2HxoD1UYr0qYNhq/o9MZBNiXvOS2/KzvCE5xeyWsBAwa9MkKwmiybqHkYk6FiLc7H32e1yuG7uQFZn7hKMZd/ibrwHDS4Bcy3kINVCXkG0YWIlvIcAwOarEuZh/KCWk3lUsiMM5Vr2z3RVQkxAT3EWKnzax2ifnHPOiz1yCZddDZfcRdru0sQTiUbbRKmqgroUIt6BYSumP0mODxnPNy6JzBZZZPSq7aiTWq3ItRbHjMGqiNiHGSv6EcILRfz9dInO/1DxtcwEzAHR3xHPjRSzVXpsM+8W1QVL+hmL7Cd8agLDlrKVcMg+kGDK0VaDK7FpBaMW7xVGT86uNsQgx+DVF1hLr+lpYYkTGxaxw8uKxScP0CpX6sbOBobjhHtvPY2/uPzYh5j8M3ITRoO6P4OF8VoB8Myt+FmYM5kFx92QE4r0p9/hA6jRtGVbQEMxGNOpJlfW2QqP5uynbWZlDmCJMSkRbE24AKnN1/jntjvogGkCThMjXajOaE+0pR1eJNnfRzqM7MAWYzZ71QtIahGOgXxdg4AGO+lvVjoPGCBFMsBYpckl+xeyx/6S5lVYHYds43cYa5ZVVrK8ol0+Kva7UyJ46KZIYGiVEMJXUTkHrMRi1xkw9tDeKRPtq3dHWVk6mjE81ZYw9LDFi7L0iYXeTZAiNEyKYCms/FN9SfDLgHfubECiu6AWg3ePul8IyKfWhcmlc4c7khQa1ofK6IhJ2NU2G0AohgiHlYgzcAVDtEmKBXziKYk5fxKhnp1zREb/fbzKyavBjjaw1eg3CubdUsWUWCfe2QYbQGiGCIeV1GPRcgFF3FSLI/xxyc25WOfZGcOy4jPgyQkT+rrbIEFolxMLsu64xR+7TGCIiREy/4t4QOUCY0Fh5tG/LA3WThqmYCCECSTkDxX8qsK7DVtRvMPdc7CkH4u4n1vD9jN+CozXY20siJvKq3sQIEcz/J9QSIc0i5riLMnKq7su55pItaHwkF1VrbqMOJkqIhXnfTpsVa/WG2xB1GzHVUkJWhsDfqQOxp6nRdw6mQogFiXkuilccXGJ8gkLuBqgmK3YeGJ1mtqJgrbHPvibyUnUwVUIEk7bQaPk5GKx3io2SqwJ9FWmI/J0lYu+0iLCYOiEunH9XpNR3rosqIy5ElEjQeOY+knAQM4KZIsTCTJtquneT0XbVSiwepJAh0ThCvSVNPR+YtjWEMJOE+DCzd9pJQnMVdm2UzokoLc9xyTiCQeNLDhl9oM0BXYcOHTp06NChQ4cOHTp06NBhEfEomGUtRQ40rPMAAAAASUVORK5CYII=);
    animation: rotation 1s linear infinite
}

.hyv-login-platform__overflow-hidden {
    overflow: hidden
}

.mhy-init-user-dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    line-height: 1.5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10000;
    background-color: rgba(0, 0, 0, .5)
}

.mhy-init-user-dialog .mhy-init-user-dialog-scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 600px
}

.mhy-init-user-dialog .mhy-init-user-dialog-content {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    border-radius: 16px;
    background-color: #fff
}

.mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
    position: relative;
    height: 20px
}

.mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header .close-btn {
    position: absolute;
    width: 20px;
    height: 20px;
    padding: 0;
    top: 0;
    right: 0;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    cursor: pointer
}

.mhy-init-user-dialog.is-dark-theme {
    background-color: rgba(255, 255, 255, .5)
}

.mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content {
    background-color: #1b1d2a
}

.mhy-init-user-button {
    display: inline-block;
    cursor: pointer;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mhy-init-user-button.mhy-init-user-button-primary {
    background-color: #e1e7ff;
    color: #657ef8
}

.mhy-init-user-button.mhy-init-user-button-primary:hover {
    background-color: #657ef8;
    color: #fff
}

.mhy-init-user-button.mhy-init-user-button--disabled {
    background-color: #dde3ec;
    color: rgba(0, 0, 0, .25)
}

.mhy-init-user-button.mhy-init-user-button--disabled:hover {
    background-color: #dde3ec;
    color: rgba(0, 0, 0, .25)
}

.mhy-init-user-button__button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    border: none;
    font-size: inherit;
    color: inherit;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 15px;
    font-weight: inherit;
    line-height: inherit;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: background-color, color;
    -o-transition-property: background-color, color;
    transition-property: background-color, color
}

.mhy-init-user-button-primary .mhy-init-user-button__button {
    font-weight: bold
}

.is-dark-theme .mhy-init-user-button.mhy-init-user-button-primary {
    background-color: #363f7e;
    color: #657ef8
}

.is-dark-theme .mhy-init-user-button.mhy-init-user-button--disabled {
    background-color: #40434c;
    color: rgba(255, 255, 255, .25)
}

.is-dark-theme .mhy-init-user-button.mhy-init-user-button--disabled:hover {
    background-color: #40434c;
    color: rgba(255, 255, 255, .25)
}

.mhy-init-user-input {
    font-size: 14px;
    position: relative;
    line-height: 20px
}

.mhy-init-user-input__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 8px;
    position: relative;
    height: 100%;
    border: 1px solid #f1f4f9
}

.mhy-init-user-input__container--focus {
    border-color: #657ef8
}

.mhy-init-user-input__container input {
    height: 100%;
    border: none;
    border-style: none;
    outline: none
}

.mhy-init-user-input__container input, .mhy-init-user-input__container textarea {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    z-index: 2;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    font-size: inherit
}

.mhy-init-user-input__container input::-webkit-input-placeholder, .mhy-init-user-input__container textarea::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .45)
}

.mhy-init-user-input__container input::-moz-placeholder, .mhy-init-user-input__container textarea::-moz-placeholder {
    color: rgba(0, 0, 0, .45)
}

.mhy-init-user-input__container input:-ms-input-placeholder, .mhy-init-user-input__container textarea:-ms-input-placeholder {
    color: rgba(0, 0, 0, .45)
}

.mhy-init-user-input__container input::-ms-input-placeholder, .mhy-init-user-input__container textarea::-ms-input-placeholder {
    color: rgba(0, 0, 0, .45)
}

.mhy-init-user-input__container input::placeholder, .mhy-init-user-input__container textarea::placeholder {
    color: rgba(0, 0, 0, .45)
}

.mhy-init-user-input__container textarea {
    resize: none
}

.mhy-init-user-input__maxtip {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    pointer-events: none;
    line-height: 16px;
    z-index: 1
}

.is-dark-theme .mhy-init-user-input__container {
    border: 1px solid #343746
}

.is-dark-theme .mhy-init-user-input__container input::-webkit-input-placeholder, .is-dark-theme .mhy-init-user-input__container textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .45)
}

.is-dark-theme .mhy-init-user-input__container input::-moz-placeholder, .is-dark-theme .mhy-init-user-input__container textarea::-moz-placeholder {
    color: rgba(255, 255, 255, .45)
}

.is-dark-theme .mhy-init-user-input__container input:-ms-input-placeholder, .is-dark-theme .mhy-init-user-input__container textarea:-ms-input-placeholder {
    color: rgba(255, 255, 255, .45)
}

.is-dark-theme .mhy-init-user-input__container input::-ms-input-placeholder, .is-dark-theme .mhy-init-user-input__container textarea::-ms-input-placeholder {
    color: rgba(255, 255, 255, .45)
}

.is-dark-theme .mhy-init-user-input__container input::placeholder, .is-dark-theme .mhy-init-user-input__container textarea::placeholder {
    color: rgba(255, 255, 255, .45)
}

body .mhy-init-user-dialog {
    z-index: 9999
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content {
    padding: 0;
    width: 450px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
    padding: 24px 52px 0
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header .close-btn {
    top: 12px;
    right: 12px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-bg1 {
    position: absolute;
    top: 186px;
    right: 0;
    width: 100px;
    height: 106px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-bg2 {
    position: absolute;
    top: 26px;
    left: 0;
    width: 122px;
    height: 270px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-bg3 {
    position: absolute;
    top: 0;
    right: 55px;
    width: 120px;
    height: 64px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-mino {
    position: absolute;
    top: -110px;
    left: 0;
    width: 100%;
    height: 110px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-mino img {
    width: 100%;
    height: 100%
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info {
    padding: 0 24px 24px;
    border-radius: 8px;
    position: relative
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user__title {
    margin-top: 6px;
    padding: 4px 0 8px 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    text-align: center
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .nickname-tip {
    margin-bottom: 32px;
    font-size: 14px;
    color: rgba(0, 0, 0, .45);
    text-align: center;
    white-space: pre-wrap;
    line-height: 20px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container {
    text-align: center
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img-container {
    position: relative;
    margin: auto;
    display: inline-block
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 30px;
    border: 1px solid #fff;
    background-color: #fff
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img-bg img {
    width: 18px;
    height: 18px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img {
    width: 112px;
    height: 112px;
    vertical-align: top;
    border-radius: 100%;
    border: 3px solid #f1f4f9;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input {
    margin: 32px 0 0
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input .mhy-init-user-input__container {
    padding: 9px 12px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input .mhy-init-user-input__container span, body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input .mhy-init-user-input__container input {
    height: 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 0, 0, .45)
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .submit-btn {
    margin: 0 auto;
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    border-radius: 22px;
    cursor: pointer
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .submit-btn span {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-top: 12px;
    line-height: 20px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    color: rgba(0, 0, 0, .45);
    word-break: break-word
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .mhy-init-user-checkbox {
    margin-right: 8px
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .mhy-init-user-checkbox.mhy-init-user-checkbox--checked .mhy-init-user-checkbox__icon {
    border: none;
    background-color: #657ef8
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border-color: #b2bdce
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon img {
    margin-top: 2px;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    color: #fff
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .agreement-content {
    display: inline-block;
    display: -webkit-box;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 20px;
    font-size: 14px;
    max-height: 60px;
    word-wrap: break-word;
    word-break: break-word;
    color: rgba(0, 0, 0, .45)
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .agreement-content a {
    color: #657ef8;
    text-decoration: none
}

body .mhy-init-user-dialog .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-nickname-tips {
    margin: 8px 0 32px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, .25)
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
    position: relative;
    z-index: 10
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header img {
    top: 16px;
    left: 16px;
    width: 16px;
    height: 16px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile {
    width: 100%;
    height: 100%
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-bg1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 168px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-bg2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 88px;
    height: 292px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-bg3 {
    position: absolute;
    top: 0;
    right: 0;
    width: 130px;
    height: 140px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-animation {
    position: relative;
    width: 100%;
    height: 100%
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-animation .mhy-init-user-svga-container {
    margin: 40% auto 0;
    width: 240px;
    height: 240px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content {
    position: relative;
    margin-top: 70px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user__title {
    position: relative;
    margin: 0 auto;
    width: 310px;
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
    color: rgba(0, 0, 0, .85)
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user__title span {
    display: inline-block;
    position: relative;
    z-index: 100
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user__title .mhy-init-user-line {
    position: absolute;
    left: calc(50% - 38px);
    bottom: 0;
    width: 76px;
    height: 10px;
    z-index: 1
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .nickname-tip {
    margin: 16px auto 0;
    width: 310px;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    color: rgba(0, 0, 0, .85)
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container {
    position: relative;
    margin: 40px auto 0;
    width: 82px;
    height: 82px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 41px;
    border: 1px solid #f1f4f9
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img-bg {
    position: absolute;
    bottom: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    border: 1px solid #fff;
    background-color: #f5f6fb
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img-bg img {
    width: 16px;
    height: 16px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input {
    position: relative;
    margin: 16px auto 0;
    padding: 9px 9px 9px 11px;
    width: 288px;
    border-radius: 8px;
    border: 1px solid #f5f6fb
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input .mhy-init-user-input__container {
    border: none
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input .mhy-init-user-input__container::after {
    border: none
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input span {
    color: rgba(0, 0, 0, .25)
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input input {
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-nickname-tips {
    margin: 8px auto 40px;
    width: 310px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    font-weight: 400;
    color: rgba(0, 0, 0, .45)
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .submit-btn {
    position: relative;
    margin: 40px auto 0;
    display: block;
    width: 310px;
    height: 46px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 23px;
    cursor: none
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .submit-btn button {
    cursor: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .submit-btn.mhy-init-user-button--disabled {
    color: rgba(0, 0, 0, .25);
    background-color: #f1f4f9;
    cursor: none
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 40px auto 32px;
    width: 310px;
    line-height: 20px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    color: rgba(0, 0, 0, .45);
    word-break: break-word
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox {
    margin-right: 8px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox.mhy-init-user-checkbox--checked .mhy-init-user-checkbox__icon {
    border: none;
    background-color: #657ef8
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border-color: rgba(0, 0, 0, .45)
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon img {
    margin-top: 2px;
    width: 10px;
    height: 10px;
    vertical-align: middle
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon .icon-unchecked {
    font-size: 20px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .agreement-content {
    display: inline-block;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 20px;
    font-size: 14px;
    max-height: 60px;
    word-wrap: break-word;
    word-break: break-word;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px
}

body .mhy-init-user-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .agreement-content a {
    color: #657ef8;
    text-decoration: none
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-dialog-header .icon-dialog_close {
    color: #cecfd1
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user__title {
    color: rgba(255, 255, 255, .85)
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .nickname-tip {
    color: rgba(255, 255, 255, .45)
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img-bg {
    border: 1px solid #1b1d2a;
    background-color: #242734
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .avatar-container .avatar-img {
    border: 3px solid #343746
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input {
    margin: 32px 0 0;
    font-size: 14px;
    position: relative;
    line-height: 20px
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input .mhy-init-user-input__container span, body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-form-input .mhy-init-user-input__container input {
    color: rgba(255, 255, 255, .45)
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .mhy-init-user-nickname-tips {
    color: rgba(255, 255, 255, .25)
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement {
    color: rgba(255, 255, 255, .45)
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon {
    border-color: #5c5f6b
}

body .mhy-init-user-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-pc .mhy-init-user-init-user-info .agreement .agreement-content {
    color: rgba(255, 255, 255, .45)
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content {
    background-color: #0c0f1d
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header img {
    width: 14px;
    height: 14px
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user__title {
    color: rgba(255, 255, 255, .85)
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .nickname-tip {
    color: rgba(255, 255, 255, .85)
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img {
    border: 1px solid #343746
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img-bg {
    border: 1px solid #1b1d2a;
    background-color: #0c0f1d
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .avatar-container .avatar-img-bg img {
    color: #cecfd1;
    width: 16px;
    height: 16px
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input {
    border: 1px solid #0c0f1d;
    background-color: #1b1d2a
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input span {
    color: rgba(255, 255, 255, .25)
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-form-input input {
    color: rgba(255, 255, 255, .65)
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .mhy-init-user-nickname-tips {
    color: rgba(255, 255, 255, .45)
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .submit-btn.mhy-init-user-button--disabled {
    color: rgba(255, 255, 255, .25);
    background-color: #343746
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement {
    color: rgba(255, 255, 255, .45)
}

body .mhy-init-user-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-mobile .mhy-init-user-content .agreement .mhy-init-user-checkbox .mhy-init-user-checkbox__icon {
    color: rgba(255, 255, 255, .45);
    border-color: rgba(255, 255, 255, .45)
}

@media screen and (max-height: 600px) {
    .is-mobile .mhy-init-user-mobile {
        margin-bottom: 150px
    }

    .is-mobile .mhy-account-flow-avatar-list {
        margin-bottom: 150px
    }

    .is-mobile .mhy-init-user-dialog-content {
        overflow: scroll !important
    }
}

body .mhy-avatar-list-dialog {
    z-index: 10000
}

body .mhy-avatar-list-dialog .mhy-init-user-dialog-content {
    min-width: 608px;
    overflow: hidden
}

body .mhy-avatar-list-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
    padding: 10px 16px;
    height: auto;
    border-bottom: 1px solid #f6f9fb
}

body .mhy-avatar-list-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header .mhy-init-user-dialog-title {
    text-align: left;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    color: #2f3f56
}

body .mhy-avatar-list-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-header .close-btn {
    top: calc(50% - 10px);
    right: 16px
}

body .mhy-avatar-list-dialog .mhy-init-user-dialog-content .mhy-init-user-dialog-body {
    padding: 0;
    max-height: 640px;
    overflow: hidden
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list {
    max-height: 640px;
    padding: 0;
    background-color: #fff
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .title {
    text-align: center;
    margin-bottom: 10px
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-container {
    margin: 32px 0;
    text-align: center
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-container .avatar-img {
    width: 112px;
    height: 112px;
    vertical-align: top;
    border-radius: 100%;
    border: 6px solid #eceff4
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-list {
    margin: 0 auto 86px;
    padding: 2px 0 0 46px;
    width: 100%;
    height: 390px;
    text-align: left;
    overflow-y: scroll
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item {
    position: relative;
    margin: 0 53px 16px 0;
    width: 88px;
    height: 88px;
    display: inline-block;
    border: 6px solid #eceff4;
    border-radius: 88px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item:nth-child(4n) {
    margin-right: 0
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item img {
    width: 100%;
    height: 100%;
    border-radius: 100%
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item.active::after {
    position: absolute;
    top: -8px;
    left: -8px;
    content: "";
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 100%;
    border: 2px solid #6484ff
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-btn-group {
    position: absolute;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 76px;
    width: 100%;
    background-color: #fff
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-cancel-btn {
    margin: 0;
    width: 115px;
    height: 38px;
    line-height: 38px;
    border-radius: 38px;
    font-size: 14px;
    cursor: pointer
}

body .mhy-avatar-list-dialog .mhy-account-flow-avatar-list .avatar-submit-btn {
    margin: 0 0 0 24px;
    width: 115px;
    height: 38px;
    line-height: 38px;
    border-radius: 38px;
    font-size: 14px;
    cursor: pointer
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content {
    min-width: 100%;
    background-color: #f5f6fb
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header .header-back-icon {
    width: 16px !important;
    height: 16px !important
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header .mhy-init-user-dialog-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #2f3f56
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header .header-submit-btn {
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    color: #657ef8
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list {
    padding-bottom: 200px;
    background-color: rgba(0, 0, 0, 0)
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-container {
    background-color: rgba(0, 0, 0, 0)
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-container img {
    width: 82px;
    height: 82px;
    border-width: 2px
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-list {
    display: grid;
    justify-items: center;
    grid-template-columns:repeat(4, 1fr);
    margin: 0 auto;
    padding: 20px 8px;
    max-height: 520px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: calc(100% - 48px);
    border-radius: 10px;
    background-color: #fff;
    overflow-x: hidden
}

@media screen and (max-width: 390px) {
    body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-list {
        grid-template-columns:repeat(3, 1fr)
    }
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item {
    margin: 0 15px 20px 0;
    width: 70px;
    height: 70px;
    cursor: none
}

body .mhy-avatar-list-dialog.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item.active::after {
    width: 70px;
    height: 70px
}

body .mhy-avatar-list-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-dialog-header {
    border-bottom: 1px solid #0c0f1d
}

body .mhy-avatar-list-dialog.is-dark-theme .mhy-init-user-dialog-content .mhy-init-user-dialog-header .mhy-init-user-dialog-title {
    color: #0c0f1d
}

body .mhy-avatar-list-dialog.is-dark-theme .mhy-account-flow-avatar-list {
    background-color: #1b1d2a
}

body .mhy-avatar-list-dialog.is-dark-theme .mhy-account-flow-avatar-list .avatar-container .avatar-img {
    border: 6px solid #3c3f50
}

body .mhy-avatar-list-dialog.is-dark-theme .mhy-account-flow-avatar-list .avatar-list .mhy-init-user-avatar-item {
    border: 6px solid #3c3f50
}

body .mhy-avatar-list-dialog.is-dark-theme .mhy-account-flow-avatar-list .avatar-btn-group {
    background-color: #1b1d2a
}

body .mhy-avatar-list-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content {
    background-color: #0c0f1d
}

body .mhy-avatar-list-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-init-user-dialog-header .mhy-init-user-dialog-title {
    color: #cecfd1
}

body .mhy-avatar-list-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list {
    background-color: rgba(0, 0, 0, 0)
}

body .mhy-avatar-list-dialog.is-dark-theme.is-mobile .mhy-init-user-dialog-scroll-container .mhy-init-user-dialog-content .mhy-account-flow-avatar-list .avatar-list {
    background-color: #1b1d2a
}

.mhy-hoyolab-account-block {
    position: relative;
    cursor: pointer
}

.mhy-hoyolab-account-block__avatar {
    width: 32px;
    height: 32px
}

.mhy-hoyolab-account-block__avatar-icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #f1f4f9;
    vertical-align: top
}

.mhy-hoyolab-account-block__item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.mhy-hoyolab-account-block__icon, .mhy-hoyolab-account-block__active-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px
}

.mhy-hoyolab-account-block__active-icon {
    display: none
}

.mhy-hoyolab-account-block__arrow_icon, .mhy-hoyolab-account-block__arrow_icon_active {
    width: 16px;
    height: 16px
}

.mhy-hoyolab-account-block__arrow_icon_active {
    display: none
}

.mhy-hoyolab-account-block .mhy-hoyolab-select-menu {
    padding: 0;
    top: 45px;
    right: 0
}

.mhy-hoyolab-account-block .mhy-hoyolab-select-menu__item:hover .mhy-hoyolab-account-block__icon {
    display: none
}

.mhy-hoyolab-account-block .mhy-hoyolab-select-menu__item:hover .mhy-hoyolab-account-block__active-icon {
    display: inline-block
}

.mhy-hoyolab-account-block .mhy-hoyolab-select-menu__item:hover .mhy-hoyolab-account-block__arrow_icon {
    display: none
}

.mhy-hoyolab-account-block .mhy-hoyolab-select-menu__item:hover .mhy-hoyolab-account-block__arrow_icon_active {
    display: inline-block
}

.hoyolab-header-zoom-in-top-enter-active, .hoyolab-header-zoom-in-top-leave-active {
    opacity: 1;
    transform: scaleY(1);
    transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center top
}

.hoyolab-header-zoom-in-top-enter, .hoyolab-header-zoom-in-top-leave-active {
    opacity: 0;
    transform: scaleY(0)
}

.hoyolab-header-account-zoom-in-top-enter-active, .hoyolab-header-account-zoom-in-top-leave-active {
    opacity: 1;
    transform: scaleY(1);
    transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center top
}

.hoyolab-header-account-zoom-in-top-enter, .hoyolab-header-account-zoom-in-top-leave-active {
    opacity: 0;
    transform: scaleY(0)
}

.mhy-hoyolab-header {
    background-color: #f5f6fb;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 2900
}

.mhy-hoyolab-header * {
    box-sizing: border-box
}

.mhy-hoyolab-header ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.mhy-hoyolab-header__wrapper {
    background-color: #fff
}

.mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper {
    background-color: #1b1d2a
}

.mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-lang-selector {
    background-color: #343746
}

.mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-account-block__avatar img {
    border-color: #576274
}

.mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-select-menu {
    background-color: #1b1d2a
}

.mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-select-menu__item:hover {
    background-color: #343746
}

.mhy-hoyolab-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 1200px;
    height: 56px;
    margin: 0 auto
}

.mhy-hoyolab-header__hoyolab {
    width: 87px;
    height: 16px;
    cursor: pointer
}

.mhy-hoyolab-header__right {
    display: flex;
    align-items: center
}

.mhy-hoyolab-header .mhy-hoyolab-lang-selector {
    margin-right: 16px
}

@media screen and (max-width: 1439px) {
    .mhy-hoyolab-header__container {
        width: 972px
    }
}

@media screen and (max-width: 1023px) {
    .mhy-hoyolab-header__container {
        width: 668px
    }
}

html {
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif
}

a {
    text-decoration: none
}

button, input, textarea {
    color: inherit;
    font: inherit
}

[class*=van-]:focus, a:focus, button:focus, input:focus, textarea:focus {
    outline: 0
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.van-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.van-multi-ellipsis--l2 {
    -webkit-line-clamp: 2
}

.van-multi-ellipsis--l2, .van-multi-ellipsis--l3 {
    display: -webkit-box;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical
}

.van-multi-ellipsis--l3 {
    -webkit-line-clamp: 3
}

.van-clearfix:after {
    display: table;
    clear: both;
    content: ""
}

[class*=van-hairline]:after {
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 0 solid #ebedf0;
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5)
}

.van-hairline, .van-hairline--bottom, .van-hairline--left, .van-hairline--right, .van-hairline--surround, .van-hairline--top, .van-hairline--top-bottom {
    position: relative
}

.van-hairline--top:after {
    border-top-width: 1px
}

.van-hairline--left:after {
    border-left-width: 1px
}

.van-hairline--right:after {
    border-right-width: 1px
}

.van-hairline--bottom:after {
    border-bottom-width: 1px
}

.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after {
    border-width: 1px 0
}

.van-hairline--surround:after {
    border-width: 1px
}

@-webkit-keyframes van-slide-up-enter {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes van-slide-up-enter {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@-webkit-keyframes van-slide-up-leave {
    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes van-slide-up-leave {
    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@-webkit-keyframes van-slide-down-enter {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes van-slide-down-enter {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@-webkit-keyframes van-slide-down-leave {
    to {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes van-slide-down-leave {
    to {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@-webkit-keyframes van-slide-left-enter {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes van-slide-left-enter {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@-webkit-keyframes van-slide-left-leave {
    to {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes van-slide-left-leave {
    to {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@-webkit-keyframes van-slide-right-enter {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes van-slide-right-enter {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@-webkit-keyframes van-slide-right-leave {
    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes van-slide-right-leave {
    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@-webkit-keyframes van-fade-in {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes van-fade-in {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes van-fade-out {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes van-fade-out {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@-webkit-keyframes van-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes van-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.van-fade-enter-active {
    -webkit-animation: .3s van-fade-in both ease-out;
    animation: .3s van-fade-in both ease-out
}

.van-fade-leave-active {
    -webkit-animation: .3s van-fade-out both ease-in;
    animation: .3s van-fade-out both ease-in
}

.van-slide-up-enter-active {
    -webkit-animation: van-slide-up-enter .3s both ease-out;
    animation: van-slide-up-enter .3s both ease-out
}

.van-slide-up-leave-active {
    -webkit-animation: van-slide-up-leave .3s both ease-in;
    animation: van-slide-up-leave .3s both ease-in
}

.van-slide-down-enter-active {
    -webkit-animation: van-slide-down-enter .3s both ease-out;
    animation: van-slide-down-enter .3s both ease-out
}

.van-slide-down-leave-active {
    -webkit-animation: van-slide-down-leave .3s both ease-in;
    animation: van-slide-down-leave .3s both ease-in
}

.van-slide-left-enter-active {
    -webkit-animation: van-slide-left-enter .3s both ease-out;
    animation: van-slide-left-enter .3s both ease-out
}

.van-slide-left-leave-active {
    -webkit-animation: van-slide-left-leave .3s both ease-in;
    animation: van-slide-left-leave .3s both ease-in
}

.van-slide-right-enter-active {
    -webkit-animation: van-slide-right-enter .3s both ease-out;
    animation: van-slide-right-enter .3s both ease-out
}

.van-slide-right-leave-active {
    -webkit-animation: van-slide-right-leave .3s both ease-in;
    animation: van-slide-right-leave .3s both ease-in
}

.van-loading {
    color: #c8c9cc;
    font-size: 0
}

.van-loading, .van-loading__spinner {
    position: relative;
    vertical-align: middle
}

.van-loading__spinner {
    display: inline-block;
    width: 30px;
    max-width: 100%;
    height: 30px;
    max-height: 100%;
    -webkit-animation: van-rotate .8s linear infinite;
    animation: van-rotate .8s linear infinite
}

.van-loading__spinner--spinner {
    -webkit-animation-timing-function: steps(12);
    animation-timing-function: steps(12)
}

.van-loading__spinner--spinner i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.van-loading__spinner--spinner i:before {
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: currentColor;
    border-radius: 40%;
    content: " "
}

.van-loading__spinner--circular {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.van-loading__circular {
    display: block;
    width: 100%;
    height: 100%
}

.van-loading__circular circle {
    -webkit-animation: van-circular 1.5s ease-in-out infinite;
    animation: van-circular 1.5s ease-in-out infinite;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round
}

.van-loading__text {
    display: inline-block;
    margin-left: 8px;
    color: #969799;
    font-size: 14px;
    vertical-align: middle
}

.van-loading--vertical {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.van-loading--vertical .van-loading__text {
    margin: 8px 0 0
}

@-webkit-keyframes van-circular {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -40
    }
    to {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -120
    }
}

@keyframes van-circular {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -40
    }
    to {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -120
    }
}

.van-loading__spinner--spinner i:first-of-type {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    opacity: 1
}

.van-loading__spinner--spinner i:nth-of-type(2) {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    opacity: .9375
}

.van-loading__spinner--spinner i:nth-of-type(3) {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: .875
}

.van-loading__spinner--spinner i:nth-of-type(4) {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    opacity: .8125
}

.van-loading__spinner--spinner i:nth-of-type(5) {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
    opacity: .75
}

.van-loading__spinner--spinner i:nth-of-type(6) {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: .6875
}

.van-loading__spinner--spinner i:nth-of-type(7) {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
    opacity: .625
}

.van-loading__spinner--spinner i:nth-of-type(8) {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
    opacity: .5625
}

.van-loading__spinner--spinner i:nth-of-type(9) {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    opacity: .5
}

.van-loading__spinner--spinner i:nth-of-type(10) {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
    opacity: .4375
}

.van-loading__spinner--spinner i:nth-of-type(11) {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
    opacity: .375
}

.van-loading__spinner--spinner i:nth-of-type(12) {
    -webkit-transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    transform: rotate(1turn);
    opacity: .3125
}

.account-popup--overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7)
}

.account-popup {
    z-index: 99;
    position: fixed;
    max-height: 100%;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch
}

.account-popup--center {
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

.account-popup--center.van-popup--round {
    border-radius: 16px
}

.account-popup--top {
    top: 0;
    left: 0;
    width: 100%
}

.account-popup--top.account-popup--round {
    border-radius: 0 0 16px 16px
}

.account-popup--right {
    top: 50%;
    right: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.account-popup--right.account-popup--round {
    border-radius: 16px 0 0 16px
}

.account-popup--bottom {
    bottom: 0;
    left: 0;
    width: 100%
}

.account-popup--bottom.account-popup--round {
    border-radius: 16px 16px 0 0
}

.account-popup--left {
    top: 50%;
    left: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.account-popup--left.account-popup--round {
    border-radius: 0 16px 16px 0
}

.account-popup--safe-area-inset-bottom {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom)
}

.account-popup-slide-bottom-enter-active, .account-popup-slide-left-enter-active, .account-popup-slide-right-enter-active, .account-popup-slide-top-enter-active {
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.account-popup-slide-bottom-leave-active, .account-popup-slide-left-leave-active, .account-popup-slide-right-leave-active, .account-popup-slide-top-leave-active {
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in
}

.account-popup-slide-top-enter, .account-popup-slide-top-leave-active {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
}

.account-popup-slide-right-enter, .account-popup-slide-right-leave-active {
    -webkit-transform: translate3d(100%, -50%, 0);
    transform: translate3d(100%, -50%, 0)
}

.account-popup-slide-bottom-enter, .account-popup-slide-bottom-leave-active {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

.account-popup-slide-left-enter, .account-popup-slide-left-leave-active {
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0)
}

@-webkit-keyframes account-popup-fade-in {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes account-popup-fade-in {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes account-popup-fade-out {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes account-popup-fade-out {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.account-popup-fade-enter-active {
    -webkit-animation: .3s account-popup-fade-in both ease-out;
    animation: .3s account-popup-fade-in both ease-out
}

.account-popup-fade-leave-active {
    -webkit-animation: .3s account-popup-fade-out both ease-in;
    animation: .3s account-popup-fade-out both ease-in
}

.role-selector-sea-dropdown-menu {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.role-selector-sea-dropdown-menu .dropdown-menu__input {
    width: 100%;
    height: 40px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media (min-width: 1025px) {
    .role-selector-sea-dropdown-menu .dropdown-menu__input {
        height: 48px;
        padding-left: 20px
    }
}

.role-selector-sea-dropdown-menu .dropdown-menu__icon {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 14px;
    right: 10px
}

@media (min-width: 1025px) {
    .role-selector-sea-dropdown-menu .dropdown-menu__icon {
        top: 17px
    }
}

.role-selector-sea-dropdown-menu .dropdown-menu__input {
    position: relative;
    padding-left: 15px;
    font-size: 14px;
    color: #333;
    line-height: 14px
}

.role-selector-sea-dropdown-menu .dropdown-menu__input__placeholder {
    color: #999
}

.role-selector-sea-dropdown-menu .dropdown-menu__list {
    position: absolute;
    width: 99%;
    left: 0;
    top: 100%;
    max-height: 222px;
    padding: 1px;
    overflow: auto;
    background: #fff;
    -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .08);
    border-radius: 4px;
    border: 1px solid #e6e6e6
}

@media (min-width: 1025px) {
    .role-selector-sea-dropdown-menu .dropdown-menu__list {
        max-height: 170px;
        padding: 10px 0;
        -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1)
    }
}

.role-selector-sea-dropdown-menu .dropdown-menu__list__item {
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 9px
}

@media (min-width: 1025px) {
    .role-selector-sea-dropdown-menu .dropdown-menu__list__item {
        height: 30px;
        padding-left: 30px
    }
}

.role-selector-sea-dropdown-menu .dropdown-menu__list__item.active {
    background: #f5f5f5
}

.role-selector-sea-dropdown-menu .dropdown-menu__list__item.active .dropdown-menu__list__value {
    color: #333
}

.role-selector-sea-dropdown-menu .dropdown-menu__list__value {
    font-size: 14px;
    color: #666;
    line-height: 14px
}

.role-selector-sea-dropdown-menu .dropdown-enter-active, .role-selector-sea-dropdown-menu .dropdown-leave-active {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.role-selector-sea-dropdown-menu .dropdown-enter, .role-selector-sea-dropdown-menu .dropdown-leave-to {
    opacity: 0;
    height: 0
}

.theme-genshin .role-selector-sea-dropdown-menu .dropdown-menu__input {
    height: 40px
}

.theme-genshin .role-selector-sea-dropdown-menu .dropdown-menu__icon {
    top: 14px
}

.theme-genshin .role-selector-sea-dropdown-menu .dropdown-menu__list__item.selected, .theme-genshin .role-selector-sea-dropdown-menu .dropdown-menu__list__item:hover {
    background-color: #f8f8f8
}

.theme-genshin .role-selector-sea-dropdown-menu .dropdown-menu__list__item.selected .dropdown-menu__list__value {
    color: #dcbc60
}

.theme-community .role-selector-sea-dropdown-menu .dropdown-menu__list__item.selected, .theme-community .role-selector-sea-dropdown-menu .dropdown-menu__list__item:hover {
    background-color: #f5f5f5
}

.game-role-selector-sea-popup {
    z-index: 9999
}

.game-role-selector-sea-popup .account-popup {
    width: auto
}

.game-role-selector-sea-wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.game-role-selector-sea-wrapper .van-loading {
    text-align: center
}

.game-role-selector-sea-wrapper.theme-community {
    width: 315px;
    font-family: Helvetica, sans-serif
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community {
        width: auto
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__container {
    background-color: #fff;
    border-radius: 4px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__container {
        width: 500px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header {
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    background-color: #4ea4dc;
    cursor: default
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header {
        height: 60px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header__close-icon {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 16px;
    right: 20px;
    cursor: pointer
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header__close-icon {
        width: 17px;
        height: 17px;
        top: 21.5px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header__text {
    font-size: 14px;
    color: #fff;
    line-height: 14px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__header__text {
        font-size: 20px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content {
    padding: 0 25px 25px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content {
        padding: 0 60px 25px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__title {
    padding-top: 20px;
    font-size: 12px;
    color: #666;
    line-height: 12px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__title {
        padding-top: 40px;
        font-size: 14px;
        line-height: 14px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__dropdown {
    margin-top: 10px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__dropdown {
        margin-top: 20px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__current {
    margin-bottom: 30px;
    margin-top: 20px;
    background: #f8f8f8;
    border-radius: 4px;
    color: #333;
    font-family: PingFangSC-Regular, PingFang SC, serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__current {
        margin-top: 15px;
        margin-bottom: 40px;
        padding: 15px 20px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__current__nickename {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__current__nickename-level {
    margin-left: 5px;
    font-size: 10px;
    padding: 2px 3px;
    font-family: PingFang SC, sans-serif;
    font-weight: 800;
    color: #fff;
    background: #57d9ad;
    border-radius: 2px
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__current__uid {
    padding-top: 12px
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__loading {
    margin-top: 36px;
    margin-bottom: 46px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__loading {
        margin-top: 34px;
        margin-bottom: 59px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__placeholder {
    margin-top: 45px;
    margin-bottom: 55px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__placeholder {
        margin-top: 42px;
        margin-bottom: 67px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__placeholder-text {
    text-align: center;
    font-size: 12px;
    color: #ccc;
    line-height: 12px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__content__placeholder-text {
        font-size: 14px;
        line-height: 14px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__button {
    cursor: pointer;
    height: 40px;
    background: #4ea4dc;
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__button {
        height: 48px;
        margin-top: 40px
    }

    .game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__button-text {
        font-size: 20px;
        font-weight: 400;
        color: #fff;
        line-height: 20px
    }
}

.game-role-selector-sea-wrapper.theme-community .game-role-selector-sea__button-text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #fff;
    line-height: 14px
}

.game-role-selector-sea-wrapper.theme-genshin {
    width: 297px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin {
        width: auto
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__container {
    background-color: #fff;
    border-radius: 4px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__container {
        width: 480px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header {
    height: 48px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-bottom: 1px solid #ebebeb;
    cursor: default
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header {
        height: 50px;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding-left: 30px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header__close-icon {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 10px;
    right: 10px;
    cursor: pointer
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header__close-icon {
        width: 14px;
        height: 14px;
        top: 18px;
        right: 30px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header__text {
    font-size: 14px;
    color: #333;
    line-height: 14px;
    font-weight: 700
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__header__text {
        font-size: 16px;
        line-height: 16px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content {
    padding: 0 20px 20px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content {
        padding: 0 30px;
        height: 310px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__title {
    padding-top: 17.5px;
    font-size: 12px;
    color: #333;
    line-height: 12px;
    font-weight: 400
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__title {
        padding-top: 40px;
        font-weight: 700;
        font-size: 14px;
        line-height: 14px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__dropdown {
    margin-top: 10px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__dropdown {
        margin-top: 9px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__current {
    margin-top: 13px;
    background: #f8f8f8;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__current {
        margin-top: 15px;
        padding: 15px 20px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__current__nickename {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__current__nickename-level {
    margin-left: 5px;
    font-size: 10px;
    padding: 2px 3px;
    font-family: PingFang SC, sans-serif;
    font-weight: 800;
    color: #fff;
    background: #57d9ad;
    border-radius: 2px
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__current__uid {
    padding-top: 10px
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__loading {
    margin-top: 21px;
    margin-bottom: 41px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__loading {
        margin-top: 42px;
        margin-bottom: 72px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__placeholder {
    margin-top: 30px;
    margin-bottom: 50px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__placeholder {
        margin-top: 50px;
        margin-bottom: 80px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__placeholder-text {
    text-align: center;
    font-size: 12px;
    color: #ccc;
    font-weight: 400;
    line-height: 12px
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__content__placeholder-text {
        font-size: 14px;
        line-height: 14px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__button {
    cursor: pointer;
    height: 42px;
    margin-top: 22px;
    background: #2d2f33;
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media (min-width: 1025px) {
    .game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__button {
        margin: 0 auto;
        width: 98px;
        height: 34px;
        margin-top: 45px
    }
}

.game-role-selector-sea-wrapper.theme-genshin .game-role-selector-sea__button-text {
    font-size: 14px;
    font-family: Microsoft YaHei, sans-serif;
    font-weight: 400;
    color: #f6ddb2;
    line-height: 14px
}

.game-role-selector-sea__button.disabled {
    background-color: #eff1f4 !important;
    cursor: not-allowed !important
}

.game-role-selector-sea__button.disabled .game-role-selector-sea__button-text {
    color: #c0c5c8
}

.game-role-selector-sea__limit-text {
    margin-bottom: 4px;
    font-size: 12px;
    color: #ccc;
    font-weight: 400;
    line-height: 14px
}

.mhy-bridge-message-box-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-animation: messageBoxMaskIn 200ms ease;
    animation: messageBoxMaskIn 200ms ease;
    opacity: 1;
    -webkit-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    z-index: 999;
    font-size: 3.73333vmin
}

.mhy-bridge-message-box-mask .mhy-bridge-message-box {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    width: 66.66667vmin;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 2.13333vmin;
    background-color: #fff;
    -webkit-animation: messageBoxScaleIn 200ms ease;
    animation: messageBoxScaleIn 200ms ease
}

.mhy-bridge-message-box-mask .mhy-bridge-message-box header {
    font-size: 4.26667vmin;
    line-height: 12vmin;
    border-bottom: 1px solid #f0f0f0
}

.mhy-bridge-message-box-mask .mhy-bridge-message-box .mhy-bridge-message-box-content {
    padding: 4.26667vmin 8.53333vmin;
    font-size: 3.73333vmin;
    line-height: 1.5;
    word-break: break-all
}

.mhy-bridge-message-box-mask .mhy-bridge-message-box footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 1px solid #f0f0f0;
    line-height: 12vmin;
    color: #6cf;
    font-size: 3.73333vmin
}

.mhy-bridge-message-box-mask .mhy-bridge-message-box footer .confirm-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-right: 1px solid #f0f0f0;
    cursor: pointer;
    -webkit-highlight: none;
    -webkit-tap-highlight-color: transparent
}

.mhy-bridge-message-box-mask .mhy-bridge-message-box footer .confirm-item:last-child {
    border-right: 0
}

.mhy-bridge-message-box-mask.message-box-close {
    opacity: 0
}

@-webkit-keyframes messageBoxScaleIn {
    from {
        -webkit-transform: translateY(-50%) scale(0.3);
        transform: translateY(-50%) scale(0.3)
    }
    to {
        -webkit-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1)
    }
}

@keyframes messageBoxScaleIn {
    from {
        -webkit-transform: translateY(-50%) scale(0.3);
        transform: translateY(-50%) scale(0.3)
    }
    to {
        -webkit-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1)
    }
}

@-webkit-keyframes messageBoxMaskIn {
    from {
        background-color: rgba(0, 0, 0, 0)
    }
    to {
        background-color: rgba(0, 0, 0, 0.5)
    }
}

@keyframes messageBoxMaskIn {
    from {
        background-color: rgba(0, 0, 0, 0)
    }
    to {
        background-color: rgba(0, 0, 0, 0.5)
    }
}

._bbs-repaint-hacker {
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation-name: run;
    animation-name: run;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    position: absolute
}

@-webkit-keyframes run {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes run {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.select-wrapper[data-v-0342da24] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 1;
    position: relative;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #666
}

.select[data-v-0342da24] {
    border: 1px solid #ccc;
    width: 26.66667vmin;
    cursor: pointer;
    border-radius: 4px;
    padding: 1vmin 0.5vmin;
    font-size: 3vmin;
    position: relative
}

.select.selecting[data-v-0342da24]::after {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    top: 25%
}

.select.selecting .list[data-v-0342da24] {
    max-height: 999px
}

.select[data-v-0342da24]::after {
    content: "";
    position: absolute;
    right: 0.8em;
    top: 50%;
    margin-top: -0.2vmin;
    border: 0.9vmin solid #ccc;
    border-color: #ccc transparent transparent transparent;
    -webkit-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out
}

.select .caption[data-v-0342da24] {
    padding-right: 3vmin
}

.select .list[data-v-0342da24] {
    overflow: hidden;
    -webkit-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    width: 100%;
    max-height: 0;
    position: absolute;
    z-index: 99;
    left: 0;
    bottom: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    border-radius: 0 0 4px 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2)
}

.select .list .item[data-v-0342da24] {
    padding: 1vmin
}

.select .list .item[data-v-0342da24]:hover {
    background-color: #f2f2f2
}

.mhy-game-role-message-box-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-animation: gameRoleSelectorMessageBoxMaskIn 200ms ease;
    animation: gameRoleSelectorMessageBoxMaskIn 200ms ease;
    opacity: 1;
    -webkit-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    z-index: 999;
    font-size: 3.73333vmin
}

.mhy-game-role-message-box-mask .mhy-game-role-message-box {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    width: 66.66667vmin;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 2.13333vmin;
    background-color: #fff;
    -webkit-animation: gameRoleSelectorMessageBoxScaleIn 200ms ease;
    animation: gameRoleSelectorMessageBoxScaleIn 200ms ease
}

.mhy-game-role-message-box-mask .mhy-game-role-message-box-overseas-header {
    padding: 0 4.26667vmin;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.mhy-game-role-message-box-mask .mhy-game-role-message-box-overseas-selector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mhy-game-role-message-box-mask .mhy-game-role-message-box-overseas-selector .select-wrapper + .select-wrapper {
    margin-left: 5px
}

.mhy-game-role-message-box-mask .mhy-game-role-message-box header {
    color: #333;
    font-size: 4.26667vmin;
    line-height: 12vmin;
    border-bottom: 1px solid #f0f0f0
}

.mhy-game-role-message-box-mask .mhy-game-role-message-box .mhy-game-role-message-box-content {
    padding: 4.26667vmin 8.53333vmin;
    font-size: 3.73333vmin;
    line-height: 1.5;
    word-break: break-all
}

.mhy-game-role-message-box-mask .mhy-game-role-message-box footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 1px solid #f0f0f0;
    line-height: 12vmin;
    color: #6cf;
    font-size: 3.73333vmin
}

.mhy-game-role-message-box-mask .mhy-game-role-message-box footer .confirm-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-right: 1px solid #f0f0f0;
    cursor: pointer;
    -webkit-highlight: none;
    -webkit-tap-highlight-color: transparent
}

.mhy-game-role-message-box-mask .mhy-game-role-message-box footer .confirm-item:last-child {
    border-right: 0
}

.mhy-game-role-message-box-mask.message-box-close {
    opacity: 0
}

.mhy-game-role-selector-mask .mhy-game-role-message-box {
    width: 90vmin;
    max-height: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mhy-game-role-selector-mask .mhy-game-role-message-box .mhy-game-role-message-box-content {
    padding: 0 4.26667vmin;
    overflow-x: hidden;
    overflow-y: auto
}

.mhy-game-role-selector-mask .mhy-game-role-selector {
    text-align: left
}

.mhy-game-role-selector-mask .mhy-game-role-selector .empty-text {
    text-align: center;
    padding: 2.66667vmin 0;
    color: #a6a6a6
}

.mhy-game-role-selector-mask .mhy-game-role-selector .game-role-list {
    font-size: 3.73333vmin;
    margin-bottom: 8vmin
}

.mhy-game-role-selector-mask .mhy-game-role-selector .list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 2.66667vmin 0;
    border-bottom: 1px solid #f0f0f0
}

.mhy-game-role-selector-mask .mhy-game-role-selector .list-item .role-info {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mhy-game-role-selector-mask .mhy-game-role-selector .list-item .role-uid {
    color: #737373;
    font-size: 3.2vmin
}

.mhy-game-role-selector-mask .mhy-game-role-selector .bind-other-btn-container {
    text-align: center;
    margin-bottom: 5.33333vmin
}

.mhy-game-role-selector-mask .mhy-game-role-selector .bind-other-btn-container .bind-other-btn {
    display: inline-block;
    width: 77.33333vmin;
    line-height: 12vmin;
    background-color: #6cf;
    color: #fff;
    border-radius: .8vmin;
    cursor: pointer
}

.mhy-game-role-message-box-header {
    position: relative
}

.mhy-game-role-message-box-header .mhy-game-role-message-box-header-close-icon {
    position: absolute;
    z-index: 20;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 5.33333vmin;
    width: 3.73333vmin;
    height: 3.73333vmin;
    background-size: 100% 100%;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAADaElEQVRIS8VWTWwMcRT/vZlWJaWRIOGGRB16QKI7u7O6H4huFwmibuqAM3rwebAOPg/KGQeclCDB2gp2d2qnM1MJDj20EtxIGgnSJmhnnkzt7JexO0r4H2fee7///733+71H+MeH/jEe/h+gktO2WaCjIL6beZhKJBIJ609en0gkhMj6WAJMmwTwiVDQf9OOV3hhNqcNM9A89VHA9XlNs7taWlq+TQd0aGhoxuinsWtg3p4HGQkH/cvKAVWjh9na5wAQ6Mm4yFvifv/n3wFNalpTo0m3GbymEIuE82HZt78MkJlJGdB7mLG3CEAvuJ46oj7fey+gacNYQBP8AOAVRTBcCAWk/UTEZYCOQTanH2TwqUK6GW+oDu1hv/9VNdCspi3lSfSBsDhvxwQ6HA5KZ0r9XLs0q+pdzHwJQP0PYx6trxc3BH2+QTfQnGG0TkyY9wGan/8/QUS7w7J0tdL+l7TIPB3oAFEvgFl5pzGRhM422ZcqDdKvGjGTrRuldnazRFYHHrhdrioPFVX1WSzeA9j15j9ngkYFMjeGZNn4VfprEv9Rv95cJ3IKXKwNgw//aAAq1prwZtKk2Lo2aaRarWsC2s6Koiy0xIZkafeVB/XezZ4A7eCapjV9reBX/pVPGkTe4vfIV8+AU4S26BYzry1rc6LH4wJv9SoQngDTaWMBzWA7pSvd60PP+RvFo9HaAlET0CY0TEoxeIlDaCYcmUon46QjEAR6DZFjtQSiKmAmZ7QCFYQWaE84IF2xAbMD+k62+GKpQADihkjQXSBcpc1JWVpVY8RCkdCMcQK2h1f7k6VpzT7V4gz0gtDoCAST1RmV5TKBKGirW00yucEdgHnZuTmBRomEjSG51ZXQijrosyzzPgjzHGkDxF2RYOu1mtKWyQ0cAOh0yax8K9ZRe5tUndD9ut5sTnIfgEVOrQE+FAkGzrqKd348nWNGYSYCeCmYdR2h0Kp31dTD+acozxZa4qStocsLKSScDwWk7p/GU0bVz4F5akjmT3qmiM1eCe042QLxxcQdANFCJKKeiCx1lzVNJqcNw1kxiHrHP37oisfjX728rNImmUw2NM6Ze5XzKwaAkUjlipFR9U4wHyUBd9N9qWN/Y4mKtseOs4VNIDoRkSW74//jmjid1E3Hp6a0TSdoNZ/vXJthLIBkNssAAAAASUVORK5CYII=")
}

.mhy-game-role-message-box-mask *, .mhy-game-role-selector-mask * {
    margin: 0
}

.mhy-game-role-message-box-mask ul, .mhy-game-role-selector-mask ul {
    list-style: none;
    padding: 0
}

@-webkit-keyframes gameRoleSelectorMessageBoxScaleIn {
    from {
        -webkit-transform: translateY(-50%) scale(0.3);
        transform: translateY(-50%) scale(0.3)
    }
    to {
        -webkit-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1)
    }
}

@keyframes gameRoleSelectorMessageBoxScaleIn {
    from {
        -webkit-transform: translateY(-50%) scale(0.3);
        transform: translateY(-50%) scale(0.3)
    }
    to {
        -webkit-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1)
    }
}

@-webkit-keyframes gameRoleSelectorMessageBoxMaskIn {
    from {
        background-color: rgba(0, 0, 0, 0)
    }
    to {
        background-color: rgba(0, 0, 0, 0.5)
    }
}

@keyframes gameRoleSelectorMessageBoxMaskIn {
    from {
        background-color: rgba(0, 0, 0, 0)
    }
    to {
        background-color: rgba(0, 0, 0, 0.5)
    }
}
</style>
<style type="text/css">.mihoyo-share-tips-wrap {
                          position: fixed;
                          left: 0;
                          top: 0;
                          height: 100%;
                          width: 100%
                      }

.mihoyo-share-tips {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .65);
    -webkit-animation: mihoyo-share-tips__mask-in 200ms ease;
    animation: mihoyo-share-tips__mask-in 200ms ease
}

.mihoyo-share-tips img {
    position: absolute;
    right: 30px;
    top: 0
}

@-webkit-keyframes mihoyo-share-tips__mask-in {
    from {
        background-color: rgba(0, 0, 0, 0)
    }
    to {
        background-color: rgba(0, 0, 0, .65)
    }
}

@keyframes mihoyo-share-tips__mask-in {
    from {
        background-color: rgba(0, 0, 0, 0)
    }
    to {
        background-color: rgba(0, 0, 0, .65)
    }
}

._2KIYvRS5 {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

._2KIYvRS5 > * {
    pointer-events: auto
}

._2vPZV2Zw > * {
    pointer-events: none
}

._12W2W7w0 {
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    scrollbar-width: none;
    overflow-style: none
}

._12W2W7w0 > * {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none
}

._12W2W7w0::-webkit-scrollbar {
    display: none
}

._2vQSqpU9 {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

._32Xo0xuQ {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.pJabgfwZ {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.pJabgfwZ ._12W2W7w0 {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

._1O4IHgc7 {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

._1O4IHgc7 ._12W2W7w0 {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

@-webkit-keyframes _3Ujv2jSG {
    0% {
        -webkit-transform: translateY(-18%);
        transform: translateY(-18%);
        opacity: 0
    }
    50% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
        opacity: .9
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes _3Ujv2jSG {
    0% {
        -webkit-transform: translateY(-18%);
        transform: translateY(-18%);
        opacity: 0
    }
    50% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
        opacity: .9
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

._3TX-HDp7 {
    background-color: rgba(0, 0, 0, 0) !important
}

._2cyKhZmc {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._1A68rrWj {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

.nZo7-Sq1 {
    background-color: rgba(0, 0, 0, 0) !important
}

._3TX-HDp7 > * {
    opacity: 0
}

._2cyKhZmc > * {
    -webkit-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._3CP9Dpl8 > * {
    opacity: 1
}

._2AEWSt0y > * {
    opacity: 1
}

._1A68rrWj > * {
    -webkit-transition: opacity ease-out;
    -o-transition: opacity ease-out;
    transition: opacity ease-out
}

.nZo7-Sq1 > * {
    opacity: 0
}

.bkUp6T8X {
    background-color: rgba(0, 0, 0, 0) !important
}

.AGHfB3I2 {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._2isBKp-q {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._1fSD77hd {
    background-color: rgba(0, 0, 0, 0) !important
}

.bkUp6T8X > * {
    -webkit-transform: scale(0.86);
    -ms-transform: scale(0.86);
    transform: scale(0.86);
    opacity: 0
}

.AGHfB3I2 > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-in-out, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-in-out;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-in-out;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-in-out, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._3_NZZtFO > * {
    opacity: 1
}

.dKtipJIU > * {
    opacity: 1
}

._2isBKp-q > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

._1fSD77hd > * {
    opacity: 0;
    -webkit-transform: scale(0.86);
    -ms-transform: scale(0.86);
    transform: scale(0.86)
}

._2CUkrRuO {
    background-color: rgba(0, 0, 0, 0) !important
}

.M1P6kXGN {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._1JeI9vdT {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._1xL8LI0t {
    background-color: rgba(0, 0, 0, 0) !important
}

._2CUkrRuO > * {
    -webkit-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0
}

.M1P6kXGN > * {
    -webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

.HyBR0alk > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

._2c8ThAK- > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

._1JeI9vdT > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

._1xL8LI0t > * {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%)
}

.Dxhx2cxs {
    background-color: rgba(0, 0, 0, 0) !important
}

._2TQCQv26 {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._6iOMTIan {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._1uiA6TKS {
    background-color: rgba(0, 0, 0, 0) !important
}

.Dxhx2cxs > * {
    -webkit-transform: translateY(-10%);
    -ms-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0
}

._2TQCQv26 > * {
    -webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

.iCYb3lD8 > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.ifhXDt1p > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

._6iOMTIan > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

._1uiA6TKS > * {
    opacity: 0;
    -webkit-transform: translateY(-10%);
    -ms-transform: translateY(-10%);
    transform: translateY(-10%)
}

.PL0R_5XI {
    background-color: rgba(0, 0, 0, 0) !important
}

._1QQijFXi {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._3dbB7hvv {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._2NWaef_W {
    background-color: rgba(0, 0, 0, 0) !important
}

._1QQijFXi > * {
    -webkit-animation: _3Ujv2jSG ease-out;
    animation: _3Ujv2jSG ease-out
}

._3dbB7hvv > * {
    animation: _3Ujv2jSG forwards ease-in reverse
}

.Y4iFvcV0 {
    background-color: rgba(0, 0, 0, 0) !important
}

._3nx_7x0S {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._2l9q-k5P {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

.KkLDjA58 {
    background-color: rgba(0, 0, 0, 0) !important
}

.Y4iFvcV0 > * {
    opacity: 0
}

._3nx_7x0S > * {
    -webkit-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

.JSLHgxT- > * {
    opacity: 1
}

._3KMuubQd > * {
    opacity: 1
}

._2l9q-k5P > * {
    -webkit-transition: opacity ease-out;
    -o-transition: opacity ease-out;
    transition: opacity ease-out
}

.KkLDjA58 > * {
    opacity: 0
}

.sJsCWwFo {
    background-color: rgba(0, 0, 0, 0) !important
}

._3l5MB5sm {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._2aDWiv_P {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._3n1h5NML {
    background-color: rgba(0, 0, 0, 0) !important
}

.sJsCWwFo > * {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0
}

._3l5MB5sm > * {
    -webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

.d6jTanpB > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

._2p0Gseqe > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

._2aDWiv_P > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

._3n1h5NML > * {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%)
}

._152UybV7 {
    background-color: rgba(0, 0, 0, 0) !important
}

._1CSJaLDb {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._3wKbI3u3 {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._14kjKgUl {
    background-color: rgba(0, 0, 0, 0) !important
}

._152UybV7 > * {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 1
}

._1CSJaLDb > * {
    -webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._2an2PQMK > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

._1HySnhFn > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

._3wKbI3u3 > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

._14kjKgUl > * {
    opacity: 1;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%)
}

.VIrzXydn {
    background-color: rgba(0, 0, 0, 0) !important
}

._2bV8RcAe {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._2q_WzVji {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._1yCmQMVh {
    background-color: rgba(0, 0, 0, 0) !important
}

.VIrzXydn > * {
    opacity: 0
}

._2bV8RcAe > * {
    -webkit-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._1w58mQ9I > * {
    opacity: 1
}

._3hpSpPzL > * {
    opacity: 1
}

._2q_WzVji > * {
    -webkit-transition: opacity ease-out;
    -o-transition: opacity ease-out;
    transition: opacity ease-out
}

._1yCmQMVh > * {
    opacity: 0
}

._1CLD5HuO {
    background-color: rgba(0, 0, 0, 0) !important
}

._3rICtAIT {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._2nbH8gGo {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._1QSPDVh7 {
    background-color: rgba(0, 0, 0, 0) !important
}

._1CLD5HuO > * {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0
}

._3rICtAIT > * {
    -webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._3xn2BNJC > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

._1b5iXVME > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

._2nbH8gGo > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

._1QSPDVh7 > * {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%)
}

._1xl-2KLC {
    background-color: rgba(0, 0, 0, 0) !important
}

.IYcpxwky {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._2jnhcLgW {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._2eZqx5lZ {
    background-color: rgba(0, 0, 0, 0) !important
}

._1xl-2KLC > * {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 1
}

.IYcpxwky > * {
    -webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._1Y5jJteu > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.s7BH0agY > * {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

._2jnhcLgW > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

._2eZqx5lZ > * {
    opacity: 1;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%)
}

._3hVfF11B {
    background-color: rgba(0, 0, 0, 0) !important
}

._2R--l3rW {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._2v3h5U5p {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._2X0SUn4v {
    background-color: rgba(0, 0, 0, 0) !important
}

._3hVfF11B > * {
    opacity: 0
}

._2R--l3rW > * {
    -webkit-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

.onsiGYzJ > * {
    opacity: 1
}

._1n_IOVlj > * {
    opacity: 1
}

._2v3h5U5p > * {
    -webkit-transition: opacity ease-out;
    -o-transition: opacity ease-out;
    transition: opacity ease-out
}

._2X0SUn4v > * {
    opacity: 0
}

._2ln7YL2j {
    background-color: rgba(0, 0, 0, 0) !important
}

._1WVIrisZ {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._3Ghucdjx {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._3Y2rSjEP {
    background-color: rgba(0, 0, 0, 0) !important
}

._2ln7YL2j > * {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0
}

._1WVIrisZ > * {
    -webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._3OyzH4Mk > * {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

._17qyn3pS > * {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

._3Ghucdjx > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

._3Y2rSjEP > * {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%)
}

._1OWCUMoG {
    background-color: rgba(0, 0, 0, 0) !important
}

._2cPktcge {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._1fJ6J0BT {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._2GxjddZK {
    background-color: rgba(0, 0, 0, 0) !important
}

._1OWCUMoG > * {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 1
}

._2cPktcge > * {
    -webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._1UIBxtXz > * {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.l6Pbgi8Z > * {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

._1fJ6J0BT > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

._2GxjddZK > * {
    opacity: 1;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%)
}

._3UQZ3VL5 {
    background-color: rgba(0, 0, 0, 0) !important
}

._2UgeajeX {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._36iDwjlp {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

.gkEFarQt {
    background-color: rgba(0, 0, 0, 0) !important
}

._3UQZ3VL5 > * {
    opacity: 0
}

._2UgeajeX > * {
    -webkit-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._2jBdSpNS > * {
    opacity: 1
}

._1z3mhJoE > * {
    opacity: 1
}

._36iDwjlp > * {
    -webkit-transition: opacity ease-out;
    -o-transition: opacity ease-out;
    transition: opacity ease-out
}

.gkEFarQt > * {
    opacity: 0
}

._123ft6_s {
    background-color: rgba(0, 0, 0, 0) !important
}

._3CcacPTl {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._2Y2ytZRI {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

.K9imFAYv {
    background-color: rgba(0, 0, 0, 0) !important
}

._123ft6_s > * {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0
}

._3CcacPTl > * {
    -webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

.mjR2t3JC > * {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

._1ByjBZdj > * {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

._2Y2ytZRI > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

.K9imFAYv > * {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%)
}

._2Ra8uBlT {
    background-color: rgba(0, 0, 0, 0) !important
}

._1EMt6DRh {
    -webkit-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: background-color cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

._1Cpn1nNC {
    -webkit-transition: background-color ease-out;
    -o-transition: background-color ease-out;
    transition: background-color ease-out
}

._32nl5FGJ {
    background-color: rgba(0, 0, 0, 0) !important
}

._2Ra8uBlT > * {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 1
}

._1EMt6DRh > * {
    -webkit-transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    transition: opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89);
    -o-transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s;
    transition: transform cubic-bezier(0.15, 0.59, 0.45, 0.89), opacity ease-out .05s, -webkit-transform cubic-bezier(0.15, 0.59, 0.45, 0.89)
}

.A_Xs8XZT > * {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

._3vKdDxPm > * {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

._1Cpn1nNC > * {
    -webkit-transition: opacity ease-in-out, -webkit-transform ease-in-out;
    transition: opacity ease-in-out, -webkit-transform ease-in-out;
    -o-transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out;
    transition: transform ease-in-out, opacity ease-in-out, -webkit-transform ease-in-out
}

._32nl5FGJ > * {
    opacity: 1;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%)
}

:root {
    --gt-light-text-white: #FFF;
    --gt-light-text-primary: rgba(255, 255, 255, 0.90);
    --gt-light-text-secondary: rgba(255, 255, 255, 0.65);
    --gt-light-text-tertiary: rgba(255, 255, 255, 0.45);
    --gt-light-text-quaternary: rgba(255, 255, 255, 0.35);
    --gt-dark-text-black: #000;
    --gt-dark-text-primary: rgba(0, 0, 0, 0.90);
    --gt-dark-text-secondary: rgba(0, 0, 0, 0.65);
    --gt-dark-text-tertiary: rgba(0, 0, 0, 0.45);
    --gt-dark-text-quaternary: rgba(0, 0, 0, 0.25);
    --gt-general-function-background: rgba(0, 0, 0, 0.65);
    --gt-general-function-toast: rgba(0, 0, 0, 0.75);
    --general-game-element-physics: #FFDE00;
    --general-game-element-fire: #FB5421;
    --general-game-element-electric: #2CACF1;
    --general-game-element-ice: #98EFF0;
    --general-game-element-ether: #FF4483;
    --general-game-rank-golden-1: #FFB500;
    --general-game-rank-purple-1: #E900FF;
    --general-game-rank-blue-1: #00A9FF;
    --general-game-rank-green-1: #7DA89B;
    --general-game-rank-golden-2: linear-gradient(180deg, #FD9300 0%, #F25300 100%);
    --general-game-rank-purple-2: linear-gradient(180deg, #D73CEB 0%, #8A1FE3 100%);
    --general-game-rank-blue-2: linear-gradient(180deg, #5EC1F6 0%, #527BF4 100%);
    --general-function-yellow: #FFDE00;
    --general-function-yellow-2: linear-gradient(180deg, #F2C81C 0%, #F17A07 100%);
    --general-function-orange: #F1AD3D;
    --general-function-green: #91BC00;
    --general-function-confirm: #5CC83D;
    --general-function-warn: #E63223;
    --general-function-blue: #57BFF7;
    --general-function-metal: linear-gradient(90deg, #ABABAB -0.42%, #808080 99.58%);
    --general-grey-white-1: rgba(255, 255, 255, 1);
    --general-grey-white-2: rgba(255, 255, 255, 0.48);
    --general-grey-white-3: rgba(255, 255, 255, 0.32);
    --general-grey-white-4: rgba(255, 255, 255, 0.16);
    --general-grey-white-5: rgba(255, 255, 255, 0.12);
    --general-grey-white-6: rgba(255, 255, 255, 0.08);
    --general-grey-white-7: rgba(255, 255, 255, 0.04);
    --general-grey-black-1: rgba(0, 0, 0, 1);
    --general-grey-black-2: rgba(0, 0, 0, 0.48);
    --general-grey-black-3: rgba(0, 0, 0, 0.32);
    --general-grey-black-4: rgba(0, 0, 0, 0.16);
    --general-grey-black-5: rgba(0, 0, 0, 0.12);
    --general-grey-black-6: rgba(0, 0, 0, 0.08);
    --general-grey-black-7: rgba(0, 0, 0, 0.07);
    --light-grey-white-1: #fff;
    --light-grey-white-2: #D9DBDD;
    --light-grey-white-3: #7D7F80;
    --light-grey-white-4: #474748;
    --light-grey-white-5: #212322;
    --light-brand-yellow-1: #FFEF82;
    --light-brand-yellow-2: #FFE84D;
    --light-brand-yellow-3: #FFDE00;
    --light-brand-yellow-4: #FFC805;
    --light-brand-yellow-5: #F0AC45;
    --light-brand-green-1: #C9D86C;
    --light-brand-green-2: #AFCC3D;
    --light-brand-green-3: #91BC00;
    --light-brand-green-4: #7FAA06;
    --light-brand-green-5: #73A111;
    --dark-grey-black-1: #000000;
    --dark-grey-black-2: #0A0A0A;
    --dark-grey-black-3: #161817;
    --dark-grey-black-4: #1D1F1E;
    --dark-grey-black-5: #2A2C2B;
    --dark-grey-black-6: #333534;
    --dark-grey-black-7: #494949;
    --light-text-white-1: #FFF;
    --light-text-white-2: rgba(255, 255, 255, 0.90);
    --light-text-white-3: rgba(255, 255, 255, 0.65);
    --light-text-white-4: rgba(255, 255, 255, 0.45);
    --light-text-white-5: rgba(255, 255, 255, 0.35);
    --dark-text-black-1: #000;
    --dark-text-black-2: rgba(0, 0, 0, 0.90);
    --dark-text-black-3: rgba(0, 0, 0, 0.65);
    --dark-text-black-4: rgba(0, 0, 0, 0.45);
    --dark-text-black-5: rgba(0, 0, 0, 0.25);
}

.me-share {
    position: relative;
}

.me-share__btn {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.me-share__icon {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.me-share__icon--hover {
    opacity: 0;
}

.me-share__icon--hover:hover {
    opacity: 1;
}

.me-share-popover {
    font-size: 100px;
}

.me-share-popover * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.me-share-popover__arrow {
    position: absolute;
    top: calc(100% + 0.1em);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-width: 0 0.1em 0.2em;
    border-style: solid;
}

.me-share-popover__arrow--after {
    position: absolute;
    top: 2px;
    left: -0.1em;
    width: 0;
    height: 0;
    border-width: 0 0.1em 0.2em;
    border-style: solid;
}

.me-share-popover__content {
    position: absolute;
    padding: 0.14em 0.2em;
    border-radius: 0.1em;
    max-width: 6.5em;
}

.me-share-popover__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.05em;
}

.me-share-popover__desc {
    font-size: 0.2em;
    line-height: 1.2em;
    margin-top: 0.3em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.me-share-popover__item {
    width: 0.53em;
    height: 0.53em;
    margin-right: 0.25em;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.me-share-popover__item:last-of-type {
    margin-right: 0;
}

.me-share-popover__icon {
    width: 100%;
    height: 100%;
    display: block;
}

.me-share-popover--posleft .me-share-popover__arrow {
    top: 50%;
    left: auto;
    right: calc(100% + 0.1em);
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

.me-share-popover--posleft .me-share-popover__content {
    padding: 0.2em 0.07em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: -1.05em;
}

.me-share-popover--posleft .me-share-popover__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.me-share-popover--posleft .me-share-popover__item {
    margin-right: 0;
    margin-bottom: 0.25em;
}

.me-share-popover--posleft .me-share-popover__item:last-of-type {
    margin-bottom: 0;
}

.me-share-popover--posright .me-share-popover__arrow {
    top: 50%;
    left: calc(100% + 0.1em);
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg);
}

.me-share-popover--posright .me-share-popover__content {
    padding: 0.2em 0.07em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: -1.05em;
}

.me-share-popover--posright .me-share-popover__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.me-share-popover--posright .me-share-popover__item {
    margin-right: 0;
    margin-bottom: 0.25em;
}

.me-share-popover--posright .me-share-popover__item:last-of-type {
    margin-bottom: 0;
}

.me-share-popover--postop .me-share-popover__arrow {
    top: auto;
    bottom: calc(100% + 0.1em);
    -webkit-transform: translateX(-50%) rotate(180deg);
    -ms-transform: translateX(-50%) rotate(180deg);
    transform: translateX(-50%) rotate(180deg);
}

.me-share-popover--postop .me-share-popover__content {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: calc(100% + 0.3em);
}

.me-share-popover--postop.me-share-popover--arrowleft .me-share-popover__content {
    left: -0.25em;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.me-share-popover--postop.me-share-popover--arrowright .me-share-popover__content {
    left: auto;
    right: -0.25em;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.me-share-popover--posbottom .me-share-popover__arrow {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.me-share-popover--posbottom .me-share-popover__content {
    top: calc(100% + 0.3em);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.me-share-popover--posbottom.me-share-popover--arrowleft .me-share-popover__content {
    left: -0.26em;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.me-share-popover--posbottom.me-share-popover--arrowright .me-share-popover__content {
    left: auto;
    right: -0.26em;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.me-share-popover--mobile {
    font-size: 50px;
}