/*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;
}
/*fuente poppins*/
@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

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

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

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

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

@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
/*fin poppins*/
/*WorkSans*/
@font-face {
  font-family: "WorkSans";
  src: url("../../../fonts/WorkSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

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

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

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

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

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

@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: 'WorkSans';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;
    border-bottom: 4px solid #FFFFFF;
      background-color: #16254C;
  }

  .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;
  }
  .link-footer{
    color: #ffffff;
  }
  
  .link-footer:hover {
    color: #ffffff;
  }

  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;
    /*margin-block-end: -25px; quitar el espacio entre el body y el footer*/
  }

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

  .error {
    color: #EA4646;
  }
  
  .titulos-header-cursos {
    width: 100%;
    margin: 0 auto;
    height: auto;
    display: flex;
    background: #29abe2;
  }
  
  .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: #29abe2;
  }

  #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: #020049;
    background-color: #fff;
    border: 0px;
    padding: 0rem;
    align-items: center;
  }

  .breadcrumb .breadcrumb-item .active{
    color: #a59f9f;
      border-bottom: 2px solid;
  }

  .link_p, 
  .link_p:hover,
  .breadcrumb a,
  .breadcrumb a:hover {
    text-align: left;
    color: #16254C;
    font-size: 18px;
    text-decoration: none;
    font-weight:700;
  }
  /*Fin miga de pan*/
  
  .btn, .btn-large {
    /*background-color: #29abe2;*/
    font-weight: 500;
    text-transform: none;
    /*color: #fff; comentado porque se usa para los botones de calificacion de contenido*/
    border-radius: 16px;
    width: 110px;
  }
  
  .btn:hover, .btn-large:hover,
  .btn:focus, .btn-large:focus,
  .btn:active, .btn-large:active  {
    /*background-color: #29abe2;*/
    /*color: #fff; comentado porque se usa para los botones de calificacion de contenido*/
    font-weight: 500;
    text-transform: none;
    border-radius: 16px;
  }
  
  
  .btn2, .btn-large2 {
    /*background-color: #020049;*/
    font-weight: 500;
    text-transform: capitalize;
    color: #fff;
    border-radius: 0px;
  }
  .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: 0px;
  }

  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: #020049;
  }

  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 #020049;
    -webkit-box-shadow: 0 1px 0 0 #020049;
    box-shadow: 0 1px 0 0 #020049;
  }
  
  .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: 768px) and (max-width: 844px) {
    .link_p, 
    .link_p:hover,
    .breadcrumb a,
    .breadcrumb a:hover {
      text-align: left;
      font-size: 7px;
      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;
    }
  }
  @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: .8em;
      text-align: right !important;
      /*color: #979797;*/
    }
    
    .responsive-table td::before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
      color: #020049;
    }
    
    .responsive-table td:last-child {
      border-bottom: 0;
    }
  }

  .pendiente{
    color:#8890a3 ;font-weight:700;
  }
  .aprobado, .completado{
    color:#00a399 !important; font-weight:700 !important;
  }
  .iniciado, .visitado{
    color:#4491cd ;font-weight:700;
  }
  
  .hoverable:hover{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: transform .5s;
  }

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

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

  .texto_info {
    background-color:#fefeff; /*#e3e2e4;*/
    color: #020049;
    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 #29abe2 ;
    border-radius: 20px;
    margin: 0 auto;
    padding: 20px;
  }

  .msg-container span {
    margin: 0 auto; 
    font-size: 25px; 
    font-weight: 500;
    color: #020049;
  }
