@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

input[readonly] {
    cursor: not-allowed; /* Cambia el cursor a un ícono de bloqueado o no permitido */
    background-color: #f0f0f0; /* (Opcional) Cambia el color de fondo para indicar que está bloqueado */
    color: #999; /* (Opcional) Cambia el color del texto para que se vea deshabilitado */
}

/* Opcional: Si deseas agregar algún otro estilo visual */
input[readonly]:hover {
    border-color: #ccc; /* Cambia el borde cuando se pasa el mouse */
}

.hidden{
    display: none !important;
}

.bg-exito {
    background-color: #2EAF00 !important
}

.bg-alerta {
    background-color: #EC9B07 !important
}

.bg-peligro {
    background-color: #D80727 !important
}

.bg-primary {
    background-color: #0373E6 !important
}

.bg-secondary {
    background-color: rgba(20, 40, 74, 0.15) !important
}

.bg-rojo {
    background-color: #E70441 !important
}

.bg-rosado {
    background-color: #fd68a1 !important
}

.bg-verde {
    background-color: #4cb911 !important
}

.bg-azul {
    background-color: #2437b1 !important
}

.bg-amarillo {
    background-color: #eca307 !important
}

.bg-violeta {
    background-color: #e20578 !important
}

.bg-cian {
    background-color: #5cd8d6 !important
}

.bg-celeste {
    background-color: #29aaf3 !important
}

.bg-lima {
    background-color: #afbf15 !important
}

.bg-naranja {
    background-color: #ea5c0d !important
}

.bg-morado {
    background-color: #7e2fbd !important
}

.bg-morado2 {
    background-color: #771D72 !important
}

.bg-mostaza {
    background-color: #af9701 !important
}

.bg-burdeo {
    background-color: #9a0631 !important
}

.bg-cafe {
    background-color: #865134 !important
}

.bg-turquesa {
    background-color: #058a96 !important
}

.bg-grafito {
    background-color: #505052 !important
}

.bg-gris {
    background-color: #CBCED5 !important
}

.bg-lite {
    background-color: #F6F7FB !important
}

.bg-plata {
    background-color: #F6F7FB !important
}

.bg-plata2 {
    background-color: rgba(57, 75, 145, 0.1) !important
}

.bg-plata2-full {
    background-color: #ECEEF5 !important
}

.bg-header {
    background-color: #F6F7FB !important
}

.bg-backoffice {
    background-color: #e70441 !important
}

.bg-mejoremos {
    background-color: #af2490 !important
}

.bg-mederis {
    background-color: #00adb1 !important
}

.bg-blanco {
    background-color: white !important
}

.bg-negro {
    background-color: black !important
}

.bg-body {
    background-color: #e5e8ef !important
}

.bg-transparente {
    background-color: transparent !important
}

.tx-default {
    color: #36373c !important
}

.tx-exito {
    color: #2EAF00 !important
}

.tx-alerta {
    color: #d38b06 !important
}

.tx-peligro {
    color: #D80727 !important
}

.tx-blanco {
    color: #fff !important
}

.tx-negro {
    color: #000 !important
}

.tx-primary {
    color: #0373E6 !important
}

.tx-secondary {
    color: rgba(20, 40, 74, 0.15) !important
}

.tx-rojo {
    color: #E70441 !important
}

.tx-rosado {
    color: #fd68a1 !important
}

.tx-verde {
    color: #4cb911 !important
}

.tx-azul {
    color: #2437b1 !important
}

.tx-amarillo {
    color: #eca307 !important
}

.tx-violeta {
    color: #e20578 !important
}

.tx-cian {
    color: #5cd8d6 !important
}

.tx-celeste {
    color: #29aaf3 !important
}

.tx-lima {
    color: #afbf15 !important
}

.tx-naranja {
    color: #ea5c0d !important
}

.tx-morado {
    color: #7e2fbd !important
}

.tx-morado2 {
    color: #771D72 !important
}

.tx-mostaza {
    color: #af9701 !important
}

.tx-burdeo {
    color: #9a0631 !important
}

.tx-cafe {
    color: #865134 !important
}

.tx-turquesa {
    color: #058a96 !important
}

.tx-grafito {
    color: #505052 !important
}

.tx-gris {
    color: #CBCED5 !important
}

.tx-mejoremos {
    color: #af2490 !important
}

.tx-mederis {
    color: #00adb1 !important
}

.tx-75 {
    color: rgba(54, 55, 60, 0.75) !important
}

.tx-50 {
    color: rgba(54, 55, 60, 0.5) !important
}

.tx-25 {
    color: rgba(54, 55, 60, 0.25) !important
}

.tx-10 {
    color: rgba(54, 55, 60, 0.1) !important
}

.tx-0 {
    color: rgba(54, 55, 60, 0) !important
}

.txw-75 {
    color: rgba(255, 255, 255, 0.75) !important
}

.txw-50 {
    color: rgba(255, 255, 255, 0.5) !important
}

.txw-25 {
    color: rgba(255, 255, 255, 0.25) !important
}

.txw-10 {
    color: rgba(255, 255, 255, 0.1) !important
}

.tx-lite {
    color: #F6F7FB !important
}

.tx-backoffice {
    color: #e70441 !important
}

.bor-exito {
    border-color: #2EAF00 !important
}

.bor-alerta {
    border-color: #EC9B07 !important
}

.bor-peligro {
    border-color: #D80727 !important
}

.bor-primary {
    border-color: #0373E6 !important
}

.bor-secondary {
    border-color: rgba(20, 40, 74, 0.15) !important
}

.bor-plata {
    border-color: #F6F7FB !important
}

.bor-rojo {
    border-color: #E70441 !important
}

.bor-rosado {
    border-color: #fd68a1 !important
}

.bor-verde {
    border-color: #4cb911 !important
}

.bor-azul {
    border-color: #2437b1 !important
}

.bor-amarillo {
    border-color: #eca307 !important
}

.bor-violeta {
    border-color: #e20578 !important
}

.bor-cian {
    border-color: #5cd8d6 !important
}

.bor-celeste {
    border-color: #29aaf3 !important
}

.bor-lima {
    border-color: #afbf15 !important
}

.bor-naranja {
    border-color: #ea5c0d !important
}

.bor-morado {
    border-color: #7e2fbd !important
}

.bor-morado2 {
    border-color: #771D72 !important
}

.bor-mostaza {
    border-color: #af9701 !important
}

.bor-burdeo {
    border-color: #9a0631 !important
}

.bor-cafe {
    border-color: #865134 !important
}

.bor-turquesa {
    border-color: #058a96 !important
}

.bor-grafito {
    border-color: #505052 !important
}

.bor-gris {
    border-color: #CBCED5 !important
}

.bor-lite {
    border-color: #F6F7FB !important
}

.bor-body {
    border-color: #e5e8ef !important
}

.bor-header {
    border-color: #F6F7FB
}

.bor-backoffice {
    border-color: #e70441
}

.bor-mejoremos {
    border-color: #af2490 !important
}

.bor-mederis {
    border-color: #00adb1 !important
}

.bor-blanco {
    border-color: white !important
}

.bor-negro {
    border-color: black !important
}

.bor-transparente {
    border-color: transparent !important
}

.bor-dashed {
    border-style: dashed !important
}

.gradiente-azul {
    background: linear-gradient(135deg, #0373E6 0%, #e20578 100%)
}

.gradiente-verde {
    background: linear-gradient(135deg, #2EAF00 0%, #afbf15 100%)
}

.gradiente-amarilla {
    background: linear-gradient(135deg, #eca307 0%, #ea5c0d 100%)
}

.gradiente-roja {
    background: linear-gradient(135deg, #E70441 0%, #e20578 100%)
}

.gradiente-mejoremos {
    background: linear-gradient(135deg, #af2490 0%, #e20578 100%)
}

.color-block {
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 20px
}

.icon-block {
    height: 66px;
    padding: 10px
}

.icon-block i {
    font-size: 32px;
    color: rgba(54, 55, 60, 0.5);
    float: left;
    width: 50px;
    margin-top: 8px;
    text-align: center;
    margin-right: 10px
}

.icon-block xmp {
    float: left;
    border: 0px solid;
    background-color: transparent;
    padding: 0px;
    padding-top: 5px;
    font-size: 11px;
    width: calc(100% - 60px);
    overflow-x: hidden
}

p, ol, ul {
    font-size: 13px;
    font-family: 'roboto', sans-serif;
    font-weight: 400;
    line-height: 19px
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800
}

.subtitulo-1 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(50, 55, 66, 0.1)
}

.subtitulo-2 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 4px;
    padding-left: 10px;
    border-left: 4px solid #0373E6;
    color: #0373E6
}

.subtitulo-3 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600
}

.lista {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.lista li {
    counter-increment: step-counter;
    line-height: 18px;
    margin-bottom: 6px;
    padding-left: 20px
}

.lista li::before {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(54, 55, 60, 0.2);
    margin-left: -18px;
    margin-top: 6px
}

.lista2 li::before {
    background-color: #0373E6
}

.lista li a:hover {
    text-decoration: underline
}

.lista.tx-rojo li::before {
    background-color: #E70441 !important
}

.lista-tabla li {
    margin-bottom: 0px
}

li.disabled a {
    color: #ccc !important;
    cursor: not-allowed
}

.lista-num {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.lista-num li {
    counter-increment: step-counter;
    line-height: 18px;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative
}

.lista-num li.correcta::before {
    background-color: #11b968;
    color: white
}

.lista-num.lista-num-alfa li {
    counter-increment: listStyle !important
}

.lista-num li::before {
    content: counter(step-counter);
    font-size: 11px !important;
    font-weight: bold;
    color: #36373c;
    line-height: 20px;
    text-align: center;
    display: block;
    position: absolute;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: -25px
}

.lista-num.lista-num-alfa li::before {
    content: counter(listStyle, lower-alpha) !important;
    text-transform: capitalize
}

.lista-num.lista-num-prueba li {
    margin-bottom: 0px
}

.lista-num.lista-num-prueba li::before {
    top: 5px;
    border-right: 2px solid #9397a1;
    background: white
}

.lista-alternativas li::before {
    margin-top: 11px
}

.lista-num.num2 li::before {
    color: #fff;
    background-color: #0373E6
}

.lista-num li a:hover, p a:hover {
    text-decoration: underline
}

.lista-evaluacion li {
    min-height: 32px;
    padding: 4px;
    padding-left: 42px;
    position: relative;
    border-radius: 6px;
    display: flex;
    align-items: center !important;
    font-size: 13px;
    line-height: 16px
}

.lista-evaluacion li::before {
    content: counter(listStyle, lower-alpha) !important;
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 14px !important;
    left: 4px;
    margin-left: 0px
}

@media (min-width: 768px) {
    .lista-2-cols {
        -moz-column-count: 2;
        column-count: 2
    }
}

.lista-vacia {
    list-style-type: none;
    padding: 0;
    margin: 0
}

xmp {
    background-color: #00000003;
    padding: 0px 20px 20px 20px;
    border: 1px solid #d5d7de;
    margin-bottom: 40px;
    overflow-x: auto
}

.blockquote-footer::before {
    display: none
}

.cifras-big {
    font-weight: 300;
    margin: 0px
}

.pantalla-error h1 {
    font-size: 35px;
    line-height: 35px;
    margin-bottom: 20px
}

.pantalla-error p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: rgba(54, 55, 60, 0.5)
}

.font-6 {
    font-size: 6px !important
}

.font-8 {
    font-size: 8px !important
}

.font-9 {
    font-size: 9px !important
}

.font-10 {
    font-size: 10px !important
}

.font-11 {
    font-size: 11px !important
}

.font-12 {
    font-size: 12px !important
}

.font-13 {
    font-size: 13px !important
}

.font-14 {
    font-size: 14px !important
}

.font-15 {
    font-size: 15px !important
}

.font-16 {
    font-size: 16px !important
}

.font-18 {
    font-size: 18px !important
}

.font-20 {
    font-size: 20px !important
}

.font-22 {
    font-size: 22px !important
}

.font-24 {
    font-size: 24px !important
}

.font-28 {
    font-size: 28px !important
}

.font-32 {
    font-size: 32px !important
}

.font-42 {
    font-size: 42px !important
}

.line-6 {
    line-height: 6px !important
}

.line-8 {
    line-height: 8px !important
}

.line-10 {
    line-height: 10px !important
}

.line-11 {
    line-height: 11px !important
}

.line-12 {
    line-height: 12px !important
}

.line-14 {
    line-height: 14px !important
}

.line-15 {
    line-height: 15px !important
}

.line-16 {
    line-height: 16px !important
}

.line-18 {
    line-height: 18px !important
}

.line-20 {
    line-height: 20px !important
}

.line-22 {
    line-height: 22px !important
}

.line-24 {
    line-height: 24px !important
}

.line-28 {
    line-height: 28px !important
}

.line-32 {
    line-height: 32px !important
}

.line-42 {
    line-height: 42px !important
}

h2.dato-grande {
    font-weight: 700
}

.tx-Poppins {
    font-family: 'Poppins', sans-serif !important
}

.tx-roboto {
    font-family: 'roboto', sans-serif !important
}

.tx-w300 {
    font-weight: 300 !important
}

.tx-w400 {
    font-weight: 400 !important
}

.tx-w500 {
    font-weight: 500 !important
}

.tx-w600 {
    font-weight: 600 !important
}

.tx-w700 {
    font-weight: 700 !important
}

.tx-w800 {
    font-weight: 800 !important
}

.tx-w900 {
    font-weight: 900 !important
}

.titulo-seccion {
    margin-bottom: 60px !important;
    font-weight: 800;
    position: relative
}

.titulo-seccion::after {
    content: '';
    display: block;
    position: absolute;
    width: 60px;
    height: 6px;
    border-radius: 6px;
    background-color: #0373E6;
    box-shadow: 0px 3px 6px -1px rgba(3, 115, 230, 0.4);
    bottom: -24px;
    left: 0px
}

.text-center.titulo-seccion::after {
    left: calc(50% - 30px)
}

.titulo-seccion-mejoremos::after {
    background-color: #af2490;
    box-shadow: 0px 3px 6px -1px rgba(175, 36, 144, 0.4)
}

.titulo-seccion-mederis::after {
    background-color: #00adb1;
    box-shadow: 0px 3px 6px -1px rgba(0, 173, 177, 0.4)
}

.titulo-seccion-appoderado::after {
    background-color: #0373E6;
    box-shadow: 0px 3px 6px -1px rgba(3, 115, 230, 0.4)
}

.titulo-seccion-violeta::after {
    background-color: #e20578;
    box-shadow: 0px 3px 6px -1px rgba(226, 5, 120, 0.4)
}

.titulo-seccion-amarillo::after {
    background-color: #eca307;
    box-shadow: 0px 3px 6px -1px rgba(236, 163, 7, 0.4)
}

.trunc-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.trunc-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.trunc-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

body {
    background-color: #e5e8ef;
    font-family: 'roboto', sans-serif;
    color: #36373c;
    font-size: 13px
}

a {
    transition: all 0.3s ease;
    cursor: pointer
}

a:hover {
    text-decoration: none
}

.navbar-appoderado {
    padding: 0px;
    z-index: 15
}

.toggle-appoderado {
    float: right;
    width: 72px;
    height: 72px;
    border: 0px;
    border-radius: 0px
}

.toggle-appoderado i {
    color: white;
    opacity: 1
}

@media (min-width: 768px) {
    .toggle-appoderado {
        display: none !important
    }
}

@media (min-width: 768px) {
    .logout-btn {
        display: none !important
    }
}

.toggle-appoderado:hover {
    background-color: rgba(0, 0, 0, 0.2)
}

.menu-lateral {
    display: block;
    width: 200px;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: #0373E6;
    z-index: 10
}

@media screen and (max-width: 768px) {
    .menu-lateral {
        width: 100%;
        height: 72px;
        overflow-y: unset !important;
        overflow-x: unset !important
    }
}

.menu-lateral-scroll {
    height: 100%;
    overflow-y: scroll
}

@media screen and (max-width: 768px) {
    .logo {
        display: none !important
    }
}

.logo-sm img {
    height: 60px
}

@media screen and (max-width: 768px) {
    .logo-sm {
        display: block !important;
        width: 40%;
        line-height: 72px;
        padding-left: 16px
    }
}

.menu-botones {
    padding: 0px 10px 10px 10px
}

@media screen and (max-width: 768px) {
    .menu-botones {
        padding: 0px 0px 10px 0px !important
    }
}

.menu-principal {
    transition: all 0.2s ease
}

@media (min-width: 768px) {
    .menu-principal {
        display: flex !important;
        flex-basis: auto !important
    }
}

@media screen and (max-width: 768px) {
    .menu-principal {
        background-color: #0373E6;
        padding: 10px 0px
    }
}

.menu-principal ul {
    padding-left: 10px;
    width: 200px
}

@media screen and (max-width: 768px) {
    .menu-principal ul {
        padding-right: 10px;
        margin-bottom: 0px;
        width: 100%
    }
}

.menu-principal ul li {
    list-style: none !important
}

.menu-principal ul li:hover {
    width: 190px;
    border-radius: 0px
}

@media screen and (max-width: 768px) {
    .menu-principal ul li:hover {
        width: 100%
    }
}

.menu-principal ul li > a {
    width: 190px;
    height: 50px;
    display: block;
    padding: 8px 0px;
    position: relative;
    border-radius: 28px 0px 0px 28px
}

@media screen and (max-width: 1366px) {
    .menu-principal ul li > a {
        height: 44px;
        padding: 6px 0px
    }
}

@media screen and (max-width: 768px) {
    .menu-principal ul li > a {
        width: 100%;
        border-radius: 28px
    }
}

.menu-principal ul li > a i.fa-angle-right {
    display: inline-block;
    float: right;
    position: absolute;
    right: 12px;
    top: 19px;
    color: #ffffff8f;
    transition: all 0.2s ease
}

@media screen and (max-width: 768px) {
    .menu-principal ul li > a i.fa-angle-right {
        right: 20px;
        top: 16px
    }
}

.menu-principal ul li > a:hover {
    background-color: rgba(255, 255, 255, 0.23);
    color: #fff
}

.menu-principal ul li > a:hover i.fa-angle-right {
    color: #fff
}

.menu-principal ul li > a.active {
    background-color: #e5e8ef !important
}

.menu-principal ul li > a.active::before {
    content: '';
    display: block;
    background-image: url("menu_round_up.png");
    background-repeat: no-repeat;
    background-size: 16px;
    position: absolute;
    width: 16px;
    height: 16px;
    right: 0px;
    top: -16px;
    box-shadow: none !important;
    background-color: transparent !important
}

@media screen and (max-width: 768px) {
    .menu-principal ul li > a.active::before {
        display: none
    }
}

.menu-principal ul li > a.active::after {
    content: '';
    display: block;
    background-image: url("menu_round_bottom.png");
    background-repeat: no-repeat;
    background-size: 16px;
    position: absolute;
    width: 16px;
    height: 16px;
    right: 0px;
    bottom: -16px;
    box-shadow: none !important;
    background-color: transparent !important;
    z-index: 1
}

@media screen and (max-width: 768px) {
    .menu-principal ul li > a.active::after {
        display: none
    }
}

.menu-principal ul li > a:hover .icono-menu {
    color: #fff
}

.menu-principal ul li > a:hover .sprite_text {
    color: #fff;
    padding-left: 13px
}

.menu-principal ul li > a.active:hover .sprite_text {
    color: #36373c !important
}

.icono-menu {
    background-color: rgba(0, 0, 0, 0.2);
    height: 34px;
    width: 34px;
    display: block;
    border-radius: 50%;
    float: left;
    margin-left: 8px;
    transition: all 0.2s ease;
    padding-top: 1px;
    line-height: 34px !important;
    text-align: center;
    color: #ffffffa6;
    font-size: 16px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2)
}

@media screen and (max-width: 1366px) {
    .icono-menu {
        height: 32px;
        width: 32px;
        font-size: 14px;
        line-height: 32px !important;
        margin-left: 6px
    }
}

.active .icono-menu {
    color: #fff !important;
    box-shadow: 0px 4px 14px -3px rgba(175, 8, 47, 0.5);
    line-height: inherit
}

.sprite_text {
    font-size: 13px;
    color: #ffffffbd;
    font-weight: 500;
    width: calc(100% - 52px);
    height: 34px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.2s ease;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    line-height: 14px;
    padding-left: 10px;
    padding-right: 10px
}

@media screen and (max-width: 1366px) {
    .sprite_text {
        font-size: 12px
    }
}

.active > .sprite_text {
    color: #36373c !important;
    font-weight: 700
}

.menu-principal ul li a.pal_rojo:hover .icono-menu, .menu-principal ul li a.pal_rojo.active .icono-menu, .menu-principal ul li a.pal_rojo.active::after {
    background-color: #E70441;
    box-shadow: 0px 0px 0px 3px #E70441
}

.menu-principal ul li a.pal_verde:hover .icono-menu, .menu-principal ul li a.pal_verde.active .icono-menu, .menu-principal ul li a.pal_verde.active::after {
    background-color: #4cb911;
    box-shadow: 0px 0px 0px 3px #4cb911
}

.menu-principal ul li a.pal_azul:hover .icono-menu, .menu-principal ul li a.pal_azul.active .icono-menu, .menu-principal ul li a.pal_azul.active::after {
    background-color: #2437b1;
    box-shadow: 0px 0px 0px 3px #2437b1
}

.menu-principal ul li a.pal_amarillo:hover .icono-menu, .menu-principal ul li a.pal_amarillo.active .icono-menu, .menu-principal ul li a.pal_amarillo.active::after {
    background-color: #eca307;
    box-shadow: 0px 0px 0px 3px #eca307
}

.menu-principal ul li a.pal_violeta:hover .icono-menu, .menu-principal ul li a.pal_violeta.active .icono-menu, .menu-principal ul li a.pal_violeta.active::after {
    background-color: #e20578;
    box-shadow: 0px 0px 0px 3px #e20578
}

.menu-principal ul li a.pal_cian:hover .icono-menu, .menu-principal ul li a.pal_cian.active .icono-menu, .menu-principal ul li a.pal_cian.active::after {
    background-color: #5cd8d6;
    box-shadow: 0px 0px 0px 3px #5cd8d6
}

.menu-principal ul li a.pal_celeste:hover .icono-menu, .menu-principal ul li a.active.pal_celeste .icono-menu, .menu-principal ul li a.pal_celeste.active::after {
    background-color: #29aaf3;
    box-shadow: 0px 0px 0px 3px #29aaf3
}

.menu-principal ul li a.pal_lima:hover .icono-menu, .menu-principal ul li a.active.pal_lima .icono-menu, .menu-principal ul li a.pal_lima.active::after {
    background-color: #afbf15;
    box-shadow: 0px 0px 0px 3px #afbf15
}

.menu-principal ul li a.pal_naranja:hover .icono-menu, .menu-principal ul li a.active.pal_naranja .icono-menu, .menu-principal ul li a.pal_naranja.active::after {
    background-color: #ea5c0d;
    box-shadow: 0px 0px 0px 3px #ea5c0d
}

.menu-principal ul li a.pal_morado:hover .icono-menu, .menu-principal ul li a.active.pal_morado .icono-menu, .menu-principal ul li a.pal_morado.active::after {
    background-color: #7e2fbd;
    box-shadow: 0px 0px 0px 3px #7e2fbd
}

.menu-principal ul li a.pal_mostaza:hover .icono-menu, .menu-principal ul li a.active.pal_mostaza .icono-menu, .menu-principal ul li a.pal_mostaza.active::after {
    background-color: #af9701;
    box-shadow: 0px 0px 0px 3px #af9701
}

.menu-principal ul li a.pal_burdeo:hover .icono-menu, .menu-principal ul li a.active.pal_burdeo .icono-menu, .menu-principal ul li a.pal_burdeo.active::after {
    background-color: #9a0631;
    box-shadow: 0px 0px 0px 3px #9a0631
}

.menu-principal ul li a.pal_cafe:hover .icono-menu, .menu-principal ul li a.active.pal_cafe .icono-menu, .menu-principal ul li a.pal_cafe.active::after {
    background-color: #865134;
    box-shadow: 0px 0px 0px 3px #865134
}

.menu-principal ul li a.pal_turquesa:hover .icono-menu, .menu-principal ul li a.active.pal_turquesa .icono-menu, .menu-principal ul li a.pal_turquesa.active::after {
    background-color: #058a96;
    box-shadow: 0px 0px 0px 3px #058a96
}

.menu-principal ul li a.pal_backoffice:hover .icono-menu, .menu-principal ul li a.active.pal_backoffice .icono-menu, .menu-principal ul li a.pal_backoffice.active::after {
    background-color: #e70441;
    box-shadow: 0px 0px 0px 3px #e70441
}

.menu-principal ul li a.pal_mejoremos:hover .icono-menu, .menu-principal ul li a.active.pal_mejoremos .icono-menu, .menu-principal ul li a.pal_mejoremos.active::after {
    background-color: #af2490;
    box-shadow: 0px 0px 0px 3px #af2490
}

.menu-principal ul li a.pal_mederis:hover .icono-menu, .menu-principal ul li a.active.pal_mederis .icono-menu, .menu-principal ul li a.pal_mederis.active::after {
    background-color: #00adb1;
    box-shadow: 0px 0px 0px 3px #00adb1
}

.menu-principal ul li a.pal_rosado:hover .icono-menu, .menu-principal ul li a.active.pal_rosado .icono-menu, .menu-principal ul li a.pal_rosado.active::after {
    background-color: #fd68a1;
    box-shadow: 0px 0px 0px 3px #fd68a1
}

.icon-menu-movil {
    height: 72px;
    width: 60px;
    padding: 14px 8px
}

.icon-menu-movil .icono-notificaciones {
    margin: 0px !important
}

.icon-menu-movil .dropdown-menu {
    top: 70px !important;
    width: 100% !important;
    position: fixed !important;
    left: 0px !important;
    transform: none !important
}

.dropdown-curso {
    max-height: 250px
}

.dropdown-curso a {
    line-height: 15px;
    white-space: break-spaces;
    padding-top: 10px !important;
    padding-bottom: 10px !important
}

.dropdown-espacio {
    max-height: 450px
}

.dropdown-espacio a {
    line-height: 15px;
    white-space: break-spaces
}

.indicador-colegio-ano {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 200px;
    border-top: 1px solid #00000026;
    box-shadow: 0px -5px 20px -20px black
}

@media screen and (max-width: 768px) {
    .indicador-colegio-ano {
        width: 100%
    }
}

a.menu-item-acordeon i.fa-angle-right {
    transform: rotate(90deg)
}

a.menu-item-acordeon.collapsed i.fa-angle-right {
    transform: rotate(0deg)
}

li.active a.menu-item-acordeon i.fa-angle-right {
    transform: rotate(90deg);
    color: #fff
}

li.active a.menu-item-acordeon .sprite_text {
    color: white
}

a.active.menu-item-acordeon i.fa-angle-right, a.active.menu-item-acordeon:hover i.fa-angle-right {
    color: #36373c
}

li.active a.active.menu-item-acordeon i.fa-angle-right {
    color: #36373c
}

.acordeon-menu {
    background-color: #00000017;
    border-radius: 10px;
    padding: 4px;
    position: relative
}

.acordeon-menu a {
    padding: 10px 5px 10px 10px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    transition: none
}

.acordeon-menu a i {
    color: #00000040;
    margin: 0px 12px 0px 6px
}

.acordeon-menu a span {
    line-height: 14px;
    color: white
}

.acordeon-menu a:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.23)
}

.acordeon-menu a:hover i {
    color: white
}

@media screen and (max-width: 768px) {
    .acordeon-menu a {
        padding: 12px 0px 12px 10px;
        border-radius: 12px
    }
}

.acordeon-menu a.active, .acordeon-menu a.active:hover {
    background-color: #e5e8ef !important
}

.acordeon-menu a.active i, .acordeon-menu a.active:hover i {
    color: #af2490
}

.acordeon-menu a.active span, .acordeon-menu a.active:hover span {
    line-height: 14px;
    color: #36373c;
    font-weight: 600
}

.navbar-toggler {
    border: 0 !important
}

.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important
}

.toggle-appoderado {
    padding-left: 20px
}

.toggler-icon {
    width: 30px;
    height: 3px;
    background-color: #fff;
    display: block;
    transition: all 0.2s
}

.middle-bar {
    margin: 5px 0
}

.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%
}

.navbar-toggler .middle-bar {
    opacity: 0;
    filter: alpha(opacity=0)
}

.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%
}

.navbar-toggler.collapsed .top-bar {
    transform: rotate(0)
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    filter: alpha(opacity=100)
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0)
}

.navbar-toggler.collapsed .toggler-icon {
    background-color: #fff
}

.submenu {
    margin-top: 10px
}

.submenu a {
    color: #b2b7c1;
    position: relative;
    font-weight: 500;
    font-size: 15px;
    margin-top: 0px;
    margin-bottom: 30px
}

.submenu .nav-tabs {
    border: 0px solid;
    margin-left: -15px
}

.submenu .nav-tabs .nav-link {
    border: 0px solid;
    box-shadow: none;
    font-family: 'Poppins', sans-serif
}

.submenu .nav-tabs .nav-link:hover {
    color: #767b86
}

.submenu .nav-tabs .nav-link:active {
    border: 0px solid;
    box-shadow: none
}

.submenu .nav-tabs .nav-item.show .nav-link, .submenu .nav-tabs .nav-link.active {
    background-color: transparent;
    border: 0px solid;
    color: #36373c !important;
    font-weight: 700
}

.submenu .nav-tabs .nav-item.show .nav-link, .submenu .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    display: block;
    width: 55px;
    height: 3px;
    background-color: #0373E6;
    margin-top: 12px;
    border-radius: 3px;
    box-shadow: 0px 2px 8px rgba(3, 115, 230, 0.2)
}

.submenu .nav-tabs .nav-link i {
    font-size: 16px;
    margin-right: 8px
}

.submenu .badge-light {
    font-size: 12px;
    font-weight: 500;
    margin-left: 5px;
    background-color: #dee1e6;
    color: #9a9ea5;
    min-width: 18px;
    padding: 3px;
    display: inline-block
}

.tarjeta.tab-content {
    margin-top: -10px;
    z-index: 2
}

.tab-menu .nav-item {
    margin-right: 2px;
    border-radius: 12px 12px 0px 0px
}

.tab-menu .nav-link.active {
    background-color: #fff !important;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    font-weight: 700
}

.tab-menu .nav-link.active:hover {
    background-color: #fff !important
}

.tab-menu .nav-link.active::before {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    left: -10px;
    bottom: 10px;
    background-image: url("tabflap2.png")
}

.tab-menu .nav-link.active::after {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    right: -10px;
    bottom: 10px;
    background-image: url("tabflap1.png")
}

.tab-menu .nav-item:first-child .nav-link.active::before {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    left: -10px;
    bottom: 10px;
    background-image: none
}

.tab-menu .nav-link {
    border-radius: 10px 10px 0px 0px;
    border: 0px solid;
    padding: 10px 16px 20px 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: all 0s ease
}

.tab-menu-light .nav-link {
    background-color: rgba(246, 247, 251, 0.8);
    color: rgba(54, 55, 60, 0.5);
    box-shadow: inset 0px -15px 4px -4px rgba(0, 0, 0, 0.06)
}

.tab-menu-light .nav-link:hover {
    background-color: #f6f7fb;
    color: #0373E6
}

.tab-menu-dark .nav-link {
    background-color: rgba(54, 55, 60, 0.1);
    color: rgba(54, 55, 60, 0.5);
    box-shadow: inset 0px -15px 4px -4px rgba(0, 0, 0, 0.06)
}

.tab-menu-dark .nav-link:hover {
    background-color: #f6f7fb;
    color: #0373E6
}

.tab-menu-colors .nav-link {
    color: rgba(255, 255, 255, 0.8)
}

.tab-menu-colors .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.4);
    background-blend-mode: overlay
}

.tab-menu-colors.tab-menu .nav-link.active:hover {
    color: #0373E6
}

.tab-menu .nav-link i {
    margin-right: 10px
}

.tab-menu-justify .nav-item:last-child {
    margin-right: 0px
}

.tab-menu-justify .nav-item:last-child .nav-link.active::after {
    background-image: none
}

.tab-menu-lines {
    border-bottom: 2px solid rgba(54, 55, 60, 0.1)
}

.tab-menu-lines .nav-item {
    margin-bottom: 0px
}

.tab-menu-lines .nav-link {
    border-radius: 0px;
    border: 0px solid;
    padding: 10px 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: all 0s ease;
    color: rgba(54, 55, 60, 0.5)
}

.tab-menu-lines .nav-link:hover {
    box-shadow: 0px 2px 0px rgba(54, 55, 60, 0.1);
    color: rgba(54, 55, 60, 0.75)
}

.tab-menu-lines .nav-link.active {
    background-color: transparent;
    position: relative;
    font-weight: 600;
    box-shadow: 0px 2px 0px #0373E6;
    color: #0373E6
}

.tab-menu-lines .nav-link i {
    margin-right: 10px
}

.modal-body.tab-content {
    margin-top: -10px;
    z-index: 2
}

.tab-menu-botones {
    border: 0px
}

.tab-menu-botones .nav-item {
    background-color: #55679317 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important
}

.tab-menu-botones .nav-item:first-child {
    border-radius: 12px 0px 0px 12px;
    padding-left: 5px !important
}

.tab-menu-botones .nav-item:last-child {
    border-radius: 0px 12px 12px 0px;
    padding-right: 5px !important
}

.tab-menu-botones .nav-item:last-child .nav-link span::after {
    display: none !important
}

