@import url('//fonts.googleapis.com/css?family=Montserrat');

.landing1{
	position: relative;
	width: 100%;
	height: 333px;
	left: 0px;
	top: 111px;
	align: center;
}

/* The Modal (background) */
.modal {
    position: fixed;
    display: none;
    z-index: 1;
    margin: auto;
    padding-top: 100px;
    width: 1240px;
    overflow: auto;
}

.modal #title{
 line-height: 34px;
 font-size: 34px;
 font-weight: bold;
} 
.modal #message{
  width: 97%;
  padding-top: 1em;
  text-align: justify!important;
  font-size: 14px!important;
  line-height: 17px;
}

.modal .titu2{  
  padding-top: .4em;
}

/* The Modal (background) */
.modalPropio {
	position: fixed!important;
	display: none; /* Hidden by default */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	width: 70%; /* Full width */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
}

/* The Close Button */
.close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}


/* The Close Button */
.close1 {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close1:hover,
.close1:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.contenedor{
    position: relative;
    display: inline-block;
    text-align: center;
}

.centrado{
    position: absolute;
     top: 50%;
    left: 27%;
    transform: translate(-50%, -50%);
    text-align: left;
    font-size: 3em;
    color: white;
    font-weight: 500;
    font-style: normal;
}

.rectangle{
	/* Rectangle 572 */
	position: absolute;
	width: 165px;
    height: 55px;
    left: 87px;
    top: 93px;

	/* azul principal */

	background: #1C4E8F;
}

.divMainRounded{
	width:100%;	
	border-radius: 20px;
	border: 1px solid  #9AA9B950;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
}

/*MENU CRUMBS */
.divMainCrumbs{
	width:100%;
	
	border-radius: 20px 20px 0px 0px;
	border: 1px solid  #9AA9B950;
}

.divIzquierdoActive {
    width: 33.3%;
    height: 50px;
    color: white;
    background: #9AA9B9;
    position: relative;
	border-radius: 20px 0px 0px 0px;
   border: 1px solid #9AA9B950;
	float:left;

}

.divIzquierdoActiveComplete {   
    width: 50%; 
    height: 50px;
    color: white;
    background: #9AA9B9;
    position: relative;
  border-radius: 20px 0px 0px 0px;
   border: 1px solid  #9AA9B950;
  float:left;
}

.lblCrumbActiveComplete{
  width: 100%; 
  font-size:18px!important;
  font-family:Montserrat;
  font-weight: 300;
    color: white!important; 
    text-align:center!important;
  position: relative!important;
  padding-top: .7em!important;
}

.divIzquierdoActiveComplete:after {
	position: absolute;
	top: 10px;
	right: -15px;
	width: 29px;
	height: 29px;
	border-left: solid 1px #9AA9B950;
	border-top: solid 1px #9AA9B950;
	transform: rotate(134deg) skewX(-10deg) skewY(-10deg);
	background: #9AA9B9;
	content: '';
	z-index: 1000
}

.divIzquierdoVisited {
    width: 50%;
    height: 50px;
    background: #E6EBF1;
    color: #4f4f4f;
    position: relative;
    border-bottom: : 1px solid #9AA9B950;
    border-radius: 20px 0px 0px 0px;
	float:left;
}
.divIzquierdoVisited:after {
 	position: absolute;
	top: 10px;
	right: -15px;
	width: 29px;
	height: 29px;
	border-left: solid 1px #9AA9B950;
	border-top: solid 1px #9AA9B950;
	transform: rotate(134deg) skewX(-10deg) skewY(-10deg);
	background: #E6EBF1;
	content: '';
	z-index: 1000
}

.divIzquierdo {
    width: 50%;
    height: 50px;
    background: white;
    color:#9AA9B9;
    position: relative;
    border-bottom: 1px solid  #9AA9B950;
    border-radius: 20px 0px 0px 0px;
	float:left;
}
.lblCrumb{
	font-family:Montserrat;
	font-size:18px!important;
	font-weight: 300;
    color: #9AA9B9!important; 
    text-align:center!important;
	position: relative!important;
	padding-top: .7em!important;
}

.lblCrumbActive{
	font-size:18px!important;
	font-family:Montserrat;
	font-weight: 300;
    color: white!important; 
    text-align:center!important;
	position: relative!important;
	padding-top: .7em!important;
}

.lblCrumbVisited{
	font-size:18px!important;
	font-family:Montserrat;
	font-weight: 300;
    color: E6EBF1!important; 
    text-align:center!important;
	position: relative!important;
	padding-top: .7em!important;
}

.divIzquierdo:after {
	position: absolute;
	top: 10px;
	right: -15px;
	width: 29px;
	height: 29px;
	border-left: solid 1px #9AA9B9;
	border-top: solid 1px #9AA9B9;
	transform: rotate(134deg) skewX(-10deg) skewY(-10deg);
	background: white;
	content: '';
	z-index: 1000
}


.divDerecha{
    width: 50%;
    height: 50px;
    background: white;
    color: #9AA9B9;
    position: relative;
	border-radius: 0px 20px 0px 0px;
	float:left;
	border-bottom: 1px solid  #9AA9B950;
}



/*.divDerecha .lblCrumb{
    color: #9AA9B9!important; 
    text-align:center!important;
  	position: relative!important;
  	padding-top: 2.5em!important;
}*/

.divDerechaActive{
    width: 50%;
    height: 50px;
    background: #9AA9B9;
    color: white;
    position: relative;
	border-radius: 0px 20px 0px 0px;
  border-bottom: 1px solid  #9AA9B950;
	float:left;
}

.divMedio {
    width: 33%;
    height: 50px;
    background: transparent;
    color: #9AA9B9!important;
    position: relative;
	float:left;
	border-bottom: 1px solid  #9AA9B950;

}

.divMedioVisited{
	width: 33%;
    height: 50px;
    background: #E6EBF1;
    color: #4f4f4f!important;
    position: relative;
	float:left;
	border-bottom: 1px solid  #9AA9B950;
}
.divMedioVisited:after {
	position: absolute;
	top: 10px;
	right: -15px;
	width: 29px;
	height: 29px;
	border-left: solid 1px #9AA9B950;
	border-top: solid 1px #9AA9B950;
	transform: rotate(134deg) skewX(-10deg) skewY(-10deg);
	background: #E6EBF1;
	content: '';
	z-index: 1000
} 



/*.divMedio .lblCrumb{
    color: #9AA9B9!important; 
    text-align: center!important;
  	position: relative!important;
  	padding-top: 2.5em!important;
}*/
.divMedio:after {
	position: absolute;
	top: 10px;
	right: -15px;
	width: 29px;
	height: 29px;
	border-left: solid 1px #9AA9B950;
	border-top: solid 1px #9AA9B950;
	transform: rotate(134deg) skewX(-10deg) skewY(-10deg);
	background: white;
	content: '';
	z-index: 1000
} 

.divMedioActive {
    width: 33%;
    height: 50px;
    background: #9AA9B9;
    color: white;
    position: relative;
		float:left;
}

.divMedioActive:after {
  	position: absolute;
	top: 10px;
	right: -15px;
	width: 29px;
	height: 29px;
	border-left: solid 1px #9AA9B950;
	border-top: solid 1px #9AA9B950;
	transform: rotate(134deg) skewX(-10deg) skewY(-10deg);
	background: #9AA9B9;
	content: '';
	z-index: 1000
} 


/* ELEMENTS FORMS*/
.btnQenta
{
    background: #8DC63F;
    border-radius: 4px;
    border-style: none;
    font-family: 'Montserrat'!important;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    height:45px;
    line-height: 20px;
    /* identical to box height */
    text-align: center;
    color: white;
    width: 300px;
    margin-bottom: 30px
}
.btnQenta:hover{
     background:#031342;
     color: white;
}

.labelForm{
	float:left;
	width:45%;	
	font-family: Montserrat;
	font-style: normal;
	font-weight: 300;
	font-size: 13px;
	line-height: 16px;	
	/* gris-texto */
	color: #4F4F4F;
}

.labelFormEnrollment{
	font-family: Montserrat;
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 20px;
	/* azul principal */
	color: #1C4E8F;
}

.contentForm{
    padding:0 1em; 
}




/*PROGRESS BAR*/
.progress-tracker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1em auto;
  padding: 0;
  list-style: none;
}

