.tableTool {
  width: 100%;
  border: 1px solid;
  font-family: arial;
  margin: auto;
}
.tableImage {
  position: relative;
  width: 100%;
  height: 0px;
  padding-top: 66.75%;
}
.tableBase {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../images/TableBase.png");
  border-bottom: 1px solid black;
  opacity: 0;
}
.tableclothOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}
.napkinOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}
.tableThumbnailArea {
  margin: 25px;
}
.tableclothThumb {
  vertical-align: baseline;
  cursor: hand; cursor: pointer;
  border: 0px solid black;
  margin: 2px;
}
.napkinThumb {
  vertical-align: baseline;
  cursor: hand; cursor: pointer;
  border: 0px solid black;
  margin: 2px;
}
.tableclothSelectedThumb {
  vertical-align: baseline;
  cursor: default;
  border: 2px solid blue;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
}
.napkinSelectedThumb {
  vertical-align: baseline;
  cursor: default;
  border: 2px solid blue;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
}
/**
 * Custom
 */
 .tableTool {
   padding-right: 300px;
 }
 .tableThumbnailArea {
   position: absolute;
   top: 0;
   right: 0;
   width: 250px;
   height: 400px;
   overflow: scroll;
   -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
 }
 .tableThumbnailArea::-webkit-scrollbar {
   display: none;
 }
@media screen and (max-width: 1000px) {
  .tableThumbnailArea {
    height: 250px;
  }
}
@media screen and (max-width: 480px) {
  .tableTool {
    padding-right: 0;
  }
  .tableThumbnailArea {
    position: relative;
    width: unset;
    height: unset;
  }
}