/* The contents of this file used to be inside the products.html page.
   It could have been merged in products.css but would have required more throughout testing
   Safest is to create a separate file and add it after all other stylesheets */

.dialog .valuescontainer {
  width: 210px;
  margin-left: 112px;
}

.dialog .message.ingredients {
  overflow: visible;
}

#priceTypes {
  width: 250px;
}

.dialog .valuescontainer .valuelink {
  display: block;
  float: left;
  padding: 0 3px 0 3px;
  margin-right: 10px;
  line-height: 35px;
}

.dialog .valuescontainer .valuelink.default {
  font-style: italic;
  font-weight: bold;
}

.dialog .valuescontainer .valuelink.new {
  font-style: italic;
  color: black;
  opacity: 0.5;
}

.dialog .panel.value {
  background-color: white;
}

.dialog .panel.value .buttonbar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

#productcontainer {
  position: absolute;
  top: 32px;
  right: 2px;
  bottom: 2px;
  left: 21px;
  padding: 4px;
  overflow-y: auto;
}

#productcontainer div.product {
  position: relative;
  width: 100%;
  height: 100%;
}

.dialog .fv .f {
  display: block;
  float: left;
  width: 100px;
  padding-right: 8px;
  text-align: right;
}

.dialog .fv input.v[type='text'] {
  width: 260px;
  border-color: #ccc;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}

.dialog .productEditor .fv input.v[type='text'] {
  max-width: 260px;
}

.dialog .productEditor .message {
  width: 450px;
}

.dialog .fv input.v.err[type='text'] {
  border-color: #d00;
}

.dialog .cssbutton[value='delete'] {
  float: left;
  margin-left: 4px;
}

.dialog.product .message {
  float: left;
  padding-top: 14px;
  padding-bottom: 14px;
  /*  height:520px;*/
}

.dialog #additioncontainer,
.dialog #colorcontainer {
  float: left;
  width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dialog.product #additioncontainer,
.dialog.product #colorcontainer {
  height: 220px;
}

.dialog #additioncontainer > div,
.dialog #colorcontainer > div {
  padding: 8px 2px;
}

.dialog #additioncontainer .addition {
  position: relative;
  float: left;
  padding: 0 6px;
  margin: 6px 6px 0 0;
  font-size: 0.85em;
  line-height: 1.9em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.dialog #additioncontainer .addition.selected {
  color: #fff;
  background-color: #2dc38f;
  border-color: #999;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

  -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.dialog #additioncontainer .addition .icon {
  position: absolute;
  top: -2px;
  right: -4px;
  display: none;
  width: 10px;
  height: 10px;
  background: url('../img/tick_small.png') no-repeat;
}

.dialog #additioncontainer .addition.selected .icon {
  display: block;
}

#productcontainer div.product .id {
  padding: 2px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#productcontainer div.product .name {
  height: 60px;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-word;
}

#productcontainer div.product .price {
  position: absolute;
  right: 4px;
  bottom: 2px;
  left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#productcontainer div.product.new .label {
  height: 66px;
  font-size: 5em;
  line-height: 66px;
  text-align: center;
}

#productcontainer div.product.new .msg {
  height: 26px;
  font-size: 1.1em;
  line-height: 16px;
  text-align: center;
}

.dialog.product .fv .f {
  width: 130px;
}

.dialog.product .lnkImageUploader {
  display: block;
  /*float:left;*/
  width: 135px;
  overflow: hidden;
  line-height: 35px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog .imagepreview {
  /* width:80px;*/
  height: 60px;
  border: 1px solid;
}

.dialog.product .dialogbody {
  position: relative;
  max-height: 500px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.dialog.product .bodyparent {
  position: relative;
  overflow: hidden;
}

.toolbar .label,
.toolbar .link {
  float: left;
  margin-right: 8px;
  font-size: 0.8em;
}

.toolbar .link:first-child {
  margin-left: 10px;
}

.toolbar .label {
  float: right;
  margin-right: 0;
}

#productcontainer .droppablearea {
  position: absolute;
  right: 0;
  left: 0;
  display: none;
  height: 40px;
  background-color: red;
  opacity: 0.1;
}

#productcontainer .droppablearea.top {
  top: 0;
}

