@media all and (max-width: 768px) {
  .el-mobile-table > div > table,
  .el-mobile-table > div > table > thead,
  .el-mobile-table > div > table > tbody,
  .el-mobile-table > div > table > tbody > tr > th,
  .el-mobile-table > div > table > tbody > tr > td,
  .el-mobile-table > div > table > tbody > tr {
    display: block;
  }
  .el-mobile-table > div > table {
    width: 100% !important;
  }
  .el-mobile-table .el-mobile-table {
    border: 1px solid rgb(7, 190, 71);
    box-shadow: 0px 0px 8px 0px rgb(7, 190, 71);
  }
  .el-mobile-table .el-mobile-table .el-mobile-table {
    border: 1px solid #409EFF;
    box-shadow: 0px 0px 8px 0px #409EFF;
  }
  .el-mobile-table > div > table > thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .el-mobile-table > div > table > tbody > tr {
    border-bottom: 3px solid #ddd;
    display: flex;
    flex-flow: column;
  }
  .el-mobile-table > div > table > tbody > tr .cell {
    /* line-height: unset; */
    text-align: right;
  }
  .el-mobile-table > div > table > tbody > tr > td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  .el-mobile-table > div > table > tbody > tr > td * {
    /* display: inline-block; */
    /* float: right; */
  }

  .el-mobile-table .el-table__expand-column {
    order: 1;
  }
  .el-mobile-table > div > table > tbody > tr > td .cell {
    width: 100%;
  }
  .el-mobile-table > div > table > tbody > tr > td .dat-cell {
    width: 100%;
  }
  .el-mobile-table > div > table > tbody > tr > td .dat-cell::before {
    /*
      * aria-label has no advantage, it won't be read inside a table
      content: attr(aria-label);
      */

    content: attr(label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
}

.el-table .cell {
  box-sizing: border-box;
  white-space: normal;
  word-break: keep-all !important;
  line-height: 23px;
}
.small2-modal {
  width: 450px !important;
  max-width: 98%;
  margin-top: 5px !important;
}
.small-modal {
  width: 580px !important;
  max-width: 98%;
  margin-top: 5px !important;
}
.default-modal {
  width: 680px !important;
  max-width: 98%;
  margin-top: 5px !important;
}
.default-modal .el-dialog__body {
  padding: 10px 20px;
}
.default2-modal {
  width: 900px !important;
  max-width: 98%;
  margin-top: 5px !important;
}
.default2-modal .el-dialog__body {
  padding: 10px 20px;
}
.small-modal .el-dialog__body {
  padding: 10px 20px;
}
.medium-modal {
  width: 960px !important;
  max-width: 98%;
  margin-top: 5px !important;
}
.big-modal {
  width: 100% !important;
  max-width: 98%;
  margin-top: 5px !important;
}
.big-modal .el-dialog__body {
  padding: 10px 20px;
}
.medium-modal .el-dialog__body {
  padding: 10px 20px;
}
.fullscreen-modal {
  width: 90% !important;
  max-width: 98%;
  margin-top: 5px !important;
}
.el-message {
  min-width: 320px !important;
  max-width: 100% !important;
}
.group-header {
  font-weight: 700;
  font-size: 24px;
  color: #636e72;
  padding: 8px;
}
.a-desc img {
  max-width: 100%;
}
h2 {
  color: #130f40;
}
.blank-table {
  margin-top: 15px;
  color: #a4b0be;
  height: 100px;
  font-size: 22px;
  text-align: center;
  line-height: 100px;
  border: 2px dashed #a4b0be;
}

.el-button-group > a:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.el-button-group > a:not(:last-child) {
  margin-right: -1px;
}

.el-button-group > a {
  float: left;
  position: relative;
  display: inline-block;
}

.el-row[height-sync] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.el-row[height-sync] .el-col {
  /* width: 100%; */
  display: flex;
  /* flex-direction: column; */
}

.a-link {
  color: #0984e3;
}
.title-dialog {
  margin: 0;
  font-weight: 600;
  font-size: 14pt;
  color: rgb(64, 158, 255);
  text-transform: uppercase;
}
.input-custom .el-input__inner {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #dcdfe6;
}
.input-custom.el-textarea__inner {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #dcdfe6;
}
.input-custom.is-disabled .el-input__inner {
  background-color: #fff !important;
  border-bottom: 1px dotted #dcdfe6;
  color: #606266 !important;
}
.input-custom .el-input.is-disabled .el-input__inner {
  background-color: #fff !important;
  border-bottom: 1px dotted #dcdfe6;
  color: #606266 !important;
}
.form-custom .el-form-item__label {
  font-size: 10pt;
}
.form-custom label {
  color: #000000b3;
}
.form-footer {
  text-align: center;
  padding: 10px;
}

.inline-block {
  display: inline-block;
  padding: 5px;
}
.is-disabled .el-input__inner {
  background-color: #fff !important;
  border-bottom: 1px dotted #dcdfe6;
  color: #606266 !important;
}
.el-input.is-disabled .el-input__inner {
  background-color: #fff !important;
  border-bottom: 1px dotted #dcdfe6;
  color: #606266 !important;
}
.el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff !important;
  border-bottom: 1px dotted #dcdfe6;
  color: #606266 !important;
}
.float-right {
  float: right;
}
.padding-bottom5 {
  padding-bottom: 5px;
}
.align-center {
  text-align: center;
}
.text-italic {
  font-style: italic;
}
.mg-50 {
  margin: 50px;
}
.icon-table {
  font-size: 18px;
  padding-left: 5px;
}
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}
.el-popper {
  word-break: break-word !important;
  font-size: 10pt !important;
}
.el-popover__title {
  font-weight: 600 !important;
  font-size: 10pt !important;
  color: #e6a23c !important;
}
.el-popover__scroll {
  max-height: 96%;
  overflow-y: auto;
}
.badge-custom .el-badge__content {
  font-size: 10px !important;
  height: 15px !important;
  line-height: 15px !important;
  padding: 0 5px !important;
}
.badge-custom .el-badge__content.is-fixed {
  top: 5px !important;
}
.el-radio-group .el-radio.is-disabled.is-checked .el-radio__label {
  color: #0984e3 !important;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff !important;
  border-color: #409eff !important;
}
.padding-5 {
  padding: 5px 0;
}
.display-flex {
  display: flex;
}
.form-item-custom {
  display: flex;
  align-items: center;
}
@media all and (max-width: 768px) {
  .el-select-dropdown {
    left: 0 !important;
    max-width: 400px !important;
  }
  .el-popover {
    left: 0;
    max-width: 450px;
  }
  .big-modal,
  .default-modal,
  .default2-modal,
  .small-modal,
  .small2-modal,
  .medium-modal {
    width: 100% !important;
  }
}
.box-select.el-autocomplete-suggestion {
  width: 800px !important;
}
@media only screen and (min-width: 763px) {
  ::-webkit-scrollbar-track {
    background: #ddd;
    border-radius: 20px;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #f5f5f5;
  }

  ::-webkit-scrollbar-thumb {
    background: #b2bec3;
    border-radius: 20px;
  }
}
.scan-block {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.scan-block span {
  font-size: 10pt;
  font-weight: 600;
  width: 140px;
}
@media only screen and (max-device-width: 736px) {
  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar,
  ::-webkit-scrollbar-track {
  }
}
@media (max-width: 576px) {
  .pagination {
    display: flex;
    flex-direction: column-reverse;
  }
}
@media (max-width: 400px) {
  .el-message-box {
    width: 375px !important;
  }
}
.text-hightlight_red {
  font-weight: 600;
  color: crimson;
}
.text-hightlight_green {
  font-weight: 600;
  color: rgb(20, 220, 80);
}
.label-accept label {
  color: #02bc77;
  font-weight: 600;
}
.clear-both {
  clear: both;
  content: "";
}
.display-block {
  display: block;
}
.font-10 {
  font-size: 10pt;
}
.mb-10 {
  margin-bottom: 10px;
}
.ml-32 {
  margin-left: 32px;
}
.item-hover-blue:hover {
  cursor: pointer;
  box-shadow: 0px 0px 8px 0px #409EFF
}