.form-container {max-width: 500px; border: solid 1px #ced6e0; border-radius: 5px; padding: 2rem; margin: 2rem auto}
.form-container form .mt-20.pt-5 {padding-left: 2px}
.bg-100 {background: #130f40; }
.main-width {max-width: 1280px; margin: 0 auto; padding: 0 20px}
.main-width.lotto {background: #130f40; padding-top: 30px}

.wanted-form {width: 340px; justify-content: center;}
.wanted-form input {width: 20%; height: 50px; margin-right: 5px; text-align: center;}
.wanted-form button {background: #dfe4ea ; height: 50px; border: solid 5px white; font-size: 18px; font-weight: bold}
.wanted-form button:hover {background: white; border: solid 5px white}

.message p {color: #3742fa}

.lotto-btn {margin-bottom: 0; text-align: center;}
.lotto-btn button {width:200px; background: #dfe4ea ; height: 50px; border: solid 5px white; font-size: 18px; font-weight: bold}
.lotto-btn button:hover {background: white; border: solid 5px white}
.newball_container {display: flex; justify-content: center}

.stage {
  /*width: 100px;*/
  height: 100px;
  display: flex;
  perspective: 1200px;
  perspective-origin: 50% 50%;
    /*margin-right: 20px;*/
    /*margin-top: 50px;*/
}

.ball {
  display: flex;
  background: #000;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  margin: 0;
  background: radial-gradient(circle at 150px 150px, #000, #666);
  position: relative;
  /*// overflow: hidden;*/
  outline: none;
  cursor: pointer;
}

.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 38%);
  filter: blur(5px);
  z-index: 2;
}


.number {
  background: #fff;
  border-radius: 30%;
  height: 60px;
  width: 60px;
  margin: 0;
  background: radial-gradient(circle at 150px 150px, #ccc, #fff);
  position: absolute;
  top: calc(70% - 50px);
  left: calc(70% - 50px);
  display: flex;
  color: #000;
  font-size: 40px;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.ball1 {
    background: radial-gradient(circle at 150px 150px, #FBC400, #FBC400);
}

.ball2 {
    background: radial-gradient(circle at 150px 150px, #69c8f2, #69c8f2);
}

.ball3 {
    background: radial-gradient(circle at 150px 150px, #ff7272, #ff7272);
}

.ball4 {
    background: radial-gradient(circle at 150px 150px, #aaa, #aaa);
}

.ball5 {
    background: radial-gradient(circle at 150px 150px, #b0d840, #b0d840);
}

.ball6 {
    background: radial-gradient(circle at 150px 150px, #000, #666);
}

/*.ball {width: 70px; height: 70px; border-radius: 50%; padding: 13px}*/
.ball1{
    background: #fbc400;
    text-shadow: 0 0 3px rgba(73, 57, 0, 0.8);
    background: radial-gradient(circle at 65% 15%, white 1px,  #FDFAA0 3%,  #f6c000 60%,  #FDFAA0 100%); }
.ball2{
    background: #69c8f2;
    text-shadow: 0 0 3px rgba(0, 49, 70, 0.8);
    background: radial-gradient(circle at 65% 15%, white 1px,  #7FF9F7 3%,  #69c8f2 60%,  #7FF9F7 100%); }
.ball3{
    background: #ff7272;
    text-shadow: 0 0 3px rgba(64, 0, 0, 0.8);
    background: radial-gradient(circle at 65% 15%, white 1px,  #FAC0C0 3%,  #ff7272 60%,  #FAC0C0 100%); }
.ball4{
    background: #aaa;
    text-shadow: 0 0 3px rgba(61, 61, 61, 0.8);
    background: radial-gradient(circle at 65% 15%, white 1px,  #F1F1F1 3%,  #aaa 60%,  #F1F1F1 100%); }
.ball5{
    background: #b0d840;
    text-shadow: 0 0 3px rgba(41, 56, 0, 0.8);
    background: radial-gradient(circle at 65% 15%, white 1px,  #DBF74C 3%,  #b0d840 60%,  #DBF74C 100%); }
.ball6{
    background: #1e272e;
    text-shadow: 0 0 3px rgba(41, 56, 0, 0.8);
    background: radial-gradient(circle at 65% 15%, white 1px,  #7bed9f 3%,  #3742fa 60%,  #303952 100%); }
/*.number {background: white; font-size: 20px; font-weight: bold; width: 42px; height: 42px; border-radius: 50%; display: flex; justify-content: center; align-items: center}*/

@media screen and (max-width: 800px) {
    .ball {width: 50px; height: 50px}
    .number {width: 30px; height: 30px; font-size: 16px; top: calc(120% - 50px); left: calc(120% - 50px);}
    .stage {padding-left: 20px; height: 20px}
}

@media screen and (max-width: 450px) {
    .stage {padding-left: 7px}
    .grid.lotto {margin-left: 0}
}