#productcontainer .droppablearea.bottom {
  bottom: 0;
}

td.original-price,
td.original-price input {
  width: 75px;
}

tr.header td:not(.original-price) input {
  width: 130px;
}

#editMenuPriceContainer .message .tdText.total-combo-price {
  width: 180px;
}

#editMenuPriceContainer .message .tdText.product-title {
  max-width: 100px;
}

tr.section-total-combo-price td.combo-price,
tr.section-total-combo-price td.takeaway-price,
tr.section-total-combo-price td.delivery-price {
  width: 130px;
}
tr.show-prices-section td.combo-price,
tr.show-prices-section td.takeaway-price,
tr.show-prices-section td.delivery-price {
  width: 130px;
}

table tr.choice .category-name {
  margin-right: 10px;
  font-size: 14px;
  font-weight: bold;
}

#productPriceContainer {
  padding-top: 15px;
  padding-right: 0;
  padding-left: 0;
  border-top: 1px solid rgba(204, 204, 204, 0.5);
}

.show-prices-section span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chkbox {
  margin: 0 2px 0 15px;
}

#show-prices-per-product {
  margin-left: 10px;
  font-size: 14px;
}

.h2collapse a {
  width: 100%;
  padding-top: 2px;
  padding-left: 25px;
  overflow: hidden;
  font-size: 14px;
  color: #333;
  text-align: right;
  text-decoration: none;
  text-overflow: visible;
  white-space: nowrap;
}

.show-prices-section .tdText div {
  max-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.tile .name,
div.tile .id {
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*custom category*/

#categorycontainer {
  position: absolute;
  top: 32px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
}

.dialog.categoryLayout {
  position: relative;
  overflow: hidden;
}

.dialog.addProducts {
  width: 990px;
  max-height: 515px;
  background: white;
}

.dialog.addProducts .bodyparent {
  position: relative;
  max-height: 500px;
  min-height: 500px;
}

.dialog.addProducts .dialogbody {
  position: relative;
  max-height: 515px;
  min-height: 475px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.dialog.addProducts .message {
  position: relative;
  max-height: 350px;
  min-height: 350px;
  background: white;
}

.dialog.addProducts #productcontainer1 {
  max-height: 350px;
  min-height: 350px;
  overflow-y: auto;
  background: white;
}

.dialog .fv input.v.err[type='text'] {
  border-color: #d00;
}

.dialog .cssbutton {
  float: right;
  padding: 3px 6px;
  margin: 0 4px 0 0;
}

.dialog .cssbutton[value='delete'],
.dialog .cssbutton[value='duplicate'],
.dialog .cssbutton[value='move'] {
  float: left;
}

.dialog .tplsChooser .t,
.dialog .tpls .t {
  float: left;
  width: 90px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-shadow: 0 1px 1px #707070;
  border: 1px solid gray;
  border-width: 1px 1px 1px 0;
}

.dialog .tpls .f {
  line-height: 40px;
}

.dialog .tpls {
  height: auto;
  margin: 5px 0;
}

.dialog .tpls .t:first-child {
  border-left-width: 1px;
}

.dialog .tplsChooser .t,
.dialog .tpls .t {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjhmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2U1ZWJlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Q3ZGVlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY3ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
  /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #f6f8f9),
    color-stop(50%, #e5ebee),
    color-stop(51%, #d7dee3),
    color-stop(100%, #f5f7f9)
  );
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
  /* IE10+ */
  background: linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
  /* W3C */
}

.dialog .tplsChooser .t.active,
.dialog .tpls .t.active {
  color: #fff;
  /*background:#FAFAFA;*/
  background-color: #2dc38f;
  box-shadow: inset 3px 3px 3px 0 rgba(0, 0, 0, 0.2);

  -webkit-box-shadow: inset 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.dialog #additioncontainer {
  float: left;
  width: 0;
}

.dialog.categoryLayout .bodyparent {
  position: relative;
  overflow: hidden;
}

.dialog #additioncontainer > div {
  padding: 8px 2px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dialog #additioncontainer .addition {
  position: relative;
  float: left;
  padding: 0 6px;
  margin: 6px 6px 0 0;
  font-size: 0.85em;
  line-height: 1.9em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.dialog #additioncontainer .addition.selected {
  border-color: #999;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

  -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.dialog #additioncontainer .addition .icon {
  position: absolute;
  top: -2px;
  right: -4px;
  display: none;
  width: 10px;
  height: 10px;
  background: url('../img/tick_small.png') no-repeat;
}

.dialog #additioncontainer .addition.selected .icon {
  display: block;
}

.dialog #additioncontainer .additionGroup.selected {
  background-color: #23828f;
}

