@CHARSET "UTF-8";

@import "layout.css";
@import "dialogs.css";


/* Toolbar */

.toolbar {
  display: block;
  height: 32px;
  padding: 0 40px;
  line-height: 32px;
  background-color: #e6e8ea;
}

.toolbar.is-legend {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}

.toolbar .label,
.toolbar .link {
  float: left;
  margin: 0 10px 0 0;
  font-size: .85em;
  font-weight: 600;
  line-height: 32px;
}

.toolbar .label {
  color: #383d3d;
}

.toolbar .label i {
  margin-right: 5px;
}

.toolbar .label.is-last {
  margin-right: 0;
}

.toolbar.is-legend .label {
  margin-right: 15px;
}

.toolbar select {
  height: 26px;
}

.toolbar .cssbutton,
.toolbar select.label {
  margin-top: 3px;
}

.toolbar #daterange {
  float: left;
  margin: 3px 10px 0 0;
}

@media all and (max-width: 1024px) {
  .toolbar {
    padding: 0 20px;
  }
}


/* Toggle Switcher */

.ui_switch {
  position: relative;
  float: right;
  width: 59px;
  height: 26px;
  margin-top: 3px;
  overflow: hidden;
  cursor: pointer;
}

.ui_switch > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 92px;
  height: 26px;
  background: url("../img/icons/icon-switch.png") no-repeat;
  background-size: cover;
}

.ui_switch > div.o {
  z-index: 20;
  width: 59px;
  background: url("../img/icons/icon-switch-overlay.png") no-repeat;
  background-size: cover;
}


/* Containers */

.container-wrapper {
  position: absolute;
  top: 32px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 25px 30px 40px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f3f3f3;
}

.container-wrapper-notoolbar {
  top: 0;
}

.container-wrapper-tiles {
  position: relative;
  display: block;
}

.container-wrapper-legend {
  bottom: 32px;
}

.container-wrapper .note {
  margin-bottom: 15px;
}

@media all and (max-width: 1024px) {
  .container-wrapper {
    padding: 20px 5px 20px 20px;
  }
}


/* Clearfix */

.clearfix:after,
.clearboth:after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  content: " ";
  visibility: hidden;
}

.clearfix,
.clearboth {
  display: inline-block;
}

* html .clearfix,
* html .clearboth {
  height: 1%;
}

.clearfix,
.clearboth {
  display: block;
}


/* Notes */

.note {
  padding: 10px 15px;
  font-size: .8em;
  color: #5c6365;
  background-color: #f9f9f9;
  border: 1px solid #c4cacc;
  border-radius: 3px;
}

.note.note-info {
  background: #c4d7f6;
  border: 1px solid #5187e0;
}

.note.note-warning {
  background: #ffe0d3;
  border: 1px solid #ff996b;
}


/* Alert */

.alert {
  position: absolute;
  right: 15px;
  bottom: 10px;
  left: 15px;
  padding: 15px;
  margin-bottom: 20px;
  color: #3c763d;
  background-color: #dff0d8;
  border: 1px solid transparent;
  border-color: #d6e9c6;
  border-radius: 4px;
}


/* Loading */

.loading {
  display: none;
}

.loading,
.loading > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  transform: translate3d(0, 0, 0);
}

.loading > div:first-child {
  background: black none;
  opacity: .4;
}

.loading > div {
  background: url("../img/loader.gif") no-repeat center center;
  background-size: 46px;
  opacity: 1;
}

.loading.transparent > div {
  background: transparent none;
}


/* Buttons */

.cssbutton {
  float: left;
  width: auto !important;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-align: center;
  text-shadow: 0 -1px 1px #21ad7c;
  cursor: pointer;
  background-color: #2dc38f;
  border: 1px solid #21ad7c;
  border-radius: 3px;
}

.cssbutton-default {
  color: #3d3e45;
  text-shadow: none;
  background-color: #fff;
  border-color: #bcbec0;
  box-shadow: inset 0 -2px 0 #f3f3f3, 0 1px 2px rgba(12, 13, 13, .1);
}

