

body{
  font-weight: 100;
}

/* Variables */
:root {
	--size: 0.3rem;
	--main-bg-color: #3B4783;; /* #1AAEE2;*/
	--secondary-bg-color: #101143;
	
	--wizard-mainColor: #8B939E;
	--wizard-unw-completeColor: #C0C3C9;
  --wizard-baseColor: #fff;

  --slider-mainColor: #3ccc;
  --slider-bg-color: rgba(103, 192, 103, 0.75);    

  --main-font: 'Myriad Pro';
  --main-font-url: 'https://alternativaoportuna.apoyo24.com/wp-content/themes/sierra/myriadpro-regular.otf';
}

.nav-item {
    text-align: right !important;
}

.custom-bg-info{
	background-color: var(--main-bg-color) !important;
}

.bg-light-blue{
  background-color : #4C63F5;
}


.custom-bg-secondary{
	background-color: var(--secondary-bg-color) !important;
}

.radius-bottom-none{
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}

.square-btn {
	border-radius: 0 !important;
}

.stepbefore-btn {
	background-color: #C9CCD4 !important;
}

.header-baner{
	background-image : url('../img/banner-simulador.png');
	/* background-position: center center;	*/
  background-size:  cover; 
}


.under-line-title {
	border-bottom: 10px solid var(--main-bg-color) !important;
}
.custom-panel-wraper{
  border:1px solid #cccccc;
	/* border: 2px solid var(--main-bg-color) !important;*/
	border-radius: 15px !important;
}

.card-min{
	min-height: 280px !important;
}

.app-select{
	width: 100%;
}
/* --- CUSTO SELECT ---*/

.select:focus{
    outline: none;
}

.select {
	/* safari */
	-webkit-appearance: none !important;
	-moz-appearance:    none !important;
	appearance:         none !important;

	/* other styles for aesthetics */
	width: 100% !important;
	font-size: 1.25rem !important;
	padding: 0.1em 6em 0.375em 1em !important;
	background-color: var(--secondary-bg-color) !important;
	/* border: 1px solid #caced1 !important;*/
	border: 1px solid  var(--secondary-bg-color) !important;
	border-radius: 0.25rem !important;
	color: #fff !important;
	cursor: pointer !important;
}

.custom-select {
	min-width: 350px;
	position: relative;
}

.custom-select label{
	padding: 0em 6em 0em 1em !important;
}

.custom-select::before,
.custom-select::after {
  --size: 0.8rem;
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}

.custom-select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid #fff;
  top: 30%;
}

.custom-select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid #fff;
  top: 55%;
}



/*-- CUSTOM INPUT --*/
.unbordered-control {
	border: none !important;
}
.unbordered-control:focus {
	border: none !important;
}


/* --- WIZARD --- */

.wizard-tooltip-title { 
	color: #fff;
	border-radius: 0 10px 10px 0;
	position:relative;
    background-color: var(--main-bg-color);
    min-height: 50px !important;
    width:100% !important;
	min-padding: 3px;
	filter: drop-shadow(0 3px 5px #ccc);
}

.wizard-tooltip-title:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 20%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 40px var(--main-bg-color);
    border-left: solid 30px transparent;
    border-right: solid 30px transparent;
	border-radius: 0 0 10px 10px;
}

/* Limpiar el  "box-sizing: border-box" de boostrap */
.wizard-progress * {
    box-sizing: content-box !important;
}


/* Estilos del wizard-progress */
.wizard-progress {
    display: table;
    width: 100%;
    table-layout: fixed;
    position: relative;
}

/* Estilos del paso */
.wizard-progress .w-step {
    display: table-cell;
    text-align: center;
    vertical-align: top;
    overflow: visible;
    position: relative;
    font-size: 14px;
    color: var(--wizard-baseColor);
    font-weight: bold;
}

/* Línea de progreso */
.wizard-progress .w-step:not(:last-child)::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 37px;
    background-color: var(--wizard-unw-completeColor);
    height: 6px;
    width: 100%;
}