/*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 {
    background-color: #16254C;
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    box-shadow: rgb(0 0 0 / 48%) 6px 2px 16px 0px, rgb(0 0 0 / 80%) -6px -2px 16px 0px;
  }
  .header-front.toggled #sidebar-wrapper {
    width: 250px;
  }
  .side-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
    }
   .side-nav li > a {
     color: #fff;
     display: flex;
     align-items: center;
     font-size: 15px;
     font-weight: 500;
     padding: 5px 6px;
     font-weight: 400;
     border-bottom: 1px solid #efefef4d;
   }
   .side-nav i.demo-icon {
     font-size: 2rem;color: #fff;
   }
   
   .side-nav li > a:hover,
   .side-nav li > a:focus,
   .side-nav li > a:active {
     color: #ffffff;
     /*display: block;*/
     display: flex;
     align-items: center;
     font-size: 15px;
     /*font-weight: 500;*/
     /*height: 48px;*/
     /*line-height: 50px;*/
     padding: 5px 32px;
     background-color: #d0cece;
     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: #020049;
   }

   .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;
  }

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

  #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: #020049;
    background-color: #fff;
  }

  #dropdown-info-usuario .btn-info-sidebar:hover,
  #dropdown-info-usuario .active,
  .btn-info-sidebar[aria-expanded="true"] {
    color: #fff !important;
    background-color: #1adcea !important;
  }

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

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

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

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

  .cargo_usuario{
    font-weight: 400 !important;font-size: 0.8em !important;color: #16254C !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: 1.5rem!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*/
  .card{
    border: none;
    /*box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
    box-shadow:rgb(0 0 0 / 66%) 0px 1px 9px;
    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:500;
    font-size: 1.5em;
    color:#16254C;
    line-height: 32px; /*interlineado*/
  }

  .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: 30px;
    background-color: #c0a3ef;
  }

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

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

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

  .texto_total1 {
      color: #e9ecf2;
      font-weight: 700;font-size: 1.2em;
    }
    
  .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: #e9ecf2;
    font-weight:900;
  }

  .logros{
    /*color: #29abe2;*/font-weight:700;
  }
  .botones_tabla, .botones_tabla:hover  {
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    border: 0;
    background: #020049;
    width: 100%;
    margin-top: 0px;
    padding: 7px 3px;
    margin: 0px 2px;
    border-radius: 8px;
  }

  .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*/
@media screen and (min-width:200px)and (max-width:1243px) {
  .btn-login {
    font-size: 0.8em !important;
  }
  .titulo1_login {
    font-size: 55%!important;
  }
  .titulo1_login2 {
    font-size: 75%!important;
  }
}
/**/
@media screen and (min-width:200px)and (max-width:1350px) {
  .texto-card-h {
    font-size: 0.8rem !important;
  }
}

/*Inicio estilos evaluaciones y contenido*/
  .question {
    width: 60%;
    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:#020049
  }
  
  .info_eval{
    width: 70%;
    margin: 0.2rem;
    text-align: center;
    padding: 0.2rem;
    background: #020049;
    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: #29abe2;
    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: #020049;
    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: #020049;
  }

  .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;
  }

  .generic-table{
        width: 90%;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 15px !important;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

  .generic-table td, .generic-table th {
    vertical-align: middle;
  }
  
  .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: transparent; border: none;
  }
  .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: #e07710;
    border-radius: 0.25rem;
    box-shadow: rgb(0 0 0 / 35%) 0px -3px 15px;
    margin-left: 1%;
  }

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

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

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

  .sec_pregunta {
    border: 0.5px solid #020049;
    background-color: #020049;
    padding: 10px 20px;
      border-radius: 10px 10px 0 0;
    color: #FFFFFF;
  }

  .sec_respuestas {
    border-left: 0.5px solid #020049;
    border-right: 0.5px solid #020049;
    border-bottom: 0.5px solid #020049;
    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: #020049;
  }

  .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;

  }

