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

/*@font-face {
  font-family: FSAlbert Light Italic;
  src: url('../../../fonts/FSAlbert Light Italic.ttf');
}
@font-face {
  font-family: FSAlbert Light;
  src: url('../../../fonts/FSAlbert Light.ttf');
}
@font-face {
  font-family: FSAlbert Regular;
  src: url('../../../fonts/FSAlbert Regular.ttf');
}
@font-face {
  font-family: FSAlbert Thin Italic;
  src: url('../../../fonts/FSAlbert Thin Italic.ttf');
}
@font-face {
  font-family: FSAlbert Thin;
  src: url('../../../fonts/FSAlbert Thin.ttf');
}
@font-face {
  font-family: FSAlbert-Bold;
  src: url('../../../fonts/FSAlbert-Bold.ttf');
}
@font-face {
  font-family: FSAlbert-ExtraBold;
  src: url('../../../fonts/FSAlbert-ExtraBold.ttf');
}

@font-face {
  font-family: FSAlbert-Italic;
  src: url('../../../fonts/FSAlbert-Italic.ttf');
}
@font-face {
  font-family: Roboto-Bold;
  src: url('../../../fonts/Roboto-Bold.otf');
}

@font-face {
  font-family: FSAlbertRegular;
  src: url('../../../fonts/FSAlbertRegular.otf');
}*/

/*Roboto*/
@font-face {
  font-family: Roboto-Bold;
  src: url('../../../public/font/roboto/Roboto-Bold.ttf');
}
@font-face {
  font-family: Roboto-Light;
  src: url('../../../public/font/roboto/Roboto-Light.ttf');
}

@font-face {
  font-family: Roboto-Medium;
  src: url('../../../public/font/roboto/Roboto-Medium.ttf');
}
@font-face {
  font-family: Roboto-Regular;
  src: url('../../../public/font/roboto/Roboto-Regular.ttf');
}

@font-face {
  font-family: Roboto-Thin;
  src: url('../../../public/font/roboto/Roboto-Thin.ttf');
}




html, body {
    width: 100% !important;
    
    height: 100%;
}
body {
  background: #FFF;
  font-family: Roboto-Regular;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main, div.page-wraper{
  flex: 1 0 auto;
}
.demo-icon
{
  font-family: "iconos-sistel";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* You can be more comfortable with increased icons size */
  font-size: 55px;
  color: #612146;
  
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
    
    @font-face {
  font-family: angelina;
  src: url('fonts/angelina.TTF');
}



.header-front {
	width: 100%;
	background:#0DA9DE;
	display: flex;
	position: relative;
	/*border-bottom: 4px solid #FD3354;*/
}
.header-btn {
  width: 100%;
  float: right;
  margin-bottom: 0;
  background-color: #00508a
}
.header-btn a {
  float: right;
}

.header-logo {
  width: 506px;
  float: left;
  min-height: 10em!important;

}
.header-logo a {
  display: inline-block;
  float: right;  
}
.header-options {
  width: 100%;
  overflow: hidden;
  margin-bottom: 0;
  background-color: #00508a;
}

.header-menu {
  margin-top: 1em;
}

.header-menu a {
  float: right;
}
.menu-desktop {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	margin-top: 0px;
}
.div-movil {
  position: absolute;
  /*top: 9em;*/
  left: 1em;
  z-index: 2;
}
#menu-movil {
  height: 300px;
  width: 300px;
  background-color: #ccc;
  position: fixed;
  left: -22em;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
}
#menu-movil.open_m {
  left: 0em;
}


.anchor-options {
  display: inline-block;
}

.header-options .header-data-acces {
  position: relative;
  right: 4em;
}

.header-data-acces span {
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #00534F;
}


.header-options .anchor-header-option2 {
  margin-right: 30px;
}

.side-nav .user-view .mybackground {
  background-color: #EC7106;
}

.conten_searched {
  position: absolute;
  height: 65px;
  background: #fff;
  width: 100%;
  left: -300em;
  transition: left 0.4s;
}

.conten_searched.show_s {
  left: 0em;
  transition: left 0.4s;
}

.conten_searched input,
.conten_searched input:focus,
.conten_searched_mob input,
.conten_searched_mob input:focus {
  border: none!important;
  box-shadow: none!important;
  height: 2.5em!important;
}

.conten_searched_mob {
  margin-top: -12px;
  margin-bottom: -30px;
}


.pie-fondo-blanco {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #666666;
}