.tab-menu-botones .nav-link {
    border-radius: 8px !important;
    border: 0px !important
}

.tab-menu-botones .nav-link img {
    opacity: 0.7;
    transition: all 0.2s ease
}

.tab-menu-botones .nav-link span {
    color: #303d5aa8;
    transition: all 0.2s ease;
    position: relative
}

.tab-menu-botones .nav-link span::after {
    content: '';
    display: block;
    width: 1px;
    height: 18px;
    top: 5px;
    right: -16px;
    background: #69738e5e;
    position: absolute;
    transition: all 0.2s ease;
    opacity: 1
}

.tab-menu-botones .nav-link:hover {
    background-color: #ffffffa1
}

.tab-menu-botones .nav-link:hover img {
    opacity: 1
}

.tab-menu-botones .nav-link:hover span {
    color: #007bff
}

.tab-menu-botones .nav-link:hover span::after {
    opacity: 0
}

.tab-menu-botones .nav-link.active {
    box-shadow: 0px 2px 3px -2px #2f437273
}

.tab-menu-botones .nav-link.active img {
    opacity: 1
}

.tab-menu-botones .nav-link.active span {
    color: #495057
}

.tab-menu-botones .nav-link.active span::after {
    opacity: 0
}

.tab-menu-botones .nav-link.active:hover {
    background-color: white
}

.tab-menu-vertical {
    background-color: #F6F7FB
}

.tab-menu-vertical a.list-group-item {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    line-height: 14px;
    border-left: 0px;
    border-top: 0px;
    border-bottom: 1px solid !important;
    border-color: #e5e8ef !important;
    border-radius: 0px;
    margin-bottom: 0px;
    padding: 12px 10px 12px 10px;
    position: relative;
    transition: all 0s ease !important
}

.tab-menu-vertical a.list-group-item:hover {
    color: #0373E6;
    background-color: #F6F7FB
}

.tab-menu-vertical a.list-group-item:hover i {
    opacity: 1 !important
}

.tab-menu-vertical a.list-group-item.active {
    color: #fff;
    background-color: #0373E6
}

.tab-menu-vertical a.list-group-item.active i {
    opacity: 1 !important
}

.tab-menu-vertical a.list-group-item.active:hover {
    color: #fff;
    background-color: #0373E6
}

.tab-menu-vertical.tab-icono a.list-group-item {
    padding: 12px 10px 12px 42px
}

.tab-menu-vertical.tab-icono a.list-group-item i {
    position: absolute;
    left: 4px;
    top: calc(50% - 8px);
    opacity: 0.3;
    display: block;
    float: left;
    width: 36px;
    text-align: center;
    font-size: 16px
}

.tab-menu-regular {
    background-color: transparent
}

.tab-menu-regular a.list-group-item {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 0px;
    padding: 15px 10px 15px 48px !important;
    position: relative;
    transition: all 0s ease !important;
    background-color: transparent;
    box-shadow: inset -1px 0px 0px #e5e8ef
}

.tab-menu-regular a.list-group-item span.tab-numero {
    display: block;
    position: absolute;
    top: calc(50% - 13px);
    left: 10px;
    width: 26px;
    height: 26px;
    line-height: 24px;
    border-radius: 20px;
    border: 1px solid #0373E6;
    background-color: transparent;
    text-align: center
}

.tab-menu-regular a.list-group-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.tab-menu-regular a.list-group-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.tab-menu-regular a.list-group-item:hover {
    color: #0373E6;
    background-color: rgba(255, 255, 255, 0.75)
}

.tab-menu-regular a.list-group-item:hover span.tab-numero {
    background-color: #0373E6;
    border: 1px solid #0373E6;
    color: #fff;
    font-weight: 700
}

.tab-menu-regular a.list-group-item:hover i.icono-flecha {
    color: #0373E6
}

.tab-menu-regular a.list-group-item.active {
    color: #fff;
    background-color: #0373E6;
    box-shadow: none;
    font-weight: 700
}

.tab-menu-regular a.list-group-item.active span.tab-numero {
    background-color: #fff;
    border: 1px solid #fff;
    color: #0373E6;
    font-weight: 700
}

.tab-menu-regular a.list-group-item.active i.icono-flecha {
    color: #fff
}

.tab-menu-regular a.list-group-item.active:hover {
    color: #0373E6;
    background-color: #fff
}

.tab-menu-regular a.list-group-item.active:hover span.tab-numero {
    background-color: #0373E6;
    border: 1px solid #0373E6;
    color: #fff;
    font-weight: 700
}

.tab-menu-regular a.list-group-item.active:hover i.icono-flecha {
    color: #0373E6
}

.tab-menu-regular {
    position: relative
}

.tab-menu-regular i.icono-flecha {
    position: absolute;
    top: calc(50% - 8px);
    display: block;
    padding: 0 5px 0;
    right: 8px;
    float: left;
    font-size: 14px;
    color: #bbbec4
}

.tab-menu-ficha {
    background-color: transparent
}

.tab-menu-ficha a.list-group-item {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid !important;
    border-color: #e5e8ef !important;
    border-radius: 0px;
    margin-bottom: 0px;
    padding: 15px 10px 15px 42px;
    position: relative;
    transition: all 0s ease !important;
    background-color: transparent;
    box-shadow: inset -1px 0px 0px #e5e8ef
}

.tab-menu-ficha a.list-group-item:hover {
    color: #0373E6;
    background-color: rgba(255, 255, 255, 0.75)
}

.tab-menu-ficha a.list-group-item:hover i {
    opacity: 1 !important
}

.tab-menu-ficha a.list-group-item.active {
    color: #0373E6;
    background-color: #fff;
    box-shadow: none;
    font-weight: 700
}

.tab-menu-ficha a.list-group-item.active i {
    opacity: 1 !important
}

.tab-menu-ficha a.list-group-item.active:hover {
    color: #0373E6;
    background-color: #fff
}

.tab-menu-ficha.tab-icono a.list-group-item i {
    position: absolute;
    left: 4px;
    top: calc(50% - 8px);
    opacity: 0.3;
    display: block;
    float: left;
    width: 36px;
    text-align: center;
    font-size: 16px
}

.tab-menu-ficha.tab-icono a.list-group-item img {
    position: absolute;
    left: 10px;
    top: calc(50% - 12px);
    display: block;
    float: left;
    width: 25px
}

.tab-menu-pasos {
    background-color: transparent
}

.tab-menu-pasos a.list-group-item {
    font-family: 'Poppins', sans-serif;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    line-height: 14px;
    border: 0px;
    border-radius: 8px;
    margin-bottom: 0px;
    padding: 14px 10px 14px 48px;
    position: relative;
    transition: all 0s ease !important;
    margin: 0px !important
}

.tab-menu-pasos a.list-group-item span.tab-numero {
    display: block;
    position: absolute;
    top: calc(50% - 13px);
    left: 10px;
    width: 26px;
    height: 26px;
    line-height: 24px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background-color: #af2490;
    text-align: center
}

.tab-menu-pasos a.list-group-item:hover {
    color: white
}

.tab-menu-pasos a.list-group-item:hover span.tab-numero {
    border: 2px solid white;
    color: white
}

.tab-menu-pasos a.list-group-item.active {
    color: #fff;
    background-color: rgba(54, 55, 60, 0.25);
    opacity: 1
}

.tab-menu-pasos a.list-group-item.active span.tab-numero {
    background-color: white;
    border: 2px solid white;
    color: #af2490;
    font-weight: 700
}

.tab-menu-pasos a.list-group-item.active i {
    opacity: 1 !important
}

.tab-menu-pasos.pasos-linea a.list-group-item {
    background-image: url("pasos-linea.png");
    background-repeat: repeat-y;
    background-position: 22px center
}

.tab-menu-pasos.pasos-linea a.list-group-item:first-child {
    background-size: 2px 50%;
    background-repeat: no-repeat;
    background-position: 22px bottom
}

.tab-menu-pasos.pasos-linea a.list-group-item:last-child {
    background-size: 2px 50%;
    background-repeat: no-repeat;
    background-position: 22px top
}

.tab-menu-pasos.tab-icono a.list-group-item {
    padding: 12px 10px 12px 42px
}

.tab-menu-pasos.tab-icono a.list-group-item i {
    position: absolute;
    left: 4px;
    top: calc(50% - 8px);
    opacity: 0.3;
    display: block;
    float: left;
    width: 36px;
    text-align: center;
    font-size: 16px
}

.tabs-panel-lateral {
    box-shadow: inset -1px 0px 0px 0px #d4d8e1;
    border-radius: 0px
}

.tabs-panel-lateral .list-group-item {
    margin: 0px;
    border: 0px;
    background-color: transparent;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    cursor: pointer;
    border-radius: 0px;
    border-bottom: 1px solid #d4d8e1
}

.tabs-panel-lateral .list-group-item:hover {
    background-color: #ffffff87;
    color: #af2490
}

.tabs-panel-lateral .list-group-item.active {
    background-color: white;
    color: #af2490;
    box-shadow: inset 4px 0px 0px 0px;
    margin-top: 0px !important
}

.tabs-panel-lateral.appo .list-group-item:hover {
    color: #0373E6
}

.tabs-panel-lateral.appo .list-group-item.active {
    color: #0373E6
}

.tabs-rounded {
    padding-left: 16px
}

.tabs-rounded .list-group-item {
    border-radius: 12px 0px 0px 12px !important;
    background-color: rgba(246, 247, 251, 0.8);
    margin-bottom: 3px
}

.tabs-rounded .list-group-item.active {
    box-shadow: 0px 2px 4px -1px #00000033
}

.icono-modulo {
    margin-right: 12px;
    width: 54px;
    height: 54px;
    box-shadow: 0px 4px 14px -3px rgba(175, 8, 47, 0.5);
    transition: all 0.2s ease !important
}

.icono-modulo-sombra {
    filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.25))
}

.bg-encabezado::before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 94px;
    background-color: #e5e8ef;
    transition: height 0.2s ease
}

.contenido.sticky.bg-encabezado::before {
    height: 64px;
    background-color: transparent
}

.encabezado {
    height: 112px;
    padding-top: 22px;
    padding-bottom: 18px;
    background-image: url("encabezado_sombra.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 18px
}

.encabezado h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    line-height: 28px;
    font-weight: 800;
    position: relative;
    display: inline-block;
    transition: all 0.2s ease !important;
    margin-bottom: 0px
}

@media (max-width: 1280px) {
    .encabezado h1 {
        font-size: 22px;
        line-height: 23px
    }
}

.encabezado span.subtitulo {
    font-weight: 500;
    font-size: 15px;
    color: rgba(54, 55, 60, 0.5);
    margin-top: 0px;
    display: block;
    transition: all 0.2s ease
}

div#encabezado-sticky {
    transition: padding 0.2s ease !important
}

@media screen and (max-width: 768px) {
    div#encabezado-sticky {
        margin-top: 72px;
        width: 100%
    }
}

.encabezado-titulos {
    height: 54px;
    display: flex
}

.user-menu .dropdown-toggle:hover .user-avatar {
    box-shadow: none
}

.user-menu .dropdown-toggle:hover .user-nombre {
    color: #0373E6 !important
}

.user-menu .nav-link {
    height: 44px;
    padding-right: 36px !important;
    margin-right: 0px !important;
    border-radius: 22px;
    position: relative;
    display: flex
}

.user-menu .nav-link:hover, .user-menu .nav-link:focus {
    background-color: #fff !important;
    box-shadow: 0px 6px 15px -3px rgba(33, 35, 37, 0.12) !important;
    outline: none !important
}

.user-menu .nav-link:hover .user-avatar, .user-menu .nav-link:focus .user-avatar {
    box-shadow: none
}

.user-avatar {
    width: 44px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0px 6px 15px -3px rgba(33, 35, 37, 0.3);
    transition: all 0.2s ease
}

.user-nombre {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #36373c;
    margin-bottom: -8px;
    padding-top: 12px;
    transition: all 0.2s ease
}

.user-tiempo {
    font-family: 'roboto', sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: rgba(54, 55, 60, 0.5)
}

.user-menu .nav-link .fa-sort-down {
    color: #36373c;
    font-size: 19px;
    transition: all 0.2s ease;
    top: 14px !important;
    right: 16px !important
}

.user-menu .dropdown-toggle:hover .fa-sort-down {
    color: #0373E6
}

.header-fixed .user-menu .dropdown-menu {
    position: absolute;
    transform: none !important;
    left: inherit !important;
    top: 52px;
    right: 0px !important;
    overflow-y: visible !important;
    padding: 0px
}

.header-fixed .user-menu .dropdown-menu i {
    float: left
}

.user-menu .dropdown-menu {
    position: absolute;
    padding: 0px
}

.user-menu .dropdown-menu i {
    float: left
}

.dropdown-menu.usuario-drop::before {
    content: '';
    display: block;
    background-color: #f8f9fc;
    border-radius: 4px 0px 16px 0px;
    transform: rotate(45deg);
    width: 16px;
    height: 16px;
    position: absolute;
    top: -4px;
    right: 12px
}

.dropdown-menu.dropdown-dark.usuario-drop::before {
    background-color: #2e3944 !important
}

.usuario-drop-items {
    padding: 5px
}

.usuario-drop-items .dropdown-item {
    border-radius: 8px;
    padding: 8px
}

.usuario-drop-items .dropdown-item:hover {
    color: #0373E6 !important;
    text-decoration: none;
    background-color: rgba(131, 144, 185, 0.15)
}

.usuario-drop-items .dropdown-item:hover .icon-round {
    color: #fff !important;
    background-color: #0373E6
}

.usuario-drop a {
    padding: 6px 17px
}

.icon-round {
    color: #36373c9e !important;
    background-color: #e2e5ec;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important
}

.usuario-texto-big {
    line-height: 34px
}

.dropdown-item.rol-activo i.fa-check {
    color: #2EAF00;
    font-size: 12px;
    margin-right: 0px
}

.dropdown-item.rol-activo:hover i.fa-check {
    color: #fff
}

.drop-titulo {
    padding: 10px 12px;
    background-color: #f8f9fc;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #36373c;
    border-radius: 8px 8px 0px 0px
}

.dropdown-menu.usuario-drop {
    width: 240px
}

.icono-notificaciones {
    min-width: 44px;
    height: 44px;
    position: relative;
    border-radius: 22px;
    margin: 0px 5px !important;
    text-align: center;
    transition: all 0.2s ease;
    font-size: 20px;
    line-height: 44px;
    color: #787c90;
    background-color: white;
    box-shadow: 0px 5px 5px -3px rgba(33, 35, 37, 0.15)
}

.icono-notificaciones .icono-texto {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    margin-left: 8px;
    display: inline-block;
    float: right
}

.icono-notificaciones:hover, .icono-notificaciones:focus {
    background-color: #0373E6;
    color: #fff
}

.nueva-notificacion::before {
    content: '';
    display: block;
    position: absolute;
    background-color: #e70441;
    border-radius: 50%;
    border: 2px solid #edf0f6;
    width: 10px;
    height: 10px;
    right: 3px;
    top: 5px
}

.notificaciones-numero {
    display: inline-block;
    color: #fff;
    background-color: #E70441;
    box-shadow: 0px 4px 10px -3px rgba(175, 8, 47, 0.5);
    font-weight: 500;
    font-size: 10px;
    line-height: 10px;
    padding: 4px 6px !important;
    text-align: center;
    border-radius: 9px;
    min-height: 18px;
    min-width: 18px;
    position: absolute;
    bottom: -5px;
    right: -5px
}

.dropdown-menu.notificaciones-drop {
    width: 320px;
    right: -40px !important
}

.dropdown-menu.notificaciones-drop .ver-todas a {
    display: block;
    min-height: 40px;
    border-radius: 0px 0px 8px 8px;
    background-color: #f8f9fc;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #0373E6
}

.dropdown-menu.notificaciones-drop .ver-todas a:hover {
    background-color: #0373E6;
    color: #fff !important;
    border-top: 1px solid #0373E6
}

.dropdown-menu.notificaciones-drop .ver-todas a:hover i {
    color: #fff !important;
    transition: all 0.2s ease
}

.dropdown-menu.notificaciones-drop .ver-todas a i {
    color: #0373E6;
    display: unset !important;
    float: inherit !important
}

.dropdown-menu.notificaciones-drop::before {
    content: '';
    display: block;
    border: 8px solid transparent;
    border-bottom: 8px solid #f8f9fc;
    width: 0px;
    position: absolute;
    top: -16px;
    right: 14px
}

.notif-nueva {
    background-color: #0373e61c
}

.notif-nueva span {
    color: #e70441 !important
}

.notif-nueva::before {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background-color: #D80727;
    border-radius: 50%
}

.notificaciones-drop a {
    padding: 8px 8px;
    min-height: 52px;
    border-radius: 8px;
    white-space: normal;
    position: relative
}

.notificaciones-drop a:hover {
    color: #0373E6 !important;
    text-decoration: none;
    background-color: rgba(131, 144, 185, 0.15)
}

.notificaciones-drop .notificaciones-scroll {
    padding: 6px
}

.notificaciones-drop .notificaciones-scroll a i {
    display: block;
    color: #fff;
    background-color: #a2aebb;
    width: 34px;
    height: 34px;
    line-height: 34px;
    float: left;
    margin-right: 0px
}

.dropdown-menu.btn-espacios-drop {
    width: 320px;
    left: 190px !important;
    top: 0px !important;
    margin: 0px;
    overflow: inherit
}

.dropdown-menu.btn-espacios-drop::before {
    top: 17px;
    left: -16px;
    transform: rotate(270deg)
}

.notificacion-texto {
    width: calc(100% - 40px);
    float: left;
    padding-left: 10px;
    padding-top: 2px
}

.notificacion-texto p {
    font-size: 12px;
    line-height: 14px;
    margin-bottom: -2px;
    display: block;
    width: 100%
}

.notificacion-texto p b {
    font-family: 'Poppins', sans-serif
}

.notificacion-texto span {
    color: rgba(54, 55, 60, 0.5);
    font-size: 11px;
    line-height: 11px;
    display: block;
    padding-top: 6px
}

.drop-modulo-item {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 8px !important;
    transition: all 0s
}

.drop-modulo-item img {
    margin-bottom: 8px;
    width: 50px;
    height: 50px
}

.drop-modulo-item i {
    background-color: #0373e6 !important;
    position: absolute !important;
    left: 10px;
    top: 10px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
    line-height: 22px !important
}

.drop-modulo-item .modulo-texto p {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: #36373c;
    margin-bottom: 0px
}

.drop-modulo-item:hover {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 8px !important
}

.drop-modulo-item:hover .modulo-texto p {
    color: #0373E6
}

.drop-modulo-item.active {
    box-shadow: inset 0px 0px 0px 2px #0373e6
}

.contenido.sticky {
    position: fixed;
    background-color: #f0f2f7;
    z-index: 9;
    top: 0px;
    box-shadow: 0px 2px 5px rgba(24, 37, 49, 0.13);
    transition: all 0.2s ease !important;
    padding-left: 20px
}

.contenido.sticky .encabezado {
    background-image: none;
    height: 64px;
    padding-bottom: 10px;
    padding-top: 10px;
    transition: all 0.2s ease !important
}

.contenido.sticky .icono-modulo, .contenido.sticky .icono-modulo-sombra i {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 18px
}

.contenido.sticky .encabezado h1 {
    font-size: 20px;
    line-height: 22px;
    transition: all 0.2s ease !important
}

.contenido.sticky .encabezado span.subtitulo {
    font-size: 12px;
    transition: all 0.2s ease !important
}

.contenido.sticky .encabezado-titulos {
    height: 44px;
    transition: all 0.2s ease !important
}

.contenido.sticky + .contenido {
    padding-top: 112px;
    transition: all 0s ease !important
}

.contenido {
    transition: all 0s ease !important
}

.icono-modulo-sombra.pal_primary {
    filter: drop-shadow(0px 4px 3px rgba(3, 115, 230, 0.3))
}

.icono-modulo-sombra.pal_primary img, .icono-modulo-sombra.pal_primary i {
    background-color: #0373E6
}

.icono-modulo-sombra.pal_rojo {
    filter: drop-shadow(0px 4px 3px rgba(231, 4, 65, 0.3))
}

.icono-modulo-sombra.pal_rojo img, .icono-modulo-sombra.pal_rojo i {
    background-color: #E70441
}

.icono-modulo-sombra.pal_verde {
    filter: drop-shadow(0px 4px 3px rgba(76, 185, 17, 0.3))
}

.icono-modulo-sombra.pal_verde img, .icono-modulo-sombra.pal_verde i {
    background-color: #4cb911
}

.icono-modulo-sombra.pal_azul {
    filter: drop-shadow(0px 4px 3px rgba(36, 55, 177, 0.3))
}

.icono-modulo-sombra.pal_azul img, .icono-modulo-sombra.pal_azul i {
    background-color: #2437b1
}

.icono-modulo-sombra.pal_amarillo {
    filter: drop-shadow(0px 4px 3px rgba(236, 163, 7, 0.3))
}

.icono-modulo-sombra.pal_amarillo img, .icono-modulo-sombra.pal_amarillo i {
    background-color: #eca307
}

.icono-modulo-sombra.pal_violeta {
    filter: drop-shadow(0px 4px 3px rgba(226, 5, 120, 0.3))
}

.icono-modulo-sombra.pal_violeta img, .icono-modulo-sombra.pal_violeta i {
    background-color: #e20578
}

.icono-modulo-sombra.pal_cian {
    filter: drop-shadow(0px 4px 3px rgba(92, 216, 214, 0.3))
}

.icono-modulo-sombra.pal_cian img, .icono-modulo-sombra.pal_cian i {
    background-color: #5cd8d6
}

.icono-modulo-sombra.pal_celeste {
    filter: drop-shadow(0px 4px 3px rgba(41, 170, 243, 0.3))
}

.icono-modulo-sombra.pal_celeste img, .icono-modulo-sombra.pal_celeste i {
    background-color: #29aaf3
}

.icono-modulo-sombra.pal_lima {
    filter: drop-shadow(0px 4px 3px rgba(175, 191, 21, 0.3))
}

.icono-modulo-sombra.pal_lima img, .icono-modulo-sombra.pal_lima i {
    background-color: #afbf15
}

.icono-modulo-sombra.pal_naranja {
    filter: drop-shadow(0px 4px 3px rgba(234, 92, 13, 0.3))
}

.icono-modulo-sombra.pal_naranja img, .icono-modulo-sombra.pal_naranja i {
    background-color: #ea5c0d
}

.icono-modulo-sombra.pal_morado {
    filter: drop-shadow(0px 4px 3px rgba(126, 47, 189, 0.3))
}

.icono-modulo-sombra.pal_morado img, .icono-modulo-sombra.pal_morado i {
    background-color: #7e2fbd
}

.icono-modulo-sombra.pal_mostaza {
    filter: drop-shadow(0px 4px 3px rgba(175, 151, 1, 0.3))
}

.icono-modulo-sombra.pal_mostaza img, .icono-modulo-sombra.pal_mostaza i {
    background-color: #af9701
}

.icono-modulo-sombra.pal_burdeo {
    filter: drop-shadow(0px 4px 3px rgba(154, 6, 49, 0.3))
}

.icono-modulo-sombra.pal_burdeo img, .icono-modulo-sombra.pal_burdeo i {
    background-color: #9a0631
}

.icono-modulo-sombra.pal_cafe {
    filter: drop-shadow(0px 4px 3px rgba(134, 81, 52, 0.3))
}

.icono-modulo-sombra.pal_cafe img, .icono-modulo-sombra.pal_cafe i {
    background-color: #865134
}

.icono-modulo-sombra.pal_turquesa {
    filter: drop-shadow(0px 4px 3px rgba(5, 138, 150, 0.3))
}

.icono-modulo-sombra.pal_turquesa img, .icono-modulo-sombra.pal_turquesa i {
    background-color: #058a96
}

.icono-modulo-sombra.pal_backoffice {
    filter: drop-shadow(0px 4px 3px rgba(231, 4, 65, 0.3))
}

.icono-modulo-sombra.pal_backoffice img, .icono-modulo-sombra.pal_backoffice i {
    background-color: #e70441
}

.icono-modulo-sombra.pal_mejoremos {
    filter: drop-shadow(0px 4px 3px rgba(175, 36, 144, 0.3))
}

.icono-modulo-sombra.pal_mejoremos img, .icono-modulo-sombra.pal_mejoremos i {
    background-color: #af2490
}

.icono-modulo-sombra.pal_mederis {
    filter: drop-shadow(0px 4px 3px rgba(0, 173, 177, 0.3))
}

.icono-modulo-sombra.pal_mederis img, .icono-modulo-sombra.pal_mederis i {
    background-color: #00adb1
}

.icono-modulo-sombra.pal_rosado {
    filter: drop-shadow(0px 4px 3px rgba(253, 104, 161, 0.3))
}

.icono-modulo-sombra.pal_rosado img, .icono-modulo-sombra.pal_rosado i {
    background-color: #fd68a1
}

.icono-modulo-sombra.pal_blanco {
    filter: drop-shadow(0px 4px 3px rgba(20, 40, 74, 0.1))
}

.icono-modulo-sombra.pal_blanco img, .icono-modulo-sombra.pal_blanco i {
    background-color: #fff
}

.icono-modulo-sombra i {
    display: block;
    width: 54px;
    height: 54px;
    float: left;
    color: white;
    text-align: center;
    line-height: 54px;
    font-size: 24px;
    border-radius: 5px;
    margin-right: 12px
}

.tarjeta {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    margin-bottom: 20px;
    position: relative
}

.tarjeta::after {
    display: block;
    clear: both;
    content: ""
}

.tarjeta-header {
    display: block;
    background-color: #F6F7FB;
    border-radius: 10px 10px 0px 0px;
    padding: 15px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    position: relative
}

.tarjeta-header i {
    color: rgba(54, 55, 60, 0.25);
    margin-right: 12px;
    font-size: 16px;
    display: block;
    float: left;
    width: 20px
}

.tarjeta-body {
    padding: 24px;
    position: relative
}

@media (max-width: 1280px) {
    .tarjeta-body {
        padding: 12px
    }
}

.tarjeta-body-medium {
    padding: 12px 24px;
    position: relative
}

.tarjeta-body-small {
    padding: 12px;
    position: relative
}

.tarjeta-dark {
    background-color: rgba(33, 61, 113, 0.08);
    border-radius: 8px;
    position: relative;
    margin-bottom: 20px
}

.tarjeta-border {
    background-color: transparent;
    border: 2px solid rgba(54, 55, 60, 0.1);
    border-radius: 8px;
    position: relative;
    margin-bottom: 20px
}

.over-hidden {
    overflow: hidden
}

.tarjeta-hover {
    transition: all 0.2s ease
}

.tarjeta-hover:hover {
    box-shadow: 0px 0px 0px 2px #0373e6;
    cursor: pointer
}

.tarjeta-hover2 {
    transition: all 0.2s ease
}

.tarjeta-hover2:hover {
    transform: scale(1.1) translate(0px, -5px);
    cursor: pointer;
    box-shadow: 0px 20px 12px -10px rgba(0, 0, 0, 0.2)
}

.tarjeta-hover3 {
    transition: all 0.2s ease
}

.tarjeta-hover3:hover {
    transform: scale(0.95);
    cursor: pointer
}

.tarjeta-hover4 {
    transition: all 0.2s ease
}

.tarjeta-hover4:hover {
    transform: translate(0px, -10px);
    cursor: pointer;
    box-shadow: 0px 20px 12px -10px rgba(0, 0, 0, 0.2)
}

.acordeon {
    border-radius: 10px
}

.acordeon-btn {
    background-color: #fff;
    border: 0px solid;
    width: 100%;
    text-align: left;
    padding: 16px 16px;
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-top: 1px solid #e5e8ef;
    cursor: pointer
}

.acordeon-btn:hover {
    color: #0373E6;
    background-color: #F6F7FB
}

.acordeon-btn:focus {
    box-shadow: inset 0px 0px 0px 2px rgba(3, 115, 230, 0.5);
    outline: none
}

.acordeon-btn .fa-angle-down {
    float: right;
    margin-top: 4px
}

.acordeon-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    margin-right: 10px;
    color: rgba(54, 55, 60, 0.25)
}

.acordeon-contenido {
    padding: 20px 24px;
    background-color: #F6F7FB;
    box-shadow: inset 0px 10px 10px -15px rgba(40, 43, 53, 0.6)
}

.acordeon-tarjeta:first-child .acordeon-btn {
    border-radius: 10px 10px 0px 0px
}

.acordeon-border {
    border: 1px solid #e5e8ef;
    border-radius: 10px;
    overflow: hidden
}

.acordeon-border .acordeon-tarjeta:first-child .acordeon-btn {
    border-top: 0px solid
}

.prox-fecha {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 8px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    padding-top: 12px
}

.prox-fecha p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    margin: 0px
}

.prox-fecha span {
    font-size: 36px;
    line-height: 36px;
    font-weight: 700;
    width: 100%
}

.prox-info {
    float: left;
    width: calc(100% - 88px);
    height: 80px;
    padding: 8px 26px;
    position: relative
}

.prox-info span {
    display: inline-block;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700
}

.prox-info p {
    color: rgba(54, 55, 60, 0.75);
    margin-bottom: 3px
}

.prox-info::before {
    display: block;
    content: '';
    background-color: #e70441;
    width: 12px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 10px 0px 0px 10px
}

.proximo-evento:hover {
    color: #0373E6 !important;
    cursor: pointer
}

.proximo-evento:hover p {
    color: #0373E6 !important
}

.proximo-evento:hover .tarjeta {
    background-color: #F6F7FB;
    transition: all 0s ease
}

.cuadro-datos {
    padding: 30px 20px 15px 20px;
    border: 1px solid rgba(54, 55, 60, 0.1);
    border-radius: 8px;
    margin: 10px -6px;
    margin-bottom: 25px;
    position: relative
}

.cuadro-datos h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #36373c;
    background-color: #ffffff;
    display: inline-block;
    position: absolute;
    top: -8px;
    left: 10px;
    padding: 0px 8px
}

.cuadro-datos h1 i {
    margin-right: 8px;
    color: rgba(51, 70, 90, 0.25);
    font-size: 16px;
    vertical-align: middle;
    width: 22px;
    text-align: center
}

.ficha-resumen .ficha-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(54, 55, 60, 0.5);
    margin-bottom: 3px;
    line-height: 12px
}

.ficha-resumen .dato {
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    margin-bottom: 14px;
    line-height: 15px
}

.planificacion-asig .tarjeta-header span {
    display: block;
    float: left;
    background-color: #0373e6;
    border: 2px solid white;
    box-shadow: 0px 4px 6px rgba(15, 76, 138, 0.26);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    color: #fff;
    margin-top: -18px;
    margin-right: 10px;
    padding-top: 16px;
    position: relative
}

.tarjeta-color, .tarjeta-color label, .tarjeta-color h1, .tarjeta-color td {
    color: white
}

.tarjeta-color h1 {
    font-weight: 600;
    font-size: 2.2rem;
    font-family: 'roboto', sans-serif
}

@media (max-width: 1280px) {
    .tarjeta-color h1 {
        font-size: 24px !important
    }
}

.tarjeta-color label {
    margin-bottom: 0px;
    font-size: 13px;
    font-weight: 600
}

@media (max-width: 1280px) {
    .tarjeta-color label {
        font-size: 12px !important
    }
}

i.icono-estadisticas {
    display: block;
    color: white;
    font-size: 32px;
    background-color: #00000026;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    text-align: center;
    padding-top: 16px;
    margin-right: 16px !important
}

.tarjeta .datos-estadisticas {
    width: calc(100% - 80px)
}

.tarjeta-recursos {
    overflow: hidden;
    text-align: center;
    border-radius: 20px
}

.tarjeta-recursos .recursos-img {
    position: relative;
    overflow: hidden
}

.tarjeta-recursos .recursos-img:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -4px;
    height: 100%;
    width: 105%;
    background: url("recursos-shape.svg") no-repeat center bottom;
    background-size: contain;
    z-index: 1
}

.tarjeta-recursos .recursos-info {
    padding: 10px 20px 20px 20px
}

.tarjeta-recursos:hover {
    transform: scale(1.05)
}

.tarjetita-recurso {
    text-align: left;
    padding: 10px;
    border-radius: 20px;
    min-height: 340px;
    margin: 0px
}

.tarjetita-recurso:hover {
    transform: scale(1.05)
}

.recurso-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background-color: #771D72;
    z-index: 1
}

.recurso-img .recurso-img2 {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1
}

.recurso-tipo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 0.5px;
    display: block;
    color: #fff;
    background-color: #000;
    text-align: center;
    padding: 5px 8px
}

.recurso-nuevo {
    position: absolute;
    width: 66px;
    bottom: -12px;
    left: calc(50% - 33px);
    z-index: 2;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 1px;
    display: block;
    color: #fff;
    background-color: #2EAF00;
    text-align: center;
    padding: 5px 8px
}

.recurso-titulo {
    font-size: 18px;
    font-weight: 700
}

.recurso-descripcion {
    padding: 15px 15px 10px 15px
}

.recurso-descripcion .niveles {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 1px;
    padding: 3px 0px 10px
}

.recurso-descripcion .recursos-tema {
    font-weight: bold;
    font-size: 12px;
    line-height: 12px
}

div.rec-autor {
    padding: 0px;
    color: inherit
}

div.rec-autor img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 8px
}

div.rec-autor-nombre {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: capitalize
}

div.rec-autor-cargo {
    font-family: 'roboto', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 13px;
    opacity: 0.6;
    text-transform: none
}

.isotope:after {
    content: '';
    display: block;
    clear: both
}

