label {
  cursor: pointer;
}
select.form-control {
  height: 32px !important;
  line-height: 150% !important;
  padding-left: 10px !important;
}
.undecorated-link:hover {
  text-decoration: none;
}
.header-profile-image {
  opacity: 0.8;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  margin-right: 5px;
}
.open .header-profile-image,
a:hover .header-profile-image {
  opacity: 1;
}
.user-header-dropdown-toggle {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

.m-b-none {
  margin-bottom: 0 !important;
}

.modal-lg {
  width: 90% !important;
}

.modal-content {
  border-radius: var(--radius-s) !important;
  border: none !important;
}

.modal-header {
  padding: 10px !important;
  border-bottom-color: #F5F5F5 !important;
  padding-left: 20px !important;
}

.modal-header h4 {
  font-size: 15px !important;
  text-transform: uppercase !important;
}

.modal-body {
  padding: 15px !important;
}

.modal-footer {
  padding: 10px 12px !important;
  border-top-color: #f5f5f5 !important;
}

.checkbox.i-checks a {
  display: inline-block;
  width: 95%;
}

.help-block.error-text {
  color: #f00;
}

.help-block.error-text-new {
  color: #f00;
}

.form-group.has-error .help-block.error-text {
  color: #f00;
}

.form-group.has-error .form-control {
  border-color: #f00;
}

.border-red-price-lt {
  border: 1px solid #f00 !important;
}

.border-red .multiSelect > button{
  border: 1px solid #f00 !important;
}
.input-password .progress {
  background-color: #949393;
}

.th-sortable {
  position: relative;
}

.th-sortable .th-sort {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  float: right;
  right: 5px;
}

.th-sortable.active {
  background-color: #3E8DBD !important;
}


table a {
  color: var(--primary);
}

table a:hover {
  text-decoration: underline;
}

.panel .table td, .panel .table th {
  padding: 8px 8px;
}

.table-responsive {
  margin-bottom: var(--range-m);
  border-radius: var(--radius-s)  var(--radius-s) 0 0;
  border: transparent !important;
}

.table-responsive table {
  margin-bottom: 0;
  border-collapse: collapse;
}

.pagination-limit {
  display: inline-block;
  margin: 0 10px;
}

.pagination-limit label {
  float: left;
  display: block;
  width: auto;
  margin-right: 10px;
  font-weight: bold;
  margin-top: 8px;
}

.pagination-limit select {
  float: left;
  display: block;
  width: auto;
}

.nav-xs .open .dropdown-menu {
  right: 0;
  left: 85px !important;
  bottom: -118px !important;
  top: auto !important;
}

.open > .dropdown-menu {
  right: 0 !important;
  left: 10px;
  bottom: -105px !important;
  top: auto !important;
}

.open > .order-dropdown-menu {
  left: -180px !important;
  top: 45px !important;
  height: fit-content !important;
}

@media (min-width: 768px) {
  .nav-xs .visible-nav-xs {
    display: block !important;
  }
}

.nav-xs .thumb {
  width: 100%;
  height: 60px;
}

.thumb {
  width: 70px;
}

.district-list li {
  width: calc((100%/3) - 30px)
}

.district-list label {
  font-weight: normal;
}

.district-list-full > li {
  width: 100%;
}

.district-list-full > label {
  font-weight: normal;
}

.form-group.has-error .panel-districts  header {
  color: #a94442;
}

.form-group.has-error .district-list label {
  color: inherit;
}

.bg-black {
  background-color: var(--white);
  color: black;
}
.bg-black .nav > li > a {
  color: var(--black);
}

.nav-tabs a {
  text-decoration: none !important;
}

.bg-black.dk, .bg-black .dk {
  background-color: white;
  color: black;
}

.bg-black .nav-primary > ul.nav-main > li:hover > a,
.bg-black .nav-primary > ul.nav-main > li:focus > a,
.bg-black .nav-primary > ul.nav-main > li:active > a,
.bg-black .nav-primary > ul.nav-main > li.active > a {
  background-color: var(--lessprimary);
  color: var(--primary);
  border-radius: 6px;
}

.bg-black .nav > li > a:hover,
.bg-black .nav > li > a:focus {
  background-color: var(--white);
  color: var(--primary);
}

.bg-black .nav > li:hover > a,
.bg-black .nav > li:focus > a,
.bg-black .nav > li:active > a,
.bg-black .nav > li.active > a {
  background-color: var(--white);
  color: var(--primary);
}

.menu-aside a {
  text-decoration: none !important;
}

#groups label {
  font-weight: normal;
  margin: 5px;
}

