* {
  padding: 0;
  margin: 0;
  list-style-type: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

.mr15 {
  margin-right: 15px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb10 {
  margin-bottom: 10px;
}

.pv15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.pull-right {
  float: right;
}

.btn {
  height: 45px;
  background-color: #ededed;
  color: #000;
  padding: 0 30px;
  min-width: 160px;
  font-size: 16px;
  border: 1px solid #ededed;
  border-radius: 5px;
  transition: all 0.3s;
  cursor: pointer;
}
.btn--primary {
  background-color: #2f5cfc;
  color: #fff;
  border-color: #2f5cfc;
}
.btn--light {
  background-color: #fff;
  border-color: #d9d9d9;
}
.btn--dangerous {
  color: #fff;
  background-color: #ee210a;
  border-color: #ee210a;
}
.btn.blue {
  color: #00a2fd;
  border-color: #00a2fd;
}
.btn.small {
  min-width: auto;
  padding: 0 15px;
  height: 35px;
  font-size: 14px;
  width: auto;
}
.btn.mini {
  min-width: auto;
  padding: 0 15px;
  height: 30px;
  font-size: 14px;
  width: auto;
}
.btn:not(:last-child) {
  margin-right: 15px;
}
.btn:hover {
  box-shadow: 0 0 10px rgba(237, 237, 237, 0.9);
}
.btn:hover.btn--primary {
  box-shadow: 0 0 10px rgba(47, 92, 252, 0.9);
}
.btn:hover.btn--light {
  box-shadow: 0 0 10px rgba(217, 217, 217, 0.9);
}
.btn:hover.btn--dangerous {
  box-shadow: 0 0 10px rgba(238, 33, 10, 0.9);
}
.btn:hover.blue {
  box-shadow: 0 0 10px rgba(0, 162, 253, 0.9);
}

.btn-group {
  display: flex;
}
.btn-group .btn {
  position: relative;
  margin-right: 0;
  z-index: 0;
}
.btn-group .btn:not(:first-child) {
  margin-left: -1px;
}
.btn-group .btn:first-child {
  border-radius: 5px 0 0 5px;
}
.btn-group .btn:last-child {
  border-radius: 0 5px 5px 0;
}
.btn-group .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group .btn:hover {
  z-index: 1;
}
.btn-group .btn.active {
  z-index: 2;
  border-color: #00a2fd;
  color: #00a2fd;
}

.link-btn {
  color: #00a2fd;
  cursor: pointer;
}
.link-btn:hover {
  text-decoration: underline;
}
.link-btn.cancel {
  color: #929292;
}
.link-btn.disabled {
  pointer-events: none;
  color: rgba(146, 146, 146, 0.5);
}
.link-btn:not(:last-child) {
  margin-right: 5px;
}

.link-btn-group {
  display: inline-block;
}
.link-btn-group .link-btn {
  position: relative;
}
.link-btn-group .link-btn:not(:first-child) {
  margin-left: 5px;
}
.link-btn-group .link-btn:not(:last-child) {
  margin-right: 5px;
}
.link-btn-group .link-btn:not(:last-child):after {
  content: "|";
  position: absolute;
  color: #d9d9d9;
  right: -9px;
  top: 0;
}

.pagination {
  padding: 10px 15px;
}
.pagination > span {
  display: inline-block;
  position: relative;
  min-width: 25px;
  height: 25px;
  border: 1px solid #00a2fd;
  text-align: center;
  line-height: 23px;
  font-size: 13px;
  border-radius: 5px;
}
.pagination > span:not(:last-child) {
  margin-right: 10px;
}
.pagination > span:hover {
  border-color: #00a2fd;
}
.pagination > span.middle {
  border: none;
}
.pagination > span.prev, .pagination > span.next {
  border: none;
  cursor: pointer;
}
.pagination > span.prev:before, .pagination > span.prev:after, .pagination > span.next:before, .pagination > span.next:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background-color: #929292;
  top: 16px;
  left: 7px;
  transform: rotate(45deg);
}
.pagination > span.prev:after, .pagination > span.next:after {
  top: 8px;
  transform: rotate(-45deg);
}
.pagination > span.prev:hover:before, .pagination > span.prev:hover:after, .pagination > span.next:hover:before, .pagination > span.next:hover:after {
  background-color: #00a2fd;
}
.pagination > span.disabled {
  border-color: #d9d9d9;
}
.pagination > span.next {
  transform: rotate(180deg);
}
.pagination.right {
  display: flex;
  justify-content: flex-end;
}

/* input[type=text], input[type=password] {
  height: 43px;
  border: 1px solid #f5f5f5;
  border-radius: 5px;
  padding: 0 10px;
  margin-bottom: 10px;
} */

.message-notice, .modal {
  position: fixed;
  z-index: 9;
  top: 25px;
  width: 360px;
  padding: 20px;
  left: 50%;
  margin-left: -180px;
  display: flex;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.message-notice .close, .modal .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  color: #929292;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  background-image: url("../images/close@2x.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
.message-notice .close:hover, .modal .close:hover {
  color: #000;
  background-color: rgba(146, 146, 146, 0.2);
}
.message-notice .media h2, .modal .media h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
.message-notice.error .media p, .modal.error .media p {
  color: #ee210a;
}
.message-notice.success, .modal.success {
  z-index: 10;
}
.message-notice.success .media .rounded-img-box, .modal.success .media .rounded-img-box {
  width: 64px;
  height: 64px;
  background: url("../images/circle_tick@2x.png") top left no-repeat;
  background-size: 64px 64px;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
.modal .content, .modal .content-img {
  position: fixed;
  top: 60px;
  width: 640px;
  padding: 0;
  left: 50%;
  margin-left: -320px;
  background-color: #fff;
}
.modal .content-img {
  background-color: transparent;
  text-align: center;
  top: 50%;
  margin-top: -250px;
}
.modal .content-img img {
  max-width: 100%;
  max-height: 80vh;
}
.modal .content-img .close-img {
  position: absolute;
  display: inline-block;
  cursor: pointer;
  bottom: 5px;
  left: 50%;
  width: 40px;
  margin-left: -20px;
  height: 40px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background-color: #929292;
  cursor: pointer;
  transition: all 0.3s;
}
.switch:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.3s;
}
.switch.on {
  background-color: #2f5cfc;
}
.switch.on:after {
  left: auto;
  right: 2px;
}

.tag {
  padding: 2px 8px;
  font-size: 12px;
  color: #929292;
  border: 1px solid #d9d9d9;
  background-color: #efefef;
  border-radius: 5px;
  margin: 0 8px 8px 0;
}

.status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-right: 5px;
}
.status.finished {
  background-color: #52c419;
}
.status.success {
  background-color: #2f5cfc;
}
.status.fail, .status.pending {
  background-color: #ee210a;
}
.status.cancel {
  background-color: #929292;
}

.panel {
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 0 15px #eee;
}
.panel:not(:last-child) {
  margin-bottom: 20px;
}
.panel .title, #dashboard .modal--work-order .panel .subject {
  display: flex;
  align-items: center;
}
.panel .title h2, #dashboard .modal--work-order .panel .subject h2 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin-right: 15px;
}
.panel .title p, #dashboard .modal--work-order .panel .subject p {
  flex: 1 1;
  font-size: 14px;
  margin-right: 15px;
}
.panel .title span, #dashboard .modal--work-order .panel .subject span {
  font-size: 14px;
  margin-left: auto;
}
.panel .title span a, #dashboard .modal--work-order .panel .subject span a {
  color: #00a2fd;
  text-decoration: none;
}
.panel .title:not(:last-of-type), #dashboard .modal--work-order .panel .subject:not(:last-of-type) {
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}
.panel .body:not(:last-of-type) {
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}
.panel .body .empty {
  padding: 130px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("../images/empty_box_grey_2@3x.png") center 30px no-repeat;
  background-size: 100px 100px;
}
.panel .body .empty .text {
  color: #929292;
  margin-bottom: 50px;
}
.panel .body .empty button {
  max-width: 240px;
}
.panel .footer {
  padding-top: 15px;
}
.panel.pbh0 {
  padding: 15px 0 0;
}
.panel.pbh0 .title, #dashboard .modal--work-order .panel.pbh0 .subject, .panel.pbh0 .footer {
  margin: 0 15px;
}

.form {
  padding: 15px 0;
}
.form .form-item {
  display: flex;
  min-height: 30px;
  align-items: center;
}
.form .form-item:not(:last-child) {
  margin-bottom: 10px;
}
.form .form-item label {
  flex-basis: 200px;
  font-size: 14px;
  color: #848484;
}
.form .form-item .value {
  flex: 1 1;
  color: #000;
  display: flex;
  align-items: center;
}
.form .form-item .value .sub {
  font-size: 0.6em;
}
.form .form-item .value.baseline {
  align-items: baseline;
}
.form .form-item.new-row {
  flex-direction: column;
  align-items: initial;
}
.form .form-item.new-row label {
  flex: 0 0;
  margin-bottom: 10px;
}
.form .form-item.new-row .value {
  flex: 0 0;
  display: block;
  margin-bottom: 10px;
}

