body {
    color: #121212;
    font-size: 14px;
    -webkit-tap-highlight-color: rgba(18, 18, 18, 0);
    margin: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

input[type='number'] {
    -moz-appearance: textfield;
}

.Modal-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity .3s ease-out;
    z-index: 203;
}

.Modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: background-color .3s ease-out;
    z-index: 0;
    background-color: hsla(0, 0%, 7%, .65);
}

.Modal {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    box-shadow: 0 5px 20px hsl(0deg 0% 7% / 10%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    max-height: calc(100vh - 48px);
    position: relative;
    transition: max-height .8s ease;
    width: 400px;
    z-index: 1;
}

.Modal-inner {
    background: #fff;
    border-radius: 2px;
    overflow: auto;
}

.Modal-title {
    color: #121212;
    font-size: 24px;
    font-weight: 500;
    margin-top: 40px;
    text-align: center;
    margin-bottom: 0;
}

.Modal-content {
    -webkit-box-flex: 1;
    flex: 1 1;
    line-height: 1.7;
    margin-top: 24px;
    opacity: 1;
    padding: 0 24px 32px;
}

.BindPhoneForm .SignFlow {
    overflow: hidden;
}

.Button--primary.Button--blue {
    margin: 0;
    appearance: none;
    outline: none;
    font-size: 14px;
    line-height: 32px;
    padding: 0 16px;
    text-align: center;
    cursor: pointer;
    border: solid 1px #056de8;
    border-radius: 3px;
    background-color: #056de8;
    display: block;
    width: 220px;
    margin: 55px auto 0;
    color: #fff;
    box-sizing: border-box;
}

.Button--primary.Button--blue:focus {
    outline: none;
}

.Button--primary.Button--blue:hover {
    border-color: #0461cf;
    background-color: #0461cf;
}

.BindPhone-helpWrapper {
    -webkit-box-pack: end;
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    width: 100%;
}

.Button--link {
    margin: 0;
    appearance: none;
    outline: none;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    color: #8590a6;
    background: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    height: auto;
    line-height: inherit;
    padding: 0;
}

.Button--link:focus {
    outline: none;
    transition: box-shadow .3s, -webkit-box-shadow .3s;
}

.Button--link:hover {
    color: #144583;
}

.SignFlow {
    overflow: hidden;
}

.SignFlow-smsBindPhoneInputContainer {
    position: relative;
    margin-top: 12px;
}

.SignFlow-smsBindPhoneInputButton {
    margin: 0;
    appearance: none;
    outline: none;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    background: none;
    border: none;
    border-radius: 0;
    height: auto;
    line-height: inherit;
    color: #175199;
    padding: 4px 0;
    position: absolute;
    right: 0;
    top: 24px;
    transform: translateY(-50%);
}

.Button--plain:focus {
    outline: none;
    transition: box-shadow .3s, -webkit-box-shadow .3s;
}

.Button--plain:hover {
    color: #76839b;
}

.CountingDownButton[disabled] {
    cursor: auto;
    opacity: 0.5;
    pointer-events: none;
}

.SignFlowInput {
    -webkit-box-flex: 1;
    flex: 1 1;
    position: relative;
}

.BindPhoneForm .SignFlow-smsBindPhoneInput {
    width: 100%;
    border-bottom: solid 1px #ebebeb;
}

.Input-wrapper {
    position: relative;
    display: flex;
    font-size: 14px;
    background: #fff;
    align-items: center;
    -webkit-box-align: center;
    transition: background .2s, border .2s;
    box-sizing: border-box;
}

.BindPhoneForm .Input-wrapper {
    border-radius: 0;
}

.SignFlowInput .Input-wrapper {
    color: #8590a6;
    height: 48px;
    padding: 0;
    width: 100%;
}

.BindPhoneForm .SignFlow-smsBindPhoneInput .Input-wrapper,
.BindPhoneForm .SignFlow-smsBindPhoneInput .Input-wrapper.is-focus {
    border: none;
}

input.Input {
    resize: none;
    padding: 0;
    overflow: inherit;
    flex: 1 1;
    border: none;
    background: transparent;
    -webkit-box-flex: 1;
    color: #121212;
    line-height: 24px;
    font-weight: 400;
}

.SignFlowInput input.Input {
    height: 48px;
}

.Input:focus {
    outline: none;
}

.SignFlowInput-errorMask {
    color: #f1403c;
    font-size: 14px;
    height: 90%;
    margin-top: -47px;
    padding: 12px 0 0 20px;
    position: absolute;
    background-color: #fff;
    cursor: text;
    opacity: 1;
    box-sizing: border-box;
    transition: opacity .25s ease;
    padding-left: 0;
    right: auto;
    text-align: left;
    width: 100%;
}

.SignFlowInput-errorMask::before {
    content: '';
    position: absolute;
    top: 0;
    left: -16px;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff);
    height: 0;
    opacity: 0;
    overflow: hidden;
    width: 0;
}

