.registro-vaco {
   background-color: #ffffff;
   display: flex;
   flex-direction: row;
   justify-content: center;
   width: 100%;
   height: 100vh;
}

.open-prefijo,
.open-departamento {
   cursor: pointer;
}

.width_100_percentaje {
   width: 100% !important;
}

.text-align-center {
   text-align: center !important;
}

.img-re {
   object-fit: contain;
   width: 100%;
   height: auto;
   max-width: 125px;
}

.container-img-registro-aprobado {
   width: 100%;
   text-align: center;
}

.padding_0 {
   padding: 0 !important;
}

.padding_left_0 {
   padding-left: 0 !important;
}

.padding_right_0 {
   padding-right: 0 !important;
}

.quitar_padding_cols_inputs_mobiles {
   margin-bottom: 11px;
}

.quitar_text_decoration {
   text-decoration: none !important;
}

.margin_padding_0 {
   margin: 0 !important;
   padding: 0 !important;
}

.registro-vaco .div {
   background-color: var(--lightwhitewhite);
   width: 100%;
   /* width: 1440px; */
   /* height: 1024px; */
   height: 100%;
   position: relative;
}

.registro-vaco .go-site-web {
   cursor: pointer;
}

.registro-vaco .show-eyes-password {
   cursor: pointer;
}

.registro-vaco .contenido-formulario {
   width: 100%;
   height: 100vh;
   /* overflow: auto; */
}

.registro-vaco .overlap {
   /*  position: absolute;
   width: 960px;
   height: 1024px;
   top: 0;
   left: 480px; */

   /* width: 100%;
   height: 100%;
   overflow-y: auto; */

   width: 100%;
   height: 100vh;
   overflow-y: auto;

   background-color: var(--lightwhitewhite);
}

/* sin el banner */
/* .registro-vaco .container {
   display: flex;
   width: 100%;

   justify-content: center;
   gap: 48px;
   padding: 0px 32px;
} */

.registro-vaco .container {
   /* display: flex; */
   /* flex-direction: column; */
   width: 100%;
   /* height: 100vh; */
   /* align-items: center; */
   justify-content: center;
   gap: 48px;
   /* padding: 0px 32px; */
   /* overflow-y: auto; */
   padding: 0px;
}

.registro-vaco .container-re {
   width: 100%;
   height: 100vh;

   justify-content: center;
   gap: 48px;

   padding: 0px;
}

.registro-vaco .container-overlap-group-side {
   height: 100%;
   overflow-y: auto;
   width: 100%;
   -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
   scrollbar-width: none; /* Hide scrollbar in Firefox */
}

.registro-vaco .container-overlap-group-side::-webkit-scrollbar {
   display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}

/* Hide scrollbar on desktop screens (min-width: 768px) */
/* @media screen and (min-width: 768px) {
   .registro-vaco .container-overlap-group-side {
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
   }
   .registro-vaco .container-overlap-group-side::-webkit-scrollbar {
      display: none;
   }
} */

/* Optional: Style scrollbar for mobile if needed (e.g., below 768px) */
/* @media screen and (max-width: 767px) {
   .registro-vaco .container-overlap-group-side {
      overflow-y: auto;
   }
}
 */

.registro-vaco .container-2 {
   /* display: flex;
   flex-direction: column;
   width: 440px;
   align-items: flex-start;
   gap: 24px;
   position: relative;
   flex: 0 0 auto; */

   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: flex-start;
   gap: 24px;
   position: relative;
   flex: 0 0 auto;
   justify-content: center;
   max-width: 94%;
}

.registro-vaco .container-2-re {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: flex-start;
   gap: 24px;
   position: relative;
   flex: 0 0 auto;
   justify-content: center;
   max-width: 53%;
}

