/*Inicio espacio para las fuentes*/
@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
  
@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}


@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
  
@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
  
@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}


@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
  
@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
  
@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "SofiaSans";
  src: url("../../../fonts/SofiaSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "SofiaSans";
  src: url("../../../fonts/SofiaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "SofiaSans";
  src: url("../../../fonts/SofiaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "SofiaSans";
  src: url("../../../fonts/SofiaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: "Ubuntu";
  src: url("../../../fonts/Ubuntu-Bold.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../../../fonts/Ubuntu-Medium.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../../../fonts/Ubuntu-Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../../../fonts/Ubuntu-Light.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
        font-family: 'iconos-sistel';
        src: url('../../../public/font/font_sistel/iconos-sistel.eot?41096833');
        src: url('../../../public/font/font_sistel/iconos-sistel.eot?41096833#iefix') format('embedded-opentype'),
           url('../../../public/font/font_sistel/iconos-sistel.woff?41096833') format('woff'),
           url('../../../public/font/font_sistel/iconos-sistel.ttf?41096833') format('truetype'),
           url('../../../public/font/font_sistel//iconos-sistel.svg?41096833#iconos-sistel') format('svg');
        font-weight: normal;
        font-style: normal;
    }

/*Fin espacio para las fuentes*/ 

/*Inicio estilos generales*/
  body {
    font-family: 'Ubuntu';display: flex;min-height: 100vh;flex-direction: column;
  }

  main, div.page-wraper {
    flex: 1 0 auto;/*background-color: #FFFFFF;*/
  }

  html, body {
    width: 100% !important;font-size: 17px;
  }

  a:link, a:visited, a:active {
    text-decoration:none;
  }

  .header-front {
    width: 100%;
    display: flex;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .my-container {
    margin: 0 auto;width: 70%;
  }
  
  .credito-footer {
    top: 5px;position: relative;
  }

  .credito-footer {
    top: 0em;
  }

  /*footer de soy formador*/
  .footer-fondo-color {
    bottom: 0px;
    z-index: 1;
    border-top: 4px solid #020049;
    background-color: #020049;
    width: 100%;
    margin-right: 0 auto;
    margin-top: 70px;
  }

  .pie-fondo-color {
    padding-top: 15px;
    font-size: 8px;
    color: #F9F9F9;
    font-weight: 400;
  }
  /*footer de soy formador*/
  footer {
    background: #020049;color: #F9F9F9;font-size: 10px; z-index:10 ;
  }
  .link-footer{
    color: #fff;
  }
  
  .link-footer:hover {
    color: #fff;
  }

  footer .row {
    margin-bottom: 0;
  }

  .iconos-footer {
    position: relative;
    left: 0;
    bottom: 35px;
    height: 0;
  }

  .enlaces-iconos-footer {
    display: inline-block;
  }
  .page-wraper {
    width: 100%;display: flex;background-color: transparent !important;
  }

  #my-iframe {
    width: 100%;height: 790px;
  }

  .error {
    color: #EA4646;
  }
  
  .titulos-header-cursos {
    width: 100%;
    margin: 0 auto;
    height: auto;
    display: flex;
    background: #009591;
  }
  
  .titulos-header-cursos .titulos-header {
    font-weight: 700;
    font-size: 22px;
    color: #FFFFFF;
    padding: 11px;
    padding: 11px 40px 11px 20px;
    white-space: nowrap;
  }
  
  .titulos-header-cursos .subtitulo-seccion {
    width: 100%;background: #CFE1E5;border-bottom-left-radius: 3em;
  }
  
  .titulos-header span {
    font-weight: 700;
    font-size: 1.4em;
    color: #FFFFFF;
    margin-left: 30px;
  }

  .subtitulos-header {
    margin-left: 30px;
  }
  
  .subtitulos-header span {
    font-size: 1.2em;color: gray;
  }

  .alert-danger {
    color: #a94442;background-color: #f2dede;border-color: #ebccd1;
  }
  
  /*.alert {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
  }
  */
  .alert-success {
    color: #006241;background-color: #dff0d8;border-color: #d6e9c6;
  }

  .color-title-form {
    /*color: #020049; */font-weight:700;
  }
  
  .color-mensaje-span {
    color: #009591;
    font-size: 0.8em;
  }

  #message-green, .toast-succes {
    background-color: #41631C;color: #F9F9F9;
  }
  
  #message-yellow, .toast-warning {
    background-color: #f0ad4e;color: #F9F9F9;
  }
  
  #message-red, .toast-error {
    background-color: #d9534f;color: #F9F9F9;
    padding: 0px 20px;
  }
  
  #message-blue, .toast-info {
    background-color: #0275d8;color: #F9F9F9;
  }

  .input-field div.error {
    position: relative;
    top: -1rem;
    left: 0rem;
    font-size: 17px;
    color: #020049;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
  }

  /*Inicio miga de pan*/
  .submenu{
    display: flex;
    align-items: center;
    margin-bottom: 3em;
    margin-top: 1em;
  }
  .mybread {
    box-shadow: none;
  }
  
  .mybread .breadcrumb:before {
    color: inherit;
  }
  
  .breadcrumb {
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000;
    background-color: #fff;
    border: 0px;
    padding: 0rem;
    align-items: center;
  }

  .breadcrumb .breadcrumb-item .active{
    color: #a3a3a3;
    border-bottom: 1px solid;
  }

  .link_p, 
  .link_p:hover,
  .breadcrumb a,
  .breadcrumb a:hover {
    text-align: left;
    color: #a3a3a3;
    font-size: 18px;
    text-decoration: none;
    font-weight:700;
  }
  /*Fin miga de pan*/
  
  .btn, .btn-large {
    /*background-color: #009591;*/
    font-weight: 500;
    text-transform: none;
    color: #fff; /*comentado porque se usa para los botones de calificacion de contenido*/
    border-radius: 7px;
    /*width: 74px;*/
  }
  
  .btn:hover, .btn-large:hover,
  .btn:focus, .btn-large:focus,
  .btn:active, .btn-large:active  {
    /*background-color: #009591;*/
    /*color: #fff; comentado porque se usa para los botones de calificacion de contenido*/
    font-weight: 500;
    text-transform: none;
    border-radius: 10px;
  }
  
  
  .btn2, .btn-large2 {
    /*background-color: #020049;*/
    font-weight: 500;
    text-transform: capitalize;
    color: #fff;
    border-radius: 10px;
  }
  .btn2:hover, .btn-large2:hover,
  .btn2:focus, .btn-large2:focus,
  .btn2:active, .btn-large2:active
   {
    /*background-color: #020049;*/
    font-weight: 500;
    text-transform: capitalize;
    color: #fff;
    border-radius: 10px;
  }

  input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label {
    color: #a2a2a2;
  }

  input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #a2a2a2;
    -webkit-box-shadow: 0 1px 0 0 #a2a2a2;
    box-shadow: 0 1px 0 0 #a2a2a2;
  }
  
  .mb-0 {
    margin-bottom: 0 !important;
  }

  .avatar-usuario {
    max-width: max-content;margin-bottom: 10px;width: 100%;
  }
  
  .contenedor-opciones-ml {
    margin-top: 40px;
  }
  
  .contenedor-opciones-ml a {
    display: block;
    margin: 7px 0;
    padding: 10px;
    text-align: left;
    font-size: 18px;
    font-family: Rubik-ExtraLight;
  }
  
  .text-center {
    text-align: center !important;
  }
  
  .text-alert {
    text-align: center !important;font-size: 13px;margin-top: -25px
  }
  
  /*.alert-dismissible {
    top: 0;
    right: 0;
    padding: .3rem .3rem;
    color: inherit;
  }*/

  .container-fluid {
    margin-top: 0px;
    width: 100%;
    height: 100%;
    /*padding: 0 15px;
    max-width: 2000px;*/
  }

  @media screen and (min-width: 1309px) and (max-width: 1434px) {
    .link_p, 
    .link_p:hover,
    .breadcrumb a,
    .breadcrumb a:hover {
      text-align: left;
      font-size: 16px;
      text-decoration: none;
      font-weight:700;
    }
  }
  @media screen and (min-width: 1184px) and (max-width: 1308px) {
    .link_p, 
    .link_p:hover,
    .breadcrumb a,
    .breadcrumb a:hover {
      text-align: left;
      font-size: 14px;
      text-decoration: none;
      font-weight:700;
    }
  }
  
  @media screen and (min-width: 1059px) and (max-width: 1183px) {
    .link_p, 
    .link_p:hover,
    .breadcrumb a,
    .breadcrumb a:hover {
      text-align: left;
      font-size: 12px;
      text-decoration: none;
      font-weight:700;
    }
  }
  
  @media screen and (min-width: 996px) and (max-width: 1058px) {
    .link_p, 
    .link_p:hover,
    .breadcrumb a,
    .breadcrumb a:hover {
      text-align: left;
      font-size: 11px;
      text-decoration: none;
      font-weight:700;
    }
  }
  
  @media screen and (min-width: 845px) and (max-width: 995px) {
    .link_p, 
    .link_p:hover,
    .breadcrumb a,
    .breadcrumb a:hover {
      text-align: left;
      font-size: 9px;
      text-decoration: none;
      font-weight:700;
    }
    .breadcrumb-item+.breadcrumb-item {
      padding-left: 0.2rem;
    }
  }
  
  
  @media screen and (min-width: 579px) and (max-width: 767px) {
    .link_p, 
    .link_p:hover,
    .breadcrumb a,
    .breadcrumb a:hover {
      text-align: left;
      font-size: 11px;
      text-decoration: none;
      font-weight:700;
    }
    
    .breadcrumb-item+.breadcrumb-item {
      padding-left: 0.2rem;
    }
  }
  
  @media screen and (min-width: 300px) and (max-width: 578px) {
    .link_p, 
    .link_p:hover,
    .breadcrumb a,
    .breadcrumb a:hover {
      text-align: left;
      font-size: 10px;
      text-decoration: none;
      font-weight:700;
    }
    .breadcrumb-item+.breadcrumb-item {
      padding-left: .1rem;
    }
  }

  @media (max-width: 550px) {
    .subtitulo-seccion {
      display: none;
    }
    .titulos-header-cursos {
      display: block;
    }
  }

  @media (max-width: 400px) {
    #my-iframe {
      height: 1250px;
    }
  }

  .pendiente{
    color:#6100d1 ;font-weight:700;
  }
  .aprobado{
    color:#2ebfff ;font-weight:700;
  }
  .iniciado{
    color:#c0a3ef ;font-weight:700;
  }
  
  .hoverable{
    /* width: 98%; */
    height: 100%;
  }

  .hoverable:hover{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: transform .5s;
  }

  form label {
        color: #000;
        font-weight: 400;
        font-size: 0.9rem;
        margin-bottom: 0.1rem;
    }

  .subtitle-form{
    font-weight:700;color:#000;font-size: 1.5rem;
  }
  
    .miga {
    margin-left: 40px;margin-top: 20px;text-align: left;
  }

  .texto_info {
    background-color:#fefeff; /*#e3e2e4;*/
    color: #000;
    font-weight: 400;
    font-size: 16px;
    padding-top: 8px;
    text-align: justify;
    box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
    margin-top: 21px;
  }

  .texto_info > p{
    margin: 0;
  }

  .msg-container {
    max-width: 800px;
    min-height: 125px;
    border: 5px solid #a2a2a2 ;
    border-radius: 20px;
    margin: 0 auto;
    padding: 20px;
  }

  .msg-container span {
    margin: 0 auto; 
    font-size: 25px; 
    font-weight: 500;
    color: #000;
  }
/*Fin estilos generales*/

/*Inicio estilos menu*/
  /*menu principal*/
  .menuhidden {
    background: #fff;/*transparent;*/
    position: fixed;
    z-index: 100;
    width: 13% !important;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    margin-left: 32%;
    top:124px;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  }

  .button-menu:hover{
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
        transition: transform .5s;
    }
  .button-menuder{
    text-align: left;position: relative;width: 100%;
  }

    .button-menuder:hover{
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
        transition: transform .5s;
    }
  
  @media screen and (min-width: 1765px) and (max-width: 1814px) {
    .menuhidden {
      width: 14% !important;margin-left: 34%;
    }
  }
  @media screen and (min-width: 1717px) and (max-width: 1764px) {
    .menuhidden {
      width: 14% !important;margin-left: 34%;
    }
  }
  @media screen and (min-width: 1670px) and (max-width: 1716px) {
    .menuhidden {
      width: 14% !important;margin-left: 35%;
    }
  }
  @media screen and (min-width: 1612px) and (max-width: 1669px) {
    .menuhidden {
      width: 15% !important;margin-left: 36%;
    }
  }

  @media screen and (min-width: 1580px) and (max-width: 1611px) {
    .menuhidden {
      width: 16% !important;margin-left: 37%;
    }
  }
  @media screen and (min-width: 1520px) and (max-width: 1579px) {
    .menuhidden {
      width: 16% !important;margin-left: 38%;
    }
  }
  @media screen and (min-width: 1495px) and (max-width: 1519px) {
    .menuhidden {
      width: 17% !important;margin-left: 39%;
    }
  }

  @media screen and (min-width: 1470px) and (max-width: 1494px) {
    .menuhidden {
      width: 17% !important;margin-left: 40%;
    }
  }
  @media screen and (min-width: 1424px) and (max-width: 1469px) {
    .menuhidden {
      width: 17% !important;margin-left: 41%;
    }
  }
  @media screen and (min-width: 1390px) and (max-width: 1423px) {
    .menuhidden {
      width: 18% !important;margin-left: 42%;
    }
  }

  @media screen and (min-width: 1355px) and (max-width: 1389px) {
    .menuhidden {
      width: 19% !important;margin-left: 43%;
    }
  }

  @media screen and (min-width: 1330px) and (max-width: 1354px) {
    .menuhidden {
      width: 19% !important;margin-left: 44%;
    }
  }
  @media screen and (min-width: 1295px) and (max-width: 1329px) {
    .menuhidden {
      width: 19% !important;margin-left: 45%;
    }
  }
  @media screen and (min-width: 1267px) and (max-width: 1294px) {
    .menuhidden {
      width: 18% !important;margin-left: 46%;
    }
  }
  @media screen and (min-width: 1240px) and (max-width: 1266px) {
    .menuhidden {
      width: 17% !important;margin-left: 47%;
    }
  }
  @media screen and (min-width: 1214px) and (max-width: 1239px) {
    .menuhidden {
      width: 17% !important;margin-left: 48%;
    }
  }

  @media screen and (min-width: 1190px) and (max-width: 1213px) {
    .menuhidden {
      width: 16% !important;margin-left: 49%;
    }
  }
  @media screen and (min-width: 1160px) and (max-width: 1189px) {
    .menuhidden {
      width: 19% !important;margin-left: 49%;
    }
  }
  @media screen and (min-width: 1111px) and (max-width: 1159px) {
    .menuhidden {
      width: 17% !important;margin-left: 49%;
    }
  }

  @media screen and (min-width: 1080px) and (max-width: 1110px) {
    .menuhidden {
      width: 14% !important;margin-left: 52%;top: 99px;
    }
  }

  @media screen and (min-width: 1059px) and (max-width: 1079px) {
    .menuhidden {
      width: 16% !important;margin-left: 50%;top: 99px;
    }
  }

  @media screen and (min-width: 1028px) and (max-width: 1058px) {
    .menuhidden {
      width: 16% !important;margin-left: 50%;top: 99px;
    }
  }

  @media screen and (min-width: 993px) and (max-width: 1027px) {
    .menuhidden {
      width: 16% !important;margin-left: 50%;top: 106px;
    }
  }
  /*menu principal*/
  /*menu responsive*/
  nav {
    width: 100%;
    background-color: #fff;   
    margin-top: 5px;
    text-align: left;
    box-shadow: unset;
  }

  .side-nav .user-view .mybackground {
    background-color: #e07710;
  }
  #slide-out .user-view {
    background: #020049;
  }
  
  #slide-out .user-view .circle {
    width: 100px;
    height: auto;
    margin: 0 auto;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  #sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: transparent;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