.nav-xs .nav-primary {
  margin-top: 10px;
  height: calc(100vh - 65px);
  overflow-x: auto;
  direction: rtl;
}

.clearb {
  display: block;
  overflow: hidden;
}

.border-none-l {
  border-left: none !important;
}

.border-none-right {
  border-right: none !important;
}

@media (min-width: 768px) {
  .nav-xs .nav-primary > ul > li > a {
    font-size: inherit;
  }
}

.order-border {
  border-right: solid 1px #dee5eb;
  border-bottom: solid 1px #dee5eb;
}

.order-totals-summary td {
  padding-left: 10px;
  padding-right: 10px;
}

.popover {
  max-width: 400px !important;
}

.pagination-total {
  height: 32px;
  display: inline-block;
  margin-right: 10px;
  line-height: 32px;
  font-weight: bold;
}
.vbox-content {
  padding-top: var(--range-m);
}

/*====== order ===== */
.out-stock,.out-stock:focus {
  background: var(--lessgray) !important;
  color: #666 !important;
  border: solid 1px #e7e7e7 !important;
}
.out-stock:hover {
  background: #E6E5E5 !important;
  color: #666 !important;
  border: solid 1px #e7e7e7 !important;
}
.pos-delivering,.pos-delivering:focus{
  background-color: var(--lessorange) !important;
  color: var(--orange) !important;
  border: solid 1px var(--orange) !important;
}
.pos-delivering:hover {
  background-color: #ECBE88 !important;
  color: var(--orange) !important;
  border: solid 1px var(--orange) !important;
}
.pos-complete,.pos-complete:focus{
  background-color: var(--lessgreen) !important;
  color: var(--green) !important;
  border: solid 1px var(--green) !important;
}
.pos-complete:hover {
  background-color: #D9E8BE !important;
  color: var(--green) !important;
  border: solid 1px var(--green) !important;
}
.pos-restock,.pos-restock:focus {
  background: #c2c1c1 !important;
  color: #fff !important;
  border: solid 1px #a9a8a8 !important;
}
.pos-restock:hover {
  background: #ADADAD !important;
  color: #fff !important;
  border: solid 1px #929292 !important;
}
.store-in-stock{
  /* color: var(--primary) !important; */
}
.store-out-stock{
  /* color: #788288 !important; */
}
.store-out-stock-red {
  /* color: #f00 !important; */
}

.width-250-px {
  width: 250px !important;
}
.nomargin{
  margin: 0 !important;
}


#content div.modal.fade.in::-webkit-scrollbar-thumb {
  background-color: #fff;
}

/*====== report ======*/
#table-report table{
background-color: #fff;
  margin-bottom: 0px;
}
#table-report > table > tbody > tr:last-child{
  background: var(--white);
}
#table-report > table > tbody > tr:last-child:hover td{
  background: rgba(149, 206, 255, 0);
}
#table-report > table > tbody > tr:last-child td{
  font-weight: bold;
}
.table .statistic-row {
  background: rgba(149, 206, 255, 0.36);
}


/*======= store =======*/
.modal .modal-dialog .panel-heading{
  padding: 8px 8px;
}

#list-orders.table td,#list-stores td,#list-stocks td,#list-customers td, #list-price-promotions td{
  border-left: 1px solid #eaeef1;
}
#list-orders .checkbox.i-checks {
  margin: 0;
  min-height: 14px;
}
#list-orders .checkbox.i-checks i {
  margin-right: 0;
  width: 14px;
  height: 14px;
  font-size: 10px;
  border-color: var(--primary);
  border-radius: 2px;
}
#list-orders .checkbox.i-checks.uncheckable i {
  border-color: #cbd5dd;
}
#list-orders .checkbox.i-checks input {
  display: none;
}
#list-orders,#list-stores,#list-stocks,#list-customers{
  margin-bottom: 0px;
}
#list-orders thead th{
  text-align: center;
}

@media only screen and (max-width: 1100px) {
  #list-orders .width-350-px{
    width: 250px;
  }
}

/* LOADING EFFECTS */

.loading::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
}

.loading-page::after {
  content: '';
  display: block;
  height: 100%;
  width: calc(100% - 240px);
  position: fixed;
  top: 0;
  right: 0;
  background-color: transparent;
  z-index: 99999;
}

.loading-page.full-width::after {
  width: calc(100% - 70px);
}

.loading-page::before {
  content: '';
  display: block;
  background-color: var(--primary);
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  transition: width 1.5s;
}