.cssbutton-small {
  padding: 3.5px 10px;
}


/* Floats */

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}


/* Tables */

.datatable {
  position: relative;
  flex-grow: 2;
  font-size: 13px;

  -webkit-box-flex: 2;
  -webkit-flex-grow: 2;
}

.datatable .body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.datatable table {
  width: 100%;
}

table {
  border: 1px solid #bcbec0;
  border-radius: 3px;
}

table tr {
  position: relative;
}

.datatable td,
.datatable th {
  padding: 6px 8px;
  overflow: hidden;
  font-size: 1em;
  text-align: left;
  text-overflow: ellipsis;
  background-color: #fff;
  border-bottom: 1px solid #bcbec0;
}

.datatable th {
  font-weight: 700;
  color: #383d3d;
  vertical-align: middle;
  cursor: pointer;
  background-color: #fff;
}

.datatable th.img {
  width: 1%;
}

.datatable img {
  width: 16px;
  height: 16px;
}

.datatable .title {
  padding: 4px 0 2px 0;
  font-size: 14px;
  font-weight: bold;
  color: #2e61b6;
  border-bottom: 1px solid #666;
}

.datatable .rows {
  max-height: 100%;
  min-height: 40px;
  overflow: scroll;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.datatable .rows .emptytext {
  position: absolute;
  top: 50%;
  left: 50%;
  color: gray;
  transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%) !important;
}

.datatable tr.rowEven td {
  background-color: #ccc;
}

.datatable .colDate,
.datatable .colNumber {
  text-align: left;
}

table.tablesorter thead tr .header {
  padding-left: 22px;
  cursor: pointer;
  background-image: url(../img/bg.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

table.tablesorter thead tr .headerSortUp {
  background-color: #e6e8ea;
  background-image: url(../img/asc.gif);
}

table.tablesorter thead tr .headerSortDown {
  background-color: #e6e8ea;
  background-image: url(../img/desc.gif);
}


/* Daterange */

#daterange {
  display: inline-block;
  padding: 4.5px 8px;
  font-size: .9em;
  font-weight: 700;
  line-height: normal;
  color: #383d3d;
  background-color: #d2d4d6;
  border-radius: 3px;
  transition: all .15s linear;
}

#daterange:hover {
  color: #fff;
  background-color: #5187e0;
}


/* Tiles */

.tile {
  float: left;
  width: 120px;
  height: 110px;
  margin-right: 5px;
  margin-bottom: 15px;
}

.tile .tilecontent {
  z-index: 500;
  float: left;
  width: 110px;
  height: 110px;
  font-size: .8em;
  text-align: center;
  background-color: #fff;
  border: 1px solid #d2d4d6;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(12, 13, 13, .1);
  transition: background-color .15s linear;
}

.tile.new .tilecontent {
  position: relative;
  border-color: #7b7d7f;
}

.tilecontent:hover {
  background-color: #f3f3f3;
}

.tile .tileslot {
  float: right;
  width: 4px;
  height: 110px;
  border-radius: 2px;
}

.tile.prompt-drop .tileslot {
  background-color: #7b7d7f;
}

.tile .tilecontent img {
  display: inline-block;
  height: 40px;
  margin-top: 22px;
}

.tile .tilecontent .text {
  padding: 0 5px;
  margin: 12px 0 0;
  overflow: hidden;
  font-weight: 600;
  line-height: 15px;
  color: #383d3d;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile .tilecontent .text.no-truncate {
  position: absolute;
  right: 0;
  bottom: 15px;
  left: 0;
  white-space: normal;
}

.tile-image {
  display: inline-block;
  width: 100%;
  height: 40px;
  margin-top: 22px;
}

.tile .tile-info {
  padding: 0 5px;
}

.tile .tile-info .text {
  margin-top: 18px;
  font-weight: 400;
  text-align: left;
}

