/**
* Template Name: Nova - v1.1.0
* Template URL: https://bootstrapmade.com/nova-bootstrap-business-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Set main reusable colors and fonts using CSS variables
# Learn more about CSS variables at https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
--------------------------------------------------------------*/
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body{
  font-family: 'Assistant';
}
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  font-family: 'Assistant';
}

h1{
  text-transform: uppercase;
}
h2 {
  color: #0B2944;
  font-size: 36px;
  font-weight: 700;
}
p, span{
  color: #565758D4;
}
/* Background Hero */
.bg_blue {
  background: linear-gradient(180deg, #3E3E3E 0%, #265A83 100%);
}

/* IMG Portada - Index */
.bg-portada {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}

@media (max-width:992px) {
  .bg-portada {
    width: 100vw;
    height: 50vh;
  }
}


/* HOME */

.form-check-input{
  border-color: white;
}

.title{
  color:#FFFFFF;
  font-size: 4rem;
  line-height : 30px;
}

.title_acent{
  color:#39C5F2 !important;
}

.text-sm{
  font-size: 0.7rem;
}

.subtitle{
  color:#FFFFFF;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top:-10rem;
}

.home-title-yellow.home-form{
  color: #fff !important;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1rem;
    padding-left: 1rem;
    text-align: center;
    background-color: #003673;
}
#pills-summary .home-form{
  padding-top: 10px;
}
#pills-graph {

}
.home-subtitle{
  color:#FFFFFF;
  font-size: .8rem;
  font-weight: 500;
  margin-top:-10rem;
}

.section-home-subtitle{
  color:#FFFFFF;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top:-10rem;
}


.home-aling-subtitle home-subtitlebox{
  text-align: left!important;
}

#myForm .home-form, .home-form-img, #pills-summary .d-block.text-dark.pt-2.px-5 {
  border: solid 1px white;
  border-radius: .8rem;
  padding: .8rem;
  background-color: #f6f6f6;
  padding-top: 40px;
  padding-bottom: 40px;
}

.home-form-img{
  max-width: 600px;
}
.input-button{
  margin-top: 6rem!important
}

.container-button{
  margin-top: 4rem!important
}

.btn-white {
  display: block;
  border: solid #39C5F2;
  border-width: 1px;
  border-radius: 12px;
  background: #39C5F2;
  color: #ffffff;
  font-size: 15px;
  margin: -60px auto 15px;
  padding: 10px;
  width: 100%;
  text-decoration: none;
  font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
}

.btn-white:hover,
.btn-white:focus {
  color: white;
}



.input-white {
  display: block;
  border: solid white;
  border-width: 1px;
  border-radius: 12px;
  background: transparent;
  color: white;
  font-size: 18px;
  margin: -60px auto 15px;
  padding: 10px;
  width: 50%;
  text-decoration: none;
}

.home-form input {
  /* font-size: 0.7rem!important;
  padding: 0.3rem; */
  color:#565758!important;
}

.home-form  input[type="text"]:focus{
  background-color: #fff;
}


.home-form-img{
  border: solid 1px white;
  border-radius: .8rem;
  padding: .8rem;
}


.home-form-img input {
  font-size: 0.7rem!important;
  padding: 0.3rem;
  border-radius: 0.375rem!important;
}

.home-w-80 {
  width: 80%;
}

.home-btn-white {
  --bs-btn-color: #39C5F2;
  --bs-btn-border-color: #39C5F2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #39C5F2;
  --bs-btn-hover-border-color: #39C5F2;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #39C5F2;
  --bs-btn-active-border-color: #39C5F2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #39C5F2;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #39C5F2;
  --bs-gradient: none;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    padding: .5rem 2rem;
}

.home-btn-white:hover {
  background: #39C5F2;
  color: #fff;
}