.loading-page.loading-processing::before {
  width: 50%;
}

.loading-page.loading-complete::before {
  width: 100% !important;
}

.cssload-container {
  width: 100%;
  height: 32px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
}

.cssload-speeding-wheel {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border: 3px solid var(--primary);
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: cssload-spin 575ms infinite linear;
  -o-animation: cssload-spin 575ms infinite linear;
  -ms-animation: cssload-spin 575ms infinite linear;
  -webkit-animation: cssload-spin 575ms infinite linear;
  -moz-animation: cssload-spin 575ms infinite linear;
}

@keyframes cssload-spin {
  100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes cssload-spin {
  100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes cssload-spin {
  100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes cssload-spin {
  100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes cssload-spin {
  100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

.loading {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
}

.store-status-online {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 10px;
}

.store-status-online.store-online {
  background-color: #8BC34A;
}

.store-status-online.store-offline {
  background-color: #C5C4C4;
}

/* menu */
#nav.nav-xs .nav-primary ul.nav > li:nth-child(8) > ul{
  /*top: -237px;*/
  min-width: 250px;
}
#nav.nav-xs .nav-primary ul.nav > li > ul::-webkit-scrollbar-thumb {
  background-color: #fff;
}
/* drilldown */
.drilldow-table .nopadding{
  padding: 0;
}
.drilldow-table {
  margin-bottom: 20px;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.drilldow-table .drilldow-data-head{
  font-weight: bold !important;
  background-color: var(--primary) !important;
  color: #FFF !important;
  padding: 8px 8px;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.drilldow-table .drilldow-data-body{
  display: block;
}
.drilldow-table .drilldow-data-body-row{
  background: #fff;
  vertical-align: middle;
  border-bottom: 1px solid var(--lightgray);
  border-left: 1px solid var(--lightgray);
  border-right: 1px solid var(--lightgray);
  padding: 8px 0 8px 8px;
  line-height: 1.42857143;
  color: var(--black);
}
.drilldow-table .drilldown-container{
  display: none;
  padding-left: 20px;
}
.drilldow-table .drilldow-data-body-row table th {
  background-color: var(--lightgray) !important;
  border: solid 1px #ddd;
  color: #444!important;
}
.drilldow-table .drilldow-data-body-row table tr td:first-child{ border-left: solid 1px #dee5eb;}
.drilldow-table .drilldow-data-body-row table tr td:last-child{ border-right: solid 1px #dee5eb;}
.drilldow-table .drilldow-data-body-row table tr:last-child{border-bottom: solid 1px #dee5eb;}
.drilldow-table .drilldow-data-body-row table tr:last-child td > div{  margin-top: 5px;}
.drilldow-table input[name*="data-store-"]:checked ~ div > .drilldown-container{
  display: block;
}
.drilldow-table input[name*="data-store-"]:checked ~ div > label > i:before {
  content: "\f056";
}
.drilldow-table .drilldow-data-body-row.lv1 > .col-md-12 > .drilldown-container{padding-left: 60px;}
.drilldow-table label[for*="data-store-"]{
  width: 20px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}

.drilldow-table .drilldow-data-footer{
  background: rgba(149, 206, 255, 0.36);
  vertical-align: middle;
  border-top: 1px solid #ececec;
  padding: 8px 0 8px 8px;
  line-height: 1.42857143;
  color: #444;
}
/* login */
#login-form{
  margin: 5vh 0;
}
#login-form .form-group {
  margin-bottom: 0px;
}

/* update home,order 9/5 */
.m-t-120{
  margin-top: 120px;
}
.payment_2.pos-success,.payment_2.pos-success:focus {
  background-color: #DFF2BF  !important;
  color: #4F8A10 !important;
  border: solid 1px #A0D666 !important;
}
#list-orders .btn-cancel{
  color: var(--red) !important;
  background-color: var(--lessgray) !important;
  border-color: #e7e7e7 !important;
}
#report-store-drilldown.loading{height: auto;}

#nav.nav-xs .dropdown ul.dropdown-menu:before,#nav.nav-xs .dropdown ul.dropdown-menu:after{
  display: none;
}

#nav section.scrollable::-webkit-scrollbar-thumb {
  background-color: var(--gray);
  width: 3px;
  height: 3px;
  border-radius: 0px;
}

@media (min-width: 768px) {
  .nav-xs .nav-primary > ul ul {
    width: auto;
    min-width: 220px;
  }

  .nav-xs .nav-primary > ul ul li a span {
    white-space: nowrap;
  }
}

/*
.placeholder-black::-webkit-input-placeholder { color: inherit !important; }
.placeholder-black::-moz-placeholder { color: inherit; }
.placeholder-black:-ms-input-placeholder { color: inherit; }
.placeholder-black:-moz-placeholder { color: inherit; }
*/


.store-location-mapped {
  color: #8BC34A;
}

.exporting-modal {
  background-color: #fff;
  width: 450px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 10px;
  -webkit-box-shadow: 0 5px 15px #a8a8ab;
  box-shadow: 0 5px 15px #a8a8ab;
  border-radius: var(--radius-s);
}

.exporting-modal .progress {
  border-radius: var(--radius-s);
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
}

.exporting-modal p {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  margin-top: 35px;
}

.exporting-modal .footer-tool {
  border-top: 1px solid #f7f7f7;
  padding-top: 10px;
  text-align: center;
}

.exporting-overlay {
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 9998;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.multiSelect .line {
  margin: 0;
  height: 100% !important;
  font-size: inherit;
}

.multiSelect .clearButton:focus {
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.multiSelect > button {
  background-image: none;
  width: 100%;
  border-radius: var(--radius-s);
  display: block;
  min-height: 32px !important;
  height: 32px;
  border-color: var(--lightgray);
  text-align: left;
  padding: 4px 17px 4px 10px;
  overflow: hidden;
}

.multiSelect > button:hover {
  background-image: none;
}

.multiSelect > button:focus {
  border-color: var(--primary);
  outline: 0;
}
.disable button{
  background: var(--lightgray)eee;
  color: #999;
}

.multiSelect .caret {
  position: absolute;
  right: 6px;
  top: 13px;
  border-top-color: #7f7f7f;
}
.no-trimcate .multiSelect .checkboxLayer {
  max-width: 200% !important;
  /*width: auto !important;*/
}
.multiSelect .checkboxLayer {
  border-color: var(--lightgray);
  top: calc(100% + 3px);
  /*width: 100% !important;*/
  /*max-width: 100% !important;*/
  /* border-radius: 0; */
}
.checkBoxContainer label span{
  white-space: normal;
}
.checkBoxContainer .acol{
  width: 100%;
}
.checkBoxContainer .acol label{
  width: 100%;
}

.multiSelect .multiSelectItem {
  min-width: initial;
  min-height: initial;
  padding: 6px 8px !important;
  border: none;
  margin-bottom: 2px;
}

.multiSelect {
  position: relative;
  display: block;
}
.multiSelect .acol {
  min-width: initial;
}

.multiSelect .tickMark {
  top: 4px;
  font-size: 18px;
}

.multiSelect .checkbox {
  position: absolute !important;
}

.multiSelect .multiSelectItem:not(.multiSelectGroup).selected {
  background: var(--primary) none !important;
  border: none !important;
  color: #fff;
}

.multiSelect .multiSelectItem:hover, .multiSelect .multiSelectGroup:hover {
  background: var(--primary) none !important;
  border: none !important;
  color: #fff !important;
}

.multiSelect .multiSelectFocus:not(.selected) {
  background: #fff none !important;
  border: none !important;
  color: #555 !important;
}

.multiSelect .buttonLabel {
  padding: 0;
}

.checkbox.i-checks.checkable i {
  border-color: var(--primary);
}

.checkbox.i-checks.uncheckable i {
  border-color: #cbd5dd;
}

.checkbox.i-checks.uncheckable input:checked + i:before {
  color: #cbd5dd;
}

/* HARAVAN TOOLTIPS */

.hrv-tooltips {
  position: fixed;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-s);
  padding: 10px;
  height: 84px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  display: none;
  transition: all 0.2s;
}

.hrv-tooltips::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:10px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -11px;
}

.hrv-tooltips::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 9px solid #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -9px;
}

.hrv-tooltips .tooltips-icon {
  display: inline-block;
  float: left;
  margin-right: 10px;
  height: 64px;
  overflow: hidden;
}

.hrv-tooltips .tooltips-icon img {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-height: 64px;
}

.hrv-tooltips .tooltips-caption {
  display: inline-block;
  float: left;
  line-height: 1.5;
  /* min-height: 64px; */
  padding: 0 5px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  color: #555;
}

.label-icon {
  height: 20px;
  min-width: 20px;
}

.group-icon {
  margin-bottom: 3px;
  max-height: 12px;
  max-width: 15px;
}

.first-new-icon {
  color: white;
  background-color: #F44336;
  border-radius: 7px;
  font-size: 9px;
  padding: 2px 5px;
}

.li-search-box {
  padding: 10px 13px;
  cursor: pointer;
  border-top: 1px solid #ebeef0;
  border-left: 1px solid #ebeef0;
  border-right: 1px solid #ebeef0;
}
.border-panel-footer{
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.ul-search-box{
  max-height: 123px;
  overflow-y: scroll;
}

.margin-top-10{
  margin-top: 10px;
}
.margin-bottom-10{
  margin-bottom: 10px;
}
.margin-bottom-50{
  margin-bottom: 50px;
}
.border-0{
  border: 0px !important;
}
.border-top-0{
  border-top: 0px !important;
}
.border-left-0{
  border-left: 0px !important;
}
.hidden_icon_check{
  visibility: hidden;
}
.show_icon_check{
  visibility: visible !important;
}
.margin-top-15{
  margin-top: 15px;
}
.margin-bottom-15{
  margin-bottom: 15px;
}
.border-radius-left-0{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.disable-button-customize{
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  background: #fafbfc;
  border: 1px solid #d3dbe2;
}
table.table-small th {
  background-color: var(--lightgray) !important;
  border: solid 1px #ddd !important;
  color: #444!important;
}
table.table-small td {
 padding: 4px !important;
}

.table-small-tr {
  border: solid 1px #ddd !important;
}
.color-yellowgreen{
  color: yellowgreen;
}
.color-cancel{
  color: var(--red);
}
.table-small{
  float: right;
}
.padding-right-0{
  padding-right: 0px !important;
}
.padding-left-right-0{
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.padding-left-right-20{
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.padding-bottom-15{
  padding-bottom: 15px;
}
.padding-bottom-35{
  padding-bottom: 35px;
}
.padding-top-5{
  padding-top: 5px;
}
.no-hover:hover{
  background-color: transparent !important;
}
.color-white{
  color: #FFF !important;
}
.border-bottom-table{
  border-bottom: 1px solid #eaeef1;
}
.border-right-table-th{
  border-right: 1px solid var(--primary);
}
.margin-top-10{
  margin-top: 10px;
}
.margin-bottom-5{
  margin-bottom: 5px
}
.line-height-0{
  line-height: 0px !important;
}
.margin-left-10{
  margin-left: 10px;
}
.float-right{
  float: right;
}

.center-element-right {
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
}
.center-element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.end-element-right {
  position: absolute;
  top: 100%;
  right: 0px;
  transform: translateY(-50%);
}

#nav.nav-xs .nav-primary ul.nav > li.reports-menu > ul {
  min-width: 250px;
}
.margin-left-27{
  margin-left: 27px;
}

.note-order{
  white-space: initial; text-overflow: ellipsis; overflow: hidden; word-wrap:break-word;
}

.has-scroll div.checkBoxContainer{
  overflow-y: scroll;
  height: 300px;
}
.padding-right-10{
  padding-right: 10px;
}
.text-left{
  text-align: left !important;
}
.title-1{
  margin-bottom: 5px;
  font-size: 14px;
}

.hrv-tooltips-icon {
  position: fixed;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-s);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  display: none;
  transition: all 0.2s;
}

.hrv-tooltips-icon::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:10px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -11px;
}

.hrv-tooltips-icon::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 9px solid #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -9px;
}

.hrv-tooltips-icon .tooltips-caption {
  display: inline-block;
  float: left;
  line-height: 64px;
  height: 64px;
  padding: 0 5px;
  color: #555;
}

.hrv-tooltips-icon .tooltips-icon {
  display: inline-block;
  float: left;
  /*height: 64px;*/
  overflow: hidden;
}

.border-left-tooltips-icon{
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.hrv-tooltips-message {
  position: fixed;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-s);
  padding: 10px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  display: none;
  transition: all 0.2s;
}

.hrv-tooltips-message::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:10px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -11px;
}

.hrv-tooltips-message::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 9px solid #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -9px;
}