.tile .tile-info .text strong {
  font-weight: 700;
}

.tile-image-genius {
  background: url("../img/genius.png") no-repeat center center;
  background-size: contain;
}

.tile-image-dejavoo {
  background: url("../img/dejavoo.png") no-repeat center center;
  background-size: contain;
}

.tile-image-moneris {
  background: url("../img/moneris.png") no-repeat center center;
  background-size: contain;
}

.tile-image-verifone {
  background: url("../img/verifone.png") no-repeat center center;
  background-size: contain;
}

.tile-image-roles {
  background: url("../img/icons/icon-users.png?v=1") no-repeat center center;
  background-size: contain;
}

.categorytile {
  position: relative;
  top: -1px;
  left: -1px;
  display: block;
  width: 110px;
  height: 155px;
  border: 1px solid transparent;
  border-radius: 3px;
}

.categorytile.is-blue {
  border-color: #5187e0;
}

.tiles-high .tile {
  height: 175px;
}

.tiles-high .tile .tilecontent {
  width: 110px;
  height: 175px;
}

.tiles-high .tile .categorytile {
  height: 175px;
}

.tiles-high .tile .tile-image {
  height: 128px;
  margin-top: 0;
  border-radius: 3px 3px 0 0;
}

.tiles-high .tile.new img {
  margin: 56px 0 30px;
}

.tiles-high .tile .tileslot {
  height: 175px;
}

.categorycontainer-div .tile {
  height: 155px;
}

.categorycontainer-div .tile .tilecontent {
  width: 110px;
  height: 155px;
}

.categorycontainer-div .tile .tile-image {
  height: 110px;
  margin-top: 0;
  border-radius: 3px 3px 0 0;
}

.categorycontainer-div .tile.new img {
  margin: 45px 0 20px;
}

.categorycontainer-div .tile .tileslot {
  height: 155px;
}


/* Colors */

.is-muted {
  opacity: .3 !important;
}

.is-blue {
  color: #5187e0 !important;
}










/* NOT REFACTORED */

@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
  /* For portrait layouts only */

  .datatable .rows {
    overflow-y: hidden;
  }
}



@media (max-width: 800px) {
  #latest {
    margin-top: 24px !important;
  }
}

@media screen and (max-width: 610px) {
  html .container .widget.cozy {
    width: 100%;
  }

  html .container .widget.table.cozy {
    width: 100%;
  }

  html #charts .chart {
    width: 100%;
  }

  li.restaurant {
    width: 0;
  }

  html .datatable .body {
    height: 500px;
  }

  html .report-board-wrapper .chart {
    margin-top: 20px;
  }

  html .productcontainer-div {
    margin-top: 100px;
  }
}
ul,
html,
body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #333;
}

h2 {
  margin-bottom: 15px;
  font-size: 25px;
  font-style: normal;
  font-weight: 300;
  text-align: left;
}

p {
  margin-bottom: 15px;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
}

th {
  font-weight: normal;
}

[draggable] {
  user-select: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
}

ul li {
  list-style-type: none;
}

table {
  border-collapse: collapse;
}

.clearboth {
  clear: both;
}

center {
  position: relative;
  font-size: 3em;
  opacity: .2;
}

/** Modal Popup Window **/

.modal_background,
.ui_window_wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.ui_window_wrap {
  z-index: 1000;
}

.modal_background {
  background: black none;
  opacity: .6;
  transform: translate3d(0, 0, 0);
}

.ui_window {
  position: absolute;
  border: 2px solid #555;
  /*z-index:1001;*/
  opacity: 0;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .7);

  -webkit-box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .7);
}
/** Button Style **/

.role,
.addition,
.group {
  cursor: pointer;
}

/** Dialog **/

.dialog {
  background-color: white;
}

.dialog .titlebar {
  display: block;
  padding: 5px 8px;
  font-size: .9em;
  font-weight: bold;
  color: #fff;
  background-color: #444;
}

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

