:root {
  --button-shadow-base: 0px 2px 4px #d6d7d9, 0px -2px 4px #cecfd1;

  --button-shadow-default: inset 0 0 3px 0 #cecfd1;
  --button-shadow-hover: var(--button-shadow-base), inset 0 0 3px 3px #aec8f2e2;
  --button-shadow-active: var(--button-shadow-base), inset 0 0 5px 3px #999,
    inset 0 0 30px #aaa;
}

.button {
  position: absolute;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 17%;
  height: 20%;
  background-color: transparent;
  border: none;
  z-index: 2;
  cursor: pointer;
}
.button_special {
  width: 100%;
  height: 100%;
}
.button:hover:not([disabled]) {
  box-shadow: var(--button-shadow-hover);
}

.hover-simulated {
  /* box-shadow: var(--button-shadow-hover); */
  box-shadow: inset 0px 0px 20px rgb(255, 255, 0) !important;
  /*  background: rgba(255, 255, 0, 0.4);
 opacity: 0.6 !important; */
}

#btn_one-12 {
  width: 170px;
  height: 50px;
}
#btn_thirteen-24 {
  width: 170px;
  height: 50px;
}
#btn_twentyfive-36 {
  width: 170px;
  height: 50px;
}

.button:active {
  opacity: 0.7; /* Reduce opacity when pressed */
}

/* Top-Row */
/* Table 3 */
#btn_0_3 {
  top: 15px;
  left: -10px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_0_3_2 {
  bottom: -10px;
  left: -12px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_3_2 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_3_2_5_6 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_3_6 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_3_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}

/* Table 6 */
#btn_6_5 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_6_5_8_9 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_6_9 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_6_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Table 9 */
#btn_9_8 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_9_8_11_12 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_9_12 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_9_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Table 12 */
#btn_12_11 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_12_11_14_15 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_12_15 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_12_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Table 15 */
#btn_15_14 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_15_14_17_18 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_15_18 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_15_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Table 18 */
#btn_18_17 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_18_17_20_21 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_18_21 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_18_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Table 21 */
#btn_21_20 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_21_20_23_24 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_21_24 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_21_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Table 24 */
#btn_24_23 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_24_23_26_27 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_24_27 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_24_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Table 27 */
#btn_27_26 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_27_26_29_30 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_27_30 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_27_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Table 30 */
#btn_30_29 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_30_29_32_33 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_30_33 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_30_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Table 33 */
#btn_33_32 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_33_32_35_36 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_33_36 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_33_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Table 36 */
#btn_36_35 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_36_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Mid-row */
/* Table 2 */
#btn_0_2 {
  top: 15px;
  left: -10px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_0_2_1 {
  bottom: -10px;
  left: -12px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_2_1 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_2_1_4_5 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_2_5 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_2_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 5 */
#btn_5_4 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_5_4_7_8 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_5_8 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_5_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 8 */
#btn_8_7 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_8_7_10_11 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_8_11 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_8_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 11 */
#btn_11_10 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_11_10_13_14 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_11_14 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_11_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 14 */
#btn_14_13 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_14_13_16_17 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_14_17 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_14_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 17 */
#btn_17_16 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_17_16_19_20 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_17_20 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_17_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 20 */
#btn_20_19 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_20_19_22_23 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_20_23 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_20_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 23 */
#btn_23_22 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_23_22_25_26 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_23_26 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_23_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 26 */
#btn_26_25 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_26_25_28_29 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_26_29 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_26_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 29 */
#btn_29_28 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_29_28_31_32 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_29_32 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_29_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
} /* table 32 */
#btn_32_31 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_32_31_34_35 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_32_35 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_32_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
} /* table 35 */
#btn_35_34 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_35_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Bottom-row */
/* table 1 */
#btn_0_1 {
  top: 15px;
  left: -10px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_1_2_3 {
  bottom: -10px;
  left: 9px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_1_2_3_4_5_6 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_1_4 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_1_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 4 */
#btn_4_5_6_7_8_9 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_4_7 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_4_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 7 */
#btn_7_8_9_10_11_12 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_7_10 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_7_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 10 */
#btn_10_11_12_13_14_15 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_10_13 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_10_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 13 */
#btn_13_14_15_16_17_18 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_13_16 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_13_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
} /* table 16 */
#btn_16_17_18_19_20_21 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_16_19 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_16_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 19 */
#btn_19_20_21_22_23_24 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_19_22 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_19_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 22 */
#btn_22_23_24_25_26_27 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_22_25 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_22_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 25*/
#btn_25_26_27_28_29_30 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_25_28 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_25_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 28 */
#btn_28_29_30_31_32_33 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_28_31 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_28_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 31 */
#btn_31_32_33_34_35_36 {
  bottom: -10px;
  right: -11px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}
#btn_31_34 {
  top: 13px;
  left: 30px;
  width: 20px;
  height: 20px;
  z-index: 3;
  background: transparent;
}
#btn_31_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* table 34*/

#btn_34_center {
  top: 0px;
  left: 0px;

  height: 100%;
  width: 100%;
}
/* Zero button */
#btn_0 {
  top: 0px;
  left: 0px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  /* clip-path: polygon(75% 0, 100% 0, 100% 100%, 75% 100%, 0% 50%); */
  width: 60px;
  height: 150px;
}

/* 1st, 2nd , 3rd */

#btn_3rd {
  top: 0px;
  left: 0px;
  height: 50px;
  width: 98%;
}
#btn_2nd {
  top: 48px;
  left: 0px;
  height: 50px;
  width: 98%;
}

#btn_1st {
  top: 100px;
  left: 0px;
  height: 50px;
  width: 98%;
}

/* Table 4 */
#btn_4_5_6 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

/* Table 7 */
#btn_7_8_9 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

/* Table 10 */
#btn_10_11_12 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

/* Table 13 */
#btn_13_14_15 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

/* Table 16 */
#btn_16_17_18 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

/* Table 19 */
#btn_19_20_21 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

/* Table 22 */
#btn_22_23_24 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

/* Table 25 */
#btn_25_26_27 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

/* Table 28 */
#btn_28_29_30 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

/* Table 31 */
#btn_31_32_33 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

/* Table 34 */
#btn_34_35_36 {
  bottom: -10px;
  left: 9.5px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}

#btn_0_1_2_3 {
  bottom: -10px;
  left: -12px;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: transparent;
}