/*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: #16254C;
    border: 1px solid #16254C;
    border-radius: 10px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .color-link:hover{
    color: #FFFF;
    background-color: #16254C;
  }

  .color-link2 {
    color: #16254C;
    border: 1px solid #16254C;
    border-radius: 10px;
    padding: 6px;
    vertical-align: middle;
    align-items: center;
    display: inline-flex;
  }

  .color-link2:hover{
    color: #FFFF;
    background-color: #adbcd9;
  }

  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: #020049;
  }
/*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{
    margin-left: -10px !important;
    top: -7px  !important;
    border-radius: 50%;
    color: #FFFF !important;
    min-width: 1.3rem !important;
    font-size: 0.8rem !important;
    position: absolute !important;
    background-color: #29abe2 !important;
    border: 1px solid #269fd2;
      box-shadow: rgb(0 0 0 / 19%) 0px 10px 20px, rgb(0 0 0 / 23%) 0px 6px 6px;
  }
  .btn-notification{
    background-color: transparent !important;
    padding: 3px !important;
    color: #29abe2;
    border: 0;
    box-shadow: none;
  }
  .btn-notification:hover,
  .btn-notification:focus,
  .btn-notification[aria-expanded="true"]{
    color: #0d76a3c2;
    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: #29abe2;
    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:#020049;font-weight: 500;
  }
  .mensaje_noticias2{
    color:#020049;font-weight: 500;
  }
  .card .fecha-publicacion {
    margin-bottom: 5% !important;
    font-size: 15px;
    color:#020049;
    font-weight: 600;
  }
  .card .card-title {
        color:#020049;
    font-weight: 800;
    }

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

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

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

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

/*Fin estilos noticias*/

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

  .webinar {
    background: #29abe2;
    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: #29abe2 !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: #29abe2;
    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: #29abe2;
  }
/*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: #29abe2;
  }

  .subtitulo-libre.cursos {
    margin-top: 50px;
    border-top: 1px solid #bbb;
    padding-top: 30px;
    color: #29abe2;
    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: #29abe2 !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;
  }
  .carousel-indicators li{
    box-sizing: content-box;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 12px;
    height: 10px;
    margin-right: 0px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
    border-radius: 100px;
  }
/*Fin estilo slider*/

/*Inicio estilo tablas*/
  .table-title th {
    text-align: center;
    background-color: #16254C;
    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 .table-title2 th {
    text-align: center;
    background-color: #dfe0e2;
    color: #020049;
    font-size: 18px;
    text-align:center; 
    font-weight:700;
  }
  
  .table-title3 th {
    text-align: center;
    background-color: #16254C;
    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: #29abe2;
    display: inline-block;
    font-size: 1.2rem;
    padding: 0 10px;
    line-height: 30px;
  }
  .pagination li.active {
    background-color: #29abe2;
    border-radius: 8px;
        width: 35px;
        text-align: center !important;
  }
  .pagination li.active > a{
    color: #FFFF;
  }

  .list1 {
    justify-content: center;
  }
/*Fin estilo tablas*/

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

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

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

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

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

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

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

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

  .text2-foro{
    font-size: 15px;color: #020049!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: #29abe2 !important;background: #29abe2 !important;
  }

  .navbar-inner{
    background: #29abe2 !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: #020049!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: #16254C;
  -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: #f1f4f7;
  height: 80vh;
  width: 299px;
  overflow-y: auto;        
  position: relative;
  box-shadow: rgb(0 0 0 / 48%) 6px 2px 16px 0px, rgb(0 0 0 / 80%) -6px 16px 16px 0px;
}

/* 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: #020049;
  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-file,
#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: #020049;
  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: #020049;       
  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;
  color: black;
}

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

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

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

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

/* TK001 .active-document */
#sesion-saberes .archivo_flujo > .accordion:focus,
#sesion-saberes .archivo_flujo > .active-document {
  border-left: 4px solid #C2C1C2;
  /*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: #29abe2 ;
}

/* 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 #29abe2 ;*/
  color: #fff;
  background-color: #29abe2 ;
  font-weight: 700;
}

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

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

#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:#020049;
  font-family: Rubik, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

#sesion-saberes .retroceso a i{   
  color: #020049;
  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: #020049;
    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;*/
    background: #FFFFFF;
    height:100%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    border-right: 0;
  }
  #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: rgb(28 129 6 / 50%) !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: rgb(153 8 8 / 50%)!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 #29abe2;
    background-color: #29abe2;
    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{
    font-weight: 700;
    color:#29abe2;
}
.btn-ver{
    color:#29abe2;
    font-weight: 700;
}
.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;
}

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

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


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

