html,
body {
  height: 100%;
}
.cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.text-base {
  color: #535355;
}
.header {
  text-align: right;
  padding-right: 2%;
  padding-top: 2%;
}
.header-logo {
  width: 20%;
}
.logo-home {
  width: 200px;
  padding-bottom: 7%;
}
.image-home {
  width: 10%;
}

.input-search {
  border-radius: 25px;
  border: 2px solid #535355;
}
.input-name {
  font-size: 1.8rem;
}

.subtitle-search {
  font-size: 1rem;
  margin-top: 2%;
  width: 80%;
}

.title-search {
  font-size: 1.75rem;
  margin-top: 5%;
}

.btn-footer {
  border: 2px solid #535355;
  border-radius: 25px;
  width: 40%;
}

.btnfooter-finish {
  background-color: #535355;
  color: #fff;
}

.select-month {
  border: 2px solid #535355;
  border-radius: 25px;
}

.select-name {
  border: 2px solid #535355;
  border-radius: 20px;
  overflow-y: scroll !important;
}
.box-result-name {
  height: 400px;
  width: 600px;
  border: 2px solid #535355;
  border-radius: 20px;
}

.textbox-result {
  font-size: 1.5rem;
  margin-left: 5%;
  color: #535355;
}

.boxend-number {
  height: 300px;
  width: 100%;
  border: 4px solid #535355;
  border-radius: 20px;
}

.title-end {
  font-size: 15rem;
  color: #535355;
  /* margin-top: 2%; */
}
.subtitle-number {
  color: #535355;
  margin-top: 4%;
}

/* Let's get this party started */
.box-result {
  width: 80%;
  font-size: 1.7rem;
}
.box-select-result {
  /* height: 400px !important; */
  font-size: 2.45rem;
  max-height: 400px !important;
}
.flexcroll::-webkit-scrollbar {
  width: 20px;
}
/* Track */
.flexcroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 40px;
  border-radius: 40px;
}
/* Handle */
.flexcroll::-webkit-scrollbar-thumb {
  -webkit-border-radius: 40px;
  border-radius: 40px;
  background: #535355;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.mobile {
  display: none;
}

.input-number {
  height: 150%;
}

.btn-next-end {
  margin-top: 3%;
}

.month-box {
  height: 410px !important;
  width: 400px;
  font-size: 1.7rem;
}

@media only screen and (max-width: 480px) {
  .title-home {
    font-size: 1.6rem;
  }
  .text-base {
    color: #535355;
  }

  .header {
    padding-right: 4%;
    padding-top: 4%;
  }
  .header-logo {
    width: 40%;
  }
  .logo-home {
    width: 12rem;
    padding-bottom: 10%;
  }

  #box-keyboard {
    display: none !important;
  }

  .title-search {
    font-size: 1rem;
    margin-top: 0% !important;
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .image-home {
    width: 40%;
  }

  .subtitle-search {
    margin-top: 3%;
    width: 100%;
    font-size: 0.6rem;
  }

  .title-search {
    font-size: 1rem;
    margin-top: 10%;
  }

  .input-number {
    height: 100%;
    width: 110%;
  }

  .box-result {
    width: 80%;
    font-size: 1.7rem;
    margin-left: 8%;
  }

  .boxend-number {
    height: 200px;
    width: 100%;
    border: 4px solid #535355;
    border-radius: 20px;
  }

  .subtitle-number {
    color: #535355;
    margin-top: 14%;
    font-size: 1rem;
  }

  .title-end {
    font-size: 8rem;
    color: #535355;
    /* margin-top: 2%; */
  }
  .btn-next-end {
    margin-top: 15%;
  }

  .box-select-result {
    /* height: 400px !important; */
    font-size: 1.8rem;
    max-height: 400px !important;
  }
}

/* @media (min-width: 768px) {
  .input-name {
    height: 50px !important;
  }
} */