.form-control{
    border: 0px;border-bottom: 1px solid #000;border-radius: 0px;
    
}
.form-control:focus {
    outline: none !important;
    box-shadow: none;
    border-color:black;
}

#roulette {
    display: block;
    margin: 0 auto;
    width: 400px;
    height: 400px;
    transition: transform 5s ease-out;
  }
  
  .roulette-slice {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 200px;
    transform-origin: center bottom;
    background-color: red;
  }
  #spin{
    margin-top: 50px;
  } 
  #result{
    background: red;
  }

  #containerRuleta {
    position: relative; /* Establecemos la posición relativa para que los elementos internos sean posicionados relativos a este contenedor */
  }
  
  #roulette {
    display: block;
    margin: 0 auto; /* Centramos horizontalmente la imagen 1 en el contenedor */
    z-index: 1; /* Le damos un índice z de 1 para que esté detrás de la imagen 2 */
  }
  
  #selector {
    width: 160px;
    position: absolute; /* Establecemos la posición absoluta para que la imagen 2 se superponga en la imagen 1 */
    top: 46%; /* La posicionamos en la mitad de la altura del contenedor */
    left: 50%; /* La posicionamos en la mitad del ancho del contenedor */
    transform: translate(-50%, -50%); /* Centramos la imagen 2 tanto horizontal como verticalmente */
    z-index: 2; /* Le damos un índice z de 2 para que esté delante de la imagen 1 */
  }
  .iti--separate-dial-code .iti__selected-flag {
    background-color:white
   }
  .iti{
    width: 100%;
  }