.hrv-tooltips-message .tooltips-caption {
  display: inline-block;
  float: left;
  padding: 0 5px;
  color: #555;
  margin-bottom: 0px;
}
.hrv-tooltips-table {
  min-height: 64px;
  display: flex;
  float: left;
  align-items: center
}
.hrv-tooltips-table-left {
  padding: 5px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.hrv-tooltips-table-right {
  padding: 10px 10px 10px 5px;
}
.hrv-tooltips-captions{
  padding-left: 5px;
}

.go-to-top {
width: 36px;
height: 36px;
border-radius: 100%;
position: fixed;
z-index: 1000;
bottom: 50px;
right: 20px;
background-color: #fff;
line-height: 36px;
text-align: center;
cursor: pointer;
border: 2px solid var(--primary);
}

.go-to-top i {
font-size: 18px;
color: var(--primary);
display: inline-block;
}

.width-250-px{
width: 250px;
}

.padding-left-10{
padding-left: 10px;
}

.div-image-product{
float: left;
}

.color-blue-line-through {
color: var(--primary);
}
.margin-bottom-100{
margin-bottom: 100px;
}

.hrv-tooltips-installment {
position: fixed;
z-index: 9999;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--radius-s);
padding: 10px;
height: 84px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
display: none;
transition: all 0.2s;
}