.element-item {
    position: relative;
    float: left;
    width: 25%;
    height: auto;
    padding: 16px
}

@media (max-width: 1200px) {
    .element-item {
        position: relative;
        float: left;
        width: 50%;
        height: auto;
        padding: 16px
    }
}

@media (max-width: 768px) {
    .element-item {
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        padding: 16px
    }
}

i.icon-label {
    display: block;
    background-color: #0373e6;
    width: 42px;
    text-align: center;
    color: white;
    height: 50px;
    position: absolute;
    top: -8px;
    padding-top: 20px;
    font-size: 20px;
    border-radius: 0px 5px 5px 5px;
    box-shadow: -1px 1px 3px #2d394647
}

i.icon-label::after {
    content: '';
    display: block;
    width: 10px;
    height: 8px;
    background-color: #00468e;
    border-radius: 10px 0px 0px 0px;
    top: 0px;
    left: -10px;
    position: absolute
}

i.icon-label.bg-violeta::after {
    background-color: #bd0b68 !important
}

i.icon-label.bg-rojo::after {
    background-color: #E70441 !important
}

i.icon-label.bg-verde::after {
    background-color: #409412 !important
}

i.icon-label.bg-amarillo::after {
    background-color: #d89300 !important
}

i.icon-label.bg-lima::after {
    background-color: #95a20f !important
}

i.icon-label.bg-morado::after {
    background-color: #641e9c !important
}

i.icon-label.bg-azul::after {
    background-color: #142488 !important
}

i.icon-label.bg-naranja::after {
    background-color: #d25008 !important
}

.plan-items-texto {
    width: calc(100% - 70px);
    float: left;
    padding-left: 16px
}

.plan-items-tools {
    width: 60px;
    float: right;
    padding-right: 16px
}

.btn {
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    height: 42px;
    padding: 10px 20px;
    border-radius: 22px;
    border: 0px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0px 7px 10px -3px rgba(0, 0, 0, 0.24)
}

.btn-primary {
    background-color: #0373E6 !important;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3)
}

.btn-primary:hover {
    background-color: #0c82fc !important;
    color: white !important
}

.btn-secondary {
    color: rgba(54, 55, 60, 0.75);
    background-color: rgba(20, 40, 74, 0.15);
    font-weight: 600 !important;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.08)
}

.btn-secondary:hover {
    color: #0373E6;
    background-color: rgba(20, 40, 74, 0.08) !important
}

.btn-secondary:active, .btn-secondary:focus, .show > .btn-secondary.dropdown-toggle {
    color: #0373E6 !important;
    background-color: rgba(20, 40, 74, 0.08) !important
}

.btn-linea {
    color: rgba(54, 55, 60, 0.75);
    font-weight: 500 !important;
    box-shadow: none;
    border: 1px solid #e5e8ef
}

.btn-linea:hover {
    color: #0373E6;
    background-color: rgba(20, 40, 74, 0.08) !important;
    border: 1px solid #0373E6
}

.btn-linea:active, .btn-secondary:focus, .show > .btn-secondary.dropdown-toggle {
    color: #0373E6 !important;
    background-color: rgba(20, 40, 74, 0.08) !important
}

.btn-verde {
    background-color: #2EAF00;
    box-shadow: 0px 7px 10px -3px rgba(46, 175, 0, 0.3)
}

.btn-verde:hover {
    background-color: #36ce00;
    color: white !important
}

.btn-rojo {
    background-color: #D80727;
    box-shadow: 0px 7px 10px -3px rgba(216, 7, 39, 0.3)
}

.btn-rojo:hover {
    background-color: #f6082c;
    color: white !important
}

.btn-mejoremos {
    background-color: #af2490;
    box-shadow: 0px 7px 10px -3px rgba(175, 36, 144, 0.3)
}

.btn-mejoremos:hover {
    background-color: #c829a5;
    color: white !important
}

.btn-mederis {
    background-color: #00adb1;
    box-shadow: 0px 7px 10px -3px rgba(0, 173, 177, 0.3)
}

.btn-mederis:hover {
    background-color: #00cbd0;
    color: white !important
}

.btn-amarillo {
    background-color: #eca307;
    box-shadow: 0px 7px 10px -3px rgba(236, 163, 7, 0.3)
}

.btn-amarillo:hover {
    background-color: #f8b119;
    color: white !important
}

.btn-morado {
    background-color: #7e2fbd;
    box-shadow: 0px 7px 10px -3px rgba(126, 47, 189, 0.3)
}

.btn-morado:hover {
    background-color: #8e3ccf;
    color: white !important
}

.btn-violeta {
    background-color: #e20578;
    box-shadow: 0px 7px 10px -3px rgba(226, 5, 120, 0.3)
}

.btn-violeta:hover {
    background-color: #fa0c88;
    color: white !important
}

.btn-blanco {
    background-color: #fff !important;
    color: rgba(54, 55, 60, 0.75);
    font-weight: 500 !important;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15) !important
}

.btn-blanco:hover {
    color: #0373E6
}

.btn-blanco:active {
    color: #0373E6 !important
}

.btn-blanco2 {
    background-color: #fff;
    color: #0373E6;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15)
}

.btn-blanco2:hover {
    color: #1687fc
}

.btn-blanco2:active {
    color: #1687fc
}

.btn-transparente {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-weight: 500 !important;
    box-shadow: none
}

.btn-transparente:hover {
    background-color: #fff;
    color: #0373E6
}

.btn-transparente:active {
    background-color: #fff;
    color: #0373E6 !important
}

.btn-invisible {
    background-color: transparent;
    color: rgba(54, 55, 60, 0.75);
    font-weight: 500 !important;
    box-shadow: none
}

.btn-invisible:hover {
    color: #0373E6
}

.btn-invisible:active {
    color: #0373E6 !important
}

.btn-invisible2 {
    background-color: transparent;
    color: rgba(54, 55, 60, 0.75);
    transition: all 0.2s ease;
    box-shadow: none
}

.btn-invisible2:hover {
    background-color: rgba(38, 56, 74, 0.08);
    color: #0373E6
}

.btn-invisible3 {
    background-color: rgba(54, 55, 60, 0.1);
    color: white;
    transition: all 0.2s ease;
    box-shadow: none
}

.btn-invisible3:hover {
    background-color: rgba(54, 55, 60, 0.25);
    color: white
}

.btn-gris {
    background-color: rgba(54, 55, 60, 0.1);
    color: rgba(54, 55, 60, 0.75);
    font-weight: 500 !important;
    box-shadow: none
}

.btn-gris:hover {
    color: rgba(54, 55, 60, 0.25)
}

.btn-gris:active {
    color: rgba(54, 55, 60, 0.25) !important
}

.btn.disabled {
    background-color: rgba(54, 55, 60, 0.1) !important;
    color: rgba(54, 55, 60, 0.5);
    box-shadow: none;
    opacity: 0.6;
    cursor: not-allowed
}

.btn-icono {
    padding-left: 48px
}

.btn-icono i {
    display: block;
    position: absolute;
    width: 34px;
    height: 34px;
    background-color: rgba(54, 55, 60, 0.15);
    padding-top: 9px;
    text-align: center;
    font-size: 16px;
    top: 4px;
    left: 4px;
    border-radius: 50%;
    transition: all 0.3s ease
}

.btn-icono:hover i {
    transform: rotate(360deg) !important
}

.btn-circulo {
    padding: 0px;
    width: 42px
}

.btn-circulo i {
    background-color: transparent
}

.disabled.btn-icono:hover i {
    transform: none !important
}

.btn-small {
    font-size: 11px;
    padding: 6px 12px;
    max-height: 30px;
    border-radius: 6px
}

.btn-small i {
    margin-right: 8px
}

.nav-tools li a {
    background-color: #F6F7FB;
    color: rgba(54, 55, 60, 0.75);
    border-radius: 0px !important;
    padding: 6px 10px;
    height: 30px;
    transition: all 0s ease
}

.nav-tools li a:hover {
    background-color: #e1e4f2 !important
}

.nav-tools .nav-link.active, .nav-tools .show > .nav-link {
    color: #fff;
    background-color: #0373E6;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3)
}

.nav-tools .nav-link.active:hover, .nav-tools .show > .nav-link:hover {
    background-color: #0c82fc !important
}

.nav-tools li:first-child a {
    border-radius: 6px 0px 0px 6px !important
}

.nav-tools li:last-child a {
    border-radius: 0px 6px 6px 0px !important
}

.nav-tools.pills-big {
    height: 42px
}

.nav-tools.pills-big li a {
    height: 42px;
    padding: 0px 20px
}

.nav-tools.pills-big li:first-child a {
    border-radius: 22px 0px 0px 22px !important
}

.nav-tools.pills-big li:last-child a {
    border-radius: 0px 22px 22px 0px !important
}

.btn-sistema {
    margin-bottom: 6px;
    box-shadow: 0px 7px 10px -3px rgba(0, 0, 0, 0.24) !important
}

.btn-sistema i {
    color: transparent;
    display: block;
    position: absolute;
    left: 13px;
    top: 13px;
    font-size: 16px
}

.btn-volver {
    border: 1px solid #3a3c403b;
    color: #3a3c40;
    width: 50px;
    height: 50px;
    line-height: 48px !important;
    padding-left: 18px;
    border-radius: 50%;
    margin-right: 12px;
    transition: all 0.2s ease
}

.btn-volver:hover {
    border: 1px solid #E70441;
    background-color: #fff;
    color: #E70441;
    padding-left: 12px
}

.btn-nota {
    width: 40px;
    font-weight: 800;
    background-color: transparent;
    color: #36373c;
    padding: 6px 8px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer
}

.btn-nota:hover {
    background-color: #0373E6;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3);
    color: #fff
}

.btn-nota span {
    font-family: 'roboto', sans-serif;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.6;
    width: 100%;
    display: block;
    margin-top: 2px
}

.btn-nota-nueva {
    width: 40px;
    height: 38px;
    text-align: center;
    padding: 14px;
    color: #fff;
    background-color: #0373E6;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3);
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px
}

.btn-nota-nueva:hover {
    color: #fff;
    background-color: #0c82fc;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3)
}

.btn-nota-empty {
    width: 40px;
    padding: 8px;
    color: #36373c;
    background-color: rgba(84, 103, 158, 0.08);
    border-radius: 5px;
    font-size: 11px;
    opacity: 0
}

.btn-planif {
    width: 100%;
    text-align: left;
    max-height: 42px;
    font-weight: 400;
    font-size: 12px;
    padding: 10px 16px;
    box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 4px;
    overflow: inherit
}

.btn-planif i.fa-pen {
    position: absolute;
    opacity: 0.6;
    top: 15px;
    right: 5px
}

.btn-planif i.fa-check {
    display: block;
    position: absolute;
    top: 9px;
    left: -12px;
    width: 22px;
    height: 22px;
    background-color: #3abd5b;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    padding-top: 6px;
    font-size: 10px;
    box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.4)
}

.btn-planif i.fa-exclamation {
    display: block;
    position: absolute;
    top: 9px;
    left: -12px;
    width: 22px;
    height: 22px;
    background-color: #ea5c0d;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    padding-top: 6px;
    font-size: 10px;
    box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.4)
}

.btn-agregar {
    width: 100%;
    box-shadow: none;
    background-color: transparent;
    color: rgba(54, 55, 60, 0.5);
    border: 1px dashed rgba(54, 55, 60, 0.1);
    margin-top: 16px
}

.btn-agregar:hover {
    color: #0373E6;
    border: 1px dashed #0373E6
}

.btn-eliminar {
    display: block;
    background-color: #D80727;
    box-shadow: 0px 7px 10px -3px rgba(216, 7, 39, 0.3);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    padding-top: 10px;
    position: absolute;
    z-index: 10;
    opacity: 0;
    transform: scale(0.7);
    right: -10px;
    top: -10px;
    transition: all 0.2s ease
}

.btn-eliminar:hover {
    opacity: 1;
    transform: scale(1);
    background-color: #f6082c;
    cursor: pointer
}

.tarjeta:hover .btn-eliminar {
    opacity: 1;
    transform: scale(1)
}

.btn-ayuda {
    position: fixed;
    bottom: 16px;
    right: 32px
}

.btn-ayuda {
    position: fixed;
    bottom: 16px;
    right: 24px;
    z-index: 9
}

.btn-ayuda i {
    background-color: #fff;
    color: #e70449
}

.btn-ayuda2 {
    position: fixed;
    bottom: 46px;
    right: -150px;
    transform: scale(1.2);
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px
}

.btn-ayuda2:hover {
    right: 18px
}

.btn-subir {
    display: block;
    border: 2px dashed #e5e8ef;
    border-radius: 5px;
    width: 100%;
    height: 54px;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-align: center
}

.btn-subir p {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.2s ease;
    margin: 0px
}

.btn-subir i {
    font-size: 16px;
    padding-top: 5px;
    color: rgba(54, 55, 60, 0.25);
    transition: all 0.2s ease
}

.btn-subir:hover {
    border: 2px dashed #0373E6
}

.btn-subir:hover p {
    color: #0373E6
}

.btn-subir:hover i {
    color: #0373E6
}

.btn-decrement, .btn-increment {
    background-color: #0373E6;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3);
    font-size: 18px;
    font-weight: 200;
    font-family: 'roboto', sans-serif;
    padding: 0px 16px;
    line-height: 42px
}

.btn-decrement:hover, .btn-increment:hover {
    background-color: #0c82fc !important
}

.btn-decrement {
    border-radius: 22px 0px 0px 22px
}

.btn-increment {
    border-radius: 0px 22px 22px 0px
}

.small2 .btn-decrement, .small2 .btn-increment {
    background-color: #0373E6;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3);
    font-size: 18px;
    font-weight: 200;
    font-family: 'roboto', sans-serif;
    padding: 0px 16px;
    line-height: 42px
}

.pointer {
    cursor: pointer
}

.pointer:hover {
    opacity: 0.8
}

.btn-group-vertical > .btn, .btn-group > .btn {
    flex: 1 1 auto
}

.btn-group-horizontal label.btn {
    border-radius: 8px !important;
    margin: 4px;
    overflow: unset;
    height: auto
}

.btn-group-horizontal label.btn i {
    font-size: 24px;
    margin-right: 0px;
    margin-bottom: 10px
}

.btn-group-horizontal label.btn img {
    margin-bottom: 10px
}

.btn-group-horizontal label.btn span {
    display: block;
    line-height: 12px
}

.btn-pie-informe {
    display: block;
    float: left;
    height: 48px;
    border: 0px;
    background-color: transparent;
    padding: 0px 16px;
    min-width: 48px;
    color: #88898d;
    cursor: pointer;
    margin-right: 1px;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.btn-pie-informe span {
    width: calc(100% - 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block
}

.btn-pie-informe i.fa-angle-down {
    position: absolute;
    right: 10px;
    top: calc(50% - 6px)
}

.table-lined .btn-pie-informe {
    margin-right: 0px;
    margin-bottom: 0px
}

.btn-pie-informe:hover {
    color: #0373E6;
    background-color: rgba(54, 55, 60, 0.05)
}

.btn-pie-informe.bg-verde, .btn-pie-informe.bg-amarillo, .btn-pie-informe.bg-rojo {
    color: white
}

.btn-pie-informe.bg-verde:hover {
    background-color: #58d514 !important
}

.btn-pie-informe.bg-rojo:hover {
    background-color: #fb0f4e !important
}

.btn-tabla {
    border: 0px;
    background-color: transparent;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.btn-tabla span {
    width: 100%;
    display: block;
    font-size: 10px;
    line-height: 11px
}

.btn-tabla:hover {
    color: #0373E6;
    background-color: rgba(54, 55, 60, 0.05)
}

.btn-tabla2 {
    border: 0px;
    background-color: transparent;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.btn-tabla2:hover {
    background-color: rgba(54, 55, 60, 0.05)
}

a.btn {
    line-height: 42px;
    padding-top: 0px;
    padding-bottom: 0px
}

a.btn-small {
    line-height: 30px !important
}

@media screen and (max-width: 576px) {
    .btn-responsive span {
        display: none
    }

    .btn-responsive i {
        margin-right: 0px !important
    }
}

@media screen and (max-width: 576px) {
    .btn-responsive-fixed {
        position: fixed !important;
        bottom: 16px;
        right: 16px;
        z-index: 3
    }
}

.btn-label {
    position: relative;
    height: 30px;
    line-height: 30px;
    right: -12px;
    display: inline-block;
    padding: 0px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0 3px 3px 0;
    cursor: pointer !important
}

.btn-labeled {
    padding-top: 0;
    padding-bottom: 0;
    cursor: default !important
}

.btn-espacio {
    border: 0px;
    border-radius: 10px;
    padding: 10px 10px;
    background-color: #0b274424;
    display: flex;
    position: relative;
    align-items: center !important;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    outline: none !important
}

.btn-espacio img {
    width: 36px;
    height: 36px;
    margin-right: 8px
}

.btn-espacio span {
    width: calc(100% - 60px);
    vertical-align: middle;
    white-space: break-spaces;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    color: white;
    white-space: break-spaces
}

.btn-espacio i {
    color: white;
    opacity: 0.5;
    position: absolute;
    right: 10px;
    top: calc(50% - 7px);
    transition: all 0.2s ease
}

.btn-espacio:hover {
    background-color: #ffffff3b
}

.btn-espacio:hover i {
    opacity: 1
}

.puntito {
    display: block;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    background-color: #D80727;
    border-radius: 50%
}

.btn-header {
    margin-right: -15px;
    margin-top: -10px;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    text-align: center !important;
    padding: 0px !important;
    box-shadow: none
}

.btn-header i {
    color: rgba(54, 55, 60, 0.25);
    margin-right: 0px !important;
    width: 100%;
    transition: all 0.2s ease;
    line-height: 34px
}

.btn-header2 {
    margin-right: -13px;
    margin-top: -8px
}

.btn-header:hover {
    background-color: rgba(38, 56, 74, 0.08)
}

.btn-header:hover i {
    color: rgba(54, 55, 60, 0.5)
}

.tarjeta-header .dropdown-menu {
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
    font-family: 'roboto', sans-serif
}

.badge {
    font-size: 10px;
    font-weight: 400;
    line-height: 8px;
    padding: 5px 8px;
    border-radius: 10px;
    background-color: #0373E6;
    color: #fff
}

@media (max-width: 1280px) {
    .badge {
        font-size: 9px
    }
}

.badge.bg-secondary {
    color: rgba(54, 55, 60, 0.75) !important
}

td .badge {
    margin-right: 3px;
    margin-top: 1px;
    margin-bottom: 1px
}

.badgeflex {
    background-color: #0f121938;
    display: flex;
    border-radius: 5px;
    padding: 5px;
    justify-content: center;
    align-items: center
}

.badge-peligro {
    background-color: #f8d7da;
    border: 1px solid #d17a89;
    color: #bb1130
}

.badge-alerta {
    background-color: #fff7de;
    border: 1px solid #e5b358;
    color: #d15f0e
}

.badge-exito {
    background-color: #def1e7;
    color: #1b973c;
    border: 1px solid #7ecb8f
}

.badge-info {
    background-color: #e3f0fd;
    color: #0767c9;
    border: 1px solid #79b0e9
}

.badge-gris {
    background-color: #e9ebf3;
    border: 1px solid #c2c6cf;
    color: #5d5f65
}

.badge-violeta {
    background-color: #f9e2ee;
    border: 1px solid #eb87bb;
    color: #e20578
}

.badge-morado {
    background-color: #f0e0fd;
    border: 1px solid #ba7fe9;
    color: #7e2fbd
}

.badge-numero b {
    width: 20px;
    height: 20px;
    margin: -2px;
    line-height: 20px;
    border-radius: 50%;
    display: inline-block;
    font-weight: 600
}

.badge-numero b img {
    border-radius: 50%;
    margin-top: -1px
}

.breadcrumb {
    background-color: transparent;
    padding-left: 0px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    display: inline-block !important
}

.breadcrumb .dropdown-item {
    color: #3a3c40 !important;
    font-weight: 500 !important
}

.breadcrumb .dropdown-item:hover {
    color: white !important
}

.breadcrumb a {
    color: rgba(54, 55, 60, 0.5);
    font-weight: 600;
    transition: all 0s;
    float: left;
    z-index: 1
}

.breadcrumb a:hover {
    color: #0373E6 !important
}

.breadcrumb-item.active, .breadcrumb-item.active a {
    font-weight: 700;
    color: #0373E6
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 14px;
    padding-left: 14px;
    color: rgba(54, 55, 60, 0.5) !important;
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 900 !important;
    font-size: 10px;
    float: left
}

.breadcrumb-item {
    display: inline-block;
    float: left;
    position: relative;
    color: rgba(54, 55, 60, 0.5);
    font-weight: 600
}

.breadcrumb-item:first-child i {
    margin-right: 8px;
    font-size: 12px
}

.breadcrumb-item i.fa-sort-down {
    vertical-align: middle;
    margin-top: -5px;
    margin-left: 5px
}

.bread-card {
    display: inline-block;
    background-color: white;
    border-radius: 10px 24px 24px 10px;
    padding: 12px 23px 11px 16px;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2)
}

.bread-card .breadcrumb a {
    font-weight: 500
}

.bread-button {
    display: inline-block;
    background-color: white;
    border-radius: 10px 24px 24px 10px;
    padding: 0px;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2)
}

.bread-button li a {
    font-weight: 500;
    padding: 14px 10px;
    padding-left: 46px !important
}

.bread-button li:first-child a {
    padding-left: 16px !important;
    border-radius: 10px 0px 0px 10px
}

.bread-button li:last-child a {
    padding-right: 23px !important;
    border-radius: 0px 25px 25px 0px
}

.bread-button li a:hover {
    background-color: #f0f3f9;
    color: #0373E6 !important
}

.bread-button .breadcrumb-item + .breadcrumb-item::before {
    display: none;
    content: ""
}

.bread-button li a::before {
    display: block;
    position: absolute;
    top: 0px;
    right: -25px;
    width: 25px;
    height: 100%;
    content: "";
    z-index: 1;
    background-image: url("bread-button1.png") !important;
    background-repeat: no-repeat;
    background-position: center right
}

.bread-button li a:hover::before {
    background-image: url("bread-button1-hov.png") !important;
    background-repeat: no-repeat;
    background-position: center right
}

.bread-button li:last-child a::before {
    display: none !important
}

.alert {
    padding: 10px 20px;
    margin-top: 5px;
    border: 0px solid
}

.alert p {
    margin: 0px;
    line-height: 16px
}

.alert i {
    float: left;
    margin-left: -5px;
    margin-right: 8px;
    margin-top: 3px
}

.alert-dismissible .close {
    text-shadow: none;
    padding: 7px 14px
}

.alert-primary {
    background-color: rgba(3, 115, 230, 0.2)
}

.alert-secondary {
    background-color: rgba(20, 40, 74, 0.2)
}

.alert-success {
    background-color: rgba(76, 185, 17, 0.2)
}

.alert-danger {
    background-color: rgba(231, 4, 65, 0.2)
}

.alert-warning {
    background-color: rgba(236, 163, 7, 0.3)
}

.alert-info {
    background-color: rgba(36, 55, 177, 0.2)
}

.alert-light {
    background-color: rgba(54, 55, 60, 0.1)
}

.alert-dark {
    background-color: rgba(80, 80, 82, 0.2)
}

.alerta-visual {
    border-radius: 10px;
    padding: 30px;
    position: relative;
    margin-bottom: 20px;
    display: flex
}

.alerta-visual h1 {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 20px
}

.alerta-visual p, .alerta-visual ul {
    color: rgba(255, 255, 255, 0.8)
}

.alerta-visual b {
    color: #fff
}

.alerta-visual img {
    float: left;
    margin-right: 30px
}

.alerta-visual button.close {
    position: absolute;
    height: 22px !important;
    top: 10px;
    right: 10px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    background-color: transparent;
    padding: 3px 7px;
    border: 1px solid #fff;
    border-radius: 12px;
    box-shadow: none !important
}

.alerta-visual button.close i {
    float: right;
    margin-left: 4px
}

.alerta-visual button.close:hover {
    color: #0373E6;
    background-color: #fff;
    opacity: 1
}

.alerta-visual .alerta-visual-texto {
    width: calc(100% - 400px);
    position: relative;
    display: block
}

@media screen and (max-width: 1024px) {
    .alerta-visual .alerta-visual-texto {
        width: 100%
    }
}

.alerta-visual .alerta-visual-imagen {
    position: absolute;
    bottom: 0px;
    right: 0px
}

@media screen and (max-width: 1024px) {
    .alerta-visual .alerta-visual-imagen {
        width: 100%;
        position: relative;
        bottom: inherit;
        right: inherit;
        text-align: center;
        display: block;
        margin-top: 30px;
        margin-bottom: -30px
    }

    .alerta-visual .alerta-visual-imagen img {
        width: 100%;
        max-width: 380px
    }
}

@media screen and (max-width: 640px) {
    .alerta-visual {
        display: block
    }
}

.alerta-visual.bg-blanco {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2)
}

.tooltip {
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    transition: opacity 0.1s ease
}

.tooltip {
    max-width: 530px !important
}

.tooltip-inner {
    max-width: 530px !important
}

.popover {
    border-radius: 8px;
    box-shadow: 0px 7px 10px -3px rgba(0, 0, 0, 0.24);
    border: 0px solid
}

.popover-header {
    border-radius: 8px 8px 0px 0px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    background-color: #F6F7FB;
    border-bottom: 0px solid
}

.popover-body {
    font-size: 13px;
    font-family: 'roboto', sans-serif;
    line-height: 18px
}

.hullabaloo.alert {
    color: #fff;
    padding: 15px 20px;
    line-height: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600
}

.hullabaloo.alert i {
    font-size: 16px;
    margin-right: 12px;
    margin-top: 0px
}

.hullabaloo.alert .close {
    height: 100%;
    font-weight: 300;
    line-height: 16px;
    outline: none
}

.hullabaloo.alert .close:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1)
}

.hullabaloo.alert-success {
    background-color: #2EAF00;
    box-shadow: 0px 7px 10px -3px rgba(46, 175, 0, 0.3)
}

.hullabaloo.alert-info {
    background-color: #0373E6 !important;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3)
}

.hullabaloo.alert-warning {
    background-color: #eca307;
    box-shadow: 0px 7px 10px -3px rgba(236, 163, 7, 0.3)
}

.hullabaloo.alert-danger {
    background-color: #D80727;
    box-shadow: 0px 7px 10px -3px rgba(216, 7, 39, 0.3)
}

.hullabaloo.alert-light {
    background-color: #fff;
    color: rgba(54, 55, 60, 0.75) !important;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15)
}

.hullabaloo.alert-light .close:hover {
    color: #36373c;
    background-color: rgba(54, 55, 60, 0.1)
}

.hullabaloo.alert-dark {
    background-color: #505052;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15)
}

.form-text-only {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0px;
    outline: none
}

.form-text-only:hover {
    border: 1px solid rgba(54, 55, 60, 0.25)
}

.form-text-only:focus, .form-text-only:active {
    border: 1px solid #0373E6 !important;
    background-color: white
}

label {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 12px
}

.form-control {
    color: #000;
    padding: 5px 16px;
    min-height: 42px;
    font-size: 13px;
    position: relative;
    border: 0px solid transparent;
    border-radius: 22px;
    background-color: rgba(57, 75, 145, 0.1);
    box-shadow: inset 0px 0px 0px 2px rgba(54, 55, 60, 0);
    transition: all 0.1s ease
}

td .form-control {
    min-height: 30px
}

.form-control:hover {
    box-shadow: inset 0px 0px 0px 2px rgba(54, 55, 60, 0.5)
}

.form-control:focus {
    color: #000;
    background-color: #fff !important;
    box-shadow: inset 0px 0px 0px 2px #0373e6
}

.form-control::-moz-placeholder {
    color: rgba(54, 55, 60, 0.5)
}

.form-control:-ms-input-placeholder {
    color: rgba(54, 55, 60, 0.5)
}

.form-control::placeholder {
    color: rgba(54, 55, 60, 0.5)
}

.form-control.small {
    min-height: 30px
}

.form-control.small2 {
    padding: 3px 10px;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 6px
}

.form-control.buscar {
    background-image: url("icon_buscar.png") !important;
    background-position: right 12px center !important;
    background-repeat: no-repeat
}

.form-control.buscar:focus {
    background-image: url("icon_buscar2.png") !important
}

.form-control.buscar-blanco {
    background-color: #fff;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15)
}

.form-control.buscar-blanco:hover {
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15), inset 0px 0px 0px 2px rgba(54, 55, 60, 0.5)
}

.form-control.buscar-blanco:focus {
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15), inset 0px 0px 0px 2px #0373e6
}

.form-group {
    margin-bottom: 18px
}

.input-group-text {
    border: 0px solid !important;
    border-radius: 22px;
    font-size: 13px;
    box-shadow: none !important;
    margin-right: 1px;
    background-color: rgba(62, 77, 107, 0.19);
    min-width: 44px
}

.input-group-text i {
    font-size: 16px;
    margin-left: 4px;
    opacity: 0.8
}

textarea.form-control {
    min-height: 100px;
    padding: 12px 16px;
    border-radius: 12px
}

.form-control.is-valid {
    background-color: rgba(46, 175, 0, 0.3)
}

.form-control.is-valid:focus {
    box-shadow: inset 0px 0px 0px 2px #2eaf00
}

.valid-feedback, .invalid-feedback {
    padding-left: 12px;
    font-size: 11px;
    font-weight: 600
}

.form-control.is-invalid {
    background-color: rgba(216, 7, 39, 0.3)
}

.form-control.is-invalid:focus {
    box-shadow: inset 0px 0px 0px 2px #d80727
}

.form-control:disabled {
    background-color: #4a537314;
    color: rgba(132, 136, 147, 0.98);
    opacity: 1
}

.form-control:disabled:hover {
    box-shadow: none !important;
    cursor: not-allowed
}

.btn-input-password {
    background-color: transparent;
    position: absolute;
    width: 48px;
    height: 42px;
    text-align: center;
    display: block;
    right: 0px;
    top: 0px;
    padding: 0px;
    z-index: 4;
    cursor: pointer
}

.btn-input-password i {
    line-height: 42px
}

.form-vertical {
    padding: 0px 5px
}

.form-vertical label {
    width: 120px;
    height: 42px;
    font-size: 11px;
    text-align: right;
    padding-right: 16px;
    display: table-cell;
    vertical-align: middle
}

.form-vertical label.ver-small {
    height: 30px
}

.form-vertical p.label-v {
    width: 100px;
    float: left;
    text-align: right;
    padding-right: 16px;
    padding-top: 12px
}

.form-vertical .form-group {
    width: calc(100% - 120px)
}

select {
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    background-image: url("drop1.png");
    background-repeat: no-repeat;
    background-position: right center
}

select:hover {
    color: #0373E6 !important;
    background-image: url("drop2.png")
}

select.btn-blanco {
    color: rgba(54, 55, 60, 0.75)
}

.dropdown-toggle.btn-line, .dropdown-toggle.btn-gris, select.btn-line, select.btn-gris, .tarjeta .chosen-single, .modal .chosen-single {
    background-color: rgba(57, 75, 145, 0.1) !important;
    color: rgba(54, 55, 60, 0.75);
    font-weight: 500;
    box-shadow: inset 0px 0px 0px 2px transparent !important;
    transform: all 0.1s ease
}

.dropdown-toggle.btn-line:hover, .dropdown-toggle.btn-gris:hover, select.btn-line:hover, select.btn-gris:hover, .tarjeta .chosen-single:hover, .modal .chosen-single:hover {
    color: #0373E6;
    box-shadow: inset 0px 0px 0px 2px rgba(54, 55, 60, 0.5) !important
}

.dropdown-toggle.btn-line:active, .dropdown-toggle.btn-gris:active, select.btn-line:active, select.btn-gris:active, .tarjeta .chosen-single:active, .modal .chosen-single:active, .dropdown-toggle.btn-line:focus, .dropdown-toggle.btn-gris:focus, select.btn-line:focus, select.btn-gris:focus, .tarjeta .chosen-single:focus, .modal .chosen-single:focus {
    color: #0373E6 !important;
    box-shadow: inset 0px 0px 0px 2px #0373e6 !important;
    background-color: #FFF
}

.dropdown-toggle::after {
    display: none !important
}

.dropdown-toggle.btn {
    text-align: left;
    padding-right: 38px
}

.dropdown-toggle .fa-sort-down {
    font-size: 16px;
    width: auto;
    position: absolute;
    padding-top: 0px;
    top: 10px;
    left: inherit;
    right: 16px;
    background-color: transparent
}

.dropdown-toggle:hover .fa-sort-down {
    transform: none !important
}

.dropdown-menu {
    box-shadow: 0px 8px 20px 0px rgba(55, 61, 76, 0.2), 0px 0px 5px 0px rgba(55, 61, 76, 0.15);
    border: 0px solid;
    border-radius: 10px;
    background-clip: inherit
}

.dropdown-menu.dropdown-dark {
    background-color: #2e3944
}

.dropdown-menu.dropdown-dark a {
    color: #dfe2e8
}

.dropdown-menu.dropdown-dark a i {
    color: rgba(255, 255, 255, 0.4)
}

.dropdown-menu.style-scroll {
    overflow-y: auto
}

.dropdown-item {
    font-size: 13px;
    color: #3a3c40;
    transition: all 0s ease;
    line-height: 21px;
    padding: 4px 16px
}

.drop-overflow .dropdown-item {
    overflow: hidden;
    text-overflow: ellipsis
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #fff !important;
    background-color: #0373E6
}

