:root {
    --primaryMainColor: #5abc55;
    --primaryGrayColor: #e6e6e6;
    --primaryLightColor: #def2dd;
}
a {
    text-decoration: none;
    -webkit-backface-visibility: hidden;
    color: var(--primaryMainColor);
}
[v-cloak] {
  display: none;
}
.padding-small {padding: 8px 0;}
.padding-middle {padding: 14px 0;}
.padding-big {padding: 18px 0;}
.mb-small {margin-bottom: 10px;}
.mb-middle {margin-bottom: 20px;}
.mb-big {margin-bottom: 30px;}
.pointer {cursor: pointer;}
.text-one { white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}
.text-two { text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;}
.text-666 {color: #666;}
.text-999 {color: #999;}
.text-light-grey {color: #a7a7a7;}
.text-primary {color: var(--primaryMainColor)}
.text-hover:hover{color: var(--primaryMainColor);}
.font-16 {font-size: 16px;}
.font-18 {font-size: 18px;}
.font-20 {font-size: 20px;}
.font-bold {font-weight: bold;}
img {width: 100%; height: auto;}
.relative {position: relative;}
.absolute {position: absolute;}
.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
}
::-webkit-input-placeholder { /* WebKit browsers */
  color: #b2b2b2;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #b2b2b2;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #b2b2b2;
}
.seperate-status-play {
    border-color: var(--primaryMainColor);
    background-color: var(--primaryLightColor);
    color: var(--primaryMainColor);
}
.seperate-status-waiting {
    border-color: #B4DAB2;
    background-color: #B4DAB2;
    color: #fff;
}
.seperate-status-living {
    background-color: var(--primaryMainColor);
    border-color: var(--primaryMainColor);
    color: #fff;
}

.seperate-status {
    font-size: 20px;
    border-radius: 28px;
    justify-content: center;
    padding: 4px 14px;
    border-style: solid;
    border-width: 1px;
}

.spinner {
    height: 16px;
    font-size: 10px;
    align-items: flex-end;
}
.spinner>div {
    background-color: #ffffff;
    height: 100%;
    width: 2px;
    margin-right: 2px;
     display: inline-block;
    -webkit-animation: stretchdelay 1.9s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect1 {
    -webkit-animation-delay: -1.3s;
    animation-delay: -1.0s;
}
.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@keyframes stretchdelay {
    5% {
        height: 100%;
    }
    10% {
        height: 10%;
    }
    15% {
        height: 30%;
    }
    32% {
        height: 70%;
    }
    36% {
        height: 30%;
    }
    48% {
        height: 40%;
    }
    60% {
        height: 5%;
    }
    80% {
        height: 30%;
    }
    88% {
        height: 60%;
    }
    100% {
        height: 90%;
    }
}
.prev-act {background-image: url('/public/index/images/prev.png');background-repeat: no-repeat; background-position: left; padding-left: 14px;}
.next-act {background-image: url('/public/index/images/next.png');background-repeat: no-repeat; background-position: right; padding-right: 14px;}
.btn-disable {background-color: #b4dab2!important;}
.big-btn {font-size: 16px;background-color: var(--primaryMainColor); color: #fff;padding: 6px 14px; border-radius: 16px;text-align: center;}
.login-info .top-item:not(:last-child) {margin-right: 14px;}
.login-info .user-avatar {width: 30px;height: 30px; margin-right: 10px;}
.login-info .user-avatar img {width: 100%;height: 100%; border-radius: 50%;}
.bg-img {background-image: url('/public/index/images/bg.png'); background-size: 100%; background-repeat: no-repeat;background-position: bottom;background-color: #5cdb53;}
.flex-column {flex-direction: column;}
.flex-between {justify-content: space-between;}
.flex-center {align-items: center; align-content: center;}
#app {}
.logo {width: 400px;}
.wrapper {width: 88vw; margin: 0 auto;min-width: 1080px;padding: 0 30px}
.download,.index {height: 90vh;background-color: var(--primaryMainColor);}
.header {height: 10vh; min-height: 80px;}
.login-info {align-items: center;}
.login-box {
    border-radius: 6px;
    box-shadow: 0px 0px 5px 1px #999;
    padding: 40px 30px;
    position: fixed;
    top: 24vh;
    right: 16vw;
    background-color: #fff;
    width: 300px;
    font-size: 14px;
}
.login-box .qrcode-item {width: 120px; height: 120px;}
.login-box .header-title {font-size: 20px; padding: 6px 0;}
.simple-form .simple-form-item:not(:last-child) {margin-bottom: 10px;}
.simple-form .simple-form-item input,.simple-form .simple-form-item button {width: 100%;}
.simple-form .simple-form-item input {background-color: #f2f2f2; border-radius: 26px; padding: 6px 20px; height: 40px;}
.simple-form .simple-form-item .obtain-sms-code {right: 10px;bottom: 8px;}
.check-circle {border: 2px solid #b2b2b2;border-radius: 50%;padding: 3px;margin-right: 6px;margin-top: 4px;}
.check-circle-checked  {border-color: var(--primaryMainColor);}
.checked {width: 8px;height: 8px; border-radius: 50%;}
.check-circle-checked .checked { background-color: var(--primaryMainColor) }
.footer {
    padding: 20px 0;
    align-items: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    color: #fff;
    font-size: 14px;
}
.footer a {color: #fff;font-size: 14px;}
.footer .link:not(:last-child) {margin-right: 8px;}
.footer a:hover {text-decoration: underline;}

/** element-ui style reset */