.footer-fondo-blanco {
  border-top: 6px solid #04afc0;
  background-color: #fff;
  min-height: 200px;
}

.credito-footer{
	margin-right: 30px;
  top: -1.3em;
  position: relative;
}

.footer-fondo-blanco .credito-footer {
  top: 0em;
}

.my-container {
  margin: 0 auto;
  width: 95%;
}
.footer-fondo-color {
  bottom: 0px;
  z-index: 1;
  border-top: 4px solid #0099ff;
  background-color: #0099ff;
  max-width: 100%;
  /*margin-top: 50px;*/
}
.pie-fondo-color {
  /*margin-left: 30px;*/
  /*margin-right: 30px;*/
  font-size: 10px;
  color: #fff;
}

.contenido{
    float: right;
    height: inherit;
    width: 80%;
}
.title-home1 {
  color: #0D3A5C;
  font-size: 1em;
  font-family: Roboto-Bold;
  text-align: center;
}

.title-home2 {
  color: #757575;
  font-size: 1em;

}

.texto-home3 {
  color: #757575;
  font-size: 1em;
  /*font-family: Helvetica, sans-serif;*/
  line-height: 1.1em;
}

.texto-home4 {
    color: #ff6600;
    font-size: 1.45em;
}

.page-wraper{
  width: 100%;
  min-height: 520px;
  display: inline-block;
  vertical-align: middle;
}

.sidebar-info{
  width: 20%;
  float: left;
  background-color: #ebeef3;
}


.div-img-info {
  text-align: center;
  margin-top: 20px;
}
.div-name-info {
  text-align: center;
}
.enlaces_sidebar {
  width: 100%;
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #cb6500;
  color: #fff;
  font-size: 17px;
  margin-top: 3px;
  text-decoration: none;
  text-align: center;
}

.header-menubar {
  background-color: #05afc0;
  text-align: center;
  min-width: 1300px;
  display: block;
  max-width: 100%;
  margin-top: 10px;
}
.not-active {
   pointer-events: none;
   cursor: default;
}
.enlaces_menu_principal{
  margin-right: 20px;
  display: inline-block;
}

/*Frame soporte y ayuda*/
#my-iframe {
  width: 100%;
  height: 1060px;
}

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

.error{
    color: #EA4646;
}

.subtitle-form {}

.titulos-header-cursos {
    width: 100%;
    height: auto;
    display: inline-block;
    /*display: none;*/
}
.titulos-header {
    background-color: #6f7b87;
}
.titulos-header img {
    position: relative;
    right: -12px;
    float: right;
}
.titulos-header span {
    font-weight: bold;
    font-size: 1.4em;
    color: #FFFFFF;
    margin-left: 30px;
}
.subtitulos-header {
  margin-left: 30px;
}

.subtitulos-header span{
    font-size: 1.2em;    
    /*float: right;*/
    /*margin-right: 20px;*/
    color: #0b5498;
}

.status_curso{
    margin-left: -36px;
    margin-bottom: 148px;
}

.con_evaluacion{
    margin-left: 20px;
    margin-right: 15px;
    width: 100%;
}

.preguntas_cuestionario{
    width: 95%;
    margin-bottom: 20px;
}

.preguntas_cuestionario td{
    border: 1px #bbbbbb solid;
    padding: 2px;
    padding-left: 10px;
}

.num_pregunta{
    font-size: 15px;
    font-weight: bold;
    color:#585E61;
}

.respuestas_cuestionario{
    margin-left: 50px;
    border: 0px none;
}

.respuestas_cuestionario td{
    border: 0px none;
    padding: 5px;
}

.respuestas_cuestionario p label {
    color: #757575;
}

.evaluacion_enviar{
    margin-top: 20px;
    text-align: center;
}
.vineta_respuesta{
    padding-right: 10px;
    font-weight: bold;
}

.resp_correcta{
    color: #158B40;
    font-family: Roboto-Bold;
}

.resp_errada{
    color: #ff3333;
    font-family: Roboto-Bold;
}

.color-link{
    color: #337ab7;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {
    color: #158B40;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.color-title-form {
    color: #0D3A5C;
    font-family: Roboto-Bold;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++  DATATABLES +++++++++++++++++++++++++++++++++++++++++++++++ */
.dataTables_filter, .dataTables_length {
    margin-bottom: 10px;
}

.dataTables_filter label,
.dataTables_length label {
    color: #333;
    font-size: 15px;
}

.my-selectlength-datatable, .my-search-input-datatable {
    border: 1px solid #989292;
}

.my-selectlength-datatable {
    height: 30px;        
    margin-left: 10px;
    margin-right: 10px;
    width: 70px;
    display: inline-block!important;
}

.my-search-input-datatable{        
    height: 8px;
    padding: 10px;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#message-green, .toast-succes {
  background-color: #5cb85c;
  color: #fff;
}

#message-yellow, .toast-warning{
  background-color: #f0ad4e;
  color: #fff;
}
#message-red, .toast-error  {
  background-color: #d9534f;
  color: #fff;
}
#message-blue, .toast-info {
  background-color: #0275d8;
  color: #fff;
}