.dialog .message {
  position: relative;
  width: 100%;
  padding: 10px;
  overflow: hidden;
  line-height: 1.5em;
  background-color: white;
}

.dialog .buttonbar {
  padding: 4px 4px 4px 4px;
  background-color: #ccc;
}

.dialog .cssbutton {
  width: 48px;
  margin-left: 4px;
  overflow: hidden;
}

.dialog .cssbutton:first-child {
  margin-left: 0;
}

.separater {
  height: 1px;
  margin: 4px 2px;
  background-color: gray;
}

.imageuploader {
  position: absolute;
  left: 0;
  font-size: .9em;
  background-color: white;
}

.imageuploader .cssbutton[value=upload] {
  float: right;
  width: 50px;
  padding: 3px 6px;
  font-size: .9em;
  border-width: 2px;
}

.imageuploader .uploader {
  height: 25px;
  margin-top: 4px;
}

.imageuploader .label,
.imageuploader .lnkaddimage {
  line-height: 24px;
}

.imageuploader .label {
  float: left;
  width: 105px;
  text-align: right;
}

.imageuploader .lnkaddimage {
  position: absolute;
  right: 88px;
  left: 109px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imageuploader .images {
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 34px;
  left: 0;
  padding: 2px;
  overflow-y: auto;
}

.imageuploader .images img {
  width: 80px;
  height: 80px;
  margin: 6px 0 0 6px;
  border: 3px dashed white;
}

.imageuploader .images img.selected {
  border-color: #666;
}

.imageuploader .buttonbar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

input::-webkit-input-placeholder {
  color: #ccc;
}

input:-moz-placeholder {
  color: #ccc;
}

.shellglass {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
}

#helpFrame {
  /*min-height:400px;*/
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  /*min-width: 980px;*/
}

.scrollable {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/*form styles*/

.fv select {
  width: 203px;
}

.fv input.v[type=text],
.fv input.v[type=password] {
  width: 195px;
}

.fv input.v[type=text],
.fv input.v[type=password],
.fv select,
.fv input.v[type=number] {
  height: 24px;
  padding-left: 5px;
  font-size: 1.1em;
  line-height: 24px;
  border-color: #ccc;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}

.fv input.v.err[type=text],
.fv input.v.err[type=password],
.fv input.v.err[type=time],
.fv input.v.err[type=date],
.fv input.v.err[type=number],
textarea.err {
  border-color: #d00;
}

.err {
  border-color: #d00 !important;
}

.fv {
  position: relative;
  height: 35px;
  font-size: .8em;
  line-height: 35px;
}
/* Dialog form styles */

.dialog .fv {
  position: relative;
  height: 35px;
  font-size: .8em;
  line-height: 35px;
}

.dialog .fv .f {
  display: block;
  float: left;
  width: 120px;
  padding-right: 8px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog .fv select {
  width: 200px;
}

.dialog .fv input.v[type=text],
.dialog .fv input.v[type=password],
.dialog .fv input.v[type=number],
.dialog .fv textarea,
textarea.v {
  width: 200px;
}

.dialog .fv input.v[type=text],
.dialog .fv input.v[type=password],
.dialog .fv input.v[type=number],
.dialog .fv select,
.dialog .fv textarea,
textarea.v {
  height: 24px;
  padding-left: 5px;
  border-color: #ccc;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}

.dialog .fv textarea,
textarea.v {
  height: 100px;
}

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

.dialog .fv input.v[type="checkbox"] {
  position: relative;
  /*top: 2px;*/
}

.dialog .cssbutton {
  float: right;
  width: auto;
  max-width: 135px;
  min-width: 75px;
  padding: 3px 6px;
  margin: 0 4px 0 0;
}

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

#charts {
  position: relative;
  margin: 0 10px 10px 10px;
}

#charts .chart {
  position: relative;
  float: left;
  width: 25%;
  height: 160px;
  min-width: 187px;
}

.link,
#daterange,
.btn,
.tile,
.card {
  cursor: pointer;
}

.restaurantbutler {
  visibility: hidden;
}

.cssbutton.disabled {
  display: none;
}

input[disabled="disabled"] {
  color: #ccc;
}

.page_index,
.page_reports,
.page_users,
.page_products,
.page_floors,
.page_printers,
.page_settings,
.page_payments,
.page_devices,
.page_geniusDevices {
  cursor: pointer;
}

.shadow {
  box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, .2);

  -webkit-box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, .2);
}