.dropdown-item a {
    transition: all 0s ease
}

.dropdown-item:hover a {
    color: #fff
}

.dropdown-item:hover .dropdown-menu a {
    color: #3a3c40
}

.dropdown-item:hover .dropdown-menu a.dropdown-item:hover {
    color: #fff
}

.dropdown-submenu > .dropdown-menu {
    margin-left: 0px !important;
    border-radius: 10px 10px 10px 10px !important
}

.dropdown-submenu.left > .dropdown-menu {
    left: inherit !important;
    right: 100% !important
}

.dropdown-submenu > a:after {
    margin-right: -18px !important
}

.dropdown-header {
    font-weight: 700;
    font-size: 11px;
    padding: 4px 16px;
    color: rgba(54, 55, 60, 0.5)
}

.dropdown-dark h6.dropdown-header {
    color: rgba(186, 190, 206, 0.5) !important
}

.dropdown-dark .dropdown-divider {
    border-top: 1px solid #e9ecef1c
}

.dropdown-menu a i {
    color: rgba(54, 55, 60, 0.25);
    width: 18px;
    text-align: center;
    border-radius: 50%;
    font-size: 16px;
    margin-bottom: 1px;
    vertical-align: middle;
    margin-right: 10px;
    line-height: 20px
}

.dropdown-menu a:hover i {
    color: #fff
}

.dropdown-item.disabled, .dropdown-item:disabled {
    opacity: 0.5 !important;
    background-color: transparent !important
}

.dropdown-toggle.btn-small {
    padding-right: 30px
}

.btn-small.dropdown-toggle .fa-sort-down {
    font-size: 12px;
    top: 7px;
    right: 4px
}

.dropdown-menu.dropdown-small {
    border-radius: 7px
}

@media screen and (max-width: 640px) {
    .dropdown-responsive {
        width: 100% !important
    }
}

.btn-icon-drop {
    width: 30px;
    padding: 0px !important
}

.btn-icon-drop i {
    width: 100%;
    text-align: center
}

.dropdown-submenu {
    position: relative;
    padding-right: 26px;
    cursor: pointer
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px
}

.dropdown-submenu:hover > a:after {
    border-left-color: #fff
}

.dropdown-submenu.pull-left {
    float: none
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    border-radius: 6px 0 6px 6px
}

.dropdown-rounded-1 {
    padding: 5px
}

.dropdown-rounded-1 a.dropdown-item, .dropdown-rounded-1 .dropdown-submenu, .dropdown-rounded-1 .dropdown-header {
    border-radius: 5px;
    padding: 4px 11px
}

.dropdown-rounded-1 a.dropdown-item:hover, .dropdown-rounded-1 .dropdown-submenu:hover {
    background-color: rgba(131, 144, 185, 0.15);
    color: #0373E6 !important
}

.dropdown-rounded-1 a.dropdown-item:hover i, .dropdown-rounded-1 .dropdown-submenu:hover i {
    color: #0373E6
}

.dropdown-rounded-1 a.dropdown-item:hover > a, .dropdown-rounded-1 .dropdown-submenu:hover > a {
    color: #0373E6 !important
}

.dropdown-rounded-1 a.dropdown-item:hover > a:after, .dropdown-rounded-1 .dropdown-submenu:hover > a:after {
    border-left-color: #0373E6 !important
}

.dropdown-rounded-1 .dropdown-submenu > a:after {
    margin-right: -8px !important
}

.dropdown-rounded-1 .dropdown-divider {
    margin: 5px -5px
}

.dropdown-rounded-2 {
    border-radius: 16px;
    padding: 8px
}

.dropdown-rounded-2 a.dropdown-item, .dropdown-rounded-2 .dropdown-header {
    border-radius: 10px;
    padding: 10px;
    position: relative;
    width: 100% !important;
    height: inherit !important
}

.dropdown-rounded-2 a.dropdown-item:hover, .dropdown-rounded-2 a.dropdown-item:focus {
    background-color: rgba(131, 144, 185, 0.15) !important;
    color: #0373E6 !important
}

.dropdown-rounded-2 a.dropdown-item:hover i, .dropdown-rounded-2 a.dropdown-item:focus i {
    color: #0373E6
}

.dropdown-rounded-2 .dropdown-divider {
    margin: 8px -8px
}

.dropdown-hover:hover > .dropdown-menu {
    display: block
}

.dropdown-hover .dropdown-menu {
    margin-top: 0px
}

.dropdown-hover > .dropdown-toggle:active {
    pointer-events: none
}

.dropdown-big .icon-drop {
    display: block;
    float: left;
    width: 50px !important;
    height: 50px;
    border-radius: 8px !important;
    font-size: 32px;
    line-height: 50px;
    text-align: center;
    margin: 4px 15px 0px 5px
}

.dropdown-big .icon-indicador {
    position: absolute;
    right: 12px;
    margin: 0px !important;
    top: calc(50% - 10px);
    transition: all 0.2s ease;
    opacity: 0
}

.dropdown-big .info-drop {
    display: block;
    float: left;
    width: calc(100% - 70px);
    padding-right: 16px
}

.dropdown-big p {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin-bottom: 4px;
    white-space: break-spaces
}

.dropdown-big span {
    color: rgba(54, 55, 60, 0.75);
    white-space: break-spaces;
    font-size: 12px;
    font-weight: 500;
    line-height: 17px !important;
    display: inline-block
}

.dropdown-big a.dropdown-item:hover .icon-indicador {
    right: 8px;
    opacity: 1
}

.dropdown-pin::before {
    content: '';
    display: block;
    background-color: #fff;
    border-radius: 4px 0px 16px 0px;
    transform: rotate(45deg);
    width: 16px;
    height: 16px;
    position: absolute;
    top: -4px;
    left: 30px
}

.dropdown-big.dropdown-pin::before {
    left: 15px
}

.dropdown-big.dropdown-menu-right.dropdown-pin::before {
    left: inherit !important;
    right: 15px
}

@media screen and (max-width: 1600px) {
    .mejoremos.dropdown-big {
        right: 0 !important;
        left: auto !important
    }
}

@media screen and (max-width: 1600px) {
    .mejoremos.dropdown-pin::before {
        left: inherit !important;
        right: 20px
    }
}

.chosen-single {
    transition: all 0.2s ease;
    height: 32px !important;
    padding: 9px 20px 9px 16px !important;
    border: 0px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15) !important;
    line-height: 18px !important;
}

.chosen-single:hover, .chosen-single:active, .chosen-single:focus {
    color: #0373E6 !important
}

.chosen-single div {
    width: 26px !important;
    font-size: 16px !important
}

.chosen-single div b {
    font-family: "Font Awesome 5 Free";
    background: none !important;
    margin-top: 6px !important
}

.chosen-single div b::after {
    content: "\f0dd";
    display: block
}

.chosen-disabled {
    cursor: not-allowed
}

.chosen-drop {
    box-shadow: none !important;
    border: 0px solid !important;
    border-radius: 22px 22px 10px 10px !important;
    background-color: transparent !important
}

.chosen-container {
    width: 100% !important
}

.chosen-container-single .chosen-drop {
    margin-top: -42px !important
}

.chosen-container .chosen-results {
    width: 100% !important;
    margin: 0px;
    margin-top: 1px;
    scroll-behavior: smooth;
    padding: 5px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 8px 20px 0px rgba(55, 61, 76, 0.2), 0px 0px 5px 0px rgba(55, 61, 76, 0.15) !important
}

.chosen-container .chosen-results li {
    padding: 8px 11px;
    border-radius: 5px !important;
    line-height: 14px
}

.chosen-container .chosen-results li:hover, .chosen-container .chosen-results li.highlighted {
    background-color: rgba(131, 144, 185, 0.15);
    color: #0373E6;
    background-image: none;
    width: inherit !important
}

.chosen-container .chosen-results li.disabled-result {
    cursor: not-allowed
}

.chosen-container-single .chosen-search {
    padding: 0px !important
}

.chosen-container-single .chosen-search input[type="text"] {
    border: 0px solid !important;
    margin: 0px !important;
    padding: 13px 16px;
    height: 42px;
    border-radius: 22px;
    background: white;
    background-color: #fff;
    background-image: url("icon_buscar2.png") !important;
    background-size: 18px !important;
    background-position: right 12px center !important;
    background-repeat: no-repeat;
    box-shadow: inset 0px 0px 0px 2px #0373e6
}

.chosen-container.chosen-container-multi {
    width: 100% !important
}

.chosen-container-multi .chosen-choices {
    transition: all 0s ease;
    padding: 8px 10px !important;
    border: 0px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15);
    width: 100%;
    cursor: pointer;
    background-image: url("drop.png");
    background-repeat: no-repeat;
    background-position: right center
}

.chosen-container-multi .chosen-choices:hover, .chosen-container-multi .chosen-choices:active, .chosen-container-multi .chosen-choices:focus {
    color: #0373E6 !important;
    background-image: url("drop2.png")
}

.chosen-container-multi .chosen-choices:hover .chosen-search-input, .chosen-container-multi .chosen-choices:active .chosen-search-input, .chosen-container-multi .chosen-choices:focus .chosen-search-input {
    color: #0373E6 !important;
    transition: all 0.2s ease
}

.chosen-container-multi .chosen-choices li.search-choice {
    border-radius: 12px;
    padding: 5px 24px 5px 8px;
    border: 0px solid;
    background-color: #ebedf4;
    margin-top: 2px;
    margin-bottom: 1px
}

.chosen-container-active .chosen-choices {
    transition: none;
    background-image: url("icon_buscar2.png") !important;
    background-repeat: no-repeat;
    background-position: right 12px center !important;
    box-shadow: inset 0px 0px 0px 2px #0373e6 !important;
    cursor: text
}

.tarjeta .chosen-container-multi .chosen-choices, .modal .chosen-container-multi .chosen-choices {
    background-color: #fff;
    color: rgba(54, 55, 60, 0.75);
    font-weight: 500 !important;
    box-shadow: inset 0px 0px 0px 2px #ebedf4
}

.tarjeta .chosen-container-multi .chosen-choices:hover, .modal .chosen-container-multi .chosen-choices:hover {
    box-shadow: inset 0px 0px 0px 2px rgba(54, 55, 60, 0.5);
    background-image: url("drop2.png")
}

.tarjeta .chosen-container-multi .chosen-choices:hover .search-field, .modal .chosen-container-multi .chosen-choices:hover .search-field {
    color: #0373E6 !important
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    padding-left: 6px;
    color: #36373c;
    transition: all 0.2s ease
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    transition: none;
    top: 6px;
    right: 5px;
    opacity: .5
}

.chosen-container .chosen-results li.group-result {
    border-top: 1px solid rgba(54, 55, 60, 0.1);
    padding-left: 10px !important;
    padding-top: 10px !important;
    margin-top: 5px
}

.chosen-container .chosen-results li.group-result:hover {
    color: #fff;
    cursor: pointer
}

.chosen-select-small .chosen-container-single .chosen-single {
    padding: 3px 10px !important;
    height: 30px !important;
    border-radius: 6px !important
}

.chosen-select-small .chosen-single div b {
    margin-top: 0px !important
}

.chosen-select-small .chosen-container-single .chosen-drop {
    margin-top: -30px !important
}

.chosen-select-small .chosen-container-single .chosen-search input[type="text"] {
    height: 30px;
    border-radius: 6px;
    padding: 3px 10px
}

.chosen-select-small .chosen-container .chosen-results {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.chosen-select-small .chosen-container-multi .chosen-choices {
    min-height: 31px !important;
    padding: 2px 4px !important;
    border-radius: 8px !important
}

.form-control-big {
    box-shadow: inset 0px 0px 0px 2px #d6d8e3;
    border-radius: 10px;
    background-color: #fafbff;
    padding: 8px 16px;
    min-height: 50px;
    font-size: 14px
}

.form-icono {
    padding-left: 50px
}

.form-icono-big {
    position: absolute;
    line-height: 50px !important;
    width: 50px;
    text-align: center;
    top: 0px;
    left: 0px;
    color: #acaeb9;
    font-size: 16px;
    z-index: 1
}

.chosen-select-big .chosen-container-single .chosen-single {
    padding: 14px 16px !important;
    height: 50px !important;
    border-radius: 10px !important;
    background-color: #fafbff !important;
    box-shadow: inset 0px 0px 0px 2px #d6d8e3 !important
}

.chosen-select-big .chosen-container-single .chosen-single:hover {
    box-shadow: inset 0px 0px 0px 2px rgba(54, 55, 60, 0.5) !important
}

.chosen-select-big .chosen-container-single .chosen-single span {
    font-size: 14px
}

.chosen-select-big .chosen-single div b {
    margin-top: 10px !important
}

.chosen-select-big .chosen-container-single .chosen-drop {
    margin-top: -50px !important
}

.chosen-select-big .chosen-container-single .chosen-search input[type="text"] {
    height: 50px;
    border-radius: 10px !important
}

.chosen-icono .chosen-container-single .chosen-single {
    padding-left: 50px !important
}

.chosen-select-curso .chosen-container-single .chosen-single {
    padding: 10px 16px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background-color: #fafbff !important
}

.chosen-select-curso .chosen-container-single .chosen-single span {
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600
}

.chosen-select-curso .chosen-single div b {
    margin-top: 6px !important
}

.chosen-select-curso .chosen-container-single .chosen-drop {
    margin-top: -42px !important
}

.chosen-select-curso .chosen-container-single .chosen-search input[type="text"] {
    height: 42px;
    border-radius: 10px !important;
    box-shadow: none !important
}

.chosen-dark .chosen-container-single .chosen-single {
    background-color: #0000001f !important;
    color: #ffffff9e !important
}

.select-hora .chosen-container {
    width: calc(100% - 42px) !important
}

.select-hora .chosen-container .chosen-results li.active-result {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    border-bottom: 1px solid #e5e8ef;
    border-top: 1px solid #e5e8ef;
    margin-bottom: -1px;
    padding: 5px 12px !important
}

.select-hora i {
    display: block;
    width: 42px;
    height: 42px;
    float: left;
    border-radius: 22px 0px 0px 22px;
    text-align: center;
    padding-top: 13px;
    padding-left: 4px;
    background-color: rgba(62, 77, 107, 0.19);
    font-size: 16px;
    color: rgba(54, 55, 60, 0.75)
}

.select-hora .chosen-single {
    border-radius: 0px 22px 22px 0px !important;
    background-color: rgba(57, 75, 145, 0.1);
    box-shadow: inset 0px 0px 0px 2px rgba(54, 55, 60, 0) !important;
    padding: 9px 12px !important;
    cursor: text
}

.select-hora .chosen-container-single .chosen-search input[type="text"] {
    border-radius: 0px 22px 22px 0px !important
}

.select-hora .chosen-container-single .chosen-single div {
    display: none
}

.select-hora .chosen-container-single .chosen-single span {
    margin-right: 0px
}

.table-chosen .chosen-single {
    font-family: 'roboto', sans-serif;
    height: 30px !important;
    padding: 4px 8px !important;
    border-radius: 5px !important
}

.table-chosen .chosen-container-single .chosen-search input[type="text"] {
    font-family: 'roboto', sans-serif;
    height: 30px !important;
    padding: 4px 8px !important;
    border-radius: 5px !important
}

.table-chosen .chosen-single div b {
    margin-top: 0px !important
}

.table-chosen .chosen-container-single .chosen-drop {
    margin-top: -30px !important
}

.check-horizontal {
    width: 100%;
    height: 32px
}

.custom-control {
    padding-left: 10px;
    padding-right: 10px;
    min-width: 34px
}

.custom-control:hover {
    background-color: rgba(3, 103, 207, 0.1);
    border-radius: 6px
}

.custom-checkbox.float-left, .custom-radio.float-left {
    margin-right: 15px;
    margin-top: 0px
}

.custom-checkbox label, .custom-radio label {
    font-family: 'roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 15px;
    margin-left: 0px;
    cursor: pointer;
    width: 100%;
    float: inherit;
    text-align: left;
    padding: 7px 0px 7px 24px;
    height: inherit !important;
    min-height: 30px;
    display: inline-block
}

.custom-control-label::before {
    left: -3px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 3px !important;
    background-color: rgba(57, 75, 145, 0.1);
    border: 1px solid #cacdd6;
    transition: all 0s ease
}

.custom-control-label-light::before {
    background-color: white !important
}

.custom-control-label::after {
    left: -3px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 3px !important
}

.custom-control.custom-checkbox:hover .custom-control-label::before, .custom-control.custom-radio:hover .custom-control-label::before {
    border: 2px solid #0373E6;
    background-color: #fff
}

.custom-control-input:disabled ~ .custom-control-label, .custom-control-input[disabled] ~ .custom-control-label {
    cursor: not-allowed
}

.custom-control.custom-checkbox input:disabled ~ .custom-control-label::before, .custom-control.custom-checkbox input[disabled] ~ .custom-control-label::before, .custom-control.custom-radio input:disabled ~ .custom-control-label::before, .custom-control.custom-radio input[disabled] ~ .custom-control-label::before {
    opacity: 0.5
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #0373E6 !important
}

.custom-control.custom-checkbox:hover .custom-control-input:checked ~ .custom-control-label::before, .custom-control.custom-radio:hover .custom-control-input:checked ~ .custom-control-label::before {
    border: 0px solid !important
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0px transparent, 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: none
}

.custom-radio .custom-control-label::before, .custom-radio .custom-control-label::after {
    border-radius: 50% !important
}

.oa-checkbox {
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 0px !important;
    border-bottom: 1px solid #dbdde3
}

.oa-checkbox label {
    line-height: 14px;
    font-size: 11px
}

.check-solo {
    display: inline-block;
    padding: 0px 0px 0px 10px !important;
    text-align: center;
    min-width: 30px
}

.check-tabla::before {
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    top: 0px !important;
    left: 0px !important;
    border-radius: 0px !important;
    border: none
}

.custom-control-input:checked ~ .check-tabla::after {
    width: 100% !important;
    height: 100% !important;
    top: 0px !important;
    left: 0px !important;
    border-radius: 0px !important;
    background-image: url("icon_check.png");
    background-size: 12px;
    background-position: center
}

.switch {
    font-size: 1rem;
    position: relative
}

.switch input {
    position: absolute;
    height: 1px;
    width: 1px;
    background: none;
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    overflow: hidden;
    padding: 0
}

.switch input + label {
    position: relative;
    height: 25px;
    cursor: pointer;
    text-indent: calc(calc(calc(2.375rem * .7) * 2) + .5rem);
    margin-bottom: 0px
}

.switch input + label::before, .switch input + label::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    bottom: 0;
    display: inline-block
}

.switch input + label::before {
    right: 0;
    background-color: rgba(57, 75, 145, 0.1);
    border-radius: calc(2.375rem * .8);
    transition: 0.2s all;
    content: 'No';
    color: #0000004d;
    line-height: 25px;
    background-position: 0px 7px
}

.switch input + label::after {
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: white;
    transition: 0.2s all
}

.switch input:checked + label::before {
    background-color: #0373E6;
    content: 'Sí';
    color: #000;
    background-image: url("icon_check.png");
    background-repeat: no-repeat;
    background-position: 9px 7px
}

.switch input:checked + label::after {
    margin-left: 25px
}

.switch input:focus + label::before {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25)
}

.switch input:disabled + label {
    color: #868e96;
    cursor: not-allowed
}

.switch input:disabled + label::before {
    opacity: 0.5
}

.switch + .switch {
    margin-left: 1rem
}

fieldset {
    border: 1px solid #00000017;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 15px
}

fieldset p {
    font-size: 12px
}

legend {
    display: inline-block;
    width: inherit;
    padding: 0px 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-left: -5px;
    margin-bottom: 0px;
    color: #0000008f
}

.selector-multiple {
    min-height: 200px;
    padding: 0px
}

.selector-multiple option {
    padding: 5px 12px;
    border-bottom: 1px solid #0f1d3a14;
    cursor: pointer
}

.selector-multiple option:hover {
    background-color: #1b41790a
}

.selector-multiple option:focus, .selector-multiple option:active {
    background-color: #000 !important
}

.dropdown label {
    position: absolute;
    top: -20px
}

.input-nota {
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2px solid transparent;
    padding: 6px 0px;
    font-weight: 600;
    color: #162780
}

.input-nota:hover {
    background-color: #FFF;
    border: 2px solid rgba(54, 55, 60, 0.5)
}

.input-nota:focus {
    background-color: #FFF;
    border: 2px solid #0373E6;
    box-shadow: none;
    outline: none
}

.input-nota.rojo {
    color: #D80727;
    font-weight: 600
}

.table-notas select.form-control {
    border-radius: 0px;
    height: 100% !important;
    background-color: transparent;
    transition: all 0s ease;
    padding: 5px 10px;
    font-weight: bold;
    color: #162780
}

.table-notas select.form-control:hover {
    background-color: #fff
}

.input-asistencia {
    text-align: center;
    width: 40px;
    background-color: rgba(57, 75, 145, 0.1);
    border: 2px solid transparent;
    padding: 6px 0px;
    border-radius: 20px;
    margin-right: 2px
}

.input-asistencia:hover {
    background-color: #FFF;
    border: 2px solid rgba(54, 55, 60, 0.5)
}

.input-asistencia:focus {
    background-color: #FFF;
    border: 2px solid #0373E6;
    box-shadow: none;
    outline: none
}

.input-asistencia.rojo {
    color: #D80727;
    font-weight: 600
}

.form-invisible {
    border: 2px solid transparent;
    padding: 10px
}

.form-invisible:hover {
    border: 2px dashed #e5e8ef
}

.form-invisible:focus {
    border: 2px solid #0373E6;
    background-color: white;
    outline: none
}

.info-perso-escala span {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    background-color: #d3d6df;
    display: inline-block;
    width: 28px;
    padding: 5px 0px;
    margin-right: 6px;
    border-radius: 3px;
    text-align: center
}

.info-idsp-escala {
    background-color: #e3e6f0;
    color: #36373c;
    display: inline-block;
    width: 48px;
    padding: 8px 0px;
    margin-right: 6px;
    margin-bottom: 0px;
    border-radius: 3px;
    text-align: center;
    height: 60px
}

.info-idsp-escala i {
    font-size: 24px;
    display: block;
    width: 100%
}

.info-idsp-escala span {
    font-size: 8px;
    line-height: 8px;
    text-transform: uppercase;
    font-family: 'roboto condensed', sans-serif;
    display: block;
    font-weight: 800;
    margin-top: 5px;
    width: 100%
}

.cuest-idsp .custom-radio.float-left {
    width: 48px !important
}

.cuest-idsp .custom-radio.float-left .custom-control-label::before {
    left: 14px !important
}

.info-perso-escala {
    margin-bottom: 2px
}

.table-personalidad .custom-radio.float-left {
    margin-right: 6px !important;
    padding: 0px 6px;
    text-align: center;
    width: 28px;
    margin-top: 0px;
    margin-bottom: 0px
}

.table-personalidad .custom-control-label::before {
    top: 5px !important;
    left: 4px
}

span.evaluacion-feed {
    display: block;
    position: absolute;
    left: -16px;
    top: 6px
}

li span.evaluacion-feed {
    top: 0px
}

span.username {
    height: 30px;
    vertical-align: middle;
    display: table-cell;
    font-family: 'montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 11px
}

.div-label {
    width: 150px;
    float: left
}

.div-input {
    width: calc(100% - 150px);
    padding: 0px 15px;
    float: left
}

.cuadro-datos .label {
    text-align: right !important;
    width: 150px;
    font-family: 'montserrat', sans-serif;
    font-size: 11px;
    line-height: 12px;
    font-weight: 600;
    display: table-cell;
    vertical-align: middle;
    height: 38px
}

.divisa-clp {
    z-index: 1
}

.form-icon-small {
    z-index: 1;
    position: absolute;
    min-width: 35px;
    height: 30px;
    padding-top: 0.5rem;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 15px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px 0 0 6px
}

.input-full {
    border-radius: 0px !important;
    min-height: inherit !important;
    height: 48px !important;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: transparent;
    padding: 14px 10px !important
}

.input-full:hover {
    background-color: white
}

textarea.input-expandible:focus {
    height: 200px !important;
    overflow: auto;
    white-space: inherit;
    color: black;
    z-index: 2
}

.text-proposito {
    transition: all 0.2s ease;
    height: 70px
}

.text-proposito:focus {
    height: 400px;
    overflow: auto;
    white-space: inherit;
    margin-bottom: 30px
}

.gradiente-proposito {
    width: calc(100% - 2px);
    height: 30px;
    position: absolute;
    bottom: 7px;
    left: 1px;
    background: linear-gradient(0deg, #e5e8ef 5%, rgba(229, 232, 239, 0) 100%);
    z-index: 3;
    pointer-events: none
}

.fs-wrap {
    display: inline-block;
    cursor: pointer;
    line-height: 1;
    width: 200px;
    outline: none
}

.fs-label-wrap {
    position: relative;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor: default
}

.fs-label-wrap, .fs-dropdown {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.fs-label-wrap .fs-label {
    padding: 6px 22px 6px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    outline: none
}

.fs-label-wrap .fs-label:hover {
    box-shadow: inset 0px 0px 0px 2px rgba(54, 55, 60, 0.5);
    background-color: white
}

.fs-label-wrap .fs-label:active {
    box-shadow: inset 0px 0px 0px 2px #0373e6 !important
}

.fs-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    margin: auto;
    transition: ease-in 0.15s
}

.fs-open .fs-label {
    box-shadow: inset 0px 0px 0px 2px #0373e6 !important
}

.fs-dropdown {
    position: absolute;
    background-color: #fff;
    border-radius: 7px;
    box-shadow: 0px 8px 20px 0px rgba(55, 61, 76, 0.2), 0px 0px 5px 0px rgba(55, 61, 76, 0.15);
    width: 200px;
    padding: 5px;
    z-index: 1000
}

.fs-dropdown .fs-options {
    max-height: 200px;
    overflow: auto
}

.fs-search input {
    border: none !important;
    box-shadow: none !important;
    outline: none;
    padding: 6px 0;
    width: 100%
}

.fs-option, .fs-search, .fs-optgroup-label {
    padding: 8px 11px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 16px;
    cursor: default
}

.fs-option:last-child {
    border-bottom: none
}

.fs-search {
    padding: 0 8px
}

.fs-no-results {
    padding: 6px 8px
}

.fs-option {
    cursor: pointer
}

.fs-option:hover {
    background-color: rgba(131, 144, 185, 0.15);
    color: #0373E6 !important
}

.fs-option.disabled {
    opacity: 0.4;
    cursor: default;
    display: none
}

.fs-option.hl {
    background-color: #f5f5f5
}

.fs-wrap.multiple .fs-option {
    position: relative;
    padding-left: 30px
}

.fs-wrap.multiple .fs-checkbox {
    position: absolute;
    display: block;
    width: 30px;
    top: 0;
    left: 0;
    bottom: 0
}

.fs-wrap.multiple .fs-option .fs-checkbox i {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #aeaeae;
    border-radius: 2px;
    background-color: #fff
}

.fs-wrap.multiple .fs-option.selected .fs-checkbox i {
    background-color: #11a911;
    border-color: transparent;
    background-image: url("60a38930866570ae7908ca93dc2503345506ae64.png");
    background-repeat: no-repeat;
    background-position: center
}

.fs-optgroup-label {
    font-weight: bold;
    text-align: center;
    background-color: #f8f8f8
}

.hidden {
    display: none
}

td .fs-wrap {
    width: 100%;
    height: 48px;
    position: absolute;
    top: 0px;
    left: 0px
}

td .fs-wrap .fs-label-wrap {
    border: 0px;
    background-color: transparent;
    height: 48px;
    cursor: pointer
}

td .fs-wrap .fs-label-wrap .fs-label {
    padding: 19px 22px 17px 12px
}

td .fs-wrap .fs-label-wrap .fs-label::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f107';
    float: right;
    margin-right: -12px;
    color: #7e8186
}

td .fs-wrap .fs-label-wrap .fs-arrow {
    display: none
}

td .fs-default .fs-label {
    color: #70778a
}

.custom-checkbox2 {
    width: 100%;
    display: block
}

.custom-checkbox2 .btn {
    width: 100% !important;
    text-align: left;
    font-family: 'roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #36373c;
    line-height: 14px;
    transition: all 0s ease;
    white-space: inherit;
    padding: 8px 0px 8px 32px;
    height: inherit;
    margin: 0px !important;
    border-radius: 5px !important;
    box-shadow: none
}

.custom-checkbox2 .btn:hover {
    background-color: rgba(131, 144, 185, 0.15);
    box-shadow: none;
    outline: none !important
}

.custom-checkbox2 .btn::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    background-color: rgba(57, 75, 145, 0.1);
    left: 5px;
    top: 5px;
    border-radius: 3px
}

.custom-checkbox2 .btn:hover::before {
    border: 2px solid #0373E6;
    background-color: #fff
}

.custom-checkbox2 .btn.active::before {
    background-color: #0373E6;
    background-image: url("e0bcce44172055ef231ba50570af4f6bd9dc4f3d.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px
}

.check-delete {
    opacity: 0;
    position: absolute;
    font-size: 14px !important;
    right: 5px;
    top: 9px;
    cursor: pointer;
    color: rgba(54, 55, 60, 0.5) !important
}

.custom-control:hover .check-delete {
    opacity: 0.5
}

.custom-control:hover .check-delete:hover {
    opacity: 1;
    transform: scale(1.2)
}

.dropdown-item .check-delete {
    position: relative !important;
    float: right !important;
    margin-right: -12px;
    top: 1px
}

.dropdown-item:hover .check-delete {
    opacity: 0.5;
    float: right
}

.dropdown-item:hover .check-delete:hover {
    opacity: 1;
    transform: scale(1.2)
}

.btn-decrement, .btn-increment {
    background-color: #0373E6;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3);
    font-size: 18px;
    font-weight: 200;
    font-family: 'roboto', sans-serif;
    padding: 0px 16px;
    line-height: 42px
}

.btn-decrement:hover, .btn-increment:hover {
    background-color: #0c82fc !important
}

.btn-decrement {
    border-radius: 22px 0px 0px 22px
}

.btn-increment {
    border-radius: 0px 22px 22px 0px
}

.number-small .form-control {
    padding: 3px 10px;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 6px
}

.number-small .btn-decrement, .number-small .btn-increment {
    padding: 0px 12px;
    line-height: 30px;
    height: 30px;
    min-width: 20px !important
}

.number-small .btn-decrement {
    border-radius: 4px 0px 0px 4px
}

.number-small .btn-increment {
    border-radius: 0px 4px 4px 0px
}

input[type="time"]::-webkit-calendar-picker-indicator {
    background: none
}

.chung-timepicker * {
    box-sizing: border-box;
    color: #333;
    font-size: 14px;
    text-align: center
}

.chung-timepicker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    display: block;
    min-width: 160px;
    padding: 10px;
    margin: 2px 0 0;
    text-align: left;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 8px;
    box-shadow: 0px 8px 20px 0px rgba(55, 61, 76, 0.2), 0px 0px 5px 0px rgba(55, 61, 76, 0.15);
    background-color: #fff
}

.chung-timepicker:before {
    content: '';
    position: absolute;
    display: inline-block;
    left: 10px;
    top: -7px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ccc
}

.chung-timepicker:after {
    content: '';
    position: absolute;
    display: inline-block;
    left: 11px;
    top: -6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent
}

.chung-timepicker > .chung-timepicker-hours, .chung-timepicker > .chung-timepicker-minutes {
    vertical-align: top
}

.chung-timepicker table {
    width: 100%
}

.chung-timepicker .title {
    font-family: 'Poppins', sans-serif
}

.chung-timepicker .title:hover {
    cursor: auto;
    background: #fff
}

.chung-timepicker td:hover, .chung-timepicker th:hover {
    background: rgba(20, 40, 74, 0.15);
    cursor: pointer
}

.chung-timepicker-bottom .bottom-btn:hover {
    cursor: pointer;
    opacity: 0.8
}

.chung-timepicker td.active {
    background-color: #0373E6;
    color: #fff
}

.chung-timepicker td, .chung-timepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 0;
    padding: 5px 7px;
    position: relative
}

.chung-timepicker .icon-arrow-left {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url("glyphicons-halflings.png");
    background-position: -240px -96px;
    background-repeat: no-repeat
}

.chung-timepicker-bottom {
    margin-top: 5px
}

.chung-timepicker-bottom .bottom-btn {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    margin: 5px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    border: 0px solid rgba(0, 0, 0, 0.15);
    font-weight: 500;
    background-color: #F6F7FB
}

.chung-timepicker-hours td::before {
    content: ':';
    display: block;
    width: 4px;
    height: 10px;
    position: absolute;
    right: 3px
}

.chung-timepicker-minutes td::before {
    content: ':';
    display: block;
    width: 4px;
    height: 10px;
    position: absolute;
    left: 3px
}

.bottom-btn.js-confirm {
    color: white;
    background-color: #0373E6
}

.btn-group-perfiles {
    display: block
}

.btn-group-perfiles .btn {
    margin: 4px !important;
    padding: 16px 8px;
    width: calc(50% - 8px);
    float: left;
    box-shadow: inset 0px 0px 0px 2px rgba(33, 61, 113, 0.08);
    min-height: 52px !important;
    border-radius: 8px !important;
    white-space: normal;
    position: relative;
    height: inherit !important;
    background-color: white
}

.btn-group-perfiles .btn i.check {
    text-align: center;
    position: absolute !important;
    left: 10px;
    top: 10px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 16px !important;
    line-height: 22px !important;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.2s ease;
    color: white !important
}

.btn-group-perfiles .btn i.check.right {
    left: inherit !important;
    right: 10px !important
}