.summary {
  padding: 30px;
  display: flex;
  flex-direction: column;
  color: #848484;
  align-items: center;
}
.summary .value {
  font-size: 18px;
  font-weight: 100;
  align-items: baseline;
  display: flex;
  margin-bottom: 5px;
}
.summary .value span {
  font-size: 48px;
  color: #000;
}
.summary label {
  font-size: 18px;
  font-weight: 100;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.row .col {
  flex: 1 1;
}
.row .col.fixed {
  flex: 0;
}
.row .col.fixed--8 {
  flex: 0;
  flex-basis: 33.33%;
}
.row.g16 {
  margin-left: -8px;
  margin-right: -8px;
}
.row.g16 > .col {
  margin-left: 8px;
  margin-right: 8px;
}

.img-box, #dashboard .rounded-img-box, #auth .rounded-img-box, .rounded-img-box {
  width: 80px;
  height: 80px;
}
.img-box img, #dashboard .rounded-img-box img, #auth .rounded-img-box img, .rounded-img-box img {
  width: 100%;
  heght: 100%;
}

.rounded-img-box {
  border-radius: 50%;
  margin-right: auto;
  overflow: hidden;
}

.media {
  display: flex;
}
.media .rounded-img-box {
  margin-right: 15px;
}
.media .body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.media .body h1 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}
.media .body p {
  font-size: 12px;
  color: #929292;
}
.media .body h3 {
  font-weight: 400;
}

hr {
  width: 100%;
  height: 1px;
  margin-bottom: 15px;
  margin-top: 10px;
  border: none;
  background-color: #f5f5f5;
}

.value-with-unit {
  display: flex;
  align-items: baseline;
}
.value-with-unit .sub {
  font-size: 0.6em;
}

.sup {
  font-size: 2em;
}

.card {
  border: 2px solid #000;
  border-radius: 5px;
  padding: 15px;
}
.card .media {
  margin-bottom: 15px;
}
.card p {
  font-size: 14px;
  color: #848484;
  margin-bottom: 5px;
}
.card .value-with-unit {
  font-size: 24px;
  margin-bottom: 10px;
  color: #000;
}
.card .price-options {
  font-size: 12px;
  color: #848484;
}

.tip {
  font-size: 12px;
  color: #929292;
}
.tip.bg {
  padding-left: 20px;
  background: url("../images/shield.png") left center no-repeat;
  background-size: 16px 16px;
}

table {
  border: 1px solid #f5f5f5;
  width: 100%;
  border-spacing: 0;
  color: #929292;
}
table th {
  color: #848484;
  font-weight: 700;
}
table th, table td {
  font-size: 14px;
  padding: 10px 15px;
  text-align: left;
}
table thead {
  background-color: #faf9fa;
}
table tr:not(:first-child) td {
  border-top: 1px solid #f5f5f5;
}
table tbody tr:hover {
  background-color: rgba(224, 224, 224, 0.5);
}

.hover-options {
  display: inline-block;
  position: relative;
}
.hover-options .link {
  position: relative;
  display: inline-block;
  color: #00a2fd;
  cursor: pointer;
  font-size: 14px;
}
.hover-options .link.caret-down {
  padding-right: 15px;
}
.hover-options .link.caret-down:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -4px;
  width: 0;
  height: 0;
  border-width: 8px 6px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #00a2fd;
}
.hover-options .options {
  position: absolute;
  display: none;
  width: 100%;
  min-width: 100px;
  top: calc(100% + 5px);
  left: 0;
  padding: 5px 0;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 1;
  border-radius: 5px;
  box-shadow: 0 0 15px #eee;
}
.hover-options .options li {
  padding: 10px 15px;
  font-size: 12px;
  color: #848484;
  cursor: pointer;
  text-align: left;
}
.hover-options .options li:hover {
  background-color: #e0e0e0;
}
.hover-options:hover:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  top: 99%;
  height: 20px;
}
.hover-options:hover .options {
  display: inline-block;
}

.q-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 10px;
  font-weight: 700;
  border-radius: 50%;
  border: 1px solid #929292;
}
.q-icon:after {
  content: "?";
  font-size: 10px;
}

.tooltip {
  position: relative;
}
.tooltip .message {
  display: none;
  position: absolute;
  bottom: calc(100% + 3px);
  left: -33px;
  max-width: 160px;
  min-width: 80px;
  border-radius: 5px;
  padding: 5px 15px 6px;
  background-color: #000;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.tooltip .message:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #000;
  top: 100%;
  left: 35px;
}
.tooltip:hover .message {
  display: inline-block;
}