.hrv-tooltips-installment::before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -11px;
}

.hrv-tooltips-installment::after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -9px;
}

.hrv-tooltips-installment .tooltips-icon {
display: inline-block;
float: left;
margin-right: 10px;
height: 64px;
overflow: hidden;
}

.hrv-tooltips-installment .tooltips-icon img {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
max-height: 64px;
}

.hrv-tooltips-installment .tooltips-caption {
display: inline-block;
float: left;
line-height: 64px;
height: 64px;
padding: 0 5px;
border-left: 1px solid rgba(0, 0, 0, 0.1);
color: #555;
}

.no-padding{
padding: 0 !important;
}

.no-margin{
margin: 0 !important;
}

.fomart-icon-asc{
position: relative;
top: 3px;
}

.fomart-icon-desc{
position: relative;
top: -3px;
}

.color-white{
color: #fff !important;
}

.m-r-responsive{
margin-right: 10px;
}

.m-r-responsive-pick{
margin-right: 10px;
}

/* button on header menu order */
@media (min-width: 1024px) and (max-width: 1199px) {
  .btn-responsive {
    padding: 0.5vw 0.6vw !important;
    font-size: 0.8vw !important;
  }
  .m-r-responsive{
    margin-right: 0.3vw;
  }
}
@media (min-width: 1200px) and (max-width: 1350px) {
  .btn-responsive {
    padding: 0.4vw 0.6vw !important;
    font-size: 0.85vw !important;
  }
  .m-r-responsive{
    margin-right: 0.3vw;
  }
}