.registro-vaco .title {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 16px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.registro-vaco .text-wrapper {
   position: relative;
   align-self: stretch;
   margin-top: -1px;
   font-family: var(--heading-h2-large-32-bold-font-family);
   font-weight: var(--heading-h2-large-32-bold-font-weight);
   color: var(--lightfonts-900);
   font-size: var(--heading-h2-large-32-bold-font-size);
   letter-spacing: var(--heading-h2-large-32-bold-letter-spacing);
   line-height: var(--heading-h2-large-32-bold-line-height);
   font-style: var(--heading-h2-large-32-bold-font-style);
}

.registro-vaco .p {
   position: relative;
   align-self: stretch;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-300);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.registro-vaco .container-3 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.registro-vaco .container-3-re {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.registro-vaco .form {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.registro-vaco .input {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.registro-vaco .text-wrapper-2 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-300);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-regular-font-style);
}

.registro-vaco .input-2 {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 16px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
   background-color: var(--lightsurface-100);
   border-radius: 12px;
}

.registro-vaco .img {
   position: relative;
   width: 20px;
   height: 20px;
}

.registro-vaco .div-wrapper {
   display: flex;
   align-items: center;
   gap: 16px;
   position: relative;
   flex: 1;
   flex-grow: 1;
}

.registro-vaco .css-input-from {
   background: transparent; /* Ensure no background conflicts */
   border: none; /* Remove default input border */
   outline: none; /* Remove default focus outline */
   width: 100%; /* Ensure it takes full width within flex */
   padding: 0; /* Remove extra padding from input */

   color: var(--lightfonts-500);
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.registro-vaco .css-input-from::placeholder {
   color: var(--lightfonts-300); /* Match the text color */
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.registro-vaco .css-input-from:focus {
   outline: none; /* Remove default focus outline */
   border: none; /* Ensure no border */
}

.registro-vaco .css-input-select-from {
   flex: 1; /* Allow the select to grow and fill available space */
   margin-top: -1px;
   color: var(--lightfonts-200);
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
   background: transparent; /* Remove default background */
   border: none; /* Remove default border */
   outline: none; /* Remove default outline */
   width: 100%; /* Ensure it takes full width within flex */
   padding: 0; /* Remove extra padding */
   appearance: none; /* Remove default dropdown arrow in Webkit browsers */
   -webkit-appearance: none; /* For Safari */
   -moz-appearance: none; /* For Firefox */
   background-image: url("../image/icons-lucide-chevron-down.svg"); /* Custom arrow */
   background-repeat: no-repeat;
   background-position: right 8px center; /* Position the arrow */
   cursor: pointer; /* Indicate interactivity */
}

/* Optional: Style the selected option text */
.registro-vaco .css-input-select-from option {
   color: var(--lightfonts-200);
   font-family: var(--body-large-16-regular-font-family);
   font-size: var(--body-large-16-regular-font-size);
}

/* Optional: Style the dropdown when focused */
.registro-vaco .css-input-select-from:focus {
   outline: none; /* Remove default focus outline */
}

.registro-vaco .text-wrapper-3 {
   position: relative;
   flex: 1;
   margin-top: -1px;

   color: var(--lightfonts-200);
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.registro-vaco .text-wrapper-4 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-200);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-regular-font-style);
}

.registro-vaco .actions {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
   padding: 16px 0px 0px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.registro-vaco .actions-re {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 16px 0px 0px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
   justify-content: center;
}

.registro-vaco .button {
   all: unset;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px 24px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
   background-color: var(--lightprimaryyellow-100);
   border-radius: 64px;
   color: var(--lightfonts-200);
}

.registro-vaco .btn-registro-activado {
   background-color: var(--lightprimaryyellow-500);
   color: var(--lightfonts-500);
   cursor: pointer;
}

.registro-vaco .btn-re-activado {
   background-color: var(--lightprimaryyellow-500);
   color: var(--lightfonts-500);
   cursor: pointer;
   width: 100%;
   max-width: 210px;
}

.active-error {
   border: 1px solid red !important;
}

.registro-vaco .nombre-error-active {
   border: none;
}

.registro-vaco .apellido-error-active {
   border: none;
}

.registro-vaco .prefijo-error-active {
   border: none;
}

.registro-vaco .depto-error-active {
   border: none;
}

.registro-vaco .documento-error-active {
   border: none;
}

.registro-vaco .correo-error-active {
   border: none;
}

.registro-vaco .correo-confirmacion-error-active {
   border: none;
}

.registro-vaco .telefono-error-active {
   border: none;
}

.registro-vaco .marca-error-active {
   border: none;
}

.registro-vaco .modelo-error-active {
   border: none;
}

.registro-vaco .placa-error-active {
   border: none;
}

.registro-vaco .ano-error-active {
   border: none;
}

.registro-vaco .container-4 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   position: relative;
   /* flex: 0 0 auto; */
}

.registro-vaco .text-wrapper-5 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-medium-font-family);
   font-weight: var(--body-large-16-medium-font-weight);
   /* color: var(--lightfonts-200); */
   font-size: var(--body-large-16-medium-font-size);
   text-align: center;
   letter-spacing: var(--body-large-16-medium-letter-spacing);
   line-height: var(--body-large-16-medium-line-height);
   white-space: normal;
   font-style: var(--body-large-16-medium-font-style);
}

