/*
 * Configuração Geral
 */

* {
    box-sizing: border-box;
}
/* Tamanho da Janela dos 5x Rodilhos */
:root {
    --item-height: 136px;
}

/* Background da Imagem em Plano de Fundo */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  justify-content: center;
  background: url("arcade-spirit.jpg");
  background-size: cover;
  overflow: hidden;
}

/*
 * Style the orange box
 */

.start-button {
    display: block;
    margin: -0.8em auto;
}

#container {
    background-color: #ffcbdb;
    padding: 0px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -374px;
    margin-top: 180px;
}

.window {
    position: relative;
    overflow: hidden;
    height: calc(1 * var(--item-height));
}

.window::before {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
}

.window::after {
    content: "";
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
}

.window-border {
    padding: 10px;

    box-shadow: 0 6px 4px -5px #eca654 inset;
}

/*
 * Reels and icon styling-----------------------------------------------------------------------------------------------------------------------------------
 */

.icon {
    width: 120px;
    height: var(--item-height);
    display: block;
    position: relative;

    /*animation: wiggle 0.1s linear infinite;*/
}

.outer-col {
    overflow-y: hidden;
    width: 143px;
    float: left;
    background-color: #eee;
    background-image: linear-gradient(#16013c, #741a5e, #430155, #16013c);
    height: calc(var(--item-height) * 3);
}

.outer-spacer {
    width: 1px;
    height: 100%;
    float: left;
    border-right: 2px solid #f7ce6c38;
    background-image: linear-gradient(#be4d01, #893802);
}

.col {
    padding: 0 10px;
    will-change: true;
    transform: translateY(calc(-100% + var(--item-height) * 3));
}

.col img {
    width: 100%;
    height: auto;
    margin: 10px 0;
    position: relative;
    z-index: 3;
}

/* shadow effect behind the items */
.col .icon::after {
    content: "";
    clear: both;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    background-color: white;
    box-shadow: 0 0 35px 30px rgba(12, 0, 14, 0.69);
    z-index: 2;
    border-radius: 100%;
}

/*
 * Spinning animation
 */

#container.spinning .outer-col:nth-of-type(2) .col {
    animation-delay: 0.01s;
}

#container.spinning .outer-col:nth-of-type(3) .col {
    animation-delay: 0.02s;
}

#container.spinning .outer-col:nth-of-type(4) .col {
    animation-delay: 0.03s;
}

#container.spinning .col {
    animation-name: scroll;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.65, .97, .72, 1);
}

@keyframes scroll {
    to {
        transform: translateY(0);
    }
}

/*@keyframes wiggle {
    0% {
        transform: rotate(7deg);
    }
    50% {
        transform: rotate(-7deg);
    }
    100% {
        transform: rotate(7deg);
    }
}*/

/* ---------------------------------------------------------------------------------------------------------------------------------------- */
/*
	Configurar o Painel Principal dos Rodilhos / Painel das 3x linhas de BET
*/

	paytable

.frontface-plate { overflow: hidden; }

    z-index: 7;
	  
    .frontface-plate .bottom-space .label {
      color: white;
      font-family: 'oswaldbold';
      font-size: 24px; }


		  