.home-btn-yellow, .home-btn-file , #btningresar {
  --bs-gradient: none;
  --bs-btn-color: #fff;
  --bs-btn-bg: #39C5F2;
  --bs-btn-border-color: #39C5F2;
  --bs-btn-hover-color: #4d5154;
  --bs-btn-hover-bg: #39C5F2;
  --bs-btn-hover-border-color: #39C5F2;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #39C5F2;
  --bs-btn-active-border-color: #39C5F2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:#39C5F2;
  --bs-btn-disabled-border-color: #39C5F2;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
}


.home-right{
  margin-right: .5rem!important;
}

/* Titulos Pasarela de Pasos */
.nav-pills{
  background-color: transparent!important;
  color: white;
  font-size: 1rem;
  --bs-nav-pills-border-radius: 0;
  padding-left: 20px;
  margin-top: -10px;
}

.nav-pills .nav-link{
  color: white;
  border-bottom: 3px solid #FFFFFF;
  margin: 0rem 1rem;
}
@media (max-width:992px) {
  .nav-pills{
    font-size: .5rem;
  }
}

.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
  border: transparent;
  background-color: transparent;
}
.nav-pills .nav-link span{
  margin-top: -12px;
  color: #A9AEB2;
  display: block;
  font-size: 21px;
}
.nav-pills .nav-link.active span{
  margin: 0;
  color: #FFFFFF;
}
/*****  GRAPH  *******/
.barchart-Wrapper {
  display: table;
  position: relative;
  margin: 20px 0;
  height: 252px;
}
.barChart-Container {
  display: table-cell;
  width: 100%;
  height: 100%;
  padding-left: 15px;
}
.barchart {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.barchart-Col {
  position: relative;
  vertical-align: bottom;
  display: table-cell;
  height: 100%;
}
.barchart-Col + .barchart-Col {
  border-left: 4px solid transparent;
}
.barchart-Bar {
  position: relative;
  height: 0;
  transition: height 0.5s 2s;
  width: 66px;
  margin: auto;
}
.barchart-Bar:after {
  content: attr(attr-height);
  color: white;
  position: absolute;
  text-align: center;
  width: 100%;
}
.barchart-BarFooter {
  position: absolute;
  text-align: center;
  height: 10%;
  width: 100%;
}
.barchart-BarFooter h3 {
  color: white;
  font-size: .7rem;
}
.barchart-TimeCol {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
.barchart-Time {
  height: 20%;
  vertical-align: middle;
  position: relative;
}
.barchart-Time:after {
  border-bottom: 0.05rem solid white;
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  top: 0em;
}
.barchart-TimeText {
  position: relative;
  float: left;
  top: -8px;
  z-index: 1;
  padding-right: 5px;
  color: white;
  font-size: 0.8rem;
}
.barra-1 {
  background-color: #387CD3;
}
.barra-2 {
  background-color: #1B4F96;
}

.vertical-text{
  display: table;
  height: 100%;
  overflow: hidden;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.vertical-text-inner{
  display: table-cell;
  vertical-align: middle;
  font-size: 0.7rem;
  color: white;
}

@media (min-width:480px) {
  home-padding{
    padding: 10rem;
  }

  .nav-fill-tab .nav-item {
    width: 100% !important;
    flex-basis: unset !important;
  }
}

.porcentaje {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  color: white;
}

.form-check-input:checked {
    background-color: #39C5F2;
    border-color: #39C5F2;
}

.form-check-input:focus {
    border-color: #39C5F2;
    box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 5%);;
}
.form-control:focus {
    border-color: #39C5F2;
     background-color: transparent; 
    box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 5%);
}
.form-control::placeholder{
  color: #ffffff7a;
}
.btn-white::placeholder{
  color: #ffffff7a;
  font-size: 16px;
  font-weight: 400;
}
#hospitales.form-control:focus {
  background: white !important;
}

/* LINK */
.bs-link2{
  color: white;
  text-decoration: underline;
}
.bs-link2:hover{
  color: white;
  text-decoration: underline;
}