/*estilo del scroll del menu*/

  #sidebar::-webkit-scrollbar {
      width: 8px;
  }

  #sidebar::-webkit-scrollbar-track {
      background: #e8e8e8;
      border-radius: 10px;
  }

  #sidebar::-webkit-scrollbar-thumb {
      background: #e8e8e8;
      border-radius: 10px;
      border: 2px solid #f1f5f9; /* Borde para separar del track */
  }

  #sidebar::-webkit-scrollbar-thumb:hover {
      background: #009591;
  }

/*fin - estilo del scroll del menu*/








  .header-front.toggled #sidebar-wrapper {
    width: 250px;
  }
  .side-nav {
    background-color: #fff;
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
    }
   .side-nav li > a {
     color: #a2a2a2;
     display: flex;
     align-items: center;
     font-size: 15px;
     font-weight: 500;
     padding: 5px 32px;
     background-color: #fff;
     font-weight: 400;
   }
   .side-nav i.demo-icon {
     font-size: 2rem;color: #a2a2a2;
   }
   
   .side-nav li > a:hover,
   .side-nav li > a:focus,
   .side-nav li > a:active {
     color: #fff;
     display: block;
     font-size: 15px;
     font-weight: 500;
     height: 48px;
     line-height: 50px;
     padding: 0 32px;
     background-color: #009591;
     font-weight: 400;
     
   }
   .side-nav i.demo-icon:hover,
   .side-nav i.demo-icon:focus,
   .side-nav i.demo-icon:active {
     font-size: 2rem;color: #fff;
   }

   .side-nav a {
    text-decoration: none;
  }

  .side-nav i.demo-icon {
    font-size: 2rem;
  }
   /*menu responsive*/
   .menu-desktop {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: 0px;
    background: rgb(237 233 233 / 18%);
  }

/*Fin estilos menu*/
/*Inicio estilos menu desplegable del usuario*/
  #dropdown-info-usuario {
    min-width: 250px;
    max-height: 700px;
    overflow-y: auto;
    width: 11rem !important;
    left: -161px;
    top: 15px;
  }

  #dropdown-info-usuario a{
    display: block;
    line-height: 22px;
    padding: 14px 16px;
    font-weight: 400;
    font-size: 0.9em;
  }

  #dropdown-info-usuario .btn-info-sidebar{
    color: #a2a2a2;
    background-color: #fff;
  }
  

  #dropdown-info-usuario #collapse-info-more-option > a{
    color: #fff;
    background-color: #009591;
    padding-left: 40px;
  }

  #dropdown-info-usuario #collapse-info-more-option > a:hover{
    color: #009591;
    background-color: #fff;
  }

  #dropdown-info-usuario i {
    font-size: 1.2rem !important;
  }

  .nombre_usuario{
    font-weight:700 !important;
    color: #a2a2a2 !important;
  }

  .cargo_usuario{
    font-weight: 400 !important;font-size: 0.8em !important;color: #a2a2a2 !important;
  }

  .dropdown .dropdown-toggle:not(.drop-foro)::after{
    content: "\f054";
    font-family: FontAwesome;
    transition-duration: 1s;
    border: 0;
    font-size: 12px;
  }
  .dropdown .dropdown-toggle:not(.drop-foro)[aria-expanded="true"]::after,
  .accordion-header[aria-expanded="true"] .rotate-right-arrow{
    transform: rotate(90deg);
    transition-duration: 1s;
  }
  .rotate-right-arrow{
    position: absolute;
    right: 10px;
  }
  .btn-info-sidebar::after {
    float: right;
  }
/*Fin estilos menu desplegable del usuario*/
/*Inicio estilos header_front-view*/
  .espacio {
    margin-left: 1rem!important
  }

  .perfil {
    font-weight: 500;
    font-size: 0.7em;
    color: #FFFFFF;
    margin-bottom: 0rem;
    text-align: center;
  }

  #content-notification{
    max-height:300px;
  }

  #imagen_menu{
    vertical-align: middle
  }
  .clear-file{
        position: absolute;
        right: 8px;
        font-size: 1.5em;
    }

/*Fin  estilos header_front-view*/
/*Inicio estilos home*/
    .row-home{
        background: #f1eeee !important;
    }
  .card{
    border: none;
    /*box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
    box-shadow:rgb(0 0 0 / 14%) 0px 1px 8px;
    /*border-radius: 14px;*/
  }
  .card-sesion{
    margin: 0;
    align-items: center;
  }
  .card-sesion .card-text{
    text-align: center;
      width: 60%;
  }
  .card-sesion .card-image{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: end;
  }
  .card-sesion .card-image,
  .card-sesion .card-image > img{
    border-radius: 0 0.25rem 0.25rem 0;
  }
  .card-generic .card-body{
    max-height: 170px;
    line-height: 20px;
  }
  .texto1 {
    font-weight: 700;font-size: 1em;color: #020049;
  }

  .texto-bienvenida {
    font-weight:800;
    font-size: 2em;
    color:#009591;
    line-height: 32px; /*interlineado*/
  }

  .progress-course{
    /*width: 98%;*/
    box-shadow: rgba(150, 150, 150, 0.59) 1px 1px 7px;
  }

  .progress-course>.total_curso {
    text-align: right;font-size: 14px;margin-right: 20px;
  }

  .porcentaje_progreso {
    color: #EAEAEA;
    font-size: 17px;
    text-align: center;
  }

  .progress-course .progress {
    height: 25px;
    background-color: #e7e3ed;
  }

  .progress {
    position: relative;
    height: 4px;
    width: 100%;
    border-radius: 25px;
    margin: 0.5rem 0 0.5rem 0;
    overflow: hidden;
  }

  .progress .progress-bar {
    background-color: #009591;
  }
    
  span.promedio {
    /*color: #020049;*/
    font-weight:700;
  }
  
  span.logros{
    /*color: #009591;*/
    font-weight:700;
  }

  .dark_text {
    color: #020049;
    text-align: left;
    font-weight:700;
    font-size: 1em;
  }
  @media (max-width: 992px) {
    
    .contenido {
      width: 100%;
    }
    .my-container {
      margin: 0 auto;width: 100%;
    }
  }

  .texto_total1 {
      color: #fff;
      font-weight: 700;
      font-size: 0.9em;
    }
    
  .texto_total2 {
      color: #e9ecf2;
      font-weight: 400;font-size: 0.78em;
    }
  @media screen and (min-width:1301px)and (max-width:1416px) {
    .texto_total1 {
      font-weight: 400;font-size: 1em;
    }
  }
  @media screen and (min-width:1201px)and (max-width:1300px) {
    .texto_total1 {
      font-weight: 400;font-size: 1em;
    }
  }
  @media screen and (min-width:1101px)and (max-width:1200px) {
    .texto_total1 {
      font-weight: 400;font-size: 0.9em;
    }
  }
  @media screen and (min-width:992px)and (max-width:1100px) {
    .texto_total1 {
      font-weight: 400;font-size: 0.9em;
    }
  }

  @media screen and (min-width:345px)and (max-width:430px) {
    .texto_total1 {
      font-weight: 400;font-size: 1.5em;
    }
  }

  @media screen and (min-width:245px)and (max-width:344px) {
    .texto_total1 {
      font-weight: 400;font-size: 1.2em;
    }
  }

  .titulo_disclaimer{
    color: #1450c9;
    font-weight: 700;
  }
  .texto_disclaimer{
      color: #1450c9;
      font-weight: 400;
      font-size: 1em;
      text-align: justify !important;
    }
    
  .btn_dis, .btn_dis:hover{
    color: #fff;
    background: #009490;
    font-weight: 600;
    font-size: 1em;
  }

  .btn_dis_no, .btn_dis_no:hover{
    color: #fff;
    background: #E5102F;
    font-weight: 600;
    font-size: 1em;
  }

/*Fin estilos home*/

/*Inicio estilos actualizar datos*/
  .explorar, .explorar:hover {
    background-color: #e07710;
    border: 0;
    color: #fff;    
    padding: 0px 0px;
    font-weight: 500;
    text-transform: capitalize; 
    width: 50%;
    text-align: center;
    margin-left: 0px;
    margin-bottom: 0px;
    height: 3em;
    font-size: 0.9em;
  }
/*Fin estilos actualizar datos*/

/*Inicio estilos actualizar contraseña*/
  .mensaje-info{
    color:#020049; font-weight: 400;font-size: 1em;
  }
/*Fin estilos actualizar contraseña*/
/*Inicio estilos soporte y ayuda*/
  .contenido-soporte{
    float: none; width: 100%;
  }
/*Fin estilos soporte y ayuda*/

/*Inicio estilos ranking*/
  span.posicion{
    color: #ffffff;
    font-weight:900;
  }

  .logros{
    /*color: #009591;*/font-weight:700;
  }
  .botones_tabla  {
    font-size: 14px;
    color: #494949;
    text-align: center;
    font-weight: 600;
    border: solid 1px #a2a2a2;
    background: transparent;
    width: 100%;
    margin-top: 0px;
    padding: 7px 3px;
    margin: 0px 2px;
    border-radius: 8px;
  }
  
  .botones_tabla:hover  {
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    border: 0;
    background: #009591;
    width: 100%;
    margin-top: 0px;
    padding: 7px 3px;
    margin: 0px 2px;
  }
  
    .titulo-tabla-head {
        text-align: center;
        background-color: transparent;
        color: #009591;
        font-size: 1em;
        font-weight: 600;
        /* padding: 0.2rem; */
        border-radius: 0.7rem;
        align-items: anchor-center;
        justify-content: space-between;
        padding-left: 22px;
        padding-right: 12px;
    }
    
    .titulo-tabla-textos-f {
        text-align: center;
        background-color: #e8e8e8;
        color: #494949;
        font-size: 1em;
        padding-left: 22px;
        padding-right: 12px;
    }
    
    tr.subtitulos {
        background-color: #dcdcdc;
    }
    
    .td-border {
        border-bottom: solid 1px #dcdcdc;
    }

  .texto_total {
    /*color: #020049;*/font-weight: 400;font-size: 1.8em;/*font-size: 1.5em;*/
  }
  @media screen and (min-width:1301px)and (max-width:1416px) {
    .texto_total {
      font-weight: 400;font-size: 1.8em;/*font-size: 1.3em;*/
    }
  }
  @media screen and (min-width:1201px)and (max-width:1300px) {
    .texto_total {
      font-weight: 400;font-size: 1.5em;/*font-size: 1.13em;*/
    }
  }
  @media screen and (min-width:1101px)and (max-width:1200px) {
    .texto_total {
      font-weight: 400;font-size: 1.4em;/*font-size: 1.06em;*/
    }
  }
  @media screen and (min-width:992px)and (max-width:1100px) {
    .texto_total {
      font-weight: 400;font-size: 1.2em;/*font-size: 0.9em;*/
    }
  }
  @media screen and (min-width:901px)and (max-width:991px) {
    .texto_total {
      font-weight: 400;font-size: 1.6em;
    }
  }

  @media screen and (min-width:800px)and (max-width:900px) {
    .texto_total {
      font-weight: 400;font-size: 1.4em;
    }
  }
  @media screen and (min-width:768px)and (max-width:799px) {
    .texto_total {
      font-weight: 400;font-size: 1.4em;
    }
  }

  @media screen and (min-width:590px)and (max-width:767px) {
    .texto_total {
      font-weight: 400;font-size: 1.7em;
    }
  }

  @media screen and (min-width:485px)and (max-width:589px) {
    .texto_total {
      font-weight: 400;font-size: 1.4em;
    }
  }
  @media screen and (min-width:385px)and (max-width:484px) {
    .texto_total {
      font-weight: 400;font-size: 1.3em;
    }
  }

  @media screen and (min-width:200px)and (max-width:384px) {
    .texto_total {
      font-weight: 400;font-size: 0.8em;
    }
  }
/*Fin estilos ranking*/