@media only screen and (min-width: 990px) {
  .hide-pc {
    display: none;
  }

  .hide-mobile {
    display: inherit;
  }

  .show-mobile {
    display: none;
  }
}
@media only screen and (max-width: 989px) {
  .hide-pad {
    display: none;
  }

  .hide-mobile {
    display: inherit;
  }

  .show-mobile {
    display: none;
  }

  header .logo {
    margin: 0 auto;
  }
  header span:last-child {
    position: absolute;
    right: 0;
    width: 95px;
    line-height: 18px;
    margin-right: 0;
  }
  #auth header span:last-child {
    left: 0;
  }
  header .menu-icon {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 24px;
    padding-top: 3px;
    cursor: pointer;
    margin-right: 0;
  }
  header .menu-icon span {
    position: absolute;
    left: 6px;
    width: 18px;
    height: 2px;
    background-color: #fff;
  }
  header .menu-icon:before, header .menu-icon:after {
    top: 10px;
    left: 6px;
    content: "";
    position: absolute;
    width: 18px;
    height: 2px;
    background-color: #fff;
  }
  header .menu-icon:after {
    top: 17px;
  }

  .workplace .work-container .container section.dashboard .notifications .title span, .workplace .work-container .container section.dashboard .notifications #dashboard .modal--work-order .panel .subject span, #dashboard .modal--work-order .panel .workplace .work-container .container section.dashboard .notifications .subject span {
    display: none;
  }
  .workplace .work-container .container section.my-subscription .panel .body, .workplace .work-container .container section.work-order .panel .body, .workplace .work-container .container section.data-record .panel .body, .workplace .work-container .container section.order .panel .body {
    max-width: calc(100vw - 30px);
    overflow-x: auto;
  }
  .workplace .work-container .container section.my-subscription .panel .body table, .workplace .work-container .container section.work-order .panel .body table, .workplace .work-container .container section.data-record .panel .body table, .workplace .work-container .container section.order .panel .body table {
    min-width: 940px;
  }
  .workplace .work-container .container section.buy-plan .panel .body .row .col.pad {
    flex: 0 0;
    flex-basis: 50%;
    padding: 0 6px;
    margin: 0 -6px 22px;
  }
  .workplace .work-container .container section.buy-plan .confirm-pay .coupon button {
    min-width: 50px;
    padding: 0 10px;
  }
  .workplace #sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    bottom: 0;
    border-radius: 0 !important;
    width: 220px;
    box-shadow: none !important;
    z-index: 99;
    max-height: 100% !important;
    transition: all 0.3s;
  }
  .workplace #sidebar .sidebar-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9;
    background-color: #fff;
  }
  .workplace #sidebar .sidebar-content .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: url("../images/close@2x.png") center center no-repeat;
    background-size: 16px 16px;
  }
  .workplace #sidebar .sidebar-mask {
    content: "";
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 0;
  }
  .workplace #sidebar.open {
    left: 0;
  }
  .workplace #sidebar.open:before {
    left: 0;
  }

  .modal--work-order {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    bottom: 0 !important;
  }
  .modal--work-order .panel {
    border-radius: 0 !important;
  }
  .modal--work-order .panel .body {
    border-top: 1px solid #f5f5f5;
    height: calc(100vh - 137px) !important;
    overflow-y: auto;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 767px) {
  .hide-mobile {
    display: none;
  }

  .show-mobile {
    display: block;
  }

  .workplace .work-container .container section.dashboard .notifications .title, .workplace .work-container .container section.dashboard .notifications #dashboard .modal--work-order .panel .subject, #dashboard .modal--work-order .panel .workplace .work-container .container section.dashboard .notifications .subject {
    flex-direction: column;
    align-items: flex-start;
  }
  .workplace .work-container .container section.dashboard .notifications .title h2, .workplace .work-container .container section.dashboard .notifications #dashboard .modal--work-order .panel .subject h2, #dashboard .modal--work-order .panel .workplace .work-container .container section.dashboard .notifications .subject h2 {
    margin-bottom: 5px;
  }
  .workplace .work-container .container section.dashboard .my-subscription .footer button:nth-child(2n) {
    margin-right: 0;
  }
  .workplace .work-container .container section.dashboard .my-subscription .footer .hover-options {
    margin-bottom: 15px;
  }
  .workplace .work-container .container section.dashboard .my-subscription .footer .hover-options + .btn {
    margin-right: 0;
    margin-bottom: 15px;
  }
  .workplace .work-container .container section.dashboard .data-record .body .row .col--6 {
    width: 50%;
  }
  .workplace .work-container .container section.buy-plan .panel .body .row .col.pad {
    flex-basis: 100%;
    padding: 0;
    margin: 0 0 15px !important;
  }
  .workplace .work-container .container section.buy-plan .panel .body .row .col.pad .card {
    margin-right: 0 !important;
  }
  .workplace .work-container .container section.buy-plan .panel.config > .row > .col {
    flex: 0 0;
    flex-basis: 100%;
  }
  .workplace .work-container .container section.buy-plan .panel.config > .row > .col .body .pay-method li {
    flex-basis: 100%;
    text-align: left;
    padding-left: 15px;
    height: 50px;
    line-height: 44px;
  }
  .workplace .work-container .container section.buy-plan .panel.config > .row > .col .confirm-pay {
    padding: 0;
  }
  .workplace .work-container .container section.buy-plan .panel.config > .row > .col .confirm-pay .coupon {
    padding: 10px 15px;
  }
  .workplace .work-container .container section.buy-plan .panel.detail .pay-method li {
    padding-right: 30px;
    margin-right: 0 !important;
    display: block;
    text-align: right !important;
  }
  .workplace .work-container .container section.buy-plan .panel.detail .pay-method li img {
    float: left;
    margin-top: 10px;
  }
  .workplace .work-container .container section.buy-plan .confirm-pay .coupon button {
    min-width: 50px;
    padding: 0 10px;
  }

  .modal .confirm-reset {
    width: 80% !important;
    margin-left: -40% !important;
  }
  .modal .confirm-reset .media {
    margin-bottom: 30px;
  }
  .modal .confirm-reset .media .rounded-img-box {
    min-width: 30px;
  }
  .modal .confirm-reset .media .rounded-img-box img {
    margin: 15px 0 !important;
  }
  .modal .confirm-reset .media p {
    font-size: 16px;
  }
}
@media only screen and (max-height: 500px) {
  .modal .content-img {
    margin-top: -40vh;
  }
  .modal .content-img .close-img {
    bottom: 0;
  }
}
#auth {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #F8F8F8;
}
#auth .mr15 {
  margin-right: 15px;
}
#auth .mb15 {
  margin-bottom: 15px;
}
#auth .mb30 {
  margin-bottom: 30px !important;
}
#auth .mb10 {
  margin-bottom: 10px;
}
#auth .pv15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
#auth .align-center {
  text-align: center;
}
#auth .align-right {
  text-align: right;
}
#auth .pull-right {
  float: right;
}
#auth .btn {
  height: 45px;
  background-color: #ededed;
  color: #000;
  padding: 0 30px;
  min-width: 160px;
  font-size: 16px;
  border: 1px solid #ededed;
  border-radius: 5px;
  transition: all 0.3s;
  cursor: pointer;
}
#auth .btn--primary {
  background-color: #2f5cfc;
  color: #fff;
  border-color: #2f5cfc;
}
#auth .btn--light {
  background-color: #fff;
  border-color: #d9d9d9;
}
#auth .btn--dangerous {
  color: #fff;
  background-color: #ee210a;
  border-color: #ee210a;
}
#auth .btn.blue {
  color: #00a2fd;
  border-color: #00a2fd;
}
#auth .btn.small {
  min-width: auto;
  padding: 0 15px;
  height: 35px;
  font-size: 14px;
  width: auto;
}
#auth .btn.mini {
  min-width: auto;
  padding: 0 15px;
  height: 30px;
  font-size: 14px;
  width: auto;
}
#auth .btn:not(:last-child) {
  margin-right: 15px;
}
#auth .btn:hover {
  box-shadow: 0 0 10px rgba(237, 237, 237, 0.9);
}
#auth .btn:hover.btn--primary {
  box-shadow: 0 0 10px rgba(47, 92, 252, 0.9);
}
#auth .btn:hover.btn--light {
  box-shadow: 0 0 10px rgba(217, 217, 217, 0.9);
}
#auth .btn:hover.btn--dangerous {
  box-shadow: 0 0 10px rgba(238, 33, 10, 0.9);
}
#auth .btn:hover.blue {
  box-shadow: 0 0 10px rgba(0, 162, 253, 0.9);
}
#auth .btn-group {
  display: flex;
}
#auth .btn-group .btn {
  position: relative;
  margin-right: 0;
  z-index: 0;
}
#auth .btn-group .btn:not(:first-child) {
  margin-left: -1px;
}
#auth .btn-group .btn:first-child {
  border-radius: 5px 0 0 5px;
}
#auth .btn-group .btn:last-child {
  border-radius: 0 5px 5px 0;
}
#auth .btn-group .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
#auth .btn-group .btn:hover {
  z-index: 1;
}
#auth .btn-group .btn.active {
  z-index: 2;
  border-color: #00a2fd;
  color: #00a2fd;
}
#auth .link-btn {
  color: #00a2fd;
  cursor: pointer;
}
#auth .link-btn:hover {
  text-decoration: underline;
}
#auth .link-btn.cancel {
  color: #929292;
}
#auth .link-btn.disabled {
  pointer-events: none;
  color: rgba(146, 146, 146, 0.5);
}
#auth .link-btn:not(:last-child) {
  margin-right: 5px;
}
#auth .link-btn-group {
  display: inline-block;
}
#auth .link-btn-group .link-btn {
  position: relative;
}
#auth .link-btn-group .link-btn:not(:first-child) {
  margin-left: 5px;
}
#auth .link-btn-group .link-btn:not(:last-child) {
  margin-right: 5px;
}
#auth .link-btn-group .link-btn:not(:last-child):after {
  content: "|";
  position: absolute;
  color: #d9d9d9;
  right: -9px;
  top: 0;
}
#auth .pagination {
  padding: 10px 15px;
}
#auth .pagination > span {
  display: inline-block;
  position: relative;
  min-width: 25px;
  height: 25px;
  border: 1px solid #00a2fd;
  text-align: center;
  line-height: 23px;
  font-size: 13px;
  border-radius: 5px;
}
#auth .pagination > span:not(:last-child) {
  margin-right: 10px;
}
#auth .pagination > span:hover {
  border-color: #00a2fd;
}
#auth .pagination > span.middle {
  border: none;
}
#auth .pagination > span.prev, #auth .pagination > span.next {
  border: none;
  cursor: pointer;
}
#auth .pagination > span.prev:before, #auth .pagination > span.prev:after, #auth .pagination > span.next:before, #auth .pagination > span.next:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background-color: #929292;
  top: 16px;
  left: 7px;
  transform: rotate(45deg);
}
#auth .pagination > span.prev:after, #auth .pagination > span.next:after {
  top: 8px;
  transform: rotate(-45deg);
}
#auth .pagination > span.prev:hover:before, #auth .pagination > span.prev:hover:after, #auth .pagination > span.next:hover:before, #auth .pagination > span.next:hover:after {
  background-color: #00a2fd;
}
#auth .pagination > span.disabled {
  border-color: #d9d9d9;
}
#auth .pagination > span.next {
  transform: rotate(180deg);
}
#auth .pagination.right {
  display: flex;
  justify-content: flex-end;
}
#auth input[type=text], #auth input[type=password] {
  height: 43px;
  border: 1px solid #f5f5f5;
  border-radius: 5px;
  padding: 0 10px;
  margin-bottom: 10px;
}
#auth .message-notice, #auth .modal {
  position: fixed;
  z-index: 9;
  top: 25px;
  width: 360px;
  padding: 20px;
  left: 50%;
  margin-left: -180px;
  display: flex;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