/* Nodo del paso */
.wizard-progress .w-step .w-node {
	cursor: pointer;
    display: inline-block;
    border: 2px solid var(--wizard-baseColor);
    background-color: var(--wizard-baseColor);
    border-radius: 18px;
    height: 18px;
    width: 18px;
    position: absolute;
    top: 29px;
    left: 50%;
    margin-left: -18px;
	border-color: var(--wizard-mainColor);
	filter: drop-shadow(0 3px 5px #ccc);
}

/* Nodo actual */
.wizard-progress .w-step.in-progress .w-node {
    border: 4px solid #fff;
	background:  var(--main-bg-color);
	
	top: 22px;
	height: 28px;
    width: 28px; 
	font-size: 20px;
}

/* Estilos para paso completo */
.wizard-progress .w-step.w-complete::before {
    background-color: var(--wizard-mainColor);
}

/* wizard tooltip */
.wizard-progress .w-step.in-progress .tooltip-one {
  padding: 4px 8px;
  background: var(--main-bg-color);
  position: relative;
  min-width: 90px;
  max-width: 90px;
  border-radius: 5px;
  text-align: center;
  filter: drop-shadow(0 3px 5px #ccc);
  line-height: 1.5;
  z-index: 100;
}

.wizard-progress .w-step.in-progress .tooltip-one:after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
  width: 9px;
  height: 9px;
  background: var(--main-bg-color);
  transform: rotate(45deg);
}

.w-step-description{
	text-align: center;
	color: #0C0B0B;
	display: block;
    position: absolute;
    left: 35%;
    top: 60px;
}




/* --- SLIDER ---*/
.range {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 auto; 
  width: 100%;
  padding: 0px 10px;
}
.range-input {
  -webkit-appearance: none;
  appearance: none; 
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 12px;
  background: #ccc;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  height: 24px;
  width: 24px;
  background-color: #fff;
  border-radius: 50%;
  transition: .2s ease-in-out;
  border: 2px solid var(--slider-bg-color);
}

.range-input::-moz-range-thumb {
  height: 15px;
  width: 15px;
   background-color: #fff;
  border-radius: 50%;
  border: 2px solid var(--slider-bg-color);
  transition: .2s ease-in-out;
}


.container-circle {
	width:100%;
	background-color: var(--wizard-unw-completeColor);
	border-radius: 25px;
	display: inline-block;
	padding-right: 2px;
}


/* Estilos del círculo */
.circle {
	width: 40px; /* Ancho del círculo */
	height: 40px; /* Altura del círculo */
	background-color: var(--main-bg-color); 
	border-radius: 50%; 
	display: inline-flex; /* Mostrar como elemento en línea */
	align-items: center; /* Alinear contenido verticalmente */
	justify-content: center; /* Alinear contenido horizontalmente */
	color: #fff; /* Color del texto */
	font-size: 18px; /* Tamaño del texto */
	margin-right: 10px; /* Margen a la derecha */
}

/* Estilos del texto */
.text-inline {
	display: inline-block; /* Mostrar como elemento en línea */
	vertical-align: middle; /* Alinear verticalmente */
	font-size: 18px; /* Tamaño del texto */
}

.bg-logo-icons{
	background: #BFC3F7 !important;
	background-image : url('../img/bg-logo.png') !important;
	background-repeat: repeat-x;
	background-size: auto 100%;
}

.radius-20{
	border-radius: 20px !important;
}
.custom-table-min th, td{
	padding: 4px !important;
}
.custom-table-min th{
	background-color: var(--wizard-unw-completeColor) !important;
}
.custom-table-min thead{
	border-bottom: 3px solid black;
}

.bg-blue{
	background-color:  #121328 !important;
}
.secondary-bg-color{
	background-color: var(--secondary-bg-color) !important;
}

.secondary-text-color{
	color: var(--secondary-bg-color) !important;
}

.bg-gray-color-1{
	background-color: #EEEEEE;
}



/* SLIDER ARRENDAMIENTO */

#range-datalist {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
/*
#rangeoptions{
	width: 100%;
}*/

/* range 2 */
#range1.is-invalid {
  border: 1px solid var(--bs-form-invalid-border-color) !important;
}

#range1 {
  -webkit-appearance: none;
  appearance: none; 
  width: 100%;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 16px;
}

#range1::-webkit-slider-runnable-track {
  height: 15px;
  background: #ccc;
  border-radius: 16px;
}

#range1::-moz-range-track {
  height: 15px;
  background: #ccc;
  border-radius: 16px;
}

#range1::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid var(--secondary-bg-color);
  box-shadow: -407px 0 0 400px var(--secondary-bg-color);
}

#range1::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #f50;
  box-shadow: -407px 0 0 400px var(--secondary-bg-color);
}



/** Nuevos estilos **/

.amount-box {
  background: #F5F5F5;
  border: 2px solid #13216B;
  border-radius: 15px 15px 0 0;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.btn-success {
  font-size: 13px;
  color: rgba(103, 192, 103, 0.75);
  letter-spacing: 1px !important;
  line-height: 20px !important;
  border: 2px solid rgba(103, 192, 103, 0.75);
  border-radius: 40px !important;
  transition: all 0.3s ease 0s !important;
}

.border-main {
  border: 1px solid #13216B !important;
}

.main-color{
  color: #13216B !important;
}
.main-weight{
  font-weight: 100 !important;
}


hr{
  opacity: .1 !important;
}

.divbtn{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.divbtn:hover{
  box-shadow: rgba(19, 33, 107, 0.24) 0px 3px 8px;
  /*color: rebeccapurple;*/
  background: #F5F5F5;
}

.no-line-height{
 line-height: .5 !important;
}


/* MATERIALIZE CUSTOM */
/* label focus color */
/*
.input-field input:focus + label {
  color:  var(--main-bg-color) !important;
}
.row .input-field input:focus {
  border-bottom: 1px solid var(--main-bg-color) !important;
  box-shadow: 0 1px 0 0 var(--main-bg-color) !important
}*/


/* Change boostrap icon validation */
.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 363.025 363.024' style='enable-background:new 0 0 363.025 363.024;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath style='fill:%2328a745;' d='M181.512,363.024C81.43,363.024,0,281.601,0,181.513C0,81.424,81.43,0,181.512,0 c100.083,0,181.513,81.424,181.513,181.513C363.025,281.601,281.595,363.024,181.512,363.024z M181.512,11.71 C87.88,11.71,11.71,87.886,11.71,181.513s76.17,169.802,169.802,169.802c93.633,0,169.803-76.175,169.803-169.802 S275.145,11.71,181.512,11.71z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpolygon style='fill:%2328a745;' points='147.957,258.935 83.068,194.046 91.348,185.767 147.957,242.375 271.171,119.166 279.451,127.445 '/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A") !important;
}


.color-white {
 color: #fff !important;
}

.form-select.is-invalid, .form-select.is-valid {
  padding-right: 2rem !important;
}

.bounce_in {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* transform-origin: top left;*/
}

.bounce_in:hover {
  -webkit-transform: scale3d(1.01, 1.01, 1.01);
  transform: scale3d(1.01);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 13px;
}

.bounce_button {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bounce_button:hover {
  -webkit-transform: scale3d(1.01, 1.01, 1.01);
  transform: scale3d(1.01);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 13px;
}