.dialog #additioncontainer .additionGroup.selected .icon {
  right: -5px;
  background: url('../img/lock-icon.png') no-repeat;
  background-size: contain;
}

.dialog .tplsChooser {
  position: absolute;
  top: 0;
  bottom: 36px;
  background-color: white;
}

.dialog .tplsChooser .t {
  width: 80px;
  margin: 4px;
  font-size: 0.8em;
  border-width: 1px;
}

#categorycontainer div.product {
  position: relative;
  float: left;
  width: 90px;
  height: 90px;
  padding: 2px 4px;
  margin: 10px 0 0 10px;
  font-size: 0.8em;
  border: 1px solid #eee;
  border-radius: 6px 6px 6px 6px;
  box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.1);
}

#categorycontainer div.product .name {
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  /*word-wrap:break-word;
        text-overflow:ellipsis;*/
  white-space: break-word;
}

#categorycontainer div.product .price {
  position: absolute;
  right: 4px;
  bottom: 2px;
  left: 4px;
}

#categorycontainer div.product.new .label {
  height: 66px;
  font-size: 5em;
  line-height: 76px;
  text-align: center;
  opacity: 0.1;
}

#categorycontainer div.product.new .msg {
  height: 26px;
  font-size: 1.1em;
  line-height: 26px;
  text-align: center;
  opacity: 0.3;
}

.dialog.categoryLayout .lnkImageUploader {
  display: block;
  float: right;
  width: 262px;
  overflow: hidden;
  line-height: 35px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog.categoryLayout .lnkPrinterTemplate {
  position: relative;
  line-height: 35px;
  white-space: nowrap;
}

.dialog .imagepreview {
  width: 80px;
  height: 80px;
}

.toolbar span:first-child span {
  float: left;
  margin-right: 8px;
  font-size: 0.8em;
}

.toolbar .label,
.toolbar .link {
  float: left;
  margin-right: 8px;
  font-size: 0.8em;
}

.toolbar .link:first-child {
  margin-left: 10px;
}

.toolbar .label {
  float: right;
  margin-right: 0;
}

.toolbar select {
  height: auto;
  font-size: 0.8em;
}

#categoryImg {
  /* For IE8 and earlier */
  width: 150px;
  height: 150px;
  margin: auto;
  border-radius: 6px 6px 0 0;
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

center {
  opacity: 1;
}

#productsWrapper {
  position: relative;
  min-height: 90px;
  overflow: auto;
  background-image: url('../img/test_gradient.gif');
  background-repeat: repeat;
  -webkit-overflow-scrolling: touch;
}

#productsContainer {
  min-height: 110px;
  padding-top: 7px;
  padding-right: 10px;
  padding-left: 10px;
  color: #555;
  vertical-align: middle;
  cursor: pointer;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(229, 229, 229, 1) 0%, rgba(204, 204, 204, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(229, 229, 229, 1)),
    color-stop(100%, rgba(204, 204, 204, 1))
  );
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(229, 229, 229, 1) 0%, rgba(204, 204, 204, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(229, 229, 229, 1) 0%, rgba(204, 204, 204, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(229, 229, 229, 1) 0%, rgba(204, 204, 204, 1) 100%);
  /* IE10+ */
  background: linear-gradient(top, rgba(229, 229, 229, 1) 0%, rgba(204, 204, 204, 1) 100%);
  border-top-width: 0;
  /* W3C */
}