@media (min-width: 1351px) and (max-width: 1499px) {
  .btn-responsive {
    padding: 0.4vw 0.6vw !important;
    font-size: 0.9vw !important;
  }
  .m-r-responsive{
    margin-right: 0.3vw;
  }
}

/* end button on header menu order */

/* button on header menu pick detail */
@media (min-width: 1024px) and (max-width: 1250px) {
  .btn-responsive-pick {
    padding: 0.4vw 0.9vw !important;
    font-size: 1vw !important;
  }
  .m-r-responsive-pick{
    margin-right: 0.5vw;
  }
}
/* end button on header menu pick detail */

.nowrap{
  white-space: nowrap;
}

.float-left{
  float: left;
}

.no-padding-left-right{
  padding-left: 0px !important;
  padding-right: 0px !important;
}


/* button on pop detail order */
@media (min-width: 1024px) and (max-width: 1330px) {
  .btn-responsive-pop {
    padding: 0.5vw 0.8vw !important;
    font-size: 0.9vw !important;
  }
  .m-r-responsive-pop {
    margin-right: 0.25vw;
  }
}

/* show cancel reason extend */
.animate-show-hide.ng-hide {
  opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  /* transition: all linear 0.4s; */
}

.check-element {
  opacity: 1;
}


.label-feedback-right {
  margin-bottom: 0;
  overflow: hidden;
  position: absolute;
  pointer-events: auto;
  right: 0px;
  top: 0px !important;
}

.checked-item {
  position: relative;
}

.checked-item i {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
}

.panel .table-striped > thead th {
  border-right: none;
}

/* container of multi select items */
.multiSelect .checkBoxContainer {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: 300px;
}
#menu-left li .next-nav-link svg {
  fill: #798c9c;
  width: 21px;
}#menu-left li .next-nav-link svg:nth-child(1) {
   position: absolute;
   left: 15px;
   top: 9px;
}#menu-left li.next-nav-item.active .next-nav-link svg {
  fill: #fff;
}

.color-green{
 color: #9acd32;
}
/*------------------ upload ---------------------------*/
.haravan-upload {
  display: inline-block;
  margin-top: 10px;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: white;
  cursor: inherit;
  display: block;
}
.btn-file {
  position: relative;
  overflow: hidden;
}
/*------------------ end upload ---------------------------*/