/*Inicio estilos evaluaciones y contenido*/
  .question {
    /*width: 60%; hace que no se vea la preguntas y respuestas*/
    margin: 1rem;
    text-align: left;
    padding: 1rem;
    background: #c6c7d354;
    border-radius: 5px;
    font-size: 1.05rem;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 25%);
    color:#000
  }
  
  .info_eval{
    /*width: 70%;
    margin: 0.2rem;*/
    text-align: center;
    /*padding: 0.2rem;*/
    background: #a2a2a2;
    border-radius: 5px;
    font-size: 0.9rem;
    box-shadow: 0px 5px 10px rgba(0,0,0,.25);
    color:#fff;
    font-weight: 700;
  }
  
  .info_correcta{
    /*width: 80%;*/
    /*margin: 0.2rem;*/
    text-align: center;
    /*padding: 0.2rem;*/
    background: #035525;
    border-radius: 5px;
    font-size: 0.9rem;
    box-shadow: 0px 5px 10px rgba(0,0,0,.25);
    color:#fff;
    font-weight: 700;
  }
  .info_incorrecta{
    /*width: 80%;
    margin: 0.2rem;*/
    text-align: center;
    /*padding: 0.2rem;*/
    background: #db0404;
    border-radius: 5px;
    font-size: 0.9rem;
    box-shadow: 0px 5px 10px rgba(0,0,0,.25);
    color:#fff;
    font-weight: 700;
  }

  .info_porcentaje{
    /*width: 80%;
    margin: 0.2rem;*/
    text-align: center;
    /*padding: 0.2rem;*/
    background: #797a7d;
    border-radius: 5px;
    font-size: 0.9rem;
    box-shadow: 0px 5px 10px rgba(0,0,0,.25);
    color:#fff;
    font-weight: 700;
  }

  .info_porcentaje2{
    /*width: 80%;
    margin: 0.2rem;*/
    text-align: center;
    /*padding: 0.2rem;*/
    background: #000;
    border-radius: 5px;
    font-size: 0.9rem;
    box-shadow: 0px 5px 10px rgba(0,0,0,.25);
    color:#fff;
    font-weight: 700;
  }

  .info_eval:hover, .info_correcta:hover, .info_incorrecta:hover, .info_porcentaje:hover {
    transform: scale(1.1);
  }
  

  @media screen and (min-width:200px)and (max-width:992px) {
    /*.question {
      width: 100%;
    }*/
  }
  @media screen and (min-width:200px)and (max-width:768px) {
    /*.info_eval, .info_correcta, .info_incorrecta, .info_porcentaje {
      width: 100%;
    }*/
  }
  .num_pregunta {
    font-size: 15px;font-weight:700;color: #000;
  }

  .resp_correcta {
    color: #09AC04;font-weight: 800;
  }

  .resp_errada {
    color: #F70707;font-weight: 800;
  }

  .icon-57{
    font-size: 1.25rem;
  }

  .name, .link, .score, .url {
    text-align: center;
    padding: 10px 23px;
    /*color: #020049;*/
    font-size: 1em;
    font-weight: 400;
  }

  .name {
    width: 35%;
  }

  .generic-table{
        width: 90%;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 0.7rem;
        border-collapse: collapse;
    }

  .generic-table tbody tr:first-child td:first-child {
    border-top-left-radius: 10px; /* Esquina superior izquierda */
  }
  
  .generic-table tbody tr:first-child td:last-child {
    border-top-right-radius: 10px; /* Esquina superior derecha */
  }

  .generic-table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
  }


  .generic-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
  }
    

  .generic-table td, .generic-table th {
    vertical-align: middle;
    background-color: #e8e8e8;
  }
  
  .generic-table thead th {
    vertical-align: bottom;
    /* border-bottom: 2px solid #DFE0E2; */
    text-align: center;
  }
  
  /*.th-border{
        border-radius:87px;
    }*/

  .btnEval, .btnEval:hover, .btnEval:focus{
    cursor: pointer;
    margin: 0px;
    background-color: #009591;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-weight: 900;
    padding: 7px 11px;
  }
  .contenedort {
    z-index: 2;
    
  }
  .timer {
    display: block;
    text-align: center;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    z-index: 3;
    width: auto;
    font-weight:700;
    color: #fff;
    background-color: #000;
    border-radius: 0.25rem;
    box-shadow: rgb(0 0 0 / 35%) 0px -3px 15px;
    margin-left: 35%;
  }

  .evaluacion_titulo{
    font-weight:700;/*color:#020049;*/
  }

  .evaluacion_titulo1{
    font-weight: 500;/*color:#020049;*/
  }

  .texto_preguntas{
    color:#000; font-weight: 500;
  }

  .sec_pregunta {
    border: 0.5px solid #a2a2a2;
    background-color: #c6c7d354;
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;
    color: #000000;
  }

  .sec_respuestas {
    border-left: 0.5px solid #a2a2a2;
    border-right: 0.5px solid #a2a2a2;
    border-bottom: 0.5px solid #a2a2a2;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 0 0 10px 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }

  .sec_respuestas label {
    color: #000;
  }

  .btn_evaluacion {
    /*background: #4495d1;*/
    border: 0;
    color: #fff;
    text-transform: uppercase;
    font-weight:700;
    text-align: center;
    text-align: center;
    margin-left: 10px;
    padding:10px 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 10px !important;

  }

/*Fin estilos evaluaciones y contenido*/

/*Inicio estilos notas y certificados*/
  .textcolor1{
    /*color:#020049;*/font-weight:700;
  }

  .textcolor2{
    /*color:#020049;*/font-weight: 400;
  }

  .color-link {
    color: #009591;
    border: 1px solid #009591;
    border-radius: 10px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .color-link:hover{
    color: #FFFF;
    background-color: #2ebfff;
  }

  .color-link2 {
    color: #494949;
    border: 1px solid #009591;
    background-color: #fff;
    border-radius: 7px;
    padding: 10px;
    vertical-align: middle;
    align-items: center;
    display: inline-flex;
  }

  .color-link2:hover{
    color: #FFF;
    background-color: #009591;
  }

  .color-link3{
    color: #FFF;
    border: 1px solid #009591;
    background-color: #009591;
    border-radius: 8px;
    /*padding: 10px;*/
    vertical-align: middle;
    align-items: center;
    display: inline-flex;
  }

  .color-link4{
    color: #FFF;
    border: 1px solid #52c2c8;
    background-color: #52c2c8;
    border-radius: 8px;
    padding: 10px;
    vertical-align: middle;
    align-items: center;
    display: inline-flex;
  }

  table.webinars {
    border-collapse: collapse;
    border-spacing: 0;
    width: 90%;
    border: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
/*Fin estilos notas y certificados*/

/*Inicio estilos cursos y contenido*/

  .item_course {
    text-align: center;text-decoration: none; 
    /*background-color: aliceblue;
        border-radius: 12px;
        margin-left: 12px;*/
  }
  
  .item_course a {
    text-decoration: none;
  }
  
  .img_course img {
    max-width: 200px;max-height: 200px;
    background-color: aliceblue;
        border-radius: 12px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    
  }
  
  .img_course i {
    position: absolute;
  }
  
  .title_course { 
    margin: 0 auto;
    overflow-y: hidden;
    border-radius: 0 0 10px 10px;
    padding: 5px 0.5rem;
  }
  
  .title_course span, .title_course span:hover {
    /*color: #020049;*/
    font-weight: 500;
    font-size: 17px;
    vertical-align: middle; 
  }

  .title_course {
    display: block;
  }

  .titulos{
    /*color:#020049;*/ font-weight:700;text-align:center;
  }
  
  .enlace_examen{
    font-weight: 600;color: #000;
  }
/*Fin estilos cursos y contenido*/

/*Inicio Examen curso*/
.rating-wrapper .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #fff;
  color: #020049;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  left: 6rem;
  z-index: 1;
  cursor: pointer;
}

.rating:hover .tooltiptext {
  visibility: visible;
}
/*Fin Examen curso*/

/*Inicio estilos notificaciones*/

  /* Inicio TK001Avisos-20220622 */
  .badge-notifications{
    position: absolute !important;
    border-radius: 50%;
    background-color: #009591 !important;
    border: 1px solid #009591;
    color: #FFFF !important;
    font-size: 0.65rem !important;
    font-weight: 600;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 4px 8px, rgba(0, 0, 0, 0.23) 0px 3px 3px;
    margin-left: 15px !important;
    line-height: 1;
    padding: 0;
  }
  .btn-notification{
    background-color: transparent !important;
    padding: 3px !important;
    color: #a3a3a3;
    border: 0;
    box-shadow: none;
    font-size: 1.5rem;
  }

  .btn-notification:hover,
  .btn-notification:focus,
  .btn-notification[aria-expanded="true"]{
    color: #009591;
    box-shadow: none;
  }
  #dropdown-notification{
    width: 300px !important;
  }
  #dropdown-notification li > a, #dropdown-notification li > span {
    line-height: 18px !important;
  }

  .badge-notificacion::after{
    content: '';
    background-color: #28a745;
    width: 10px;
    height: 10px;
    float: right;
    padding: 1px !important;
    border-radius: 50%;
  }
  #content-notification li {
    min-height: inherit;
  }

  #content-notification::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
  }

  #content-notification::-webkit-scrollbar
  {
    width: 6px;background-color: #F5F5F5;
  }

  #content-notification::-webkit-scrollbar-thumb
  {
    background-color: #b2b6b7;
  }

    #profile-card{
        max-width: 300px;
        margin: 0 auto;
        margin-bottom: 15px;
        max-height: 390px;
        height: 390px;
    cursor: pointer;
    }
    #profile-card .card-image {
        height: 150px;filter: blur(3px);
    }
    #profile-card .card-image > img{
        height: 150px;
        filter: blur(3px);
        height: 150px;
        background-size: cover;
        box-shadow: 0 4px 9px rgb(0 0 0 / 8%);
        object-position: center;
        object-fit: cover;
    }
    #profile-card .card-profile-image {
        width: 70px;
        max-height: 70px;
        position: absolute;
        top: 104px;
        z-index: 1;
        cursor: pointer;
    }

  .box-primary {
        border-top: 3px solid #020049;
        border-radius: .25rem;
        padding-top: 10px;
        word-wrap: normal;
        /*max-width: 280px;*/
        max-width: 330px;
        margin: 0 auto;
    }
    
    .profile-user-img {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        padding: 3px;
        border: 3px solid #d2d6de;
        border-radius: 50%;
        display: block;
    }
    
    .list-group-item span{
        font-size: 0.9rem;
    }
    
    .sesion-biografia ul,
    .sesion-biografia ul > li{
        padding-left: revert;list-style-type: initial;
    }
    
    .sesion-biografia h1, 
    .sesion-biografia h2,
    .sesion-biografia h3,
    .sesion-biografia h4,
    .sesion-biografia h5,
    .sesion-biografia h6 {
        font-size: revert;margin: revert;font-weight: revert;
    }
    
    .sesion-biografia table {
        border-collapse: revert;border-spacing: 0;
    }
    
    .sesion-biografia table,
    .sesion-biografia th,
    .sesion-biografia td {
        border: 1px solid;
    }
    
    .sesion-biografia caption {
        color: #575756;text-align: revert;caption-side: inherit;
    }
    
    .card-header{
        background-color: #009591;
    color: #FFF;
    text-align: center;
    }
    
    .card .card-content p {
        margin: revert;
    }
    
    .list-group{
        margin-bottom: 0;
    }
    
    .list-group-item+.list-group-item {
        border-top-width: 0;
    }
    
    .icono-enlace{
        display: flex; align-items: center;
    }
    
    .icono-enlace > img{
        width: 25px; margin-right: 7px;
    }
  /* Fin TK001Avisos-20220622 */

  .espacio-icono{
        font-size: 2.2em; margin-right: 10px;
    }

/*Fin estilos notificaciones*/

/*Inicio estilos noticias*/
  .mensaje_noticias{
    color:#000;font-weight: 500;
  }
  .mensaje_noticias2{
    color:#000;font-weight: 500;
  }
  .card .fecha-publicacion {
    margin-bottom: 5% !important;
    font-size: 15px;
    color:#000;
    font-weight: 600;
  }
  .card .card-title {
        color:#000;
    font-weight: 800;
    }

    .card .descripcion {
        color:#000;font-weight: 400;
    }

  .card .card-action .link_noticias{
    color:#009591 !important;font-weight:700 !important;
  }

  .titulo-publicacion {
        color: #000;margin-bottom: 5%;font-weight:700;
    }

  .contenido-publicacion p {
        font-size: 1.25em;font-weight: 400;color:#000;
    }

/*Fin estilos noticias*/

/*Inicio estilos webinar*/
  .my-containerwebinar {
    margin: 0 auto;width: 100%;
  }

  .webinar {
    background: #009591;
    border: 0;
    color: #fff;
    text-transform: uppercase;
    padding: 6px 16px;
    font-weight:700;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 9px;
    width: 50%;
  }

  .titulo_webinar{
    font-weight:700;color:#020049;margin-left: 6px;
  }

  .my-container-web {
    margin: 0 auto;width: 90%;
  }

  .azul {
    background-color: #009591 !important;
  }

  .seleccion {
        background-color: transparent;
        width: 100%;
        padding: 5px;
        border: none;
        border-radius: 2px;
        height: 3rem;
        border-bottom: 1px solid #9e9e9e;
    }

  .dataTables_wrapper{
    width:100% !important;
  }
  .dataTables_wrapper .dataTables_paginate {
    padding-top: 1.25em
  }
  
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
  }

  table.dataTable.no-footer {
    border-bottom: 1px solid #ddd !important; 
  }
     
  table.dataTable thead th, table.dataTable thead td {
    padding: 10px 18px;border-bottom: 1px solid #ddd !important;
  }

  [type=search] {
    outline-offset: 0;
    -webkit-appearance: auto;
  }
/*Fin estilos webinar*/

/*Inicio estilos cursos en mallas*/
  .title_section {
    color: #009591;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 400;
  }

  .subtitulo-seccion {
    font-weight: 700;
    font-size: 22px;
    color: #020049;
    padding: 11px 40px 11px 20px;
    white-space: nowrap;
  }
/*Fin estilos cursos en mallas*/

/*Inicio estilos evades*/
  #texto-title-encuesta {
    font-size: 1.9em;
    color: #e07710;
    font-weight: 500;
    padding-bottom: 0.9em;
  }
  #texto-desc-encuesta {
    font-size: 1.3em;color: #009591;
  }
/*Fin estilos evades*/
/*Inicio estilos saberes*/
  .name_promalla {
    position: absolute;
    top: 115%;
    left: 50%;
    transform: translate(-55%, -50%);
    color:#020049;
    font-weight:700;
    font-size: 17px;
    line-height: 1.1em;
  }