.SignFlowInput-errorMask--hidden {
    height: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
}

.SignFlow-account {
    margin-top: 24px;
    border-bottom: solid 1px #ebebeb;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
}

.SignFlow-supportedCountriesSelectContainer {
    display: inline-block;
    min-width: 72px;
}

.SignFlow-accountSeperator {
    background: #ebebeb;
    height: 22px;
    margin: 0 12px;
    width: 1px;
}

.SignFlowInput {
    position: relative;
}

.SignFlow-accountInputContainer {
    -webkit-box-flex: 1;
    flex: 1 1;
    overflow: hidden;
}

.Popover {
    position: relative;
    display: inline-block;
}

.InputLike.InputButton {
    margin: 0;
    appearance: none;
    outline: none;
    font-size: 14px;
    cursor: pointer;
    height: auto;
    line-height: inherit;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    background-color: #fff;
    transition: background .2s, border .2s;
    box-sizing: border-box;
    border-radius: 3px;
    text-align: left;
    padding: 0;
    border: solid 1px transparent;
    color: #8590a6;
}

.InputLike.InputButton:focus {
    outline: none;
    transition: box-shadow .3s, -webkit-box-shadow .3s;
}

.InputLike.InputButton:hover {
    color: #76839b;
    background-color: transparent;
}

.Modal-closeButton {
    background: none;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    color: #8590a6;
    border: none;
    border-radius: 0;
    height: auto;
    line-height: inherit;
    padding: 12px;
    position: absolute;
    right: -60px;
    top: 8px;
}

.Modal-closeIcon {
    fill: #fff;
    vertical-align: top;
}

.Modal-footer {
    background: #f6f6f6;
    border-top: solid 1px #ebebeb;
    font-size: 13px;
    line-height: 1.7;
    padding: 16px 24px;
    color: #8590a6;
    display: none;
}

.errorinput {
    position: absolute;
    right: 0;
    color: #f1403c;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 0px transparent inset !important;
}

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    transition: background-color 5000s ease-in-out 0s !important;
}

input:-internal-autofill-selected {
    transition: background-color 5000s ease-in-out 0s !important;
    background-color: transparent !important;
}

.Modal{width:552px;}
.Modal-inner{border-radius: 10px;}
.Modal-content{padding-left:70px;padding-right:70px;}
.Button--primary.Button--blue{width:100%;}
.Modal-footer{padding-left:70px;padding-right:70px;text-align:justify;}

.setAvatarFlow{
    overflow: hidden;
}
.setAvatarFlow > p{text-align: center;color: #999;margin-top: 0;margin-bottom: 24px;}
.avatarFlow{position: relative;display: flex;flex: 1;word-break: break-all;justify-content: center;}
.avatarFlow-content{position: relative;width: 80px;height: 80px;overflow: hidden;border: solid 1px #d8d8d8;border-radius: 50%;cursor: pointer;}
.avatarFlow-content:before{content: '更换头像';display: inline-block;position: absolute;width: 100%;height: 32px;bottom: 0;left: 0;text-align: center;right: 0;background-color: rgba(0, 0, 0, 0.5);color: #fff;line-height: 24px;font-size: 12px;}
.avatarFlow-content img{width: 100%;height: 100%;object-fit: cover;}
.userinfo-avatar-uploader{position: absolute;top:0;left: 0;width: 80px;height: 80px;z-index: 1;right: 0;margin: auto;}
.userinfo-avatar-uploader .avatar-uploader-btn{position: relative;display: inline-block;cursor: pointer;width: 80px;height: 80px;}
.userinfo-avatar-uploader .avatar-uploader-btn input[type="file"] {position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;display: block;opacity: 0;}

.setNameFlow{overflow: hidden;}
.setNameFlow .nameFlow{border-bottom: solid 1px #ebebeb;}

@media screen and (max-width: 1024px) {
    .Modal{width: 92%;}
    .Modal-content{padding-left: 30px;padding-right: 30px;}
    .Modal-footer{padding-left:30px;padding-right:30px;}
    .SignFlow-account{margin-top: 0;}
    .Modal-closeButton{right: 0;top:-50px;}
}