/*style*/
.bg-grey{background: #f4f4f4}

.show{display: block;}
/*login*/
.auth.theme-one .auto-form-wrapper{box-shadow: none;border:1px solid #ededed}
.h100{height: 100%} .w100{width: 100%}
.bg-black-opacity {
    background: rgba(0,0,0,.8);z-index: 9999
}

.wait div {
    width: 300px;
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
/*sidebar*/

#sidebar, .navbar-brand-wrapper {background: #212f43 !important;}
.sidebar > .nav:not(.sub-menu) > .nav-item:hover:not(.nav-profile):not(.hover-open) > .nav-link:not([aria-expanded="true"]) {background: #882623 !important;}
.sidebar > .nav .nav-item.nav-profile{min-width: 160px;}
.nav-profile-other{margin-top:0px;}
/*form*/

.custom-file label {
    line-height: 1.5rem;
}


/*card*/
.sort-wrapper {width: 100%;}
.card-title{font-size: 1rem;margin-bottom: 5px !important;}
.page-title a{color: #212529;text-decoration: none}


/*button*/


/*images upload*/
.dropzone{border: 1px solid #dee2e6 !important;border-radius: 4px;padding: 42px 21px;background: #f2f2f2;}
.dropzone .dz-preview.dz-image-preview{background: #f2f2f2;}
.dropzone .dz-message .dz-button{font-size: 12px !important;}
.dz-preview .dz-image img {width: 100% !important;height: 100% !important;object-fit: cover;}
.dz-remove{color: #333;font-size: 12px !important;margin-top: 5px}
.img-rounded{border-radius: 6px;}
.thumb, .img-thumbnail{width: 100%;margin: auto;vertical-align: middle;}
.thumb{}
.wrap-thumb{background-size: cover !important;cursor:pointer;width: 138px;min-height: 138px;display: block}
.media-wrap {width: 138px;min-height: 138px;display:inline-block;margin:0px 15px 15px 0px;overflow: hidden;border: 1px solid #dee2e6;position: relative;background: url('../images/loading.gif') center center}
div.lazy, .media-wrap {width: 138px;height:138px;display: inline-block;}
.thumb-delete, .wrap-img-choice{position:absolute;right:0px;top:0px;background: #fff;color:#333;padding: 2.5px 7.5px;border-radius: 3px;opacity: 0.5;border: none;}
.thumb-delete:hover{opacity: 1;background: red;color: #fff;}
.thumb-delete i{}


  /*animation*/
  .hoverBox{ }
  .hoverBox:hover, .hoverBox.active{  transform: scale(1.3, 1.3);z-index: 999;border: 2px solid yellow}
  .hoverBox .btn{position: absolute;
      left: 49%;
      top: 50%;
      width: 100px;
      margin-top: -18px;
      margin-left: -48px;display: none}
  .hoverBox.active .btn{display: inline-block;; transform: scale(0.7, 0.7)}
  .zoom {
    transition: transform .1s; /* Animation */
    margin: 0 auto;z-index: 999;
  }

  .zoom:hover {
    z-index: 9999;
    transform: scale(5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */

  }
  .pulse {
    animation: pulse 1s infinite;
  }
  /*bootstrap*/
  .btn.btn-sm, .btn-group-sm > .btn {font-size: 11px;text-transform: uppercase;    font-weight: 700;}
  .list-custom-dl p{margin-bottom: 0px}
  .list-custom-dl dd, .list-custom-dl dt{margin-bottom: .5rem;border-bottom: 1px solid #ececec;padding-bottom: .5rem}
  .modal-header .close {
      padding: 1rem 1rem;
      margin: -15px -17px -25px auto;
  }

  .modal .list-unstyled label{font-size: 0.7rem;font-weight: bold;text-transform: uppercase;}

.rules-panel{

  border:1px solid #ececec;background: #fdfdfd;width: 100%;
  padding: 15px;
}
.rules-panel h3{font-size: 0.8237rem;font-weight: bold}

.table-prod dt{font-size: 0.6rem;font-weight: bold;text-transform: uppercase;color: #999}
.table-prod dd{font-size: 0.9rem}
.icon-arrow-to{position: absolute;top: 50%;margin-top: -16px;left: 50%;margin-left: -14px;    background: #fff;padding: 5px;border-radius: 4px;}
.table td, .table th {
    vertical-align: middle;
    font-size: 0.82rem;
}
.table-custom td, .table-custom th {
    padding: 6px 12.5px;
}

.toast-header{font-size: 13px;}
.toast-body{font-size: 12px !important}


@media (min-width: 1748px){

  .table-responsive {
    overflow: visible !important;
  }
}
@media (max-width: 991px){
  #sidebar{z-index: 999999}
  .navbar-brand-wrapper {background: #fff !important;}
  .navbar.default-layout .navbar-brand-wrapper {
    width: 150px;
  }
  .navbar.default-layout .navbar-menu-wrapper {
    width: calc(100% - 150px);box-shadow: none;
  }
  .navbar.default-layout .navbar-brand-wrapper .brand-logo-mini img {
    width: 130px;position: relative;left:15px
  }
}