/*Fin estilos saberes*/
/*Inicio estilos cursos libres*/
  .item-libre .image {
    max-width: 150px;margin: 0 auto;margin-bottom: 15px;
  }

  .subtitulo-libre {
    font-size: 30px;font-weight:700;
  }

  .item-libre .nombre {
    text-align: center;color: #009591;
  }

  .subtitulo-libre.cursos {
    margin-top: 50px;
    border-top: 1px solid #bbb;
    padding-top: 30px;
    color: #009591;
    margin-bottom: 40px;
  }

  .curso-libre .card-image {
    margin: 0 auto;padding: 15px;
  }

  .curso-libre .card-image img {
    width: 100%;max-width: max-content;margin: 0 auto;
  }

  .curso-libre .card-title {
    font-size: 17px;
    overflow: hidden;
    font-weight: 800;
    color: #009591 !important;
  }

  .curso-libre .descripcion {
    text-transform: lowercase;
  }

  .curso-libre .card {
    width: 100%;
    max-width: 270px;
    height: 338px;
    margin: 0 auto;
    margin-bottom: 30px;
  }
/*Fin estilos cursos libres*/

/*Inicio estilo slider*/
  .carousel .carousel-item img{
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 12px; /*cambio mjp procaps redi*/
  }

  /* Estilo para los botones de los indicadores (circulares) */

  .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px;
    height: 10px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6sease;
    border-radius: 50%;
}

/* Estilo cuando el indicador está activo */
.carousel-indicators .active {
  background-color: #6c757d; /* Gris para el punto activo */
  opacity: 1; /* El punto activo tiene opacidad completa */
}

/* Estilo cuando se pasa el ratón por encima de los indicadores */
.carousel-indicators button:hover {
  opacity: 0.8; /* Mayor visibilidad cuando se pasa el ratón por encima */
}


/*Fin estilo slider*/

/*Inicio estilo tablas*/
  .contenedor-tabla{
    background-color: #FFF;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-radius: 0.7rem;
  }

  .titulo-tabla {
    text-align: center;
    background-color: #009591;
    color: #fff;
    font-size: 1.5em;
    font-weight:700;
    padding: 0.2rem;
    border-radius: 0.7rem;
  }

  .titulo-tabla2 {
    text-align: center;
    background-color: #009591;
    color: #fff;
    font-size: 1.5em;
    font-weight:700;
    padding: 0.2rem;
    border-radius: 0.7rem;
  }

  .table-title th {
    text-align: center;
    background-color: #009591;
    color: #fff;
    font-size: 1.5em;
    font-weight:700;
    padding: 0.2rem;
    border-radius: 0.7rem;
    border: none;
  }

  

  table .table-title2 th {
    text-align: center;
    background-color: #FFF;
    color: #000;
    font-size: 18px;
    text-align:center; 
    font-weight:700;
    padding: 1.5rem;
    border: none;
  }
  
  .table-title3 th {
    text-align: center;
    background-color: #797a7d;
    color: #fff;
    font-size: 1.5em;
    font-weight:700;
    padding: 0.2rem;
    /*border-start-end-radius: 15px;
    border-start-start-radius: 15px;
     border-top-left-radius: 15px;
        border-top-right-radius: 15px;*/
  }
     

  table tbody td, table thead th {
        text-align: center;
    }
  .pagination li a {
    color: #000;
    display: inline-block;
    font-size: 1.2rem;
    padding: 0 10px;
    line-height: 30px;
  }
  .pagination li.active {
    background-color: #009591;
    /*border-radius: 8px;*/
    width: 35px;
    text-align: center !important;
    /*usado en mentorias tambien*/
    border-radius: 4px;
  }
  .pagination li.active > a{
    color: #FFF;
  }

  .list1 {
    justify-content: right;
  }
  
    th.titulo-t-rank {
        color: #a3a3a3 !important;
    }
/*Fin estilo tablas*/

/*Inicio estilo Foros*/
  .body-foro {
    background-repeat: repeat-x;
    font-family: Rubik;
    color: #000 !important;
    background-color: transparent !important;
  }
  .breadcrumb-foro{
    background: #009591 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    padding: .9rem;
    list-style: none;
    margin: 0;
    border-radius: 0.4rem;
    width: 97%;
    /*width: 1241px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;*/

  }
  .breadcrumb-foro li a{
    color : #fff !important;
  }
  .breadcrumb-foro .divider {
    padding: 0 5px;color: #fff;
  }

  .li-a-foro{
    font-size: 17px;color: #a2a2a2!important;
  }
  .td-tiempo-foro{
    font-size:12px;color:#a2a2a2;vertical-align: middle;font-weight: 700;
  }

  .td-foros{
    font-size:15px;
  }

  .link-foros{
    color: #a2a2a2!important;font-weight: 700;
  }

  .dropdown-toggle-foros {
    background-color: #fff !important;border: 1px solid #a2a2a2 !important;color: #a2a2a2 !important;
  } 
  .tabla-foro{
    font-size: 17px;color: #a2a2a2;
  }

  .text-foro{
    font-size: 14px;color: #a2a2a2!important;font-weight: 700;
  }

  .nombreusu-foro{
    font-size:12px;float:right;position: relative;top:14px;font-weight: 700;
  }

  .text2-foro{
    font-size: 15px;color: #a2a2a2!important;
  }

  .eliminar-foro{
    font-weight: bold;color:#ff0000;font-size: 14px;
  }
  .linkviewtip{
    font-size: 15px;
  }

  .drop-foro{
    border: 1px solid #d9d9d9;font-size: 12px; width: 100%;
  }

  .div-wsy-foro{
    font-size:15px; font-weight: 400; background: #ededed;padding:5px; width: 100%;
  }

    /*este estilo tambien se usa en el administrador*/
  .btn-success-foro {
    color: #fff !important;border-color: #009591 !important;background: #009591 !important;
  }

  .navbar-inner{
    background: #000 !important;box-shadow: 0 2px 5px rgba(0, 0, 0, .3);padding: .9rem;
  }

  .well-foro {
    background-color: #fff !important;box-shadow: 0 2px 5px rgba(0, 0, 0, .3);font-weight: 700;
  } 

  .cat {
    font-weight: 700;font-size: 11px;color: #000!important;
  }

/*Fin estilo Foros*/

/* Inicio Details*/
details {
  padding: 0 1rem;
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 15%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px;
}

details summary {
  padding: 1rem 2em 1rem 0;
  display: block;
  cursor: pointer;
  transition: margin 150ms ease-out;
}

details[open] summary .icon {
  transform: rotate(90deg);
  transition-duration: 1s;
}

details[open] summary{
  margin-bottom: 10px;
}

details summary .icon {
  transition-duration: 1s;
}
/* Fin Details*/

/* Inicio Saberes */
/*Inicio preoload */
#sesion-saberes .sesion-preload{
  position:absolute;
  display: none;
  top: 15%;
  left: 301px;
  width: 90%;
  height: 80%;
  text-align: center;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 25px;
  font-family: Ubuntu, sans-serif;
  
}
#sesion-saberes .preloader {
  margin: auto;
  width: 100px;
  height: 100px;
  border: 10px solid #eee;
  border-top: 10px solid #666;
  border-radius: 50%;
  animation-name: girar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*Fin preoload */

#sesion-saberes .mostrar-menu{
  display: none;        
}

#sesion-saberes .accordion > .demo-icon,
#sesion-saberes .calificaciones > .demo-icon {
  font-family: "iconos-sistel" !important;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  color: #565858;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#sesion-saberes .principal{
  display: grid;
  grid-template-columns: 300px auto;
}

/* Estilos del espacio del menú */
#sesion-saberes .zone_1
{
  background: white;
  height: 80vh;
  width: 299px;
  overflow-y: auto;        
  border-right: 2px solid #a1a5a5;
}

/* Estilos del espacio donde se muestra el contenido */
#sesion-saberes .zone_2
{
  background: #ffff;
  max-height: 80vh;
  padding: 2%;
  transition: all 5s;
}

/*#sesion-saberes button:focus {
  background-color: #009591;
  color:#f1f4f7;
}*/

#sesion-saberes .contenedor_ppal {
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.09);
  width: 100%;
  padding: 15px;
  overflow: auto;
  max-height: 74vh       
}

/* Estilos del Scroll solo funcioa en Chrome */
#sesion-saberes .contenedor_ppal::-webkit-scrollbar-track,
#sesion-saberes .zone_1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #ffffff;
}

#sesion-saberes .contenedor_ppal::-webkit-scrollbar,
#sesion-saberes .zone_1::-webkit-scrollbar
{
  width: 6px;
  background-color: #dae0df;
}

#sesion-saberes .contenedor_ppal::-webkit-scrollbar-thumb,
#sesion-saberes .zone_1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #b2b6b7;
}
/* FinEstilos del Scroll */

/* Escrol Firefox */
@-moz-document url-prefix() {
#sesion-saberes .contenedor_ppal, .zone_1
  {
    scrollbar-color: #b2b6b7 #ffffff;
    scrollbar-width: thin;
  }
}

#sesion-saberes .contenedor_ppal>* {
  max-width: 100%;
  max-height: 100%;
  border: 0;
  margin-left: auto;
  margin-right: auto;
}

#sesion-saberes .contenedor_ppal audio,
#sesion-saberes .contenedor_ppal video,
#sesion-saberes .contenedor_ppal img,
#sesion-saberes .contenedor_ppal iframe {
  width: 90%;
}

#sesion-saberes .contenedor_ppal img {
  object-fit: cover;
}

#sesion-saberes audio:hover,
#sesion-saberes audio:focus,
#sesion-saberes audio:active,
#sesion-saberes video:hover,
#sesion-saberes video:focus,
#sesion-saberes video:active img:hover,
#sesion-saberes img:focus,
#sesion-saberes img:active iframe:hover,
#sesion-saberes iframe:focus,
#sesion-saberes iframe:active {
  -webkit-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

/* Acordion */
#sesion-saberes .accordion, .calificaciones {
  display: flex;
  align-items: center;
  background-color: #ffff;
  color: #565858;
  cursor: pointer;
  padding: 12px 2px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  font-family: Rubik, sans-serif;
  transition: 0.4s;
  border-bottom : 0px  transparent;
  border-left: 0px  transparent;
  font-weight: 500;
}

#sesion-saberes .icono {
  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
  font-size: 12px;
  margin-left: 5px;
  margin-right: 5px;
}

#sesion-saberes .zone_1 > .active .icono {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  color:#ffffff;
}

#sesion-saberes .zone_1 > .active, 
#sesion-saberes .accordion:hover {        
  background-color: #009591;       
  color: #ffffff !important;
}

#sesion-saberes .panel {
  display: none;
  background-color: white;
  overflow: hidden;
}

#sesion-saberes .panel .acordion-flujo 
{      
  padding: 10px 0 6px 35px;
  font-size: 15px;
  background-color: #ebeef1;
}

#sesion-saberes .panel .acordion-flujo:hover
{      
  color: #ffff;
  background-color: #a2a2a2;
}

#sesion-saberes .panel > .acordion-flujo.active
{
  background-color: #a2a2a2 !important;
  color: #ffff;
}

#sesion-saberes .archivo_flujo > .accordion {
  padding: 7px 0 9px 70px;
  font-size: 14px;
  background-color: #ffff;
  color: #000000;
}

#sesion-saberes .archivo_flujo > .accordion:hover {
  background-color: #f1f4f7;
  color: #403f3f !important;
}

/* TK001 .active-document */
#sesion-saberes .archivo_flujo > .accordion:focus,
#sesion-saberes .archivo_flujo > .active-document {
  border-left: 4px solid #403f3f;
  /*color: #88b41f;*/
  color: #403f3f !important;
  font-weight: 700;
}

#sesion-saberes .contenedor_arc > .nivel_dos{
  font-size: 14px;
  padding-left: 35px;
  background-color: #ebeef1;
}

#sesion-saberes .contenedor_arc > .nivel_dos:hover{
  background-color: #a2a2a2 ;
}

/* TK001 .active-document */
#sesion-saberes .contenedor_arc > .nivel_dos:active,
#sesion-saberes .contenedor_arc > .nivel_dos:focus,
#sesion-saberes .contenedor_arc > .active-document
{
   /* border-left:4px solid #009591 ;*/
  color: #fff;
  background-color: #a2a2a2 ;
  font-weight: 700;
}

#sesion-saberes .zone_1 .flecha{
  float: left;
}

#sesion-saberes .icono_carpeta
{
  font-size: 24px;
  margin-left: 4px;
  margin-right: 10px;
  color: #009591;
}

#sesion-saberes .active .icono_carpeta
{
  color: #ffff;
}

#sesion-saberes .titulo
{
  width: 100%;
}

#sesion-saberes .retroceso{  
  text-align: left;
  padding: 14px 0px;
  background-color: #ffff;
}

#sesion-saberes .retroceso a{
  display: flex;
  align-items: center;
  color:#009591;
  font-family: Rubik, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

#sesion-saberes .retroceso a i{   
  color: #009591;
  margin-left: 15px;
  margin-right: 15px;
  -webkit-transform: rotate(-20deg);
  padding: 1px; 
  background: #fff;
  border-radius: 15px;
  font-size: 20px;
}

#sesion-saberes .download_img > a > i
{
  font-size: 20px;
  color: #ffff;
  display: inline-block;
}

#sesion-saberes .mensaje_error
{
  background-color: #ecebeb;
  /*height: 50vh;*/
  height: auto;
  margin: 20px 70px;
  padding: 40px 20px;
  border: 0px;
  border-radius: 10px;
}

#sesion-saberes .mensaje
{
  font-size: 20px;
}

#sesion-saberes .nota_pregunta
{
  position: absolute;
  padding: 8px 0;
  bottom: 0;
  width: 90%;
}

#sesion-saberes .acordion-contenido > i :hover{
  color:red;
}

#sesion-saberes .orange.lighten-3 {
  background-color: #ffcc80 !important;
}

#sesion-saberes .timer {
  position: fixed;
  z-index: 2;
  width: auto;
  font-weight: 700;
  right: 1px;
  top: 140px;
  color: #000;
  display: table;
}

#sesion-saberes .timer > div{
  vertical-align: middle;
    display: table-cell;
}

