html *
{
   
   font-family: Arial !important;
}

p.indexcolor {
   color: #4c4c4c !important;

}

img {
  max-width: 100%;
  height: auto;
}

input[type=number] {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  display: block;
  text-align:center;
  
  color:#333333 !important;
  style="font-size:25px;"
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4c4c4c;
  width: 50%;
  border: none;
  color: white;
  padding: 16px 32px;
  font-weight:bold;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

button {
  background-color: #4c4c4c;
  width: 40%;
  border: none;
  color: white;
  padding: 16px 32px;
  font-weight:bold;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/*.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
}*/

p.volume {
	font-size:14px;
}

p.info {
	font-size:12px;
	color:#999999 !important;
}

.ticket {
	font:Arial, Helvetica, sans-serif; 
	font-size:200px;
	color:#000000;
}

@media only screen and (orientation:landscape){
  #landscape{ display:block; }
  #portrait{ display:none; }
}
@media only screen and (orientation:portrait){
  #landscape{ display:none; }
  #portrait{ display:block; }
}

/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: #575656 radial-gradient(circle, transparent 1%, #4c4c4c 1%) center/15000%;
}
.ripple:active {
  background-color: #575656;
  background-size: 100%;
  transition: background 0s;
}

.inputnumbers {
  font-size:20px;
}