.progress-step {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
  margin: 0;
  padding: 0;
  min-width: 24px;
}

.progress-step:last-child {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

.progress-step:last-child .progress-marker::after {
  display: none;
}

.progress-link {
  display: block;
  position: relative;
}

.progress-marker {
  display: block;
  position: relative;
}

.progress-marker::before {
  content: attr(data-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 20;
  width: 80px;
  height: 80px;
  padding-bottom: 2px;
  border-radius: 50%;
  -webkit-transition: background-color, border-color;
  transition: background-color, border-color;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

.progress-marker::after {
  content: '';
  display: block;
  position: absolute;
  z-index: -10;
  top: 2.5em;
  right: -12px;
  width: 100%;
  height: 4px;
  -webkit-transition: background-color 0.3s, background-position 0.3s;
  transition: background-color 0.3s, background-position 0.3s;
}

.progress-text {
  display: block;
  margin-top: 1.5em;
  padding: 8px 8px;
  overflow: hidden;
  color:#E6EBF1;
  text-overflow: ellipsis;
}

.progress-title {
  margin-top: 0;
}

.progress-step .progress-marker {
  color: #fff;
  font-size: 25px;
}

.progress-step .progress-marker::before {
  background-color: white;
  border:1px solid #E6EBF1;
  color: #E6EBF1;
  top:.8em ;
}

.progress-step .progress-marker::after {
  background-color: #E6EBF1;
  
}

.progress-step .progress-text {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 20px;
	/* or 111% */

	text-align: center;
 	color: #9AA9B9;
}

.progress-step.is-complete .progress-text,.progress-step.is-complete-last .progress-text {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 20px;
	/* or 111% */

	text-align: center;
	color: #4f4f4f;
}

.progress-step.is-active .progress-text {
 	font-family: Montserrat;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 20px;
	/* or 111% */

	text-align: center;

	/* azul principal */

	color: #1C4E8F;
}

/*MARGIN STYLE*/
.padding-tb-0_5{
	margin: .5em 0em;
}
.padding-tb-1{
	margin: 1em 0em;
}

.padding-tb-2{
	margin: 2em 0em;
}

/*COMPLETE ITEM*/
.progress-step.is-complete .progress-marker::before,.progress-step.is-progress .progress-marker::before{
  background-color: #7DCBE0;
  border-color: #7DCBE0;
}
/*COMPLETE ITEM LINE AFTER*/
.progress-step.is-complete .progress-marker::after,.progress-step.is-progress .progress-marker::after{
    background-color: #7DCBE0;
}

/*COMPLETE ITEM PREVIOUS TO ACTIVE ITEM*/
.progress-step.is-complete-last .progress-marker::before,.progress-step.is-progress .progress-marker::before{
  background-color: #7DCBE0;
  border-color: #7DCBE0;
}
/*COMPLETE ITEM PREVIOUS TO ACTIVE ITEM LINE AFTER*/
.progress-step.is-complete-last .progress-marker::after,.progress-step.is-progress .progress-marker::after{
    background-color: #1C4E8F;
}

/*ACTIVE ITEM*/
.progress-step.is-active .progress-marker::before {
   background-color:#1C4E8F!important ;
   border-color: #1C4E8F!important; 
}

/*ACTIVE LINE AFTER*/
.progress-step.is-active .progress-marker::after {
  /*background-color: #1C4E8F;*/
}

/*HOVER PROPERTIES*/

/*.progress-step:hover .progress-marker::before {
  background-color: gray;
}

.progress-step.is-active:hover .progress-marker::before {
  background-color: #1C4E8F;
}

.progress-step.is-complete:hover .progress-marker::before {
  background-color: #7DCBE0;
}*/



.progress-tracker--text .progress-step:last-child, .progress-tracker--center .progress-step:last-child, .progress-tracker--right .progress-step:last-child {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.progress-tracker--center {
  text-align: center;
}

.progress-tracker--center .progress-marker::before, .progress-tracker--center .progress-text--dotted::before {
  margin-left: auto;
  margin-right: auto;
}

.progress-tracker--center .progress-marker::after {
  right: -50%;
}


@media (max-width: 575px) {
  .progress-tracker-wrapper {
    overflow-x: auto;
    -ms-scroll-snap-type: x proximity;
        scroll-snap-type: x proximity;
  }
  .progress-tracker-wrapper .progress-step {
    min-width: 50%;
    scroll-snap-align: start;
  }
}


/*TOOL TIP HELP*/
.dialogTip {
    display:inline-block;
    position:relative;   
    color:black;
}
.dialogTip .title{
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  /* or 100% */
  width:81px;
  margin-top: 27px;
  margin-left: 21PX;
  display: flex;
  align-items: center;

  /* azul-principal */

  color: #1C4E8F;
}
.dialogTip .text{
  position: absolute;
  width: 193px;
  height: 100px;
  left: calc(50% - 187px/2 );
  top: calc(50% - 100px/2 + 52.5px);
  font-family: Montserrat;
  font-style: normal;
  font-weight: 300;
  font-size: 10px;
  text-align: justify;
  line-height: 12px;
  /* Gris - texto */
  color: #4F4F4F;
}

.dialogTip .right {
    min-width:230px;
    max-width:230px;
    min-height:250px;
    
    top:50%;
    left:100%;
    margin-left:20px;
    transform:translate(0, -50%);
    padding:0;
    
    background-color:#F9FBFD;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 300;
    font-size: 10px;
    line-height: 12px;
    text-align: justify;
    /* Gris - texto */

    color: #4F4F4F;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.dialogTip .right img{
    float:right;
}

.dialogTip:hover .right {
    visibility:visible; opacity:1;
}

.dialogTip .right i {
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}
.dialogTip .right i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:#F9FBFD;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}











/*SUPERPOSE OBJECT IN ALL WINDOW*/
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }


 /*DIALOG*/
 .dialogHelp {
    margin:15px;
    width: 33.3%;
    height: 250px;
    width:230px;
    color: white;
    background:#F9FBFD ;
    position: relative;
  	border-radius: 10px;
	  text-align:right;
    border: 1px solid black
    -webkit-box-shadow:  1px 1px 7px 0px #88888870;
    -moz-box-shadow: 1px 1px 7px 0px #88888870 ;
    box-shadow: 1px 1px 7px 0px #88888870;

}

.dialogHelp img{
	text-align:right;
}

.dialogHelp .title{
	position: absolute;
	width: 105px;
	height: 25px;
	left: 15px;
	top: calc(50% - 75px/2 - 67px);
	font-family: Montserrat;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 18px;
	/* or 100% */
	text-align:left;
	display: flex;
	align-items: center;

	/* azul-principal */

	color: #1C4E8F;
}

.dialogHelp .text{
	position: absolute;
	width: 204px;
	height: 100px;
	left: calc(50% - 204px/2 );
	top: calc(50% - 100px/2 + 52.5px);

	font-family: Montserrat;
	font-style: normal;
	font-weight: 300;
	font-size: 10px;
	line-height: 12px;
	text-align: justify;
	/* Gris - texto */

	color: #4F4F4F;
}

.dialogHelp:before {
	content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 25x solid #F9FBFD;
    border-right: 25px solid #F9FBFD;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    left: -25px;
    top: 80px;

}

.textForm{
  padding: 3em;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  text-align: justify;

  /* gris-texto */

  color: #4F4F4F;
}

.labelObservation{
  padding-top: 2em;
  text-align:left;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 18px;
  /* identical to box height, or 100% */
  color: #000000;
}


#custom-select select {
  /* Hide default arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Style the dropdown box */
  width: 100%;
  padding: 5px 10px;
  height:50px;
}

#custom-select {
  position: relative;  
}

#custom-select select, #custom-select::after {
  height: 50px;
  text-indent: 0.01px;
}
#custom-select option{
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.5em;
    padding:5px 10px 2px 10px;
    text-indent: 0.01px;
}

