/* fuentes */
@font-face {
    font-family: "poppins";
    src: url("../fonts/Poppins-Regular.ttf");
}

*{
    font-family: 'poppins';
}

.content{
    font-size: 14px;
}

.content .row {
    margin: 0;
}

.options-module {
    padding:0; 
    height: max-content;
    border-radius: 0px;
}

.options-module .card-header {
    border: none;
    background: #fff;
    color: white;
}

.options-module .card-body {
    padding: 0px;
}

.options-module .card-body div, .options-module .card-body a {
    text-align: left;
    border-radius: 0px;
    margin: 0;
}

.content-module {    
    border-radius: 0px;
}

.content-module .card-header{
    text-align: center;
    font-size: 1.5rem;
    border: none;
}

.operaciones {
    width: 100%;
}

.content-module .btn {
    padding: 0px 10px;
}

.content-header h1 {
    padding: 2px 11px;
}

.content-header i {
    color: #17a2b8;
}

.content-header {
    padding: 15px 1rem;
}

.content-header .breadcrumb {
    padding: 2px 11px;
    border-radius: 0px;
    position: relative;
    top: 5px;
}

label.error {
    color: #dc3545;
    font-size: 13px;
    padding-left: 5px;
}

.form-check-inline {
    margin: 0;
}

.nav-sidebar .nav-header:not(:first-of-type) {
    padding: 0;
    height: 2px;
    background: #ffffff91;
}

.bootstrap-tagsinput {
    border-bottom: 1.5px solid;
}

.bootstrap-tagsinput .tag {
    position: relative;
    float: left;
    padding: 0 .5rem;
    font-weight: normal;
    line-height: 1.5rem;
    cursor: default;
    background: #e4e8ef;
    margin: 1px 3px;
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]) {
    text-align: center;
}

.brand-link .brand-image{
    margin: auto;
    border-radius: 0;
    float: none;
}
.brand-image{
    width: 130px!important;
    height: 70px!important;
}
.nav-link{
    color: gray!important;
}
.brand-link{
    background-color:#fff!important;
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]){
    background: black;
}

.layout-fixed .main-sidebar {
    background: #fff; 
}

[class*=sidebar-dark-] .sidebar a {
    color: rgba(255, 255, 255, 0.829);
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #c89d00;
    border-radius: 0;
}

/* .login-page {
    background: #11291e;
} */

.os-content{
    padding: 0px !important;
}

.seccion-title {
    font-size: 1.3rem;
}

.lesson-title {
    font-size: 1rem;
}

/*//////////////////////////////////////////////////
 estilos para el modulo cursos seccion pagina ////*/
.tab-pane .card{
    box-shadow: none;
} 

.note-editor {
    background: white;
}

.course-content {
    background: white;
    border-right: 2.5px dotted #00a85978;
    padding-bottom: 1rem;
}

.img-caja {
    margin-bottom: 30px;
    text-align: center;
    height: auto;
}

.img-caja img {
    width: 100%;
}

.course-barra{
    text-align: center;
    padding-top: 10px;
}

.submitable{
    width: 90%;
    margin: 3px 0px;
    border-radius: 2rem;
    font-size: 14px;
}

.dinamic {
    text-align: left;
    width: 100%;
}

.dinamic .row {
    margin: 10px 0px;
}

.dinamic i {
    font-size: 1.5rem;
    padding: 5px;
    cursor: pointer;
}

.dinamic .fa-minus-circle:hover {
    color: red;
}

.dinamic .fa-plus-circle:hover {
    color: green;
}

.dinamic .input {
    width: 95%;
}

.dinamic .button {
    width: 5%;
}

#mostrar_tipo_video_promocional, #mostrar_tipo_video {
    margin-top: 10px;
}

.publicado {
    width: max-content;
    background: #00a859d9;
    color: white;
    padding: 1px 10px;
    border-radius: 2rem;
    font-size: .7rem;
}

.borrador {
    width: max-content;
    background: #0086a8d9;
    color: white;
    padding: 1px 10px;
    border-radius: 2rem;
    font-size: .7rem;
}

.no-publicado {
    width: max-content;
    background: #b80909d9;
    color: white;
    padding: 1px 10px;
    border-radius: 2rem;
    font-size: .7rem;
}