.categorytile {
  position: relative;
  height: 84px;
}

.dialog.addProducts .tile .tilecontent {
  height: 102px;
}

#productsContainer {
  position: relative;
  display: inline-block;
  overflow: auto;
  background-image: url('../img/test_gradient.gif');
  background-repeat: repeat;
  -webkit-overflow-scrolling: touch;
}

#productcontainer1 {
  position: absolute;
  top: 3px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  padding: 4px;
  overflow-y: auto;
}

#productsContainer .categorytile.itemunselected,
#productcontainer1 .categorytile.itemunselected,
#productsContainer .categorytile.itemdisabled,
#productcontainer1 .categorytile.itemdisabled,
#productsContainer .categorytile.itemselected,
#productcontainer1 .categorytile.itemselected,
.productcontainer-div .categorytile {
  width: 102px;
  height: 102px;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  border-radius: 6px 6px 6px 6px;
  box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.1);
}

#productcontainer1 .categorytile.itemunselected {
  background-image: url('../img/untick.png');
}

#productsContainer .categorytile.itemunselected {
  background-image: url('../img/untick.png');
}

#productsContainer .categorytile.itemselected {
  background-image: url('../img/tick.png');
}

#productcontainer1 .categorytile.itemselected {
  background-image: url('../img/tick.png');
}

#productsContainer .categorytile.itemsdisabled {
  cursor: not-allowed;
  background-image: url('../img/tick-disabled.png');
}

#productcontainer1 .categorytile.itemdisabled {
  cursor: not-allowed;
  background-image: url('../img/tick-disabled.png');
}

#productcontainer1 div.product .id {
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-word;
}

#productcontainer1 div.product .name {
  height: 50px;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-word;
}

#productcontainer1 div.product .price,
#productsContainer div.product .price,
.productcontainer-div div.product .price {
  position: absolute;
  bottom: 5px;
  width: 100px;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.categorytile div.product.new {
  opacity: 1;
}

.categorytile div.product.new .label {
  height: 66px;
  font-size: 5em;
  line-height: 76px;
  text-align: center;
}

.categorytile div.product.new .msg {
  height: 26px;
  font-size: 1.1em;
  line-height: 16px;
  text-align: center;
}

.categoryName {
  margin-left: 15px;
  font-size: 0.8em;
  font-weight: bold;
  color: #555;
}

.blackBorder {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.openPriceEditMenu {
  max-width: 775px;
  max-height: 500px;
  min-width: 500px;
}

.openPriceEditMenu.collapsed {
  width: 500px;
}

.openPriceEditMenu.collapsed .td-combo-product-prices.same-price.same-price button {
  margin-right: 15px;
}

.openPriceEditMenu .message {
  padding: 0;
}

.openPriceEditMenu .datatable {
  margin-right: 5px;
  margin-bottom: 0;
}

.openPriceEditMenu .buttonbar {
  padding-top: 5px;
}

.openPriceEditMenu input[type='text'],
.openPriceEditMenu input[type='number'] {
  height: 24px;
  padding-left: 5px;
  border-color: #ccc;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}

.editPrice {
  width: 85px;
  height: 26px;
  padding: 5px;
  margin-top: 3px;
  margin-left: 10px;
}

.css-button-secondary {
  height: 26px;
  padding: 5px;
}

#inputCombo {
  width: 160px;
}

.table {
  width: 100%;
}

#pricesAndAdvancedToggle {
  background-color: rgba(204, 204, 204, 0.15);
}

#editMenuPriceContainer .message .tdText.total-combo-price {
  width: 170px;
  padding-left: 10px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  vertical-align: bottom;
}

.openPriceEditMenu.collapsed #editMenuPriceContainer .message .tdText.total-combo-price {
  width: 160px;
}

#editMenuPriceContainer thead {
  background-color: rgba(204, 204, 204, 0.15);
}

#editMenuPriceContainer tbody {
  cursor: default;
}

.section-total-combo-price {
  background-color: rgba(204, 204, 204, 0.15);
}

.section-total-combo-price label {
  font-size: 10px;
}