/* TK001 Media Querys */
@media only screen and (max-width: 820px) {
  /* inicio boton menu */
  #sesion-saberes .mostrar-menu{
    display: block;
    position: fixed;
    right: 3px;
    background: #009591;
    border: 0;
    border-radius: 50%;
    padding: 8px 10px;
    color: #FFFF;
    box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
  }
  #sesion-saberes .mostrar-menu:hover,
  #sesion-saberes .mostrar-menu:focus,
  #sesion-saberes .mostrar-menu:active{
    background: #8b8b8b;
  }
  #sesion-saberes .mostrar-menu > i{
    font-size: 1.5em;
    color: #ffffff;
  }
  /* Fin boton menu */
  #sesion-saberes .principal {
    display: grid;
    grid-template-columns: 100%;
  }
  #sesion-saberes .zone_1 {
    position: absolute;
    height: 100%;
    left: -300px !important;
    z-index: 40;
    transition-duration: 1s;
    height: 80vh;
  }
  #sesion-saberes .zone_2{
    /*position: absolute;*/
  }
  #sesion-saberes .zone_active{
    position: absolute;
    left:0 !important;
    transition-duration: 1s;
    z-index: 40;
    /*height: calc(100% - 302px);*/
    height: 80vh;
  }
  #sesion-saberes .mensaje_error{
    margin: 0;
    overflow: auto;
  }
  #sesion-saberes .contenedor_notas {
    padding: 0 !important;
    overflow: auto;
  }
  #sesion-saberes .contenedor_ppal iframe {
    width: 100%;
  }
}

/* Fin saberes */

.custom-file-uploader {
  position: relative;
}
.custom-file-uploader input[type='file'] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: default;
}

/*Estrella*/
.clasificacion
{
  display: inline-flex !important;
}
.clasificacion input[type="radio"] {
  display: none !important;
}

.clasificacion label {
  color     : grey !important;
  content   : none !important;
  padding   : 0 !important;
  border    : 0 solid transparent !important;
  color     : rgba(0,0,0,0.09) !important;
  position  : none !important;
}

.clasificacion label:before {
  color     : grey !important;
  content   : none !important;
  padding   : 0 !important;
  border    : 0 solid transparent !important;
  color     : #fff !important;
  position  : none  !important;
}
.clasificacion label:after {
  color     : grey !important;
  content   : none !important;
  padding   : 0 !important;
  border    : 0 solid transparent !important;
  color     : #fff !important;
  position  : none  !important;
  font-size : 16px !important;
  background : transparent !important;
}

.clasificacion {
  direction: rtl !important;
  unicode-bidi: bidi-override !important;
}

.clasificacion label:hover,
.clasificacion label:hover ~ .clasificacion label {
  color: orange !important;
  content: none !important;
}

.clasificacion > input[type="radio"]:checked ~ label {
  color: orange !important;
  content: none !important;
}
/* Fin Estrellas*/

.custom-control-input:disabled ~ .custom-control-label {
  cursor: not-allowed;
}

.custom-control .custom-control-input.is-valid:disabled:checked~.custom-control-label{
  color: #fff;
  font-weight: 500;
  background-color: #1c810680 !important;
  border-color: rgb(28 129 6 / 50%)!important;
}
.custom-control .custom-control-input.is-valid:disabled:checked~.custom-control-label::before {
  background-color: rgb(28 129 6 / 50%) !important;
  border-color: rgb(28 129 6 / 50%)!important;
  
}

.custom-control .custom-control-input.is-invalid:disabled:checked~.custom-control-label{
  color: #fff;
  font-weight: 500;
  background-color: rgb(153 8 8 / 50%)!important;
  border-color: #99080880!important;
}
.custom-control .custom-control-input.is-invalid:disabled:checked~.custom-control-label::before {
  background-color: rgb(153 8 8 / 50%)!important;
  border-color: rgb(153 8 8 / 50%)!important;
}
.custom-control-label::after,
.custom-control-label::before {
    top: 0.2rem;
    /*left: -1.5rem;*/
    left: -1.5rem;
}
.custom-control-input:checked~.custom-control-label {
  color: #fff;
    border: 1px solid #a2a2a2;
    background-color: #a2a2a2;
    border-radius: 5px;
    padding: 3px;
}

/*Inicio Estilos reporte de jefes*/
.shadow-card {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.25)!important;
  border: 1px solid rgba(0,0,0,.125);
}

.color-link-seguimiento, .color-link-seguimiento:hover{
    font-weight: 900;
    color:#009591;
}
.btn-ver,.btn-ver:hover{
    color:#009591;
    font-weight: 900;
}
.card-stats-compare{
  line-height: 14px;
  font-weight: 400;
  font-size: 0.9em;
}

.card-sesion-seguimiento{
  margin: 0;
  align-items: center;
}
.card-sesion-seguimiento .card-text{
  text-align: center;
  width: 60%;
}
.card-sesion-seguimiento .card-image{
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cin, .colaborador, .sede, .completado, .link , .curso, .calificacion, .regional, .cargo , .completado{
  text-align: center;
  padding: 10px 23px;
  color: #979797;
  font-size: 1em;
  font-weight: 400;
}


.progress-seguimiento {
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #EAEAEA;
    border-radius: 1rem;
    cursor: pointer;
    border: solid 1px #009591;
}

.titulo-detalle-seguimiento {
  text-align: center!important;
  background-color: #009591!important;
  color: #fff!important;
  font-size: 1.2em!important;
  font-weight: 700 !important;
  padding: 0.2rem!important;
}

.text-detail {
    color: #000;
    font-size: 0.9em;
    font-weight: 600;
}


.subtitle-seguimiento-detalle{
  font-size: 0.8rem;
  color: #9e9e9e;
  font-weight: 600;
}

.texto-body-tabla {
  font-size: initial;
}

.tooltip-inner{
    background-color:#a2a2a2 !important;
  min-height: 30px;
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-aut[x-placement^="right"] .arrow::before
{
    border-right-color:#a2a2a2 !important;
}
/*Fin Estilos reporte de jefes*/

.card-header-qr{
    background-color: transparent;
    text-align: center;
}
.certificado_titulo_qr {
    border-bottom: 5px solid #116949;
    border-top: 5px solid #116949;
    width: 50%;
    margin: auto;
}

.card-header-qr{text-align: center;}
.qr{text-align: center;}
.body-qr{text-align: center;}
.certificado_contenido_qr{text-align: center;}

.card-color{
    background-color: #6100d1;
}

.img-card-t{
    width: 119px;
    height: 123px;
    /*margin-left: 78px;*/
}

.text-card-cursos{
    color: #e9ecf2;
    text-align: -webkit-center;
    font-weight: 900;
    font-size: 1.2em;
}
.a-card-cursos{
    background-color: #e9ecf2;
    color: #009591;
    padding-left: 5px;
    padding-right: 5px;
}


/*estilos del slider 3d mjp*/

.for_slick_slider{
    display: flex;
}

.for_slick_slider .items{
    width: 350px;
    height: 250px;
    margin: 50px;
    position: relative;
}


.for_slick_slider .items .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 250px;
    background: rgba(0, 0, 0, 0.64);
}

/*para que se vea opacas las imagenes de los lados*/
.for_slick_slider .slick-center .overlay{
    opacity: 0;

}

.for_slick_slider .items img{
    width: 400px;
    height: 250px;
    /*transition: all linear .4s;*/

}

/*esta parte es para que el del centro se vuelva grande*/
.for_slick_slider .slick-center img{
    transform: scale(1.2);

}

/*fin del slider 3d mjp*/

.input-radius{
    /* border-radius: 10px; */
    border-color: #a2a2a2;
}

.color-fondo{
    background-color: transparent;
}

.texto-bienv-home{
    /*font-weight: 700;font-size: 1em;*/
    color:#000;
    font-size: 1rem;
    font-weight: 500;
}

.color5{
    color:#252538;
}

.color_fuente_m{
    color: #6100d1;
    font-weight: 900;
    font-size: 2rem;
}

.btn-tamano{
    border-radius: 10px;
    width: 110px;
}

.color6{
   color: #009591; 
}

.font-w-700{
   font-weight: 700; 
}

.texto-logros{
    background-color: #FFFFFF;
    border-radius: 12px;
}

.bck-color1{
    background-color: #009591;
}

.color-text-card{
    color: #e9ecf2;
}

.cab-card{
    background-color: #009591;
    border-start-start-radius: 14px;
    border-start-end-radius: 14px;
    color: #e9ecf2;
    text-align: -webkit-center;
    font-weight: 900;
    font-size: 23px;
}

.cab-card-text{
    margin-top: 16px;
}

.tr{
    border: none;
    border-style: none !important;
    border-color: #FFF !important;
}

.a-menu-despegable{
    font-weight: 900 !important;
    color: #a2a2a2 !important;
}

.a-menu-despegable:hover{
    background-color:#009591 !important;
    color: #fff !important;
}
    .color{
		font-weight: 700;
	}
/*inicio estilo calendario de eventos*/
.btn-cerrar-modal, .btn-cerrar-modal:hover{
    background-color: #009591;
    color: #fff; 
    font-weight: 500;
    text-transform: none;
    border-radius: 10px;
  }
  
  .calendario-contenido{
      background-color: #e9ecf2;
  }

  
  .btn-agregar-calendario, .btn-agregar-calendario:hover{
    background-color: #2ebfff;
    color: #fff; 
    font-weight: 500;
    text-transform: none;
    border-radius: 10px;
  }
  
  .calendario-contenido{
    background-color: #fff;
  }
  
  .link_calendario, .link_calendario:hover{
    color: #2ebfff;
  }

  .select-fechas {
    margin-left: 0.4rem;
  }
  
/*fin estilo calendario de eventos*/


  @media (max-width: 486px) {
  .perfil {
    font-weight: 300;
    font-size: 0.6em;
  }

  .agregar-link{
    width:70%
  }
  
  
}

.btn-soporte{
    background-color:#009591;
    color:#fff;
    border-radius:10px;
    border: 1px solid #009591;
    width:25%
}

@media screen and (min-width:1167px)and (max-width:1386px) {
      .btn-soporte{
        width:30%
    }
}
@media screen and (min-width:1009px)and (max-width:1166px) {
      .btn-soporte{
        width:35%
    }
}
@media screen and (min-width:891px)and (max-width:1008px) {
      .btn-soporte{
        width:40%
    }
}
@media screen and (min-width:667px)and (max-width:892px) {
      .btn-soporte{
        width:50%
    }
}

@media screen and (min-width:494px)and (max-width:666px) {
      .btn-soporte{
        width:70%
    }
}

@media screen and (min-width:417px)and (max-width:493px) {
      .btn-soporte{
        width:85%
    }
}
@media screen and (min-width:200px)and (max-width:416px) {
      .btn-soporte{
        width:100%
    }
}
.estilo-soporte{
    color:#009591;
    font-weight: 500;
    font-size: 1em
}
.alerta-soporte-error{
    color:#009591;
    font-weight: 500;
    font-size: 1em
}

.link-curso,.link-curso:hover{
    color:#797a7d; 
    font-weight: 700; 
    font-size: 1em
}
.link-carpeta{
    color:#009591; 
    font-weight: 900; 
    font-size: 1em;
    border-radius: 15px;
    background-color: #f1f4f7;
    border: 1px solid #009591;
    background-color: #f1f4f7;
    border: 1px solid #009591;
    color: #009591;
    padding: 3px 12px;
    text-align: center;
    text-decoration: none;
     cursor: pointer;
}
.link-descripcion{
    white-space: wrap;
    font-size: 0.9em
}

.boton_carpetas3,.boton_carpetas3:hover{
    border-radius: 15px;
    background-color: #f1f4f7;
    border: 1px solid #009591;
    color: #009591;
    padding: 3px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.8em;
    font-weight: 500;
    cursor: pointer;
}
.link-pendiente{
    color:#b4b4b5; font-weight: 500;  font-size: 1em;
}
.link-completado{
    color:#008f39; font-weight: 500;  font-size: 1em;
}
.link-iniciado{
    color:#000; font-weight: 500;  font-size: 1em;
}
.boton_carpetas,.boton_carpetas:hover {
  border-radius: 15px;
  background-color: #009591;
  border: none;
  color: #f1f4f7;
  padding: 3px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.8em;
  font-weight: 500;
  cursor: pointer;
}


.ver_contenido{
  border-radius: 10px;
  background-color:#009591;
  border: 1px solid #009591;
  color: #ffffff;
  padding: 0px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-weight: 500;  
  font-size: 1em;
  cursor: pointer;
	}
			
	.ver_contenido a{
		color: #009591;
	}
			
	.ver_contenido:hoover{
		color: #009591;
	}

.text-objetivos{
    font-weight: 400; font-size:1em;color:#797a7d
}
.l-home{
    background: #009591;
    color: white;
    padding: 7px 12px;
    font-weight: 800;
    font-size: 1em;
}
.i-home{
    background: #009591;
    color: white;
}
.nombreh{
			font-size: 0.9em;
			font-weight: 500;
			color: #000;
			white-space: normal;
			margin-bottom: 0px;
			/*line-height: 1em; comentado mjp 20-01-2025*/
    	}


/* Botón turquesa con efecto de onda */
.button_inscripcion {
    background: #009591;
    border: none;
    color: white;
    padding: 18px 45px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    transition: all 0.4s ease;
    box-shadow: 0 6px 20px rgba(23, 168, 182, 0.4);
    position: relative;
    overflow: hidden;
}

.button_inscripcion::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s;
}

.button_inscripcion:hover::before {
    left: 100%;
}

.button_inscripcion:hover {
    background: #009591;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(23, 168, 182, 0.6);
    color: white;
}

.button_inscripcion:active {
    transform: scale(1.02);
}

.academico {
  width: 90%;
}
.academico .slick-track{
    width: auto!important;
}
.slick-slide img {
    display: inline-block !important;
}
.proximo, .proximo:hover {
  font-size: 1em;
  font-weight: 800;
  color: #000;
}

  .btn-rounded, .btn-rounded:hover {
    border-radius: 40px;
    color: #009591;
    width: 60%;
    padding: 0.1rem 0.1rem;
    border: 2px solid #009591;
  }

.card-proximo {
    /*background: transparent;*/
    box-shadow: rgb(0 0 0 / 0%) 0px 1px 9px;
  }
  
  .nombreh2,.nombreh2:hover{
			font-size: 0.9em;
			font-weight: 700;
			color: #000;
			white-space: normal;
			margin-bottom: 0px;
			line-height: 1em;
    	}

.pdisponible, .pdisponible:hover{
    background: #009591;
    color: white;
    padding: 7px 12px;
    font-weight: 800;
    font-size: 1em;
}

/*estilo de las notas*/
.note{
  height:115px;
  padding:10px;
  /* width:125px; */
  /* position:absolute; */
  overflow:hidden;
  cursor:move;
  font-weight:500;
  font-size:22px;

  /* Adding a CSS3 shadow below the note, in the browsers which support it: */
  box-shadow: rgba(0, 0, 0, 0.18) 0px 5px 15px;
}