.registro-vaco .link {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;

   margin-bottom: 20px;
}

.registro-vaco .text-wrapper-6 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-400);
   font-size: var(--body-large-16-regular-font-size);
   text-align: center;
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-regular-font-style);
}

.registro-vaco .text-wrapper-7 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-medium-font-family);
   font-weight: var(--body-large-16-medium-font-weight);
   color: var(--lightprimaryyellow-500);
   font-size: var(--body-large-16-medium-font-size);
   text-align: center;
   letter-spacing: var(--body-large-16-medium-letter-spacing);
   line-height: var(--body-large-16-medium-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-medium-font-style);
}

.registro-vaco .back {
   width: 100%;
   padding-top: 25px;
   /* padding-bottom: 25px; */
   padding-left: 10px;
   padding-right: 10px;
   /* height: 152px; */
}

.registro-vaco .container-form {
   width: 100%;
   /* margin-top: 80px; */

   background-color: var(--lightwhitewhite);
}

.registro-vaco .container-form-title-banner {
   background-color: var(--lightwhitewhite);

   /* height: 100vh; */
   display: flex;
   border-top-left-radius: 40px;
   border-top-right-radius: 40px;
}

.registro-vaco .container-form-title-banner-registro-existoso {
   background-color: var(--lightwhitewhite);

   /* height: 100vh; */
   display: flex;
   border-top-left-radius: 40px;
   border-top-right-radius: 40px;
}

.registro-vaco .banner-container {
   height: 100px;
   background-color: var(--lightsurface-700);
   display: none;
}

.registro-vaco .container-form-center {
   justify-content: center;
   display: flex;
   width: 100%;
   background-color: var(--lightwhitewhite);

   background-color: var(--lightwhitewhite);
   border-top-left-radius: 40px;
   border-top-right-radius: 40px;
   padding: 0px 16px;
   padding-top: 32px;
}

.registro-vaco .container-form-center-re {
   justify-content: center;
   display: flex;
   width: 100%;
   background-color: var(--lightwhitewhite);

   background-color: var(--lightwhitewhite);
   border-top-left-radius: 40px;
   border-top-right-radius: 40px;
   padding: 0px 16px;
   padding-top: 32px;

   height: 100%;
}

.registro-vaco .container-5 {
   width: 100%;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   position: relative;
   flex: 0 0 auto;
}

.registro-vaco .icons-lucide-chevron-wrapper {
   display: flex;
   flex-direction: column;
   width: 48px;
   height: 48px;
   align-items: center;
   justify-content: center;
   padding: 8px;
   position: relative;
   background-color: var(--lightwhitewhite);
   border-radius: 64px;
}

.registro-vaco .icons-lucide-chevron {
   position: relative;
   width: 24px;
   height: 24px;
}

.registro-vaco .text-wrapper-8 {
   position: relative;
   width: fit-content;
   font-family: var(--body-large-16-medium-font-family);
   font-weight: var(--body-large-16-medium-font-weight);
   color: var(--lightfonts-500);
   font-size: var(--body-large-16-medium-font-size);
   letter-spacing: var(--body-large-16-medium-letter-spacing);
   line-height: var(--body-large-16-medium-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-medium-font-style);
}

.registro-vaco .side {
   width: 100%;
   /* max-width: 480px; */
   height: 100vh;

   background-color: var(--lightsurface-700);
}

.registro-vaco .overlap-group {
   width: 100%;
   max-width: 100%;
   height: 100%;

   padding: 25px;

   /* width: 100%;
   max-width: 480px;
   height: 100%; */
   /* height: 232px; */
   /* position: absolute;
   top: 854px;
   left: 24px; */

   background-image: url("/image/ellipse_1.png");
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: 100%;
}

.registro-vaco .ellipse {
   /* width: 264px;
   height: 232px;
   left: 216px;
   border-radius: 132px/116px;
   position: absolute;
    background-color: var(--lightprimaryyellow-500);
   filter: blur(100px);
   opacity: 0.5; */

   width: 264px;
   height: 160px;
   left: 216px;
   border-radius: 132px/116px;
   position: absolute;
   top: 100%;
   background-color: var(--lightprimaryyellow-500);
   filter: blur(100px);
   opacity: 0.5;
   display: none;
}