.btn-group-perfiles .btn img {
    margin-bottom: 8px;
    width: 72px;
    transition: all 0.2s ease
}

.btn-group-perfiles .btn p {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: #36373c;
    margin-bottom: 0px;
    transition: all 0.2s ease
}

.btn-group-perfiles .btn input[type=checkbox], .btn-group-perfiles .btn input[type=radio] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none
}

.btn-group-perfiles .btn:hover {
    box-shadow: inset 0px 0px 0px 2px #0373E6
}

.btn-group-perfiles .btn:hover p {
    color: #0373E6
}

.btn-group-perfiles .btn:hover img {
    transform: scale(1.1)
}

.btn-group-perfiles .btn.active {
    box-shadow: inset 0px 0px 0px 2px #0373E6;
    background-color: #0373E6
}

.btn-group-perfiles .btn.active p {
    color: white
}

.btn-group-perfiles .btn.active i.check {
    opacity: 1;
    transform: scale(1)
}

.btn-group-perfiles .btn.w-100 {
    margin-left: 0px !important;
    margin-right: 0px !important
}

.btn-group-perfiles.btn-group-perfiles-border .btn:hover {
    box-shadow: inset 0px 0px 0px 2px #0373E6
}

.btn-group-perfiles.btn-group-perfiles-border .btn:hover p {
    color: initial !important
}

.btn-group-perfiles.btn-group-perfiles-border .btn i.right {
    left: inherit !important;
    right: 10px
}

.btn-group-perfiles.btn-group-perfiles-border .btn.active {
    box-shadow: inset 0px 0px 0px 2px #0373E6;
    background-color: inherit
}

.btn-group-perfiles.btn-group-perfiles-border .btn.active p {
    color: initial !important
}

.btn-group-perfiles.btn-group-perfiles-border .btn.active i.check {
    opacity: 1;
    transform: scale(1);
    color: #0373E6 !important
}

.login-section {
    margin-bottom: 3rem
}

.login-section:last-child {
    margin-bottom: 0px
}

.btn-group-perfiles-list .btn {
    padding: 10px !important;
    min-height: 20px !important
}

.btn-group-perfiles-list .btn img {
    display: none
}

.btn-group-perfiles-list .btn p {
    margin: 0px
}

.sr-only, .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after, .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after, .bootstrap-datetimepicker-widget .btn[data-action="today"]::after, .bootstrap-datetimepicker-widget .picker-switch::after, .bootstrap-datetimepicker-widget table th.prev::after, .bootstrap-datetimepicker-widget table th.next::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.bootstrap-datetimepicker-widget table th.dow {
    font-size: 12px
}

.bootstrap-datetimepicker-widget {
    list-style: none
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    display: block;
    margin: 2px 0;
    padding: 4px;
    width: 300px
}

@media (min-width: 576px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em
    }
}

@media (min-width: 768px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em
    }
}

@media (min-width: 992px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em
    }
}

.bootstrap-datetimepicker-widget.dropdown-menu:before, .bootstrap-datetimepicker-widget.dropdown-menu:after {
    content: '';
    display: inline-block;
    position: absolute
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    top: -7px;
    left: 7px
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    top: -6px;
    left: 8px
}

.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ccc;
    border-top-color: rgba(0, 0, 0, 0.2);
    bottom: -7px;
    left: 6px
}

.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
    bottom: -6px;
    left: 7px
}

.bootstrap-datetimepicker-widget.dropdown-menu.float-right:before {
    left: auto;
    right: 6px
}

.bootstrap-datetimepicker-widget.dropdown-menu.float-right:after {
    left: auto;
    right: 7px
}

.bootstrap-datetimepicker-widget.dropdown-menu.wider {
    width: 16rem
}

.bootstrap-datetimepicker-widget .list-unstyled {
    margin: 0
}

.bootstrap-datetimepicker-widget a[data-action] {
    padding: 6px 0
}

.bootstrap-datetimepicker-widget a[data-action]:active {
    box-shadow: none
}

.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second {
    width: 54px;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0
}

.bootstrap-datetimepicker-widget button[data-action] {
    padding: 6px
}

.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
    content: "Increment Hours"
}

.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
    content: "Increment Minutes"
}

.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
    content: "Decrement Hours"
}

.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
    content: "Decrement Minutes"
}

.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
    content: "Show Hours"
}

.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
    content: "Show Minutes"
}

.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
    content: "Toggle AM/PM"
}

.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
    content: "Clear the picker"
}

.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
    content: "Set the date to today"
}

.bootstrap-datetimepicker-widget .picker-switch {
    text-align: center;
    font-size: 14px
}

.bootstrap-datetimepicker-widget .picker-switch::after {
    content: "Toggle Date and Time Screens"
}

.bootstrap-datetimepicker-widget .picker-switch td {
    padding: 0;
    margin: 0;
    height: auto;
    width: auto;
    line-height: inherit
}

.bootstrap-datetimepicker-widget .picker-switch td span {
    line-height: 2.5;
    height: 2.5em;
    width: 100%
}

.bootstrap-datetimepicker-widget table {
    width: 100%;
    margin: 0
}

.bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th {
    text-align: center;
    border-radius: 0.25rem
}

.bootstrap-datetimepicker-widget table th {
    height: 32px !important;
    text-transform: capitalize;
    line-height: 20px;
    width: 20px
}

.bootstrap-datetimepicker-widget table th.picker-switch {
    width: 145px
}

.bootstrap-datetimepicker-widget table th.disabled, .bootstrap-datetimepicker-widget table th.disabled:hover {
    background: none;
    color: #6c757d;
    cursor: not-allowed
}

.bootstrap-datetimepicker-widget table th.prev::after {
    content: "Previous Month"
}

.bootstrap-datetimepicker-widget table th.next::after {
    content: "Next Month"
}

.bootstrap-datetimepicker-widget table thead tr:first-child th {
    cursor: pointer;
    padding: 8px !important
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: #e9ecef
}

.bootstrap-datetimepicker-widget table td {
    height: 54px;
    line-height: 54px;
    width: 54px
}

.bootstrap-datetimepicker-widget table td.cw {
    font-size: .8em;
    height: 20px;
    line-height: 20px;
    color: #6c757d
}

.bootstrap-datetimepicker-widget table td.day {
    height: 20px;
    line-height: 20px;
    width: 20px;
    font-size: 13px
}

.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover {
    background: #e9ecef;
    cursor: pointer
}

.bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new {
    color: #bec2c9
}

.bootstrap-datetimepicker-widget table td.today {
    position: relative
}

.bootstrap-datetimepicker-widget table td.today:before {
    content: '';
    display: inline-block;
    border: solid transparent;
    border-width: 0 0 7px 7px;
    border-bottom-color: #007bff;
    border-top-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 4px;
    right: 4px
}

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #007bff;
    color: #fff
}

.bootstrap-datetimepicker-widget table td.active.today:before {
    border-bottom-color: #fff
}

.bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover {
    background: none;
    color: #6c757d;
    cursor: not-allowed
}

.bootstrap-datetimepicker-widget table td span {
    display: inline-block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    margin: 2px 1.5px;
    cursor: pointer;
    border-radius: 0.25rem
}

.bootstrap-datetimepicker-widget table td span:hover {
    background: #e9ecef
}

.bootstrap-datetimepicker-widget table td span.active {
    background-color: #007bff;
    color: #fff
}

.bootstrap-datetimepicker-widget table td span.old {
    color: #6c757d
}

.bootstrap-datetimepicker-widget table td span.disabled, .bootstrap-datetimepicker-widget table td span.disabled:hover {
    background: none;
    color: #6c757d;
    cursor: not-allowed
}

.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
    height: 27px;
    line-height: 27px
}

.input-group [data-toggle="datetimepicker"] {
    cursor: pointer
}

.pregunta-barra {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #f6f7fb;
    width: 60px;
    border-radius: 12px 0px 0px 12px
}

.pregunta-numero {
    height: 42px;
    width: 42px;
    display: block;
    border-radius: 6px;
    align-items: center !important;
    font-size: 16px;
    line-height: 42px;
    text-align: center;
    background-color: #29aaf3;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 600
}

.pregunta-grip {
    display: block;
    position: absolute;
    top: 0px;
    left: -30px;
    width: 30px;
    height: 50px;
    cursor: -webkit-grab;
    cursor: grab;
    padding-top: 15px
}

.pregunta-grip:active {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.icono-asignatura-drop {
    display: block;
    float: left;
    width: 36px;
    height: 36px;
    color: white;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px
}

.overflow-y {
    overflow-y: auto
}

.style-scroll::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: transparent
}

.style-scroll::-webkit-scrollbar {
    width: 6px;
    height: 8px;
    background-color: transparent
}

.style-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    width: 6px;
    background-color: #10182c33;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease
}

.style-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #10182c91
}

.dropdown-menu.style-scroll::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: transparent;
    margin: 8px 0px
}

.tarjeta.style-scroll::-webkit-scrollbar-track, .tarjeta-body.style-scroll::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: transparent;
    margin: 6px 0px
}

.tarjeta.style-scroll::-webkit-scrollbar-track, .tarjeta-body.style-scroll::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: transparent;
    margin: 6px 0px
}

textarea.form-control::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent
}

textarea.form-control::-webkit-scrollbar-track {
    width: 8px;
    margin: 6px 4px 0px 0px;
    background-color: transparent
}

textarea.form-control::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(54, 55, 60, 0.25);
    cursor: pointer
}

textarea.form-control::-webkit-scrollbar-thumb:hover {
    background-color: #0c82fc !important
}

textarea.form-control:hover::-webkit-scrollbar-thumb {
    background-color: #909296
}

textarea.form-control:focus::-webkit-scrollbar-thumb {
    background-color: #0373E6
}

.style-scroll-inv::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: transparent
}

.style-scroll-inv::-webkit-scrollbar {
    width: 0px;
    height: 8px;
    background-color: transparent
}

.style-scroll-inv::-webkit-scrollbar-thumb {
    border-radius: 0px;
    width: 0px;
    background-color: #cfd2da;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease
}

.style-scroll-inv::-webkit-scrollbar-thumb:hover {
    background-color: #8f929a
}

.chosen-results::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: transparent;
    margin: 8px 0px
}

.chosen-results::-webkit-scrollbar {
    width: 6px;
    height: 8px;
    background-color: transparent
}

.chosen-results::-webkit-scrollbar-thumb {
    border-radius: 10px;
    width: 6px;
    background-color: #cfd2da;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease
}

.chosen-results::-webkit-scrollbar-thumb:hover {
    background-color: #8f929a
}

.modal-content, .swal2-popup {
    border: 0px;
    border-radius: 20px !important;
    box-shadow: 0px 8px 20px 2px rgba(0, 0, 0, 0.1)
}

.modal-header {
    padding: 14px 20px;
    border-radius: 20px 20px 0px 0px;
    border-bottom: 0px solid;
    background-color: #F6F7FB;
    position: relative
}

.modal-menu {
    background-color: #F6F7FB
}

.modal-menu .tab-menu-lines {
    border-bottom: 2px solid rgba(54, 55, 60, 0)
}

.modal-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #36373c
}

.modal-header i {
    color: rgba(20, 40, 74, 0.15);
    margin-right: 10px;
    font-size: 24px;
    display: block;
    float: left;
    width: 25px;
    padding-top: 3px
}

.modal-header span.data i {
    float: inherit;
    font-size: 12px;
    display: inline-block;
    margin-right: 6px;
    width: 12px
}

.modal-header .close {
    position: absolute;
    right: 30px;
    top: 30px;
    display: block;
    background-color: rgba(20, 40, 74, 0.15);
    border-radius: 50%;
    padding: 0px;
    width: 32px;
    height: 32px;
    font-size: 18px;
    color: rgba(54, 55, 60, 0.75);
    text-shadow: none;
    opacity: 1;
    transition: all 0.2s ease
}

.modal-header .close:hover {
    background-color: #0373E6;
    color: #fff !important;
    opacity: 1 !important
}

.modal-header .close:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    outline: none
}

.modal-body {
    background-color: #FFF;
    padding: 24px 32px
}

.modal-footer {
    padding: 20px 24px;
    border-radius: 0px 0px 10px 10px;
    border-top: 0px solid;
    display: block;
    text-align: right
}

.modal-perso-ambito {
    padding: 10px;
    background-color: #d3d6df
}

.modal-perso-ambito h1 {
    font-size: 22px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #326ca9;
    padding: 10px 0px
}

.modal-perso-nucleo {
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    border: 5px solid #f4f5f9
}

.modal-perso-nucleo h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    display: block;
    width: 100%;
    padding: 12px 14px;
    background-color: #f4f5f9;
    border-radius: 8px 8px 0px 0px
}

.modal-perso-nucleo.bg-primary {
    border-color: #0373E6;
    background-color: white
}

.modal-perso-nucleo.bg-primary h2 {
    background-color: #0373E6;
    color: white
}

.modal-perso-nucleo.bg-violeta {
    border-color: #e20578;
    background-color: white
}

.modal-perso-nucleo.bg-violeta h2 {
    background-color: #e20578;
    color: white
}

.modal-perso-nucleo.bg-verde {
    border-color: #4cb911
}

.modal-perso-nucleo.bg-verde h2 {
    background-color: #4cb911;
    color: white
}

.modal-perso-nucleo.bg-amarillo {
    border-color: #eca307;
    background-color: white
}

.modal-perso-nucleo.bg-amarillo h2 {
    background-color: #eca307;
    color: white
}

.modal-perso-nucleo.bg-rojo {
    border-color: #E70441;
    background-color: white
}

.modal-perso-nucleo.bg-rojo h2 {
    background-color: #E70441;
    color: white
}

.modal-perso-nucleo.bg-morado {
    border-color: #7e2fbd;
    background-color: white
}

.modal-perso-nucleo.bg-morado h2 {
    background-color: #7e2fbd;
    color: white
}

.modal-perso-nucleo.bg-azul {
    border-color: #2437b1;
    background-color: white
}

.modal-perso-nucleo.bg-azul h2 {
    background-color: #2437b1;
    color: white
}

.modal-perso-nucleo.bg-celeste {
    border-color: #29aaf3;
    background-color: white
}

.modal-perso-nucleo.bg-celeste h2 {
    background-color: #29aaf3;
    color: white
}

.modal-perso-nucleo.bg-lima {
    border-color: #afbf15;
    background-color: white
}

.modal-perso-nucleo.bg-lima h2 {
    background-color: #afbf15;
    color: white
}

.modal-perso-nucleo.bg-naranja {
    border-color: #ea5c0d;
    background-color: white
}

.modal-perso-nucleo.bg-naranja h2 {
    background-color: #ea5c0d;
    color: white
}

.modal-perso-nucleo.bg-turquesa {
    border-color: #058a96;
    background-color: white
}

.modal-perso-nucleo.bg-turquesa h2 {
    background-color: #058a96;
    color: white
}

.modal-xl {
    width: calc(100% - 40px) !important;
    max-width: 1500px !important
}

.right .modal-xs, .left .modal-xs {
    width: 100px !important
}

.right .modal-sm, .left .modal-sm {
    width: 300px !important
}

.right .modal-lg, .left .modal-lg {
    width: 800px !important;
    max-width: 800px !important
}

.modal-backdrop ~ .modal-backdrop {
    z-index: 1051
}

.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop {
    z-index: 1052
}

.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop {
    z-index: 1053
}

.modal-backdrop.show {
    opacity: .5 !important;
    background-color: #60656d !important
}

.fade {
    opacity: 0;
    transition: opacity .15s linear
}

.fade.show {
    opacity: 1
}

.modal.right .modal-dialog {
    position: absolute;
    top: 0 !important;
    right: -600px;
    margin: 0;
    max-width: 600px;
    width: 600px;
    transition: all .35s ease !important
}

.modal.right.show .modal-dialog {
    top: 0px !important;
    right: 0px !important
}

.modal.right.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, 0) !important
}

.modal.left .modal-content, .modal.right .modal-content {
    min-height: 100vh;
    border: 0;
    border-radius: 0px !important
}

.modal-sidebar .modal-body {
    height: 100%;
    overflow-y: auto
}

.modal-sidebar .modal-body.with-footer {
    height: calc(100% - 90px)
}

.modal.left .modal-dialog {
    position: absolute;
    top: 0 !important;
    left: -600px;
    margin: 0;
    max-width: 600px;
    width: 600px;
    transition: all .35s ease !important
}

.modal.left.show .modal-dialog {
    top: 0px !important;
    left: 0px !important
}

.modal.left.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, 0) !important
}

.left .modal-header, .right .modal-header {
    border-radius: 0px
}

.left .modal-footer, .right .modal-footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #F6F7FB
}

.modal-fixed {
    overflow-y: hidden !important
}

.modal.fade.right.in.modal-fixed .modal-dialog, .modal.fade.left.in.modal-fixed .modal-dialog {
    height: 100%
}

.modal-fixed.right .modal-header, .modal-fixed.left .modal-header {
    position: fixed !important;
    top: 0px;
    z-index: 99;
    width: 100%
}

.modal-fixed.right .modal-footer, .modal-fixed.left .modal-footer {
    position: fixed !important;
    bottom: 0px;
    border-radius: 0px
}

.modal-fixed.modal.right .modal-content, .modal-fixed.modal.left .modal-content {
    height: 100%
}

.modal-fixed.modal.right .modal-content .tarjeta-body, .modal-fixed.modal.left .modal-content .tarjeta-body {
    padding: 24px 32px 120px 32px !important
}

.modal-video {
    width: 854px !important;
    max-width: 854px !important
}

.modal-video .modal-body {
    padding: 0px;
    height: 480px;
    border-radius: 0px 0px 12px 12px
}

.modal-video .modal-body iframe {
    border-radius: 0px 0px 11px 11px
}

.modal-popup {
    text-align: center
}

.modal-popup .modal-imagen {
    border-radius: 20px 20px 0px 0px;
    background-color: rgba(54, 55, 60, 0.1)
}

.modal-popup .modal-imagen img {
    width: 100%;
    border-radius: 20px 20px 0px 0px
}

.modal-popup .modal-textos {
    border-radius: 0px 0px 10px 10px;
    padding: 20px 30px 30px 30px;
    position: relative
}

.modal-popup .modal-textos h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 26px !important;
    line-height: 30px;
    margin-bottom: 20px
}

.modal-popup .modal-textos p {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px !important;
    line-height: 20px;
    margin-bottom: 20px;
    opacity: 0.8
}

.modal-popup .modal-imagen button.close {
    position: absolute;
    right: 8px;
    top: 8px;
    display: block;
    background-color: rgba(20, 40, 74, 0.15);
    border-radius: 50%;
    padding: 0px;
    width: 32px;
    height: 32px;
    font-size: 18px;
    color: rgba(54, 55, 60, 0.75);
    text-shadow: none;
    opacity: 1;
    transition: all 0.2s ease
}

.modal-popup .modal-imagen button.close:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: white
}

.swal2-popup {
    width: 500px !important;
    padding: 16px 32px
}

.swal2-container.swal2-shown, .swal2-container.swal2-backdrop-show {
    background-color: rgba(96, 101, 109, 0.5) !important
}

.swal2-popup .swal2-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 16px;
    color: #36373c
}

.swal2-popup #swal2-content {
    font-size: 14px;
    font-family: 'roboto', sans-serif;
    font-weight: 400;
    line-height: 19px;
    color: #36373c
}

button.swal2-styled {
    transition: all 0.2s ease !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700;
    color: #fff;
    height: 42px !important;
    padding: 10px 20px !important;
    border-radius: 22px !important;
    border: 0px !important;
    position: relative !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0px 7px 10px -3px rgba(0, 0, 0, 0.24)
}

.swal2-confirm {
    transition: all 0.2s ease !important;
    background-color: #0373E6 !important;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3) !important;
    float: right !important
}

.swal2-confirm:hover {
    background-color: #0c82fc !important;
    background-image: none !important
}

.swal2-cancel {
    transition: all 0.2s ease !important;
    color: rgba(54, 55, 60, 0.75) !important;
    background-color: rgba(20, 40, 74, 0.15) !important;
    font-weight: 500 !important;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.08) !important
}

.swal2-cancel:hover {
    color: #0373E6 !important;
    background-color: rgba(20, 40, 74, 0.08) !important;
    background-image: none !important
}

.modal-carousel-tips .carousel-caption {
    right: 0;
    left: 0;
    bottom: 0;
    padding-left: 32px;
    padding-right: 32px;
    text-shadow: 0px 1px rgba(0, 0, 0, 0.16)
}

.modal-carousel-tips .carousel-indicators {
    bottom: inherit;
    top: 16px
}

.modal-carousel-tips .carousel-indicators li {
    cursor: pointer;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    margin-left: 5px
}

.table {
    font-size: 12px;
    margin-bottom: 0px
}

@media (max-width: 1280px) {
    .table {
        font-size: 11px
    }
}

.table td, .table th {
    padding: .5rem .75rem;
    vertical-align: middle;
    border-top: 0px solid #dee2e6;
    line-height: 13px;
    position: relative
}

.table thead th {
    height: 25px;
    vertical-align: middle;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 12px;
    border-bottom: 1px solid rgba(13, 40, 68, 0.1)
}

@media (max-width: 1280px) {
    .table thead th {
        font-size: 10px;
        line-height: 11px
    }
}

.table-lined tr td, .table-lined tr th {
    border-bottom: 1px solid #dee2e6
}

.table-lined.table-span tr th {
    border-right: 1px solid #dee2e6
}

.table-lined tr:last-child td {
    border-bottom: 0px solid #dee2e6
}

.table-lined-rowspan tr:last-child td {
    border-bottom: 1px solid #dee2e6
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(84, 103, 158, 0.05)
}

.tarjeta-color .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(11, 22, 53, 0.07)
}

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

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

.table-hover tbody tr:hover {
    background-color: rgba(131, 144, 185, 0.15) !important
}

.dataTables_wrapper .dataTables_filter {
    display: none
}

.table .thead-gray th {
    background-color: #F6F7FB
}

.table-card {
    border-collapse: separate !important;
    border-spacing: 0 12px !important
}

.table-card thead th {
    border-bottom: none !important;
    border-radius: 8px
}

.table-card tbody tr {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
    border-radius: 8px
}

.table-card tbody tr td {
    background-color: white
}

.table-card tbody tr td:first-child {
    border-radius: 8px 0px 0px 8px
}

.table-card tbody tr td:last-child {
    border-radius: 0px 8px 8px 0px
}

.table-rounded-6 thead tr:first-child th:first-child {
    border-top-left-radius: 6px
}

.table-rounded-6 thead tr:first-child th:last-child {
    border-top-right-radius: 6px
}

.table-rounded-6 tbody tr:last-child td:first-child {
    border-bottom-left-radius: 6px
}

.table-rounded-6 tbody tr:last-child td:last-child {
    border-bottom-right-radius: 6px
}

.table-rounded-8 thead tr:first-child th:first-child {
    border-top-left-radius: 8px
}

.table-rounded-8 thead tr:first-child th:last-child {
    border-top-right-radius: 8px
}

.table-rounded-8 tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px
}

.table-rounded-8 tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px
}

.table-rounded-10 thead tr:first-child th:first-child {
    border-top-left-radius: 10px
}

.table-rounded-10 thead tr:first-child th:last-child {
    border-top-right-radius: 10px
}

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

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

.table-rounded-12 thead tr:first-child th:first-child {
    border-top-left-radius: 12px
}

.table-rounded-12 thead tr:first-child th:last-child {
    border-top-right-radius: 12px
}

.table-rounded-12 tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px
}

.table-rounded-12 tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px
}

table.dataTable thead > tr > th:hover {
    background-color: rgba(74, 88, 179, 0.07);
    color: #0373E6
}

table.dataTable {
    margin-top: -1px !important;
    margin-bottom: -1px !important
}

table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting {
    padding-right: 15px !important
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
    right: 0.3em !important;
    content: "\25b2" !important;
    top: calc(50% - 9px);
    transform: scaleY(0.8);
    font-size: 8px
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    right: 0.3em !important;
    content: "\25bc" !important;
    bottom: calc(50% - 11px);
    transform: scaleY(0.8);
    font-size: 8px
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
    opacity: 0.2
}

table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:after {
    color: #0373E6;
    opacity: 1
}

.align-bottom th, .align-bottom td {
    vertical-align: bottom !important
}

thead .align-bottom .sorting:before, thead .align-bottom .sorting_asc:before, thead .align-bottom .sorting_desc:before, thead .align-bottom .sorting_asc_disabled:before, thead .align-bottom .sorting_desc_disabled:before {
    top: inherit !important;
    bottom: 11px !important
}

thead .align-bottom .sorting:after, thead .align-bottom .sorting_asc:after, thead .align-bottom .sorting_desc:after, thead .align-bottom .sorting_asc_disabled:after, thead .align-bottom .sorting_desc_disabled:after {
    bottom: 5px !important
}

table.dataTable tbody tr td:first-child {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 11px
}

table.table-bordered.dataTable {
    border: 0px !important
}

table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
    border-bottom-width: 1px !important
}

.table-bordered-0 {
    border: 0px !important
}

.table-bordered-2 td, .table-bordered-2 th {
    border: 1px solid #fff;
    border-bottom: 1px solid #fff !important
}

.table-reorder tbody tr:hover {
    background-image: url("grip.png");
    background-repeat: no-repeat;
    background-position: 5px center
}

.table-reorder tbody tr td:first-child {
    cursor: grab;
    cursor: -webkit-grab
}

.tabla-invisible {
    margin: 0px
}

.tabla-invisible tbody tr {
    border-bottom: 1px solid #0000000f
}

.tabla-invisible td {
    padding: 0px
}

.tabla-invisible .form-control {
    background-color: transparent;
    box-shadow: none;
    border: 0px solid
}

.tabla-invisible .form-control:hover {
    background-color: #31384812
}

.tabla-invisible .form-control:focus {
    background-color: #31384812;
    box-shadow: 0px 0px 0px 1px #e70441
}

div#data-table-1_length {
    display: none
}

div.dataTables_wrapper div.dataTables_paginate {
    float: left;
    margin-top: 20px;
    margin-bottom: 10px
}

ul.pagination {
    display: inline-block
}

.pagination li {
    float: left
}

.page-item.disabled .page-link {
    color: #c7ced4
}

.page-link {
    background-color: #f6f7fa;
    border: 0px solid #dee2e6;
    font-size: 12px;
    border-radius: 3px;
    margin: 0px 1px
}

.page-item.active .page-link {
    background-color: #0373E6;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3)
}

table.dataTable.table-notas tbody tr td:nth-child(1), table.dataTable.table-notas tbody tr td:nth-child(2) {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 11px;
    padding: 4px .75rem
}

table.dataTable.table-notas tbody tr:nth-of-type(5n) td {
    box-shadow: 1px 0px 0px rgba(54, 55, 60, 0.23), 0px 2px 0px rgba(54, 55, 60, 0.3) !important
}

table.dataTable.table-notas td.hover {
    background-color: rgba(131, 144, 185, 0.22) !important
}

.table-hover.table-notas tbody tr:hover {
    background-color: rgba(131, 144, 185, 0) !important
}

.table-notas td, .table-notas th {
    box-shadow: 1px 0px rgba(54, 55, 60, 0.23)
}

.DTFC_LeftBodyLiner table tbody, .DTFC_RightWrapper table tbody {
    box-shadow: 3px 3px 20px #000
}

.DTFC_RightBodyLiner tr td {
    font-family: 'roboto', sans-serif !important
}

.DTFC_RightWrapper tr {
    font-weight: 800;
    text-align: center
}

.DTFC_LeftHeadWrapper {
    box-shadow: 8px 4px 18px -10px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    z-index: +1
}

.DTFC_RightHeadWrapper {
    box-shadow: -12px 4px 18px -10px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    z-index: +1;
    border-left: 1px solid #d7dbdf
}

.DTFC_LeftBodyWrapper {
    box-shadow: 4px 0px 18px 0px rgba(0, 0, 0, 0.1)
}

.DTFC_RightBodyWrapper {
    box-shadow: -6px 0px 18px 0px rgba(0, 0, 0, 0.1);
    border-left: 1px solid #c9cbce
}

.table-notas tbody tr td.highlight {
    background-color: rgba(131, 144, 185, 0.1) !important
}

.dataTables_scrollHeadInner {
    padding-right: 27px !important
}

.dataTables_scrollHead {
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1)
}

table.dataTable.table-notas thead th {
    border-bottom: 1px solid #c2c3c4
}

table.dataTable.table-notas td {
    padding: 0px;
    height: 32px;
    position: relative
}

span.nota-title {
    width: 40px;
    display: block
}

.table-notas tbody td i {
    position: absolute;
    margin: 0px;
    top: 11px;
    right: 8px;
    transform: scaleX(0.8);
    font-size: 10px
}

.table-notas tr.retirado td, tr.retirado td input {
    color: #36373c57 !important
}

.table-recepcion i {
    margin-right: 5px
}

td .fa-apple {
    color: rgba(54, 55, 60, 0.25);
    font-size: 20px;
    margin-right: 5px
}

td .fa-android {
    color: #afbf15;
    font-size: 20px;
    margin-right: 5px
}

td .fa-sms {
    color: #505052;
    font-size: 20px;
    margin-right: 5px
}

span.recepcion-estado {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 11px !important
}

span.recepcion-estado.leido {
    color: #2EAF00
}

span.recepcion-estado.recibido {
    color: rgba(54, 55, 60, 0.5)
}

span.recepcion-estado.enviado {
    color: rgba(54, 55, 60, 0.5)
}

.obs-buena, .obs-mala, .obs-cero {
    margin: 0px
}

.obs-cero {
    color: rgba(54, 55, 60, 0.25)
}

.obs-buena {
    font-weight: bolder;
    color: #2EAF00
}

.obs-mala {
    font-weight: bolder;
    color: #D80727
}

.table-personalidad {
    margin-top: 20px
}

.table-personalidad td {
    padding: .2rem .75rem
}

.table-personalidad p.area {
    margin: 0px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700
}

.table-asistencia tr.retirado td {
    background-color: rgba(75, 120, 214, 0.3)
}

.table-asistencia tr td.asis-pres {
    background-image: url("icon_asist_pres.png");
    background-position: center;
    background-repeat: no-repeat
}

.table-asistencia tr td.asis-aus {
    background-image: url("icon_asist_aus.png");
    background-position: center;
    background-repeat: no-repeat
}

.table-asistencia tr td.asis-no {
    background-image: url("icon_asist_no.png");
    background-position: center;
    background-repeat: no-repeat
}

.table-asistencia tr td.asis-ret {
    background-image: url("icon_asist_ret.png");
    background-position: center;
    background-repeat: no-repeat
}

.table-asistencia tr.retirado td {
    background-color: rgba(75, 120, 214, 0.3)
}

.table.horario thead th {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding: 14px 8px
}

span.promedio-block {
    display: block;
    color: #fff;
    width: 30px;
    height: 30px !important;
    border-radius: 4px;
    font-weight: 800;
    padding-top: 10px;
    text-align: center
}

a.alumno-lista, div.alumno-lista {
    height: 32px;
    display: block;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px;
    color: inherit
}

a.alumno-lista img, div.alumno-lista img {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    box-shadow: 0px 0px 0px 0px #0373E6;
    transition: all 0.2s ease
}

a.alumno-lista:hover {
    color: #0373E6 !important
}

a.alumno-lista:hover img {
    box-shadow: 0px 0px 0px 2px #0373E6
}

span.lista-nombre, span.lista-rut {
    height: 14px !important;
    font-size: 12px;
    line-height: 12px;
    display: block !important;
    float: left;
    width: calc(100% - 36px);
    min-width: 100px;
    margin-top: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: capitalize
}

span.lista-nombre.retirado {
    text-decoration: line-through;
    color: #E70441
}

@media (max-width: 1280px) {
    span.lista-nombre {
        font-size: 11px;
        line-height: 12px
    }
}

span.lista-nombre.lista2, span.lista-rut.lista2 {
    width: 130px
}

span.lista-nombre {
    font-family: 'Poppins', sans-serif;
    font-weight: 600
}

span.lista-rut {
    font-family: 'roboto', sans-serif;
    font-weight: 500;
    font-size: 11px;
    opacity: 0.6
}

.cifra-link {
    display: inline-block;
    background-color: #e5e8ef;
    padding: 6px 8px;
    border-radius: 4px
}

.cifra-link:hover {
    color: #fff !important;
    background-color: #0373E6
}

.cifra-link:hover span {
    color: #fff !important;
    transform: all 0.2s ease
}

.table-overtab {
    text-align: center;
    background-color: #ffffffa6;
    padding: 10px;
    font-size: 13px;
    border-radius: 10px 10px 0px 0px
}

.table-monday thead th {
    border-bottom: 1px solid #d7dae2
}

.table-monday tbody {
    border: 1px solid #d7dae2
}

.table-monday tbody tr {
    border-bottom: 1px solid #d7dae2
}

.table-monday tbody td {
    border-left: 1px solid #eef0f3;
    height: 48px
}

.table-monday .btn-pie-informe {
    margin: 0px
}

.table-monday2 thead tr {
    border-bottom: 3px solid white
}

.table-monday2 thead th:first-child, .table-monday2 thead th:nth-child(2) {
    border-left: 0px solid white
}

.table-monday2 tbody tr {
    background-color: #eef0f3;
    border-bottom: 3px solid white
}

.table-monday2 tbody tr:hover td {
    background-color: rgba(20, 40, 74, 0.05)
}

.table-monday2 tbody td {
    border-left: 1px solid white;
    height: 48px
}

.table-monday2 tbody td:first-child, .table-monday2 tbody td:nth-child(2) {
    border-left: 0px solid white
}