.bs-link3{
  color: #565758;
  text-decoration: underline;
}
.bs-link3:hover{
  color: #148BF9;
  text-decoration: underline;
}

/* MODAL */
.modal-content{
  background: #FFFFFF;
    border: 1px solid #39C5F2;
    border-radius: 15px;
  padding: 2rem;
}
.modal-title{
  font-size: 24px;
  color: #0B2944;
    font-weight: 700;
}
.modal-content .font-weight-bold{
  font-weight: bold;
}
.modal .close span{
  color:#39C5F2;
}
.close{
  color:#39C5F2;
  font-size: 2rem;
  background-color: transparent;
  border: none;
}

ul.timeline {
  list-style-type: none;
  position: relative;
}
ul.timeline:before {
  content: ' ';
  background: #FFFFFF;
  display: inline-block;
  position: absolute;
  left: 30px;
    width: 2px;
    height: 75%;
    z-index: 400;
    top: 30px;
}
ul.timeline > li {
  margin: 0;
  padding-left: 20px;

}
ul.timeline > li button:before {
  content: ' ';
  background: white;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  left: 26px;
  width: 10px;
  height: 10px;
  z-index: 400;
}
ul.timeline > li button.active:before{
  left: 19px;
  width: 25px;
  height: 25px;
}
.left{
background: linear-gradient(205.53deg, #148BF9 0.16%, #0C3357 68.21%, #0B2944 83.03%);

}
.form-control{
  /* Rectangle 3 */
box-sizing: border-box;
height: 59px;
background: #FFFFFF;
border: 1px solid #39C5F2;
border-radius: 15px;

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
z-index: 1;
}
#myForm p.home-aling-subtitle {
  color: #212529;
}
.form-check-input {
  border-color: #39C5F2;
}
.input{
  box-sizing: border-box;
height: 59px;
background: #FFFFFF;
border: 1px solid #39C5F2;
border-radius: 15px;
}
.home-aling-subtitle home-subtitlebox{
  margin-bottom: .5rem;
}
.form-control::placeholder {
  color: #565758;
}
.logo-elaboral{
  text-align: center;
}
.logo-elaboral h1 {
  text-transform: none;
  color: #0B2944;
  margin: 0;
}
.logo-elaboral h1 span {
  color: #39C5F2;
}
.logo-elaboral p{
  color: #565758;
  text-transform: uppercase;
font-family: 'Assistant';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.3em;
color: rgba(86, 87, 88, 0.83);
}
.terminos{
  font-size: 18px;
}
.terminos a{
  color: #1E1E1E;
}
.copy {
  text-align: center;
}
.copy a{
  font-size: 18px;
  line-height: 24px;
  text-decoration-line: underline;
  color: #000000;
}
#imgToraxPreview{
border: 2px dashed #39C5F2;
border-radius: 15px;

}
.home-subtitlebox{  
  padding: 10px 20px;
  color: #003673;
  font-weight: 600;
  background: #FFFFFF;
  border: 1px solid #39C5F2;
  border-radius: 15px;
}
#pills-graph .col-md-4.home-form, .home-form{
  border: #39C5F2 thin solid;
  border-radius: .8rem;
  padding-top: 10px;
}
.bd-gray-200{
  color: #000;
  background-color: #e9ecef;
}
#pills-summary span strong{
  margin-right: 5px;
}
.index .btn-white, .index .form-control {
  max-width: 300px;
}
#pills-summary .home-aling-subtitle{
  color: #003673;
  font-weight: 600;
}
.pass-3{
  width: 100%;
}
@media (min-width:576px) {
  ul.timeline > li{
    width: 100%;
    margin: 20px 0;
    padding-left: 20px;
}
.home-form-img {
  max-width: 60%;
  margin-left: 20% !important;
  margin-right: 20% !important;
}
.pass-3{
  width: 94%;
}
}