.registro-vaco .text {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: flex-start;
   gap: 24px;
   max-width: 432px;

   /* position: absolute;
   top: 2px;
   left: 0; */
}

.registro-vaco .heading {
   display: flex;
   align-items: center;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.registro-vaco .text-wrapper-9 {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--heading-h3-large-24-bold-font-family);
   font-weight: var(--heading-h3-large-24-bold-font-weight);
   color: var(--lightwhitewhite);
   font-size: var(--heading-h3-large-24-bold-font-size);
   letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
   line-height: var(--heading-h3-large-24-bold-line-height);
   font-style: var(--heading-h3-large-24-bold-font-style);
}

.registro-vaco .description {
   display: flex;
   align-items: center;
   gap: 8px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.registro-vaco .text-wrapper-10 {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightwhitewhite);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.registro-vaco .overlap-group-2 {
   width: 100%;
   /* max-width: 256px; */
   height: 152px;
   /* position: absolute;
   top: -8px;
   left: -40px; */
   background-color: var(--lightsurface-700);
}

.registro-vaco .ellipse-2 {
   /* width: 164px;
   height: 152px;
   left: 0;
   border-radius: 82px/76px;
   position: absolute;
   top: 0;
   background-color: var(--lightprimaryyellow-500);
   filter: blur(100px);
   opacity: 0.5; */

   width: 164px;
   height: 152px;
   left: -40px;
   border-radius: 82px/76px;
   position: absolute;
   top: -50px;
   background-color: var(--lightprimaryyellow-500);
   filter: blur(100px);
   opacity: 0.7;
}

.registro-vaco .ellipse-3 {
   width: 67px;
   height: 50px;
   left: 0px;
   position: absolute;
   top: 0px;
   background-color: var(--lightprimaryyellow-500);
   filter: blur(100px);
   opacity: 0.7;
}

.registro-vaco .ellipse-4 {
   width: 134px;
   height: 50px;
   position: absolute;
   top: 0px;
   background-color: var(--lightprimaryyellow-500);
   filter: blur(100px);
   opacity: 0.7;
   right: 0px;
}

.registro-vaco .MEASISTO-color {
   position: absolute;
   width: 192px;
   height: 32px;
   top: 40px;
   left: 24px;
   object-fit: cover;
}

.registro-vaco .img-banner {
   width: 100%;
   height: 100%;
   object-fit: contain;
   max-width: 192px;
   text-align: center;
}

.registro-vaco .overlap-2 {
   width: 100%;
   /* width: 336px; */
   height: 515px;
   padding: 25px;
   /* position: absolute;
   top: 280px;
   left: 120px; */

   width: 100%;
   height: 515px;
   padding: 25px;
   /* display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch; */
}

.registro-vaco .home-variacion-de {
   /* width: 100%;
    width: 238px;
   height: 500px;
   top: 0;
   left: 0;
   position: absolute;
   object-fit: contain; */

   width: 100%;
   /* width: 238px; */
   height: 500px;
   object-fit: contain;
   background-image: url("../image/img-registro-v2.png");
   background-repeat: no-repeat;
   background-position: top center;
   background-size: contain;
}

.registro-vaco .progress {
   position: absolute;
   width: 200px;
   height: 74px;
   top: 382px;
   left: 136px;
   object-fit: cover;
}

.registro-vaco .card-map {
   position: absolute;
   width: 52px;
   height: 56px;
   top: 416px;
   left: 60px;
   object-fit: cover;
}

.registro-vaco .css-input-select-from {
   width: 100%; /* Ensure the original select takes full width */
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background: transparent;
   border: none;
   outline: none;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-200);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
   padding: 0;
   cursor: pointer;
}

/* Style the Select2 container */
.registro-vaco .input-2 .select2-container {
   width: 100% !important; /* Override Select2's default width */
   box-sizing: border-box;
}

.registro-vaco .input-2 .select2-selection {
   background-color: var(--lightsurface-100) !important;
   border: none !important;
   border-radius: 12px !important;
   height: 100%; /* Match the container height */
   display: flex !important;
   align-items: center !important;
   /* padding: 0 16px !important;  */ /* Match padding */
   font-family: var(--body-large-16-regular-font-family) !important;
   font-weight: var(--body-large-16-regular-font-weight) !important;
   color: var(--lightfonts-200) !important;
   font-size: var(--body-large-16-regular-font-size) !important;
   letter-spacing: var(--body-large-16-regular-letter-spacing) !important;
   line-height: var(--body-large-16-regular-line-height) !important;
   font-style: var(--body-large-16-regular-font-style) !important;
   outline: none !important;
   min-height: 28px; /* Ensure minimum height matches input-2 */
}