option.optStyle{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px;
}
 
#custom-select::after {
  content: "\25bc"; /* HTML symbol */
  color: #555555;
  /* Reposition */
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px  0 0;
  line-height: 40px; /* Vertical center text */
  font-size: 16px
}


/*CUSTOM CHECKBOX*/
/* Customize the label (the container) */
.containerCustom {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containerCustom input[type=checkbox]  {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  display: none;
}


/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #eee;
  border: 1px solid #636363;
  border-radius: 12px;
}

.codeBox{
  border-radius: 5px;
  border: 1.5px solid #9AA9B9!important;
}

/* On mouse-over, add a grey background color */
.containerCustom:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerCustom input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerCustom input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerCustom .checkmark:after {
    left: 7px;
    top: 3px;
    width: 8px;
    height: 15px;
    border: solid white;
    border-width: 0 5px 5px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/*PARTITIONED INPUT */
input[type=number] {
    height: 45px;
    width: 45px;
    font-size: 25px;
    text-align: center;
    background-color: #eee;
    border: 1px solid #636363;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Collapsable panel*/        
.lbl-toggle {
    font-family: Montserrat;
    display: block;
    font-weight: bold;    
    font-size: 1.4rem;
    /*text-transform: uppercase;*/
    text-align: center;
    padding: 1rem;
    color: #303030;
    background: #e3e3e3;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
  color: #1c4e8e;
}
.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;

  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}

.wrap-collabsible input[type=checkbox]  {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  display: none;
}

.collapsible-content .content-inner {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0 1rem;
    background: #f2f2f2;
    border-bottom: 1px solid #303030a1;24, 66, .45);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;

  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100vh;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}