.shortcut {
  cursor: pointer;
}

.servermsg {
  width: 400px;
  height: 37px;
  padding: 5px;
  margin: auto;
  color: #333;
  background: #fffebb;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 1px 1px 2px 1px #333;

  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-box-shadow: 1px 1px 2px 1px #333;
  -moz-box-shadow: 1px 1px 2px 1px #333;
}

select {
  height: 24px;
  max-width: 230px;
  font-size: 1.1em;
  line-height: 24px;
  border-color: #ccc;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0 none;
}

.topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 500;
  height: 38px;
  background-color: #454545;
  background-image: -moz-linear-gradient(center top, #4d4d4d, #393939);
  background-repeat: repeat-x;
  border-color: #040404 #040404 #4c4c4c;
  border-image: none;
  border-style: solid;
  border-width: 1px;
  border-radius: 0 0 6px 6px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, .8);

  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
}

#ipadscrollcontainer,
#ipadscrollcontainer2 {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  padding: 4px;
  overflow-y: auto;
}

.openDetail {
  cursor: pointer;
}


.addusrtxt {
  position: relative;
  top: -15px;
  left: 25px;
}

.imagepreview {
  position: relative;
  width: 75px;
  height: 75px;
  border: 1px solid whitesmoke;
}

.linkholdr {
  position: relative;
  top: 7px;
  left: 2%;
}

.board-mobile {
  width: 100%;
  height: 100%;
  overflow: scoll;
  border: 1px solid whitesmoke;
}

.daterange-mobile {
  position: relative;
  /*      float: none @important; */
  left: -20%;
  width: 50%;
}

.mainbody-mobile {
  position: absolute;
  top: 0 !important;
  width: 100%;
}

.dt-mobile {
  height: 80%;
  border: 1px solid black;
}

.table-mobile > table {
  height: 100%;
  border: 1px solid black;
}

.footer-mobile {
  font-size: small;
  color: grey;
  text-align: center;
}

.smtxt {
  margin: 5px;
  font-size: x-small;
}

.dialog-mobile {
  position: absolute;
  top: -148px;
  left: -120px;
  width: 185px;
  height: 200px;
  padding: 0;
  overflow: scroll;
}

.longtxt {
  position: relative;
  left: -10px;
  width: 190px !important;
  height: 25px;
  padding: 0 !important;
  overflow: hidden;
  text-align: left !important;
}

.loader-new {
  padding: 15px;
  color: gray;
  background-color: whitesmoke;
}



.hide {
  display: none !important;
}

#charts .chart {
  min-width: 250px;
}

#templateMissing,
#templateChanged {
  display: inline-block;
  font-size: .8em;
  line-height: 20px;
  color: red;
  text-align: left;
}

#dialogShowTimedEvents {
  width: 420px;
}

#dialogShowIngredients {
  width: 500px;
}

.dialog .dialogbody.contentIngredients {
  position: relative;
  max-height: 400px;
  min-height: 200px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

#dialogShowIngredients h4 {
  margin: 20px 0 5px 35px;
}

.timedEventPanel {
  height: auto;
  padding: 10px;
  overflow: hidden;
  font-size: .9em;
  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%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(229, 229, 229, 1)), color-stop(100%, rgba(204, 204, 204, 1)));
  background: -webkit-linear-gradient(top, rgba(229, 229, 229, 1) 0%, rgba(204, 204, 204, 1) 100%);
  background: -o-linear-gradient(top, rgba(229, 229, 229, 1) 0%, rgba(204, 204, 204, 1) 100%);
  background: -ms-linear-gradient(top, rgba(229, 229, 229, 1) 0%, rgba(204, 204, 204, 1) 100%);
  background: linear-gradient(top, rgba(229, 229, 229, 1) 0%, rgba(204, 204, 204, 1) 100%);
  border: 1px solid #ccc;
  border-top-width: 0;
}