.section-total-combo-price input {
  font-size: 14px;
}

.sections-header .toggle,
.sections-header .toggle span {
  font-size: 14px;
}

.sections-header #pricesAndAdvancedToggle.toggle i.fa {
  margin-right: 10px;
  font-size: 16px;
}

.sections-header #advancedDiv.toggle i.fa {
  margin-left: 10px;
  font-size: 16px;
}

.td-combo-product-prices.same-price {
  text-align: right;
}

.cat {
  font-size: 14px;
  font-style: normal;
}

.orgProductRemovedText {
  font-size: 0.7em;
}

.catNameRow {
  font-weight: bold;
}

#advancedDiv {
  float: right;
  margin-top: 15px;
  margin-right: 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
}

#editMenuPriceContainer .err {
  border-color: #d00;
}

.sections-header {
  background-color: rgba(204, 204, 204, 0.15);
  border-bottom: 1px solid rgba(204, 204, 204, 0.5);
}

.datatable th {
  text-align: center;
}

.bodyDuplicateId {
  max-height: 400px;
  overflow-y: auto;
}

#manualSort {
  float: right;
  font-size: 50px;
}

.subChoice {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 300;
}

input[name='trackStock'] {
  top: 2px;
  margin-right: 15px;
  vertical-align: 2px;
}

.clsEnableStockManagement {
  width: 300px;
  margin-left: 110px;
}

.buttonProcentDiscount {
  width: 60px;
  height: 30px;
  margin-left: 5px;
}

.priceChangeText {
  margin-left: 5px;
  font-size: 0.7em;
  vertical-align: -3px;
}

.priceChangeText em {
  font-size: 1.3em;
  vertical-align: -3px;
}

.timedEventPanel.timedEventComingFromGroup {
  position: relative;
  background-color: #23828f;
}

.timedEventPanel.timedEventComingFromGroup .icon {
  position: absolute;
  right: 2px;
  bottom: 7px;
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url('../img/lock-icon.png') no-repeat;
  background-size: contain;
}

.dialog .message .smallDialogText {
  max-width: 500px;
  line-height: 1.4em;
}

#establishmentSelectDialog p {
  margin: 0;
  line-height: 1.5em;
}

#establishmentSelectDialog .dialogbody {
  position: relative;
  width: 500px;
  max-height: 150px;
  padding: 5px;
  overflow: hidden;
  font-size: 0.8em;
}

#establishmentSelectDialog .right {
  max-height: 135px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

#establishmentSelectDialog input[type='checkbox'] {
  margin-bottom: 10px;
}

input[name='subProductCheckbox'] {
  margin-left: 20px;
}

.iconWarning {
  z-index: 9000;
  display: inline-block;
  padding: 2px 0 2px 20px;
  margin: 0 0 10px 20px;
  cursor: pointer;
  background: url('../img/info-32.png') no-repeat left;
  background-color: white;
  background-size: 16px;
}

.selectize-input {
  width: 207px;
}

.selectize-control.single .selectize-input {
  height: 30px;
  padding: 6px;
  background-image: none;
  border-color: #ccc;
  box-shadow: none;
}

input[name='ingredientAmount'] {
  position: absolute;
  right: 60px;
  z-index: 9000;
  width: 50px;
  height: 23px;
  padding: 2px;
  font-size: 1.1em;
}

#addIngredientButton {
  position: absolute;
  right: 20px;
  z-index: 9999;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  margin-left: 5px;
  vertical-align: -4px;
  cursor: pointer;
  background: url('../img/plusIcon.png') no-repeat;
  background-size: contain;
}

.removeIngredientButton {
  position: absolute;
  right: 20px;
  z-index: 9999;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  margin-left: 5px;
  vertical-align: -4px;
  cursor: pointer;
  background: url('../img/minusIcon.png') no-repeat;
  background-size: contain;
}

input[name='ingredientAmount'] {
  border: 1px solid #ccc;
}

#sortOptions {
  float: left;
  margin-top: -2px;
  margin-left: 20px;
}
/*productsTable css*/

.datatable {
  margin-left: 0 !important;
}