.tooltip-inner{
    background-color:#e07710 !important;
  min-height: 30px;
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-aut[x-placement^="right"] .arrow::before
{
    border-right-color:#e07710 !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: #16254C;
}

.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: #16254C;
    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: 13px;
    border-color: #adbcd9;
}

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

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

.color5{
    color:#252538;
}

.color_fuente_m{
    color: #16254C;
    font-weight: 900;
    font-size: 2rem;
}

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

.color6{
   color: #16254C; 
}

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

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

.bck-color1{
    background-color: #16254C;
}

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

.cab-card{
    background-color: #16254C;
    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: #dfe0e2 1px solid;
}

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

.a-menu-despegable:hover{
    background-color:#16254C !important;
}

/*inicio estilo calendario de eventos*/
.btn-cerrar-modal, .btn-cerrar-modal:hover{
    background-color: #16254C;
    color: #fff; 
    font-weight: 500;
    text-transform: none;
    border-radius: 16px;
  }
  
  .calendario-contenido{
      background-color: #e9ecf2;
  }

  
  .btn-agregar-calendario, .btn-agregar-calendario:hover{
    background-color: #16254C;
    color: #fff; 
    font-weight: 500;
    text-transform: none;
    border-radius: 16px;
  }
  
  .calendario-contenido{
    background-color: #fff;
  }
  
  .link_calendario, .link_calendario:hover{
    color: #16254C;
  }
  
/*fin estilo calendario de eventos*/

/*para iconos svg del menu principal*/
    .menu-desktop img {
      min-width: 115px;
      max-width: 115px;
    }


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

  .agregar-link{
    width:70%
  }
  
  
}

/*Web App*/
.device-is-android, .device-is-ios{
    padding-top: 4rem;
}
.device-is-android .header-front,
.device-is-ios .header-front{
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    border-bottom: 0;
}
.device-is-android nav,
.device-is-ios nav{
    padding-top: 1rem;
}
#menu-install-pwa-ios,
#menu-install-pwa-android {
  display: block !important;
}
/*--Menu System---*/
.menu-title {
  position: relative;
}
.menu-title h1 {
  font-size: 28px;
  font-weight: 700;
  padding: 20px 0px 10px 15px !important;
}
.menu-title p {
  font-weight: 600;
  font-size: 12px;
  margin: 15px 0px -25px 15px !important;
  padding: 0px 0px 0px 0px;
}
.menu-title a {
  font-size: 20px;
  color: #dc3545;
  position: absolute;
  text-align: center;
  width: 55px;
  right: 0px;
  top: 50%;
  margin-top: -5px;
}

.menu-bg {
  background-color: #f8fbfb;
}

.menu-hider {
  position: fixed;
  top: -100px;
  bottom: -100px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: all 300ms ease;
}

.menu {
  position: fixed;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: #FFF;
  z-index: 101;
  overflow: scroll;
  overflow-x: hidden;
  transition: all 300ms ease;
  -webkit-overflow-scrolling: touch;
}
.menu .content {
  margin-bottom: 0px !important;
}

.menu-box-left {
  left: 0px;
  top: 0px !important;
  width: 250px;
  height: 100%;
  bottom: 0px;
  transform: translate3d(-100%, 0, 0);
}

.menu-box-right {
  right: 0px;
  transform: translateX(100%);
  top: 0px !important;
  height: 100%;
  bottom: 0px;
  width: 250px;
}

.menu-box-top {
  transform: translate3d(0, -115%, 0);
  top: 0px;
  left: 0px;
  right: 0px;
  height: 300px;
}

.menu-box-bottom {
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 300px;
  transform: translate3d(0, 110%, 0);
}

.menu-box-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  opacity: 0;
  pointer-events: none;
  transition: all 200ms ease;
}

