.wrap_controller {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 !important;
  background: #fff;
}

.wrap_controllerb {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  text-align: center;
  float: center;
  padding: 0 !important;
  background: #fff;
}

.game_controller {
  /* position: absolute; */
  top: 0;
  left: 0;
  background: #d2d2c8;
  margin: 0em auto;
  width: 38em;
  padding-top: 0;
  overflow: hidden;
}

.inner_controller {
  background: #46463c;
  width: 100%;
  position: absolute;
  height: 13em;
  bottom: 0;
  border: 0;
  border-top: 10px solid #bbbbac;
  border-bottom: 10px solid #bbbbac;
}

.tbox_table {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  border: 0;
  padding: 0;
  margin: 0;
  border: 0px solid yellow;
}

.tbox_tableb {
  overflow: hidden;
  border: 0;
  padding: 0;
  margin: 0;
  border: 0px solid yellow;
}

.tnner_controller {
  background: #46463c;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  border: 0;
  padding: 0;
  margin: 0;
  border-top: 0px solid #bbbbac;
  border-bottom: 0px solid #bbbbac;
  border: 0px solid yellow;
}

#tetris_controller, #bobble_controller, #game_controller {
  padding: 0px;
}

.dpad, .dpad2 {
  background: #777; /* 0f0f0d; */
  position: absolute;
  border-radius: 4px;
}

.dpad:before, .dpad2:after {
  content: '';
  width: 0;
  height: 0;
  position: relative;
  border-color: transparent;
  border-width: 20px;
  border-style: solid;
  display: block;
}

.dpad_wrap {
  width: 40%;
  height: 11em;
  left: -1em;
  position: absolute;
  top: 1em;
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

.dpad_horizontal_left, .dpad_horizontal_right {
  width: 3.3em;
  height: 3.5em;
  top: 3.8em;
  left: 1em;
  box-shadow: -5px 0 0 0 white, 0 5px 0 0 white, -5px 5px 0 0 white, 0 -5px 0 0 white, -5px -5px 0 0 white, -5px 15px 0 0px #cccccc;
}

.dpad_horizontal_left:before {
  border-right-color: black;
  top: 5px;
  right: 1em;
}

.dpad_horizontal_right {
  left: 7.7em;
  box-shadow: 5px 0 0 0 white, 0 5px 0 0 white, 5px 5px 0 0 white, 0 -5px 0 0 white, 5px -5px 0 0 white, 5px 15px 0 0px #cccccc;
}

.dpad_horizontal_right:before {
  border-left-color: black;
  top: 5px;
  right: -1em;
}

.dpad_vertical_up, .dpad_vertical_down {
  height: 5em;
  width: 3.5em;
  top: .5em;
  left: 4.25em;
  box-shadow: 0 0 0 5px white, 0 10px 0 5px #cccccc;
}

.dpad_vertical_down {
  top: 5.5em;
}

.dpad_vertical_up {
  z-index: 10;
  box-shadow: 0 0 0 5px white, 0 0px 0 5px #cccccc;
}

.dpad_vertical_up:before, .dpad_vertical_down:before {
  border-bottom-color: black;
  top: -5px;
  right: -.5em;
}

.dpad_vertical_up:after, .dpad_vertical_down:after {
  border-top-color: black;
  bottom: -2.5em;
  right: -.5em;
}

.dpad_fire_buttons { /* , .dpad_wrap_fire_buttons { */
  position: absolute;
  right: 2em;
  bottom: 2em;
}

.dpad_fire_buttons button, .dpad_wrap_fire_buttons button, .dpad_fire_buttons_b button, 
.dpad_wrap_fire_buttons_b button, .dpad_wrap_fire_buttons_c button, .dpad_wrap_fire_buttons_d button {
  width: 4em;
  height: 4em;
  background: red;
  display: inline-block;
  border-radius: 10em;
  border: none;
  margin-left: 1em;
  color: white;
  font-weight: bold;
  box-shadow: 1px 1px 0 0 #cc0000, 2px 2px 0 0 #cc0000, 3px 3px 0 0 #cc0000, 4px 4px 0 0 #cc0000, 5px 5px 0 0 #cc0000, 6px 6px 0 0 #cc0000, 7px 7px 0 0 #cc0000, 8px 8px 0 0 #cc0000;
}

.dpad_wrap_buttons button, .dpad_wrap_buttons_b button, .dpad_wrap_buttons_d button {
  background: white;
  display: inline-block;
  border-radius: 2em;
  border: none;
  margin-left: 1em;
  color: black;
  font-weight: bold;
  box-shadow: 1px 1px 0 0 #ccc, 2px 2px 0 0 #ccc, 3px 3px 0 0 #ccc, 4px 4px 0 0 #ccc, 5px 5px 0 0 #ccc, 6px 6px 0 0 #ccc, 7px 7px 0 0 #ccc, 8px 8px 0 0 #ccc;
}

.dpad_wrap_fire_buttons, .dpad_wrap_buttons {
  width: 16%;
  height: 100%;
}

.dpad_wrap_fire_buttons_b, .dpad_wrap_fire_buttons_c, .dpad_wrap_buttons_b {
  width: 16%;
  height: 100%;
}

.dpad_wrap_fire_buttons_d, .dpad_wrap_buttons_d {
  width: 14%;
  height: 100%;
}

.dpad_wrap_buttons_d button, .dpad_wrap_fire_buttons_d button, .dpad_wrap_buttons_b button, 
.dpad_wrap_fire_buttons_b button, .dpad_wrap_fire_buttons_c button {
  font-size: 18px;
  line-height: 0em;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  margin-left: 0em;
}

.dpad_wrap_buttons button, .dpad_wrap_fire_buttons button {
  font-size: 18px;
  line-height: 0em;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  margin-left: 0em;
}

.dpad_wrap_buttons, .dpad_wrap_fire_buttons {
  bottom: 5em;
}

.dhalf {
  height: 50% !important;
}

.controller_center {
  position: absolute;
  left: 31.5%;
  top: -1em;
  height: 120%;
  width: 12em;
}

.controller_center button {
  background: #46463c;
  border: none;
  width: 4em;
  height: 15px;
  box-shadow: 0 0 0 5px #d2d2c8;
  margin-top: 1em;
  margin-right: 1em;
  border-radius: 5px;
}

.game_control li {
  width: 100%;
  display: block;
  background: #d2d2c8;
  height: 2em;
  margin-bottom: .6em;
  border-radius: 4px;
}

.game_control li.controller_big {
  background: white;
  height: 3em;
  text-align: center;
}

#track_left, #track_leftx {
  /* background-color: white; */
  background-image: url('/images/foot-left-1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

#track_right, #track_rightx {
  /* background-color: white; */
  background-image: url('/images/foot-right-1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}