/* Delete modal */
.custom-modal .content {
  color: white;
}
.custom-modal .modal-footer {
  padding-bottom: 10px;
}

/* Search user modal */
.custom-search-modal .card {
  margin-bottom: 0px;
  margin-top: 0px;
}
.custom-search-modal .card-body {
  padding-bottom: 0;
}
.custom-search-modal form .form-group {
  margin: 0px 0 0;
}
.custom-search-modal .table>tbody>tr>td, .table>thead>tr>th {
  padding: 4px 8px;
}
.custom-search-modal .form-group {
  padding-bottom: 0px;
}
.custom-search-modal .modal-footer {
  padding-bottom: 14px;
}
.custom-search-modal .table {
  margin-bottom: 10px;
}
.custom-search-modal .modal-dialog .modal-body {
  padding-top: 16px;
}
.custom-search-modal .modal-header .close {
  padding: 10px;
}
.custom-search-modal .waiting-icon {
  position: absolute;
  top: -38px;
}
.fl-name {
  text-transform: capitalize;
  font-size: 20px;
  color: #535254;
}
.card .only-label {
  margin-bottom: 0px;
  padding-top: 18px;
}
.card .man-body-image {
  border-width: thick;
  border-color: #EEE;
  border-style: solid;
  display: block;
  margin: auto;
  background-image: url(/assets/img/jintaizu.png);
  background-size: cover;
  background-position: top center;
  width: 450px;
  height: 500px;
}
.custome-table .input-control {
  background-image: linear-gradient(to top, #9c27b0 2px, rgba(156, 39, 176, 0) 2px);
}
.custome-table .base-row {
  display: none;
}
.custome-table .error {
  border-bottom: 1px solid #f44336;
  background-image: linear-gradient(to top, #f44336 2px, rgba(156, 39, 176, 0) 2px);
}
.custome-table .error:focus {
  border-bottom: 0;
}
/* Progress bar */
.progressbar {
  counter-reset: step;
}
.progressbar li {
  list-style-type: none;
  width: 10%;
  float: left;
  font-size: 12px;
  position: relative;
  text-transform: uppercase;
  color: #7d7d7d;
  z-index: 2;
}
.progressbar li:before {
  width: 34px;
  height: 34px;
  content: counter(step);
  counter-increment: step;
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  border-radius: 50%;
  background-color: white;
}
.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}
.progressbar li.active {
  color: #4caf50;
  font-weight: bold;
}
.progressbar li.active:before {
  border-color: #4caf50;
  background-color: #4caf50;
  color: #FFF;
}
.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}
/* Time line panel */
.timeline>li.timeline-inverted>.timeline-panel.custom-tl-panel {
  float: left;
}
.timeline>li>.timeline-panel.custom-tl-panel {
  width: 70%;
  float: right;
}
.custom-tl:before {
  background-color: white;
}
.timeline .custom-tl-panel img, .custome-table img {
  max-width: 100%;
}
/* Badge */
.custom-badge {
  padding: 10px 14px;
  font-size: 18px;
  margin-right: 20px;
}
.user-info .username {
  text-transform: capitalize;
}
.login-page .footer a {
  color: #89229b;
}
.auth .validate {
  color: #f44336;
}
.dm-self-comment {
  background: #9fe273 !important;
}
.timeline>li>.timeline-panel.dm-self-comment:after {
  border-left: 14px solid #9fe273;
}
.fb-image img {
  width: 200px;
  height: 200px;
}

.width-65{
  width: 65% !important;
}

.margin-auto{
  margin: auto !important;
}

.card .card-footer.text-right{
  display: unset;
}

.bmd-form-group .bmd-label-static.error{
  position: relative !important;
  margin-top: 10px !important;
  margin-bottom: 0px !important;
}

.form-group.has-danger.bmd-form-group{
  padding: 0px !important;
}

.special-error{
  margin: 0px;
  margin-top: -4px;
  line-height: 18px;
}

.special-error label{
  margin: 0px;
}

.table-responsive.list{
  overflow: hidden;
}

ul.pagination{
  margin-top: 10px;
}


.card .card-header.card-header-icon .material-icons.search-btn{
  width: 17px;
}

.error{
  color: red;
  font-style: italic;
  margin: 0px;
}

.width-50-px{
  width: 50px !important;
}

/*----------------------------*/
/*-------- loading -----------*/
.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #fed;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #dddddd transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.modal-dialog .col-form-label.col-form-label{
  position: relative;
  top: 10px;
}
.modal-dialog{
  max-width: 50%;
}
.modal-title{
  font-weight: bold;
}
.table-shop-items {

}
.table-shop-items tr td:first-child {
  width: 150px;
}
.table-shop-items tr td:last-child {
  position: relative;
  vertical-align: top;
}
.table-shop-items tr td:last-child h3 {
  margin-top: -6px;
}
.table-shop-items tr td:last-child .quality {
  position: absolute;
  bottom: 12px;
  font-size: 18px;
}
.table-shop-items tr td:last-child button {
  position: absolute;
  bottom: 7px;
  right: 0;
}
.table-shop-items tr.no-item {
  background: #cccccc;
  opacity: 0.5;
}
.modal .modal-header {
  z-index: 111;
}
.swal2-popup .swal2-styled.btn-danger {
    /* background-color: #f44336 !important; */
    color: #fff;
    background-color: #f44336;
    border-color: #f44336;
    box-shadow: 0 2px 2px 0 rgba(244, 67, 54, 0.14), 0 3px 1px -2px rgba(244, 67, 54, 0.2), 0 1px 5px 0 rgba(244, 67, 54, 0.12);
}
.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table {
  width: 100% !important;
}
table .date-col {
  width: 130px !important;
}
@media (min-width: 992px) {
  table .date-col {
    width: auto !important;
    min-width: 130px;
  }
}
.logo .user-panel {
  display: flex;
  justify-content: space-between;
  margin-left: 23px;
  margin-right: 23px;
}
.logo .user-panel a {

}
.logo .user-panel .username {

}
.logo .user-panel .logout-link {
  display: block;
  font-size: 70% !important;
  margin-left: auto;
}
@media (min-width: 992px) {
  .logo .user-panel .logout-link {
    display: none !important;
  }
}