.menu-box-top.menu-box-detached {
  top: 10px;
  left: 10px;
  right: 10px;
}

.menu-box-bottom.menu-box-detached {
  bottom: 20px;
  left: 10px;
  right: 10px;
}

.menu-box-left.menu-active {
  transform: translate3d(0%, 0, 0) !important;
}

.menu-box-right.menu-active {
  transform: translate3d(0%, 0, 0) !important;
}

.menu-box-top.menu-active {
  transform: translate3d(0%, 0, 0) !important;
}

.is-on-homescreen .menu-box-top.menu-active {
  transform: translate3d(0%, 40px, 0) !important;
}

.menu-box-bottom.menu-active {
  transform: translate3d(0%, 20px, 0) !important;
}

.menu-box-bottom-full.menu-active {
  transform: translate3d(0%, 0px, 0) !important;
}

.menu-box-modal.menu-active {
  transition: all 200ms ease;
  pointer-events: all !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}

.menu-hider.menu-active {
  transition: all 300ms ease;
  opacity: 1;
  pointer-events: all;
}

.menu-hider.menu-active.menu-active-clear {
  background-color: rgba(0, 0, 0, 0) !important;
}

.menu-box-left[data-menu-effect=menu-reveal] {
  display: none;
  pointer-events: none;
  transform: translate(0px) !important;
  z-index: 86;
}

.menu-box-right[data-menu-effect=menu-reveal] {
  display: none;
  pointer-events: none;
  transform: translate(0px) !important;
  z-index: 86;
}

.menu-active.menu {
  opacity: 1 !important;
  transition: all 300ms ease;
  pointer-events: all !important;
  background: #020049;
  color: #FFF;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.menu-active {
  opacity: 1 !important;
}

.menu-active-no-click {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.7);
  pointer-events: all !important;
}

#menu-install-pwa-ios {
  overflow: visible !important;
}

.fa-ios-arrow {
  transform: translateY(4px);
}

.theme-light .fa-ios-arrow {
  color: #FFF !important;
}

.menu-open {
  overflow: hidden !important;
}

/*Menu Design*/
.menu-box-right .menu-active ::after,
.menu-box-left .menu-active ::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 19px;
  font-size: 8px;
  margin-top: 0.5px;
  content: "";
  opacity: 1;
  color: #A0D468;
}

.menu-box-right .nav-item-active span,
.menu-box-left .nav-item-active span {
  font-weight: 800;
  transform: translateY(-3px) !important;
  opacity: 1 !important;
  font-size: 15px !important;
}

.menu-box-right .list-custom-small i:first-child,
.menu-box-left .list-custom-small i:first-child {
  font-size: 15px !important;
  padding-top: 1px;
}

.menu-box-right .list-custom-small,
.menu-box-left .list-custom-small {
  margin-right: 21px;
  margin-left: 8px;
}

.menu-box-right .list-custom-small span,
.menu-box-left .list-custom-small span {
  font-size: 14px;
  /*opacity: 0.7;*/
  padding-left: 5px;
}

.menu-box-right .nav-item-active ::after,
.menu-box-left .nav-item-active ::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 19px;
  font-size: 8px;
  margin-top: 0.5px;
  content: "";
  opacity: 1;
  color: #A0D468;
}
.menu-box-bottom .content {
    width: 90%;
    max-width: 340px;
    color:#2d2b2b;
    text-align:center;
    margin: auto;
}
.menu-box-bottom .footer{
    max-width: 340px;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}
.menu-box-bottom .footer a{
    text-decoration: none;
    margin: 1vh;
    border-radius: 2vh;
    text-align: center;
    line-height: 2vh;
    padding: 7px 10px;
}
.menu-box-bottom .footer .instalar{
    background: #374ef7;
    color: #FFFF;
}
.menu-box-bottom .footer .mas-tarde{
    background: #b1b2b7;
    color: #ffffff;
}

.btn-login{
  width: 100%;
  font-size: 2.2em;
}

