@import url("custom-material-input.css");

/********************************** LOGO DIBENIS *************************************/

.text-link-dibenis a, .text-link-dibenis a:visited, .text-link-dibenis a:active{ font-size: 12px; color: #555555; text-decoration: none; }
.text-link-dibenis a:hover { color: #aaaaaa; text-decoration: none; }
.text-link-dibenis a i, .text-link-dibenis a:hover i{ color: #EE0000; text-decoration: none; }
.text-link-dibenis a:hover i{ animation: rubberBand 1.0s 1; -webkit-animation: rubberBand 1.0s 1; }

/************************ colores / fuentes ****************************/

/*
Loaders SVG: https://loading.io/
*/

/* Definición de colores [.color-xxx], [.bg-xxx], [.border-color-xxx] ver custom-global.css */
:root {
  --logo-alto: 60px;
  --logo-alto-sm: 54px;
  --logo-alto-xs: 42px;
  --fuente-primaria: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  /*
  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
  */
  --fuente-secundaria: 'Montserrat';
  /*-------*/
}

.btn.btn-pri {background: var(--color-pri); border-color: var(--color-pri); color: #ffffff}
.btn.btn-pri:hover, .btn.btn-pri:focus {background: transparent; border-color: var(--color-pri); color: var(--color-pri)}
.btn.btn-transparent-pri {background: transparent; border-color: var(--color-pri); color: var(--color-pri)}
.btn.btn-transparent-pri:hover, .btn.btn-transparent-pri:focus {background: var(--color-pri); border-color: var(--color-pri); color: #fff}

.btn.btn-sec {background: var(--color-sec); border-color: var(--color-sec); color: #ffffff}
.btn.btn-sec:hover, .btn.btn-sec:focus {background: transparent; border-color: var(--color-sec); color: var(--color-sec)}
.btn.btn-transparent-sec {background: transparent; border-color: var(--color-sec); color: var(--color-sec)}
.btn.btn-transparent-sec:hover, .btn.btn-transparent-sec:focus {background: var(--color-sec); border-color: var(--color-sec); color: #fff}

.btn.btn-ter {background: var(--color-ter); border-color: var(--color-ter); color: #ffffff}
.btn.btn-ter:hover, .btn.btn-ter:focus {background: transparent; border-color: var(--color-ter); color: var(--color-ter)}
.btn.btn-transparent-ter {background: transparent; border-color: var(--color-ter); color: var(--color-ter)}
.btn.btn-transparent-ter:hover, .btn.btn-transparent-ter:focus {background: var(--color-ter); border-color: var(--color-ter); color: #fff}

.btn.btn-red {background: var(--color-red); border-color: var(--color-red); color: #ffffff}
.btn.btn-red:hover, .btn.btn-red:focus {background: transparent; border-color: var(--color-red); color: var(--color-red)}
.btn.btn-transparent-red {background: transparent; border-color: var(--color-red); color: var(--color-red)}
.btn.btn-transparent-red:hover, .btn.btn-transparent-red:focus {background: var(--color-red); border-color: var(--color-red); color: #fff}

 /* tomado de app.css */
.btn.btn-white2 { background: white; border-color: rgba(120, 130, 140, 0.2); }
.btn.btn-white2:hover, .btn.btn-white2:focus, .btn.btn-white2.active { color: rgba(30, 40, 50, 0.85) !important; background-color: #ececec; }

.btn.btn-smooth{ border-radius: 0.25rem; -webkit-border-radius: 0.25rem; -moz-border-radius: 0.25rem; -ms-border-radius: 0.25rem; -o-border-radius: 0.25rem; }

.text-small{ font-size: 13px; line-height: 18px; }
.text-normal{ font-size: 14px; line-height: 20px; }
.badge2{
  display: inline-block;
  padding: 3px 10px 2px 10px;
  border: 1px solid #ededed;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
.badge2 span{
  font-weight: 600;
}
.badge2.rounded{
  border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  -ms-border-radius: 50px !important;
  -o-border-radius: 50px !important;
}
.badge2.pri span, .badge2.pri a{
  color: var(--color-pri);
}
.badge2.sec span, .badge2.sec a{
  color: var(--color-sec);
}
.badge2.ter span, .badge2.ter a{
  color: var(--color-ter);
}

/* tomado de .feature-box-10 .number */
.number {
  display: table-cell;
  position: relative;
  height: 90px;
  width: 90px;
  margin: 0 auto;
  font-size: 30px;
  text-align: center;
  vertical-align: middle;
}

a.icon-header{ color: var(--color-pri) }
a.icon-header:hover{ color: var(--color-sec) }
a.icon-header .fa-whatsapp{ font-size: 18px !important; position: relative; top:1px; }
/* a.icon-header .fa-phone{ font-size: 20px; position: relative; top:-1px; } */
/* a.icon-header .fa-whatsapp{ font-size: 24px } */

@media (max-width: 576px) {
  header a.logo img {
    height: var(--logo-alto-xs) !important;
  }
}
@media (max-width: 640px) {
  header a.logo img {
    height: var(--logo-alto-sm);
  }
}
@media (max-width: 991px) {
  .header-searchbar{
    border: none;
  }
}

header.header-appear nav.header-dark,
header.sticky nav.navbar-fixed-top.header-dark,
header.sticky nav.navbar-scroll-fixed-top.header-dark {
  background-color: var(--color-sec-muy-oscuro);
}

/* search popup */
.mfp-bg{
  /* background:var(--color-sec); */
  background:var(--color-sec-oscuro);
}
.search-form .search-input {
  border-bottom-color: #FFFFFF !important;
}
.search-input ::-moz-placeholder,
.search-input [placeholder] {
  color: rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
}
.search-input::-webkit-input-placeholder{
  color: rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
}
.search-input::-moz-placeholder{
  color: rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
}
.search-input:-ms-input-placeholder{
  color: rgba(255, 255, 255, 0.5) !important;
  text-shadow: none !important;
}

/* search form */
/*
.search-cart-header { padding-top: 14px; float: right; letter-spacing: 1px}
.header-search-form {color: #232323}
.search-form .search-input { border: none; border-radius: 0; border-bottom: 2px solid rgba(255,255,255,0.5); font-size: 30px; font-weight: 100; padding: 20px 38px 20px 2px; background: transparent; line-height: 40px; color: #fff;}
.search-form .search-input:focus{outline: none}
.search-input ::-moz-placeholder, .search-input [placeholder] { color: #ff0000; }
.search-form .search-button {font-size:21px; color:#fff; top:31px; right: 0; outline: none;}
#search-header {height:100%; width: 45%; margin:0 auto;}
.close-search { color: #373737; position: absolute; right: 0; top: 23px; z-index: 998; cursor: pointer; }
.close-search:hover { color: #9a9a9a;}
.search-button { cursor: pointer;  z-index: 0; margin-right: 0; border: none; background: none; }
*/


/* list style 5-1 */
.list-custom { list-style: none; margin: 0; padding: 0;}
.list-custom li { position: relative; padding: 0 0 10px 22px; margin: 0 0 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.list-custom li:before { content: "\f192"; position: absolute; top: 1px; left: 0; font-family: Font Awesome\ 5 Free; font-weight: 400; color: var(--color-pri) }
.list-custom li:last-child {border-bottom: 0;}

li.list-custom-emergencias:before { content: "\f055"; position: absolute; top: 1px; left: 0; font-family: Font Awesome\ 5 Free; font-weight: 900; color: var(--color-pri) }

.list-custom li ul { list-style: none; margin: 0; padding: 0;}
.list-custom li ul { list-style: none; margin: 0; padding: 0;}
.list-custom li ul li { position: relative; padding: 0 0 0 18px; margin: 5px 0 5px 0; border-bottom: 0;}
.list-custom li ul li:before { content: "\f105"; position: absolute; top: 1px; left: 0; font-family: Font Awesome 5 Free; font-weight: 900; color: var(--color-pri) }

.contenedor-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.contenedor-responsive.rel-4-3 {
  padding-bottom: 75%; /* 4:3 */
}
.contenedor-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.link-icono{
  /*
    border-color-extra-medium-gray->border-color:;
    #dbdbdb!importantbtn-rounded->50px*//*padding: 3px 6px 1px 6px;
  */
  padding: 0px;
  background: none;
  border: none;
  display: inline-block;
  color: #12151a;
  border-radius: 4px;
  -webkit-border-radius: 4px ;
  -moz-border-radius: 4px ;
  -ms-border-radius: 4px ;
  -o-border-radius: 4px ;
}
.link-icono span{
  margin-left: 8px;
}
.icono-circulo{
  /* border: se define con clases css manuales en el html, ej: border-all border-width-1 border-color-pri */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}
.icono-circulo i{
  line-height: 100%;
  margin-left: 1px;
}
.icono-circulo i.fa-play{
  padding-left: 2px;
}
.icono-circulo-24{
  width: 24px;
  height: 24px;
}
.icono-circulo-30{
  width: 30px;
  height: 30px;
}
.icono-circulo-36{
  width: 36px;
  height: 36px;
}
.icono-circulo-36 i{
  font-size: 20px;
  line-height: 100%;
}

/* tamaños íconos [.icon-xx] ver custom-global.css */

/* re-definición de clases nati
vas style.css */
.btn {
  display:inline-block;
  border:2px solid transparent;
  color: inherit;
  letter-spacing: .5px;
  line-height: 110%;
  border-radius: 0;
  text-transform: none;
  width: auto;
  font-family: var(--fuente-primaria);
  font-weight: 600;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  white-space: normal;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

:root {
  --fs-btn-very-small: 12px;
  --fs-btn-small: 13px;
  --fs-btn-medium: 14px;
  --fs-btn-large: 15px;
  --fs-btn-extra-large: 16px;
  
  --h-btn-very-small: 2rem;;
  --h-btn-small: 2.2rem;;
  --h-btn-medium: 2.6rem;;
  --h-btn-large: 3rem;;
  --h-btn-extra-large: 3.6rem;;
  
  --pad-btn-very-small: 5px 10px 6px 10px;
  --pad-btn-small: 6px 12px 7px 12px;
  --pad-btn-medium: 8px 16px 9px 16px;
  --pad-btn-large: 9px 18px 10px 18px;
  --pad-btn-extra-large: 12px 24px 13px 24px;

  --pad-btn-rounded-very-small: 5px 14px 6px 14px;
  --pad-btn-rounded-small: 6px 18px 7px 18px;
  --pad-btn-rounded-medium: 8px 24px 9px 24px;
  --pad-btn-rounded-large: 9px 28px 10px 28px;
  --pad-btn-rounded-extra-large: 12px 32px 13px 32px;
}
.btn.btn-very-small {
  line-height: 110%;
  font-size: var(--fs-btn-very-small);
  padding: var(--pad-btn-very-small);
  /* height: var(--h-btn-very-small); */
}
.btn.btn-small {
  line-height: 110%;
  font-size: var(--fs-btn-small);
  padding: var(--pad-btn-small);
  /* height: var(--h-btn-small); */
}
.btn.btn-medium {
  line-height: 110%;
  font-size: var(--fs-btn-medium);
  padding: var(--pad-btn-medium);
  /* height: var(--h-btn-medium); */
}
.btn.btn-large {
  line-height: 110%;
  font-size: var(--fs-btn-large);
  padding: var(--pad-btn-large);
  /* height: var(--h-btn-large); */
}
.btn.btn-extra-large {
  line-height: 1.3rem;
  font-size: var(--fs-btn-extra-large);
  padding: var(--pad-btn-extra-large);
  /* height: var(--h-btn-extra-large); */
}
.btn.btn-very-small.btn-rounded {
  padding: var(--pad-btn-rounded-very-small);
}
.btn.btn-small.btn-rounded {
  padding: var(--pad-btn-rounded-small);
}
.btn.btn-medium.btn-rounded {
  padding: var(--pad-btn-rounded-medium);
}
.btn.btn-large.btn-rounded {
  padding: var(--pad-btn-rounded-large);
}
.btn.btn-extra-large.btn-rounded {
  padding: var(--pad-btn-rounded-extra-large);
}

body{
  color: #333333;
}
section {
  padding: 80px 0px;
}
@media (max-width: 1199px) {
  section {
    padding: 50px 0px;
  }
}
@media (max-width: 991px) {
  section {
    padding: 40px 0px;
  }
}
@media (max-width: 767px) {
  section {
    padding: 30px 0px;
  }
}


/************************ slider ****************************/

/* .title-medium-large {font-size: 100px; line-height:95px} */
.title-medium-large {font-size: 80px; line-height:76px}
@media (max-width: 1199px) {
  /* .title-medium-large { font-size: 90px; line-height: 90px;} */
  .title-medium-large { font-size: 72px; line-height: 72px;}
}
@media (max-width: 991px) {
  /* .title-medium-large {font-size: 70px; line-height:65px} */
  .title-medium-large {font-size: 56px; line-height:52px}
}
@media (max-width: 767px) {
  /* .title-medium-large {font-size: 38px; line-height:44px} */
  .title-medium-large {font-size: 30px; line-height:35px}
}

.title-medium {font-size: 70px; line-height:75px}
@media (max-width: 1199px) {
  .title-medium { font-size: 63px; line-height: 63px;}
}
@media (max-width: 991px) {
  .title-medium {font-size: 49px; line-height:45px}
}
@media (max-width: 767px) {
  .title-medium {font-size: 27px; line-height:31px}
}

.slider-logo {
  height: 80px !important;
  width: auto !important;
}
/* La animación [anim-zoom-in] se define en [custom-global.css] */
.div-logos-convenios-empresas{
  margin-top: 40px;
}
.div-logos-convenios-empresas span{
  display: inline-block;
  opacity: 0;
  animation: anim-zoom-in 0.5s ease forwards;
  -webkit-animation: anim-zoom-in 0.5s ease forwards;
}
.div-logos-convenios-empresas span div{
  background: #FFFFFF;
  margin: 0px 5px;
  padding: 30px;
  border-radius: 1000px;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -ms-border-radius: 1000px;
  -o-border-radius: 1000px;
  transition: transform .2s !important;
  -webkit-transition: transform .2s !important;
  -moz-transition: transform .2s !important;
  -ms-transition: transform .2s !important;
  -o-transition: transform .2s !important;
}
.div-logos-convenios-empresas span div span{
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 140px;
  height: 140px;
}
.div-logos-convenios-empresas span div:hover{
  transform: scale(1.1) !important;
  -webkit-transform: scale(1.1) !important;
  -moz-transform: scale(1.1) !important;
  -ms-transform: scale(1.1) !important;
  -o-transform: scale(1.1) !important;
}
@media (max-width: 640px) {
  .slider-logo {
    height: 50px !important;
  }
  .div-logos-convenios-empresas{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .div-logos-convenios-empresas span div{
    margin: 0px 0px;
    padding: 20px;
  }
  .div-logos-convenios-empresas span div span{
    width: 60px;
    height: 60px;
  }
}



/*************************** botones accesos flotantes  ******************************/
.accesos-flotantes{
  position:fixed;
  top:140px;
  right: 0px;
  z-index: 10;
}
.accesos-flotantes .acceso-boton {
  transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-duration: .2s;
  -moz-transition-duration: .2s;
  -webkit-transition-duration: .2s;
  -o-transition-duration: .2s;
  position: relative;
  right: -70px;
  margin-bottom: 10px;
  background: var(--color-pri);
  -moz-box-shadow:0 0 10px rgba(0,0,0,0.2);
  -webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);
  box-shadow:0 0 10px rgba(0,0,0,0.2);
  border-radius: 50px 0px 0px 50px;
  -webkit-border-radius: 50px 0px 0px 50px;
  -moz-border-radius: 50px 0px 0px 50px;
  -ms-border-radius: 50px 0px 0px 50px;
  -o-border-radius: 50px 0px 0px 50px;
}
.accesos-flotantes .acceso-boton i { padding:5px 0px 3px 0px; font-size: 20px; vertical-align: middle; position: relative; top: -1px; color: #FFFFFF}
.accesos-flotantes .acceso-boton:hover, .all-demo:hover {transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; right: 0px; background: var(--color-pri)}
.accesos-flotantes .acceso-boton span, .all-demo span {padding:0px 5px 0px 5px; font-size: 13px; position: relative; top:2px; opacity: 0}
.accesos-flotantes .acceso-boton:hover span, .all-demo:hover span {opacity: 1; color: #fff}
.accesos-flotantes .acceso-boton:hover i, .all-demo:hover i {color: #fff}
.accesos-flotantes .acceso-boton a, .all-demo a { cursor: pointer; color: #232323; font-size: 10px; padding:2px 10px; display: block; text-decoration: none; font-weight: 500 }

/****************************************************/

.www-aside .logo-light{
  max-height: 2.5rem;
}
.www-aside .btn-usuario{
  width: 180px;
}
.cbp-spmenu-vertical {
  width: 400px;
}
.cbp-spmenu-right {
  right: -400px;
}
@media (max-width: 400px) {
  .cbp-spmenu-vertical {
    width: 100%;
  }
  .cbp-spmenu-right {
    right: -100%;
  }
}



/****************************************************/

.escala_1_5 {
  height: 10px;
  overflow: hidden;
  display: inline-flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
.escala_1_5 div {
  flex-grow: 1;
  margin-right: 2px;
  background-color: var(--color-sec-claro);
}
.escala_1_5.escala_1 .n1{ background-color: var(--color-pri); }
.escala_1_5.escala_2 .n2{ background-color: var(--color-pri); }
.escala_1_5.escala_3 .n3{ background-color: var(--color-pri); }
.escala_1_5.escala_4 .n4{ background-color: var(--color-pri); }
.escala_1_5.escala_5 .n5{ background-color: var(--color-pri); }

.escala_1_5.sec.escala_1 .n1{ background-color: var(--color-sec); }
.escala_1_5.sec.escala_2 .n2{ background-color: var(--color-sec); }
.escala_1_5.sec.escala_3 .n3{ background-color: var(--color-sec); }
.escala_1_5.sec.escala_4 .n4{ background-color: var(--color-sec); }
.escala_1_5.sec.escala_5 .n5{ background-color: var(--color-sec); }

.escala_1_5.ter.escala_1 .n1{ background-color: var(--color-ter); }
.escala_1_5.ter.escala_2 .n2{ background-color: var(--color-ter); }
.escala_1_5.ter.escala_3 .n3{ background-color: var(--color-ter); }
.escala_1_5.ter.escala_4 .n4{ background-color: var(--color-ter); }
.escala_1_5.ter.escala_5 .n5{ background-color: var(--color-ter); }


/****evaluaciones************************************************/

  .acciones-evaluacion{
    position: fixed;
    width: 100%;
    padding: 20px 0px;
    bottom: 0px;
  }
  .pregunta-acertada{
    background-color: #00b20010;
    border-width: 2px;
    border-color: var(--color-ter);
  }
  .pregunta-errada{
    background-color: #ff660010;
    border-width: 2px;
    border-color: var(--color-pri);
  }
  
/****************************************************/
  
  /* custom-swal2 solo para www */
  
  .swal2-warning{
    color: var(--color-pri) !important;
    border-color: var(--color-pri) !important;
  }
  .swal2-question, .swal2-info{
    color: var(--color-sec) !important;
    border-color: var(--color-sec) !important;
  }
  .swal2-success{
    color: var(--color-ter) !important;
    border-color: var(--color-ter) !important;
  }
  .swal2-error{
    color: var(--color-red) !important;
    border-color: var(--color-red) !important;
  }


/****************************************************/

.popup-login .logo-alt-anim{
  height: 50px;
}
.popup-login .logo-ibi-convenios{
  height: 32px;
}
.popup-login .logo-empresa-convenio{
  width: auto;
  height: auto;
  max-height: 130px;
  max-width: 200px;
}
.popup-login .logo-alt{
  height: 40px;
}
.popup-login input{
  margin-bottom: 10px;
}
.popup-login .input-center input{
  text-align: center;
}
.popup-login input:focus{
  border-color: #d1d1d1 !important; /* tomado de www/style.css */
}
.popup-login button.link{
  padding: 0px;
  border: none;
  background: none;
  text-decoration: underline;
  color: var(--secondary);
  font-size: 13px;
}


/****************************************************/

.convenios .logo-empresa img {
  padding: 30px !important;
  width: auto;
  height: auto;
  max-width: 300px;
  max-height: 300px;
  transition: transform .2s !important;
  -webkit-transition: transform .2s !important;
  -moz-transition: transform .2s !important;
  -ms-transition: transform .2s !important;
  -o-transition: transform .2s !important;
}
.convenios .logo-empresa img:hover{
  transform: scale(1.1) !important;
  -webkit-transform: scale(1.1) !important;
  -moz-transform: scale(1.1) !important;
  -ms-transform: scale(1.1) !important;
  -o-transform: scale(1.1) !important;
}