video {
    width: 100%;
}

#update_video_promocional {
    margin-top: 10px;
}

.form-course label {
    width: 100%;
    background: #f4f6f9;
    font-size: .9rem;
    padding: 8px;
    margin-top: 15px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    border: 1px solid #ced4da;
    border-bottom: none;
}

.form-course input {
    font-size: .8rem;
    padding: 5px;
    height: 2rem;
    border-radius: 0px;
}

.form-course h3 {
    background: #00a8590d;
    padding: 5px;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 15px;
    border: 1px solid #00a859;
    font-size: 1.3rem;
}

input[type="file"].img-destacada {    
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

label[for="imagen_destacada"], 
label[for="adjuntos"], 
label[for="video_promocional"], 
label[for="video"] {
    font-size: 12px;
    color: gray;
    background-color: #17a2b8;
    display: inline-block;
    transition: all .5s;
    cursor: pointer;
    padding: 10px 0px;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    font-size: 1rem;
}

.nav-tabs .nav-link{
    font-size: 1rem;
    color: #17a2b8;
}

.course-content hr {
    border-top: 1px dashed #00a85978;
}


/*/////////////////////////////////////////
// => estilos para la seccion leccion ///*/
.crear-modulo {
    background: #d0d3d6;
    margin-top: 1rem;
    padding: 7px 20px;
    color: black;
    cursor: pointer;
}

.crear-modulo:hover{
    background: #17a2b8;
    color: white;
}

/* estilo para el componente de  modulos */
.box-module {
    border-left: 1px solid #bbbdc0;
}

.box-module .header-module {
    background: #d0d3d6;
    padding: 7px 1rem;
    border: 1px solid #0000001a;
}

.box-module .header-module .title {
    width: 80%;
    font-size: 1rem;
}

.box-module .header-module .title:hover{
    cursor: pointer;
    color: #17a2b8;
}

.box-module .header-module .options {
    width: 20%;
}

.box-module .header-module .options div{
    padding: 1px 10px;
}

.box-module .header-module .options div:hover {
    color: #17a2b8;
    cursor: pointer;
}

.box-module .content-module {
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.box-module .content-module .crear-leccion div {
    padding: 5px;
    border: 1px solid #bbbdc0;
    border-radius: 2rem;
    margin: 0px 3px;
    color: #000000cc;
    font-size: .7rem;
}

.box-module .content-module .crear-leccion div:hover {
    color: #ffffff;
    cursor: pointer;
    background: #00a859;
    border-color: #00a859;
}

.box-leccion .header-leccion {
    background: #e9edf1;
    padding: 7px 1rem;
    border-radius: 10px;
    border: 1px solid #0000001a;
    margin-bottom: .7rem;
}

.box-leccion .header-leccion .title {
    width: 80%;
    font-size: 1rem;
}

.box-leccion .header-leccion .options {
    width: 20%;
}

.box-leccion .header-leccion .options div{
    padding: 1px 10px;
}

.box-leccion .header-leccion .options div:hover {
    color: #17a2b8;
    cursor: pointer;
}

.leccion {
    padding: 15px;
    border: 1px solid #00000038;
}

.btn-cerrar {
    text-align: right;
    font-weight: bold;
    padding-right: 10px;
    font-size: 1rem;
}

.btn-cerrar span:hover {
    color: red;
    cursor: pointer;
}

.btn-guardar {
    background: #8a8a8a;
    color: white;
    border: 1px solid #722e0052;
    padding: 8px 20px;
    border-radius: 2rem;
    margin: auto;
    font-size: 1rem;
    cursor: pointer;
}

.btn-guardar:hover {
    background: #17a2b8;
}

.form-modulo label {
    margin-top: 0px;
}

.form-modulo .btn-guardar {
    margin-top: 10px;
    font-size: .8rem;
}

.error {
    color: red;
}

.oculto {
    display: none;
}

.visualizar {
    border-top: 2px dotted #87d6b1;
    width: 100%;
    border-bottom: 2px dotted #87d6b1;
    padding: 8px 0px;
}

.visualizar a {
    color: black;
}

.visualizar a:hover {
    color: #17a2b8;
}

/* estilos para los comentarios */
.coments {
    width: 100%;
    padding-top: 1rem;
}

.coments .caja {
    margin: 10px 0px;
}

.coments .caja img {
    width: 20%;
    max-width: 20%;
    height: 40px;
    position: relative;
    border-radius: 2rem;
    padding: 8px;
    padding-top: 0px;
    top: 5px;
}

.coments .caja .datos-usuario {
    text-align: left;
    padding-left: 8px;
    width: 80%;
    max-height: 51px;
    font-size: .7rem;
    border: 1.5px solid #00000047;
    border-radius: 1rem 0rem 1rem 0rem;
    overflow-y: auto;
}
 
.descargar-adjunto {
    color: #29b119;
    font-size: 1rem;
    cursor: pointer;
}

.descargar-adjunto:hover {
    color: #e82626;
}

.formulario .col-md-6 {
    margin-bottom: 1rem;
}

.form-course table thead {
    background: #00000040;
}

.btn-indicador {
    border: 1px solid #00000054;
    padding: .4rem;
    border-radius: 2rem;
    cursor: pointer;
    width: max-content;
    font-size: 1rem;
}

.btn-indicador:hover {
    background: #17a2b8;
    color: white;
    border-color: white;
}

.form-indicadores {
    padding: 2rem;
}

.form-indicadores .btn-cerrar {
    width: 100%;
}

.form-indicadores .col-md-12 {
    margin-bottom: 1rem;
}

.form-indicadores .form-check-inline {
    padding: .5rem;
}

.form-indicadores button {
    margin: 0rem .5rem;
}

.form-course hr {
    border: 1px dashed #00a8596b;
}

.recurso {
    background: #00ff1429;
    padding: 5px 10px;
    margin: 3px 0px;
    margin-right: 10px;
}

label.error {
    margin-top: 0px;
    background: transparent;
    border: none;
    padding-top: 2px;
    color: red;
    font-size: .75rem;
}

.caja-matricula {
    padding: 1rem;
    box-shadow: 0px 0px 1px 1px #00a859;
}

.flecha-matricula {
    font-size: 3rem;
    color: #0000008f;
    text-align: center;
    margin: auto;
}

.caja-matricula div {
    background: #f3f5f8;
    padding: 5px;
    cursor: pointer;
    border-bottom: 1px dashed #17a2b830;
}

.caja-matricula input {
    border-radius: 0px;
    font-size: .8rem;
    padding: 5px;
    height: 30px;
}

.caja-matricula div:hover {
    background: #17a2b8;
    color: white;
}

.seccion-alumnos {
    padding: 20px;
}

.seccion-alumnos .alumnos {
    padding: 0;
}

.table-head {
    padding: 5px 10px;
    background: #0000002b;
    font-weight: bold;
}

.table-body {
    padding: 5px 10px;
    border-bottom: 1px dashed #00a859;
}

.table-footer {
    border-bottom: 1px dashed #00a859;
}

.seccion-alumnos .indicadores {
    padding: 0;
}

.seccion-alumnos .indicadores .element {
    border-left: 1px solid #00000052;
}

.seccion-alumnos .indicadores .element .cabeza {
    padding: 5px 10px;
    background: #0000002b;
    font-weight: bold;
    font-size: 13px;
    max-width: 10rem;
    width: 10rem;
    height: 31.4px;
    max-height: 31.4px;
}

.seccion-alumnos .indicadores .element .cuerpo {
    border-bottom: 1px dashed #00a859;
    display: flex;
}

.seccion-alumnos .indicadores .element .cuerpo input {    
    padding: 5px 5px;
    border: none;
}

.seccion-alumnos .indicadores {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
}

.btn-crear {
    margin: 5px;
    margin-top: 10px;
    background: #17a2b8;
    border: 1px solid #0cb5d0;
    padding: 3px 10px;
    border-radius: 2rem;
    color: white;
}

.btn-crear:hover {
    background: #00a859;
    border: 1px solid #8ab986;
}

.btn-eliminar {
    margin: 5px;
    margin-top: 10px;
    background: #d61d1d;
    border: 1px solid #ff0303;
    padding: 3px 10px;
    border-radius: 2rem;
    color: white;
}

.btn-eliminar:hover {
    background: #ff0505;
}

select.form-control {
    height: calc(2rem + 0px);
    padding: 5px;
    font-size: .8rem;    
    border-radius: 0px;    
}

.opciones {
    margin-top: 10px;
}

.title-opciones {
    margin-top: 10px;
    margin-left: .5rem;
}

.collapse-pregunta {
    background: #d0d3d6;
    padding: 5px;
    cursor: pointer;
}

.collapse-pregunta:hover {
    background: #1fbb7a;    
    color: white;
}

.flechita {
    float: right;
    padding: 5px;
    font-size: 1.3rem;
}

.custom-control-label, .check-radio {
    background: none !important;
    padding: 3px !important;
    border: none !important;
    margin-top: 0px !important;
}

.respuesta-title {
    text-align: center;
    font-size: 1rem;
    padding: 10px;
    text-decoration: underline;
}

#mostrar_tipo_pregunta_opciones{
    padding-bottom: 15px;
    padding-top: 5px;
}

.check-input {
    position: relative;
    top: 12px;
}

.title-create-evaluacion {
    margin: 0px;
    margin-top: 15px;
    margin-left: 7px;
}

.opciones-evaluar {
    display: flex;
}

.opciones-evaluar div {
    background: #17a2b8;
    padding: 1px 10px;
    color: white;
    margin-right: 5px;
    cursor: pointer;
}

.opciones-evaluar div:hover {
    background: #00a859;
}

.preview-button {
    cursor: pointer;
    color: #00a859;
}

.header-modal {
    background: #00a8590d;
    padding: 5px;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
    border: 1px solid #00a859;
    font-size: 1.3rem;
}

.nombre-indicador {
    font-size: 1rem;
}

.select-indicador {
    background: #f2fbf7;
    padding: 5px 10px;
    display: flex;
    cursor: pointer;
}

.select-indicador.activo, .select-indicador:hover {
    background: #0000002b;
}

.verde {
    color: #00a859;
}

.form_calificar_indicador {
    display: none;
}

#descripcion_indicador {
    padding: 10px;
    background: #ebebeb;
}