.table-monday2 tbody tr.error-row td {
    background-color: #f9dfdf
}

.table-monday2 tbody tr.error-row:hover td {
    background-color: #f9dfdf
}

.table-monday2 .btn-pie-informe {
    margin: 0px
}

.table-spaced {
    border-collapse: inherit !important;
    border-spacing: 2px !important
}

.table-spaced thead th {
    border-bottom: 0px solid
}

.table-noframe {
    margin: -1px;
    width: calc(100% + 3px)
}

.fila-roja {
    background-color: #e9002633
}

.fila-amarilla {
    background-color: #ffc10730
}

.fila-verde {
    background-color: #00bd5838
}

.table-planificacion-div {
    position: relative;
    overflow: auto;
    white-space: nowrap
}

.table-planificacion {
    width: 100%;
    min-height: 268px !important
}

.table-planificacion tbody tr:hover {
    background-color: #8390b94a !important
}

.table-planificacion .first-col {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    left: 0px
}

.table-planificacion .sticky-col {
    position: -webkit-sticky;
    position: sticky !important;
    z-index: 1;
    background-color: #e2e5ef;
    box-shadow: 2px 0px white
}

.table-planificacion-utp {
    width: 100%
}

.table-planificacion-utp td, .table-planificacion-utp th {
    box-shadow: inset -1px -1px #cdd4d9 !important
}

.table-planificacion-utp th {
    border-bottom: 0px !important
}

.table-planificacion-utp .first-col {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    left: 0px
}

.table-planificacion-utp .second-col {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    left: 280px
}

.table-planificacion-utp .sticky-col {
    position: -webkit-sticky;
    position: sticky !important;
    z-index: 1;
    background-color: #e5eaf1;
    box-shadow: 1px 0px black
}

.bg-tr-rojo {
    background-color: #c5638b30 !important
}

.footer {
    background-image: url("encabezado_sombra.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 18px;
    padding: 24px 0px;
    margin-top: 43px
}

.footer i {
    display: block;
    width: 46px;
    height: 46px;
    background-color: rgba(54, 55, 60, 0.15);
    color: rgba(54, 55, 60, 0.5);
    font-size: 24px;
    text-align: center;
    padding-top: 11px;
    border-radius: 50%;
    float: left
}

.footer-info {
    float: left;
    padding-left: 16px
}

.footer-info p {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 0px;
    margin-top: 6px;
    line-height: 12px
}

.footer-info span {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 18px
}

.footer-lite {
    background-image: url("encabezado_sombra.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 18px
}

.tarjeta.evaluacion .tarjeta-header {
    font-weight: 600
}

.tarjeta.evaluacion .tarjeta-header span {
    font-weight: 600;
    float: left;
    display: block;
    background-color: #d6d9e0;
    min-width: 24px;
    width: 21px;
    height: 24px;
    text-align: center;
    border-radius: 5px;
    padding-top: 4px;
    margin-right: 10px;
    margin-top: -3px;
    margin-left: -6px
}

.vof .form-control {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0px 10px;
    float: left;
    margin-top: -4px;
    margin-right: 8px
}

ul.vof {
    list-style: none
}

ul.vof li {
    position: relative
}

.progress {
    overflow: inherit !important
}

.progress-bar {
    border-radius: 12px;
    box-shadow: 0px 5px 8px -2px rgba(3, 115, 230, 0.3)
}

.progress-chico {
    background-color: #0f1c351f;
    width: calc(100% - 40px);
    height: 10px;
    border-radius: 12px;
    float: left;
    margin-right: 5px;
    margin-top: 2px
}

.progress-suma div:first-child {
    border-radius: 12px 0 0 12px !important
}

.progress-suma div:last-child {
    border-radius: 0 12px 12px 0 !important
}

.progress-60 {
    width: calc(100% - 60px)
}

.progress-xs {
    background-color: #4d576b1f;
    width: calc(100% - 40px);
    height: 6px;
    border-radius: 12px;
    float: left;
    margin-right: 5px;
    margin-top: 2px
}

.progress-xxs {
    background-color: #4d576b1f;
    width: calc(100% - 40px);
    height: 3px;
    border-radius: 12px;
    float: left;
    margin-right: 5px;
    margin-top: 2px
}

.progress-bg-1 {
    background-color: #1ccc44
}

.progress-bg-2 {
    background-color: #d9dc02
}

.progress-bg-3 {
    background-color: #f37b00
}

.progress-bg-4 {
    background-color: #dc0000
}

.progress-bar.bg-secondary {
    box-shadow: 0px 5px 8px -2px rgba(20, 40, 74, 0.3)
}

.progress-bar.bg-rojo {
    box-shadow: 0px 5px 8px -2px rgba(231, 4, 65, 0.3)
}

.progress-bar.bg-verde {
    box-shadow: 0px 5px 8px -2px rgba(76, 185, 17, 0.3)
}

.progress-bar.bg-azul {
    box-shadow: 0px 5px 8px -2px rgba(36, 55, 177, 0.3)
}

.progress-bar.bg-amarillo {
    box-shadow: 0px 5px 8px -2px rgba(236, 163, 7, 0.3)
}

.progress-bar.bg-violeta {
    box-shadow: 0px 5px 8px -2px rgba(226, 5, 120, 0.3)
}

.progress-bar.bg-cian {
    box-shadow: 0px 5px 8px -2px rgba(92, 216, 214, 0.3)
}

.progress-bar.bg-celeste {
    box-shadow: 0px 5px 8px -2px rgba(41, 170, 243, 0.3)
}

.progress-bar.bg-lima {
    box-shadow: 0px 5px 8px -2px rgba(175, 191, 21, 0.3)
}

.progress-bar.bg-naranja {
    box-shadow: 0px 5px 8px -2px rgba(234, 92, 13, 0.3)
}

.progress-bar.bg-morado {
    box-shadow: 0px 5px 8px -2px rgba(126, 47, 189, 0.3)
}

.progress-bar.bg-mostaza {
    box-shadow: 0px 5px 8px -2px rgba(175, 151, 1, 0.3)
}

.progress-bar.bg-burdeo {
    box-shadow: 0px 5px 8px -2px rgba(154, 6, 49, 0.3)
}

.progress-bar.bg-cafe {
    box-shadow: 0px 5px 8px -2px rgba(134, 81, 52, 0.3)
}

.progress-bar.bg-turquesa {
    box-shadow: 0px 5px 8px -2px rgba(5, 138, 150, 0.3)
}

.progress-bar.bg-grafito {
    box-shadow: 0px 5px 8px -2px rgba(80, 80, 82, 0.3)
}

.progress-bar.bg-exito {
    box-shadow: 0px 5px 8px -2px rgba(46, 175, 0, 0.3)
}

.progress-bar.bg-alerta {
    box-shadow: 0px 5px 8px -2px rgba(236, 155, 7, 0.3)
}

.progress-bar.bg-peligro {
    box-shadow: 0px 5px 8px -2px rgba(216, 7, 39, 0.3)
}

.progress-bar.bg-primary {
    box-shadow: 0px 5px 8px -2px rgba(3, 115, 230, 0.3)
}

.progress-bar.bg-per100 {
    background-color: #2EAF00;
    box-shadow: 0px 5px 8px -2px rgba(46, 175, 0, 0.3)
}

.progress-bar.bg-per90 {
    background-color: #53AC02;
    box-shadow: 0px 5px 8px -2px rgba(83, 172, 2, 0.3)
}

.progress-bar.bg-per80 {
    background-color: #79A702;
    box-shadow: 0px 5px 8px -2px rgba(121, 167, 2, 0.3)
}

.progress-bar.bg-per70 {
    background-color: #9FA405;
    box-shadow: 0px 5px 8px -2px rgba(159, 164, 5, 0.3)
}

.progress-bar.bg-per60 {
    background-color: #C59F05;
    box-shadow: 0px 5px 8px -2px rgba(197, 159, 5, 0.3)
}

.progress-bar.bg-per50 {
    background-color: #EC9B07;
    box-shadow: 0px 5px 8px -2px rgba(236, 155, 7, 0.3)
}

.progress-bar.bg-per40 {
    background-color: #E7770F;
    box-shadow: 0px 5px 8px -2px rgba(231, 119, 15, 0.3)
}

.progress-bar.bg-per30 {
    background-color: #E35317;
    box-shadow: 0px 5px 8px -2px rgba(227, 83, 23, 0.3)
}

.progress-bar.bg-per20 {
    background-color: #DD2D1F;
    box-shadow: 0px 5px 8px -2px rgba(221, 45, 31, 0.3)
}

.progress-bar.bg-per10 {
    background-color: #D80727;
    box-shadow: 0px 5px 8px -2px rgba(216, 7, 39, 0.3)
}

@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 1
} .pie {
      --p: 10;
      --b: 2px;
      --c: darkred;
      --w: 32px;
      width: var(--w);
      aspect-ratio: 1;
      position: relative;
      display: inline-grid;
      margin: 2px;
      place-content: center;
      font-size: 9px;
      border-radius: 50%
  }

.pie-torta {
    background-color: rgba(33, 61, 113, 0.08)
}

.pie-dona-2 {
    box-shadow: inset 0px 0px 0px 2px rgba(33, 61, 113, 0.08)
}

.pie-dona-6 {
    box-shadow: inset 0px 0px 0px 6px rgba(33, 61, 113, 0.08)
}

.pie span {
    z-index: 1
}

.pie:before, .pie:after {
    content: "";
    position: absolute;
    border-radius: 50%
}

.pie:before {
    inset: 0;
    background: radial-gradient(farthest-side, var(--c) 98%, rgba(0, 0, 0, 0)) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p) * 1%), rgba(0, 0, 0, 0) 0);
    -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(99% - var(--b)), #000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(99% - var(--b)), #000 calc(100% - var(--b)))
}

.pie:after {
    inset: calc(50% - var(--b) / 2);
    background: var(--c);
    transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2))
}

.animate {
    -webkit-animation: p 1s .5s both;
    animation: p 1s .5s both
}

.no-round:before {
    background-size: 0 0, auto
}

.pie-mini:before {
    border: 2px solid #696a6e
}

.no-round:after {
    content: none
}

@-webkit-keyframes p {
    from {
        --p: 0
    }
}

@keyframes p {
    from {
        --p: 0
    }
}

.fc button {
    padding: 0px 12px;
    box-shadow: none;
    text-shadow: none;
    height: 32px !important;
    font-size: 12px !important;
    text-transform: capitalize
}

.fc-state-default {
    border: 0px solid;
    background-color: #dadee4;
    color: #6a6e75;
    background-image: none
}

.fc-state-default:hover {
    background-color: #ced2d8 !important
}

.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active {
    color: #fff;
    background-color: #0373E6 !important;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3)
}

.fc-toolbar .fc-state-active:hover, .fc-toolbar .ui-state-active:hover {
    background-color: #0c82fc !important
}

.fc-state-default.fc-corner-left {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}

.fc-state-default.fc-corner-right {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

.fc-toolbar h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    text-transform: capitalize
}

.fc-toolbar.fc-header-toolbar {
    margin-bottom: 0px;
    padding: 20px 20px 12px 20px
}

#calendar thead th {
    background-color: #cfd7e438;
    font-family: 'Poppins', sans-serif;
    color: #a3a6ab;
    font-size: 12px;
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    text-transform: capitalize
}

.fc-other-month {
    background-color: #eff3f780
}

.fc button .fc-icon {
    top: -.15em
}

.fc table {
    width: calc(100% + 1px)
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    float: left;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding: 0px;
    border-radius: 50%;
    width: 28px;
    line-height: 28px;
    height: 28px;
    text-align: center;
    display: block
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number:hover {
    background-color: #F4F6F9
}

.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
    border-color: #e5e8ec
}

.fc tr td:first-child {
    border-left: 0px
}

.fc tr td:last-child {
    border-right: 0px
}

.fc-widget-content {
    border-bottom: 0px !important
}

.fc-event, .fc-event-dot {
    background-color: #cc0369;
    box-shadow: 0px 5px 10px -3px rgba(154, 13, 78, 0.61)
}

.fc-event:hover, .fc-event-dot:hover {
    background-color: #ea0d7d
}

.fc-day-grid-event {
    margin: 1px 5px 0
}

span.fc-time {
    font-weight: 600 !important;
    margin-right: 1px
}

span.fc-time::after {
    content: '-';
    margin-left: 4px
}

.fc-event {
    position: relative;
    display: block;
    font-size: .85em;
    line-height: 1.3;
    border-radius: 3px;
    border: 0px solid #3a87ad;
    color: #fff
}

.fc-content {
    color: #fff;
    font-size: 12px;
    padding: 3px 4px
}

.fc-content-skeleton table tbody tr:last-child .fc-event {
    margin-bottom: 5px !important
}

.agenda-profesional {
    background-color: #cc0369;
    border-radius: 3px;
    padding: 4px 12px 4px 12px;
    position: relative;
    height: 42px;
    margin-bottom: 4px
}

.agenda-profesional i {
    position: absolute;
    font-size: 24px;
    left: 10px;
    color: #00000057;
    top: 9px
}

.cal-contador {
    display: inline-block;
    text-align: center;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    background-color: #fff;
    position: absolute;
    right: 10px;
    top: 10px
}

.cal-profesional {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    width: 100%;
    display: block;
    font-size: 13px;
    color: #fff;
    line-height: 13px;
    margin-top: 4px;
    margin-bottom: -6px
}

.cal-cargo {
    font-size: 11px;
    color: #ffffffa3
}

.simbologia-frame {
    max-height: 400px;
    overflow-y: scroll;
    padding: 4px
}

.fc-title {
    text-transform: capitalize
}

.remitente {
    padding-bottom: 12px;
    margin-bottom: 16px !important
}

.avatar-letra {
    display: block;
    width: 36px;
    height: 36px;
    background-color: #d4d8e1;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-family: 'quicksand', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 36px;
    float: left;
    margin-right: 12px
}

.remitente-info {
    display: inline-block;
    float: left
}

.remitente-nombre {
    font-family: 'quicksand', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #252a2d;
    margin-bottom: 0px
}

.remitente-fecha {
    font-size: 12px;
    font-weight: 400;
    color: #a3a5af;
    margin-bottom: 0px
}

.tarjeta-aula {
    width: 350px;
    float: left;
    margin-right: 16px
}

@media screen and (max-width: 768px) {
    .tarjeta-aula {
        width: 100%;
        margin-right: 0px
    }
}

.tarjeta-aula-header {
    background-color: #F6F7FB;
    padding: 12px 16px;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 1px solid #e8e8ec
}

.aula-asignatura-avatar {
    display: block;
    float: left;
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    text-align: center;
    line-height: 56px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600
}

.aula-asignatura-info {
    float: left;
    width: calc(100% - 56px);
    padding-left: 16px
}

.aula-asignatura-info h4 {
    font-size: 18px;
    margin-bottom: 2px;
    padding-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.aula-asignatura-info span {
    color: #828f9c;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500
}

.aula-asignatura-info span i {
    margin-right: 4px
}

.aula-modulos ul {
    list-style: none;
    padding: 0px;
    margin: 0px
}

.aula-modulos ul a {
    border-bottom: 1px solid #e8e8ec;
    padding: 8px 16px;
    display: block;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 30px;
    color: #727c88;
    position: relative
}

.aula-modulos ul a i.aula-modulo-icono {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    color: white;
    border-radius: 4px;
    margin-right: 10px;
    float: left
}

.aula-modulos ul a i.fa-angle-right {
    top: 17px;
    display: block;
    position: absolute;
    right: 16px;
    opacity: 0.5;
    transition: all 0.2s ease
}

.aula-modulos ul a span.contador {
    position: absolute;
    right: 36px;
    background-color: rgba(54, 55, 60, 0.25);
    display: inline-block;
    height: 18px;
    min-width: 18px;
    text-align: center;
    color: white;
    font-size: 11px;
    line-height: 18px;
    padding: 0px 6px;
    border-radius: 16px;
    top: 14px
}

.aula-modulos ul a span.contador.new {
    background-color: #e70441;
    color: white
}

.aula-modulos ul a div.aula-notificacion-container {
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 1
}

.aula-modulos ul a span.aula-notificacion {
    background-color: #e70441;
    box-shadow: 0px 3px 4px -2px #b5123e7a;
    color: white;
    font-size: 11px;
    display: block;
    width: 130px;
    text-align: center;
    height: 26px;
    line-height: 26px;
    padding: 0px 10px;
    border-radius: 8px;
    position: relative
}

.aula-modulos ul a span.aula-notificacion::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: #e70441;
    border-radius: 3px;
    transform: rotate(45deg);
    position: absolute;
    bottom: -4px;
    left: calc(50% - 6px);
    z-index: -1
}

.aula-modulos ul a:hover {
    color: #0373E6;
    background-color: #F6F7FB
}

.aula-modulos ul a:hover i.fa-angle-right {
    right: 12px;
    opacity: 1
}

.tarjeta-aula-botones {
    padding: 12px 16px
}

.tarjeta-aula-botones button {
    border-radius: 6px !important
}

.aula-pregunta-contenedor {
    padding: 16px;
    border-bottom: 1px solid #e8e8ec
}

.aula-pregunta-contenedor:last-child {
    border-bottom: 0px solid
}

.aula-pregunta-icono {
    display: block !important;
    width: 56px;
    height: 56px;
    line-height: 56px !important;
    text-align: center;
    border-radius: 6px;
    color: white;
    float: left;
    font-size: 26px;
    background-color: #d2d6e0
}

span.aula-pregunta-comentarios {
    display: inline-block;
    background-color: #e5e8ef;
    height: 42px;
    line-height: 42px;
    padding: 0px 16px 0px 40px;
    border-radius: 25px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: #70747d;
    margin-right: 4px;
    position: relative
}

span.aula-pregunta-comentarios i {
    margin-right: 8px;
    font-size: 16px;
    position: absolute;
    top: 13px;
    left: 16px
}

.aula-pregunta, .aula-tarea {
    float: left;
    padding-left: 16px;
    padding-top: 6px;
    height: 56px;
    width: calc(100% - 256px)
}

.aula-pregunta span, .aula-tarea span {
    color: #9da3b1;
    font-size: 11px
}

.aula-pregunta span b, .aula-tarea span b {
    font-family: 'Poppins', sans-serif;
    color: #36373c
}

.aula-pregunta span i, .aula-tarea span i {
    margin-right: 4px
}

.aula-pregunta h6, .aula-tarea h6 {
    margin-top: 1px;
    margin-bottom: 0px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #36373c
}

.aula-pregunta h6:hover, .aula-tarea h6:hover {
    color: #0373E6
}

.aula-acciones {
    width: 200px;
    float: left;
    text-align: right;
    height: 56px;
    padding-top: 8px
}

.aula-tarea {
    width: calc(100% - 406px)
}

.aula-acciones-tarea {
    width: 350px;
    float: left;
    text-align: right;
    height: 56px;
    padding-top: 8px
}

span.aula-pregunta-avatar, img.aula-pregunta-avatar {
    display: block;
    float: left;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
    color: white;
    line-height: 32px;
    margin-right: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600
}

span.aula-pregunta-nombre {
    color: #9da3b1;
    font-size: 12px;
    line-height: 32px;
    text-transform: capitalize
}

span.aula-pregunta-nombre b {
    font-family: 'Poppins', sans-serif;
    color: #36373c
}

.aula-pregunta-comentario {
    display: block;
    border: 1px solid #d2d6de;
    border-radius: 12px;
    padding: 14px 16px 16px;
    margin-bottom: 10px;
    box-shadow: 1px 2px 6px -1px rgba(94, 100, 115, 0.2)
}

.aula-pregunta-comentario p {
    margin-bottom: 0px
}

.aula-pregunta-comentario-content {
    padding-left: 42px
}

.aula-pregunta-comentario-content span.aula-pregunta-nombre {
    font-size: 13px;
    line-height: 12px;
    width: 100%;
    display: block;
    padding-top: 4px
}

.aula-pregunta-comentario-content span.aula-pregunta-fecha b {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.6;
    line-height: 11px;
    display: block;
    margin-top: 3px;
    margin-bottom: 10px
}

.aula-adjuntar {
    display: block;
    border: 2px dashed #e5e8ef;
    border-radius: 5px;
    width: 120px;
    height: 54px;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative
}

.aula-adjuntar div {
    width: calc(100% - 30px)
}

.aula-adjuntar img {
    float: left
}