#auth .message-notice .close, #auth .modal .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  color: #929292;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  background-image: url("../images/close@2x.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
#auth .message-notice .close:hover, #auth .modal .close:hover {
  color: #000;
  background-color: rgba(146, 146, 146, 0.2);
}
#auth .message-notice .media h2, #auth .modal .media h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
#auth .message-notice.error .media p, #auth .modal.error .media p {
  color: #ee210a;
}
#auth .message-notice.success, #auth .modal.success {
  z-index: 10;
}
#auth .message-notice.success .media .rounded-img-box, #auth .modal.success .media .rounded-img-box {
  width: 64px;
  height: 64px;
  background: url("../images/circle_tick@2x.png") top left no-repeat;
  background-size: 64px 64px;
}
#auth .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
#auth .modal .content, #auth .modal .content-img {
  position: fixed;
  top: 60px;
  width: 640px;
  padding: 0;
  left: 50%;
  margin-left: -320px;
  background-color: #fff;
}
#auth .modal .content-img {
  background-color: transparent;
  text-align: center;
  top: 50%;
  margin-top: -250px;
}
#auth .modal .content-img img {
  max-width: 100%;
  max-height: 80vh;
}
#auth .modal .content-img .close-img {
  position: absolute;
  display: inline-block;
  cursor: pointer;
  bottom: 5px;
  left: 50%;
  width: 40px;
  margin-left: -20px;
  height: 40px;
}
#auth .switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background-color: #929292;
  cursor: pointer;
  transition: all 0.3s;
}
#auth .switch:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.3s;
}
#auth .switch.on {
  background-color: #2f5cfc;
}
#auth .switch.on:after {
  left: auto;
  right: 2px;
}
#auth .tag {
  padding: 2px 8px;
  font-size: 12px;
  color: #929292;
  border: 1px solid #d9d9d9;
  background-color: #efefef;
  border-radius: 5px;
  margin: 0 8px 8px 0;
}
#auth .status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-right: 5px;
}
#auth .status.finished {
  background-color: #52c419;
}
#auth .status.success {
  background-color: #2f5cfc;
}
#auth .status.fail, #auth .status.pending {
  background-color: #ee210a;
}
#auth .status.cancel {
  background-color: #929292;
}
#auth .panel {
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 0 15px #eee;
}
#auth .panel:not(:last-child) {
  margin-bottom: 20px;
}
#auth .panel .title, #auth #dashboard .modal--work-order .panel .subject, #dashboard .modal--work-order #auth .panel .subject {
  display: flex;
  align-items: center;
}
#auth .panel .title h2, #auth #dashboard .modal--work-order .panel .subject h2, #dashboard .modal--work-order #auth .panel .subject h2 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin-right: 15px;
}
#auth .panel .title p, #auth #dashboard .modal--work-order .panel .subject p, #dashboard .modal--work-order #auth .panel .subject p {
  flex: 1 1;
  font-size: 14px;
  margin-right: 15px;
}
#auth .panel .title span, #auth #dashboard .modal--work-order .panel .subject span, #dashboard .modal--work-order #auth .panel .subject span {
  font-size: 14px;
  margin-left: auto;
}
#auth .panel .title span a, #auth #dashboard .modal--work-order .panel .subject span a, #dashboard .modal--work-order #auth .panel .subject span a {
  color: #00a2fd;
  text-decoration: none;
}
#auth .panel .title:not(:last-of-type), #auth #dashboard .modal--work-order .panel .subject:not(:last-of-type), #dashboard .modal--work-order #auth .panel .subject:not(:last-of-type) {
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}
#auth .panel .body:not(:last-of-type) {
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}
#auth .panel .body .empty {
  padding: 130px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("../images/empty_box_grey_2@3x.png") center 30px no-repeat;
  background-size: 100px 100px;
}
#auth .panel .body .empty .text {
  color: #929292;
  margin-bottom: 50px;
}
#auth .panel .body .empty button {
  max-width: 240px;
}
#auth .panel .footer {
  padding-top: 15px;
}
#auth .panel.pbh0 {
  padding: 15px 0 0;
}
#auth .panel.pbh0 .title, #auth #dashboard .modal--work-order .panel.pbh0 .subject, #dashboard .modal--work-order #auth .panel.pbh0 .subject, #auth .panel.pbh0 .footer {
  margin: 0 15px;
}
#auth .form {
  padding: 15px 0;
}
#auth .form .form-item {
  display: flex;
  min-height: 30px;
  align-items: center;
}
#auth .form .form-item:not(:last-child) {
  margin-bottom: 10px;
}
#auth .form .form-item label {
  flex-basis: 200px;
  font-size: 14px;
  color: #848484;
}
#auth .form .form-item .value {
  flex: 1 1;
  color: #000;
  display: flex;
  align-items: center;
}
#auth .form .form-item .value .sub {
  font-size: 0.6em;
}
#auth .form .form-item .value.baseline {
  align-items: baseline;
}
#auth .form .form-item.new-row {
  flex-direction: column;
  align-items: initial;
}
#auth .form .form-item.new-row label {
  flex: 0 0;
  margin-bottom: 10px;
}
#auth .form .form-item.new-row .value {
  flex: 0 0;
  display: block;
  margin-bottom: 10px;
}
#auth .summary {
  padding: 30px;
  display: flex;
  flex-direction: column;
  color: #848484;
  align-items: center;
}
#auth .summary .value {
  font-size: 18px;
  font-weight: 100;
  align-items: baseline;
  display: flex;
  margin-bottom: 5px;
}
#auth .summary .value span {
  font-size: 48px;
  color: #000;
}
#auth .summary label {
  font-size: 18px;
  font-weight: 100;
}
#auth .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#auth .row .col {
  flex: 1 1;
}
#auth .row .col.fixed {
  flex: 0;
}
#auth .row .col.fixed--8 {
  flex: 0;
  flex-basis: 33.33%;
}
#auth .row.g16 {
  margin-left: -8px;
  margin-right: -8px;
}
#auth .row.g16 > .col {
  margin-left: 8px;
  margin-right: 8px;
}
#auth .img-box, #auth .rounded-img-box {
  width: 80px;
  height: 80px;
}
#auth .img-box img, #auth .rounded-img-box img {
  width: 100%;
  heght: 100%;
}
#auth .rounded-img-box {
  border-radius: 50%;
  margin-right: auto;
  overflow: hidden;
}
#auth .media {
  display: flex;
}
#auth .media .rounded-img-box {
  margin-right: 15px;
}
#auth .media .body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#auth .media .body h1 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}
#auth .media .body p {
  font-size: 12px;
  color: #929292;
}
#auth .media .body h3 {
  font-weight: 400;
}
#auth hr {
  width: 100%;
  height: 1px;
  margin-bottom: 15px;
  margin-top: 10px;
  border: none;
  background-color: #f5f5f5;
}
#auth .value-with-unit {
  display: flex;
  align-items: baseline;
}
#auth .value-with-unit .sub {
  font-size: 0.6em;
}
#auth .sup {
  font-size: 2em;
}
#auth .card {
  border: 2px solid #000;
  border-radius: 5px;
  padding: 15px;
}
#auth .card .media {
  margin-bottom: 15px;
}
#auth .card p {
  font-size: 14px;
  color: #848484;
  margin-bottom: 5px;
}
#auth .card .value-with-unit {
  font-size: 24px;
  margin-bottom: 10px;
  color: #000;
}
#auth .card .price-options {
  font-size: 12px;
  color: #848484;
}
#auth .tip {
  font-size: 12px;
  color: #929292;
}
#auth .tip.bg {
  padding-left: 20px;
  background: url("../images/shield.png") left center no-repeat;
  background-size: 16px 16px;
}
#auth table {
  border: 1px solid #f5f5f5;
  width: 100%;
  border-spacing: 0;
  color: #929292;
}
#auth table th {
  color: #848484;
  font-weight: 700;
}
#auth table th, #auth table td {
  font-size: 14px;
  padding: 10px 15px;
  text-align: left;
}
#auth table thead {
  background-color: #faf9fa;
}
#auth table tr:not(:first-child) td {
  border-top: 1px solid #f5f5f5;
}
#auth table tbody tr:hover {
  background-color: rgba(224, 224, 224, 0.5);
}
#auth .hover-options {
  display: inline-block;
  position: relative;
}
#auth .hover-options .link {
  position: relative;
  display: inline-block;
  color: #00a2fd;
  cursor: pointer;
  font-size: 14px;
}
#auth .hover-options .link.caret-down {
  padding-right: 15px;
}
#auth .hover-options .link.caret-down:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -4px;
  width: 0;
  height: 0;
  border-width: 8px 6px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #00a2fd;
}
#auth .hover-options .options {
  position: absolute;
  display: none;
  width: 100%;
  min-width: 100px;
  top: calc(100% + 5px);
  left: 0;
  padding: 5px 0;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 1;
  border-radius: 5px;
  box-shadow: 0 0 15px #eee;
}
#auth .hover-options .options li {
  padding: 10px 15px;
  font-size: 12px;
  color: #848484;
  cursor: pointer;
  text-align: left;
}
#auth .hover-options .options li:hover {
  background-color: #e0e0e0;
}
#auth .hover-options:hover:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  top: 99%;
  height: 20px;
}
#auth .hover-options:hover .options {
  display: inline-block;
}
#auth .q-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 10px;
  font-weight: 700;
  border-radius: 50%;
  border: 1px solid #929292;
}
#auth .q-icon:after {
  content: "?";
  font-size: 10px;
}
#auth .tooltip {
  position: relative;
}
#auth .tooltip .message {
  display: none;
  position: absolute;
  bottom: calc(100% + 3px);
  left: -33px;
  max-width: 160px;
  min-width: 80px;
  border-radius: 5px;
  padding: 5px 15px 6px;
  background-color: #000;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
#auth .tooltip .message:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #000;
  top: 100%;
  left: 35px;
}
#auth .tooltip:hover .message {
  display: inline-block;
}
#auth html {
  position: relative;
  scroll-behavior: smooth;
  width: 100vw;
  height: 100vh;
  background: #f8f8f8;
}
#auth body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #f8f8f8;
  font-family: "Microsoft YaHei", "MingLiU";
}
#auth section {
  width: 100%;
}
#auth header {
  display: flex;
  color: #fff;
  height: 54px;
  padding: 0 30px;
  align-items: center;
}
#auth header .logo {
  display: inline-block;
  width: 127.6px;
  height: 20px;
  background: url("../images/wwwjs_logo_v2_color.png") center center no-repeat;
  background-size: 127.61px 20px;
}
#auth header span {
  font-size: 18px;
  margin-right: 30px;
}
#auth footer {
  text-align: center;
  font-size: 12px;
  color: #848484;
  width: 100%;
  margin-top: 50px;
}
#auth .workplace {
  width: 100%;
}
#auth .workplace .work-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 15px;
  display: flex;
}
#auth .workplace .container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}
#auth .workplace .container section.auth {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 80px auto 0;
  text-align: center;
}
#auth .workplace .container section.auth h1 {
  margin-bottom: 15px;
}
#auth .workplace .container section.auth p {
  margin-bottom: 50px;
}
#auth .workplace .container section.auth input {
  width: 100%;
}
#auth .workplace .container section.auth .verify {
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
  justify-content: center;
  align-items: center;
}
#auth .workplace .container section.auth .verify input {
  flex: 1 1;
}
#auth .workplace .container section.auth .verify span.code {
  flex: 0;
  margin-left: 10px;
  margin-bottom: 10px;
  flex-basis: 60px;
  display: block;
}
#auth .workplace .container section.auth .verify.verify-email {
  margin-bottom: 0;
}
#auth .workplace .container section.auth .verify.verify-email .btn {
  padding: 0;
  flex-basis: 80px;
  min-width: 80px;
  margin-left: 10px;
  height: 43px;
}
#auth .workplace .container section.auth .tip .link-btn {
  display: inline-block;
}
#auth .workplace .container section.auth button {
  width: 100%;
  margin-bottom: 10px;
}
#auth .workplace .container section.auth .link-btn {
  display: block;
  margin-bottom: 30px;
}
#auth .workplace .container section.auth.signup p {
  margin-top: -10px;
}
#auth .workplace .container section.auth .email-input.append {
  display: flex;
  position: relative;
}
#auth .workplace .container section.auth .email-input.append input {
  padding-right: 120px;
}
#auth .workplace .container section.auth .email-input.append .hover-options {
  width: 120px;
  position: absolute;
  right: 0;
  height: 43px;
  text-align: left;
}
#auth .workplace .container section.auth .email-input.append .selected-host {    color: #848484;
  position: absolute;
  right: 3px;
  top: 1px;
  height: 41px;
  font-size: 12px;
  width: 120px;
  line-height: 41px;
  border: 0;
}
#auth .workplace .container section.auth .email-input.append .selected-host:after {
  content: "";
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #929292;
  right: 10px;
  top: 50%;
  margin-top: -3px;
  position: absolute;
}
@media only screen and (min-width: 990px) {
  #auth .hide-pc {
    display: none;
  }
}
@media only screen and (max-width: 989px) {
  #auth header .logo {
    margin: 0 auto;
    background: url("../images/www-js-logo-2@3x-icon.png") center center no-repeat;
    background-size: 88px 20px;
  }
}
@media only screen and (max-width: 767px) {
  #dashboard .tutorial-list li {
    flex: 1 !important;
    margin-right: 0 !important;
  }
  #auth .workplace .container section.auth {
    margin-top: 30px;
  }
}