#calificacion-indicador {
    display: flex;
}

.oscurito {
    background: #d4d4d459;
}

#calificacion-indicador input, #calificacion-indicador select {
    width: 50%;
    margin: auto;
}

.input-format {
    height: calc(2rem + 0px);
    padding: 5px;
    font-size: .8rem;
    border-radius: 0px;
}

#nombre_elemento{
    font-size: 1rem;
    font-weight: bold;
    background: #d4d4d4;
    padding: 5px 10px;
}

#mostrar_calificaciones .fa-edit {
    font-size: 1rem;
    margin: 0px 10px;
    cursor: pointer;
    color: #17a2b8;
}

/* ocultar input file del summernote */
.form-group.note-form-group.note-group-select-from-files {
    display: none;
}

.verde {
    color: green;
}

.rojo {
    color: red;
}

.borde-bajo{
    border-bottom: 10px solid white;
}

.imports i {
    font-size: 2rem;
}

.imports {
    display: flex;
    margin-left: 10px;
}

.imports div {
    padding: 3px 15px;
    background: #00a859;
    color: white;
    border: 2px solid #c89d00;
    margin-left: 5px;
    cursor: pointer;
}

.imports .fa-file-excel {
    font-size: 15px;
}

.title-category {
    font-weight: 500;
    margin-left: 5px;
    margin-top: 40px;
    color: #17a2b8;
    font-size: 20px;
}

.modal-header .close, .modal-header .mailbox-attachment-close {
    display: none;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: auto;
    padding-bottom: 2px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 5px;
}

.opciones i {
    cursor: pointer;
}

.opciones .fa-file-pdf {
    color: red;
    margin-right: 5px;
}

.agregar-registro {
    width: max-content;
    padding: 3px 15px;
    color: white;
    background: #00a859;
    border-radius: 3px;
    cursor: pointer;
    position: absolute;
    right: 28px;
    top: 19px;
}

.acciones ul li{
    padding: 5px;
}

.acciones ul li:hover {
    background: #f4f6f9;
}

.divider {
    width: 100%;
    height: 1px;
    background: #0000004d;
    padding: 0px !important;
}

.acciones a {
    color: #17a2b8;
}