@media only screen and (max-width: 600px) {
    .center-div {
        /*height: 40vh;*/
        width: 80vw;
        background-color: #ffffff;
        border-radius: 15px;
        padding: 5px;
        box-sizing: border-box;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}

/*estilos textos login*/
.titulo1_login {
  font-size: 85%;
  font-weight: 500;
  /*line-height: 0.1;*/
}

.titulo1_login2 {
  font-size: 95%;
  font-weight: 500;
  /*line-height: 0.1;*/
}

.titulo1_login3 {
  font-size: 84%;
  font-weight: 600;
  /*line-height: 0.1;*/
}

.img_logo_footer {
  max-height: 70px;
}

.title-footer {
  font-weight: 700;
  font-size: 1.3em;
}
.content-footer {
  font-size: 1.1em;
}

.logo {
  height: 95.55px;
}

.soporte-interno {
  font-size: large;
  width: inherit;
  background: linear-gradient(to right, #4491CD, #1ADCEA);
}

.card-home1 {
  background: linear-gradient(to right, #4491CD, #1ADCEA);
  color: #ffffff;
}

.card-home2 {
  background-color: #00A399;
  color: #ffffff;
}

.btn-home {
  font-size: 0.8em;
  width: inherit;
}

.texto-card-h {
  font-size: 1.1rem;
}

/*estilos splide*/
.splide {
  width: 100%;
}

.splide__track {
  overflow: hidden;
}

.splide__list {
  display: flex;
  gap: 10px; /* Ajusta el espacio entre los slides si es necesario */
}

.splide__slide {
  flex: 0 0 auto; /* Asegura que los slides no se estiren y se mantengan en el tamaño que necesitan */
}

.card-slide {
  width: 100%;
  /* Añade cualquier estilo adicional para ajustar el tamaño de las tarjetas si es necesario */
}

.contenedor-splide {
  background: #e8edef;
  border-radius: 15px;
}

.titulo-carpeta {
    font-size: clamp(16px, 2vw, 5px);
    background-color: transparent;
    color: #16254c;
}

.ver-link {
  background: linear-gradient(to right, #4491CD, #1ADCEA);
  background-clip: padding-box; /*puede ayudar a que el degradado del fondo se ajuste al área del contenido del botón, evitando que se desborde a los bordes*/
  padding: 4px; 
  border: 1px solid transparent; 
  box-shadow: rgb(0 0 2 / 40%) 0px 0px 10px;
  min-width: inherit;
  max-width: inherit;
  background-size: cover;
}

.ver-link:hover{
    transform: scale(1.05); /* Escalar ligeramente el botón */
}
   



.card-slide:hover {
  border: 1px solid #8890a3;
}

.btn-certificados {
  font-size: large;
  width: inherit;
}

/*inactivar una carpeta del home*/
.inactive {
    filter: grayscale(100%);
    
    pointer-events: none; /* Desactiva clics y otras interacciones */
    cursor: not-allowed; /* Cambia el cursor al pasar sobre la card inactiva */
}

/*inactivar una carpeta del home*/
.inactive-div {
    filter: grayscale(100%);
    pointer-events: none; /* Desactiva clics y otras interacciones */
    cursor: not-allowed; /* Cambia el cursor al pasar sobre la card inactiva */
}

.ico-inicio {
  font-size: 2.5rem;
  color: #ffffff;
}

.img-info_carpeta {
  max-height: 105px;
}

.ver-eva {
  background-color: #00A399;
  background-clip: padding-box; /*puede ayudar a que el degradado del fondo se ajuste al área del contenido del botón, evitando que se desborde a los bordes*/
  padding: 4px; 
  border: 1px solid transparent; 
  box-shadow: rgb(0 0 2 / 40%) 0px 0px 10px;
  min-width: inherit;
  max-width: inherit;
  background-size: cover;
}

.ver-eva:hover{
    transform: scale(1.05); /* Escalar ligeramente el botón */
}

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