#fancy_ajax .note{ cursor:default; }

/* Three styles for the notes: */

.blue{
	background-color:#A6E3FC;
	border:0px solid #75C5E7;
	border-radius: 10px;
  margin: 0.4rem !important;
}
.white{
	background-color:#fff;
	border:0px solid #dedede;
	border-radius: 10px;
  margin: 0.4rem !important;
}
.green{
	background-color:#a5f88b9c;
	border:0px solid #98E775;
	border-radius: 10px;
  margin: 0.4rem !important;
}
.yellow{
	background-color:#fdfb8ca1;
	border:0px solid #DEDC65;
	border-radius: 10px;
  margin: 0.4rem !important;
}
.red{
	background-color:#ff4f4f6e;
	border:0px solid rgb(248, 6, 6);
	border-radius: 10px;
  margin: 0.4rem !important;
}

/* Each note has a data span, which holds its ID */
span.data{ display:none; }

/* The "Add a note" button: */
#addButton{
}

.author{
    /* The author name on the note: */
    bottom:10px;
    color: #0D3A5C;
	font-weight:500;
    font-size:12px;
    position:absolute;

}

#main{
    /* Contains all the notes and limits their movement: */
    margin:0 auto;
    position:relative;
    width:980px;
    height:500px;
    z-index:10;
    background:url(img/add_a_note_help.gif) no-repeat left top;
}
h3.popupTitle{
  border-bottom:1px solid #D6D6D6;
  color: #000;
  font-weight:900;
  font-size:24px;
  padding:0 0 5px;
}

#noteData{
}

.title-footer{
  font-weight: 900;
  font-size: 1.3em;
  color: #a3a3a3;
}

.content-footer {
  font-size: 1.1em;
  color: #a3a3a3;
}

.link-footer{
  color: #a3a3a3;
}


.note-form label{
  font-size:14px;
  font-weight:500;
  color: #000;
}

.card-contenido {
  padding: 20px;
  background-color: white;
  box-shadow: 0 -2px 30px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  text-align: center;
  /*margin-left: 20px;
  margin-top: 10px;*/
}

.btn-ver-contenido,
.btn-ver-contenido:hover{
  background-color: #009591;
  width: 100%;
  display: block;
  cursor: pointer;
  border-radius: 8px;
  color: #ffffff;
  padding: 8px;
  margin-top: 10px;
  font-weight: bold;
}

.img-card-biblioteca{
  /*max-width: 250px;
  min-width: 250px;*/
  max-height: 115px;
  
}

.note-form textarea, .note-form input[type=text]{

  border:1px solid #757575;
  font-weight:500;
  color: #0D3A5C;
  font-size:16px;
  height:60px;
  padding:5px;
  /*width:300px; dana el estilo real*/
  margin-bottom:10px;
}

.note-form input[type=text]{    height:auto; }

.color{
  /* The color swatches in the form: */
  cursor:pointer;
  float:right;
  height:14px;
  margin:0 5px 0 0;
  width:14px;
}

.submit-o, .submit-o:hover {
  background: #009591 ;
  border: 0;
  color: #fff;
  text-transform: uppercase;
  padding: 10px 1px;
  font-weight:900;
  text-align: center;
  width: 50%;
}

.card-note{
  /*width: 35rem;*/
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background: #f5f6f8;
}

.brd-clr-selc {
  border: solid 1px #dcdcdc;
}

