h1 {
  text-align: center;
  font-size: 28px;
  color: #50535a;
  padding: 20px 0;
  font-weight: 400;
}

.main-form-container{
    background-color: #F5F5F5;
    padding: 20px;
    width: 90%;
    margin: 0 auto;
    border-radius: 8px ;
    -webkit-border-radius: 8px ;
    -moz-border-radius: 8px ;
    -ms-border-radius: 8px ;
    -o-border-radius: 8px ;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  justify-items: center;
  margin-bottom: 30px;
}

.box {
  max-width: 200px;
  height: 275px;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
  transition: filter 0.3s, border-color 0.3s;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box.active {
  border: 2px solid #019df4;
}

.box img {
  max-width: 100%;
  height: auto;
  /* filter: grayscale(100%);
  transition: filter 0.3s; */
}

/* .box.active img {
  filter: grayscale(0%);
} */

.logo {
  height: 70px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box p {
  line-height: 1.1;
  font-size: 14px;
  padding: 15px 10px;
  font-weight: bold;
}

.main-title {
  margin: 0 auto;
  width: 82%;
  font-size: 18px;
  line-height: 22.5px;
  font-weight: 300;
  text-align: center;
}

.container-form form {
  padding: 20px 30px;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

form input {
  background-color: #F5F5F5;
  border: none;
  width: 200px;
  font-size: 12px;
}

.container-form form .form-input {
  width: 273px;
  height: 47px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 1px #c3c3c3;
  border-radius: 4px;
  padding: 16px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.focus {
  border: 1px solid var(--blue) !important;
}

.input-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 16px;
}

.place {
  display: none;
  font-size: 12px;
  color: var(--blue) !important;
}

.i {
  display: block;
  -webkit-mask-size: cover;
  mask-size: cover;
  width: 24px;
  height: 24px;
  background-color: #b6b7b7;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.icon-user {
  -webkit-mask: url(https://aprodmovistarcomsa.z13.web.core.windows.net//persons/servicios-y-productos-mathilda-fibra/assets/icon-person.svg)
    no-repeat 100% 100%;
  mask: url(https://aprodmovistarcomsa.z13.web.core.windows.net//persons/servicios-y-productos-mathilda-fibra/assets/icon-person.svg)
    no-repeat 100% 100%;
}

.icon-phone {
  -webkit-mask: url(https://aprodmovistarcomsa.z13.web.core.windows.net//persons/servicios-y-productos-mathilda-fibra/assets/iconos-phone.svg)
    no-repeat 100% 100%;
  mask: url(https://aprodmovistarcomsa.z13.web.core.windows.net//persons/servicios-y-productos-mathilda-fibra/assets/iconos-phone.svg)
    no-repeat 100% 100%;
}

.icon-mail {
  -webkit-mask: url(https://aprodmovistarcomsa.z13.web.core.windows.net//persons/servicios-y-productos-mathilda-fibra/assets/icon-mail.svg)
    no-repeat 100% 100%;
  mask: url(https://aprodmovistarcomsa.z13.web.core.windows.net//persons/servicios-y-productos-mathilda-fibra/assets/icon-mail.svg)
    no-repeat 100% 100%;
}

#vehicle1 {
  width: 16px;
  height: 16px;
  justify-self: flex-end;
  position: relative;
  top: 4px;
}

.accept {
  display: grid;
  grid-template-columns: 17% 80%;
  text-align: initial;
  gap: 12px;
}

.accept label {
  font-size: 12px;
  width: 90%;
  justify-self: flex-start;
  color: #50535a;
}

.container-form form .lb-text {
  margin: 10px 0;
}

.container-form form .box-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 93%;
  gap: 13px;
  margin: 0px auto;
}

.container-form button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #019df4;
  color: #fff;
  width: 222px;
  height: 36px;
  margin: 20px auto 0;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
}

.button-active {
  background-color: #019df4;
}


.container-form .input-container select {
  background-color:#F5F5F5;
  width: 100%;
  color: #86888c;
  font-size: 12px;
  border: none;
}

.js-example-basic-single {
  width: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: #86888c !important;
}

.select2 .select2-container .select2-container--default {
  width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single {
  background-color: #F5F5F5;
  font-size: 12px;
  padding-left: 0px !important;
  border: none !important;
}

.select2-container--open .select2-dropdown {
  border: 1px solid #86888c;
}

.select2-results__option {
  font-size: 12px !important;
}

.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable:hover {
  background-color: white !important;
  color: var(--blue) !important;
}

.select2-results > .select2-results__options {
  max-height: 294px !important;
}

.container-form .input-container select option {
  color: #86888c;
  font-size: 12px;
}

.container-form .input-container select option:hover {
  background-color: white;
  color: var(--blue);
}

.select2-dropdown {
  top: 2px !important;
  left: -17px !important;
  width: 273px !important;
  border: none !important;
  box-shadow: 0px 4px 4px 0px #00000033;
}

.select2-results__option {
  position: relative;
  width: 100% !important;
  padding: 8px 18px !important;
  border-bottom: 1px solid #F5F5F5 ;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 25px !important;
}

.select2-container .select2-selection--single{
  height: 22px !important;
}

.select2-results__option span{
  display: grid;
  grid-template-columns: 75% 25%;
}

.select2-results__option span img{
  margin-left:60%;
}

.select2-results__option span img {
  opacity: 0;
}


.select2-results__option:hover span img,
.select2-results__option[aria-selected="true"] span img {
  opacity: 1;
  
}

.select2-container--default .select2-results__option--selected {
  background-color: white !important;
}

.select2-results__option.show-icon-check {
  position: absolute;
  content: "";
  top: 10px;
  left: 237px;
  background-image: url("https://aprodmovistarcomsa.z13.web.core.windows.net//emprendedores/beneficios/home-beneficios/content/img/check.png");
  background-size: cover;
  width: 24px;
  height: 24px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color: var(--blue) transparent transparent transparent !important;
  border-width: 6px 5px 0 5px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color: transparent transparent var(--blue) transparent !important;
  border-width: 0 5px 6px 5px !important;
}

.show {
  display: block;
}

@media only screen and (min-width: 768px) {
  .container {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    justify-items: center;
    margin-bottom: 30px;
  }
  .main-form-container {
    width: 100%;
    max-width: 1115px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-title{
    text-align: left;
  }

  .container-form {
    display: grid;
    grid-template-columns: 75% 25%;
    justify-content: center;
    align-items: center;
  }

  .container-form form {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 70%;
  }

  .container-form button {
    width: 171px;
    font-size: 16px;
    margin: 20px auto 0;
  }

  form input {
    width: 180px;
  }

  .container-form .input-container select {
    font-size: 12px;
  }

  .select2-container .select2-selection--single {
    font-size: 12px; /* Ajusta el tamaño de la fuente según tus necesidades */
  }

  .select2-container .select2-selection--single{
    background-color: #F5F5F5;
    height: 19px !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 20px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow{
      top: -3px !important;
    }
}