.timedEventPanel.active {
  color: #fff;
  background: #2dc38f none;
  opacity: 1 !important;
}

.timedEventPanel .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timedEventPanel div {
  margin-bottom: 10px;
}

.timedEventPanel .name,
.timedEventPanel .days {
  float: left;
  width: 48%;
}

.timedEventPanel .date,
.timedEventPanel .time {
  float: right;
  width: 48%;
  padding-right: 8px;
  text-align: right;
}

.timedEventPanel .days,
.timedEventPanel .time {
  margin-bottom: 0;
}

.lnkTimedEvents,
.lnkIngredient {
  float: left;
}

.lnkTimedEvents.existing,
.lnkIngredient.existing {
  padding-right: 8px;
  margin-left: 10px;
  font-size: .9em;
  font-style: italic;
  color: black;
  opacity: .5;
}

.dayOfTheWeek.active {
  font-weight: bold;
  opacity: 1;
}

.dayOfTheWeek {
  margin-right: 8px;
  opacity: .5;
}

#categorybarSelectCategory {
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

textarea[name="invoiceTerms"] {
  padding: 5px;
  margin-left: 18px;
  /* width: 322px;
    height: 60px;*/
  font-size: .8em;
  resize: none;
}

#labeldaysBeforePaymentExpiration {
  width: 210px;
  padding-left: 15px;
  text-align: left;
}

#labelInvoiceTerms {
  padding-left: 16px;
  text-align: left;
}

.errMsg {
  color: red;
}

#warningIconStock {
  float: left;
  width: 48px;
  height: 48px;
  margin: 15px;
}

#warningMessageStock {
  width: 350px;
}

#warningMessageStockCategories {
  width: 400px;
}

.warningIcon {
  width: 64px;
  height: 64px;
  background: url("../img/warning.png") no-repeat center center;
  background-size: contain;
}

.blackFont {
  color: black !important;
}

.smallerInputText {
  width: 130px !important;
}

.clsvat select {
  width: 95px;
  height: 28px;
}

select.selectTax,
select.selectTaxDelivery,
select.selectTaxTakeaway {
  width: 95px !important;
}

select.selectTax,
select.selectTaxDelivery,
select.selectTaxTakeaway {
  width: 145px !important;
  height: 28px !important;
}

#rContainer > div {
  padding: 8px 2px;
}

#rContainer .role {
  position: relative;
  padding: 0 6px;
  margin: 6px 0 0 0;
  font-size: .85em;
  line-height: 2em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);

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

#rContainer .role.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);
}

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

#rContainer .role.selected .icon {
  display: block;
}

#rContainer {
  position: relative;
  width: 420px;
  max-height: 350px;
  min-height: 350px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#rContainer .message {
  padding: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dialog .fv .f.rContainer {
  display: block;
  float: left;
  width: 172px;
  padding-right: 8px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.noPointerEvents {
  pointer-events: none;
}

.noVisibility {
  visibility: hidden;
}

.daterange {
  display: inline-block;
  width: 96px;
  padding: 0 8px;
  margin-right: 9px;
  color: white;
  background-color: gray;
  border-radius: 4px;
}

#noTimedEvents {
  line-height: 1.4em;
}

#establishmentSelectDialog .panel {
  width: 49%;
}

#establishmentSelectDialog select {
  margin-top: 10px;
  margin-bottom: 20px;
}

.left {
  float: left;
}

.right {
  float: right;
}

#listIngredients {
  position: relative;
  padding: 0;
  margin: 0;
}

.selectize-dropdown-content {
  max-height: 80px !important;
  overflow: hidden;
}

