.ajax-error-message {
  width: 660px!important;
}

.ajax-error-message_ul li {
  line-height: 18px;
  padding-bottom: 10px;
}

.ajax-error-message_ul li:last-child {
  padding-bottom: 0;
  list-style: decimal;
}
.order-table-info {
  text-align: left;
}
.user-operation,.displayCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-logo-link {
  display: flex !important;
  justify-content: flex-start;
  align-content: center !important;
  height: 50px !important;
}

.sidebar-logo {
  flex-shrink: 0;
  height: 30px !important;
  width: 30px !important;
  margin-top: 10px;
}

.sidebar-title {
  max-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.user-operation > * {
  margin: 0 5px;
}

.user-operation > *:first-child {
  margin-left: 0 !important;
}

.user-operation > *:last-child {
  margin-right: 0 !important;
}

.user-operation button {
  padding: 5px 10px;
  font-size: 16px;
}

.user-operation i {
  font-size: 16px;
  font-weight: bold;
}

.input100 {
  width: 100% !important;
}

.input80 {
  width: 80% !important;
}

.input70 {
  width: 70% !important;
}

.input60 {
  width: 60% !important;
}

.input50 {
  width: 50% !important;
}

.input40 {
  width: 40% !important;
}

.input30 {
  width: 30% !important;
}

.input20 {
  width: 20% !important;
}

.app-container {
  margin: 20px;

  &.xd-has-tree {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    & .app-container__tree {
      min-width: 300px;
      flex-shrink: 0;
      margin-right: 20px;
      min-height: calc(100vh - 90px);
    }

    & .app-container__list {
      flex: 1;
    }
  }

  .red {color: $red;}
  .green {color: $green;}
  .blue {
    color: $blue
  }

  td.tdred {color: red;}
  td.tdgreen {color: green;}

  &__search {
    margin-bottom: 20px;

    & .el-card__body {
      padding-bottom: 0;
    }
  }

  &__list {

    &-title {
      font-weight: bold;
    }

    &-btn {
      margin-bottom: 20px;
    }

    &-pagination {
      display: flex;
      justify-content: space-between;
      align-items: center;


      & > *:first-child {
        flex-shrink: 0;
      }

      & > *:nth-child(2) {
        flex: 1;
        width: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }

    &-table {
      padding:  20px 0;

      &-tag {
        &.oneline {
          display: flex;
          justify-content: center;
          flex-flow: wrap;
          align-content: flex-start;
          & > * {
            margin-right: 10px;
          }
        }
        & > * {
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      &-option {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: wrap;

        &.iphone {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: wrap;

          & > * {
            margin-bottom: 10px;
            margin-left: 0!important;
            margin-right: 0!important;
            width: 100%;


            &:last-child {
              margin-bottom: 0;
            }

            & * {
              width: 100%;
            }
          }
        }

        & .el-button i {
          font-size: 16px;
        }

        & > * {
          margin-top: 5px!important;
          margin-right: 5px !important;
          margin-left: 5px !important;
        }

      }

      &-image {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        & i.el-icon-circle-close {
          color: #fff;
        }
      }

      & .el-table__header tr th {
        background: #f8f8f8;
        color: #333;
      }
    }
  }

  &__form-buttons {
    width: 270px !important;
    display: flex;
    justify-content: space-around;
  }

  &__title {
    font-size: 16px;
    line-height: 24px;
    padding: 0 0 10px;
    margin-bottom: 20px;
    font-weight: bold;
    border-bottom: 1px solid #efefef;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__body {
    & ::v-deep .el-tabs__content {
      padding-top: 20px;
    }
  }

  &__content {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0 !important;
    }
  }

}

.app-table-form {
  background-color: #95B8E7;

  & .el-form-item {
    margin-bottom: 0!important;
    display: flex;
    flex-flow: nowrap;
    justify-content: flex-start;
    align-items: center;

    & >* {
      flex: 1;
    }
  }


  & > tr {}


  & > tr > td, & > tr > th {
    padding: 8px 10px;
    background-color: #fff;
    line-height: 30px;
    vertical-align: top;
    text-align: left;
    font-size: 14px;
    color: #666;

    &.right {
      text-align: right;
    }

    &.left {
      text-align: right;
    }

    &.center {
      text-align: center;
    }

    &.vCenter {
      vertical-align: middle;
    }

    &.vTop {
      vertical-align: top ;
    }

    &.w5 {width: 5%;}
    &.w10 {width: 10%;}
    &.w15 {width: 15%;}
    &.w20 {width: 15%;}
    &.w25 {width: 5%;}
    &.w30 {width: 10%;}
    &.w35 {width: 15%;}
    &.w40 {width: 15%;}
    &.w45 {width: 15%;}
    &.w50 {width: 15%;}
  }

  & > tr > th {
    background-color: #E0ECFF;
  }

  &__header {
    background-color: #E0ECFF!important;
    text-align: right!important;
    color: #111!important;
  }


  &__content {
    max-width: 20%;
    padding: 4px 5px!important;
  }

}

@media screen and (max-width: 768px) {
  .ajax-error-message {
    width: 90vw!important;
  }
  .input100, .input20, .input30, .input40, .input50, .input60, .input80, .input70 {
    width: 100% !important;
  }

  .app-container {
    margin: 10px;

    &.xd-has-tree {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;

      & .app-container__tree {
        width: 100%;
        flex-shrink: 0;
        margin-right: 20px;
        min-height: calc(100vh - 60vh);
        height: calc(100vh - 60vh);
        margin-bottom: 10px;
        overflow-y: auto;
      }

      & .app-container__list {
        flex: 1;
      }
    }

    &__search {
      margin-bottom: 10px;

      & > .el-card__body {
        padding-bottom: 0!important;
      }

      & .xd-search {
        & > .el-form-item:last-child {
          margin-bottom: 0!important;
        }
      }
    }

    &__list {

      &-btn {
        margin-bottom: 16px;
      }

      &-pagination {
       flex-flow: wrap;

        & .el-pagination {
          padding-bottom: 15px!important;
        }


        & > *:first-child {
          flex-shrink: 0;
          width: 100%;
        }

        & > *:nth-child(2) {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 10px;
        }
      }

      &-table {
        padding: 10px 0;

        &-edit {
          display: flex !important;
          justify-content: space-around !important;
        }
      }
    }

    &__list, &__search, &__content, &__info {
      & .el-card__body {
        padding: 10px;
      }
    }

    &__content {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0 !important;
      }
    }

    &__form-buttons {
      width: 260px !important;
      display: flex;
      justify-content: space-around;
    }

    &__title {
      padding: 0 0 10px;

      & > div {
        font-size: 12px;
        justify-content: flex-start;

        & > span, & > i {
          flex-shrink: 0;
          font-size: 12px;
        }

        & > div {
          font-size: 12px;
          flex: 1;
        }
      }
    }

    &__body {
      & ::v-deep .el-tabs__content {
        padding-top: 10px;
      }
    }


  }

  .xd-cascade-popper {
    width: 100vw;
    left: 0;
    overflow-x: auto;
    padding-bottom: 10px;
  }

  .app-container__list-table-option.out {
    flex-direction: column;

    & > * {
      width: 100%;
      flex: 1;
      margin-bottom: 10px !important;

      &:last-child {
        margin: 0 !important;
      }
    }
  }

  body.jfb .el-message-box {
    width: 90vw !important;
  }

  body.jfb .el-message {
    width: 90vw !important;
    min-width: auto !important;
  }
}


.loading-dot {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75px;
  height: 16px;
  transform: translate(-50%, -50%);
  font-size: 0;
  color: #000;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  & > div {
    color: $blue !important;
    background-color: currentColor;
    border: 0 solid currentColor;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border-radius: 50%;
    animation: ball-beat 0.7s -0.15s infinite linear;
    flex-shrink: 0;
  }

  & > div:nth-child(2n-1) {
    animation-delay: -0.5s;
  }
}

@keyframes ball-beat {
  50% {
    opacity: 0.2;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.month_box .el-month-table td.today .cell{
  color: #606266!important;
  font-weight: normal;
}