/* Configura o campo digital vermelho */		  
    .frontface-plate .bottom-space .segment_display {
	  align-content: right;
      position: absolute;
      margin-left: -633px;
	  margin-top:  30px;
      width: inherit;
      font-family: 'segment14regular';
      font-size: 44px;
      color: #ff0000;
      text-shadow: -1px 1px 8px #7f0000, 1px -1px 8px #ff7f7f; }
	  
/* Configura a sombra digital dos digitos "8" */	  
    .frontface-plate .bottom-space .segment_display.dimmed { color: #330000; }
		

/* Configura o campo digital vermelho */		  
    .frontface-plate .bottom-space .debito{
	  align-content: right;
      position: absolute;
      margin-left: 370px;
	  margin-top:  120;
      width: inherit;
      font-family: 'segment14regular';
      font-size: 44px;
      color: #ff0000;
      text-shadow: -1px 1px 8px #7f0000, 1px -1px 8px #ff7f7f; }
	  
/* Configura a sombra digital dos digitos "8" */	  
    .frontface-plate .bottom-space .debito.dimmed { color: #330000; }

/* Configura o campo digital vermelho ( 3x )*/		  
    .frontface-plate .bottom-space .bet{
	  align-content: right;
      position: absolute;
      margin-left: -415px;
	  margin-top:  10px;
      width: inherit;
      font-family: 'segment14regular';
      font-size: 44px;
      color: #ff0000;
      text-shadow: -1px 1px 8px #7f0000, 1px -1px 8px #ff7f7f; }
	  
/* Configura a sombra digital dos digitos "8" */	  
    .frontface-plate .bottom-space .bet.dimmed { color: #330000; }
	
	
	
/* Configura o campo digital vermelho ( Qr-codigo ) */		  
    .frontface-plate .bottom-space .qrcodigo {
	  align-content: right;
      position: absolute;
      margin-left: -130px;
	  margin-top:  -140px;
	  
	}
	  


/* -------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*
	Botões de controle ( BET+ / BET- ) e o botão JOGAR
*/
.controlpanel {
	height: 95px;
	margin-left: 0px;
	margin-top:  650px;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	border-top: 2px solid white;
	box-shadow: inset 0px 0px 24px -1px rgba(0, 0, 0, 0.5);
	background: -webkit-linear-gradient(top, #e2e2e2 0%, #c8c8c8 5%, #bfbfbf 7%, #f0f0f0 90%, #bfbfbf 98%, #969696 100%);
	background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 5%, #bfbfbf 7%, #f0f0f0 90%, #bfbfbf 98%, #969696 100%); }
	
  .controlpanel .button {
    height: auto;
    float: right;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .controlpanel .button.functions {
      float: left;
      font-size: 16px;
      top: 18px;
      margin-left: 20px; }
    .controlpanel .button.paytable {
      float: right;
      font-size: 16px;
      top: 18px;
      margin-right: 30px; }

.controlpanel {
  /* -------------- THE button -------------- */
  /* red */
  /* blue */ }
  
  .controlpanel button.button:hover {
    cursor: pointer; }
  .controlpanel .button {
    /* text */
    text-decoration: none;
    font: 24px/1em 'Droid Sans', sans-serif;
    font-weight: bold;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    /* layout - Configura a altura dos botões 3D */
    padding: .5em .6em .4em .6em;
    margin: 1.5em .5em .5em .5em;
    display: inline-block;
    position: relative;
    border-radius: 8px;
    /* effects */
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-transition: background .2s ease-in-out;
            transition: background .2s ease-in-out;
    /* color */
    color: #222222;
    background-color: #e6e6e6;
    box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em 0.3em, inset rgba(0, 0, 0, 0.15) 0 -0.1em 0.3em, #999999 0 0.1em 3px, #737373 0 0.3em 1px, rgba(0, 0, 0, 0.2) 0 0.5em 5px;
    /* drop shadow */ }
    .controlpanel .button.enabled {
      background-color: #ffffe7; }
      .controlpanel .button.enabled.blink {
        -webkit-animation: blink_whiteButton normal 2s infinite ease-in-out;
                animation: blink_whiteButton normal 2s infinite ease-in-out; }
  .controlpanel .button.red {
    background-color: #ff80aa;
    box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em 0.3em, inset rgba(0, 0, 0, 0.15) 0 -0.1em 0.3em, #d92662 0 0.1em 3px, #b8144b 0 0.3em 1px, rgba(0, 0, 0, 0.2) 0 0.5em 5px;
    /* drop shadow */ }
  .controlpanel .button.red:hover {
    background-color: #ffa8c5; }
  .controlpanel .button.blue {
    color: #336999 !important;
    background-color: #80c4ff;
    box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em 0.3em, inset rgba(0, 0, 0, 0.15) 0 -0.1em 0.3em, #5390c6 0 0.1em 3px, #336999 0 0.3em 1px, rgba(0, 0, 0, 0.2) 0 0.5em 5px;
    /* drop shadow */ }
  .controlpanel .button.blue:hover {
    background-color: #a8d7ff; }
  .controlpanel .button:hover {
    /*background-color: 	hsl(0, 0%, 98%);*/ }
  .controlpanel .button:active {
    box-shadow: inset rgba(255, 255, 255, 0.6) 0 0.3em 0.3em, inset rgba(0, 0, 0, 0.2) 0 -0.1em 0.3em, rgba(0, 0, 0, 0.4) 0 0.1em 1px, rgba(0, 0, 0, 0.2) 0 0.2em 6px;
    /* drop shadow */
    -webkit-transform: translateY(0.2em);
        -ms-transform: translateY(0.2em);
            transform: translateY(0.2em); }
  .controlpanel .button:focus {
    outline: none;
    color: rgba(254, 255, 255, 0.9) !important;
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
  .controlpanel .button[disabled], .controlpanel .button[disabled]:hover, .controlpanel .button.disabled, .controlpanel .button.disabled:hover {
    opacity: .5;
    cursor: default;
    color: rgba(0, 0, 0, 0.2) !important;
    text-shadow: none !important;
    background-color: rgba(0, 0, 0, 0.05);
    background-image: none;
    border-top: none;
    box-shadow: inset rgba(255, 254, 255, 0.4) 0 0.3em 0.3em, inset rgba(0, 0, 0, 0.1) 0 -0.1em 0.3em, rgba(0, 0, 0, 0.3) 0 0.1em 1px, rgba(0, 0, 0, 0.2) 0 0.2em 6px;
    /* drop shadow */
    -webkit-transform: translateY(5px);
        -ms-transform: translateY(5px);
            transform: translateY(5px); }
  .controlpanel .button.glossy:after, .controlpanel .button.glass:after {
    content: "";
    position: absolute;
    width: 90%;
    height: 60%;
    top: 0;
    left: 5%;
    border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.55) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.55) 100%); }
  .controlpanel .button.glossy:active:after,
  .controlpanel .button.glass:active:after,
  .controlpanel .button.disabled:after,
  .controlpanel .button[disabled]:after {
    opacity: .6; }
  .controlpanel .button.icon.glossy:after,
  .controlpanel .button.icon.glass:after {
    height: 75%; }

/* ----------------------------------------------------------------------------------------------------------------------------------------- */