.aula-adjuntar p {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 11px;
    margin: 0px;
    padding-top: 2px;
    width: 65px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.aula-adjuntar:hover {
    border: 2px dashed #0373E6
}

.aula-adjuntar:hover p {
    color: #0373E6
}

.aula-adjunto {
    display: block;
    border: 2px solid #e5e8ef;
    border-radius: 5px;
    width: 250px;
    height: 54px;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative
}

.aula-adjunto div {
    width: calc(100% - 30px)
}

.aula-adjunto img {
    float: left
}

.aula-adjunto p {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -2px
}

.aula-adjunto span {
    font-size: 11px;
    color: #8d96a2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block
}

.aula-adjunto i.fa-arrow-down, .aula-adjunto i.fa-arrow-circle-down, .aula-adjunto i.fa-search {
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    width: 50px;
    height: 50px;
    text-align: right;
    padding-top: 12px;
    padding-right: 12px;
    color: #0373E6;
    transition: all 0.2s ease;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 45%, #fff 100%);
    opacity: 0;
    border-radius: 4px
}

.aula-adjunto i.fa-times {
    display: block;
    background-color: #E70441;
    color: white;
    font-size: 10px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: absolute;
    top: -10px;
    right: -10px;
    text-align: center;
    line-height: 18px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: scale(0.8);
    z-index: 2
}

.aula-adjunto:hover {
    border: 2px solid #0373E6
}

.aula-adjunto:hover p {
    color: #0373E6
}

.aula-adjunto:hover i.fa-arrow-down, .aula-adjunto:hover i.fa-arrow-circle-down, .aula-adjunto:hover i.fa-search {
    padding-top: 20px;
    opacity: 1
}

.aula-adjunto:hover i.fa-times {
    opacity: 1;
    transform: scale(1)
}

.aula-adjunto:hover i.fa-times:hover {
    transform: scale(1.4);
    transition: all 0.1s ease
}

.evaluacion-tipo-toggle {
    display: block
}

.evaluacion-tipo-toggle label.btn {
    display: block;
    width: calc(50% - 4px);
    float: left;
    margin: 2px !important;
    border-radius: 4px !important;
    line-height: 42px;
    padding: 0px 10px
}

.evaluacion-tipo-toggle label.btn.active {
    color: white;
    background-color: #0373E6
}

.evaluacion-thumb {
    display: inline-block;
    border: 2px solid #e5e8ef;
    border-radius: 5px;
    width: auto;
    padding: 0px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative
}

.evaluacion-thumb img {
    max-width: 100px;
    max-height: 100px;
    border-radius: 3px
}

.evaluacion-thumb i.fa-times {
    display: block;
    background-color: #E70441;
    color: white;
    font-size: 10px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: absolute;
    top: -10px;
    right: -10px;
    text-align: center;
    line-height: 18px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: scale(0.8);
    z-index: 2
}

.evaluacion-thumb:hover {
    border: 2px solid #0373E6;
    cursor: zoom-in
}

.evaluacion-thumb:hover i.fa-times {
    opacity: 1;
    transform: scale(1);
    cursor: pointer
}

.evaluacion-thumb:hover i.fa-times:hover {
    transform: scale(1.4);
    transition: all 0.1s ease;
    cursor: pointer
}

.evaluacion-imagen-zoom {
    width: auto;
    max-width: 200px;
    max-height: 200px;
    display: block;
    border: 3px solid transparent
}

.evaluacion-imagen-zoom img {
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    max-height: 194px
}

.evaluacion-imagen-zoom:hover {
    cursor: zoom-in;
    border: 3px solid #0373E6
}

.aula-subir-tarea {
    background-image: url("aula-subir-tarea.png");
    width: 100%;
    height: 140px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right 10px top 10px
}

a.biblioteca-archivo {
    height: 42px;
    display: block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 2px
}

a.biblioteca-archivo img {
    margin-right: 12px;
    float: left
}

a.biblioteca-archivo div.id-archivo {
    height: 30px;
    vertical-align: middle;
    width: calc(100% - 45px);
    float: left
}

a.biblioteca-archivo div.id-archivo div.table-archivo {
    display: table-cell;
    height: 30px;
    vertical-align: middle
}

a.biblioteca-archivo div.id-archivo div.table-archivo span.titulo-archivo, a.biblioteca-archivo div.id-archivo div.table-archivo span.nombre-archivo {
    height: 15px !important;
    display: block !important;
    width: 260px;
    float: left;
    padding-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

a.biblioteca-archivo div.id-archivo div.table-archivo span.nombre-archivo {
    font-family: 'roboto', sans-serif;
    width: 260px;
    font-weight: 500;
    font-size: 11px;
    opacity: 0.6
}

a.biblioteca-archivo:hover span.titulo-archivo, a.biblioteca-archivo:hover span.nombre-archivo {
    color: #0373E6 !important
}

a.biblioteca-archivo:hover span.nombre-archivo {
    color: #0373E6 !important
}

a.tutoria-item {
    height: 52px;
    display: block;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 2px
}

a.tutoria-item .tutoria-avatar {
    display: block;
    float: left;
    margin-right: 12px;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    line-height: 42px;
    text-align: center;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 14px
}

a.tutoria-item div.id-tutoria {
    height: 42px;
    vertical-align: middle;
    width: calc(100% - 60px);
    float: left
}

a.tutoria-item div.id-tutoria div.table-tutoria {
    display: table-cell;
    height: 42px;
    vertical-align: middle
}

a.tutoria-item div.id-tutoria div.table-tutoria span.titulo-tutoria, a.tutoria-item div.id-tutoria div.table-tutoria span.nombre-tutoria {
    height: 15px !important;
    font-size: 13px;
    font-weight: 700;
    display: block !important;
    width: 360px;
    float: left;
    padding-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

a.tutoria-item div.id-tutoria div.table-tutoria span.nombre-tutoria {
    font-family: 'roboto', sans-serif;
    width: 360px;
    font-weight: 500;
    font-size: 11px;
    opacity: 0.6
}

a.tutoria-item:hover span.titulo-tutoria, a.tutoria-item:hover span.nombre-tutoria {
    color: #0373E6 !important
}

a.tutoria-item:hover span.nombre-tutoria {
    color: #0373E6 !important
}

.aula-encuesta.mejorando-cuestionario label.btn {
    width: calc(20% - 15px);
    box-shadow: inset 0px 0px 0px 0px #0373E6, 0px 7px 10px -3px rgba(0, 0, 0, 0.15) !important
}

.aula-encuesta.mejorando-cuestionario label.btn:hover, .aula-encuesta.mejorando-quiz-alternativas label.btn:hover {
    box-shadow: inset 0px 0px 0px 2px #0373E6, 0px 7px 10px -3px rgba(0, 0, 0, 0.15) !important
}

.aula-encuesta.mejorando-cuestionario label.btn.active, .aula-encuesta.mejorando-quiz-alternativas label.btn.active {
    background-color: #0373E6
}

.aula-encuesta.mejorando-quiz-alternativas.alternativas-iconos label.btn {
    padding: 10px
}

.aula-encuesta.mejorando-quiz-alternativas.alternativas-iconos label.btn p {
    display: table-cell;
    height: 40px;
    vertical-align: middle
}

.aula-encuesta.mejorando-quiz-alternativas.alternativas-iconos label.btn i {
    font-size: 24px !important;
    float: left !important;
    text-align: center
}

.tarjeta-ayuda {
    width: 450px;
    float: left;
    margin-right: 16px
}

@media screen and (max-width: 768px) {
    .tarjeta-ayuda {
        width: 100%;
        margin-right: 0px
    }
}

.aula-ayuda-icon-container {
    float: left;
    padding: 16px 4px 4px 20px;
    display: block
}

.aula-ayuda-icon-container i {
    display: block;
    float: left;
    color: white;
    width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 12px;
    text-align: center;
    font-size: 24px
}

.aula-ayuda-content-container {
    display: block;
    float: left;
    width: calc(100% - 80px)
}

.bg-mejoremos {
    background-color: #af2490
}

.progress-bar.bg-mejoremos {
    box-shadow: 0px 5px 8px -2px rgba(175, 36, 144, 0.4)
}

.header-fixed {
    background-color: #af2490;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 72px;
    z-index: 4
}

.header-fixed .navbar {
    padding: 0px;
    min-height: 72px
}

.header-fixed .nav-item {
    padding-top: 14px
}

@media screen and (max-width: 990px) {
    .header-fixed .nav-item {
        padding-top: 10px
    }
}

.header-fixed li.nav-item a.mejor-item {
    height: 44px;
    padding: 12px 16px 12px 12px;
    margin-right: 6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border-radius: 30px;
    color: #ffffff73;
    background-repeat: no-repeat;
    background-position: center bottom
}

@media screen and (max-width: 990px) {
    .header-fixed li.nav-item a.mejor-item {
        border-radius: 30px;
        padding-left: 10px
    }
}

@media screen and (max-width: 1600px) {
    .header-fixed li.nav-item a.mejor-item {
        padding: 12px
    }
}

.header-fixed li.nav-item a.mejor-item span {
    float: left
}

@media screen and (max-width: 1600px) {
    .header-fixed li.nav-item a.mejor-item span {
        display: none
    }
}

@media screen and (max-width: 1280px) {
    .header-fixed li.nav-item a.mejor-item span {
        display: none
    }
}

@media screen and (max-width: 990px) {
    .header-fixed li.nav-item a.mejor-item span {
        display: block
    }
}

.header-fixed li.nav-item a.mejor-item:hover {
    background-color: #ffffff30;
    color: #ffffff
}

.header-fixed li.nav-item a.mejor-item:hover i {
    color: #fff
}

.header-fixed li.nav-item a.mejor-item i {
    font-size: 16px;
    margin-right: 8px;
    display: block;
    float: left;
    background-color: #00000026;
    color: #ffffff73;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    margin-top: -6px;
    margin-left: -6px;
    transition: all 0.2s ease
}

@media screen and (max-width: 1600px) {
    .header-fixed li.nav-item a.mejor-item i {
        margin-right: -6px
    }
}

@media screen and (max-width: 990px) {
    .header-fixed li.nav-item a.mejor-item i {
        margin-right: 10px
    }
}

.header-fixed li.nav-item a.mejor-item i.flecha-drop {
    font-size: 16px;
    width: 10px;
    display: inline-block;
    float: right !important;
    height: 10px;
    background-color: transparent;
    margin-top: -3px;
    margin-left: 10px;
    margin-right: -10px;
    line-height: inherit
}

.header-fixed li.nav-item a.mejor-item.active {
    background-color: #e5e8ef;
    color: #36373c;
    position: relative
}

.header-fixed li.nav-item a.mejor-item.active i {
    background-color: #af2490;
    color: white
}

@media screen and (max-width: 1600px) {
    .header-fixed li.nav-item a.mejor-item.active i {
        margin-right: 10px
    }
}

@media screen and (max-width: 1280px) {
    .header-fixed li.nav-item a.mejor-item.active {
        background-image: none
    }
}

@media screen and (max-width: 990px) {
    .header-fixed li.nav-item a.mejor-item.active {
        background-image: none
    }
}

@media screen and (max-width: 1600px) {
    .header-fixed li.nav-item a.mejor-item.active span {
        display: block
    }
}

@media screen and (max-width: 1280px) {
    .header-fixed li.nav-item a.mejor-item.active span {
        display: block
    }
}

.header-fixed .user-avatar {
    border: 0px solid;
    transition: all 0.4s ease
}

@media screen and (max-width: 990px) {
    .header-fixed .user-avatar {
        box-shadow: 0px 0px 0px 3px white !important
    }
}

.header-fixed .user-menu {
    padding: 14px 0px;
    margin-left: 30px
}

@media screen and (max-width: 990px) {
    .header-fixed .user-menu {
        margin-left: 0px;
        padding: 14px 4px;
        border-top: 1px solid #0000001f;
        border-radius: 0px;
        margin-top: 10px
    }
}

.header-fixed .user-menu .nav-link {
    padding-right: 0px !important;
    width: 44px;
    background-color: white;
    box-shadow: 0px 0px 0px 3px white !important;
    transition: all 0s ease
}

@media screen and (max-width: 990px) {
    .header-fixed .user-menu .nav-link {
        width: 100%;
        background-color: transparent;
        box-shadow: none !important
    }
}

.header-fixed .user-menu .fa-sort-down {
    color: white
}

.header-fixed .user-menu .dropdown-item i {
    color: #af2490
}

.header-fixed .user-menu .dropdown-item:hover i {
    color: white
}

.header-fixed .user-menu .nav-link:hover, .header-fixed .user-menu .nav-link:focus {
    background-color: #fff !important;
    box-shadow: 0px 0px 0px 3px white !important;
    outline: none !important;
    border-radius: 50px
}

@media screen and (max-width: 990px) {
    .header-fixed .user-menu .nav-link:hover, .header-fixed .user-menu .nav-link:focus {
        background-color: #ffffff30 !important;
        box-shadow: none !important
    }
}

.header-fixed .user-menu .nav-link:hover .user-nombre, .header-fixed .user-menu .nav-link:focus .user-nombre {
    color: white !important
}

.header-fixed .user-menu .nav-link:hover .user-avatar, .header-fixed .user-menu .nav-link:focus .user-avatar {
    transform: rotate(360deg)
}

.header-fixed .user-nombre {
    display: none;
    color: white
}

@media screen and (max-width: 990px) {
    .header-fixed .user-nombre {
        display: block
    }
}

.header-fixed button.navbar-toggler {
    height: 72px;
    width: 72px;
    border: 0px;
    color: white !important
}

.header-fixed .dropdown-menu.usuario-drop {
    top: 59px !important;
    min-width: 100%;
    right: -3px !important;
    border-radius: 16px 0px 16px 16px;
    padding: 20px 0px 16px 0px
}

@media screen and (max-width: 990px) {
    .header-fixed .dropdown-menu.usuario-drop {
        right: -1px !important;
        border-radius: 0px 20px 20px 20px
    }
}

.header-fixed .dropdown-menu.usuario-drop .dropdown-divider {
    margin-bottom: 12px
}

.header-fixed .dropdown-menu.usuario-drop .usuario-drop a {
    padding: 6px 20px
}

.header-fixed .dropdown-menu.usuario-drop::before {
    content: '';
    background-image: url("mejoremos_menu_user_drop2.png");
    background-repeat: no-repeat;
    display: block;
    background-color: transparent;
    width: 73px;
    height: 24px;
    position: absolute;
    transform: none !important;
    top: -24px;
    right: 0px;
    left: inherit;
    border-radius: 0px;
    cursor: pointer
}

@media screen and (max-width: 990px) {
    .header-fixed .dropdown-menu.usuario-drop::before {
        right: inherit;
        left: 0px;
        transform: scaleX(-1) !important
    }
}

.header-fixed .user-nombre-drop {
    padding: 0px 17px 8px 17px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500
}

.header-fixed .navbar-colegio {
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 300;
    padding-left: 24px;
    margin-left: -20px;
    margin-bottom: 0px;
    display: table-cell;
    max-width: 300px;
    white-space: normal;
    color: white;
    vertical-align: middle !important;
    float: left
}

@media screen and (max-width: 990px) {
    .header-fixed .navbar-colegio {
        display: none
    }
}

@media screen and (max-width: 1180px) {
    .header-fixed .navbar-colegio {
        max-width: 250px
    }
}

.header-fixed .navbar-colegio select {
    border: 0px solid;
    background-color: transparent;
    color: white
}

.header-fixed .navbar-colegio:before {
    content: '';
    display: block;
    width: 4px;
    height: 20px;
    background: #ffffff4a;
    border-radius: 2px;
    position: absolute;
    left: 0px;
    top: calc(50% - 10px)
}

.header-fixed .selector-colegio-movil {
    display: block;
    width: 100%;
    background-color: #9e1b81;
    padding: 0px 16px;
    display: none
}

@media screen and (max-width: 990px) {
    .header-fixed .selector-colegio-movil {
        display: block
    }
}

.header-fixed .selector-colegio-movil select {
    border: 0px solid;
    background-color: transparent;
    color: white;
    padding: 10px 0px
}

.header-fixed .navbar-brand {
    height: 72px;
    padding: 12px
}

.header-fixed .navbar-brand img {
    max-width: 200px;
    float: left;
    margin-right: 24px
}

@media screen and (max-width: 990px) {
    .header-fixed .navbar-brand img {
        max-width: 150px;
        margin-right: 0px;
        padding-top: 8px
    }
}

.contenido-mejorando {
    max-width: 1400px
}

.contenido-mejorando-top {
    margin-top: 120px;
    min-height: 600px
}

@media screen and (max-width: 990px) {
    .contenido-mejorando-top {
        margin-top: 100px
    }
}

.contenido-mejorando-margin {
    margin-top: 120px
}

@media screen and (max-width: 990px) {
    .contenido-mejorando-margin {
        margin-top: 90px
    }
}

.modal-content.mejoremos {
    border-radius: 28px !important
}

.modal-content.mejoremos .modal-header {
    padding: 14px 24px;
    border-radius: 28px 28px 0px 0px
}

.modal-content.mejoremos .modal-header i {
    color: #af2490
}

.modal-content.mejoremos .modal-header.redondin {
    padding-bottom: 42px !important
}

.modal-content.mejoremos .modal-body.redondin {
    margin-top: -28px !important;
    border-radius: 28px 28px 0px 0px
}

h1.mejoremos-titulo-seccion {
    margin-bottom: 60px;
    font-size: 32px;
    font-weight: 800;
    position: relative
}

@media screen and (max-width: 990px) {
    h1.mejoremos-titulo-seccion {
        font-size: 26px
    }
}

h1.mejoremos-titulo-seccion a i {
    margin-right: 12px;
    margin-top: -4px;
    font-size: 24px;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    line-height: 48px;
    text-align: center;
    background: #ffffff;
    color: #af2490;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15);
    transition: all 0.2s ease
}

h1.mejoremos-titulo-seccion a:hover i {
    padding-right: 10px
}

h1.mejoremos-titulo-seccion::after {
    content: '';
    display: block;
    position: absolute;
    width: 60px;
    height: 6px;
    border-radius: 6px;
    background-color: #af2490;
    box-shadow: 0px 3px 6px -1px rgba(156, 29, 128, 0.49);
    bottom: -24px;
    left: 0px
}

h2.mejoremos-titulo-seccion {
    margin-bottom: 10px;
    font-size: 32px;
    font-weight: 800;
    position: relative;
    padding-left: 60px
}

h2.mejoremos-titulo-seccion i {
    color: #ffffff;
    margin-right: 12px;
    margin-top: -4px;
    font-size: 24px;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    background: #af2490;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    line-height: 48px;
    text-align: center
}

h2.mejoremos-titulo-seccion a i {
    background: #ffffff;
    color: #af2490;
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.15);
    transition: all 0.2s ease
}

h2.mejoremos-titulo-seccion a:hover i {
    padding-right: 10px
}

@media screen and (max-width: 990px) {
    h2.mejoremos-titulo-seccion {
        font-size: 22px
    }
}

h1.text-center.mejoremos-titulo-seccion::after {
    left: calc(50% - 30px)
}

.tarjeta.mejoremos {
    border-radius: 20px;
    box-shadow: 0px 6px 10px -3px rgba(0, 0, 0, 0.1)
}

.alerta-visual.mejoremos {
    border-radius: 20px;
    box-shadow: 0px 6px 10px -3px rgba(0, 0, 0, 0.1)
}

.tab-menu.mejoremos li.nav-item a {
    border-radius: 15px 15px 0px 0px !important;
    padding: 12px 18px 30px 18px
}

@media screen and (max-width: 990px) {
    .tab-menu.mejoremos li.nav-item a {
        padding: 12px 12px 30px 12px
    }
}

.tab-menu.mejoremos .nav-link.active {
    box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0.2)
}

.tab-menu.mejoremos .nav-link.active::before {
    bottom: 20px
}

.tab-menu.mejoremos .nav-link.active::after {
    bottom: 20px
}

.tarjeta.mejoremos.tab-content {
    margin-top: -20px
}

.alert.alert-mejoremos {
    background-color: #f3f4f9;
    border-radius: 12px;
    padding: 16px 28px
}

.alert.alert-mejoremos p {
    font-family: 'Poppins', sans-serif;
    padding-left: 22px
}

.alert.alert-mejoremos i {
    font-size: 24px;
    margin-top: -3px;
    margin-left: -10px;
    opacity: 0.2
}

.alert.mejoremos-accion {
    margin-bottom: 6px
}

.alert.mejoremos-accion i {
    display: block;
    background-color: #e5af0a;
    color: white;
    font-size: 12px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    text-align: center;
    opacity: 1;
    margin-top: 1px;
    margin-right: 12px
}

.alert.mejoremos-accion p {
    padding-left: 30px
}

.alert.mejoremos-accion span {
    background-color: #e5af0a;
    color: white;
    font-size: 10px;
    padding: 4px 12px 4px 20px;
    position: absolute;
    top: 0px;
    right: 0px;
    border-radius: 0px 12px 0px 32px
}

@media screen and (max-width: 990px) {
    .alert.mejoremos-accion {
        padding-top: 28px
    }
}

.tarjeta-indicador-mejoremos {
    border-radius: 14px;
    margin-bottom: 12px
}

.tarjeta-indicador-mejoremos .tarjeta-body {
    padding: 20px 18px
}

@media screen and (max-width: 990px) {
    .tarjeta-indicador-mejoremos .tarjeta-body {
        text-align: center
    }
}

@media screen and (max-width: 990px) {
    .tarjeta-indicador-mejoremos i.icono-estadisticas {
        margin-right: auto !important;
        margin-bottom: 14px;
        margin-left: auto;
        float: inherit !important
    }
}

@media screen and (max-width: 990px) {
    .tarjeta-indicador-mejoremos .datos-estadisticas {
        width: 100%
    }
}

.tarjeta-indicador-mejoremos h1 span {
    font-size: 1.2rem;
    font-weight: 400;
    margin-left: 5px
}

.tarjeta-indicador-mejoremos.bg-lima {
    box-shadow: 0px 6px 5px -1px rgba(175, 191, 21, 0.4)
}

.tarjeta-indicador-mejoremos.bg-violeta {
    box-shadow: 0px 6px 5px -1px rgba(226, 5, 120, 0.4)
}

.tarjeta-indicador-mejoremos.bg-grafito {
    box-shadow: 0px 6px 5px -1px rgba(80, 80, 82, 0.4)
}

.tarjeta-indicador-mejoremos.bg-morado {
    box-shadow: 0px 6px 5px -1px rgba(126, 47, 189, 0.4)
}

.tarjeta-indicador-mejoremos.bg-celeste {
    box-shadow: 0px 6px 5px -1px rgba(41, 170, 243, 0.4)
}

.tarjeta-indicador-mejoremos.bg-amarillo {
    box-shadow: 0px 6px 5px -1px rgba(236, 163, 7, 0.4)
}

.tarjeta-indicador-mejoremos.bg-verde {
    box-shadow: 0px 6px 5px -1px rgba(76, 185, 17, 0.4)
}

.tarjeta-indicador-mejoremos.bg-rojo {
    box-shadow: 0px 6px 5px -1px rgba(231, 4, 65, 0.4)
}

.tarjeta-indicador-mejoremos.bg-azul {
    box-shadow: 0px 6px 5px -1px rgba(36, 55, 177, 0.4)
}

.tarjeta-indicador-mejoremos.bg-naranja {
    box-shadow: 0px 6px 5px -1px rgba(234, 92, 13, 0.4)
}

.tarjeta-indicador-mejoremos.bg-turquesa {
    box-shadow: 0px 6px 5px -1px rgba(5, 138, 150, 0.4)
}

.tarjeta-indicador-mejoremos.bg-primary {
    box-shadow: 0px 6px 5px -1px rgba(3, 115, 230, 0.4)
}

.footer-mejoremos {
    background-color: #343a48;
    background-image: none;
    padding: 40px 0px 24px 0px;
    margin-top: 43px
}

.footer-mejoremos h6 {
    color: #af2490;
    margin-bottom: 20px
}

.footer-mejoremos ul {
    list-style: none;
    padding-left: 0px
}

.footer-mejoremos ul li {
    width: 100%
}

.footer-mejoremos ul li a {
    width: 100%;
    display: block;
    color: #CBCED5;
    transition: all 0.2s ease;
    border-radius: 16px;
    padding: 5px
}

.footer-mejoremos ul li a:hover {
    color: #af2490;
    padding-left: 12px;
    background-color: white
}

.footer-mejoremos a.social {
    display: block;
    float: left;
    background-color: #CBCED5;
    color: #343a48;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    transition: all 0.3s ease
}

.footer-mejoremos a.social:hover {
    background-color: #ffffff;
    color: #af2490;
    transform: rotate(360deg)
}

.disclaimer-mejorando {
    background-color: #21252e;
    text-align: center;
    padding: 10px;
    color: #CBCED5
}

.disclaimer-mejorando p {
    margin: 0px;
    font-size: 13px
}

.disclaimer-mejorando img {
    width: 48px !important;
    opacity: 0.8;
    margin-left: 3px
}

.tarjeta-encuesta {
    min-height: 72px;
    margin-bottom: 10px;
    border-radius: 16px !important
}

@media screen and (max-width: 990px) {
    .tarjeta-encuesta {
        margin-bottom: 16px
    }
}

.tarjeta-encuesta.inactiva {
    background-color: #f6f7fbc7 !important;
    box-shadow: 0px 6px 10px -3px rgba(0, 0, 0, 0.05)
}

.encuesta-status {
    display: block;
    float: left;
    font-size: 20px;
    background-color: #35bd0f;
    color: white;
    text-align: center;
    padding-top: 4px;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    position: absolute;
    top: 12px;
    left: 12px
}

.encuesta-status span {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 7px;
    display: block;
    margin-top: -2px
}

i.accion-status {
    display: block;
    float: left;
    font-size: 24px;
    color: white;
    text-align: center;
    line-height: 48px;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    position: absolute;
    top: 12px;
    left: 12px
}

.enc-bloque-titulo {
    padding-left: 72px;
    width: calc(70% - 390px)
}

.enc-bloque-titulo h6 {
    padding-top: 16px;
    margin-bottom: 2px
}

.enc-bloque-titulo span {
    color: #a6a8af;
    display: block;
    float: left
}

@media screen and (max-width: 990px) {
    .enc-bloque-titulo {
        width: 100%
    }
}

.accion-bloque-titulo {
    padding-left: 72px;
    width: calc(40% - 120px);
    min-height: 72px
}

.accion-bloque-titulo h6 {
    padding-top: 16px;
    margin-bottom: 2px
}

.accion-bloque-titulo span {
    color: #a6a8af;
    display: block;
    float: left
}

@media screen and (max-width: 990px) {
    .accion-bloque-titulo {
        width: 100%
    }
}

.enc-bloque-grado {
    padding: 18px;
    width: 180px
}

@media screen and (max-width: 990px) {
    .enc-bloque-grado {
        width: 100%;
        padding: 8px 16px;
        border-top: 1px solid #e5e8ef;
        margin-top: 14px
    }
}

span.grados {
    display: block;
    background-color: #e5e8ef;
    font-size: 11px;
    line-height: 30px;
    min-width: 30px;
    height: 30px;
    margin: 2px;
    border-radius: 4px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    float: left
}

.enc-bloque-porcentaje {
    width: 15%;
    padding: 20px 15px
}

.enc-bloque-porcentaje span.float-right {
    font-family: 'Poppins', sans-serif;
    font-weight: 700
}

@media screen and (max-width: 990px) {
    .enc-bloque-porcentaje {
        width: 100%;
        padding: 12px 16px 14px 16px;
        border-top: 1px solid #e5e8ef
    }
}

.enc-bloque-avances {
    width: 30%;
    padding: 20px 0px
}

.enc-bloque-avances span.float-right {
    font-family: 'Poppins', sans-serif;
    font-weight: 700
}

@media screen and (max-width: 990px) {
    .enc-bloque-avances {
        width: 100%;
        padding: 12px 16px 14px 16px;
        border-top: 1px solid #e5e8ef
    }
}

.enc-bloque-avances .avance-x-usuario {
    cursor: pointer;
    padding: 0px 5px
}

@media screen and (max-width: 990px) {
    .enc-bloque-avances .avance-x-usuario {
        padding: 10px 5px
    }
}

.accion-bloque-indicadores {
    padding: 18px;
    width: 180px
}

.accion-bloque-indicadores i {
    display: block;
    float: left;
    font-size: 16px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    color: white;
    text-align: center;
    margin: 2px
}

@media screen and (max-width: 990px) {
    .accion-bloque-indicadores {
        width: 100%;
        padding: 8px 16px 8px 16px;
        border-top: 1px solid #e5e8ef
    }
}

.accion-bloque-descripcion {
    padding: 15px;
    float: right;
    width: calc(60% - 180px)
}

.accion-bloque-descripcion p {
    text-align: left;
    margin-bottom: 0px
}

@media screen and (max-width: 990px) {
    .accion-bloque-descripcion {
        width: 100%;
        padding: 12px 16px 12px 16px;
        text-align: center;
        border-top: 1px solid #e5e8ef
    }
}

.enc-bloque-botones {
    padding: 15px 15px 15px 0px;
    float: right;
    width: 210px;
    text-align: right
}

@media screen and (max-width: 990px) {
    .enc-bloque-botones {
        width: 100%;
        padding: 12px 16px;
        text-align: center;
        border-top: 1px solid #e5e8ef
    }
}

.accion-bloque-botones {
    padding: 15px;
    float: right;
    width: 120px
}

@media screen and (max-width: 990px) {
    .accion-bloque-botones {
        width: 100%;
        padding: 12px 16px 12px 16px;
        text-align: center;
        border-top: 1px solid #e5e8ef
    }
}

.btn-secondary2 {
    box-shadow: none;
    background-color: #e5e8ef;
    color: #7e8086
}

.btn-secondary2:hover {
    background-color: #e5e8ef;
    color: #0373E6
}

.btn-encuesta {
    border-radius: 50%;
    width: 42px;
    padding: 0px
}

.btn-encuesta i {
    background-color: transparent;
    top: 0px;
    left: 0px;
    width: 42px;
    height: 42px;
    padding-top: 0px;
    line-height: 42px
}

@media screen and (max-width: 990px) {
    .btn-encuesta {
        margin: 0px 8px
    }
}

.tab-tipo-encuesta label {
    box-shadow: none;
    background-color: rgba(20, 40, 74, 0.15);
    box-shadow: 0px 7px 10px -3px rgba(54, 55, 60, 0.08);
    padding: 12px 18px;
    color: rgba(54, 55, 60, 0.75)
}

.tab-tipo-encuesta label i {
    font-size: 16px;
    margin-right: 6px
}

.tab-tipo-encuesta label:hover {
    color: #0373E6;
    background-color: rgba(20, 40, 74, 0.08)
}

.tab-tipo-encuesta label.active {
    background-color: #0373E6 !important;
    box-shadow: 0px 7px 10px -3px rgba(3, 115, 230, 0.3);
    color: white
}

.tarjeta-url-mejoremos {
    padding: 4px;
    height: 38px;
    margin-bottom: 4px
}

.tarjeta-url-mejoremos span {
    display: block;
    background-color: #af2490;
    color: white;
    font-size: 11px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin-right: 8px;
    float: left
}

.tarjeta-url-mejoremos p {
    margin: 0px;
    float: left
}

.reporte-span {
    background-color: #d7dae2;
    color: #7a7c82;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 4px
}

.tabs-matriz-mejoremos .tab-menu .nav-link.active {
    background-color: #e5e8ef !important;
    box-shadow: none
}

.tabs-matriz-mejoremos .tab-menu .nav-link.active:hover {
    background-color: #e5e8ef !important
}

.tabs-matriz-mejoremos .bg-violeta .nav-link.active {
    color: #e20578 !important
}

.tabs-matriz-mejoremos .bg-morado .nav-link.active {
    color: #7e2fbd !important
}

.tabs-matriz-mejoremos .bg-celeste .nav-link.active {
    color: #29aaf3 !important
}

.tabs-matriz-mejoremos .bg-lima .nav-link.active {
    color: #afbf15 !important
}

.tabs-matriz-mejoremos .tab-content {
    position: relative;
    z-index: 2;
    margin-top: -10px;
    background-color: #e5e8ef;
    padding: 8px;
    border-radius: 14px
}

.tabs-matriz-mejoremos .tab-content h6 {
    font-size: 14px !important
}

.tabs-matriz-mejoremos .tab-content .table th {
    font-family: 'Poppins', sans-serif;
    font-weight: 600
}

.tabs-matriz-mejoremos .tab-menu .nav-link.active::before {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    left: -10px;
    bottom: 10px;
    background-image: url("tabflap2_gris.png")
}

.tabs-matriz-mejoremos .tab-menu .nav-link.active::after {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    right: -10px;
    bottom: 10px;
    background-image: url("tabflap1_gris.png")
}

.tabs-matriz-mejoremos .table-lined tr:last-child {
    border-bottom: 0px solid
}

.navegador-fixed {
    margin-top: 100px
}

@media screen and (max-width: 990px) {
    .navegador-fixed {
        margin-top: 0px;
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        min-height: 72px;
        background-color: #af2490;
        box-shadow: 0px 6px 6px 10px rgba(39, 43, 56, 0.1);
        z-index: 2
    }
}

.navegador-fixed .progress {
    background-color: #d3d6dc;
    bottom: 16px !important;
    position: absolute;
    margin-left: calc(50% - 200px);
    width: calc(400px - 32px);
    height: 6px
}

@media screen and (max-width: 990px) {
    .navegador-fixed .progress {
        margin-left: 0px;
        width: 100%;
        border-radius: 0px;
        height: 5px;
        position: absolute;
        top: 0px;
        background-color: rgba(0, 0, 0, 0.2)
    }
}

.navegador-fixed .progress .progress-bar {
    background-color: #af2490;
    box-shadow: 0px 5px 8px -2px rgba(175, 36, 144, 0.3)
}

@media screen and (max-width: 990px) {
    .navegador-fixed .progress .progress-bar {
        border-radius: 0px;
        background-color: white;
        box-shadow: none;
        opacity: 1
    }
}

.navegador-fixed .btn-siguiente {
    padding-left: 20px;
    padding-right: 48px
}

.navegador-fixed .btn-siguiente i {
    left: inherit !important;
    right: 4px !important
}

.navegador-fixed span.indicador-pregunta {
    width: 100%;
    height: 42px;
    text-align: center;
    display: block;
    color: #36373c;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 30x
}

@media screen and (max-width: 990px) {
    .navegador-fixed span.indicador-pregunta {
        color: white;
        line-height: 14px;
        font-size: 12px;
        padding-top: 6px
    }
}

@media screen and (max-width: 990px) {
    .navegador-fixed .btn-mejoremos {
        background-color: white;
        color: #af2490;
        box-shadow: none
    }
}

.mejorando-cuestionario {
    width: 100%;
    display: block
}

.mejorando-cuestionario label.btn {
    background-color: white;
    border-radius: 12px !important;
    margin: 5px !important;
    width: calc(25% - 15px);
    height: auto;
    white-space: inherit;
    overflow: inherit;
    text-overflow: inherit;
    box-shadow: inset 0px 0px 0px 0px #af2490, 0px 7px 10px -3px rgba(0, 0, 0, 0.15);
    padding: 24px 16px
}

@media screen and (max-width: 990px) {
    .mejorando-cuestionario label.btn {
        width: 100% !important;
        margin: 0px;
        display: block;
        flex: none !important;
        position: relative;
        float: none;
        text-align: left;
        min-height: 60px;
        margin: 8px 0px !important;
        padding: 8px 16px
    }
}

.mejorando-cuestionario label.btn:hover {
    box-shadow: inset 0px 0px 0px 2px #af2490, 0px 7px 10px -3px rgba(0, 0, 0, 0.15)
}

.mejorando-cuestionario label.btn.active {
    background-color: #af2490
}

.mejorando-cuestionario label.btn.active i {
    color: white
}

.mejorando-cuestionario label.btn.active p {
    color: white
}

.mejorando-cuestionario i {
    font-size: 56px !important;
    width: 56px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color: #b5bac5;
    margin-top: 8px;
    margin-bottom: 8px
}

@media screen and (max-width: 990px) {
    .mejorando-cuestionario i {
        font-size: 40px !important;
        width: 40px;
        float: left;
        margin-left: 0px;
        margin-right: 16px;
        margin-top: 2px
    }
}

.mejorando-cuestionario p {
    font-family: 'Poppins', sans-serif;
    color: #36373c;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px
}

@media screen and (max-width: 990px) {
    .mejorando-cuestionario p {
        float: left;
        line-height: 46px;
        font-size: 16px;
        margin-bottom: 0px
    }
}

.mejorando-quiz {
    width: 100%;
    display: block
}

.mejorando-quiz label.btn {
    background-color: white;
    border-radius: 12px !important;
    margin: 5px !important;
    width: 12%;
    height: auto;
    white-space: inherit;
    overflow: inherit;
    text-overflow: inherit;
    box-shadow: inset 0px 0px 0px 0px #af2490, 0px 7px 10px -3px rgba(0, 0, 0, 0.15);
    padding: 38px 12px;
    text-align: center !important
}

@media screen and (max-width: 990px) {
    .mejorando-quiz label.btn {
        border-radius: 8px !important;
        margin: 0px !important;
        width: 13%;
        padding: 14px 12px
    }
}

.mejorando-quiz label.btn p {
    font-family: 'Poppins', sans-serif;
    color: #36373c;
    font-weight: 600;
    margin-bottom: 0px;
    font-size: 18px
}

.mejorando-quiz label.btn:hover {
    box-shadow: inset 0px 0px 0px 2px #af2490, 0px 7px 10px -3px rgba(0, 0, 0, 0.15)
}

.mejorando-quiz label.btn.active {
    background-color: #af2490
}

.mejorando-quiz label.btn.active i {
    color: white
}

.mejorando-quiz label.btn.active p {
    color: white
}

.mejorando-quiz i {
    font-size: 56px !important;
    width: 56px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color: #b5bac5;
    margin-top: 8px;
    margin-bottom: 8px
}

@media screen and (max-width: 990px) {
    .mejorando-quiz i {
        font-size: 40px !important;
        width: 40px;
        float: left;
        margin-left: 0px;
        margin-right: 16px;
        margin-top: 2px
    }
}

.mejorando-quiz-alternativas {
    width: 100%;
    display: block
}

.mejorando-quiz-alternativas label.btn {
    background-color: white;
    border-radius: 12px !important;
    margin: 5px 0px !important;
    width: 100%;
    height: auto;
    white-space: inherit;
    overflow: inherit;
    text-overflow: inherit;
    box-shadow: inset 0px 0px 0px 0px #af2490, 0px 7px 10px -3px rgba(0, 0, 0, 0.15);
    padding: 24px 24px 24px 52px;
    text-align: left !important
}

@media screen and (max-width: 990px) {
    .mejorando-quiz-alternativas label.btn {
        border-radius: 8px !important;
        padding: 16px 12px 16px 48px
    }
}

.mejorando-quiz-alternativas label.btn p {
    font-family: 'Poppins', sans-serif;
    color: #36373c;
    font-weight: 500;
    margin-bottom: 0px;
    font-size: 14px;
    line-height: 16px
}

@media screen and (max-width: 990px) {
    .mejorando-quiz-alternativas label.btn p {
        font-size: 13px
    }
}

.mejorando-quiz-alternativas label.btn span {
    background-color: #af2490;
    display: block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 16px;
    padding-right: 1px;
    top: calc(50% - 12px);
    box-shadow: 0px 0px 0px 3px white;
    color: white !important
}

@media screen and (max-width: 990px) {
    .mejorando-quiz-alternativas label.btn span {
        left: 12px
    }
}

.mejorando-quiz-alternativas label.btn:hover {
    box-shadow: inset 0px 0px 0px 2px #af2490, 0px 7px 10px -3px rgba(0, 0, 0, 0.15)
}

.mejorando-quiz-alternativas label.btn:hover span {
    color: white !important
}

.mejorando-quiz-alternativas label.btn.active {
    background-color: #af2490
}

.mejorando-quiz-alternativas label.btn.active i {
    color: white
}

.mejorando-quiz-alternativas label.btn.active p {
    color: white
}

.mejorando-quiz-alternativas i {
    font-size: 56px !important;
    width: 56px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color: #b5bac5;
    margin-top: 8px;
    margin-bottom: 8px
}

@media screen and (max-width: 990px) {
    .mejorando-quiz-alternativas i {
        font-size: 40px !important;
        width: 40px;
        float: left;
        margin-left: 0px;
        margin-right: 16px;
        margin-top: 2px
    }
}

.mejorando-quiz-alternativas-multiples label.btn span {
    border-radius: 3px !important;
    background-color: #e5e8ef !important;
    box-shadow: none !important
}

.mejorando-quiz-alternativas-multiples label.btn span i {
    font-size: 16px !important;
    color: white !important;
    width: 100%;
    margin: 0px;
    line-height: 24px;
    opacity: 0
}

.mejorando-quiz-alternativas-multiples label.btn.active span {
    background-color: rgba(0, 0, 0, 0.3) !important
}

.mejorando-quiz-alternativas-multiples label.btn.active span i {
    opacity: 1
}

span.numero-pregunta-mejoremos {
    display: block;
    background: #ffffff;
    color: #af2490;
    box-shadow: 0px 0px 0px 4px #d6dbe5;
    width: 42px;
    height: 42px;
    line-height: 42px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    top: -20px;
    right: calc(50% - 21px);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700
}

.mejoremos-enunciado {
    padding: 16px;
    margin-bottom: 16px
}

.mejoremos-enunciado p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px
}

@media screen and (max-width: 990px) {
    .mejoremos-enunciado p {
        font-size: 14px
    }
}

@media screen and (max-width: 990px) {
    .mejoremos-enunciado {
        padding: 0px 0px 1px 0px;
        margin-top: -10px
    }
}

@media screen and (max-width: 990px) {
    .tarjeta-pregunta h6 {
        font-size: 14px;
        margin-top: 8px !important;
        margin-bottom: 16px !important
    }
}

.mejoremos-img {
    max-width: 425px
}

@media screen and (max-width: 990px) {
    .mejoremos-img {
        width: 100%;
        padding: 0px 20px
    }
}

.tarjeta-subscripcion {
    padding: 40px
}

@media screen and (max-width: 990px) {
    .tarjeta-subscripcion {
        padding: 15px 30px
    }
}

.encuesta-id-alumno {
    padding-top: 20px
}

.encuesta-id-alumno label {
    color: white;
    margin-bottom: 0px
}

.encuesta-id-alumno i {
    color: white;
    float: left;
    font-size: 32px;
    margin-right: 12px
}

.encuesta-id-alumno p {
    color: white;
    margin-bottom: 0px;
    line-height: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media screen and (max-width: 990px) {
    .btn-copyurl {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 20px
    }
}

.progress-chico.mejoremos {
    width: calc(100% - 50px)
}

@media screen and (max-width: 575px) {
    .tabs-matriz-mejoremos .tab-menu .nav-link i {
        margin-right: 0px !important;
        font-size: 16px
    }
}

.mejoremos-quiz-alternativa {
    position: relative;
    margin-bottom: 10px
}

.mejoremos-quiz-alternativa .btn {
    padding: 0px;
    width: 38px;
    height: 38px;
    background-color: transparent;
    position: absolute;
    top: 2px;
    right: 2px;
    box-shadow: none
}

.mejoremos-acordeon {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px
}

.mejoremos-acordeon .acordeon-header {
    position: relative;
    min-height: 48px;
    padding-left: 24px
}

@media screen and (max-width: 990px) {
    .mejoremos-acordeon .acordeon-header {
        padding-left: 52px
    }
}

.mejoremos-acordeon .acordeon-header span.pregunta-num {
    display: block;
    background-color: #af2490;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 3px white;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    position: absolute;
    left: -12px;
    top: calc(50% - 12px)
}

@media screen and (max-width: 990px) {
    .mejoremos-acordeon .acordeon-header span.pregunta-num {
        left: 16px
    }
}

.mejoremos-acordeon .acordeon-header .acordeon-botones {
    display: block;
    position: absolute;
    height: 42px;
    right: 3px;
    top: 3px
}

.mejoremos-acordeon .acordeon-header .acordeon-opciones {
    display: block;
    float: right;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer
}

.mejoremos-acordeon .acordeon-header .acordeon-opciones:hover {
    color: #0373E6;
    background-color: rgba(54, 55, 60, 0.1)
}

.mejoremos-acordeon .acordeon-header p {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 16px;
    font-size: 14px;
    margin: 0px;
    padding-top: 14px;
    padding-bottom: 14px;
    width: calc(100% - 150px)
}

.mejoremos-acordeon .acordeon-header p:hover {
    color: #0373E6;
    cursor: pointer
}

.mejoremos-acordeon .acordeon-contenido {
    box-shadow: none;
    border-radius: 0px 0px 5px 5px
}

.mejoremos-acordeon .acordeon-contenido img.alternativa-imagen {
    max-width: 150px;
    border-radius: 5px
}

.diag-indicador {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 12px;
    padding-top: 3px
}

.diag-estado-sm {
    position: relative;
    display: block;
    height: 30px;
    color: white;
    width: 100%;
    border-radius: 4px;
    line-height: 30px;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-align: center
}

.diag-estado-sm i {
    font-size: 8px;
    font-style: inherit
}

.diag-estado-sm b {
    display: block;
    float: left;
    text-align: center;
    width: 60px;
    font-size: 12px;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.1)
}

.indicador-pts i {
    font-size: 8px;
    font-style: inherit;
    margin-left: 2px
}

.mejoremos-cargo {
    font-weight: 500;
    font-size: 14px
}

.encuesta-icono {
    display: block;
    float: left;
    font-size: 20px;
    background-color: #35bd0f;
    color: white;
    text-align: center;
    line-height: 48px !important;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    position: absolute;
    top: 12px;
    left: 12px
}

.tarjeta-encuestas-disponibles {
    transition: all 0.2s ease;
    margin-bottom: 10px !important;
    border-radius: 10px !important
}

.tarjeta-encuestas-disponibles h6 {
    color: #36373c;
    transition: all 0.2s ease
}

.tarjeta-encuestas-disponibles .fa-chevron-right {
    position: absolute;
    right: 12px;
    top: 28px;
    opacity: 0.2;
    transition: all 0.2 ease
}

.tarjeta-encuestas-disponibles span {
    transition: all 0.2 ease
}

.tarjeta-encuestas-disponibles:hover {
    background-color: #af2490;
    color: white;
    cursor: pointer
}

.tarjeta-encuestas-disponibles:hover h6 {
    color: white
}

.tarjeta-encuestas-disponibles:hover .fa-chevron-right {
    color: white
}

.tarjeta-encuestas-disponibles:hover span {
    color: white;
    opacity: 0.7
}