.notas-title{font-weight:900;color: #757575;}
.notas-fecha{font-weight:500;color: #757575;font-size: 0.85em;}
.notas-descripcion{font-weight:500;color: #757575;font-size: 0.8em}

btn-ver-cont{

}

/* .nota-ancho{width: 20rem;} */

/*media query ancho de las notas del usuario*/
/* @media screen and (min-width:1200px)and (max-width:1348px) {
  .nota-ancho{width: 18rem;}
}
@media screen and (min-width:768px)and (max-width:992px) {
  .nota-ancho{width: 22rem;}
}
@media screen and (min-width:520px)and (max-width:767px) {
  .nota-ancho{width: 30rem;}
}
@media screen and (min-width:430px)and (max-width:519px) {
  .nota-ancho{width: 25rem;}
}
@media screen and (min-width:350px)and (max-width:429px) {
  .nota-ancho{width: 20rem;}
}
@media screen and (min-width:200px)and (max-width:349px) {
  .nota-ancho{width: 15rem;}
} */
/*media query ancho de las notas del usuario*/
.sombra_movil{
	transform: translateX(0);
}

.sombra_movil:before{
	content: '';
	position: absolute;
	width: 90%;
	top: 100%;
	left: 5%;
	height: 10px;
	background: -webkit-radial-gradient(
		center, ellipse,
		rgba(0,0,0,0.30) 0%,
		rgba(0,0,0,0) 80%);
	transition-duration: 3s;
	opacity: 0;
}

.sombra_movil:hover{
	transform: translateY(-5px);
	animation: 5s movercaja infinite;	
}

@keyframes movercaja{
	50%{
		transform: translateY(-3px);
	}
}
.sombra_movil:hover:before{
	opacity: 0.4;
	transform: translateY(5px);
    opacity: 1;
	animation: 5s moversombra infinite;	
}

@keyframes moversombra{
	50%{
		opacity: 1;
		transform: translateY(3px);
	}
}
.card-big-shadow {
  max-width: 320px;
  position: relative;
}
.card-big-shadow:before {
  background-image: url("http://static.tumblr.com/i21wc39/coTmrkw40/shadow.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  bottom: -12%;
  content: "";
  display: block;
  left: -12%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.trash{    color: #ed1b2f !important;}
.edit{    color: #158B40!important;}
.btn1{    background: #158B40!important; color:#fff !important}
.btn2{    background: #757575!important; color:#fff !important}

.texto-a {
    font-weight: 500;
    color: black;
}
.idioma, .idioma:hover{
    font-weight: 500;
    color: white;
    font-size: 1em;
}
.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #009591;
    border-color: #009591;
}

/* Renovaciones */

.form-filtro-renovaciones-evaluaciones {
  width: 90%;
  margin: 0 auto;
}

.bordered-row{
  border: 1px solid #000000;
  padding: 15px;
  border-radius: 5px;
}

/*
@media screen and (min-width:1491px)and (max-width:1517px) {
  .idioma{font-size: 0.85em !important;}
}
@media screen and (min-width:1473px)and (max-width:1490px) {
   .idioma{font-size: 0.75em !important;}
}

@media screen and (min-width:1454px)and (max-width:1472px) {
  .idioma{font-size: 0.65em !important;}
}
/*
@media screen and (min-width:1000px)and (max-width:1453px) {
   .idioma{font-size: 0.6em !important;}
}/*
@media screen and (min-width:350px)and (max-width:429px) {
  .idioma{width: 20rem;}
}
@media screen and (min-width:200px)and (max-width:349px) {
  .idioma{width: 15rem;}
}*/

/*estilo formulario de solicitud capcitacon*/
.doc-adjuntar {
  border: 1px solid #d3d3d3;
}

@media screen and (min-width: 200px) and (max-width: 768px) {
  .texto-alerta {
    font-size: 0.7em;
    padding-left: 1px;
    padding-right: 1px;
  }
}

/*estilos nuevos monica 20-01-2025*/
.border-buscador {
    border: 1px solid #a3a3a3;
    border-radius: 7px;
    background-color: #ffffff;
    padding-right: 0px; /* Cambiar de 3px a 0px */
}

.buscador_home {
  border: none;
}

.btn_bus_home, .btn_bus_home:hover{
  background-color: #009591;
  color: #ffffff;
}

.txt-color1{
  color: #000000;
}

.list-group-item-idiomas.active{
    z-index: 2;
    color: #fff;
    background-color: #a3a3a3;
    border-color: #a3a3a3;
}

.ic-inscrp1 {
  /*btn inscripciones*/
  max-height: 46px !important;
}

.ic-inscrp {
  /*btn inscripciones*/
  max-height: 31px !important;
}

.card-inscripcion {
  background-color: #e8e8e8;
  height: 34.7vh;
  border-radius: 8px;
}

.row-cr {
  background-color: #ffffff;
  border-radius: 12px;
  align-items: baseline;
  padding: 4px;
}

.bx-card-home{
  box-shadow: rgba(150, 150, 150, 0.59) 1px 1px 7px;
  /*height: 19vh; tamano fijo a las cards*/
}

/*card sin box-shado*/
.card-sin-bx{
  box-shadow: none;
}


.btn-fl {
  background-color: #ffffff;
  border: solid 2px #a3a3a3;
  color: #009591;
  /* padding-left: 0px; */
  width: max-content;
  border-radius: 5px;
}

.btn-fl:hover {
    background-color: #009591;
    border: solid 2px #009591;
    border-radius: 5px;
}

.b-footer{
  background-color: transparent; 
  border-top: none;
  padding: unset;
}

.txt-card-home {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: #494949;
}

.categoria-home {
  background-color: #dcdcdc;
  color: #a3a3a3;
  font-size: 12px;
  width: fit-content;
  border-radius: 12px;
  
  
}

.btn-ofertados-ver {
  color: #ffffff;
  background-color: #009591;
  border-radius: 5px;
  max-width: fit-content;
}

.card-ofertados {
  /*height: 17vh;*/
  border-radius: 12px;
}

.nom-curso-ofertad {
  font-size: 0.8rem;
  /*max-width: 132px;*/
}

.bg-color-ofer {
  background-color: #e8e8e8;
  border-radius: 8px;
}

.bg-color-gris {
  background-color: #e8e8e8;
}

.title-oferta {
  color: #009591;
  font-weight: 800;
  font-size: 1rem;
}

.img-proximo {
  border-radius: 12px 0 0 12px;
  background-size: auto; 
  background-position: center;
  background-repeat: no-repeat;
  max-height: 100vh;
  min-height: 17vh;
  min-width: 206px;
}

.color-icon-menu {
  color: #000;
}

.mas-roles {
  background-color: #a3a3a3;
  color: #ffffff;
}

.mas-facultades{
  background-color:transparent;
  /*color: #494949;*/
}

.btn-pagi-hom{
  width: inherit !important;
}

.btn-pag-activ, .btn-pag-activ:hover {
  background-color: #009591;
  color: #fff;
  border: 1px solid #009591;
  border-radius: 4px;
}

.btn-pagi-num, .btn-pagi-num:hover {
  border: solid 1px #a3a3a3;
  border-radius: 4px;
}

.btn-pagi-naveg, .btn-pagi-naveg:hover {
  border: solid 1px #a3a3a3;
  color: #009591;
  border-radius: 4px;
  background-color: transparent;
}

/* iconos del menu lateral*/
.li-menu,
.li-menu-confi {
  border-radius: 10px;
}

/* Estilos para el hover de .li-menu */
.li-menu:hover {
  background-color: #009591 !important; /* Fondo de color cuando se hace hover sobre el enlace */
  color: #ffffff !important; /* Cambiar color del texto */
  border-radius: 10px !important;
}

.li-menu-confi:hover,
.li-menu-confi:focus,
.li-menu-confi:active,
.activ-menu-config {
  background-color: #009591 !important; /* Fondo de color cuando se hace hover sobre el enlace */
  border: solid 1px #009591;
  border-radius: 10px !important;
  color: #fff !important;
}


.menu_laterla_c1{
  color:#494949;
  font-weight: 500;
  font-size: 17px;
}

.li-menu:hover .menu_laterla_c1, .active-menu .menu_laterla_c1 {
  color: #fff;
}

.ic-lat{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 1.7em;
  height: 29px;
  transition: background-image 0.3s ease; /* Para transiciones suaves */
}

/* Home menu */
.icono-menu-lateral-home {
    /* Usar mask en lugar de background-image */
    -webkit-mask-image: url(../images/home/menu_lateral/home.svg);
    mask-image: url(../images/home/menu_lateral/home.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* Color del icono */
    background-color: #666; /* Color gris inicial */
    width: 24px; /* Ajusta según tu tamaño */
    height: 24px; /* Ajusta según tu tamaño */
    
    transition: background-color 0.3s ease;
}

/* Home menu - hover */
.nav-link:hover .icono-menu-lateral-home,
.nav-link.active-menu .icono-menu-lateral-home {
    background-color: #fff;
}

/* Menu - hover - titulo */
.nav-link:hover .titulo-btn-lat,
.nav-link:hover .menu_laterla_c1 {
    color: #fff !important;
}



/* Capacitaciones externas menu */
.icono-menu-lateral-capexter {
  -webkit-mask-image: url(../images/home/menu_lateral/capacitaciones_externas.svg);
  mask-image: url(../images/home/menu_lateral/capacitaciones_externas.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  
  transition: background-color 0.3s ease;
}
/* Capacitaciones externas menu - hover */
.nav-link:hover .icono-menu-lateral-capexter,
.nav-link.active-menu .icono-menu-lateral-capexter {
  background-color: #fff;
}




/*evaluaciones menu*/
.icono-menu-lateral-eva{
  -webkit-mask-image: url(../images/home/menu_lateral/evaluaciones.svg);
  mask-image: url(../images/home/menu_lateral/evaluaciones.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  transition: background-color 0.3s ease;

}

/* evaluaciones menu - hover */
.nav-link:hover .icono-menu-lateral-eva,
.nav-link.active-menu .icono-menu-lateral-eva {
  background-color: #fff;
}


/*logros menu*/
.icono-menu-lateral-logros{
  -webkit-mask-image: url(../images/home/menu_lateral/logros.svg);
  mask-image: url(../images/home/menu_lateral/logros.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  transition: background-color 0.3s ease;
}

.nav-link:hover .icono-menu-lateral-logros,
.nav-link.active-menu .icono-menu-lateral-logros {
  background-color: #fff;
}

/*historico de notas*/
.icono-menu-lateral-h-notas{
  -webkit-mask-image: url(../images/home/menu_lateral/historico_notas.svg);
  mask-image: url(../images/home/menu_lateral/historico_notas.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  transition: background-color 0.3s ease;
}

.nav-link:hover .icono-menu-lateral-h-notas,
.nav-link.active-menu .icono-menu-lateral-h-notas {
  background-color: #fff;
}


/*biblioteca*/
.icono-menu-lateral-biblioteca{
  -webkit-mask-image: url(../images/home/menu_lateral/biblioteca.svg);
  mask-image: url(../images/home/menu_lateral/biblioteca.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  transition: background-color 0.3s ease;
}

.nav-link:hover .icono-menu-lateral-biblioteca,
.nav-link.active-menu .icono-menu-lateral-biblioteca {
  background-color: #fff;
}

/*academia abierta*/
.icono-menu-lateral-academia{
  -webkit-mask-image: url(../images/home/menu_lateral/academia_abierta.svg);
  mask-image: url(../images/home/menu_lateral/academia_abierta.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  
  transition: background-color 0.3s ease;
}

.nav-link:hover .icono-menu-lateral-academia,
.nav-link.active-menu .icono-menu-lateral-academia {
  background-color: #fff;
}

/*foros menu*/
.icono-menu-lateral-foros{
  -webkit-mask-image: url(../images/home/menu_lateral/foros.svg);
  mask-image: url(../images/home/menu_lateral/foros.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  transition: background-color 0.3s ease;
}

.nav-link:hover .icono-menu-lateral-foros,
.nav-link.active-menu .icono-menu-lateral-foros {
  background-color: #fff;
}

/*capacitaciones cursos favoritos*/
.icono-menu-lateral-cursos-fav{
  -webkit-mask-image: url(../images/home/menu_lateral/cursos_favoritos.svg);
  mask-image: url(../images/home/menu_lateral/cursos_favoritos.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  transition: background-color 0.3s ease;
}

.nav-link:hover .icono-menu-lateral-cursos-fav,
.nav-link.active-menu .icono-menu-lateral-cursos-fav {
  background-color: #fff;
}

/*control asistencia*/
.icono-menu-lateral-asistencia{
  -webkit-mask-image: url(../images/home/menu_lateral/control_asistencia.svg);
  mask-image: url(../images/home/menu_lateral/control_asistencia.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  transition: background-color 0.3s ease;
}

.nav-link:hover .icono-menu-lateral-asistencia,
.nav-link.active-menu .icono-menu-lateral-asistencia {
  background-color: #fff;

}

/*mentorias*/
.icono-menu-lateral-mentorias{
  -webkit-mask-image: url(../images/home/menu_lateral/mentorias.svg);
  mask-image: url(../images/home/menu_lateral/mentorias.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  transition: background-color 0.3s ease;
}

.nav-link:hover .icono-menu-lateral-mentorias,
.nav-link.active-menu .icono-menu-lateral-mentorias {
  background-color: #fff;

}

/*seguimiento lideres jefes*/
.icono-menu-lateral-seguimiento{
  -webkit-mask-image: url(../images/home/menu_lateral/seguimiento_jefe.svg);
  mask-image: url(../images/home/menu_lateral/seguimiento_jefe.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  transition: background-color 0.3s ease;
}

.nav-link:hover .icono-menu-lateral-seguimiento,
.nav-link.active-menu .icono-menu-lateral-seguimiento {
  background-color: #fff;

}

/*nivel 3*/
.icono-menu-lateral-nivel3{
  -webkit-mask-image: url(../images/home/menu_lateral/nivel3.svg);
  mask-image: url(../images/home/menu_lateral/nivel3.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  transition: background-color 0.3s ease;
}

.nav-link:hover .icono-menu-lateral-nivel3,
.nav-link.active-menu .icono-menu-lateral-nivel3 {
  background-color: #fff;

}




/*menu configuracion*/

.men-config {
  width: 24px;
  height: 24px;
  background-color: #a3a3a3;

  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  transition: background-color 0.3s ease;
}

.li-menu-confi:hover .men-config {
  background-color: #fff;
}

.activ-menu-config .men-config {
  background-color: #fff;
}

.li-menu-confi:focus-within .men-config {
  background-color: #fff;
}

.li-menu-confi:hover,
.li-menu-confi:focus-within,
.activ-menu-config {
  background-color: #009591 !important;
  border: solid 1px #009591;
  border-radius: 10px !important;
  color: #fff !important;
}



/* configuracion */
.icono-menu-lateral-config {
  -webkit-mask-image: url(../images/home/menu_lateral/configuracion.svg);
  mask-image: url(../images/home/menu_lateral/configuracion.svg);
  display: none;
}

/*menu soporte y ayuda*/
.icono-menu-lateral-soporte {
  -webkit-mask-image: url(../images/home/menu_lateral/soporte_ayuda.svg);
  mask-image: url(../images/home/menu_lateral/soporte_ayuda.svg);
}
/*actualizar datos*/
.icono-menu-lateral-act-dtos {
  -webkit-mask-image: url(../images/home/menu_lateral/actualizar_datos.svg);
  mask-image: url(../images/home/menu_lateral/actualizar_datos.svg);
}

/*actualizar contrasena*/
.icono-menu-lateral-act-contrasena {
  -webkit-mask-image: url(../images/home/menu_lateral/actualizar_contrasena.svg);
  mask-image: url(../images/home/menu_lateral/actualizar_contrasena.svg);
}

/*ver mis post it*/
.icono-menu-lateral-ver-post {
  -webkit-mask-image: url(../images/home/menu_lateral/ver_post.svg);
  mask-image: url(../images/home/menu_lateral/ver_post.svg);
}

/*agregar post it*/
.icono-menu-lateral-add-post {
  -webkit-mask-image: url(../images/home/menu_lateral/agregar_post.svg);
  mask-image: url(../images/home/menu_lateral/agregar_post.svg);
}

/*cerrar sesion*/
.icono-menu-lateral-cerrar-ses {
  -webkit-mask-image: url(../images/home/menu_lateral/cerrar_sesion.svg);
  mask-image: url(../images/home/menu_lateral/cerrar_sesion.svg);
}

/*facultades menu*/
.icono-menu-lateral-facultades{
  -webkit-mask-image: url(../images/home/menu_lateral/facultades.svg);
  mask-image: url(../images/home/menu_lateral/facultades.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  width: 24px; /* Ajusta según tu tamaño */
  height: 24px; /* Ajusta según tu tamaño */
  
  transition: background-color 0.3s ease;
}

/* facultades menu - hover */
.nav-link:hover .icono-menu-lateral-facultades,
.nav-link.active-menu .icono-menu-lateral-facultades {
  background-color: #fff;
}

/*roles menu*/
.icono-menu-lateral-roles{
  -webkit-mask-image: url(../images/home/menu_lateral/roles.svg);
  mask-image: url(../images/home/menu_lateral/roles.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* Color del icono */
  background-color: #666; /* Color gris inicial */
  width: 24px; /* Ajusta según tu tamaño */
  height: 24px; /* Ajusta según tu tamaño */
  
  transition: background-color 0.3s ease;
}

/* roles menu - hover */
.nav-link:hover .icono-menu-lateral-roles,
.nav-link.active-menu .icono-menu-lateral-roles {
  background-color: #fff;
}


.nav-link{
  height: 3rem;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 12px;
  margin-right: 12px;
}

.nav-link-reset {
  margin: 0 !important;
  justify-content: center;
  padding: initial !important;
}

/*FIN iconos del menu lateral*/

/*capacitacione externas*/
.crear-capacitacion, .crear-capacitacion:hover {
  border: solid 1px #009591;
  color: #009591;
  width: -webkit-fill-available;
}
.ver-capacitacion {
  background-color: transparent;
  border: solid 1px #009591;
}

.ver-capacitacion:hover {
  background-color: #009591;
  border: solid 1px #009591;
  color: #ffffff;
}

.h-flechas {
    background-color: #a3a3a3;
    font-size: smaller;
    border-radius: 5px;
}

.dropdown-menu{
    transform: translate3d(-21px, 42px, 0px) !important;
}

.img-programas {
    max-width: 58px  !important;
}
  
.tamanio-btn-pl {
    max-height: 37px;
}

.badge-notificacion.d-flex {
    color: #494949;
}

.rig-ses {
    background-color: transparent;
    /*padding: 12px;*/
    color: #009591;
    font-size: x-large;
}


/*flecha de despliegue del select*/
.form-select, .form-select:hover  {
    -webkit-appearance: none;  /* Para Safari y Chrome */
    -moz-appearance: none;     /* Para Firefox */
    appearance: none;          /* Para otros navegadores */
    padding-right: 30px;       /* Para dejar espacio para la flecha */
    background-image: url(../images/botones/despliegue.png);
    background-repeat: no-repeat;
    background-position: right 10px center;  /* Ajusta la posición de la flecha */
    background-size: 36px;    /* Tamaño de la flecha */
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
}

/* Estilo para cuando no se ha seleccionado nada */
.form-select:focus {
    border-color: #a3a3a3;  /* Establecer un borde de enfoque personalizado */
    box-shadow: none;        /* Elimina el borde azul predeterminado */
}

/* Estilo para las flechas si se quiere cambiar el fondo cuando no hay selección */
.form-select option:disabled {
    color: #a3a3a3;   /* Establece un color diferente para la opción por defecto */
}


/*final de flecha despligue select*/



.img-birr {
  max-height: 3rem;
}

.img-pen {
  max-height: 2rem;
}

.img-lin{
  max-height: 1.7rem;
  border-right: solid 1px #fff;
  padding-right: 2px;
}


.temas{
  font-size: 0.85em;
  white-space: normal;
  color: #ffffff;
  font-weight: 400;
 
}

.carpeta-curso{
  color: #000000;
  font-weight: 400;
  font-size: 1em;
}

.border-home{
    border-radius: 17px;
}

.btn2 {
    background-color: #0C90D1 !IMPORTANT;
    font-weight: 500;
    text-transform: none;
    border-radius: 16px;
     width: 60%;
}

.linea-contenido-modulos{
  border: none; border-top: 4px solid #00c3bb; background-color: transparent; opacity: inherit;
}

.div-mini-head {
  /*background-color: rgba(0, 0, 0, 0.2);*/
}

.hr-rojo {
  color: #009591;
  opacity: inherit;
}

.collapse-color{
  background-color: #353535;
}

.encuesta-txt-1 {
  font-size: 1.2rem;
}

.encuesta-txt-2 {
  font-size: 0.9rem;
  line-height: 19px;
}

.btn-op-mejorar, .btn-op-mejorar:hover, .btn-op-mejorar.active{
  width: 121px;
  color: #ffffff
}

.btn-modulo, .btn-modulo:hover, .btn-modulo.active, .btn-modulo:focus{
  color: #ffffff;
}

.btn-eva:hover, .btn-certificado:hover{
  background-color :#494949;
  color: #ffffff;
}

.titulo-curso {
  font-size: 1.8rem;
  font-weight: 600;
}

.titulo-modulos {
  font-size: 1.1rem;
  font-weight: 500;
}

.titulo-documento-header {
  font-size: 1.5rem;
  font-weight: 600;
}

.sobre-puesto{
  position: absolute;
  top: 12px;
  right: 9px;
  background-color: #494949;
  padding: 2px 10px;
  border-radius: 14px;
  z-index: 9;
  color: white;
}

.profile-img-fit {
  max-height: 75px;
  max-width: 75px;
}

/*stilos de la vista negra de detalle*/
.btn-regresar {
  border: 1px solid #ffffff;
  padding: 10px 20px;
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #1e1e1e;
  font-weight: bold;
  margin-left: 2%;
}

.sidebar-container {
  /*background-color: rgba(0, 0, 0, 0.2);*/
  padding: 20px;
  border-radius: 10px;
  /*height: 100%; se desborda la pagina y monta el footer*/
}

.card-header-detalle{
  background-color: #353535;
}

.vid-circle::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #00c3bb;
  border: 2px solid #a3a3a3;
  margin-right: 5px;
}

.page-wr-oscuro{
  background:#2d2b2b !important;
}

.nav-link .ic-lat {
  margin-right: 8px;
  width: 38px;
  height: 31px;
}

.accordion-button {
  background-color: #353535 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.accordion-button::after {
  filter: invert(1) brightness(100%) contrast(100%) !important
}

.accordion-collapse {
  background-color: #353535;
}

.espacio-btn-acordi{
  color: transparent;
}

/*estilos vista de documentos - biblioteca*/
.card-doc {
  padding: 20px;
  background-color: white;
  /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
  border-radius: 12px;
  text-align: center;
  /*margin-left: 20px;*/
  margin-top: 10px;
  box-shadow: rgb(0 0 0 / 14%) 0px 1px 8px;
}

.button-container button {
  background-color: #009591;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

.button-container button:hover {
  background-color: #009591;
}


.title-doc {
  font-size: 0.9rem;
}

/*estados de cursos*/
.bg-pendiente{
  background-color: #d32f2f;
  color: #fff;
}

.bg-docs-pend{
  background-color: #ff9800;
  color: #fff;
}

.bg-completado{
  background-color: #4caf50;
  color: #fff;
}

img.alto-img-car {
    max-height: 138px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.btn-curso,.btn-curso:hover  {
  background-color: #009591;
  color: #fff;
  font-size: 0.9rem;
  border-radius: 6px;
}
.desc-curso {
  font-size: 0.8rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  /*max-height: 50px;*/
  /*min-height: 9vh;*/
}

.card-car-cur {
  /*max-height: 470px;
  height: 380px;*/
}



.duration {
  position: absolute;
  top: 18px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 15px;
}

.title-curso {
  color: #000;
  font-weight: 600;
  font-size: 1.1rem;
  padding-bottom: 3px;
  min-height: 5vh;
}


.viewTextBtn{
  width: inherit !important;
  background-color: #a2a2a2;
  border-color: #a2a2a2;
  /*cards de cursos*/
  cursor: pointer;
  z-index: 10;
  position: relative;
  border-radius: 10px;
}

.viewTextBtn:hover,
.viewTextBtn:active,
.viewTextBtn:focus{
 transform: scale(1.1);
 background-color: #a2a2a2;
 border: solid 1px #a2a2a2;
}

.card-car-cur {
  min-height: 41vh;
  justify-content: space-between;
  
  
}

.card-inner {
    max-width: 270px;      /* tamaño visual real */
    margin: 0 auto;        /* centrado dentro de la columna */
}



.imagen_fondom {
  /*background-image: url('<?php echo $ruta_template . 'home/' . 'banner-menu.png' ?>');!important;*/
  background-position: center !important;
  background-repeat: repeat !important;
  background-size: cover !important;
  background-color: #f5f6f8;
}

.rounded-circle{
  width: 4rem;
}

/*linea del header*/
.linea{
  /*position: absolute;*/
  border: 1px solid #dcdcdc;
  width: 100%;
  /*right: 46px;
  top: 6rem;
  height: 0;*/
}

/*estilos de menu*/

/* Estilo del Sidebar */
.sidebar {
  width: 340px;
  height: 105vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  /*transition: all 0.3s ease;*/
  transition: transform 0.3s ease;
  z-index: 10;
  overflow-y: auto;
  overflow: auto !important;
  box-shadow: rgba(0, 0, 0, 0.58) 0px 0px 15px;
    
}

.sidebar ul.nav {
    background-color: #ffffff;
    box-shadow: 5px 0 15px -5px rgba(0, 0, 0, 0.15);
    position: relative;
    
}



/* Estilo para el botón de toggle */
#toggleSidebar {
  /*position: absolute;*/
  /*top: 87px;
  left: 337px;*/  /* Colocamos el botón al lado del sidebar */
  z-index: 1050;  /* Aseguramos que el botón esté por encima del contenido */
}

/* Espacio para el contenido cuando el sidebar está visible */
.content {
  margin-left: 250px;
  padding: 20px;
  transition: margin-left 0.3s ease;
}

/** tamano de icono menu lateral */
.icono_lateral{
  height: 29px !important;
}

.menu_lateral_info{
  color:#a3a3a3;
  font-weight: 500;
}

.menu_lateral_info:active,
.menu_lateral_info:focus,
.menu_lateral_info:hover
{
  color:#fff;
  
}

.boton-hambur{
  /*position: absolute; /*para que funcione el left*/
  top: 27px;
  /*left: 340px; /*98*/
  z-index: 1050; 
  width: 40px;
  background-color: #a3a3a3;
  border: #494949;
}

.boton-hambur:hover{
  background-color: #494949;
  border: #494949;
}

/*iconos del menu lateral*/
.active-menu{
  background-color: #009591 !important; /* Fondo de color cuando se hace hover sobre el enlace */
  color: #ffffff !important; /* Cambiar color del texto */
  border-radius: 10px;
}

/* Ocultar el div por defecto */
#iconobtn.d-none {
  display: none;
}

.volver1, .volver1:hover{
  background-color: #009591;
  border-color: #009591;
  color: #fff;
  border-radius: 10px;
}


.imagen-detalle-proximo {
    max-height: 458px;
}

.img-oferta {
    min-height: 120px;
    max-height: 120px;
}

.img-home {
    max-height: 1rem;
}

.buscador-header,
.buscador-header:focus,
.buscador-header:hover,
.buscador-header:active {
    color: #a3a3a3;
    font-size: 1.4rem;
}

/* Posicionar el botón del header como flotante */
#mostrarmenu {
    position: fixed;
    top: 77px;
    left: 344px;
    z-index: 1050;
    background-color: #009591;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    color: #fff;

    cursor: pointer;
}

#mostrarmenu:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

    transform: scale(1.1);
}

/* Cuando el sidebar está oculto, mover el botón a la izquierda */
.sidebar.ocult-hide ~ * #mostrarmenu,
body:has(.sidebar.ocult-hide) #mostrarmenu {
    left: 71px;
}

.img-logo-menu-lateral {
    /*max-height: 2.6em;*/
}

.icono-header {
    display: none;
    transition: opacity 0.3s ease;
}

/* Mostrar el logo cuando el sidebar está oculto */
.sidebar.ocult-hide ~ * .icono-header,
body:has(.sidebar.ocult-hide) .icono-header {
    display: block;
}


/* Cuando el sidebar está oculto en desktop */
.sidebar.ocult-hide ~ * #mostrarmenu {
    left: 10px;
}

.sidebar.ocult-hide {
    transform: translateX(1%);
    width: 53px;
}


.card-encuesta .form-control:disabled {
  background-color: #a3a3a340;
  color: #6c757d;
  border-color: #ced4da;
  cursor: not-allowed;
}

.img-programas2 {
  max-width: 68px !important;
}

/*periodos de inscripcion */

/* Estilos para el select de períodos */
  #select-periodos {
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.9em;
      background-color: white;
      transition: border-color 0.3s ease;
  }

  #select-periodos:focus {
      border-color: #007bff;
      box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
      outline: none;
  }

  #select-periodos:disabled {
      background-color: #f8f9fa;
      color: #6c757d;
  }

  .button_inscripcion:disabled {
      background-color: #6c757d !important;
      border-color: #6c757d !important;
      cursor: not-allowed;
  }

  #info-periodo {
      font-size: 0.85em;
}

/*fin de periodos de inscripcion*/

i.color-verde-penc
{
    color: #009591;
}

a:hover .color-verde-penc {
    color: white;
}

.img-card {
    max-height: 97px;
    min-height: 97px;
}

.txt-color2{
  color: #494949;
}

.bg-color-verde{
  background: #009591;
}

.img-categoria {
    max-height: 3em;
}

.card-categoria:hover {
  background-color: #01635e;
}

.title-cat {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff !important;
      
}

.cant_categoria {
  border: solid 1px;
  border-radius: 12px;
  font-size: 10px;
}

.duracion-curso {
    background-color: #a3a3a3;
    color: #fff;
    font-size: 10px;
    border-radius: 13px;
}

/*esto permite ejecutar el ver detalle de curso ojo en cards de cursos*/
.card-img-overlay {
  pointer-events: none;
}

.card-img-overlay a,
.card-img-overlay button {
  pointer-events: auto;
}
/*Fin esto permite ejecutar el ver detalle de curso ojo en cards de cursos*/

.favorito {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  text-decoration: none;
}


.favorito:hover,
.favorito:active,
.favorito:focus {
  color: #FFFF;
}

.favorito.active {
  /*background: #e9bc19 !important;*/
  background-color: rgba(0, 0, 0, 0.5);
  color: #b71c1c;
}




.favorito:hover {
    color: #ff4d4d;
}

.descr-cur-fav {
  color: #a3a3a3;
  font-size: 1rem;
  -webkit-line-clamp: 3;
}

.profile-img {
    width: 55px;
    height: 55px;
    object-fit: cover;
}

.img-card-curso {
    max-height: 138px;
}

.card-error-autor{
  width: 100%; background-color:#fff; border:1px solid #dcdcdc;
}

.alert-error-autor{
  background-color:#dcdcdc; color:#000; border-left:5px solid #009591;
}

.btn-enviar-verde{
  background-color: #009591;
  color: #fff;
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-enviar-verde:hover,
.btn-enviar-verde:focus,
.btn-enviar-verde:active {
  background-color: #009591;
  color: #fff;
  border-radius: 10px;
  transform: scale(1.05);
}

.img-saberes {
    max-height: 134px;
}

.card.card-contenido.card-saberes {
    /*height: 39vh;*/
}

.title.titulo-card-saberes {
    /*height: 20vh;*/
}

.play-documentos {
    color: #009591;
    font-size: 1.6rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.play-documentos:hover {
    transform: scale(1.05);
}

.column-dos{
    background-color: rgba(0, 0, 0, 0.2);
}

.div-cursos{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.5rem;
  
}

/* Selector de rol (accordionRole): el sidebar es blanco, así que al hacer hover el título
   NO debe volverse blanco (se perdería). Se mantiene visible en color de acento. */
#accordionRole .change_user:hover,
#accordionRole .change_user:focus,
#accordionRole .change_user:hover .titulo-btn-lat,
#accordionRole .change_user:focus .titulo-btn-lat
{
  color:#009591 !important;
}

img#logoMenu {
    max-height: 2em;
}





































/*dejar las medias al final solo estilos sin medias arriba de esto*/

/* Media query para pantallas < 768px (cuando se ocultan los elementos d-none d-md-block) */
@media (max-width: 767px) {
  #mostrarmenu {
      top: 48px !important;
      left: 7px !important;
  }
  
  /* Ajustar cuando el sidebar está visible en móvil */
  body:not(:has(.sidebar.ocult-hide)) #mostrarmenu {
      left: 310px !important; /* Ancho del sidebar */
  }
    .txt-card-home {
      font-size: 0.9rem;
  }
  .sidebar.ocult-hide {
    display: none !important;
  }
}

/* Estilos para móviles */

/*estilo para tabla*/
@media screen and (max-width: 600px) {
  .img_course img {
      max-width: 100% !important
  }
  .generic-table {
    width: 100% !important;
  }
  .responsive-table {
    border: 0;
    width: 100% !important;
    background-color: inherit!important;
  }

  .responsive-table caption {
    font-size: 1.3em;
  }
  
  .responsive-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .responsive-table tr {
    background-color: #fff;
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  .responsive-table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 1em;
    text-align: right !important;
    color: #979797;
    width: 100% !important;
  }
  
  .responsive-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
    color: #020049;
    margin-right: 1px;
    font-size: small;
  }
  
  .responsive-table td:last-child {
    border-bottom: 0;
  }

  .sidebar.ocult-hide {
    display: none !important;
  }
  
    .div-cursos{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3.5rem;
    
    }
  
}

/* FIN estilo para tabla*/

/* Plan de Entrenamiento: tablas .pde-table -> cada fila se vuelve tarjeta en móvil */
@media screen and (max-width: 600px) {
  .pde-table { box-shadow: none !important; border: 0 !important; }
  .pde-table thead { display: none !important; }
  /* display SIN !important: así el JS de filtros/paginación puede ocultar filas con display:none inline */
  .pde-table tr { display: block; background: #fff !important; border: 1px solid rgba(165,159,159,0.35) !important; border-radius: 12px !important; margin-bottom: 12px !important; box-shadow: 0 0 14px rgba(0,0,0,0.06) !important; overflow: hidden; }
  .pde-table td { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; text-align: right !important; width: 100% !important; box-sizing: border-box !important; border-bottom: 1px solid rgba(165,159,159,0.2) !important; }
  .pde-table td:last-child { border-bottom: 0 !important; }
  .pde-table td::before { content: attr(data-label); font-weight: 600; color: #494949; text-align: left; flex: none; margin-right: 10px; }
}

/* Plan de Entrenamiento: padding lateral para que el contenido no quede pegado a los bordes (incluye menú contraído en portátil) */
.pde-wrap { padding-left: 24px; padding-right: 24px; }
@media screen and (max-width: 768px) {
  .pde-wrap { padding-left: 14px !important; padding-right: 14px !important; }
}


/*celulares*/
@media (min-width: 200px) and (max-width: 575px) {
  .texto-bienv-home {
    font-size: 0.7rem;
  }
  .carousel .carousel-item img {
    /*width: 31% !important*/
  }
  .txt-card-home {
    font-size: 0.85rem;
  }
  .img-programas {
    max-width: 44px !important;
  }
  .content-header {
      justify-content: space-between !important;
  }

  #toggleSidebar {
    /*left: 273px !important;
    top: 90px !important;*/
  }
  .titulo-curso {
    font-size: 1rem !important;
  }
  .boton-hambur.menuhide {
    left: 30px !important
  }

  .buscador_home {
    font-size: 0.6rem !important;
  }
  .btn_bus_home, .btn_bus_home:hover {
    font-size: 0.6rem;
  }
  /*
  .sidebar {
      display: none !important
  }
      */
  #iconobtn {
    display: block !important; /* Asegura que se muestre en pantallas grandes */
  }

  .sidebar.ocult-hide {
    display: none !important;
  }
  
    .div-cursos{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 3.5rem;
    
    }
}
/*tablets pequenas*/
@media (min-width: 576px) and (max-width: 899px) {
  .texto-bienv-home {
    font-size: 0.8rem;
  }
  /*.sidebar {
      display: none !important
  }*/
  #iconobtn {
    display: block !important; /* Asegura que se muestre en pantallas grandes */
  }
  .ic-inscrp1 {
    max-height: 24px !important;
  }
  /*.nom-curso-ofertad {
    font-size: 11px !important;
  }*/
  .img-programas {
    /*max-width: 47px !important;*/
  }
  .content-header {
    justify-content: space-between !important;
  }

  .titulo-curso {
    font-size: 1rem !important;
  }
  .boton-hambur.menuhide {
    left: 30px !important
  }

  .buscador_home {
    font-size: 0.6rem !important;
  }
  .btn_bus_home, .btn_bus_home:hover {
    font-size: 0.6rem;
  }
  .sidebar.ocult-hide {
    display: none !important;
  }
  
    .div-cursos{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3.5rem;
    
    }

}

/* Estilos para tablets */
@media (min-width: 900px) and (max-width: 1024px) {
  /*.texto-bienv-home {
    font-size: 15px !important;
  }*/
  /*.nombreh {
    font-size: 0.5em !important;
  }*/
  .ic-inscrp1 {
    max-height: 24px !important;
  }
  .ic-inscrp {
    max-height: 22px !important;
  }
  /*.nom-curso-ofertad {
    font-size: 13px !important;
  }*/
  .img-programas {
    /*max-width: 50px !important;*/
  }
  .content-header {
    justify-content: space-between !important;
  }
  #toggleSidebar {
    /*top: 37px !important;
    left: 242px !important;*/
  }
  .titulo-curso {
    font-size: 1rem !important;
  }

  .sidebar-container {
    margin-top: 5%;
  }

  .buscador_home {
    font-size: 0.6rem !important
  }

  .btn_bus_home, .btn_bus_home:hover {
    font-size: 0.6rem;
  }
    .div-cursos{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3.5rem;
    
    }
}

/* Estilos para pantallas de escritorio portatiles pequeños */
@media (min-width: 1025px) and (max-width: 1572px) {
  /*.nombreh {
      font-size: 0.7em !important;
  }*/
  .ic-inscrp1 {
      max-height: 24px !important;
  }
  .ic-inscrp {
      max-height: 22px !important;
  }
  .content-footer {
      font-size: 0.8em !important;
  }
  .img-programas {
      max-width: 53px !important;
  }

  .titulo-curso {
      font-size: 1rem !important;
  }
  .btn-fl {
      /*width: max-content !important;
      max-height: 10px !important;*/
      font-size: 0.5rem !important;
      /*padding-top: 0px !important;*/
  }
  
  /* .bx-card-home{
      height: 22vh!important;
  } */
  .boton-hambur.menuhide {
    left: 30px !important
  }
  .buscador_home {
    font-size: 0.6rem !important
  }

  .btn_bus_home, .btn_bus_home:hover {
    font-size: 0.6rem;
  }

  .bnt-logo {
      display: none;
  }
  
    .div-cursos{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3.5rem;
    
    }

}


.margin-l {
  margin-left: 5rem;
}

@media (max-width: 767px){

  .center-footer{
      text-align: center;
  }
}