/*------------------ dropdown discount ---------------------------*/
.open>.dropdown-menu.animate-scale-dropdown {
  -webkit-transform: translateY(0) scale(1);
  -moz-transform: translateY(0) scale(1);
  -ms-transform: translateY(0) scale(1);
  -o-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  opacity: 1;
  z-index: 1000;
  color: black;
}

.dropdown-menu.applist-style {
  margin-top: 10px;
  background: #fff;
  padding: 0;
  min-width: 250px;
}

.next-heading {
  font-size: 15px;
  line-height: 2.4rem;
  font-weight: 600;
  margin: 0 0 20px;
}

.pd-all-20 {
  padding: 20px;
}

.min-width-200-px {
  min-width: 200px!important;
}

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

.open > .dropdown-menu.discounts {
  left: -70px !important;
  bottom: auto !important;
}

.dropdown .dropdown-menu.animate-scale-dropdown:after {
  left: calc(50% - 9px);
  right: auto;
}

.dropdown .dropdown-menu.animate-scale-dropdown:before {
  left: calc(50% - 10px);
  right: auto;
}

a.text-linethrough:hover {
  text-decoration: line-through;
}
/*------------------ end dropdown discount ---------------------------*/
/*------------------ modal event history ---------------------------*/
#modal-event-history .modal-dialog  {width:70%;}
/*------------------ end modal event history ---------------------------*/
#modal-request-tranfers .modal-dialog  {width:70%;}
.modal-width-70-per .modal-dialog  {width:70%;}
.modal-width-80-per .modal-dialog  {width:80%;}
.modal-width-90-per .modal-dialog  {width:90%;}

.modal-width-50-per .modal-dialog  {width:50%; min-width: 630px;}
.frame-img-32 {
  min-height: 32px;
  min-width: 32px;
  height: 30px;
  width: 30px;
  margin-top: 2px;
}

.format-img-32 {
  width: 30px;
  height: 30px;
  display: block;
  margin: auto;
}

.no-padding-left {
  padding-left: 0px !important;
}

.accordion_in {
  z-index: inherit !important;
  overflow: visible !important;
}

.pd-all-10-20 {
  padding: 10px 20px;
}

.pd-all-5 {
  padding: 5px 5px 5px 5px;
}

.border-title-purchaseOrder {
  border-radius: 0;
  padding: 10px 20px;
  background-color: #f5f6f7;
  border-bottom: solid 1px #ebeef0;
  color: #748b9b;
  position: relative;
}

.table > tbody + tbody {
  border-top: 0px !important;
}

table th.headerTableProduct {
  font-weight: normal !important;
  background-color: white !important;
  color: black !important;
  padding: 8px 8px;
}

.no-border-all {
  border: none !important;
}

.color-blue {
  color: #0078bd;
}

.overflow-y {
  overflow-y:scroll;
}

.line-height-32{
  line-height: 32px !important;
}

.text-right-important{
  text-align: right !important;
}
.box-search-advance .panel-default .list-search-data > ul > li.title-product:hover {
  background: #eff9fd;
}
.padding-drop-down-variants{
  padding: 15px 0px 25px 30px !important;
}
.border-left-table-small{
  border-left: solid 1px #dee5eb;
}
.button-middle-div{
  display: flex;
  align-items: flex-end;
  /*justify-content: center;*/
}
.no-padding-right{
  padding-right: 0px !important;
}
.modal-350 {
  width: 350px !important;
}
.modal-650 {
  width: 650px !important;
}
.modal-750 {
  width: 750px !important;
}
.modal-800 {
  width: 800px !important;
}
.padding-left-20{
  padding-left: 20px;
}
.padding-left-40{
  padding-left: 40px;
}
.div-image{
  width: 70px;
  float: left;
}
.max-width-250{
  max-width: 250px;
}
.width-line-item{
  width: calc(100% - 70px);
}
.margin-right-4{
  margin-right: 4px;
}
.vertical-align-middle{
  vertical-align: middle;
}
a.color-black  {
  color: #3c4144;
}
a.color-black:hover {
  text-decoration: none;
  color: #181a1c !important;
  cursor: pointer;
}

.width-60-percent-modal .modal-dialog  {width:60%;}
.width-70-percent-modal .modal-dialog  {width:70%;}
.width-100-percent-modal .modal-dialog  {width:100%;}
.width-90-percent-modal .modal-dialog  {width:90%;}
.color-printed {
  color: var(--gray) !important;
}

.color-printed:hover {
  color: var(--darkgray) !important;
}