#texto-title-encuesta {
    font-size: 1.9em;
    color: #e79824;
    font-weight: 500;
    padding-bottom: 0.9em;
  }

#texto-desc-encuesta {
  font-size: 1.3em;
  color: #016867;
}

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

#contenido_html ul {
    padding-left: 40px;
    list-style-type: inherit;
}
#contenido_html ul li {
    list-style-type: inherit;
}

#contenido_html strong, 
#contenido_html b {
    font-weight: bold;
}

#contenido_html td, 
#contenido_html th {
    padding: 5px;
}

#contenido_html table, 
#contenido_html th, 
#contenido_html td {
    border: 1px solid #000;
}

.item_course {
    text-align: center;
    height: 240px;
    text-decoration: none;
}

.img_course {        
    /*height: 180px;*/
    /*border: 1px solid #1f5d63;*/
    /*border-radius: 10px 10px 0px 0px;*/
}
.img_course img {
    /* max-width: auto;
    height: 100%; */
    max-width: 100%;
    height: auto;
}
.img_course i {
  position: absolute;
}
.title_course {
    width: 217px;
    height: 60px;
    margin: 0 auto;
    overflow-y: hidden;
    /*background-color: #05afc0;*/
    /*border-left: 1px solid #1f5d63;*/
    /*border-right: 1px solid #1f5d63;*/
    /*border-bottom: 1px solid #1f5d63;*/
    border-radius: 0 0 10px 10px;
    padding: 5px 0;
}
.title_course span {
    color: #0D3A5C;
    font-weight: bold;
    font-size: 0.95em;
    vertical-align: middle;
}

.title_course1 span {
  color: #757575;
  font-size: 0.95em;
  vertical-align: middle;
}

.content_promalla {
  position: relative;
  text-align: center;
  display: inline-block;
}
.name_promalla {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-55%, -50%);
  color: #fff;
  font-weight: 500;
  line-height: 1.1em;
}

.mybread {
  box-shadow: none;
}

.mybread .breadcrumb:before {
  color: inherit;
}

@media (max-width: 1200px) {
  .header-menu {
    text-align: center;
    margin-top: 0em;
  }
}

@media (min-width: 600px) and (max-width: 992px) {
  .header-logo {
    text-align: center;
  }
  .header-menu {
    text-align: center;
  }

  .header-menu a,
  .header-logo a {
    float: none;
  }
  .contenido {
    width: 100%;
  }
  .sidebar-info {
    display: none;
  }
  .titulos-header, .subtitulos-header {
    text-align: center
  }
  .titulos-header span {
    margin-left: 0;    
  }
  .subtitulos-header span {
    float: none;
    margin-right: 0;
  }
  #my-iframe {
    height: 1150px;
  }
}

@media (max-width: 600px) {
  .contenido {
    width: 100%;
  }
  .sidebar-info {
    display: none;
  }
  .credito-footer {
    margin-right: 0;
  }
  .titulos-header, .subtitulos-header {
    text-align: center
  }
  .titulos-header span {
    margin-left: 0;    
  }
  .subtitulos-header span {
    float: none;
    margin-right: 0;
  }
  #my-iframe {
    height: 1200px;
  }
}

@media (max-width: 400px) {
  .header-logo {
    min-height: 5em!important;
  }
  .div-movil {
    /*top: 7em;*/
  }
  .titulos-header, .subtitulos-header {
    text-align: center
  }
  .titulos-header span {
    margin-left: 0;    
  }
  /* .subtitulos-header span {
    display: none;
    margin-right: 0;
  } */

  #my-iframe {
    height: 1250px;
  }
}


footer {
	background: #0D3A5C;
	color: #f2f2f2;
	font-size: 11px;
    position:relative;
    z-index: 2;
}

footer .row {
	margin-top: 0.7rem;
	margin-bottom: 0;
}
a:link, a:visited, a:active {
    text-decoration: none;
}
.link-footer{
	color: #f2f2f2;
}