#dashboard .mr15 {
  margin-right: 15px;
}
#dashboard .mb15 {
  margin-bottom: 15px;
}
#dashboard .mb30 {
  margin-bottom: 30px !important;
}
#dashboard .mb10 {
  margin-bottom: 10px;
}
#dashboard .pv15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
#dashboard .align-center {
  text-align: center;
}
#dashboard .align-right {
  text-align: right;
}
#dashboard .pull-right {
  float: right;
}
#dashboard .btn {
  height: 45px;
  background-color: #ededed;
  color: #000;
  padding: 0 30px;
  min-width: 160px;
  font-size: 16px;
  border: 1px solid #ededed;
  border-radius: 5px;
  transition: all 0.3s;
  cursor: pointer;
}
#dashboard .btn--primary {
  background-color: #2f5cfc;
  color: #fff;
  border-color: #2f5cfc;
}
#dashboard .btn--light {
  background-color: #fff;
  border-color: #d9d9d9;
}
#dashboard .btn--dangerous {
  color: #fff;
  background-color: #ee210a;
  border-color: #ee210a;
}
#dashboard .btn.blue {
  color: #00a2fd;
  border-color: #00a2fd;
}
#dashboard .btn.small {
  min-width: auto;
  padding: 0 15px;
  height: 35px;
  font-size: 14px;
  width: auto;
}
#dashboard .btn.mini {
  min-width: auto;
  padding: 0 15px;
  height: 30px;
  font-size: 14px;
  width: auto;
}
#dashboard .btn:not(:last-child) {
  margin-right: 15px;
}
#dashboard .btn:hover {
  box-shadow: 0 0 10px rgba(237, 237, 237, 0.9);
}
#dashboard .btn:hover.btn--primary {
  box-shadow: 0 0 10px rgba(47, 92, 252, 0.9);
}
#dashboard .btn:hover.btn--light {
  box-shadow: 0 0 10px rgba(217, 217, 217, 0.9);
}
#dashboard .btn:hover.btn--dangerous {
  box-shadow: 0 0 10px rgba(238, 33, 10, 0.9);
}
#dashboard .btn:hover.blue {
  box-shadow: 0 0 10px rgba(0, 162, 253, 0.9);
}
#dashboard .btn-group {
  display: flex;
}
#dashboard .btn-group .btn {
  position: relative;
  margin-right: 0;
  z-index: 0;
}
#dashboard .btn-group .btn:not(:first-child) {
  margin-left: -1px;
}
#dashboard .btn-group .btn:first-child {
  border-radius: 5px 0 0 5px;
}
#dashboard .btn-group .btn:last-child {
  border-radius: 0 5px 5px 0;
}
#dashboard .btn-group .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
#dashboard .btn-group .btn:hover {
  z-index: 1;
}
#dashboard .btn-group .btn.active {
  z-index: 2;
  border-color: #00a2fd;
  color: #00a2fd;
}
#dashboard .link-btn {
  color: #00a2fd;
  cursor: pointer;
}
#dashboard .link-btn:hover {
  text-decoration: underline;
}
#dashboard .link-btn.cancel {
  color: #929292;
}
#dashboard .link-btn.disabled {
  pointer-events: none;
  color: rgba(146, 146, 146, 0.5);
}
#dashboard .link-btn:not(:last-child) {
  margin-right: 5px;
}
#dashboard .link-btn-group {
  display: inline-block;
}
#dashboard .link-btn-group .link-btn {
  position: relative;
}
#dashboard .link-btn-group .link-btn:not(:first-child) {
  margin-left: 5px;
}
#dashboard .link-btn-group .link-btn:not(:last-child) {
  margin-right: 5px;
}
#dashboard .link-btn-group .link-btn:not(:last-child):after {
  content: "|";
  position: absolute;
  color: #d9d9d9;
  right: -9px;
  top: 0;
}
#dashboard .pagination {
  padding: 10px 15px;
}
#dashboard .pagination > span {
  display: inline-block;
  position: relative;
  min-width: 25px;
  height: 25px;
  border: 1px solid #00a2fd;
  text-align: center;
  line-height: 23px;
  font-size: 13px;
  border-radius: 5px;
}
#dashboard .pagination > span:not(:last-child) {
  margin-right: 10px;
}
#dashboard .pagination > span:hover {
  border-color: #00a2fd;
}
#dashboard .pagination > span.middle {
  border: none;
}
#dashboard .pagination > span.prev, #dashboard .pagination > span.next {
  border: none;
  cursor: pointer;
}
#dashboard .pagination > span.prev:before, #dashboard .pagination > span.prev:after, #dashboard .pagination > span.next:before, #dashboard .pagination > span.next:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background-color: #929292;
  top: 16px;
  left: 7px;
  transform: rotate(45deg);
}
#dashboard .pagination > span.prev:after, #dashboard .pagination > span.next:after {
  top: 8px;
  transform: rotate(-45deg);
}
#dashboard .pagination > span.prev:hover:before, #dashboard .pagination > span.prev:hover:after, #dashboard .pagination > span.next:hover:before, #dashboard .pagination > span.next:hover:after {
  background-color: #00a2fd;
}
#dashboard .pagination > span.disabled {
  border-color: #d9d9d9;
}
#dashboard .pagination > span.next {
  transform: rotate(180deg);
}
#dashboard .pagination.right {
  display: flex;
  justify-content: flex-end;
}
#dashboard input[type=text], #dashboard input[type=password] {
  height: 43px;
  border: 1px solid #f5f5f5;
  border-radius: 5px;
  padding: 0 10px;
  margin-bottom: 10px;
}
#dashboard .message-notice, #dashboard .modal {
  position: fixed;
  z-index: 9;
  top: 25px;
  width: 360px;
  padding: 20px;
  left: 50%;
  margin-left: -180px;
  display: flex;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