.headerfv {
  margin-bottom: 8px;
  font-size: .9em;
  font-style: italic;
}

.headerfv span:first-child {
  margin-left: 130px;
}

.headerfv span:last-child {
  margin-left: 164px;
}

#userList {
  position: relative;
  width: 400px;
  max-height: 150px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#userList .message {
  padding: 10px;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.message .fv .largeSelect {
  width: 100% !important;
  max-width: 283px;
}

.addedRow td {
  padding-left: 13px;
  font-size: .85em;
}

.invalidDataPopup {
  position: absolute;
  z-index: 9000;
  display: block;
  max-width: 250px;
  padding: 2px 5px 2px 5px;
  font-size: .9em;
  line-height: 1.8em;
  color: #a94442;
  background-color: #f2dede;
  border: 1px solid transparent;
  border-color: #ebccd1;
  border-radius: 4px;
}

.invalidDataPopup:after {
  position: absolute;
  top: -1px;
  left: -24px;
  border-right: 25px solid #f2dede;
  border-bottom: 25px solid transparent;
  content: "";
  /* left: 25px; */
}

.h2collapse {
  display: inline-block;
}

.h2collapse.close .fa-toggle-down {
  display: none;
}

.h2collapse.open .fa-toggle-right {
  display: none;
}

.tooltip {
  overflow: visible !important;
}

.tooltip:after
/* triangle decoration */ {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  padding: 10px 15px;
  margin-left: 15px;
  font-size: smaller;
  color: white;
  background: #4c4c4c;
  /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 0%, #131313 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c4c4c), color-stop(100%, #131313));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #4c4c4c 0%, #131313 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #4c4c4c 0%, #131313 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4c4c4c 0%, #131313 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #4c4c4c 0%, #131313 100%);
  border-radius: 4px;
  content: "";
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#4c4c4c", endColorstr="#131313", GradientType=0);
  transform: translate(-50%, -50%);
  /* IE6-9 */
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);

  -webkit-transform: translateY(-50%);
}

.double-card .tooltip:after {
  content: "Warning: The same card is used twice for the same receipt.";
}

.mainbody .ui_window.manual {
  top: 50%;
  left: 50%;
  max-height: 90%;
  transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);
}

.mainbody .ui_window.manual .dialogbody {
  max-height: 500px;
  overflow: auto;
}

input.disabled,
input[disabled],
select.disabled,
select[disabled],
.disabled-link {
  color: #999;
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}

.disabled-link {
  background-color: transparent;
}

.disableMousePointer {
  pointer-events: none;
}

#processContainer {
  margin-top: 10px;
  text-align: center;
}

.shiftReports tr:nth-child(even) {
  background-color: #ccc;
}

.listInDialog {
  position: relative;
  width: 330px;
  padding: 0;
  margin: 0;
}

.listInDialog li {
  width: 320px;
  margin-bottom: 8px;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titlelistInDialog {
  padding: 5px;
  font-size: .9em;
  font-weight: bold;
  line-height: 2em;
}

.toolTip {
  position: relative;
  display: inline-block;
  margin-bottom: 2px;
  margin-left: 24px;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  font-size: 1.8em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #f29a1c;
  text-rendering: auto;
  transform: translate(0, 0);
}

.toolTip:before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "\f071";
  transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);
}

.timepicker_wrap.meridian {
  width: 172px !important;
}

input.disabled,
input[disabled],
select.disabled,
select[disabled],
.disabled-link {
  color: #999;
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}

.disabled-link {
  background-color: transparent;
}

