/** page styles */
body.index {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

.index .brand-logo {
  height: 100%;
  font-size: 3rem; }
  .index .brand-logo img {
    font-size: 0; }

.index nav {
  background-image: url("../images/bg-header.jpg");
  background-size: cover;
  background-repeat: no-repeat; }
  .index nav .navbar-fixed {
    width: 100%; }
  .index nav .navbar-fixed > .container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .index nav .logo-header {
    padding-left: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center; }
    .index nav .logo-header img {
      display: block;
      margin: auto; }
  .index nav ul.action .btn, .index nav ul.action .btn-large, .index nav ul.action .btn-small {
    margin: 0.2rem; }
  .index nav .link-list {
    padding-left: 230px;
    padding-right: 190px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -ms-flex-line-pack: center;
    align-content: center; }
    .index nav .link-list .link-item {
      display: block;
      height: initial;
      line-height: initial;
      margin: auto; }
    .index nav .link-list a {
      display: inline-block;
      white-space: nowrap;
      padding: 0.5rem 0.3rem;
      margin: 0.2rem; }
      .index nav .link-list a:hover {
        background-color: rgba(0, 11, 46, 0.5); }

.index main {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  background-image: url("../images/bg-main.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right; }
  .index main form.search-form {
    max-width: 800px; }
  .index main .main-logo {
    margin-top: 48px;
    width: 420px; }
  .index main .input-field input {
    border: 1px solid #9e9e9e;
    border-right-width: 0;
    height: 54px;
    line-height: 54px;
    width: 100%;
    padding: 8px;
    font-size: 1.5rem; }
    .index main .input-field input:focus {
      outline: none; }
  .index main .input-field label {
    background: rgba(255, 255, 255, 0); }
  .index main .input-field label.active {
    -webkit-transform: translateY(0px) scale(0.8) !important;
    -ms-transform: translateY(0px) scale(0.8) !important;
    transform: translateY(0px) scale(0.8) !important; }
  .index main .input-field button {
    border: 1px solid #9e9e9e;
    border-left-width: 0;
    border-radius: 0; }
  .index main .search-field {
    padding: 0 !important; }

.index footer {
  background-image: url("../images/bg-footer.jpg");
  background-size: cover;
  background-repeat: no-repeat; }
  .index footer .footer-link-list {
    display: none; }
  .index footer .chip {
    margin-bottom: 10px; }

.index .modal {
  max-height: 90%;
  width: 380px;
  border-radius: 8px; }
  .index .modal .modal-header :not(.active) {
    color: rgba(0, 0, 0, 0.87); }
  .index .modal form {
    max-height: calc(90vh - 68px);
    overflow: auto; }
  .index .modal .input-field {
    margin: 0.5rem 0 1.5rem 0; }
    .index .modal .input-field.col label {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      pointer-events: none;
      left: 0; }
  .index .modal .welcome {
    position: relative;
    bottom: 1em; }
  .index .modal .modal-content {
    padding: 25px; }

@media (max-width: 600px) {
  .index nav .brand-logo img {
    width: 150px; }
  .index main .main-logo {
    width: 280px; }
  .index main .input-field input {
    border-right-width: 1px; }
  .index main .input-field button {
    border-left-width: 1px; }
  .index .modal {
    top: 0 !important;
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0; }
    .index .modal form {
      max-height: calc(100vh - 68px);
      overflow: auto; } }

@media only screen and (min-width: 601px) {
  .index .container {
    width: calc(100% - 6rem); } }

@media only screen and (min-width: 993px) {
  .index .container {
    width: 80%; } }

@media only screen and (max-width: 1279px) {
  .index nav .link-list {
    display: none; }
  .index footer .footer-link-list {
    display: block; } }

@media (max-width: 720px) {
  .index nav .container {
    width: 100%; }
  .index nav .logo-header {
    padding-left: 0;
    height: 60px;
    width: 130px; }
    .index nav .logo-header ul.action {
      zoom: 0.9; }
      .index nav .logo-header ul.action .btn, .index nav .logo-header ul.action .btn-large, .index nav .logo-header ul.action .btn-small {
        font-size: 0.5rem; }
    .index nav .logo-header img {
      width: 125px; }
    .index nav .logo-header .navbar-fixed > .container {
      margin: 0;
      width: 100%; } }

.result main {
  color: #666;
  background: #fafafa; }
  .result main h5 {
    margin: 2rem 0; }
  .result main .annoucement {
    margin-bottom: 2rem; }
    .result main .annoucement h5 {
      margin: 0 0 0.6rem 0; }
  .result main .table-wrapper {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    background-color: #fafafa;
    border: 1px solid #dadada; }
    .result main .table-wrapper table {
      width: 100%; }
      .result main .table-wrapper table tbody td {
        white-space: nowrap;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis; }
      .result main .table-wrapper table tbody tr:last-child {
        border: none; }

@media (min-width: 721px) {
  .result .container main table tbody td {
    max-width: 200px; }
  .result .container main table tbody td:nth-child(1) {
    width: 20%;
    max-width: 20%; }
  .result .container main table tbody td:nth-child(3) {
    width: 20%;
    max-width: 20%; } }

@media (max-width: 720px) {
  .result .container {
    width: 100%; }
  .result main h5 {
    font-size: 1.2rem;
    margin: 1rem; }
  .result main .table-wrapper {
    border: 0;
    padding: 0; }
  .result main table {
    font-size: 0.9rem; }
    .result main table .desktop {
      display: none; }
    .result main table thead {
      display: none; }
    .result main table tbody td {
      width: 100%;
      max-width: 100%;
      padding: 0.5rem;
      display: block;
      padding-left: 5.5rem; }
    .result main table tbody td:before {
      display: block;
      position: absolute;
      width: 4rem;
      left: 1rem;
      text-align: right; }
    .result main table tbody td:nth-child(1):before {
      content: "登录端口："; }
    .result main table tbody td:nth-child(2):before {
      content: "测速网址："; }
    .result main table tbody td:nth-child(3):before {
      content: "速度："; } }

.user {
  height: 100vh;
  min-height: 100vh; }
  .user nav {
    background: #00b7ea;
    background-image: url("/../img/bg-header.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
    display: block; }
    .user nav .navbar-fixed {
      height: 100%; }
      .user nav .navbar-fixed .container {
        height: inherit;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .user nav .navbar-fixed .container .main-logo {
          height: 100%;
          line-height: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          padding-left: 20px;
          position: relative; }
        .user nav .navbar-fixed .container .user-info {
          margin-left: auto;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          font-weight: bold;
          height: inherit;
          position: relative; }
          .user nav .navbar-fixed .container .user-info .username {
            margin-right: 10px; }
          .user nav .navbar-fixed .container .user-info .profile-icon {
            cursor: pointer; }
            .user nav .navbar-fixed .container .user-info .profile-icon i {
              width: 32px;
              height: 32px;
              line-height: 32px;
              border-radius: 50%;
              font-size: 32px;
              color: #9e9e9e;
              background-color: #9e9e9e;
              -webkit-text-stroke-width: 2px;
              -webkit-text-stroke-color: #fff; }
            .user nav .navbar-fixed .container .user-info .profile-icon:hover .user-info-dropdown {
              -webkit-transform: scale(1);
              -ms-transform: scale(1);
              transform: scale(1);
              visibility: visible;
              opacity: 1; }
          .user nav .navbar-fixed .container .user-info .user-info-dropdown {
            position: absolute;
            top: 55px;
            right: 0;
            background-color: #fff;
            -webkit-box-shadow: 0 1px 10px rgba(55, 55, 55, 0.2);
            box-shadow: 0 1px 10px rgba(55, 55, 55, 0.2);
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            -webkit-transition-delay: 200ms;
            -o-transition-delay: 200ms;
            transition-delay: 200ms;
            -webkit-transform-origin: 80% top;
            -ms-transform-origin: 80% top;
            transform-origin: 80% top;
            pointer-events: none;
            border-radius: 6px; }
            .user nav .navbar-fixed .container .user-info .user-info-dropdown:before {
              content: "";
              position: absolute;
              width: 10px;
              height: 10px;
              top: 0;
              right: 15px;
              -webkit-transform: rotate(45deg) translateY(-50%);
              -ms-transform: rotate(45deg) translateY(-50%);
              transform: rotate(45deg) translateY(-50%);
              background-color: #fff;
              z-index: -1; }
            .user nav .navbar-fixed .container .user-info .user-info-dropdown ul {
              width: 5rem;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-orient: vertical;
              -webkit-box-direction: normal;
              -ms-flex-direction: column;
              flex-direction: column; }
              .user nav .navbar-fixed .container .user-info .user-info-dropdown ul li {
                display: block;
                line-height: 50px;
                height: 50px; }
              .user nav .navbar-fixed .container .user-info .user-info-dropdown ul a {
                padding: 0 20px;
                color: #767676;
                pointer-events: auto;
                border-radius: 6px; }
  .user main {
    background: #f2f2f2;
    min-height: calc(100% - 64px); }
    .user main .container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 24px 0; }
  .user .sidebar-menu {
    width: 180px;
    margin-right: 16px; }
    .user .sidebar-menu ul {
      margin: 0;
      padding: 0; }
      .user .sidebar-menu ul li {
        margin: 0 0 24px 0; }
        .user .sidebar-menu ul li.active a {
          background: #dbdbdb; }
        .user .sidebar-menu ul li a {
          color: #767676;
          display: block;
          padding-top: 5px;
          padding-bottom: 5px;
          margin-bottom: 5px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          border-radius: 6px; }
          .user .sidebar-menu ul li a:hover {
            background-color: #ebebeb; }
          .user .sidebar-menu ul li a h3 {
            font-size: 14px;
            font-weight: bold;
            padding-left: 20px;
            color: #767676;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 8px 0 8px 0; }
        .user .sidebar-menu ul li > a {
          display: block;
          text-decoration: none;
          color: #767676;
          text-indent: 14px;
          padding-top: 5px;
          padding-bottom: 5px;
          margin-bottom: 5px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          border-radius: 6px; }
          .user .sidebar-menu ul li > a:hover {
            background-color: #ebebeb; }
  .user .main-content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
    .user .main-content .page-title {
      font-weight: bold;
      font-size: 20px;
      color: #767676;
      margin: 0 0 20px 0; }
    .user .main-content .search-area {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 0 0 1rem 0;
      padding-left: 0.7rem;
      -webkit-transition: -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
      transition: -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
      -o-transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
      transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
      transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); }
      .user .main-content .search-area .search-area-list {
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: #767676;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0;
        width: 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between; }
        .user .main-content .search-area .search-area-list .list-item {
          font-weight: bold;
          font-size: 14px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center; }
          .user .main-content .search-area .search-area-list .list-item:first-child {
            margin-right: 20px; }
          .user .main-content .search-area .search-area-list .list-item.extra-action a {
            -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); }
          .user .main-content .search-area .search-area-list .list-item.extra-action.active a {
            opacity: 1;
            visibility: visible;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0); }
            .user .main-content .search-area .search-area-list .list-item.extra-action.active a:nth-child(1) {
              -webkit-transition-delay: 0ms;
              -o-transition-delay: 0ms;
              transition-delay: 0ms; }
            .user .main-content .search-area .search-area-list .list-item.extra-action.active a:nth-child(2) {
              -webkit-transition-delay: 100ms;
              -o-transition-delay: 100ms;
              transition-delay: 100ms; }
          .user .main-content .search-area .search-area-list .list-item span {
            color: #767676;
            height: 20px;
            line-height: 20px;
            padding-left: 25px; }
          .user .main-content .search-area .search-area-list .list-item a {
            color: #767676;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: 14px; }
          .user .main-content .search-area .search-area-list .list-item label {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center; }
      .user .main-content .search-area .search-area-action {
        margin-left: auto; }
        .user .main-content .search-area .search-area-action .search-input {
          background-color: #fff;
          border-radius: 100px;
          position: relative;
          height: 32px;
          padding: 0 8px 0 16px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          border: 1px solid #ccc;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          width: 225px; }
          .user .main-content .search-area .search-area-action .search-input input {
            height: 100%;
            border-bottom: 0;
            margin-bottom: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 14px; }
          .user .main-content .search-area .search-area-action .search-input a {
            height: 24px; }
            .user .main-content .search-area .search-area-action .search-input a i {
              color: #767676; }
    .user .main-content .button-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .user .main-content .button-wrapper a {
        color: #00b7ea; }
    .user .main-content .select-wrapper.small-select {
      width: 60px; }
      .user .main-content .select-wrapper.small-select input {
        color: #767676;
        border-bottom: 0;
        margin-bottom: 0; }
  .user .cards-wrapper {
    color: #767676; }
  .user .card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.9rem 0.7rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    background: #fafafa; }
    .user .card:not(:last-child) {
      border-bottom: 1px solid #ddd; }
    .user .card .fragment {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row; }
    .user .card .checkbox {
      -ms-flex-preferred-size: 4rem;
      flex-basis: 4rem;
      -webkit-box-flex: 0;
      -ms-flex-positive: 0;
      flex-grow: 0;
      -ms-flex-negative: 0.5;
      flex-shrink: 0.5; }
    .user .card .name {
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
      -webkit-box-flex: 20rem;
      -ms-flex-positive: 20rem;
      flex-grow: 20rem; }
      .user .card .name a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row; }
      .user .card .name i {
        -ms-flex-preferred-size: 2.5rem;
        flex-basis: 2.5rem;
        color: gray; }
      .user .card .name p {
        display: block;
        -ms-flex-preferred-size: calc(100% - 2.5rem);
        flex-basis: calc(100% - 2.5rem);
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        margin: 0;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        word-break: break-all;
        max-height: 3em; }
    .user .card .status {
      -ms-flex-preferred-size: 6.5rem;
      flex-basis: 6.5rem;
      -webkit-box-flex: 0;
      -ms-flex-positive: 0;
      flex-grow: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0; }
      .user .card .status .light {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        background: gray; }
        .user .card .status .light.good {
          background: #27c989; }
        .user .card .status .light.bad {
          background: #ff3c3c; }
        .user .card .status .light.block {
          background: #222; }
    .user .card .date {
      -ms-flex-preferred-size: 13rem;
      flex-basis: 13rem;
      -ms-flex-negative: 0;
      flex-shrink: 0; }
    .user .card .token {
      -ms-flex-preferred-size: 15rem;
      flex-basis: 15rem;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      -webkit-box-flex: 0;
      -ms-flex-positive: 0;
      flex-grow: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 0.2rem;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .user .card .token .code {
        position: relative;
        padding: 0.2rem 0.5rem;
        -ms-flex-preferred-size: 8rem;
        flex-basis: 8rem;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        background: #ebebeb; }
        .user .card .token .code:after {
          content: "";
          display: block;
          width: 0;
          height: 90%;
          position: absolute;
          top: 5%;
          right: -2px;
          border-right: 4px dotted white; }
        .user .card .token .code span {
          font-size: 2rem;
          line-height: 2rem;
          font-family: Menlo, Courier, monospace; }
      .user .card .token .action {
        position: relative;
        border: 1px solid #e0e0e0;
        padding: 0.2rem 0.5rem;
        -ms-flex-preferred-size: 6rem;
        flex-basis: 6rem;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        text-align: center; }
        .user .card .token .action .enter {
          background-color: #27c989;
          width: 100%;
          border: none;
          color: white;
          font-size: 0.8rem;
          padding: 0.3rem;
          -webkit-box-sizing: border-box;
          box-sizing: border-box; }
    .user .card [data-clipboard-text] {
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
      .user .card [data-clipboard-text] .tooltip {
        position: absolute;
        right: 0;
        width: 100%;
        text-align: center;
        top: 0;
        opacity: 0;
        -webkit-animation: upslide 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
        animation: upslide 500ms cubic-bezier(0.165, 0.84, 0.44, 1); }
    .user .card .label {
      display: block;
      width: 100%;
      font-size: 0.8rem;
      color: #9e9e9e; }
  .user .modal {
    height: 100%;
    overflow: hidden;
    border-radius: 0.6rem; }
    .user .modal i {
      vertical-align: middle; }
    .user .modal .modal-content {
      overflow: auto;
      padding-bottom: 1rem;
      padding-top: 1rem; }
    .user .modal .modal-header {
      background: #e5e6e5; }
    .user .modal .modal-footer {
      position: fixed;
      bottom: 0; }
    .user .modal form {
      max-height: calc(100% - 120px);
      overflow-y: auto;
      overflow-x: hidden; }
    .user .modal .row {
      margin-bottom: 0; }
    .user .modal .generate {
      color: #9e9e9e;
      border: 1px solid #9e9e9e;
      border-radius: 5rem;
      text-align: center;
      height: 32px;
      line-height: 30px;
      margin: 0.6rem 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer; }
    .user .modal .input-field {
      margin: 0.5rem 0; }
    .user .modal .btn-full {
      width: 100%; }
    .user .modal .radio-selection span {
      margin-right: 1rem; }
    .user .modal .row {
      position: relative; }
    .user .modal .row:only-child .remove {
      opacity: 0.3;
      cursor: not-allowed; }
    .user .modal .remove {
      position: absolute;
      right: 0;
      height: 100%;
      padding: 1rem 0;
      color: #666;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
      .user .modal .remove i {
        font-size: 1.4rem;
        pointer-events: none; }
      .user .modal .remove:hover {
        color: black; }
  .user form.compact .input-field {
    margin-bottom: 0; }
    .user form.compact .input-field input {
      margin-bottom: 5px; }
  @media (max-width: 600px) {
    .user .modal {
      top: 0 !important;
      border-radius: 0;
      width: 100%;
      height: 100%;
      max-height: 100%;
      margin: 0; }
      .user .modal form {
        max-height: calc(100vh - 68px);
        overflow: auto; } }
  .user input[type] {
    margin-bottom: 0; }
  .user .profile-area {
    background-color: #fafafa;
    width: 100%;
    max-width: 450px;
    padding: 1rem;
    border-radius: 0.5rem; }
    .user .profile-area .sub-title {
      margin-top: 0;
      margin-bottom: 0; }
      .user .profile-area .sub-title h5 {
        font-size: 1.2rem;
        margin-top: 0;
        margin-bottom: 0;
        color: #00b7ea; }
  .user .mobile {
    display: none; }

@-webkit-keyframes upslide {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0; }
  70% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    opacity: 1; }
  100% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    opacity: 0; } }

@keyframes upslide {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0; }
  70% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    opacity: 1; }
  100% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    opacity: 0; } }

@media only screen and (min-width: 601px) {
  .container {
    width: calc(100% - 6rem); } }

@media only screen and (min-width: 993px) {
  .container {
    width: 80%; } }

@media (max-width: 1100px) {
  .user .mobile {
    display: block; }
  .user nav {
    padding-top: 0.5rem;
    position: relative;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    -webkit-box-shadow: 0 0 0.2rem 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0.2rem 0.2rem rgba(0, 0, 0, 0.3); }
    .user nav .container {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      line-height: 3rem; }
    .user nav .mobile .container {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: start; }
      .user nav .mobile .container a {
        width: 16rem;
        text-align: center; }
        .user nav .mobile .container a.active {
          border-bottom: 4px solid #fafafa; }
  .user main .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0; }
    .user main .container .sidebar-menu {
      width: 100%;
      display: none; }
    .user main .container .main-content .page-title {
      display: none; }
    .user main .container .main-content .search-area {
      padding-top: 1rem; }
  .user .profile-area {
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto; } }

@media (min-width: 721px) {
  .user .card .fragment {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .user .card .checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: auto; }
    .user .card .checkbox span {
      height: 20px; }
  .user .card .name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    vertical-align: middle; }
    .user .card .name a {
      width: 100%; }
    .user .card .name i {
      margin: auto; }
    .user .card .name p {
      display: inline-block; } }

@media (max-width: 720px) {
  .user nav {
    height: initial;
    position: fixed;
    top: 0;
    z-index: 30; }
    .user nav .mobile .container {
      -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
      justify-content: space-evenly; }
      .user nav .mobile .container a {
        width: 40%; }
  .user main {
    padding-top: 90px; }
  .user .container {
    width: 100%; }
  .user .main-content {
    background: #fafafa; }
  .user .mobile {
    display: block; }
  .user .user-info {
    padding-right: 1rem; }
    .user .user-info .username {
      display: none; }
  .user .search-area {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    z-index: 10;
    background: #fafafa;
    border-bottom: 1px solid #ddd; }
  .user .cards-wrapper .card {
    font-size: 0.8rem; }
    .user .cards-wrapper .card .fragment {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
    .user .cards-wrapper .card .checkbox {
      -ms-flex-preferred-size: 2rem;
      flex-basis: 2rem; }
    .user .cards-wrapper .card .name {
      -ms-flex-preferred-size: calc(100% - 5rem);
      flex-basis: calc(100% - 5rem);
      -webkit-box-flex: 0;
      -ms-flex-positive: 0;
      flex-grow: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      vertical-align: top; }
    .user .cards-wrapper .card .status {
      -ms-flex-preferred-size: 5rem;
      flex-basis: 5rem; }
    .user .cards-wrapper .card .date {
      -ms-flex-preferred-size: calc(100% - 5rem);
      flex-basis: calc(100% - 5rem); }
    .user .cards-wrapper .card .token {
      -ms-flex-preferred-size: 11rem;
      flex-basis: 11rem; }
      .user .cards-wrapper .card .token .code {
        -ms-flex-preferred-size: 6rem;
        flex-basis: 6rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between; }
        .user .cards-wrapper .card .token .code span {
          font-size: 1.4rem; }
      .user .cards-wrapper .card .token .action {
        -ms-flex-preferred-size: 4rem;
        flex-basis: 4rem; }
        .user .cards-wrapper .card .token .action .copy-safe-code {
          padding: 0 0.5rem; }
        .user .cards-wrapper .card .token .action .desktop {
          display: none; }
  .user .modal .generate {
    font-size: 0.8rem; }
  .user .profile-area {
    margin-top: 0;
    padding-top: 2rem; } }

.backend {
  min-width: 1300px;
  height: 100vh;
  min-height: 100vh; }
  .backend nav {
    background: #00b7ea;
    height: 64px; }
    .backend nav .navbar-fixed {
      height: 100%; }
      .backend nav .navbar-fixed .container {
        height: inherit;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .backend nav .navbar-fixed .container .main-logo {
          height: 100%;
          line-height: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          padding-left: 20px;
          position: relative; }
        .backend nav .navbar-fixed .container .user-info {
          margin-left: auto;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          font-weight: bold;
          height: inherit;
          position: relative; }
          .backend nav .navbar-fixed .container .user-info .username {
            margin-right: 10px; }
          .backend nav .navbar-fixed .container .user-info .profile-icon {
            cursor: pointer; }
            .backend nav .navbar-fixed .container .user-info .profile-icon i {
              width: 32px;
              height: 32px;
              line-height: 32px;
              border-radius: 50%;
              font-size: 32px;
              color: #9e9e9e;
              background-color: #9e9e9e;
              -webkit-text-stroke-width: 2px;
              -webkit-text-stroke-color: #fff; }
            .backend nav .navbar-fixed .container .user-info .profile-icon:hover .user-info-dropdown {
              -webkit-transform: scale(1);
              -ms-transform: scale(1);
              transform: scale(1);
              visibility: visible;
              opacity: 1; }
          .backend nav .navbar-fixed .container .user-info .user-info-dropdown {
            position: absolute;
            top: 55px;
            right: 0;
            background-color: #fff;
            -webkit-box-shadow: 0 1px 10px rgba(55, 55, 55, 0.2);
            box-shadow: 0 1px 10px rgba(55, 55, 55, 0.2);
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            -webkit-transition-delay: 200ms;
            -o-transition-delay: 200ms;
            transition-delay: 200ms;
            -webkit-transform-origin: 80% top;
            -ms-transform-origin: 80% top;
            transform-origin: 80% top;
            pointer-events: none;
            border-radius: 6px; }
            .backend nav .navbar-fixed .container .user-info .user-info-dropdown:before {
              content: "";
              position: absolute;
              width: 10px;
              height: 10px;
              top: 0;
              right: 15px;
              -webkit-transform: rotate(45deg) translateY(-50%);
              -ms-transform: rotate(45deg) translateY(-50%);
              transform: rotate(45deg) translateY(-50%);
              background-color: #fff;
              z-index: -1; }
            .backend nav .navbar-fixed .container .user-info .user-info-dropdown ul {
              display: block; }
              .backend nav .navbar-fixed .container .user-info .user-info-dropdown ul li {
                line-height: 50px;
                height: 50px; }
              .backend nav .navbar-fixed .container .user-info .user-info-dropdown ul a {
                padding: 0 20px;
                color: #767676;
                pointer-events: auto;
                border-radius: 6px; }
  .backend main {
    background: #f2f2f2;
    min-height: calc(100% - 64px); }
    .backend main .container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 24px 0; }
  .backend .container {
    width: 1280px; }
  .backend .sidebar-menu {
    width: 180px;
    margin-right: 16px; }
    .backend .sidebar-menu ul {
      margin: 0;
      padding: 0; }
      .backend .sidebar-menu ul li {
        margin: 0 0 24px 0; }
        .backend .sidebar-menu ul li h3 {
          font-size: 14px;
          font-weight: bold;
          padding-left: 20px;
          color: #767676;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin: 0 0 16px 0; }
        .backend .sidebar-menu ul li > a {
          display: block;
          text-decoration: none;
          color: #767676;
          text-indent: 14px;
          padding-left: 20px;
          padding-top: 5px;
          padding-bottom: 5px;
          margin-bottom: 5px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          border-radius: 6px; }
          .backend .sidebar-menu ul li > a:hover {
            background-color: #ebebeb; }
          .backend .sidebar-menu ul li > a.active {
            background-color: #e7e7e7; }
  .backend .main-content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
    .backend .main-content .page-title {
      font-weight: bold;
      font-size: 20px;
      color: #767676;
      margin: 0 0 20px 16px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .backend .main-content .page-title > a {
        margin-right: 10px;
        margin-left: -16px; }
      .backend .main-content .page-title > i {
        margin: 0 20px; }
    .backend .main-content .search-area {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 0 0 16px 16px; }
      .backend .main-content .search-area .search-area-list {
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: #767676;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0; }
        .backend .main-content .search-area .search-area-list li {
          font-weight: bold;
          font-size: 14px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center; }
          .backend .main-content .search-area .search-area-list li:first-child {
            margin-right: 20px; }
          .backend .main-content .search-area .search-area-list li.divider {
            border-right: 1px solid #707070;
            font-size: 20px;
            height: 22px;
            -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); }
            .backend .main-content .search-area .search-area-list li.divider.active {
              opacity: 1;
              visibility: visible;
              -webkit-transform: translateX(0);
              -ms-transform: translateX(0);
              transform: translateX(0); }
          .backend .main-content .search-area .search-area-list li.extra-action a {
            -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); }
          .backend .main-content .search-area .search-area-list li.extra-action.active a {
            opacity: 1;
            visibility: visible;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0); }
            .backend .main-content .search-area .search-area-list li.extra-action.active a:nth-child(1) {
              -webkit-transition-delay: 0ms;
              -o-transition-delay: 0ms;
              transition-delay: 0ms; }
            .backend .main-content .search-area .search-area-list li.extra-action.active a:nth-child(2) {
              -webkit-transition-delay: 100ms;
              -o-transition-delay: 100ms;
              transition-delay: 100ms; }
          .backend .main-content .search-area .search-area-list li span {
            color: #767676;
            height: 20px;
            line-height: 20px;
            padding-left: 25px; }
          .backend .main-content .search-area .search-area-list li a {
            color: #767676;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: 14px; }
          .backend .main-content .search-area .search-area-list li label {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center; }
      .backend .main-content .search-area .search-area-action {
        margin-left: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        .backend .main-content .search-area .search-area-action .search-input {
          background-color: #fff;
          border-radius: 100px;
          position: relative;
          height: 32px;
          padding: 0 8px 0 16px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          border: 1px solid #ccc;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          width: 225px;
          -webkit-transition: -webkit-box-shadow 200ms ease-in-out;
          transition: -webkit-box-shadow 200ms ease-in-out;
          -o-transition: box-shadow 200ms ease-in-out;
          transition: box-shadow 200ms ease-in-out;
          transition: box-shadow 200ms ease-in-out, -webkit-box-shadow 200ms ease-in-out; }
          .backend .main-content .search-area .search-area-action .search-input:not(:last-child) {
            margin-right: 16px; }
          .backend .main-content .search-area .search-area-action .search-input:focus-within {
            -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.15); }
          .backend .main-content .search-area .search-area-action .search-input.date {
            width: auto; }
          .backend .main-content .search-area .search-area-action .search-input input {
            height: 100%;
            border-bottom: 0;
            margin-bottom: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 14px; }
            .backend .main-content .search-area .search-area-action .search-input input.datepicker {
              width: 80px;
              white-space: nowrap;
              overflow: hidden;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis; }
          .backend .main-content .search-area .search-area-action .search-input a {
            height: 24px; }
          .backend .main-content .search-area .search-area-action .search-input i {
            color: #767676; }
    .backend .main-content .table-wrapper {
      background-color: #fff;
      border-radius: 6px;
      padding: 0 16px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .backend .main-content .table-wrapper table {
        width: 100%; }
        .backend .main-content .table-wrapper table thead {
          color: #9e9e9e; }
          .backend .main-content .table-wrapper table thead th {
            padding: 20px 0;
            font-size: 14px;
            outline: none; }
            .backend .main-content .table-wrapper table thead th.text-center {
              text-align: center; }
            .backend .main-content .table-wrapper table thead th .sort-icon {
              width: 10px;
              height: 10px;
              background-size: contain;
              display: inline-block;
              margin-left: 4px; }
            .backend .main-content .table-wrapper table thead th.sorting_asc .sort-icon {
              background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMjg2LjkzNSw2OS4zNzdjLTMuNjE0LTMuNjE3LTcuODk4LTUuNDI0LTEyLjg0OC01LjQyNEgxOC4yNzRjLTQuOTUyLDAtOS4yMzMsMS44MDctMTIuODUsNS40MjQgICBDMS44MDcsNzIuOTk4LDAsNzcuMjc5LDAsODIuMjI4YzAsNC45NDgsMS44MDcsOS4yMjksNS40MjQsMTIuODQ3bDEyNy45MDcsMTI3LjkwN2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOCAgIHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhMMjg2LjkzNSw5NS4wNzRjMy42MTMtMy42MTcsNS40MjctNy44OTgsNS40MjctMTIuODQ3QzI5Mi4zNjIsNzcuMjc5LDI5MC41NDgsNzIuOTk4LDI4Ni45MzUsNjkuMzc3eiIgZmlsbD0iI2NjY2NjYyIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=); }
            .backend .main-content .table-wrapper table thead th.sorting_desc .sort-icon {
              background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDI5Mi4zNjIgMjkyLjM2MSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjkyLjM2MiAyOTIuMzYxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTI4Ni45MzUsMTk3LjI4N0wxNTkuMDI4LDY5LjM4MWMtMy42MTMtMy42MTctNy44OTUtNS40MjQtMTIuODQ3LTUuNDI0cy05LjIzMywxLjgwNy0xMi44NSw1LjQyNEw1LjQyNCwxOTcuMjg3ICAgQzEuODA3LDIwMC45MDQsMCwyMDUuMTg2LDAsMjEwLjEzNHMxLjgwNyw5LjIzMyw1LjQyNCwxMi44NDdjMy42MjEsMy42MTcsNy45MDIsNS40MjUsMTIuODUsNS40MjVoMjU1LjgxMyAgIGM0Ljk0OSwwLDkuMjMzLTEuODA4LDEyLjg0OC01LjQyNWMzLjYxMy0zLjYxMyw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDdTMjkwLjU0OCwyMDAuOTA0LDI4Ni45MzUsMTk3LjI4N3oiIGZpbGw9IiNjY2NjY2MiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); }
            .backend .main-content .table-wrapper table thead th.sorting {
              cursor: pointer; }
              .backend .main-content .table-wrapper table thead th.sorting .sort-icon {
                background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAxLjk5OCA0MDEuOTk4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTczLjA5MiwxNjQuNDUyaDI1NS44MTNjNC45NDksMCw5LjIzMy0xLjgwNywxMi44NDgtNS40MjRjMy42MTMtMy42MTYsNS40MjctNy44OTgsNS40MjctMTIuODQ3ICAgIGMwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg1TDIxMy44NDYsNS40MjRDMjEwLjIzMiwxLjgxMiwyMDUuOTUxLDAsMjAwLjk5OSwwcy05LjIzMywxLjgxMi0xMi44NSw1LjQyNEw2MC4yNDIsMTMzLjMzMSAgICBjLTMuNjE3LDMuNjE3LTUuNDI0LDcuOTAxLTUuNDI0LDEyLjg1YzAsNC45NDgsMS44MDcsOS4yMzEsNS40MjQsMTIuODQ3QzYzLjg2MywxNjIuNjQ1LDY4LjE0NCwxNjQuNDUyLDczLjA5MiwxNjQuNDUyeiIgZmlsbD0iI2NjY2NjYyIvPgoJCTxwYXRoIGQ9Ik0zMjguOTA1LDIzNy41NDlINzMuMDkyYy00Ljk1MiwwLTkuMjMzLDEuODA4LTEyLjg1LDUuNDIxYy0zLjYxNywzLjYxNy01LjQyNCw3Ljg5OC01LjQyNCwxMi44NDcgICAgYzAsNC45NDksMS44MDcsOS4yMzMsNS40MjQsMTIuODQ4TDE4OC4xNDksMzk2LjU3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4czkuMjMzLTEuODExLDEyLjg0Ny01LjQyOGwxMjcuOTA3LTEyNy45MDYgICAgYzMuNjEzLTMuNjE0LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0OGMwLTQuOTQ4LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg0N0MzMzguMTM5LDIzOS4zNTMsMzMzLjg1NCwyMzcuNTQ5LDMyOC45MDUsMjM3LjU0OXoiIGZpbGw9IiNjY2NjY2MiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); }
        .backend .main-content .table-wrapper table tbody tr {
          -webkit-transition: background-color 200ms ease-in-out;
          -o-transition: background-color 200ms ease-in-out;
          transition: background-color 200ms ease-in-out; }
          .backend .main-content .table-wrapper table tbody tr td {
            height: 42px;
            padding: 0;
            font-size: 14px;
            color: #767676; }
          .backend .main-content .table-wrapper table tbody tr:last-child {
            border-bottom: 0; }
          .backend .main-content .table-wrapper table tbody tr:hover {
            background-color: rgba(0, 183, 234, 0.1); }
      .backend .main-content .table-wrapper input[type="checkbox"] + span {
        margin-bottom: -8px; }
    .backend .main-content .table-footer-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      .backend .main-content .table-footer-wrapper .page-total {
        font-weight: bold;
        margin-top: 1em;
        margin-right: 40px;
        margin-bottom: 1em;
        color: rgba(0, 0, 0, 0.54);
        font-size: 14px; }
      .backend .main-content .table-footer-wrapper .page-show-item {
        margin-right: auto;
        position: relative; }
        .backend .main-content .table-footer-wrapper .page-show-item:before {
          content: "";
          position: absolute;
          top: 0;
          left: -20px;
          border-left: 1px solid #ccc;
          height: 100%; }
        .backend .main-content .table-footer-wrapper .page-show-item label {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          height: 30px;
          line-height: 30px;
          color: rgba(0, 0, 0, 0.54);
          font-size: 14px;
          font-weight: bold; }
          .backend .main-content .table-footer-wrapper .page-show-item label select {
            display: inline;
            height: 30px;
            line-height: 30px;
            width: auto;
            margin: 0 4px; }
      .backend .main-content .table-footer-wrapper .pagination {
        margin-left: auto;
        width: auto;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden; }
        .backend .main-content .table-footer-wrapper .pagination li {
          border-radius: 0; }
          .backend .main-content .table-footer-wrapper .pagination li:first-child, .backend .main-content .table-footer-wrapper .pagination li:last-child {
            padding: 0 10px; }
          .backend .main-content .table-footer-wrapper .pagination li:not(:last-child) {
            border-right: 1px solid #ccc; }
          .backend .main-content .table-footer-wrapper .pagination li a {
            font-size: 14px; }
        .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a {
          display: inline-block;
          border-radius: 0;
          text-align: center;
          vertical-align: top;
          height: 30px;
          color: #444;
          font-size: 14px;
          padding: 0 10px;
          line-height: 30px; }
          .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a:first-of-type, .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a:last-of-type {
            padding: 0 10px; }
          .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a:not(:last-of-type) {
            border-right: 1px solid #ccc; }
          .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a:last-of-type {
            border-left: 1px solid #ccc; }
          .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a a {
            font-size: 14px; }
          .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a.disabled {
            cursor: default;
            color: #999;
            pointer-events: none; }
        .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > span a {
          display: inline-block;
          border-radius: 0;
          text-align: center;
          vertical-align: top;
          height: 30px;
          color: #444;
          font-size: 14px;
          padding: 0 10px;
          line-height: 30px; }
          .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > span a:not(:last-of-type) {
            border-right: 1px solid #ccc; }
          .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > span a.current {
            color: #fff;
            background-color: #00b7ea; }
    .backend .main-content .button-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .backend .main-content .button-wrapper a {
        color: #00b7ea; }
    .backend .main-content .domain-status {
      position: relative; }
      .backend .main-content .domain-status:before {
        content: "";
        position: absolute;
        left: -20px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #000;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: background-color 200ms ease-in-out;
        -o-transition: background-color 200ms ease-in-out;
        transition: background-color 200ms ease-in-out; }
      .backend .main-content .domain-status.blacklist:before {
        background-color: #000; }
      .backend .main-content .domain-status.dangerous:before {
        background-color: #ff0000; }
      .backend .main-content .domain-status.normal:before {
        background-color: #27c989; }
    .backend .main-content .select-wrapper.small-select {
      width: 60px; }
      .backend .main-content .select-wrapper.small-select input {
        color: #767676;
        border-bottom: 0;
        margin-bottom: 0; }
      .backend .main-content .select-wrapper.small-select:before {
        content: "";
        position: absolute;
        left: -20px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #000;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: background-color 200ms ease-in-out;
        -o-transition: background-color 200ms ease-in-out;
        transition: background-color 200ms ease-in-out; }
      .backend .main-content .select-wrapper.small-select.disable:before {
        background-color: #ff0000; }
      .backend .main-content .select-wrapper.small-select.enable:before {
        background-color: #27c989; }
  .backend .password-modal {
    width: 360px;
    border-radius: 8px;
    top: 30% !important;
    color: #767676; }
    .backend .password-modal .modal-content h4 {
      font-size: 20px;
      font-weight: bold; }
    .backend .password-modal .modal-content p {
      font-size: 14px; }
    .backend .password-modal .modal-footer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      padding: 0 24px; }
      .backend .password-modal .modal-footer a {
        height: 32px;
        line-height: 32px; }
        .backend .password-modal .modal-footer a.new-password {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          border-radius: 8px;
          color: #767676;
          padding: 0 8px 0 16px;
          border: 1px solid #767676; }
          .backend .password-modal .modal-footer a.new-password .password-text {
            display: inline;
            height: initial;
            line-height: initial;
            width: 80px;
            border: 0;
            margin: 0 8px 0 0; }
        .backend .password-modal .modal-footer a.modal-close {
          padding: 0 32px;
          margin: 0 0 0 auto;
          border-radius: 8px; }
  .backend .domain-list-modal {
    width: 850px;
    height: 70%; }
    .backend .domain-list-modal .table-wrapper {
      overflow: auto; }
    .backend .domain-list-modal .modal-close {
      position: absolute;
      top: 24px;
      right: 24px;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      text-align: center;
      padding: 0; }
    .backend .domain-list-modal .small-select {
      width: 90px !important; }
      .backend .domain-list-modal .small-select.dangerous:before {
        background-color: #ff0000; }
      .backend .domain-list-modal .small-select.normal:before {
        background-color: #27c989; }
      .backend .domain-list-modal .small-select.blacklist:before {
        background-color: #000; }
  .backend .blacklist-modal {
    width: 460px;
    border-radius: 8px;
    top: 30% !important;
    color: #767676; }
    .backend .blacklist-modal .modal-content h4 {
      font-size: 20px;
      font-weight: bold; }
    .backend .blacklist-modal .modal-content p {
      font-size: 14px; }
    .backend .blacklist-modal .modal-content .input-field {
      margin-top: 30px;
      margin-bottom: 0; }
    .backend .blacklist-modal .modal-content .form-desc {
      display: block;
      margin-bottom: 6px; }
      .backend .blacklist-modal .modal-content .form-desc strong {
        padding-left: 10px; }
    .backend .blacklist-modal .modal-footer {
      padding: 0 24px; }
    .backend .blacklist-modal .modal-close {
      padding: 0 32px;
      margin: 0 0 0 auto;
      border-radius: 8px; }
  .backend .login-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-top: 88px; }
    .backend .login-wrapper .big-logo {
      width: 50%;
      height: 100%; }
    .backend .login-wrapper .login-form-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 50%; }
  .backend .form {
    background-color: #fff;
    padding: 12px 24px 24px;
    width: 460px;
    border-radius: 8px;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08); }
    .backend .form.login {
      width: 360px; }
      .backend .form.login .button-wrapper {
        margin-top: 125px; }
    .backend .form.compact .input-field {
      margin-bottom: 0; }
      .backend .form.compact .input-field input {
        margin-bottom: 5px; }
    .backend .form .input-field input {
      border-bottom-color: #ebebeb; }
    .backend .form .form-title {
      font-size: 30px;
      font-weight: bold;
      color: #767676;
      margin-top: 8px;
      margin-bottom: 8px; }
    .backend .form .form-sub-title {
      font-size: 14px;
      margin-top: 22px;
      margin-bottom: 34px; }
    .backend .form .form-desc {
      display: block;
      margin-top: 0;
      margin-bottom: 24px;
      font-size: 14px; }
    .backend .form .button-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .backend .form .button-wrapper button {
        padding: 0 38px;
        border-radius: 8px;
        -webkit-box-shadow: none;
        box-shadow: none; }
        .backend .form .button-wrapper button:first-child {
          margin-left: auto;
          margin-right: 4px; }

.announcement-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 300ms ease-in-out, visibility 300ms;
  -o-transition: opacity 300ms ease-in-out, visibility 300ms;
  transition: opacity 300ms ease-in-out, visibility 300ms; }
  .announcement-wrapper p {
    margin: 0.5rem 0; }
  .announcement-wrapper.fade-out {
    opacity: 0;
    visibility: hidden; }
  .announcement-wrapper .announcement {
    position: relative;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#066dcd), to(#94cff6));
    background-image: -webkit-linear-gradient(bottom, #066dcd, #94cff6);
    background-image: -o-linear-gradient(bottom, #066dcd, #94cff6);
    background-image: linear-gradient(to top, #066dcd, #94cff6);
    padding: 2.5rem 1rem 1rem 1rem;
    border-radius: 0.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50rem;
    max-height: 80%;
    color: white; }
    .announcement-wrapper .announcement .close {
      position: absolute;
      right: 0;
      top: 0;
      padding: 0.5rem;
      cursor: pointer; }
  .announcement-wrapper .announcement-icon {
    margin-right: 1rem; }
  .announcement-wrapper .announcement-content {
    overflow: auto; }
  .announcement-wrapper .announcement-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
  @media (max-width: 600px) {
    .announcement-wrapper .announcement-icon {
      width: 100px; }
      .announcement-wrapper .announcement-icon img {
        width: 100%;
        height: auto; }
    .announcement-wrapper .announcement {
      max-height: calc(100% - 2rem);
      width: calc(100% - 2rem);
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; } }