.margin-top-5{
  margin-top: 5px;
}

.padding-bottom-10 {
  padding-bottom: 10px;
}

.display-table-cell {
  display: table-cell;
}

.display-table {
  display: table;
}

.vertical-align-top{
  vertical-align: top !important;
}

.vertical-align-bottom{
  vertical-align: bottom !important;
}

textarea.height-100-percent {
  min-height: 200px !important;
  max-height: 100% !important;
}
.margin-right-20 {
  margin-right: 20px;
}
.margin-right-10{
  margin-right: 10px;
}

/* carrier select box */
.svg-next-icon-size-16 {
  width: 16px;
  height: 16px;
}

.svg-next-icon {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
}

.background-color-white{
  background-color: white !important;
}

.btn-combobox {
  padding: 6px 9px !important;
  background: #fff;
  border: 1px solid #d3dbe2 !important;
  border-radius: 0 3px 3px 0;
  color: #798c9c !important;
}

.btn-combobox:hover {
  background-color: #f5f6f7;
}

.dropdown-menu .arrow-top-dropdown {
  position: absolute;
  left: 50%;
  top: -20px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  overflow: hidden;
  pointer-events: none;
}

.open>.dropdown-menu.animate-scale-dropdown {
  display: block;
  left: 0px;
  top: 40px !important;
  bottom: initial !important;
}

.table-fix-header2 {
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 0 !important;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 150px;
  width: 100%;
}

.clickable-row:hover {
  cursor: pointer;
}

div.clickable-row:hover {
  background: #f5fbff;
}

.border-top-none{
  border-top: 0px !important;
}

div.outline-none:focus{
  outline: none;
}
/* end carrier select box */

.modal-30-percent .modal-dialog  {
  width:30%;
}

.modal-overflow-y-unset .modal-body{overflow-y: unset !important;}

.disable-hover {
  pointer-events: none;
}
.label-tag{
  padding: 3px 0px;
}
.tag-text{
  border-radius: var(--radius-s);
  padding: 3px 8px;
  margin-right: var(--range-xs);
  color: var(--primary);
  float: left;
  background: var(--lessprimary);
}

.bacground-white {
  background: white;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: var(--radius-s);
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.border-bottom {
  padding-bottom: 15px;
}

.border-top-setting {
  padding-top: 2rem;
  border-top: 1px solid #d3dbe2;
  margin-bottom: 2rem;
}
/*-------- Button out-line-primary ------*/

.btn-outline-primary {
  color: #007bff;
  background-color: transparent;
  background-image: none;
  border: 1px solid #007bff;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: var(--radius-s);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

/*-------- End Button out-line-primary ------*/

.pd-all-0 {
  padding: 0px!important;
}

.pd-all-10 {
  padding: 10px;
}
.pd-all-15 {
  padding: 15px;
}

.customer-block-row {
  border: 1px dashed lightgray; min-height: 160px; border-radius: var(--radius-m);

}

/*-------- pagination-custom Haraoes -------*/
.pagination-hara > li > a, .pagination-hara > li > span {
  color: #9ea9b4!important;
  background-color: #fff!important;
  border: 1px solid #fff!important;
}

.pagination-hara > li > a:hover, .pagination-hara > li > span:hover, .pagination-hara > li > a:focus, .pagination-hara > li > span:focus {
  background-color: #fff!important;
  border-color: #fff!important;
  color: var(--primary)!important;
}


.pagination-hara > .active > a, .pagination-hara > .active > span, .pagination-hara > .active > a:hover, .pagination-hara > .active > span:hover, .pagination-hara > .active > a:focus, .pagination-hara > .active > span:focus {
  background-color: #fff!important;
  border-color: #fff!important;
  color: var(--primary);
}

.pagination-hara > .disabled > span, .pagination-hara > .disabled > span:hover, .pagination-hara > .disabled > span:focus, .pagination-hara > .disabled > a, .pagination-hara > .disabled > a:hover, .pagination-hara > .disabled > a:focus {
  background-color: #fff!important;
  border-color: #fff!important;
  color: #9ea9b4!important;
}
/*--------End pagination-custom Haraoes -------*/

.contentBox {
  position:relative;
  width: 400px;
  height: 95px;
  border: 1px solid #ddd;
}

.textBox {
  height: 55px;
  width: 392px;
  border:none;
  resize: none;
  outline: none;
}

.hyphenate {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.line-height-double{
  line-height: 2 !important;
}

.m-l-8{
  margin-left: 8px !important;
}

.border-10percent{
  border-radius: 10%;
}