#dashboard .message-notice .close, #dashboard .modal .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  color: #929292;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  background-image: url("../images/close@2x.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
#dashboard .message-notice .close:hover, #dashboard .modal .close:hover {
  color: #000;
  background-color: rgba(146, 146, 146, 0.2);
}
#dashboard .message-notice .media h2, #dashboard .modal .media h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
#dashboard .message-notice.error .media p, #dashboard .modal.error .media p {
  color: #ee210a;
}
#dashboard .message-notice.success, #dashboard .modal.success {
  z-index: 10;
}
#dashboard .message-notice.success .media .rounded-img-box, #dashboard .modal.success .media .rounded-img-box {
  width: 64px;
  height: 64px;
  background: url("../images/circle_tick@2x.png") top left no-repeat;
  background-size: 64px 64px;
}
#dashboard .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
#dashboard .modal .content, #dashboard .modal .content-img {
  position: fixed;
  top: 60px;
  width: 640px;
  padding: 0;
  left: 50%;
  margin-left: -320px;
  background-color: #fff;
}
#dashboard .modal .content-img {
  background-color: transparent;
  text-align: center;
  top: 50%;
  margin-top: -250px;
}
#dashboard .modal .content-img img {
  max-width: 100%;
  max-height: 80vh;
}
#dashboard .modal .content-img .close-img {
  position: absolute;
  display: inline-block;
  cursor: pointer;
  bottom: 5px;
  left: 50%;
  width: 40px;
  margin-left: -20px;
  height: 40px;
}
#dashboard .switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background-color: #929292;
  cursor: pointer;
  transition: all 0.3s;
}
#dashboard .switch:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.3s;
}
#dashboard .switch.on {
  background-color: #2f5cfc;
}
#dashboard .switch.on:after {
  left: auto;
  right: 2px;
}
#dashboard .tag {
  padding: 2px 8px;
  font-size: 12px;
  color: #929292;
  border: 1px solid #d9d9d9;
  background-color: #efefef;
  border-radius: 5px;
  margin: 0 8px 8px 0;
}
#dashboard .status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-right: 5px;
}
#dashboard .status.finished {
  background-color: #52c419;
}
#dashboard .status.success {
  background-color: #2f5cfc;
}
#dashboard .status.fail, #dashboard .status.pending {
  background-color: #ee210a;
}
#dashboard .status.cancel {
  background-color: #929292;
}
#dashboard .panel {
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 0 15px #eee;
}
#dashboard .panel:not(:last-child) {
  margin-bottom: 20px;
}
#dashboard .panel .title, #dashboard .modal--work-order .panel .subject {
  display: flex;
  align-items: center;
}
#dashboard .panel .title h2, #dashboard .modal--work-order .panel .subject h2 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin-right: 15px;
}
#dashboard .panel .title p, #dashboard .modal--work-order .panel .subject p {
  flex: 1 1;
  font-size: 14px;
  margin-right: 15px;
}
#dashboard .panel .title span, #dashboard .modal--work-order .panel .subject span {
  font-size: 14px;
  margin-left: auto;
}
#dashboard .panel .title span a, #dashboard .modal--work-order .panel .subject span a {
  color: #00a2fd;
  text-decoration: none;
}
#dashboard .panel .title:not(:last-of-type), #dashboard .modal--work-order .panel .subject:not(:last-of-type) {
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}
#dashboard .panel .body:not(:last-of-type) {
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}
#dashboard .panel .body .empty {
  padding: 130px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("../images/empty_box_grey_2@3x.png") center 30px no-repeat;
  background-size: 100px 100px;
}
#dashboard .panel .body .empty .text {
  color: #929292;
  margin-bottom: 50px;
}
#dashboard .panel .body .empty button {
  max-width: 240px;
}
#dashboard .panel .footer {
  padding-top: 15px;
}
#dashboard .panel.pbh0 {
  padding: 15px 0 0;
}
#dashboard .panel.pbh0 .title, #dashboard .modal--work-order .panel.pbh0 .subject, #dashboard .panel.pbh0 .footer {
  margin: 0 15px;
}
#dashboard .form {
  padding: 15px 0;
}
#dashboard .form .form-item {
  display: flex;
  min-height: 30px;
  align-items: center;
}
#dashboard .form .form-item:not(:last-child) {
  margin-bottom: 10px;
}
#dashboard .form .form-item label {
  flex-basis: 200px;
  font-size: 14px;
  color: #848484;
}
#dashboard .form .form-item .value {
  flex: 1 1;
  color: #000;
  display: flex;
  align-items: center;
}
#dashboard .form .form-item .value .sub {
  font-size: 0.6em;
}
#dashboard .form .form-item .value.baseline {
  align-items: baseline;
}
#dashboard .form .form-item.new-row {
  flex-direction: column;
  align-items: initial;
}
#dashboard .form .form-item.new-row label {
  flex: 0 0;
  margin-bottom: 10px;
}
#dashboard .form .form-item.new-row .value {
  flex: 0 0;
  display: block;
  margin-bottom: 10px;
}
#dashboard .summary {
  padding: 30px;
  display: flex;
  flex-direction: column;
  color: #848484;
  align-items: center;
}
#dashboard .summary .value {
  font-size: 18px;
  font-weight: 100;
  align-items: baseline;
  display: flex;
  margin-bottom: 5px;
}
#dashboard .summary .value span {
  font-size: 48px;
  color: #000;
}
#dashboard .summary label {
  font-size: 18px;
  font-weight: 100;
}
#dashboard .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#dashboard .row .col {
  flex: 1 1;
}
#dashboard .row .col.fixed {
  flex: 0;
}
#dashboard .row .col.fixed--8 {
  flex: 0;
  flex-basis: 33.33%;
}
#dashboard .row.g16 {
  margin-left: -8px;
  margin-right: -8px;
}
#dashboard .row.g16 > .col {
  margin-left: 8px;
  margin-right: 8px;
}
#dashboard .img-box, #dashboard .rounded-img-box {
  width: 80px;
  height: 80px;
}
#dashboard .img-box img, #dashboard .rounded-img-box img {
  width: 100%;
  heght: 100%;
}
#dashboard .rounded-img-box {
  border-radius: 50%;
  margin-right: auto;
  overflow: hidden;
}
#dashboard .media {
  display: flex;
}
#dashboard .media .rounded-img-box {
  margin-right: 15px;
}
#dashboard .media .body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#dashboard .media .body h1 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}
#dashboard .media .body p {
  font-size: 12px;
  color: #929292;
}
#dashboard .media .body h3 {
  font-weight: 400;
}
#dashboard hr {
  width: 100%;
  height: 1px;
  margin-bottom: 15px;
  margin-top: 10px;
  border: none;
  background-color: #f5f5f5;
}
#dashboard .value-with-unit {
  display: flex;
  align-items: baseline;
}
#dashboard .value-with-unit .sub {
  font-size: 0.6em;
}
#dashboard .sup {
  font-size: 2em;
}
#dashboard .card {
  border: 2px solid #000;
  border-radius: 5px;
  padding: 15px;
}
#dashboard .card .media {
  margin-bottom: 15px;
}
#dashboard .card p {
  font-size: 14px;
  color: #848484;
  margin-bottom: 5px;
}
#dashboard .card .value-with-unit {
  font-size: 24px;
  margin-bottom: 10px;
  color: #000;
}
#dashboard .card .price-options {
  font-size: 12px;
  color: #848484;
}
#dashboard .tip {
  font-size: 12px;
  color: #929292;
}
#dashboard .tip.bg {
  padding-left: 20px;
  background: url("../images/shield.png") left center no-repeat;
  background-size: 16px 16px;
}
#dashboard table {
  border: 1px solid #f5f5f5;
  width: 100%;
  border-spacing: 0;
  color: #929292;
}
#dashboard table th {
  color: #848484;
  font-weight: 700;
}
#dashboard table th, #dashboard table td {
  font-size: 14px;
  padding: 10px 15px;
  text-align: left;
}
#dashboard table thead {
  background-color: #faf9fa;
}
#dashboard table tr:not(:first-child) td {
  border-top: 1px solid #f5f5f5;
}
#dashboard table tbody tr:hover {
  background-color: rgba(224, 224, 224, 0.5);
}
#dashboard .hover-options {
  display: inline-block;
  position: relative;
}
#dashboard .hover-options .link {
  position: relative;
  display: inline-block;
  color: #00a2fd;
  cursor: pointer;
  font-size: 14px;
}
#dashboard .hover-options .link.caret-down {
  padding-right: 15px;
}
#dashboard .hover-options .link.caret-down:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -4px;
  width: 0;
  height: 0;
  border-width: 8px 6px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #00a2fd;
}
#dashboard .hover-options .options {
  position: absolute;
  display: none;
  width: 100%;
  min-width: 100px;
  top: calc(100% + 5px);
  left: 0;
  padding: 5px 0;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 1;
  border-radius: 5px;
  box-shadow: 0 0 15px #eee;
}
#dashboard .hover-options .options li {
  padding: 10px 15px;
  font-size: 12px;
  color: #848484;
  cursor: pointer;
  text-align: left;
}
#dashboard .hover-options .options li:hover {
  background-color: #e0e0e0;
}
#dashboard .hover-options:hover:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  top: 99%;
  height: 20px;
}
#dashboard .hover-options:hover .options {
  display: inline-block;
}
#dashboard .q-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 10px;
  font-weight: 700;
  border-radius: 50%;
  border: 1px solid #929292;
}
#dashboard .q-icon:after {
  content: "?";
  font-size: 10px;
}
#dashboard .tooltip {
  position: relative;
}
#dashboard .tooltip .message {
  display: none;
  position: absolute;
  bottom: calc(100% + 3px);
  left: -33px;
  max-width: 160px;
  min-width: 80px;
  border-radius: 5px;
  padding: 5px 15px 6px;
  background-color: #000;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
