/* styles.css */
body {
}

/*
.form-step {
    display: none;
}

.form-step.active {
    display: block;
}*/


.iti{
    width: 100%;
}

.iti input{
    width: 100%;
}

.btn {
    margin-top: 15px;
}

.join{
	color: #008140;
}

.custom-input{
	background-color: white;
	border: 1px solid black; /* Sin borde */
    color: black; /* Color del texto */
    width: 100% !important;
}

.fw-bold{
	font-weight: bold
}

.btn-custom {
    background-color: #008140; /* Color verde */
    color: white; /* Color del texto */
    border-radius: 50px; /* Bordes redondeados */
    padding: 10px 30px; /* Espaciado interno */
    border: none; /* Sin borde */
    width: 100%; /* Ancho completo */
}



.progress-steps {
    display: flex;
    align-items: center;
}

.step {
	width: 22px;
    height: 2px;    
    background-color: #008140;
    position: relative;    
}

.step.completed {
     /* Color verde */
    height: 19px;
}

.step.initial {    
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

.step.final {    
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.step-circle{
	width: 12px;
    height: 12px;
    background-color: white; /* Color blanco */
    border-radius: 50%;
    border-width: 1px;
    border-color: #008140; 
    border-style: solid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.step.last-unselected{
	width: 10px;
}

.line {
    width: 10vw;
    height: 2px;
    background-color: #008140; /* Color más claro para los pasos incompletos */
}

.line.completed {
	height: 19px;
    background-color: #008140; /* Color para los pasos completados */
}


.splitter{
	border-width: 2px;
	background: black;
}


.option-box {
    cursor: pointer;
    transition: color 0.3s ease;
    transition: border-bottom-color 0.3s ease;
    border-top: none;
    border-right: none;
    border-left: none; 
    border-bottom: 1px solid black;
}

.option-box:hover {
    color: #888888;
    border-bottom-color: #888888; 
}



.form-check {
    padding: 0vw 1vw;
    display: flex;
    align-items: center; /* Alinear verticalmente el radio button con el texto */
}

.form-check-label {
    margin-left: 1vw;
}

.custom-checkbox {
	position: relative;
	appearance: none;
    accent-color: #008140; /* Elimina el color por defecto */
    width: 15px !important;
    height: 15px !important;
    min-width: 15px;
    border: 2px solid #008140; /* Borde verde por defecto */
    position: relative;
    border-radius: 50%;
    cursor: pointer;
    display: block;
}

.custom-checkbox:checked {
    background-color: #008140; /* Fondo verde cuando está seleccionado */
    border: none; /* Elimina el borde cuando está seleccionado */
}

.custom-checkbox:checked::after {
    content: '✓'; /* Agrega un chulo */
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}



.custom-combobox{
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: 1px solid black;
}

.custom-combobox option{
	border: none;
}

.custom-combobox::after{
	display: none;
}

.btn-success {
    background-color: #008140; /* Color verde */
    border-radius: 50px; /* Bordes redondeados */
    padding: 10px 30px; /* Espaciado interno */
    border: none; /* Sin borde */
}

.dropdown-toggle{
    appearance: none; /* Remueve la apariencia por defecto */
    -webkit-appearance: none; /* Remueve la apariencia por defecto en WebKit (Safari, Chrome) */
    background-color: transparent; /* Asegura que no haya fondo predeterminado */
    position: absolute;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid black;
    background: white;
    width: 95%;
    text-align: left;
}

.dropdown-toggle::after{
    all: initial;
	content: '';
    position: absolute;
    right: 10px; /* Ajusta la posición según sea necesario */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* No interfiere con clics */
    background-image: url('../img/down-arrow.png'); /* Ruta de la imagen */
    background-size: contain; /* Asegura que la imagen se ajuste */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    min-width: 18px; /* Ancho de la imagen */
    min-height: 18px; /* Alto de la imagen */
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: relative; /* Cambiado a relativo para empujar el contenido */
    top: 25px; /* Espacio entre el botón y el menú */
    border:none;
}

.dropdown-item {
    /*padding: 10px;*/
    border: none;
}
.dropdown-item{
    /*padding: 10px;*/
    border: none;
    cursor: pointer;
}
.dropdown-item:hover{
	color: #888888;
	background: white;
}

.dropdown-menu.show {
    display: block;
}



.btn-arrow{
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: black;
    border: none;
}


.btn-arrow::after{
    content: '';
    position: absolute;
    left: 8px; /* Ajusta la posición según sea necesario */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* No interfiere con clics */    
    background-size: contain; /* Asegura que la imagen se ajuste */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    min-width: 20px; /* Ancho de la imagen */
    min-height: 20px; /* Alto de la imagen */
}

.btn-arrow.left::after{
    background-image: url('../img/left-white.png'); /* Ruta de la imagen */
}

.btn-arrow.right::after{
    background-image: url('../img/right-white.png'); /* Ruta de la imagen */
}


.custom-digit{
    background-color: white;
    border: 1px solid black; /* Sin borde */
    text-align: center;
}