.button_box {
  position: relative;
  width: 74px;
  height: 74px;
  text-align: center;
  margin: 1px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
}

.button_box:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.button_box:active {
  transform: scale(0.95);
}

#res_btn_0 {background-image: url("../img/r_0.png"); background-size: cover;}
#res_btn_1 {background-image: url("../img/r_1.png"); background-size: cover;}
#res_btn_2 {background-image: url("../img/r_2.png"); background-size: cover;}
#res_btn_3 {background-image: url("../img/r_3.png"); background-size: cover;}
#res_btn_4 {background-image: url("../img/r_4.png"); background-size: cover;}
#res_btn_5 {background-image: url("../img/r_5.png"); background-size: cover;}
#res_btn_6 {background-image: url("../img/r_6.png"); background-size: cover;}
#res_btn_7 {background-image: url("../img/r_7.png"); background-size: cover;}
#res_btn_8 {background-image: url("../img/r_8.png"); background-size: cover;}
#res_btn_9 {background-image: url("../img/r_9.png"); background-size: cover;}
#res_btn_10 {background-image: url("../img/r_10.png"); background-size: cover;}
#res_btn_11 {background-image: url("../img/r_11.png"); background-size: cover;}
#res_btn_12 {background-image: url("../img/r_12.png"); background-size: cover;}
#res_btn_13 {background-image: url("../img/r_13.png"); background-size: cover;}

#place_btn {
  width: 74px;
  height: 74px;
  background-image: url("../img/place_btn_off.png");
  background-size: cover;
  border-radius: 6px;
}

#save_btn {
  width: 74px;
  height: 74px;
  background-image: url("../img/floppy.png");
  background-size: cover;
  border-radius: 6px;
}
#scan_btn {
  flex: 1;
  height: 64px;
  margin: 0 8px;
  background: linear-gradient(to top, #335500, #338800);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  max-width: 400px;
}

#scan_btn:hover {
  background: linear-gradient(to top, #446600, #449900);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#scan_btn:active {
  transform: translateY(0);
}

#scan_btn a {
  vertical-align: middle;
  font: bold 14px Arial;
  color: white;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
}
#tools_btn {
  width: 74px;
  height: 74px;
  background-image: url("../img/tool-box.png");
  background-size: cover;
  border-radius: 6px;
}

#res_btn {
  width: 74px;
  height: 74px;
  background-image: url("../img/r_0.png");
  background-size: cover;
  border-radius: 6px;
}
.res_btn_name {
  position: absolute;
  height: 14px;
  width: 100%;
  bottom: 0;
  background-color: rgba(50, 50, 50, 0.7);
  text-align: center;
  color: white;
  font: 11px Arial;
  pointer-events: none;
}