.restaurant-area {
    background: #fdfdfd;
    height: 500px;
    width: 600px;
    background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .1) 25%, rgba(0, 0, 0, .1) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .1) 25%, rgba(0, 0, 0, .1) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    box-shadow: inset 0 0 10px #d4d4d4;
    border-radius: 20px;
    z-index: 8;
    position: relative;
}

@media( max-width: 585px) {
  .restaurant-area {
    margin-right: 20px;
  }
}

.restaurant-area .table {
  position: absolute !important
}

.table svg {
    width: 100px;
    height: auto;
    display: inline;
    z-index: 10;
}

.table {
    box-shadow: 0 0 5px #eaeaea;
    width: 100px;
    display: inline-block;
    margin: 0 10px 10px 0;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
}

.table.ui-draggable-dragging {
  cursor: dragging;
}

.table.ui-draggable-dragging,
.restaurant-area .table {
  box-shadow: none;
  width: 200px !important;
  transform: translate(-50%, -50%);
}

.table.ui-draggable-dragging svg,
.restaurant-area .table svg {
  box-shadow: none;
  width: 200px !important;
}

.tables {
    text-align: center;
    max-height: 550px;
    overflow: auto;
    padding-top: 50px;
}

.table .form-group {
  display: none;
  position: absolute;
  top: 50%;
  left: 40px;
  right: 40px;
  margin: 0;
  margin-top: -10px;
}

.table.active .form-group {
  display: block;
}

.table .form-group input {
  font-size: 12px;
  padding: 5px;
  height: auto;
}

.add-new-area {
  position: absolute;
  top: 6px;
  right: -13px;
}

.table .form-group .fa {
  position: absolute;
  top: 7px;
  right: 7px;
  color: #989898;
}

.table .form-group .fa:hover {
  color: #3a3;
}

.table-set h3 {
    margin: 0;
    text-align: center;
    font-size: 19px;
}