.MiniValine {
    * {
      box-sizing: border-box;
      font-family: Varela Round, Rubik, Helvetica, Arial, sans-serif, PingFang SC, Lantinghei SC,
        Helvetica Neue, Helvetica, Arial, Microsoft YaHei, STHeitiSC-Light, simsun,
        WenQuanYi Zen Hei, WenQuanYi Micro Hei, "sans-serif";
      font-weight: normal;
      line-height: 1.42857143;
      color: #3c484e;
      transition: all 0.3s ease;
      margin: initial;
      padding: initial;
    }
    p {
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }
    img{
      display: inline;
      background-color: transparent !important;
      margin: 0 !important;
    }
    pre {
      font-size: 14px !important;
    }
    .vemoticon-img {
      display: inline-block;
      max-height: 24px;
      border-radius: 0;
      max-width: 100px;
      background-color: transparent !important;
    }
    .vemoji{
      background-color: transparent !important;
      max-height: 24px;
      border-radius: 0;
      margin-top: -10px;
      max-width: 100px;
      display: inline;
      border: none;
    }
  
    .vsubmitting {
      margin: 1em 0;
    }
  
    .vcancel-comment-reply {
      cursor: pointer;
      color: #4b5b62;
      text-decoration: underline;
      svg{
        fill: #bbb;
        margin-right: 5px;
        margin-top: 5px;
      }
      svg:hover{
        fill: #66b1ff;
      }
    }
    .vinputs-wrap{
      border-style: dashed;
      border-radius: 8px;
      margin-bottom: 10px;
      overflow: hidden;
      position: relative;
      padding: 10px;
      border: 1px dashed rgba(85,85,85,0.3);
      transition: all 0.28s ease;
      -moz-transition: all 0.28s ease;
      -webkit-transition: all 0.28s ease;
      -o-transition: all 0.28s ease;
     }
     .vinputs-wrap:hover{
          border: 1px dashed #2196f3;
     }
      .cancel-reply-btn{
        position: absolute !important;
        right: 0.0001em;
        top: 0.0001em;
        z-index: 1;
      }
    .vinputs-area {
      overflow: hidden;
      position: relative;
      border-radius:10px;
      -moz-border-radius:10px;
      .veditor-area {
        position: inherit;
        padding: 10px 5px;
        font-size: 0.875em;
        .veditor{
          background: transparent;
        }
      }
      .btn-wrap {
        right: 1.5em;
        bottom: 0;
        text-align: right;
        .vfunction-btn {
          display: inline-block;
          margin: 10px;
          svg {
            fill: #bbb;
            cursor: pointer;
            &:hover {
              fill: #777777;
            }
            &:active {
              fill: #777777;
            }
          }
        }
      }
      .actived svg{
        fill: #66b1ff !important;
      }
      .vrow{
        font-size: 0;
        padding: 10px 0;
        .vcol{
          display: inline-block;
          vertical-align: middle;
          font-size: 14px;
        }
        .vcol-30{
          width: 30%;
        }
        .vcol-70{
          width: 70%;
        }
        .text-right{
          text-align: right;
        }
      }
      .vextra-area {
        margin: 0.4em 0 0.4em 0.5em;
        ::-webkit-scrollbar{
          height: 10px;
          width: 6px;
          background-color:#F5F5F5;
        }
        ::-webkit-scrollbar-track{
          -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
          border-radius:10px;
          background-color:#F5F5F5;
        }
        ::-webkit-scrollbar-thumb{
        border-radius:10px;
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
        background-color:#555;
       }
        .vsmile-icons {
          padding: 0.2em 0;
          border-top: 1px solid #ededed;
          border-radius: 0;
          margin: 0.3em 0;
          max-height: 145px;
          overflow: auto;
          background: #f6f6f6;
          border-radius: 4px;
          padding: 8px;
          img {
            background: #f6f6f6;
            display: inline-block;
            width: auto !important;
            height: 28px !important;
            margin-right: 4px;
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            transition: box-shadow .2s ease-out,background .2s ease-out;
          }
          img:hover {
              background: #fbfbfb;
              box-shadow: 1px 1px 2px rgba(0,0,0,.1), -1px -1px 2px rgba(255,255,255,.5), inset 8px 8px 16px rgba(0,0,0,.05), inset -8px -8px 16px rgba(255,255,255,.4);
          }
          ul,li{
            margin: 0;
            padding: 0;
          }
          li{
            display: none;
          }
        }
        .vsmile-bar{
          ul,li{
            margin: 0;
            padding: 0;
          }
          li{
              list-style-type: none;
              display: inline-block;
              line-height: 30px;
              font-size: 14px;
              cursor: pointer;
              margin-right: 3px;
              img {
                  background: #f6f6f6;
                  display: inline-block;
                  width: auto !important;
                  height: 28px !important;
                  margin-right: 4px;
                  cursor: pointer;
                  padding: 8px;
                  border-radius: 4px;
                  transition: box-shadow .2s ease-out,background .2s ease-out;
              }
              img:hover {
                  background: #fbfbfb;
                  box-shadow: 1px 1px 2px rgba(0,0,0,.1), -1px -1px 2px rgba(255,255,255,.5), inset 8px 8px 16px rgba(0,0,0,.05), inset -8px -8px 16px rgba(255,255,255,.4);
              }
          }
        }
        .vpreview-text {
          border-top: 1px solid #ededed;
          border-radius: 0;
          padding: 0.5em 0.5em;
          margin: 0.3em 0;
          overflow: auto;
          img{
            max-width: 100%  !important;
            border: none;
          }
        }
      }
      .textarea-wrapper {
        color: #4b5b62;
        width: 100%;
        height: 100%;
        background: transparent;
        position: relative;
        border-radius: 0;
        textarea {
          color: #4b5b62;
          width: 100%;
          background: transparent;
          border: none;
          resize: none;
          min-height: 8em;
          margin: 0;
          &:focus {
            border-color: #c4c8cb;
            outline: 0;
          }
        }
      }
      .trigger-section {
        display: none;
      }
      .auth-section {
        display: flex;
        display: -ms-flexbox;
        padding: 0.3em 0.6em;
  
        .input-wrapper {
          -ms-flex: 1 1 27%;
          flex: 1 1 27%;
          width: 27%;
          border-radius: 0;
          border-bottom: 1px dashed rgba(85,85,85,0.3);
          input {
            color: #4b5b62;
            border: none;
            border-radius: 0;
            padding: 0.6em;
            margin: 0;
            line-height: 2;
            font-size: 1em !important;
            &:focus {
              border-color: #c4c8cb;
              outline: 0;
            }
          }
        }
        .input-wrapper:hover{
          border-bottom: 1px dashed #2196f3;
        }
        input {
          width: 100%;
          background: transparent;
        }
  
        .post-action {
          -ms-flex: 1 1 19%;
          flex: 1 1 19%;
          width: 19%;
          margin: 0;
          padding: 2px 0 0;
  
          button {
            color: #fff;
            width: 100%;
            line-height: 2;
            font-weight: bolder;
            border-radius: 30px;
            border: 1px solid #e9eff3;
            background-color: #111;
            padding: 0.4em 0.5em;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-size: 1em !important;
          }
          button:hover {
            background-color: #444;
          }
        }
        @media screen and(max-width: 720px) {
          display: block;
          .input-wrapper,
          .post-action {
            -ms-flex: 1 1 100%;
            flex: 1 1 100%;
            padding-right: 0;
            width: 100%;
          }
        }
      }
    }
        .vmark {
        position: absolute;
        background: rgba(0, 0, 0, 0.65);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        .valert {
          padding: 2em 0 0 0;
          .vtext {
            color: #fff;
            padding: 15px;
          }
          .vcode {
            width: 75px;
            border-radius: 5px;
            background: #dedede;
            &:focus {
              border-color: #3090e4;
              background-color: #fff;
            }
          }
        }
        @media screen and(max-width: 720px) {
          .valert {
            padding: 8em 0;
            .vtext {
              color: #fff;
              padding: 10px;
            }
          }
        }
      }
  
    .info {
      margin: 2em 0;
      font-size: 16px;
      line-height: 1;
      position: relative;
      text-align: center;
  
      &::before {
        display: block;
        content: "";
        border-top: 1px solid rgba(150, 150, 150, 0.08);
        margin: 0 25%;
        position: relative;
        top: 20px;
        z-index: 1;
      }
      svg {
        margin-right: 2px;
        overflow: hidden;
        fill: currentColor;
      }
  
      .col {
        display: inline-block;
        padding: 0 20px;
        position: relative;
        background: transparent;
        z-index: 2;
        .count{
          font-size: 1.375rem;
          color: #555;
          font-weight: inherit;
        }
      }
    }
    .power {
      color: #999;
      font-size: 0.625em !important;
      position: relative;
    }
    a {
      text-decoration: none;
      color: #3eb0ef;
      border: none;
    }
    .txt-center {
      text-align: center;
    }
    .float-right {
      float: right !important;
    }
    .pd5 {
      padding: 5px;
    }
    .pd10 {
      padding: 10px;
    }
    .vbtn {
      display: inline-block;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: 1px solid #e9eff3;
      border-radius: 0.1em;
      color: #555;
      padding: 0.5em 2.3em;
      margin:0 .5em;
      cursor: pointer;
      white-space: nowrap;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      outline: none;
      min-width: 60px;
      max-width: 100%;
    }
    .vbtn:active,
    .vbtn:hover {
      background: #ffeee8;
    }
    .vpage {
      margin: 1.5em 0;
      .more {
        width: 100%;
        height: 2.5em;
        line-height: 2.5em;
        text-align: center;
        cursor: pointer;
        color: #555;
        background: #fafafa;
        border-radius: 1.25em;
      }
      .more:hover{
        color: #ff5722;
        background: #ffeee8;
      }
    }
    .vlist {
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      .vcard {
        list-style: none;
        word-break: break-all;
        img{
          max-width: 100%  !important;
          border: none;
        }
        .vcomment-body {
          padding: 2em 0.5em 2em;
          border-top: 1px solid rgba(150, 150, 150, 0.08);
          border-radius: 8px;
          @media screen and (max-width: 600px) {
            padding: 1em 1em 1em;
            border-top: 0 !important;
          }
          .vat:hover {
            color: #ff5722 !important;
          }
          .vat {
            border-radius: 10px;
            -moz-border-radius: 10px;
            float: right;
            background: transparent;
            color: #2196f3;
            font-size: .9225em;
            padding: 0.2em 1em;
            line-height: 1.2;
            cursor: pointer;
            word-break: keep-all;
            white-space: nowrap;
            text-transform: uppercase;
            font-weight: bold;
          }
  
          .vavatar {
            display: inline-block;
            height: 48px;
            width: 48px;
            position: absolute;
            top: 0;
            border-radius: 50%;
          }
          .vhead {
            line-height: 1;
            display: block;
            margin-bottom: 0.3em;
            position: relative;
            .vmeta-info {
              margin: 0 0 0 58px;
            }
            .vname {
              position: relative;
              font-size: .975em;
              color: #ff9800;
              font-weight: 700;
              margin-right: .4em;
              cursor: pointer;
              text-decoration: none;
              display: inline-block;
            }
            .vname:hover {
              color: #ff5722;
            }
            .vtag{
              font-size: 12px;
              display: inline-block;
              line-height: 20px;
              border-radius: 2px;
              color: #fff;
              padding: 0 5px;
              position: inherit;
            }
             .vmaster {
                  background: #ffa51e;
              }
              .vfriend {
                  background: #6cf;
              }
              .vvisitor {
                  background: #828282;
              }
            .vsys{
              margin: 2px;
              padding: 1px 8px;
              display: inline-block;
              font-size: .85em;
              border-radius: .2em;
              margin-right: .3em;
              color: #7889c3;
              box-sizing: border-box;
              line-height: 1.75em;
              i{
                  box-sizing: border-box;
                  line-height: 1.75em;
                  margin-right: 5px;
              }
            }
            .msvg{
              -webkit-font-smoothing: antialiased;
              display: inline-block;
              font-style: normal;
              font-weight: 400;
              font-variant: normal;
              text-rendering: auto;
              line-height: 1.75em;
              vertical-align:middle;
              width: 1.2em;
              height: 1.2em;
            }
            .spacer {
              color: #ccc;
              margin-left: 0.3em;
              margin-right: 0.3em;
            }
            .vtime {
              color: #b3b3b3;
              display: inline-block;
              font-weight: normal;
              font-size: .75em;
              margin-right: .875em;
            }
          }
          .text-wrapper {
            overflow: hidden;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin-left: 48px;
  
            .vcomment {
              position: relative;
              overflow: auto;
              a{
                  color: #2196f3;
                  line-height: inherit;
                  position: relative;
                  cursor: pointer;
                  text-decoration: none;
                  display: inline-block;
                  transition: all .28s ease;
                  -moz-transition: all .28s ease;
                  -webkit-transition: all .28s ease;
                  -o-transition: all .28s ease;
              }
              a:hover {
                  color: #ff5722;
                  text-decoration: underline;
              }
              blockquote {
                p {
                  padding-left: 12px;
                }
              }
              p {
                word-wrap: break-word;
                white-space: pre-wrap;
                word-break: break-all;
                text-align: justify;
                line-height: 1.8;
              }
              pre {
                overflow: auto;
                padding: 6px 10px;
                word-wrap: break-word;
                color: #555;
                background: #f5f2f2;
                border-radius: 3px;
                font-size: 0.875rem;
                margin: 5px 0;
              }
              &.expand {
                cursor: pointer;
                max-height: 11.25rem;
                overflow: hidden;
                &:before {
                  display: block;
                  content: "";
                  position: absolute;
                  width: 100%;
                  left: 0;
                  top: 0;
                  bottom: 3.15rem;
                  pointer-events: none;
                  background: linear-gradient(
                    180deg,
                    rgba(246,246,246,0),
                    rgba(246,246,246,.9)
                  );
                }
                &:after {
                  display: block;
                  content: "";
                  text-align: center;
                  color: #828586;
                  position: absolute;
                  width: 100%;
                  height: 3.15rem;
                  line-height: 3.15rem;
                  left: 0;
                  bottom: 0;
                  pointer-events: none;
                  background: rgba(246,246,246,.9);
                }
              }
            }
          }
        }
  
        .vcomment-children {
          margin-left: 48px;
          @media screen and (max-width: 600px) {
            margin-left: 16px;
            border-left: 1px solid rgba(150, 150, 150, 0.08);
          }
          .vshow-children-wrapper {
            margin: 0 0 2em;
            .vshow-children {
              color: #4b5b62;
              text-decoration: underline;
              cursor: pointer;
            }
          }
        }
      }
      .vempty {
        padding: 20px;
        text-align: center;
        color: #999;
      }
    }
    /************ Loading ************/
    .spinner {
      margin: 10px auto;
      width: 50px;
      height: 30px;
      text-align: center;
      font-size: 10px;
    }
    .spinner > div {
      background-color: #0366d6;
      height: 100%;
      width: 6px;
      margin-right: 3px;
      display: inline-block;
      -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
      animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }
    .spinner .r2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
    .spinner .r3 {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }
    .spinner .r4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
    .spinner .r5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
    @-webkit-keyframes sk-stretchdelay {
      0%,
      40%,
      100% {
        -webkit-transform: scaleY(0.4);
      }
      20% {
        -webkit-transform: scaleY(1);
      }
    }
    @keyframes sk-stretchdelay {
      0%,
      40%,
      100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      }
      20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
      }
    }
}