.info-tooltip .hover {
  position: absolute;
  top: 50%;
  left: 20px;
  z-index: 10;
  display: none;
  width: 300px;
  padding: 10px 15px;
  font-size: .8em;
  line-height: 16px;
  color: white;
  color: white;
  background: #4c4c4c;
  background: -moz-linear-gradient(top, #4c4c4c 0%, #131313 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c4c4c), color-stop(100%, #131313));
  background: -webkit-linear-gradient(top, #4c4c4c 0%, #131313 100%);
  background: -o-linear-gradient(top, #4c4c4c 0%, #131313 100%);
  background: -ms-linear-gradient(top, #4c4c4c 0%, #131313 100%);
  background: linear-gradient(to bottom, #4c4c4c 0%, #131313 100%);
  border-radius: 4px;
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#4c4c4c", endColorstr="#131313", GradientType=0);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);

  -webkit-transform: translateY(-50%);
}

.info-tooltip .hover.right {
  right: 0;
  left: auto;
}

.info-tooltip .hover.top {
  top: -150%;
}

.info-tooltip:hover .hover,
.info-tooltip:active .hover {
  display: block;
}

a[href="setting_notifications.html"] {
  font-size: .9em;
}


.uppercase {
  text-transform: uppercase;
}

.cssbutton[disabled=disabled] {
  color: #ccc;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  pointer-events: none;
  cursor: not-allowed;
}

table.flex {
  display: -webkit-flex;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  box-sizing: border-box;

  -moz-box-sizing: border-box;
  -webkit-flex-direction: column;
}

table.flex * {
  box-sizing: inherit;

  -moz-box-sizing: inherit;
}

table.flex thead {
  display: -webkit-flex;
  display: flex;
  align-items: stretch;
  flex-direction: column;

  -webkit-flex-direction: column;
}

table.flex tbody {
  display: inline-block;
  overflow-y: scroll;
}

table.flex thead > tr,
table.flex tbody > tr,
table.flex tfoot > tr {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  -webkit-flex-direction: row;
  -webkit-flex-wrap: nowrap;
}

table.flex thead,
table.flex tfoot {
  flex-shrink: 0;

  -webkit-flex-shrink: 0;
}

table.flex th,
table.flex tbody td {
  display: inline-block;
  width: 20%;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.td-5 {
  width: 5% !important;
}

.td-10 {
  width: 10% !important;
}

.td-15 {
  width: 15% !important;
}

.td-20 {
  width: 20% !important;
}

.td-30 {
  width: 30% !important;
}

.td-40 {
  width: 40% !important;
}

.no-float {
  float: none !important;
}

.input-group {
  position: relative;
  display: table;
  margin-top: 5px;
  margin-bottom: 5px;
  border-collapse: separate;
}
.hidden {
  visibility: hidden;
}

ul.linkedDeleteItemsList {
  position: relative;
  max-width: 520px;
  max-height: 150px;
  padding-left: 20px;
  overflow: scroll;
}

ul.linkedDeleteItemsList li {
  list-style-type: square !important;
}

h1.linkedDeleteItemsTitle {
  padding: 0;
  margin: 0;
  font-size: 1em;
}

.browser-not-supported {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  padding: 10px 15px;
  background-color: #ffa700;
}

.browser-not-supported a {
  font-style: italic;
  font-weight: 600;
  color: #000;
  text-decoration: underline;
}

.browser-not-supported .close-browser-warning {
  position: absolute;
  top: 50%;
  right: 15px;
  text-shadow: 1px 1px 4px rgba(200, 200, 200, 1);
  cursor: pointer;
  transform: translateY(-50%);
}


.locale-popup {
  font-size: 14px;
}

.center {
  width: 50%;
  margin: 0 auto;
}
.locale-de-notification-settings {
  font-size: .75em !important;
}

.locale-de-button-reportSettings {
  font-size: 1.1em !important;
}

.locale-de-userReports {
  font-size: .9em !important;
}

.locale-de-ingredientsReports {
  font-size: .9em !important;
}

.locale-de-shiftReports {
  font-size: .9em !important;
}

.locale-de-menuTimeEvents {
  width: 70% !important;
  margin: auto;
  font-size: .9em;
}

.standaloneImageUploader {
  width: 400px;
}

#combo-choice #colorcontainer {
  width: 296px !important;
  background-color: white;
}