.mejoremos-plan-menu {
    width: 240px !important;
    padding-top: 52px;
    transition: all 0.2s ease;
    z-index: 1 !important
}

.plan-menu-img {
    transition: all 0.2s ease
}

.is-sticky .mejoremos-plan-menu {
    padding-top: 120px !important
}

.is-sticky .mejoremos-plan-menu .plan-menu-img {
    width: 60% !important
}

.eliminar-registro {
    opacity: 0;
    border: 2px solid #eef0f4;
    background-color: #eef0f4;
    padding: 4px 8px;
    border-radius: 8px;
    position: absolute;
    top: 3px;
    right: 3px
}

.mejoremos-comentario:hover .eliminar-registro {
    opacity: 1
}

.cronograma-fecha {
    display: block !important;
    width: 100% !important;
    background-color: #ffffff29;
    color: white;
    font-size: 11px;
    border-radius: 3px;
    margin: 2px 0px
}

.cronograma-agregar {
    opacity: 0
}

.btn-pie-informe:hover .cronograma-agregar {
    opacity: 1
}

.agenda-fecha {
    display: flex;
    align-content: center;
    justify-content: center
}

.icon-panel {
    color: white;
    background-color: #af2490;
    margin-right: 10px;
    padding: 10px 0px;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    text-align: center
}

.bg-tarjeta-plan {
    background-image: url("bg-tarjeta-plan.png");
    background-position: top;
    background-size: cover
}

.notificaciones-mejoremos .notificaciones-drop {
    top: 59px !important;
    right: 0px !important;
    border-radius: 16px
}

.notificaciones-mejoremos .icono-notificaciones {
    background-color: #00000026
}

.notificaciones-mejoremos .icono-notificaciones:hover {
    background-color: #eca307;
    color: white
}

.link-volver, .link-volver:hover {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #af2490
}

.indicador-variabilidad {
    font-size: 14px;
    background-color: #12254a17;
    cursor: pointer;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 22px !important;
    display: inline-block !important
}

.menu-lateral.mederis {
    background-color: #00adb1
}

.menu-lateral.mederis .sprite_text, .menu-lateral.mederis .icono-menu {
    color: #ffffff94
}

.menu-lateral.mederis .active .sprite_text {
    color: #36373c
}

.menu-lateral.mederis .menu-principal ul li a:hover {
    background-color: #3bc6ca;
    color: #fff
}

.configuracion-pasos .col:first-child .configuracion-paso {
    background-size: 50% 10px;
    background-position: right 15px
}

.configuracion-pasos .col:last-child .configuracion-paso {
    background-size: 50% 10px;
    background-position: left 15px
}

.configuracion-paso {
    text-align: center;
    background-image: url("configuracion-paso-off.png");
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-position: 0px 15px
}

.configuracion-paso span {
    display: block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    color: #1b7adc;
    background-color: #094f97;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 8px;
    z-index: 1
}

.configuracion-paso p {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 15px;
    color: #0000006b
}

.configuracion-paso.checked {
    text-align: center;
    color: white;
    background-image: url("configuracion-paso-on.png");
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-position: 0px 15px
}

.configuracion-paso.checked span {
    background-color: white;
    position: relative
}

.configuracion-paso.checked p {
    color: white
}

.configuracion-paso.active {
    text-align: center;
    color: white;
    background-image: url("configuracion-paso-mid.png");
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-position: 0px 15px
}

.configuracion-paso.active span {
    background-color: white
}

.configuracion-paso.active p {
    color: white
}

.configuracion-pasos .col:first-child .configuracion-paso.active {
    background-image: url("configuracion-paso-off.png")
}

.configuracion-pasos .col:last-child .configuracion-paso.active {
    background-image: url("configuracion-paso-on.png")
}

.config-footer {
    border-radius: 0px 0px 10px 10px
}

.config-pasos-light .config-paso {
    background-image: url("configuracion-paso-light.png");
    background-size: 100% 6px;
    background-repeat: no-repeat;
    background-position: 0px 12px
}

.config-pasos-light .config-paso span {
    display: block;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    color: #505052;
    background-color: #DCDFE4;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 8px;
    z-index: 1;
    text-align: center
}

.config-pasos-light .config-paso.active span {
    color: white;
    background-color: #4cb911
}

.config-pasos-light .col:first-child .config-paso {
    background-size: 50% 6px;
    background-position: right 12px
}

.config-pasos-light .col:last-child .config-paso {
    background-size: 50% 6px;
    background-position: left 12px
}

.perfil-avatar a {
    position: relative;
    display: block
}

.perfil-avatar a .perfil-avatar-hover {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0px;
    text-align: center;
    color: white;
    background-color: #00000054;
    padding-top: 80px;
    transition: all 0.2s ease
}

.perfil-avatar a .perfil-avatar-hover i {
    font-size: 32px;
    margin-bottom: 12px
}

.perfil-avatar a:hover .perfil-avatar-hover {
    opacity: 1;
    padding-top: 70px
}

.perfil-menu {
    width: 224px;
    float: left;
    padding-right: 24px
}

.perfil-menu .tab-menu-ficha a.list-group-item.active {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
    font-weight: 700;
    margin-top: 0px !important
}

.perfil-menu .tab-menu-ficha a.list-group-item {
    border-bottom: 0px solid !important;
    border-radius: 8px;
    font-weight: 500
}

.perfil-menu .tab-menu-ficha a.list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.5)
}

.perfil-menu .tab-menu-ficha a.list-group-item.active:hover {
    background-color: white
}

@media (max-width: 1280px) {
    .perfil-menu-sidebar {
        display: none
    }
}

.perfil-contenido {
    width: calc(100% - 224px);
    float: left
}

@media (max-width: 1280px) {
    .perfil-contenido-responsive {
        width: 100%
    }
}

.perfil-header {
    display: block;
    background-color: #F6F7FB;
    border-radius: 10px 10px 0px 0px;
    padding: 24px 30px 20px 30px;
    position: relative
}

.perfil-subdatos {
    display: block;
    float: left;
    font-size: 11px;
    font-weight: 500;
    height: 32px;
    line-height: 33px;
    margin-right: 4px;
    position: relative;
    background-color: #e5e8ef;
    border-radius: 4px;
    padding: 0px 10px
}

.perfil-subdatos i {
    font-size: 16px;
    line-height: 32px;
    margin-right: 8px;
    color: #9196a2;
    height: 32px;
    display: block;
    float: left
}

.titulo-ficha-seccion {
    background-color: #f6f7fb;
    width: 100%
}

.titulo-ficha-seccion h6 {
    background-color: white;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    margin: 0px;
    padding: 0px 64px 0px 32px
}

.ayuda-logo {
    width: 350px;
    padding-left: 12px
}

@media (max-width: 575.98px) {
    .ayuda-logo {
        width: 230px;
        padding: 0px
    }
}

.ayuda-header-index {
    margin-top: 72px
}

.ayuda-header-index .header-img {
    background-image: url("header-ayuda.png");
    background-repeat: no-repeat;
    background-position: calc(50% + 370px)
}

@media (max-width: 991.98px) {
    .ayuda-header-index .header-img {
        background-image: none
    }
}

.ayuda-header-index .header-img-mej {
    background-image: url("header-ayuda-mej.png");
    background-repeat: no-repeat;
    background-position: calc(50% + 370px)
}

@media (max-width: 991.98px) {
    .ayuda-header-index .header-img-mej {
        background-image: none
    }
}

.ayuda-header-section {
    padding-top: 7rem;
    padding-bottom: 4rem
}

.ayuda-header-section .section-img {
    height: 120px
}

.ayuda-fondo-mejoremos {
    background-image: url("fondo-mejoremos.webp");
    background-size: auto;
    background-position: center
}

.ayuda-buscador {
    margin-top: -40px;
    position: relative;
    z-index: 1
}

.ayuda-buscador .autocomplete {
    position: relative;
    display: inline-block
}

.ayuda-buscador .autocomplete .autocomplete-items {
    position: absolute;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    width: 100% !important;
    margin: 0px;
    margin-top: 1px;
    padding: 8px 0px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 8px 20px 0px rgba(55, 61, 76, 0.2), 0px 0px 5px 0px rgba(55, 61, 76, 0.15) !important
}

.ayuda-buscador .autocomplete .autocomplete-items div {
    padding: 10px 16px;
    cursor: pointer;
    background-color: #fff;
    font-size: 16px
}

.ayuda-buscador .autocomplete .autocomplete-items div:hover {
    background-color: rgba(131, 144, 185, 0.15);
    color: #0373E6
}

.ayuda-buscador .autocomplete .autocomplete-active {
    background-color: #0373E6 !important;
    color: #ffffff !important
}

.ayuda-busqueda {
    min-height: 150px;
    border-bottom: 1px solid #DEE2E6
}

.ayuda-busqueda:last-child {
    border-bottom: 0px
}

.ayuda-tarjeta-tutorial {
    padding: 10px;
    border-radius: 10px;
    min-height: 345px
}

.ayuda-tarjeta-tutorial img {
    border-radius: 10px
}

.ayuda-tarjeta-tutorial .tutorial-descripcion {
    padding: 15px 15px 10px 15px
}

.ayuda-tarjeta-tutorial .titulo-modulo {
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase
}

.ayuda-tarjeta-tutorial .tutorial-nombre {
    font-size: 18px;
    font-weight: 700
}

.tag-espacio {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 13px;
    display: block;
    color: #fff;
    background-color: #000;
    text-align: center;
    padding: 5px 8px
}

.tag-tl-10 {
    top: 10px !important;
    left: 10px !important
}

.ayuda-tarjeta-novedad {
    padding: 10px;
    border-radius: 10px
}

.ayuda-tarjeta-novedad img {
    display: block;
    border-radius: 10px;
    padding: 0
}

.ayuda-tarjeta-novedad .novedad-titulo {
    font-size: 18px;
    font-weight: 700
}

.ayuda-preguntas-img {
    right: 50px
}

.ayuda-anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden
}

.nav.menu-ayuda {
    padding: 24px;
    border-radius: 10px;
    font-size: 14px
}

.nav-link.menu-ayuda-link {
    color: #ffffff73
}

.nav-link.menu-ayuda-link.menu-ayuda-active {
    background: rgba(255, 255, 255, 0.2) !important
}

.nav-link.menu-ayuda-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff
}

.menu-ayuda {
    position: -webkit-sticky;
    position: sticky;
    top: 90px
}

.menu-ayuda-icono {
    font-size: 16px;
    margin-right: 10px;
    display: block !important;
    float: left;
    background-color: #00000026;
    width: 41px !important;
    height: 41px;
    line-height: 41px !important;
    text-align: center;
    border-radius: 50%;
    margin-left: -16px;
    transition: all 0.1s ease
}

.menu-ayuda-texto {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 14px;
    color: #fff
}

.nav.menu-ayuda2 {
    padding: 24px;
    border-radius: 10px
}

.nav-link.menu-ayuda2-link {
    color: #3a3c40
}

.nav-link.menu-ayuda2-link.menu-ayuda2-active {
    background-color: rgba(131, 144, 185, 0.15);
    color: #0373E6 !important;
    text-decoration: none
}

.nav-link.menu-ayuda2-link:hover {
    background-color: rgba(131, 144, 185, 0.15);
    color: #0373E6 !important
}

.menu-ayuda2 {
    position: -webkit-sticky;
    position: sticky;
    top: 90px
}

.menu-ayuda2 img {
    margin-right: 10px;
    display: block !important;
    float: left;
    width: 41px !important;
    height: 41px;
    line-height: 41px !important;
    text-align: center;
    border-radius: 50%;
    margin-left: -16px;
    transition: all 0.1s ease
}

.menu-ayuda2-texto {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: 700
}

.ayuda-titulo {
    padding-bottom: 10px;
    padding-top: 5px;
    margin-bottom: 30px
}

.ayuda-titulo-ico {
    font-size: 16px;
    margin-right: 10px;
    display: block !important;
    float: left;
    width: 41px !important;
    height: 41px;
    line-height: 41px !important;
    text-align: center;
    border-radius: 50%
}

.ayuda-prev-next {
    padding: 12px 16px;
    border-radius: 10px
}

.ayuda-prev-next span {
    letter-spacing: 1px
}

.ayuda-prev-next:hover {
    background-color: #F1F2FB
}

.ayuda-lista {
    position: relative;
    display: flex !important;
    align-items: center !important;
    padding: 7px;
    border-radius: 10px;
    page-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    transition: all 0.1s ease
}

.ayuda-lista .play-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    border-radius: 50%;
    font-size: 6px;
    line-height: 4px;
    display: block;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 6px
}

.ayuda-lista img {
    display: inline-block;
    margin-right: 10px;
    border-radius: 6px;
    height: 48px;
    width: 80px
}

.ayuda-lista a {
    color: #007bff;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 12px;
    display: inline-block
}

.ayuda-lista a:visited, .ayuda-lista a:hover {
    color: #007bff
}

.ayuda-lista .duracion {
    line-height: 11px;
    font-size: 11px;
    color: rgba(54, 55, 60, 0.75)
}

.ayuda-lista:hover {
    background-color: #F1F2FB
}

.ayuda-lista::after {
    display: block;
    content: '';
    bottom: 0;
    left: 10px;
    width: calc(100% - 20px);
    height: 1px;
    background: #F1F2FB;
    position: absolute
}

.ayuda-img-full {
    width: 100%;
    margin-bottom: 20px
}

.ayuda-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden
}

.ayuda-video iframe, .ayuda-video object, .ayuda-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ayuda-ejecutivo {
    margin-bottom: -150px;
    background-image: url("ayuda-bg-banner-ejecutivo.jpg");
    background-size: cover;
    background-position: center
}

.ayuda-ejecutivo-mej {
    margin-bottom: -150px;
    background-image: url("fondo-mejoremos.webp");
    background-size: cover;
    background-position: center
}

.footer-ayuda {
    background-color: #343A48;
    background-image: none;
    padding: 180px 0px 25px 0px !important;
    margin-top: 43px
}

.footer-ayuda h6 {
    color: #fff;
    margin-bottom: 20px
}

.footer-ayuda p {
    color: #ffffffad;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 8px
}

.footer-ayuda ul {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 30px
}

.footer-ayuda ul li {
    width: 100%
}

.footer-ayuda ul li a {
    width: 100%;
    display: block;
    color: #ffffffad;
    transition: all 0.2s ease;
    border-radius: 16px;
    padding: 5px
}

.footer-ayuda ul li a:hover {
    color: #fff;
    padding-left: 12px;
    background-color: rgba(255, 255, 255, 0.2)
}

.footer-ayuda a.social {
    display: block;
    float: left;
    background-color: #ffffffad;
    color: #343a48;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    transition: all 0.3s ease
}

.footer-ayuda a.social:hover {
    background-color: #ffffff;
    color: #e20578;
    transform: rotate(360deg)
}

.ayuda-disclaimer {
    background-color: #21252e;
    text-align: center;
    padding: 10px;
    color: #ffffffad
}
.sticky-wrapper {
    display: inline-block
}

.sticky-wrapper.is-sticky #sticker {
    padding-top: 15px;
    z-index: 1 !important;
    display: block;
    right: 42px;
    width: 100% !important
}

.contenido {
    margin-left: 200px;
    width: calc(100% - 200px);
    padding: 0px 40px;
    transition: all 0.2s ease
}

@media screen and (max-width: 768px) {
    .contenido {
        margin-left: 0px;
        width: 100%;
        padding: 0px 16px
    }
}

.w-30px {
    width: 30px
}

.w-40px {
    width: 40px
}

.w-50px {
    width: 50px
}

.w-60px {
    width: 60px
}

.w-75px {
    width: 75px
}

.w-80px {
    width: 80px
}

.w-100px {
    width: 100px
}

.w-120px {
    width: 120px
}

.w-140px {
    width: 140px
}

.w-150px {
    width: 150px
}

.w-200px {
    width: 200px
}

.w-250px {
    width: 250px
}

.w-300px {
    width: 300px
}

.w-100-1 {
    width: calc(100% - 1px)
}

.mw-100 {
    min-width: 100%
}

.h-100 {
    height: 100%
}

.margin-auto {
    margin-right: auto;
    margin-left: auto
}

.filtros-acciones {
    margin: 30px -15px
}

.filtros-acciones h1 {
    font-family: 'quicksand', sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding-top: 12px
}

.filtros-acciones h1 a {
    color: #3a3c403b;
    margin-right: ppx;
    font-size: 15px;
    display: block;
    float: left;
    width: 30px;
    margin-top: 1px
}

.filtros-acciones h1 a:hover {
    color: #E70441;
    margin-right: 3px;
    margin-left: -3px
}

.filtros-acciones .dropdown {
    float: left;
    margin-right: 6px
}

.rrhh-user-avatar {
    border-radius: 50%;
    margin-right: 8px;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    float: left
}

.icon-rango-notas {
    float: left;
    display: block;
    border-radius: 5px;
    color: #fff;
    padding-top: 10px;
    font-size: 22px;
    text-align: center;
    width: 42px;
    height: 42px;
    margin-right: 8px;
    margin-top: 4px
}

.barra-rango-notas {
    float: left;
    width: calc(100% - 50px)
}

.icon-block-xs {
    display: block;
    width: 18px;
    height: 18px;
    font-size: 14px;
    border-radius: 2px;
    text-align: center;
    padding-top: 3px;
    float: left;
    margin-right: 6px
}

.icon-16 {
    width: 32px;
    height: 32px;
    line-height: 32px !important;
    font-size: 16px;
    text-align: center
}

.icon-14 {
    width: 26px;
    height: 26px;
    line-height: 26px !important;
    font-size: 14px;
    text-align: center
}

.icon-svg svg {
    fill: currentColor;
    height: 16px;
    overflow: inherit
}

.icon-svg.font-12 svg {
    height: 12px
}

.col-xxl-3 {
    flex: 0 0 100%;
    max-width: 25%
}

@media only screen and (max-width: 1599px) {
    .col-xxl-3 {
        max-width: 100%
    }
}

.col-xxl-4 {
    flex: 0 0 100%;
    max-width: 33%
}

@media only screen and (max-width: 1599px) {
    .col-xxl-4 {
        max-width: 100%
    }
}

.col-xxl-6 {
    flex: 0 0 100%;
    max-width: 50%
}

@media only screen and (max-width: 1599px) {
    .col-xxl-6 {
        max-width: 100%
    }
}

.col-xxl-9 {
    flex: 0 0 100%;
    max-width: 75%
}

@media only screen and (max-width: 1599px) {
    .col-xxl-9 {
        max-width: 100%
    }
}

.col-xxl-12 {
    flex: 0 0 100%;
    width: 100%
}

@media only screen and (min-width: 1599px) {
    .col-xxl-12 {
        max-width: 100% !important
    }
}

.d-xxl-only {
    display: none
}

@media only screen and (min-width: 1599px) {
    .d-xxl-only {
        display: block
    }
}

.d-xl2-block {
    display: none
}

@media (max-width: 1280px) {
    .d-xl2-block {
        display: block
    }
}

.mensajitos {
    text-align: center;
    padding: 40px 10px
}

.mensajitos p {
    font-family: 'quicksand', sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin-top: 16px;
    color: rgba(54, 55, 60, 0.75)
}

.bg-ficha {
    background-image: url("fondo-ficha-1.png");
    background-size: 100% 404px;
    background-repeat: no-repeat;
    transition: all 0.2s ease
}

span.nee-icon {
    display: inline-block;
    position: relative;
    height: 30px;
    padding-left: 8px;
    padding-right: 8px;
    color: #fff;
    line-height: 30px;
    background-color: #cfd3da;
    border-radius: 3px;
    margin-right: 5px;
    float: left;
    margin-top: 1px;
    margin-bottom: 1px
}

span.nee-icon i {
    float: left;
    margin-left: -8px;
    margin-right: 8px;
    display: block;
    width: 30px;
    height: 30px;
    background-color: rgba(54, 55, 60, 0.25);
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    color: #fff;
    border-radius: 3px 0px 0px 3px;
    font-style: unset;
    font-weight: bold
}

span.nee-icon-eval {
    display: inline-block;
    position: relative;
    height: 30px;
    padding-left: 8px;
    padding-right: 8px;
    color: #fff;
    line-height: 30px;
    background-color: rgba(54, 55, 60, 0.1);
    border-radius: 15px;
    margin-right: 5px;
    float: left;
    margin-top: 1px;
    margin-bottom: 1px
}

span.nee-icon-eval i {
    float: left;
    margin-left: -8px;
    margin-right: 8px;
    display: block;
    width: 26px;
    height: 26px;
    background-color: rgba(54, 55, 60, 0.05);
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    border-radius: 15px;
    font-style: unset;
    font-weight: bold
}

span.nee-icon-eval:hover {
    background-color: #fff
}

.equipo-pie {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e8ef
}

.equipo-pie h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    margin-top: 6px;
    margin-bottom: 0px
}

.equipo-pie .close {
    position: absolute;
    right: 16px;
    top: 18px;
    display: block;
    background-color: rgba(20, 40, 74, 0.15);
    border-radius: 50%;
    padding: 0px;
    width: 32px;
    height: 32px;
    font-size: 18px;
    color: rgba(54, 55, 60, 0.75);
    text-shadow: none;
    opacity: 1;
    transition: all 0.2s ease
}

.equipo-pie .close:hover {
    background-color: #0373E6;
    color: #fff
}

.ev-unidad {
    background-color: transparent;
    font-size: 20px;
    font-weight: 800;
    padding: 0px 16px;
    height: 54px;
    line-height: 54px
}

.ev-unidad .ev-ponderacion {
    right: 50px;
    top: 12px;
    font-size: 16px;
    width: 50px;
    height: 30px;
    background-color: #0373E6;
    line-height: 32px
}

.ev-unidad .btn-ellipsis {
    top: 10px;
    right: 8px;
    position: absolute;
    margin: 0px
}

.ev-diagnostica .ev-icono {
    background-color: #2FB2FD
}

.ev-formativa .ev-icono {
    background-color: #F39205
}

.ev-sumativa .ev-icono {
    background-color: #4CB911
}

.ev-icono {
    display: block;
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 44px;
    width: 44px;
    height: 100%;
    border-radius: 4px 0px 0px 4px;
    float: left;
    position: absolute
}

.ev-contenido {
    float: left;
    width: 100%;
    padding-left: 44px;
    min-height: 44px
}

.ev-contenido .btn-ellipsis {
    margin-top: 4px;
    margin-right: 4px
}

.ev-titulo {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 0px 12px;
    width: 200px
}

.ev-titulo a {
    transition: all 0s ease !important
}

.ev-titulo a:hover {
    color: #0373e6 !important
}

.ev-datos {
    font-size: 12px;
    color: rgba(54, 55, 60, 0.5);
    padding: 0px 16px;
    border-left: 1px solid rgba(54, 55, 60, 0.1)
}

.ev-datos i {
    font-size: 16px;
    margin-right: 5px;
    color: rgba(54, 55, 60, 0.25)
}

.ev-ponderacion {
    background-color: #4cb911;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    width: 40px;
    text-align: center;
    line-height: 25px;
    height: 24px;
    border-radius: 4px;
    position: absolute;
    right: 44px
}

.ev-acumulativa {
    height: 34px;
    box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.15)
}

.ev-acumulativa .ev-contenido {
    min-height: 34px;
    height: 34px;
    padding-left: 0px
}

.ev-acumulativa .ev-titulo {
    font-size: 12px;
    width: 188px
}

.ev-acumulativa .ev-ponderacion {
    background-color: rgba(33, 61, 113, 0.08);
    color: #4cb911;
    font-size: 11px;
    right: 32px
}

.ev-acumulativa .btn-ellipsis {
    width: 28px;
    height: 30px;
    margin-top: 2px;
    margin-right: 2px
}

.ev-acumulativa .btn-ellipsis button {
    width: 28px;
    height: 30px
}

.ev-small .ev-datos {
    display: none
}

.ev-small .btn-ellipsis {
    display: none
}

.ev-small .ev-ponderacion {
    right: 16px
}

.ev-small .ev-acumulativa .ev-ponderacion {
    right: 5px
}

.ev-small .ev-unidad .ev-ponderacion {
    right: 16px
}

.rounded-0 {
    border-radius: 0px !important
}

.rounded-4 {
    border-radius: 4px !important
}

.rounded-8 {
    border-radius: 8px !important
}

.rounded-10 {
    border-radius: 10px !important
}

.rounded-12 {
    border-radius: 12px !important
}

.rounded-20 {
    border-radius: 20px !important
}

.border-2 {
    border: 2px solid #cfd2da
}

.border-2px {
    border-width: 2px !important
}

.globo-comentario {
    background-color: white;
    color: #36373c;
    border-radius: 10px;
    border: 2px solid #cdcdce;
    padding: 8px 16px;
    position: relative;
    position: relative
}

.globo-comentario label {
    color: #000000 !important;
    margin-bottom: 4px
}

.globo-comentario p {
    margin: 0px !important
}

.globo-comentario span {
    opacity: 0.5;
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    font-weight: 600
}

.globo-comentario::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 8px solid #cdcdce;
    transform: rotate(-90deg);
    position: absolute;
    left: -13px;
    top: 7px;
    z-index: 0
}

.globo-comentario.nuevo {
    background: #fff6dd
}

.avatar-selector {
    display: block;
    text-align: center
}

.avatar-selector label.btn {
    width: 45px;
    height: 45px;
    box-shadow: none;
    background-color: #ebedf4;
    margin: 3px !important;
    border-radius: 50% !important;
    box-shadow: 0px 0px 0px 0px #fff;
    transition: all 0.2s ease;
    padding: 0px !important;
    flex: none;
    overflow: inherit
}

.avatar-selector label.btn img {
    width: 100%;
    border-radius: 50%
}

.avatar-selector label.btn:hover {
    box-shadow: 0px 0px 0px 3px rgba(20, 40, 74, 0.15)
}

.avatar-selector label.btn.active {
    box-shadow: 0px 0px 0px 3px #af2490;
    background-color: #af2490;
    position: relative
}

.avatar-selector label.btn::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-color: #af2490;
    background-image: url("icon_check.png") !important;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
    position: absolute;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 0;
    transform: scale(0.5)
}

.avatar-selector label.btn.active::after {
    opacity: 1;
    transform: scale(1)
}

.opacity-0 {
    opacity: 0
}

.opacity05 {
    opacity: 0.5
}

.opacity08 {
    opacity: 0.8
}

.nav240 {
    width: 240px;
    float: left
}

.content240 {
    width: calc(100% - 240px);
    float: left
}

.nav200 {
    width: 200px;
    float: left
}

.content200 {
    width: calc(100% - 200px);
    float: left
}

.nav180 {
    width: 180px;
    float: left
}

.content180 {
    width: calc(100% - 180px);
    float: left
}

.nav150 {
    width: 150px;
    float: left
}

.content150 {
    width: calc(100% - 150px);
    float: left
}

.nav120 {
    width: 120px;
    float: left
}

.content120 {
    width: calc(100% - 120px);
    float: left
}

.nav100 {
    width: 100px;
    float: left
}

.content100 {
    width: calc(100% - 100px);
    float: left
}

.nav80 {
    width: 80px;
    float: left
}

.content80 {
    width: calc(100% - 80px);
    float: left
}

.nav60 {
    width: 60px;
    min-width: 60px;
    float: left
}

.content60 {
    width: calc(100% - 60px);
    float: left
}

.nav40 {
    width: 40px;
    float: left
}

.content40 {
    width: calc(100% - 40px);
    float: left
}

.p-15 {
    padding: .5rem !important
}

.pt-25 {
    padding-top: .75rem !important
}

.pb-25 {
    padding-bottom: .75rem !important
}

.pr-25 {
    padding-right: .75rem !important
}

.pl-25 {
    padding-left: .75rem !important
}

.p-45 {
    padding: 2rem !important
}

.pt-45 {
    padding-top: 2rem !important
}

.pb-45 {
    padding-bottom: 2rem !important
}

.pr-45 {
    padding-right: 2rem !important
}

.pl-45 {
    padding-left: 2rem !important
}

.ayuda-icon {
    outline: none
}

.ayuda-icon i {
    margin-left: 0.3rem;
    cursor: pointer;
    color: rgba(54, 55, 60, 0.25);
    transition: all 0.2s ease
}

.ayuda-icon:hover i {
    color: #0373E6
}

@-webkit-keyframes rotating

    /* Safari and Chrome */
{
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes rotating {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

.spinner {
    -webkit-animation: rotating 0.5s linear infinite;
    animation: rotating 0.5s linear infinite
}

.bor-2px {
    border-width: 2px !important
}

.bor-3px {
    border-width: 3px !important
}

.bor-5px {
    border-width: 5px !important
}

.bor-solid {
    border-style: solid !important
}

.my-slider-container {
    position: relative;
    margin: 0px -10px
}

.control {
    list-style: none
}

@media (max-width: 1251px) {
    .control {
        display: none
    }
}

.control li {
    position: absolute;
    z-index: 1;
    top: calc(50% - 22px);
    transform: translateY(-50%);
    color: rgba(54, 55, 60, 0.5);
    background: #F6F7FB;
    opacity: 1;
    padding: 12px 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2
}

.control li:hover {
    opacity: 1;
    color: white;
    background: #e20578
}

.control li.prev {
    left: -52px !important
}

.control li.next {
    right: -52px !important
}

.tns-nav {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px
}

.tns-nav button {
    height: 13px;
    width: 8px;
    background-color: rgba(20, 40, 74, 0.15);
    border: none;
    margin-left: 7px;
    border-radius: 50%
}

.tns-nav .tns-nav-active {
    background-color: #0373E6;
    outline: none !important
}

.tns-ovh {
    padding: 10px
}

.tns-ovh::before {
    content: '';
    display: block;
    width: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    background: linear-gradient(90deg, #e5e8ef 0%, rgba(229, 232, 239, 0) 100%);
    z-index: 1
}

.tns-ovh::after {
    content: '';
    display: block;
    width: 10px;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    background: linear-gradient(270deg, #e5e8ef 0%, rgba(229, 232, 239, 0) 100%);
    z-index: 1
}

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none
}

.btn-backtotop {
    font-size: 12px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 0px;
    z-index: 99
}

.youtube-responsive {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%
}

.youtube-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 1px)
}

.fas-svg svg {
    fill: currentColor;
    height: 16px
}

.pasos-seguimiento {
    background-image: url("pasos-linea-2.png");
    background-repeat: repeat-y;
    background-position: 26px center
}

.pasos-seguimiento .nav60 {
    padding-top: 10px !important;
    padding-left: .5rem !important
}

.pasos-seguimiento .icono-seguimiento {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 18px
}

.pasos-seguimiento .titulo-seguimiento-1 {
    font-family: 'Poppins', sans-serif;
    color: #36373c;
    font-size: 14px;
    line-height: 16px;
    font-weight: 800
}

.pasos-seguimiento .titulo-seguimiento-2 {
    font-family: 'Poppins', sans-serif;
    color: rgba(54, 55, 60, 0.75) !important;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600
}

.pasos-seguimiento .fecha-seguimiento {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.6;
    line-height: 11px;
    display: block;
    margin-top: 3px;
    margin-bottom: 10px
}

.pasos-seguimiento:first-child {
    background-size: 2px calc(100% - 50px);
    background-repeat: no-repeat;
    background-position: 26px bottom
}

.pasos-seguimiento:last-child {
    background-size: 2px 50px;
    background-repeat: no-repeat;
    background-position: 26px top
}

.login-rrss {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 0px;
    margin-top: 60px
}

.login-rrss i.rrss {
    display: inline-block;
    width: 38px;
    height: 38px;
    background: #0373E6;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 38px;
    font-size: 16px;
    transition: all 0.2s ease
}

.login-rrss i.rrss:hover {
    transform: translate(0px, -4px);
    box-shadow: 0px 4px rgba(20, 40, 74, 0.15)
}

.webinar-avatar-expositor {
    background-image: url("webinar_avatar_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding: 12%
}

.webinar-premio {
    background-image: url("webinar_premio_bg.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat
}

.icon-svg {
    fill: currentColor
}

.icon-svg.font-12 {
    height: 12px
}

.icon-svg.font-16 {
    height: 16px
}

.icon-svg.font-20 {
    height: 20px
}

.icono-asignatura {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    line-height: 42px;
    text-align: center;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 14px
}

.span-link-hover {
    opacity: 0
}

td:hover > .span-link-hover, div:hover > .span-link-hover, span:hover > .span-link-hover {
    opacity: 1
}

.opciones-hover {
    background: linear-gradient(90deg, rgba(237, 240, 244, 0) 0%, #edf0f4 35%, #edf0f4 100%);
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    opacity: 0;
    transition: all 0.1s ease
}

div:hover > .opciones-hover {
    opacity: 1
}

.overflow-unset {
    overflow: unset !important
}

.menu-demo {
    position: fixed;
    bottom: -140px;
    left: 0px;
    width: 300px;
    height: 300px;
    z-index: 99
}

.menu-demo .fondo-menu-demo {
    background-color: red;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    margin-left: -80px;
    margin-bottom: -80px;
    transition: all 0.3s ease
}

.menu-demo .fondo-menu-demo:hover {
    width: 400px;
    height: 400px;
    margin-left: -130px;
    margin-top: -30px
}

/* Absolute Center Spinner */
#loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Transparent Overlay */
#loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

    background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
}

/* :not(:required) hides these rules from IE9 and below */
#loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

#loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 150ms infinite linear;
    -moz-animation: spinner 150ms infinite linear;
    -ms-animation: spinner 150ms infinite linear;
    -o-animation: spinner 150ms infinite linear;
    animation: spinner 150ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}