#dashboard .tooltip .message:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #000;
  top: 100%;
  left: 35px;
}
#dashboard .tooltip:hover .message {
  display: inline-block;
}
@media only screen and (min-width: 990px) {
  #dashboard .hide-pc {
    display: none;
  }
  #dashboard .hide-mobile {
    display: inherit;
  }
  #dashboard .show-mobile {
    display: none;
  }
}
@media only screen and (max-width: 989px) {
  #dashboard .hide-pad {
    display: none;
  }
  #dashboard .hide-mobile {
    display: inherit;
  }
  #dashboard .show-mobile {
    display: none;
  }
  #dashboard header .logo {
    margin: 0 auto;
  }
  #dashboard header span:last-child {
    position: absolute;
    right: 0;
    width: 95px;
    line-height: 18px;
    margin-right: 0;
  }
  #dashboard header .menu-icon {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 24px;
    padding-top: 3px;
    cursor: pointer;
    margin-right: 0;
  }
  #dashboard header .menu-icon span {
    position: absolute;
    left: 6px;
    width: 18px;
    height: 2px;
    background-color: #fff;
  }
  #dashboard header .menu-icon:before, #dashboard header .menu-icon:after {
    top: 10px;
    left: 6px;
    content: "";
    position: absolute;
    width: 18px;
    height: 2px;
    background-color: #fff;
  }
  #dashboard header .menu-icon:after {
    top: 17px;
  }
  #dashboard .workplace .work-container .container section.dashboard .notifications .title span, #dashboard .workplace .work-container .container section.dashboard .notifications .modal--work-order .panel .subject span, #dashboard .modal--work-order .panel .workplace .work-container .container section.dashboard .notifications .subject span {
    display: none;
  }
  #dashboard .workplace .work-container .container section.my-subscription .panel .body, #dashboard .workplace .work-container .container section.work-order .panel .body, #dashboard .workplace .work-container .container section.data-record .panel .body, #dashboard .workplace .work-container .container section.order .panel .body {
    max-width: calc(100vw - 30px);
    overflow-x: auto;
  }
  #dashboard .workplace .work-container .container section.my-subscription .panel .body table, #dashboard .workplace .work-container .container section.work-order .panel .body table, #dashboard .workplace .work-container .container section.data-record .panel .body table, #dashboard .workplace .work-container .container section.order .panel .body table {
    min-width: 940px;
  }
  #dashboard .workplace .work-container .container section.buy-plan .panel .body .row .col.pad {
    flex: 0 0;
    flex-basis: 50%;
    padding: 0 6px;
    margin: 0 -6px 22px;
  }
  #dashboard .workplace .work-container .container section.buy-plan .confirm-pay .coupon button {
    min-width: 50px;
    padding: 0 10px;
  }
  #dashboard .workplace #sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    bottom: 0;
    border-radius: 0 !important;
    width: 220px;
    box-shadow: none !important;
    z-index: 99;
    max-height: 100% !important;
    transition: all 0.3s;
  }
  #dashboard .workplace #sidebar .sidebar-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9;
    background-color: #fff;
  }
  #dashboard .workplace #sidebar .sidebar-content .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: url("../images/close@2x.png") center center no-repeat;
    background-size: 16px 16px;
  }
  #dashboard .workplace #sidebar .sidebar-mask {
    content: "";
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 0;
  }
  #dashboard .workplace #sidebar.open {
    left: 0;
    z-index: 2000;
  }
  #dashboard .workplace #sidebar.open .sidebar-mask {
    left: 0;
  }
  #dashboard .modal--work-order {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    bottom: 0 !important;
  }
  #dashboard .modal--work-order .panel {
    border-radius: 0 !important;
  }
  #dashboard .modal--work-order .panel .body {
    border-top: 1px solid #f5f5f5;
    height: calc(100vh - 137px) !important;
    overflow-y: auto;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media only screen and (max-width: 767px) {
  #dashboard .hide-mobile {
    display: none;
  }
  #dashboard .show-mobile {
    display: block;
  }
  #dashboard .workplace .work-container .container section.dashboard .notifications .title, #dashboard .workplace .work-container .container section.dashboard .notifications .modal--work-order .panel .subject, #dashboard .modal--work-order .panel .workplace .work-container .container section.dashboard .notifications .subject {
    flex-direction: column;
    align-items: flex-start;
  }
  #dashboard .workplace .work-container .container section.dashboard .notifications .title h2, #dashboard .workplace .work-container .container section.dashboard .notifications .modal--work-order .panel .subject h2, #dashboard .modal--work-order .panel .workplace .work-container .container section.dashboard .notifications .subject h2 {
    margin-bottom: 5px;
  }
  #dashboard .workplace .work-container .container section.dashboard .my-subscription .footer button:nth-child(2n) {
    margin-right: 0;
  }
  #dashboard .workplace .work-container .container section.dashboard .my-subscription .footer .hover-options {
    margin-bottom: 15px;
  }
  #dashboard .workplace .work-container .container section.dashboard .my-subscription .footer .hover-options + .btn {
    margin-right: 0;
    margin-bottom: 15px;
  }
  #dashboard .workplace .work-container .container section.dashboard .data-record .body .row .col--6 {
    width: 50%;
  }
  #dashboard .workplace .work-container .container section.buy-plan .panel .body .row .col.pad {
    flex-basis: 100%;
    padding: 0;
    margin: 0 0 15px !important;
  }
  #dashboard .workplace .work-container .container section.buy-plan .panel .body .row .col.pad .card {
    margin-right: 0 !important;
  }
  #dashboard .workplace .work-container .container section.buy-plan .panel.config > .row > .col {
    flex: 0 0;
    flex-basis: 100%;
  }
  #dashboard .workplace .work-container .container section.buy-plan .panel.config > .row > .col .body .pay-method li {
    flex-basis: 100%;
    text-align: left;
    padding-left: 15px;
    height: 50px;
    line-height: 44px;
  }
  #dashboard .workplace .work-container .container section.buy-plan .panel.config > .row > .col .confirm-pay {
    padding: 0;
  }
  #dashboard .workplace .work-container .container section.buy-plan .panel.config > .row > .col .confirm-pay .coupon {
    padding: 10px 15px;
  }
  #dashboard .workplace .work-container .container section.buy-plan .panel.detail .pay-method li {
    padding-right: 30px;
    margin-right: 0 !important;
    display: block;
    text-align: right !important;
  }
  #dashboard .workplace .work-container .container section.buy-plan .panel.detail .pay-method li img {
    float: left;
    margin-top: 10px;
  }
  #dashboard .workplace .work-container .container section.buy-plan .confirm-pay .coupon button {
    min-width: 50px;
    padding: 0 10px;
  }
  #dashboard .modal .confirm-reset {
    width: 80% !important;
    margin-left: -40% !important;
  }
  #dashboard .modal .confirm-reset .media {
    margin-bottom: 30px;
  }
  #dashboard .modal .confirm-reset .media .rounded-img-box {
    min-width: 30px;
  }
  #dashboard .modal .confirm-reset .media .rounded-img-box img {
    margin: 15px 0 !important;
  }
  #dashboard .modal .confirm-reset .media p {
    font-size: 16px;
  }
}
@media only screen and (max-height: 500px) {
  #dashboard .modal .content-img {
    margin-top: -40vh;
  }
  #dashboard .modal .content-img .close-img {
    bottom: 0;
  }
}
#dashboard html {
  position: relative;
  scroll-behavior: smooth;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #fff, #efefef);
}
#dashboard body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  font-family: "Microsoft YaHei", "MingLiU";
}
#dashboard section {
  width: 100%;
}
#dashboard header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  color: #fff;
  height: 54px;
  padding: 0 30px;
  align-items: center;
  background: linear-gradient(90deg, #0096FF, #2F5DFF, #4F35FF);
  z-index: 1000;
}
#dashboard header .logo img {
  height: 20px;
}
#dashboard header span {
  font-size: 18px;
  margin-right: 30px;
}
#dashboard .work-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 15px;
  display: flex;
}
#dashboard .workplace {
  width: 100%;
  margin-top: 54px;
  overflow-y: auto;
}
#dashboard .workplace #sidebar {
  flex: 0 0;
  display: flex;
  margin-right: 20px;
  flex-basis: 220px;
  flex-direction: column;
  background-color: #fff;
  border-radius: 5px;
  max-height: 737px;
  box-shadow: 0 0 15px #eee;
}
#dashboard .workplace #sidebar .user {
  display: flex;
  padding: 30px;
  flex-direction: column;
}
#dashboard .workplace #sidebar .user > span {
  display: inline-block;
  margin: 0 auto 15px;
}
#dashboard .workplace #sidebar .user .avatar {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f5f5f5;
}
#dashboard .workplace #sidebar .user .avatar img {
  width: 100%;
  height: 100%;
}
#dashboard .workplace #sidebar .user .email {
  color: #929292;
}
#dashboard .workplace #sidebar .user .wallet {
  color: #848484;
}
#dashboard .workplace #sidebar .user .wallet .balance {
  color: #000;
}
#dashboard .workplace #sidebar .menu {
  list-style-type: none;
  font-size: 14px;
}
#dashboard .workplace #sidebar .menu li {
  list-style-type: none;
  border-top: 1px solid #f5f5f5;
  border-left: 4px solid transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  height: 51px;
}
#dashboard .workplace #sidebar .menu li:hover {
  border-left-color: #e0e0e0;
}
#dashboard .workplace #sidebar .menu li.selected {
  border-left-color: #1b1b1b;
}
#dashboard .workplace #sidebar .menu li i.icon {
  flex-basis: 30px;
  height: 30px;
  margin-right: 15px;
}
#dashboard .workplace #sidebar .menu li i.icon img {
  width: 100%;
}
#dashboard .workplace #sidebar .menu li.my i.icon, #dashboard .workplace #sidebar .menu li.logout i.icon {
  margin-left: 45px;
  line-height: 28px;
  margin-right: 0;
}
#dashboard .workplace #sidebar .menu li.my i.icon img, #dashboard .workplace #sidebar .menu li.logout i.icon img {
  width: 20px;
}
#dashboard .workplace #sidebar .menu li span {
  color: #000;
  line-height: 20px;
}
#dashboard .workplace #sidebar .menu li i.arrow-right {
  flex-basis: 40px;
  height: 40px;
  margin-left: auto;
  background: url(../images/right-arrow.png) center right no-repeat;
  background-size: 14px 14px;
}
#dashboard .workplace .container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}
#dashboard .workplace .container section {
  display: none;
}
#dashboard .workplace .container section.open {
  display: block;
}
#dashboard .workplace .container section.dashboard .process-bar {
  width: 100%;
  max-width: 640px;
  height: 15px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #efefef;
}
#dashboard .workplace .container section.dashboard .process-bar .result {
  height: 15px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(90deg, #0281fb, #0ffce5);
}
#dashboard .workplace .container section.dashboard .plan {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-right: 15px;
  border-radius: 50%;
  background: url("../images/plan_a_oval.png") center center no-repeat;
  background-size: cover;
}
#dashboard .workplace .container section.dashboard .plan--b {
  background-image: url("../images/plan_b_oval.png");
}
#dashboard .workplace .container section.dashboard .plan--c {
  background-image: url("../images/plan_c_oval.png");
}
#dashboard .workplace .container section.buy-plan .card .btn {
  width: 60%;
}
#dashboard .workplace .container section.buy-plan .selected {
  background: url("../images/correct.png") calc(100% - 3px) 3px no-repeat;
  background-size: 20px 20px;
}
#dashboard .workplace .container section.buy-plan .panel.config .title, #dashboard .workplace .container section.buy-plan .modal--work-order .panel.config .subject, #dashboard .modal--work-order .workplace .container section.buy-plan .panel.config .subject, #dashboard .workplace .container section.buy-plan .panel.config .body {
  border-bottom: none;
}
#dashboard .workplace .container section.buy-plan .panel.detail .order-number {
  font-size: 14px;
  color: #848484;
  margin-bottom: 10px;
}
#dashboard .workplace .container section.buy-plan .panel.detail .pay-method li {
  flex-basis: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#dashboard .workplace .container section.buy-plan .panel.detail .pay-method li img {
  width: 24px;
  height: 24px;
}
#dashboard .workplace .container section.buy-plan .panel.detail .credit-card-input {
  border: 2px solid #000;
  border-radius: 5px;
  height: 40px;
  padding: 6px 15px 8px 35px;
  background: url("../images/credit_card@3x.png") 6px 7px no-repeat;
  background-size: 22px;
  display: flex;
  font-size: 14px;
  margin-bottom: 5px;
}
#dashboard .workplace .container section.buy-plan .panel.detail .credit-card-input input {
  height: 22px;
  margin: 0;
  padding: 0;
}
#dashboard .workplace .container section.buy-plan .panel.detail .credit-card-input input.number {
  border: none;
  flex: 1 1;
}
#dashboard .workplace .container section.buy-plan .panel.detail .credit-card-input input.mm-yy, #dashboard .workplace .container section.buy-plan .panel.detail .credit-card-input input.cvc {
  width: 60px;
  border: none;
  margin-left: auto;
}
#dashboard .workplace .container section.buy-plan .panel.detail .credit-card-input input.cvc {
  width: 40px;
  margin-left: 10px;
}
#dashboard .workplace .container section.buy-plan .panel.success {
  background: #fff url("../images/circle_tick@2x.png") center 60px no-repeat;
  background-size: 128px 128px;
  padding-top: 220px;
  text-align: center;
}
#dashboard .workplace .container section.buy-plan .panel.success h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
}
#dashboard .workplace .container section.buy-plan .panel.success p {
  font-size: 14px;
  margin-bottom: 10px;
  color: #848484;
}
#dashboard .workplace .container section.buy-plan .panel.success .back {
  width: auto;
  display: inline-block;
  margin: 60px auto;
  text-align: center;
  color: #00a2fd;
  cursor: pointer;
  text-decoration: none;
}
#dashboard .workplace .container section.buy-plan .panel.success .back:hover {
  text-decoration: underline;
}
#dashboard .workplace .container section.buy-plan .confirm-pay {
  padding: 46px 15px 15px 30px;
}
#dashboard .workplace .container section.buy-plan .confirm-pay input {
  margin-bottom: 0;
}
#dashboard .workplace .container section.buy-plan .confirm-pay .coupon {
  padding: 15px;
  border: 2px solid #f5f5f5;
  margin-bottom: 15px;
}
#dashboard .workplace .container section.buy-plan .confirm-pay .coupon input {
  border: none;
  width: 100%;
  font-size: 16px;
  height: 35px;
  padding: 0 5px;
}
#dashboard .workplace .container section.buy-plan .confirm-pay .coupon button {
  min-width: 70px;
  padding: 0 15px;
}
#dashboard .workplace .container section.buy-plan .confirm-pay .order-info {
  padding: 15px;
  border: 2px solid #f5f5f5;
}
#dashboard .workplace .container section.buy-plan .confirm-pay .order-info p {
  color: #848484;
  font-size: 14px;
}
#dashboard .workplace .container section.buy-plan .confirm-pay .order-info .total {
  font-size: 24px;
  padding: 30px 0;
  color: #000;
}
#dashboard .workplace .container section.buy-plan .confirm-pay .order-info button {
  width: 100%;
}
#dashboard .workplace .container section.buy-plan .pay-method {
  display: flex;
  flex-wrap: wrap;
}
#dashboard .workplace .container section.buy-plan .pay-method li {
  position: relative;
  flex: 0;
  flex-basis: 110px;
  height: 70px;
  font-size: 12px;
  color: #000;
  margin-bottom: 15px;
  text-align: center;
  line-height: 66px;
  border: 2px solid #f5f5f5;
  border-radius: 5px;
  transition: all 0.3s;
  cursor: pointer;
}
#dashboard .workplace .container section.buy-plan .pay-method li:not(:last-child) {
  margin-right: 15px;
}
#dashboard .workplace .container section.buy-plan .pay-method li:hover {
  border-color: #00a2fd;
}
#dashboard .workplace .container section.buy-plan .pay-method li.selected {
  border-color: #000;
}
#dashboard .workplace .container section.work-order .panel .title .btn.mini, #dashboard .workplace .container section.work-order .modal--work-order .panel .subject .btn.mini, #dashboard .modal--work-order .workplace .container section.work-order .panel .subject .btn.mini {
  margin-top: -5px;
}
#dashboard .workplace .container section.data-record .panel .filter {
  padding: 10px 15px;
}
#dashboard .workplace .container section.tutorial .tutorial-list {
  display: flex;
  flex-wrap: wrap;
}
#dashboard .workplace .container section.tutorial .tutorial-list li {
  position: relative;
  flex: 0;
  height: 80px;
  font-size: 12px;
  color: #000;
  margin-bottom: 15px;
  padding: 15px;
  text-align: center;
  line-height: 66px;
  border: 2px solid #f5f5f5;
  border-radius: 5px;
  transition: all 0.3s;
  cursor: pointer;
  flex-basis: calc(50% - 15px);
  display: flex;
  align-items: center;
  justify-content: left;
  margin-right: 15px;
}
#dashboard .workplace .container section.tutorial .tutorial-list li:nth-child(2n) {
  margin-right: 0;
}
#dashboard .workplace .container section.tutorial .tutorial-list li i {
  width: 48px;
  height: 48px;
  padding: 5px;
  font-size: 33px;
}
#dashboard .workplace .container section.tutorial .tutorial-list li span {
  display: inline-block;
  margin-left: auto;
  font-size: 20px;
}
#dashboard .workplace .container section.tutorial .tutorial-list li span.arrow-right {
  width: 40px;
  height: 40px;
  margin-left: 5px;
  background: url("../images/arrow-2.png") center center no-repeat;
  background-size: 30px 30px;
}
#dashboard .workplace .container section.tutorial .tutorial-list li:hover {
  border-color: #00a2fd;
}
#dashboard .workplace .container section.tutorial .tutorial-list li.selected {
  border-color: #000;
}
#dashboard .workplace .container section.my .change-password {
  width: 100%;
  max-width: 360px;
}
#dashboard .workplace .container section.my .change-password input, #dashboard .workplace .container section.my .change-password button {
  width: 100%;
}
#dashboard .modal--work-order {
  top: 120px;
  width: 768px;
  margin-left: -384px;
}
#dashboard .modal--work-order .panel {
  border-radius: 5px;
  overflow: hidden;
}
#dashboard .modal--work-order .panel .title, #dashboard .modal--work-order .panel .subject {
  border-bottom: none;
  color: #929292;
}
#dashboard .modal--work-order .panel .title img, #dashboard .modal--work-order .panel .subject img {
  margin-right: 15px;
  height: 16px;
}
#dashboard .modal--work-order .panel .subject {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #929292;
  border-bottom: none !important;
}
#dashboard .modal--work-order .panel .subject input {
  flex: 1 1;
  height: 30px;
  margin-bottom: 0;
  border: none;
  font-size: 18px;
  font-weight: 700;
}
#dashboard .modal--work-order .panel .body {
  border-top: 1px solid #f5f5f5;
  height: calc(100vh - 480px);
  overflow-y: auto;
}
#dashboard .modal--work-order .panel .body ul.message-list li {
  display: flex;
  flex-direction: column;
  justify-content: left;
  padding: 10px 30px;
}
#dashboard .modal--work-order .panel .body ul.message-list li i {
  font-size: 12px;
  color: #929292;
  margin-right: auto;
}
#dashboard .modal--work-order .panel .body ul.message-list li p {
  padding: 10px 15px;
  color: #848484;
  font-size: 14px;
  border-left: 3px solid #2f5cfc;
  background-color: #efefef;
  border-radius: 0 5px 5px 0;
  margin-right: auto;
}
#dashboard .modal--work-order .panel .body ul.message-list li.client {
  justify-content: right;
}
#dashboard .modal--work-order .panel .body ul.message-list li.client i {
  margin-left: auto;
  margin-right: initial;
}
#dashboard .modal--work-order .panel .body ul.message-list li.client p {
  border-left: none;
  border-right: 3px solid #2f5cfc;
  border-radius: 5px 0 0 5px;
  margin-left: auto;
  margin-right: initial;
}
#dashboard .modal--work-order .panel .footer {
  margin: 0;
  background-color: #dde2ea;
  padding: 10px;
}
#dashboard .modal--work-order .panel .footer input {
  height: 35px;
  margin-bottom: 0;
  width: 100%;
  background-color: #f4f6fa;
  border: none;
}
#dashboard .modal .confirm-reset {
  padding: 30px;
  width: 480px;
  margin-left: -240px;
  border-radius: 5px;
}
#dashboard .modal .confirm-reset .media {
  margin-bottom: 30px;
}
#dashboard .modal .confirm-reset .media .rounded-img-box img {
  margin: 5px 7px;
  width: 30px;
  height: 30px;
}
#dashboard .modal .confirm-reset .media p {
  font-size: 16px;
}
#dashboard .modal .confirm-reset .btn {
  min-width: 80px;
}
#dashboard footer {
  text-align: center;
  font-size: 12px;
  color: #848484;
  width: 100%;
}

.ad-modal .ant-modal-body {
    padding: 0
}

.ad-modal .ant-modal-content{
    background: none;
    box-shadow: unset;
}