.datatable .rows {
  max-height: 580px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.savediscardbutton {
  width: 10px;
}

img.handpointer {
  cursor: pointer;
}

table tbody:hover {
  cursor: pointer;
}

.noPointerEvents {
  pointer-events: none;
}

.datatable .header {
  border: none;
}

.colorProduct {
  color: #333;
}

.colorDiscount {
  color: #606;
}

.colorServiceCharge {
  color: #f33;
}

.colorMenu {
  color: #01dfd7;
}

td span {
  font-size: 1.1em;
}

.selectView {
  float: left;
}

.btn .listView {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-top: -3px;
  vertical-align: middle;
  background-image: url('../img/list.png');
}

.btn .gridView {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  background-image: url('../img/grid.png');
}

.unitType {
  font-style: italic;
}

.showAllTableOptions {
  margin-left: 20px;
  font-size: 0.9em;
}

.collapse2 .message {
  position: relative;
  max-height: 300px;
  padding: 5px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

#report,
.body,
.rows,
#report table {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#report {
  margin: 0;
}

#report .rows {
  max-height: initial;
}

#report td,
#report th {
  padding: 10px 15px;
  line-height: 25px;
}

#report th {
  height: initial;
  padding-left: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#report th.no-extra-padding {
  padding-left: 15px;
}

#report td input[type='text'] {
  width: 100%;
}

#stockAddition {
  width: 95px;
  height: 29px;
  padding: 6px 10px;
  margin: 0;
  vertical-align: bottom;
  border: 1px solid #ccc;
  border-radius: 0;
}

.input-group button:first-child {
  display: table-cell;
  height: 29px;
  margin: 0;
  vertical-align: bottom;
  border: 0.5px solid #bbb;
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group button:last-child {
  display: table-cell;
  height: 29px;
  margin: 0;
  vertical-align: bottom;
  border: 0.5px solid #bbb;
  border-left: none;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.datatable .body {
  top: 40px;
}

#report td .stock-amount input {
  width: 25%;
}

.stock-amount {
  white-space: nowrap;
}

.stock-amount-total {
  display: inline;
  white-space: nowrap;
}

.actions {
  display: inline-flex;
}

.actions img {
  width: 2em;
  height: 2em;
}

.actions img:not(:last-child) {
  margin-right: 1.25em;
}

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

.stock-amount #stock-amount-total {
  display: inline-flex !important;
}

.stock-amount input {
  width: 5%;
}

.catName > hr {
  border-color: rgba(204, 204, 204, 0.15);
}

.same-price-all {
  min-width: 10em;
}

.stock-component[disabled='disabled'] button,
.stock-component[disabled='disabled'] input {
  pointer-events: none;
  cursor: no-drop;
  opacity: 0.5;
}

/* special inputs for edit price dialog */
.form-inline .special-input-group {
  display: inline-table;
  vertical-align: middle;
}

.special-input-group {
  position: relative;
  display: table;
  width: 140px;
  border-collapse: separate;
}

.special-input-group .form-control:first-child,
.input-group-addon:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.special-input-group input.full-size {
  width: 125px;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.form-inline .special-input-group .form-control,
.form-inline .special-input-group .input-group-addon,
.form-inline .special-input-group {
  width: auto;
}

.special-input-group-addon:last-child {
  border-left: 0;
}

.special-input-group .form-control:last-child,
.input-group-addon:last-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.input-group-addon {
  max-width: 50px;
  padding-right: 5px;
  padding-left: 15px;
  overflow: hidden;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  color: #999;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.special-input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

@media (min-width: 768px) {
  .form-inline .special-input-group > .form-control {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .form-inline .special-input-group .form-control,
  .form-inline .special-input-group .input-group-addon,
  .form-inline .special-input-group {
    width: auto;
  }
}

.special-input-group .form-control,
.input-group-addon {
  display: table-cell;
}

.special-input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}

.establishments-products,
.establishments-products ul {
  position: relative;
}

@media (min-width: 768px) {
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 1px 5px 1px 1px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  }
}

@media (max-width: 1005px) {
  .dialog.addProducts {
    width: 580px;
  }
}