/* reset style */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, fieldset,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-size: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  height: 100%;
  font-feature-settings: "ss01", "ss02", "cv01", "cv03";
  font-variant: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual;
}
body {
  margin: 0;
  line-height: 1;
  font-size: 14px;
  height: 100%;
  position: relative;
  color: #fff;
}
a,
button,
:focus,
a:focus,
button:focus,
a:active,
a:hover {
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}
a {
  text-decoration: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
}
a:hover {
  cursor: pointer;
}
b,
strong {
  font-weight: bold;
}

button::before,
button::after {
  opacity: 0;
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 * 4. Remove any default :focus styles
 * 5. Make sure webkit font smoothing is being inherited
 * 6. Remove default gradient in Android Firefox / FirefoxOS
 */
button,
input,
select,
textarea {
  margin: 0; /* 3 */
  font-size: 100%; /* 2 */
  font-family: inherit; /* 1 */
  outline-offset: 0; /* 4 */
  outline-style: none; /* 4 */
  outline-width: 0; /* 4 */
  -webkit-font-smoothing: inherit; /* 5 */
  background-image: none; /* 6 */
  border: 0;
  font-family: 'Inter var';
}
button,
input {
  line-height: normal;
  padding: 0;
}
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *  and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *  `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  cursor: pointer; /* 3 */
  -webkit-appearance: none; /* 2 */
}

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove most spacing between table cells.
 */

table {
  border-spacing: 0;
  border-collapse: collapse;
}

input[type="text"] {
  appearance: none;
  -webkit-appearance: none; /* safari */
  -moz-appearance: none;
}

button {
  border: 0;
  background: transparent;
}

/* main style */
html,body { width: 100%;height: 100%; position: relative;overflow: hidden;background-color: #081126; }
#app {position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto;}
.language {position: absolute;top: 10px;right: 10px;padding: 0 10px;border:1px solid #fff;border-radius: 2px;font-size: 12px;line-height: 24px;text-transform: uppercase;color:#fff;}
.logo-wrap { padding-top: 50px;padding-bottom: 30px; }
.logo { display: block; width: 170px; margin: 0 auto; }
.form {width: 90vw;max-width: 320px;margin: 0 auto;box-sizing: border-box;padding-bottom: 40px;}
.form .row{padding-top: 22px;position: relative;}
.form .row .label{display: none;color: #717CFF;padding: 0 20px;font-size: 15px;line-height: 20px;}
.form .row.focus .label{ top: 13px; }
.form .row .control{box-sizing: border-box; padding: 0; border-bottom: 1px solid rgba(113, 124, 255, 0.5); display: -webkit-flex; display: flex;position: relative;z-index: 2;border:1px solid #ccc;border-radius: 4px;background: rgba(255, 255, 255, 0.06);}
.form .row .control .perfix { display: inline-block; padding: 0 5px 0 14px; color: #fff; height: 44px; line-height: 44px;background: transparent;font-size: 15px;text-align: center;}
.form .row .control .perfix option {text-align: center;}
.form .row .control .perfix + input {padding-left: 10px;}
.form .row .control .input { flex: 1;display: -webkit-flex; display: flex;align-items: center;}
.form .row .control .input input {width: 100%;box-sizing: border-box;}
.form .row .control input { padding: 12px 20px; color: #fff; height: 20px; line-height: 20px;background: transparent;font-size: 15px;flex: 1;}
.form .row .control input::placeholder {color:#999}
.form .row .control .suffix {width: 44px;height: 44px;display: flex;justify-content: center;align-items: center;cursor: pointer;}
.form .row .control .suffix img {width: 22px;height: 22px;}
.form .row .control .btn{display: inline-block;min-width:90px;height: 44px; line-height: 44px; font-size: 13px; position: relative;color: #fff;background-color: transparent;padding-right: 14px;}
.form .submit{padding-top: 40px;text-align: center;padding-bottom: 20px;}
.form .submit .btn{background: #624CF4;color: #fff;display: inline-block; height: 44px; line-height: 44px; padding: 0 20px;font-size: 16px;text-align: center;border-radius: 4px;position: relative;width: 100%;}
.form .submit .btn[disabled]{color: #aaa;}
.form .submit .btn[disabled]:after {content: '';background: rgba(0,0,0,0.3);position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 1;}
.form .submit .reg {display: inline-block; height: 44px; line-height: 44px; font-size: 16px;text-align: center;border-radius: 4px;position: relative;width: 100%;color: #624CF4;}
.form .submit .btn + .reg {margin-top: 20px;}

.app-toast-wrap{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 99999;background-color: transparent;display: none;}
.app-toast-wrap.show {display: block;}
.app-toast-wrap .inner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.6);box-sizing: border-box;padding: 20px;border-radius: 8px;}
.app-toast-wrap .inner .txt {font-size: 16px;text-align: center;color: #fff;line-height: 24px;}

.dial-modal{position: fixed;top: 120vh;left: 0;width: 0;height: 0;z-index: 999;background: rgba(0, 0, 0, 0.7);visibility: hidden;}
.dial-modal .backdrop{position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.dial-modal.show {width:100%;height:100%;top: 0;visibility: visible;}
.dial-modal .inner {position: absolute;bottom: -120vh;left: 50%;transform: translate(-50%, 0%);height:60vh;width: 100vw;background-color: #333;border-radius: 22px 22px 0 0;display: flex;flex-direction: column;padding-bottom: 20px;transition: bottom .2s;z-index: 999;}
.dial-modal.show .inner {bottom: 0;}
.dial-modal .inner .top {height: 40px;display: flex;justify-content: flex-end;padding: 0 10px;}
.close {width: 40px;height: 40px;position: relative;transform: rotate(45deg);}
.close::before{content: '';width: 16px;height: 1px;background-color: #666;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;}
.close::after{content: '';width: 1px;height: 16px;background-color: #666;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;}
.dial-modal .inner .head {padding:10px 28px;display: flex;align-items: center;justify-content: center;}
.dial-modal .inner .head .input {width: 100%;border: 1px solid #666;height: 44px;border-radius: 10px;box-sizing: border-box;padding: 0 12px;display: flex;align-items: center;}
.dial-modal .inner .head .input .ipt {flex: 1;height: 100%;background: transparent;color: #fff;}
.dial-modal .inner .head .input .close {margin-right: -10px;}
.dial-modal .inner .content {flex: 1;overflow-y: auto;}
.dial-modal .inner .content .country-item{padding:12px 30px;color:#ccc;font-size:14px;display: flex;align-items: center;}
.dial-modal .inner .content .country-item.selected{background-color: #555;color: #fff;}
.dial-modal .inner .content .country-item .name {margin-left: 10px;}

.tabs-bar {width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; z-index: 2; border-bottom: 1px solid #1A1919; box-sizing: border-box; padding: 0 14px;}
.tab-item {height: 50px;flex: 1;display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 15px; font-size: 16px; color: #767676; position: relative;}
.tab-item.on {color: #fff;font-weight: bold;}
.tab-item.on:after { content: ''; width: 40px; height: 3px; background-color: #624CF4; position: absolute; bottom: 0; left: 50%; margin-left: -20px; }