/* Style the selected text to wrap if too long */
.registro-vaco .input-2 .select2-selection__rendered {
   padding: 0 !important; /* Remove extra padding inside */
   line-height: inherit !important; /* Match line height */
   white-space: normal !important; /* Allow text to wrap */
   word-break: break-word !important; /* Break long words to next line */
   overflow: hidden !important; /* Hide overflow beyond container */
   text-overflow: ellipsis !important; /* Show ellipsis if still too long */
   max-width: 100% !important; /* Respect container width */
}

/* Hide default arrow, use custom if needed */
.registro-vaco .input-2 .select2-selection__arrow {
   display: none !important;
}

/* Style the dropdown */
.registro-vaco .input-2 .select2-dropdown {
   background-color: var(--lightsurface-100) !important;
   border: none !important;
   border-radius: 12px !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.registro-vaco .input-2 .select2-results__option {
   color: var(--lightfonts-200) !important;
   font-family: var(--body-large-16-regular-font-family) !important;
   font-size: var(--body-large-16-regular-font-size) !important;
   padding: 8px 16px !important;
}

.registro-vaco .input-2 .select2-results__option--highlighted {
   background-color: var(--lightprimaryyellow-100) !important;
   color: var(--lightfonts-200) !important;
}

/* Optional: Placeholder style */
.registro-vaco .input-2 .select2-selection__placeholder {
   color: var(--lightfonts-200) !important;
}

@media (max-width: 958px) {
   .registro-vaco .overlap-2 {
      height: calc(100% - 50%);
   }
}

@media (max-width: 850px) {
   .registro-vaco .overlap-2 {
      height: calc(100% - 52%);
   }
}

@media (max-width: 767px) {
   .registro-vaco .remove-horizontal-banner {
      display: none;
   }

   .registro-vaco .heading_title_form {
      font-family: var(--heading-h2-mobile-24-bold-font-family);
      font-weight: var(--heading-h2-mobile-24-bold-font-weight);
      font-size: var(--heading-h2-mobile-24-bold-font-size);
      letter-spacing: var(--heading-h2-mobile-24-bold-letter-spacing);
      line-height: var(--heading-h2-mobile-24-bold-line-height);
      font-style: var(--heading-h2-mobile-24-bold-font-style);
   }

   .registro-vaco .body_title_form {
      font-family: var(--body-small-14-regular-font-family);
      font-weight: var(--body-small-14-regular-font-weight);
      font-size: var(--body-small-14-regular-font-size);
      letter-spacing: var(--body-small-14-regular-letter-spacing);
      line-height: var(--body-small-14-regular-line-height);
      font-style: var(--body-small-14-regular-font-style);
   }

   .registro-vaco .title_label_from {
      font-family: var(--body-small-14-regular-font-family);
      font-weight: var(--body-small-14-regular-font-weight);
      font-size: var(--body-small-14-regular-font-size);
      letter-spacing: var(--body-small-14-regular-letter-spacing);
      line-height: var(--body-small-14-regular-line-height);
      font-style: var(--body-small-14-regular-font-style);
   }

   .registro-vaco .button_title_form {
      font-family: var(--body-small-14-regular-font-family);
      font-weight: var(--body-small-14-regular-font-weight);
      font-size: var(--body-small-14-regular-font-size);
      letter-spacing: var(--body-small-14-regular-letter-spacing);
      line-height: var(--body-small-14-regular-line-height);
      font-style: var(--body-small-14-regular-font-style);
   }

   .registro-vaco .css-input-from {
      background: transparent;
      border: none;
      outline: none;
      width: 100%;
      padding: 0;

      color: var(--lightfonts-500);
      font-family: var(--body-small-14-regular-font-family);
      font-weight: var(--body-small-14-regular-font-weight);
      font-size: var(--body-small-14-regular-font-size);
      letter-spacing: var(--body-small-14-regular-letter-spacing);
      line-height: var(--body-small-14-regular-line-height);
      font-style: var(--body-small-14-regular-font-style);
   }

   .registro-vaco .css-input-from::placeholder {
      color: var(--lightfonts-300);
      font-family: var(--body-small-14-regular-font-family);
      font-weight: var(--body-small-14-regular-font-weight);
      font-size: var(--body-small-14-regular-font-size);
      letter-spacing: var(--body-small-14-regular-letter-spacing);
      line-height: var(--body-small-14-regular-line-height);
      font-style: var(--body-small-14-regular-font-style);
   }

   .registro-vaco .css-input-from:focus {
      outline: none;
      border: none;
   }

   .registro-vaco .back {
      display: none;
   }

   .registro-vaco .overlap {
      background-color: var(--lightsurface-700);
   }

   .registro-vaco .container-form {
      width: 100%;

      background-color: var(--lightsurface-700);
   }

   .registro-vaco .banner-container {
      display: flex;
      justify-content: center;
      /*  background-image: url("/image/ellipse_banner_top_2.svg");
      background-repeat: no-repeat;
      background-position: left;
      background-size: 100%; */
   }

   .registro-vaco .container-form-title-banner {
      /* height: calc(100vh - 100px); */
   }

   .registro-vaco .css-input-select-from {
      color: var(--lightfonts-500);
      font-family: var(--body-small-14-regular-font-family);
      font-weight: var(--body-small-14-regular-font-weight);
      font-size: var(--body-small-14-regular-font-size);
      letter-spacing: var(--body-small-14-regular-letter-spacing);
      line-height: var(--body-small-14-regular-line-height);
      font-style: var(--body-small-14-regular-font-style);
   }

   /* Optional: Style the selected option text */
   .registro-vaco .css-input-select-from option {
      font-family: var(--body-small-14-regular-font-family);
      font-weight: var(--body-small-14-regular-font-weight);
      font-size: var(--body-small-14-regular-font-size);
      letter-spacing: var(--body-small-14-regular-letter-spacing);
      line-height: var(--body-small-14-regular-line-height);
      font-style: var(--body-small-14-regular-font-style);
   }

   .registro-vaco .css-input-select-from {
      width: 100%; /* Ensure the original select takes full width */
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: transparent;
      border: none;
      outline: none;
      color: var(--lightfonts-500);

      font-family: var(--body-small-14-regular-font-family);
      font-weight: var(--body-small-14-regular-font-weight);
      font-size: var(--body-small-14-regular-font-size);
      letter-spacing: var(--body-small-14-regular-letter-spacing);
      line-height: var(--body-small-14-regular-line-height);
      font-style: var(--body-small-14-regular-font-style);
      padding: 0;
      cursor: pointer;
   }

   .registro-vaco .input-2 .select2-selection {
      background-color: var(--lightsurface-100) !important;
      border: none !important;
      border-radius: 12px !important;
      height: 100%; /* Match the container height */
      display: flex !important;
      align-items: center !important;
      /* padding: 0 16px !important;  */ /* Match padding */
      color: var(--lightfonts-500) !important;
      font-family: var(--body-small-14-regular-font-family);
      font-weight: var(--body-small-14-regular-font-weight);
      font-size: var(--body-small-14-regular-font-size);
      letter-spacing: var(--body-small-14-regular-letter-spacing);
      line-height: var(--body-small-14-regular-line-height);
      font-style: var(--body-small-14-regular-font-style);
      outline: none !important;
      min-height: 28px; /* Ensure minimum height matches input-2 */
   }

   .registro-vaco .input-2 .select2-results__option {
      color: var(--lightfonts-500) !important;

      font-family: var(--body-small-14-regular-font-family);
      font-weight: var(--body-small-14-regular-font-weight) !important;
      font-size: var(--body-small-14-regular-font-size);
      letter-spacing: var(--body-small-14-regular-letter-spacing);
      line-height: var(--body-small-14-regular-line-height);
      font-style: var(--body-small-14-regular-font-style);

      font-family: var(--body-small-14-regular-font-family) !important;
      font-size: var(--body-small-14-regular-font-size) !important;
      padding: 8px 16px !important;
   }

   .registro-vaco .quitar_padding_cols_inputs_mobiles {
      padding: 0 !important; /* Remove padding for mobile inputs */

      margin-bottom: 11px;
   }

   .registro-vaco .container-re {
      width: 100%;
      height: calc(100vh - 100px);
   }

   .registro-vaco .container-2-re {
      max-width: 100%;
   }
}

/* @media (max-height: 950px) {
   .registro-vaco .overlap-group {
      height: 100%;
   }
} */