.link-footer:hover {
    color: #f2f2f2;
}

.texto-footer{
  margin-top: 1rem;
  margin-bottom: 1rem;
}


.contenido-index {
  width: 100%;
  height: 100%;
  padding: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  position: relative;
}

.side-nav i.demo-icon {
  font-size: 2rem;
}

.aa {
  margin-left: 1.5rem!important
}
.container-opciones{
  position: relative;
  width: 80%;
}
.slider .slides {
  background-color: transparent;
}
.slides {
/*width: 2000px !important;*/
  height: 213px !important;
}
.slider li img {
background-size: 100% 100% !important;
}

.slider{
  height: 240px !important;
}


#progresoAdvance{
  color:#0D3A5C!important;
  /*font-weight: bold !important;*/
  font-family: Roboto-Bold;
}
.progress-course{
  background-color: white;
  height: 7.5em;
  padding: 15px;
  
}
.progress-course  span {
  font-size: 1.1rem;
  font-family: Roboto-Bold;
  color:  white;
}

.progress-course .progress {
  height: 24px;
  background-color: #f1f4f7;
  border-radius: 30px;
}

.progress-course .progress .determinate {
  background-color: #5F2364;
}

.progress .determinate {
  position: relative;
}
.porcentaje{
  padding-left: 15px;
}

.progress-course1  {
  font-size: 0.8rem;
  font-family: Roboto-Bold;
  color:  #303839;

}

.progress-courses {
  font-size: 0.9rem;
  font-family: Roboto-Bold;
  color: #000000;
}


.progress-courses .progress {
  height: 10px;
  background-color: #f1f4f7;
  border-radius: 30px;
}
.texto_total1 {
	color: #757575 ;
	font-family: Roboto-Regular;
	font-size: 1em;
}

.progress {
  border-radius: 30px;
}

.texto_total {
	color: #757575;
	font-family: Roboto-Regular;
	font-size: 1.45em;
}

span.promedio {
  color: #EC7106;
  font-family: Roboto-Bold;
  font-size: 1.5em;
}


.button-form {
  margin: 0px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.link_p, .link_p:hover, .breadcrumb a, .breadcrumb a:hover {
  text-align: left;
  color: #EC7106;
  font-size: 0.95em;
  text-decoration: none;
  font-family: Roboto-Bold;
}

.btn2, .btn2:hover{
  background-color: #fff;
  color: #585E61;
  font-family: Roboto-Regular;
  text-transform: capitalize;
  text-decoration: none;
  text-align: center;
  letter-spacing: .5px;
  -webkit-transition: .2s ease-out;
  transition: .2s ease-out;
  cursor: pointer;
  border:0px;
}

.color-mensaje-span {
	color: #585E61;
  font-family: Roboto-Regular;
}

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

.btn3, .btn3:hover{
  background-color: #EC7106;
  color: #fff;
  font-family: Roboto-Regular;
  text-decoration: none;
  text-align: center;
  letter-spacing: .5px;
  -webkit-transition: .2s ease-out;
  transition: .2s ease-out;
  cursor: pointer;
  border:0px;
  border-radius: 8px;
  float: right;
  padding: 4px;
}

.btn4, .btn-large4, .btn4:hover, .btn-large4:hover{
  text-decoration: none;
  color: #fff;
  background-color: #80A32A;
  font-family: Roboto-Regular;
  cursor: pointer;
  border:0px;
  border-radius: 8px;
  padding: 8px;
  letter-spacing: .5px;
}

.blue1 {
  background-color: #0DA9DE !important;
}

.texto-encimaa {
  position: absolute;
  top: 20px;
  left: 70px;
}

.texto_total2 {
  color: #757575;
  font-family: Roboto-Regular;
  font-size: 1.5em;
}
.texto_total3 {
  color: #757575;
  font-family: Roboto-Regular;
  font-size: 2em;
  margin: 0.5rem 0 0.5rem 0;
}
.promedio1 {
  color: #EC7106;
  font-family: Roboto-Bold;
  margin: 0.5rem 0 0.5rem 0;
}

.info_malla{
  font-family: Roboto-Regular;
  font-size: 1em;
  color: #0D3A5C;

}

.finalizado{
  font-family: Roboto-Regular;
  font-size: 1em;
  color: #80A32A;

}
.pendiente{
  font-family: Roboto-Regular;
  font-size: 1em;
  color: #757575;

}

.bold {
    font-family: Roboto-Bold !important;
}

.regular {
    font-family: Roboto-Regular !important;
}