@import url('colors.css');
@import url('fonts.css');

html,
body {
    font-family: var(--font-family-regular);
    overflow: hidden;
    background-color: var(--color-blue-pastel);
    &.expanded{
        &::before {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            content: '';
            display: block;
            background-color: rgba(0,0,0,0.4);
            width: 100%;
            height: 100%;
            z-index: 10;
        }
    }
}

p,
h2,
h3{
    margin: 0;
    line-height: normal;
}

.qx-text--black{
    color: #252525 !important;
}

.qx-nav {
    background-color: var(--color-blue-pastel);
    -webkit-box-shadow: 0 2px 4px 0 rgba(93, 120, 157, 0.08);
    -moz-box-shadow: 0 2px 4px 0 rgba(93, 120, 157, 0.08);
    -ms-box-shadow: 0 2px 4px 0 rgba(93, 120, 157, 0.08);
    -o-box-shadow: 0 2px 4px 0 rgba(93, 120, 157, 0.08);
    box-shadow: 0 2px 4px 0 rgba(93, 120, 157, 0.08);
    padding: 0 16px;
    .qx-nav__principal{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 70px;
        .qx-nav__logo{
            .qx-nav__burger {
                cursor: pointer;
            }
        }
        .qx-nav__menu {
            gap: 32px;
            width: 100%;
            .qx-menu__icon{
                cursor: pointer;
                width: 36px;
                min-width: 36px;
                height: 36px;
                border-radius: 4px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                -webkit-transition: background-color .35s ease;
                -moz-transition: background-color .35s ease;
                -ms-transition: background-color .35s ease;
                -o-transition: background-color .35s ease;
                transition: background-color .35s ease;
                &:hover {
                    background-color: var(--color-blue-20);
                }
                span{
                    min-width: 18px;
                    border-radius: 24px;
                    background-color: #0056A3;
                    color: #FFFFFF;
                    font-size: 14px;
                    line-height: 22px;
                    position: absolute;
                    right: -25px;
                    top: -4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 5px;
                    height: 18px;
                    .notificaciones & {
                        right: -8px;
                    }
                }
            }
            .qx-menu__user {
                width: 35px;
                min-width: 35px;
                height: 35px;
                background-color: #9747FF;
                border-radius: 50%;
                color: #FFFFFF;
                cursor: pointer;
                margin-left: 18px;
                h2 {
                    font-size: 15px;
                    font-family: var(--font-family-bold);
                }
            }
        }
    }
    .qx-nav__secondary{
        height: 35px;
        width: 100%;
        display: none;
        align-items: center;
        justify-content: flex-end;
    }
    .qx-menu__dropdown{
        .bootstrap-select {
            .dropdown-toggle{
                box-shadow: none;
                outline: none !important;
                border: none !important;
                background-color: transparent !important;
                color: var(--color-dark-100);
                &::after {
                    border: none;
                    background-image: url('../icons/icon-arrow-down-dark.svg');
                    background-size: 15px;
                    width: 15px;
                    height: 15px;
                }
            }
            .dropdown-menu{
                margin-top: 25px;
                border-radius: 12px;
                border: none;
                box-shadow: 0 0 7.3px 0 rgba(64, 119, 183, 0.28);
                width: 100%;
                max-width: 240px;
                .dropdown-item{
                    &.active,
                    &:active{
                        background-color: transparent;
                        color: #0056A3;
                    }
                    span{
                        &.text{
                            white-space: normal;
                        }
                    }
                }
            }
        }
    }
}

.qx-search{
    width: 100%;
    max-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    .qx-search__arrow{
        width: 100%;
        max-width: 40px;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
}

.qx-search__filter,
.qx-search__menu{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: max-content;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 6px;
    background-color: transparent;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
    .show-search &{
        background-color: #FFFFFF;
        border-color: var(--color-blue-20);
        max-width: 400px;
        padding: 6px 15px;
    }
    &.focused {
        border-color: #0056A3;
        .qx-search__icon {
            .default{
                display: none;
            }
            .active{
                display: block;
            }
        }
    }
    .qx-search__input{
        overflow: hidden;
        width: 0;
        .show-search & {
            width: 100%;
        }
        input{
            border: none;
            box-shadow: none;
            background-color: transparent;
            outline: none;
            font-size: 16px;
            color: #616981;
            width: 100%;
            min-width: 260px
        }
    }
    .qx-search__icon {
        .default{
            display: block;
        }
        .active{
            display: none;
        }
    }
}
.qx-search__filter{
    height: 48px;
    &.show-search{
        background-color: #FFFFFF;
        border-color: var(--color-blue-20);
        max-width: 400px;
        padding: 6px 15px;
        &.focused {
            border-color: #0056A3;
            .qx-search__icon {
                .default{
                    display: none;
                }
                .active{
                    display: block;
                }
            }
        }
    }
}

.qx-sidebar{
    width: 100%;
    max-width: max-content;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    .qx-sidebar__principal{
        position: fixed;
        background-color: #FFFFFF;
        width: 100%;
        max-width: 70px;
        background-color: #FFFFFF;
        height: calc(100dvh - 70px);
        z-index: 10;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: transform .35s cubic-bezier(.4,0,.2,1);
        -moz-transition: transform .35s cubic-bezier(.4,0,.2,1);
        -ms-transition: transform .35s cubic-bezier(.4,0,.2,1);
        -o-transition: transform .35s cubic-bezier(.4,0,.2,1);
        transition: transform .35s cubic-bezier(.4,0,.2,1);
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: var(--color-blue-30);
            border-radius: 45px;
        }
        .expanded & {
            max-width: 258px;
        }
        .qx-sidebar__logo{
            height: 64px;
            display: none;
            align-items: center;
            padding: 0 24px;
        }
        .qx-sidebar__item {
            border-left: 8px solid transparent;
            padding: 0 8px;
            position: relative;
            &.active,
            &:hover{
                background-color: var(--color-blue-10);
                border-color: #0056A3;
                .qx-item__header{
                    .qx-sidebar__icon{
                        .default{
                            display: none;
                        }
                        .active{
                            display: block;
                        }
                    }
                    .qx-sidebar__text{
                        p{
                            color: var(--color-blue-90);
                            font-family: var(--font-family-bold);
                        }
                    }
                }
            }
            &:hover{
                border-color: transparent;
                &.active{
                   border-color: #0056A3; 
                }
            }
            .qx-item__header{
                height: 64px;
                text-decoration: none;
                display: flex;
                align-items: center;
                justify-content: center;
                -webkit-transition: all .35s ease;
                -moz-transition: all .35s ease;
                -ms-transition: all .35s ease;
                -o-transition: all .35s ease;
                transition: all .35s ease;
                cursor: pointer;
                width: 100%;
                gap: 8px;
                .qx-sidebar__icon{
                    width: 100%;
                    max-width: 24px;
                    .default{
                        display: block;
                    }
                    .active{
                        display: none;
                    }
                }
                .qx-sidebar__text{
                    display: none;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    .expanded & {
                        display: flex;
                    }
                    p{
                        -webkit-transition: all .35s ease;
                        -moz-transition: all .35s ease;
                        -ms-transition: all .35s ease;
                        -o-transition: all .35s ease;
                        transition: all .35s ease;
                        font-size: 16px;
                        line-height: 24px;
                        color: #616981;
                        font-size: 16px;
                    }
                    .qx-sidebar__arrow{
                        -webkit-transition: transform .35s ease;
                        -moz-transition: transform .35s ease;
                        -ms-transition: transform .35s ease;
                        -o-transition: transform .35s ease;
                        transition: transform .35s ease;
                    }
                }
            }
            .qx-item__content{
                display: flex;
                flex-direction: column;
                gap: 10px;
                width: 100%;
                padding-left: 32px;
                height: 0;
                overflow: hidden;
                -webkit-transition: all .35s ease;
                -moz-transition: all .35s ease;
                -ms-transition: all .35s ease;
                -o-transition: all .35s ease;
                transition: all .35s ease;
                .qx-item__submenu{
                    text-decoration: none;
                    display: flex;
                    color: #616981;
                    font-size: 14px;
                    line-height: 22px;
                    -webkit-transition: all .35s ease;
                    -moz-transition: all .35s ease;
                    -ms-transition: all .35s ease;
                    -o-transition: all .35s ease;
                    transition: all .35s ease;
                    &.active,
                    &:hover {
                        color: var(--color-blue-90);
                        font-family: var(--font-family-medium);
                    }
                }
            }
            .expanded & {
                padding: 0 32px;
            }
        }
        .qx-item__dropdown {
            &.active{
                .qx-sidebar__text{
                    .qx-sidebar__arrow{
                        transform: rotate(180deg);
                    }
                }
                .qx-item__content{
                    height: 0;
                    padding-bottom: 0;
                    .expanded & {
                        height: auto;
                        padding-bottom: 12px;
                    }
                }
            }
        }
    }
    .qx-sidebar__secondary{
        position: fixed;
        width: 100%;
        min-width: 340px;
        max-width: 340px;
        border-top-right-radius: 26px;
        border-bottom-right-radius: 26px;
        display: block;
        z-index: 5;
        background-color: #FFFFFF;
        left: 70px;
        border-left: 1px solid var(--color-blue-10);
        .reduced &{
            display: none;
        }
        .qx-sidebar__header{
            height: 140px;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            justify-content: center;
            padding-left: 15px;
            padding-right: 30px;
            gap: 3px;
            border-bottom: 1px solid var(--color-blue-10);
            .preguntas &{
                height: 100px;
                border: none;
                padding-top: 10px;
            }
            .resultados &{
                border: none;
                .qx-dropdown{
                    width: 100%;
                    .bootstrap-select{
                        width: 100% !important;
                        min-width: 100%;
                    }
                }
            }
            h2{
                font-size: 18px;
                line-height: 24px;
                color: #033E73;
                font-family: var(--font-family-bold);
                margin-bottom: 12px;
            }
            .qx-header__percent{
                width: 100%;
                p{
                    font-size: 16px;
                    line-height: 24px;
                    color: #616981;
                    margin-bottom: 2px;
                    .preguntas &{
                        color: var(--color-blue-80);
                        margin: 0;
                        margin-right: 5px;
                        font-family: var(--font-family-medium);
                    }
                }
                .qx-percent{
                    width: 100%;
                    height: 8px;
                    background-color: var(--color-blue-10);
                    border-radius: 25px;
                    overflow: hidden;
                    span{
                        background-color: var(--color-blue-80);
                        width: 20%;
                        height: 100%;
                        display: block;
                    }
                    .preguntas &{
                        height: 12px;
                    }
                }
            }
            .qx-sidebar__dropdown{
                width: 100%;
                .qx-dropdown{
                    width: 100%;
                    .bootstrap-select{
                        width: 100% !important;
                        min-width: 100%;
                        .dropdown-toggle{
                            .filter-option{
                                .filter-option-inner{
                                    .filter-option-inner-inner{
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        width: 100%;
                                        max-width: 100px;
                                    }
                                }
                            }
                        }
                        .dropdown-menu{
                            width: 300px;
                            .dropdown-item{
                                padding-left: 20px;
                                display: flex;
                                align-items: center;
                                &.circle{
                                    .text{
                                        display: flex;
                                        align-items: center;
                                        &::before{
                                            content: '';
                                            display: block;
                                            border-radius: 50%;
                                            width: 17px;
                                            height: 17px;
                                            margin-right: 6px;
                                        }
                                    }
                                    &.red{
                                        .text{
                                            &::before{
                                                background-color: #E43F4D;
                                            }
                                        }
                                    }
                                    &.yellow{
                                        .text{
                                            &::before{
                                                background-color: #FFBB00;
                                            }
                                        }
                                    }
                                    &.green{
                                        .text{
                                            &::before{
                                                background-color: #1FB778;  
                                            }
                                        }
                                    }
                                }
                                .check-mark{
                                    right: initial;
                                    left: 16px;
                                    width: 20px;
                                    height: 20px;
                                    border: 1px solid #0056A3;
                                    border-radius: 3px;
                                    display: flex !important;
                                    align-items: center;
                                    justify-content: center;
                                    position: relative;
                                    top: initial;
                                    left: 0;
                                    margin-right: 12px;
                                    &::after{
                                        border-color: #FFFFFF;
                                        width: 5px;
                                        height: 10px;
                                        border-style: solid;
                                        border-width: 0 2px 2px 0;
                                    }
                                    .selected &{
                                        background-color: #0056A3;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .qx-sidebar__content {
            padding: 8px 0;
            overflow-y: auto;
            height: calc(100dvh - 210px);
            .preguntas & {
                height: calc(100dvh - 170px);
            }
            &::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }
            &::-webkit-scrollbar-thumb {
                background-color: var(--color-blue-30);
                border-radius: 45px;
            }
            .qx-clase{
                margin: 24px 0;
                border: none;
                border-radius: 0;
                border-bottom: 1px solid var(--color-blue-10);
                .qx-clase__title{
                    padding: 0 24px;
                    margin-bottom: 16px;
                    .accordion-button{
                        background-color: transparent;
                        padding: 0;
                        font-size: 16px;
                        font-family: var(--font-family-bold);
                        border: none;
                        box-shadow: none;
                        outline: none;
                    }
                }
                .qx-clase__content{
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    .qx-clase__item{
                        display: flex;
                        align-items: flex-start;
                        border-color: #000000;
                        border-left: 6px solid transparent;
                        height: 60px;
                        width: 100%;
                        padding: 6px 0;
                        padding-right: 8px;
                        cursor: pointer;
                        -webkit-transition: all .35s ease;
                        -moz-transition: all .35s ease;
                        -ms-transition: all .35s ease;
                        -o-transition: all .35s ease;
                        transition: all .35s ease;
                        &.red {
                            border-color: #E43F4D;
                        }
                        &.yellow {
                            border-color: #FFBB00;
                        }
                        &.green {
                            border-color: #50CD89;
                        }
                        &:hover{
                            background-color: var(--color-blue-10);
                        }
                        .qx-item__icon{
                            width: 100%;
                            max-width: 60px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            .default{
                                display: block;
                                .active & {
                                    display: none;
                                }
                            }
                            .active{
                                display: none;
                                .active & {
                                    display: block;
                                }
                            }
                        }
                        .qx-item__description{
                            width: 100%;
                            h2{
                               font-size: 16px;
                               line-height: 24px;
                               color: var(--color-dark-100); 
                            }
                            p{
                               font-size: 16px;
                               line-height: 22px;
                               color: var(--color-dark-100); 
                            }
                        }
                        .qx-item__date{
                            width: 100%;
                            max-width: max-content;
                            p{
                                font-size: 12px;
                                color: #616981;
                            }
                        }
                    }
                }
            }
            .qx-resultado__item{
                padding: 9px 12px;
                border-bottom: 1px solid var(--color-blue-20);
                cursor: pointer;
                -webkit-transition: all .35s ease;
                -moz-transition: all .35s ease;
                -ms-transition: all .35s ease;
                -o-transition: all .35s ease;
                transition: all .35s ease;
                border-left: 3px solid transparent;
                &.active,
                &:hover{
                    background-color: var(--color-blue-10);
                    h2{
                        color: var(--color-blue-90);
                    }
                }
                &.active{
                    border-left-color: var(--color-blue-90);
                }
                span{
                    font-size: 12px;
                    color: #616981;
                    margin-bottom: 7px;
                }
                h2{
                    font-size: 14px;
                    color: var(--color-dark-100);
                    font-family: var(--font-family-bold);
                    margin-bottom: 7px;
                }
                .qx-content{
                    display: flex;
                    display: -webkit-flex;
                    align-items: center;
                    gap: 8px;
                    p{
                       font-size: 14px;
                       line-height: 22px;
                        color: var(--color-dark-100); 
                    }
                }
            }
        }
    }
    .qx-sidebar__expanded{
        position: absolute;
        top: 90px;
        left: 410px;
        width: 27px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        background-color: #033E73;
        cursor: pointer;
        img {
            -webkit-transition: transform .35s ease;
            -moz-transition: transform .35s ease;
            -ms-transition: transform .35s ease;
            -o-transition: transform .35s ease;
            transition: transform .35s ease;
            .reduced & {
                transform: rotate(180deg);
            }
        }
        .expanded & {
            display: none;
        }
        .reduced & {
            left: 70px;
        }
    }
}

.qx-main{
    height: calc(100dvh - 70px);
    padding: 60px 24px;
    margin-left: 70px;
    overflow-y: auto;
    -webkit-transition: margin-left .25s ease;
    -moz-transition: margin-left .25s ease;
    -ms-transition: margin-left .25s ease;
    -o-transition: margin-left .25s ease;
    transition: margin-left .25s ease;
    &.qx-main--expanded{
        margin-left: 410px;
        padding: 60px;
        .reduced &{
            margin-left: 70px;
        }
    }
}

.qx-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.qx-title {
    margin-bottom: 24px;
    h2{
        font-size: 26px;
        color: #033E73;
        font-family: var(--font-family-bold);
    }
    h3{
        font-size: 20px;
        color: #033E73;
        font-family: var(--font-family-medium);
        width: 100%;
        max-width: 740px;
    }
}

.qx-subtitle {
    margin-bottom: 36px;
    p{
        font-size: 16px;
        color: #616981;
    }
}

.qx-button{
    border-radius: 25px;
    height: 36px;
    border: 1px solid #0056A3;
    font-size: 16px;
    font-family: var(--font-family-medium);
    color: #0056A3;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
    &.qx-button--raised,
    &:hover{
        background-color: #0056A3;
        color: #FFFFFF;
    }
    &.qx-button--danger{
        background-color: #FFF5F8;
        color: var(--color-red-100);
        border-color: #FFF5F8;
    }
    &.qx-button--success{
        background-color: #EDFDF1;
        color: #1FB778;
        border-color: #EDFDF1;
    }
    &.qx-button--default{
        background-color: transparent;
        color: #0056A3;
        border-color: #0056A3;
        &:hover{
            color: #0056A3;
        }
    }
    &.qx-button--transparent{
        background-color: #FFFFFF;
        color: #0056A3;
        border-color: FFFFFF;
        &:hover{
            background-color: #FFFFFF;
        }
    }
    &[disabled]{
        opacity: .5;
        cursor: default;
    }
}

.qx-dropdown{
    label{
        display: block;
        margin-bottom: 5px;
    }
    .bootstrap-select{
        width: 100%;
        max-width: max-content;
        min-width: 120px;
        .dropdown-toggle{
            box-shadow: none;
            outline: none !important;
            border-color: var(--color-blue-20);
            background-color: transparent !important;
            color: var(--color-dark-100);
            border-radius: 12px;
            height: 44px;
            &::after {
                border: none;
                background-image: url('../icons/icon-arrow-down-dark.svg');
                background-size: 15px;
                width: 15px;
                height: 15px;
            }
            .filter-option{
                display: flex;
                align-items: center;
                font-size: 14px;
            }
        }
    }
}

.qx-login__slider,
.qx-home{
    gap: 20px;
    margin-bottom: 20px;
    .qx-home__sliders{
        width: 100%;
        max-width: 820px;
        .qx-slider__actions{
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 100%;
            max-width: max-content;
            margin: auto;
            margin-top: 15px;
            margin-bottom: 15px;
            .qx-slider__nav{
              .owl-prev{
                position: absolute;
                left: -48px;
                top: 0;
                border: 1px solid #033E73;
                border-radius: 14px;
                width: 38px;
                height: 38px;
                background-color: transparent;
                span{
                    color: #033E73;
                    font-size: 24px;
                    line-height: normal;
                }
              }
              .owl-next{
                position: absolute;
                right: -48px;
                top: 0;
                border: 1px solid #033E73;
                border-radius: 14px;
                width: 38px;
                height: 38px;
                background-color: transparent;
                span{
                    color: #033E73;
                    font-size: 24px;
                    line-height: normal;
                }
              }  
            }
            .qx-slider__dots{
                margin-top: 10px;
                display: flex;
                align-items: center;
                .owl-dot{
                    border: none;
                    box-shadow: none;
                    padding: 0 4px;
                    background-color: transparent;
                    span{
                        width: 7px;
                        height: 7px;
                        border-radius: 25px;
                        background-color: var(--color-blue-30);
                        border: none;
                        box-shadow: none;
                        display: block;
                        content: '';
                        .active & {
                            background-color: var(--color-blue-60);
                            width: 45px;
                        }
                    }
                }
            }
        }
    }
    .qx-home__content{
        width: 100%;
        max-width: 365px;
        gap: 20px;
    }
}

.qx-home__default{
    background-color: #FFFFFF;
    padding: 32px;
    margin-bottom: 20px;
    gap: 20px;
    .qx-home__content{
        h2{
            font-size: 24px;
            line-height: normal;
            font-family: var(--font-family-medium);
            color: #033E73;
            margin-bottom: 16px;
            font-weight: 100;
        }
        p{
            font-size: 18px;
            line-height: 24px;
            color: var(--color-dark-100);
            margin-bottom: 24px;
        }
        .qx-home__list{
            margin-bottom: 32px;
            .qx-item__list{
                display: flex;
                align-items: center;
                gap: 16px;
                margin: 16px 0;
                .qx-icon{
                    width: 38px;
                    height: 38px;
                    min-width: 38px;
                    border-radius: 25px;
                    background-color: var(--color-blue-20);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .qx-text{
                    p{
                        margin: 0;
                        font-size: 18px;
                        line-height: 24px;
                    }
                }
            }
        }
        .qx-home__actions{
            .qx-button{
                width: 100%;
                max-width: 380px;
                height: 44px;
            }
        }
    }
    .qx-home__image{
        width: 100%;
        max-width: 360px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.qx-multimedia{
    background-color: #FFFFFF;
    padding: 20px 24px;
    margin-bottom: 20px;
    .qx-multimedia__header{
        margin-bottom: 20px;
        .qx-multimedia__title{
            .qx-text{
                h2{
                    font-size: 20px;
                    line-height: normal;
                    font-family: var(--font-family-medium);
                    margin-bottom: 6px;
                }
                p{
                    font-size: 14px;
                    color: #616981;
                }
            }
        }
    }
    .qx-multimedia__content{
        width: 100%;
        height: 650px;
        border-radius: 14px;
        overflow: hidden;
        background-color: #DDE1E6;
        margin-bottom: 20px;
    }
}

.qx-calificacion{
    border-radius: 20px;
    background-color: #0056A3;
    overflow: hidden;
    padding: 0 30px;
    margin-bottom: 20px;
    padding: 20px;
    .qx-calificacion__image{
        margin-bottom: -20px;
    }
    .qx-calificacion__content{
        width: 100%;
        max-width: 360px;
        h2{
            color: #FFFFFF;
            font-size: 20px;
            line-height: normal;
            margin-bottom: 5px;
            font-family: var(--font-family-medium);
        }
        p{
            font-size: 16px;
            line-height: 24px;
            color: var(--color-blue-20);
        }
    }
    .qx-califincacion__actions{
        width: 100%;
        max-width: 480px;
        .qx-icon{
            cursor: pointer;
            .default{
                display: block;
            }
            .yellow,
            .white{
                display: none;
            }
            &:hover{
               .white{
                    display: block;
                }
                .yellow,
                .default{
                    display: none;
                } 
            }
            &.selected{
                .yellow{
                    display: block;
                }
                .white,
                .default{
                    display: none;
                }
            }
        }
    }
}

.qx-recursos{
    background-color: #FFFFFF;
    padding: 20px 24px;
    margin-bottom: 20px;
    h2 {
        font-size: 24px;
        line-height: normal;
        font-family: var(--font-family-medium);
        color: var(--color-dark-100);
        margin-bottom: 20px;
    }
    .qx-recursos__list{
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
        gap: 24px;
        .qx-recurso__item{
            width: 124px;
            height: 124px;
            border-radius: 16px;
            border: 1px solid var(--color-blue-20);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 12px;
            text-align: center;
            .qx-icon{
                height: 50px;
            }
        }
    }
}

.qx-problemas {
    background-color: #FFFFFF;
    padding: 20px;
    h3 {
        font-size: 20px;
        line-height: normal;
        font-family: var(--font-family-medium);
        color: var(--color-dark-100);
        margin-bottom: 20px;
    }
    .form-switch{
        display: flex;
        align-items: center;
        padding: 0;
        .form-check-input{
            height: 24px;
            width: 48px;
            margin: 0;
            margin-right: 8px;
            cursor: pointer;
        }
        .form-check-label{
            font-size: 16px;
        }
    }
}

.qx-modal__calificacion{
    width: 100%;
    max-width: 600px;
    .modal-body{
        padding: 0 !important;
        .qx-calificacion__success{
            padding-left: 24px;
            padding-right: 24px;
            padding-bottom: 48px;
            text-align: center;
            img{
                margin-bottom: 12px;
            }
            h2{
                font-size: 18px;
                line-height: 24px;
                margin-bottom: 16px;
                color: #0056A3;
                font-family: var(--font-family-bold);
            }
            p{
                font-size: 16px;
                line-height: 24px;
                color: #000000;
                font-family: var(--font-family-medium);
                margin-bottom: 32px;
            }
            .qx-button{
                height: 48px;
                width: 100%;
                max-width: 166px;
            }
        }
    }
}

.qx-syllabus__item{
    overflow: hidden;
    border: none;
    border-bottom: 1px solid var(--color-blue-40);
    &:last-child{
        border: none;
    }
    .qx-syllabus__title{
        .accordion-button{
            gap: 10px;
            background-color: transparent;
            border: none;
            box-shadow: none;
            .qx-image{
                border-radius: 50%;
                overflow: hidden;
                width: 50px;
                min-width: 50px;
                height: 50px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .qx-text{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 50px;
                h2{
                    font-size: 18px;
                    font-family: var(--font-family-bold);
                    line-height: 24px;
                    color: #000000;
                }
                p{
                    font-size: 14px;
                    line-height: 22px;
                }
                span{
                   font-size: 14px;
                    line-height: 22px;
                    position: relative;
                    padding-left: 10px;
                    &::before{
                        position: absolute;
                        left: 0;
                        display: block;
                        content: '';
                        background-color: var(--color-dark-100);
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        bottom: 0;
                        top: 0;
                        margin: auto;
                    }
                }
            }
        }
    }
    .qx-syllabus__content{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 10px 100px 30px 150px;
        .qx-syllabus__tema{
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 6px 0;
            img{
                margin-top: 5px;
            }
            p{
                font-size: 14px;
                line-height: 22px;
                color: #959595;
            }
        }
    }
}

.modal{
    .modal-dialog{
        margin: 0 auto;
        padding: 16px;
    }
}

.aprendiendo__slider{
    &.owl-carousel{
        .owl-stage {
            padding-left: 0 !important;
        }
        .owl-nav{
            .owl-prev,
            .owl-next{
                position: absolute;
                top: 0;
                bottom: 0;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                width: 100%;
                max-width: 120px;
                padding: 0 20px !important;
                background-color: transparent !important;
                span{
                    width: 38px;
                    height: 38px;
                    color: #FFFFFF;
                    background-color: #033E73;
                    border-radius: 14px;
                    font-size: 28px;
                    line-height: normal;
                    margin-top: -40px;
                }
            }
            .owl-prev{
                left: 0;
                justify-content: flex-start;
            }
            .owl-next{
                right: 0;
                justify-content: flex-end;
                /* background: linear-gradient(to left, rgba(255,255,255,1) 100%, rgba(255,255,255,0) 0%); */
            }
        }
    }
} 

.qx-entrega{
    padding: 20px;
    height: 177px;
    background: url('../img/fondo-entrega.jpg') center right;
    background-color: var(--color-blue-20);
    background-size: cover;
    .qx-entrega__title{
        h2{
            font-size: 24px;
            color: #033E73;
            font-family: var(--font-family-medium);
            margin-bottom: 6px;
        }
        p{
            font-size: 16px;
            color: #000000;
        }
    }
}

.qx-ranking{
    padding: 15px 17px;
    .qx-ranking__title{
        margin-bottom: 24px;
        h2{
            font-size: 24px;
            color: #033E73;
            font-family: var(--font-family-medium);
        }
        .qx-ranking__date{
            gap: 10px;
            p{
                font-size: 14px;
                color: var(--color-dark-100);
            }
        }
    }
    .qx-ranking__content{
        display: flex;
        flex-direction: column;
        gap: 10px;
        .qx-ranking__item{
            display: flex;
            align-items: center;
            width: 100%;
            gap: 10px;
            .qx-ranking__card{
                display: flex;
                align-items: center;
                width: 100%;
                justify-content: space-between;
                background-color: var(--color-blue-20);
                border-radius: 16px;
                padding: 12px;
                height: 46px;
                position: relative;
                .qx-ranking__user{
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    .qx-user{
                        width: 35px;
                        height: 35px;
                        border-radius: 25px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        h2{
                            color: #FFFFFF;
                            font-family: var(--font-family-bold);
                            font-size: 15px;
                        }
                        &.purple{
                            background-color: #863DC1;
                        }
                        &.skyblue{
                            background-color: #00B2FF;
                        }
                        &.orange{
                            background-color: #F99908;
                        }
                    }
                    p{
                        font-size: 16px;
                        color: var(--color-dark-100);
                        font-family: var(--font-family-bold);
                    }
                }
                .qx-ranking__puesto{
                    padding-right: 30px;
                    &.only{
                        padding-right: 8px;
                    }
                    p{
                        font-size: 16px;
                        color: var(--color-dark-100);
                    }
                    img{
                        position: absolute;
                        top: 0;
                        right: 16px;
                    }
                }
            }
            span{
                font-size: 14px;
                color: var(--color-dark-100);
            }
        }
        .qx-ranking__actions{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 5px;
            p{
                color: #0056A3;
                font-size: 16px;
                font-family: var(--font-family-bold);
                text-decoration: underline;
                cursor: pointer;
            }
        }
    }
}

.qx-filter__prioridad{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    .qx-dropdown{
        width: 100%;
        max-width: 130px;
        .bootstrap-select{
            width: 100% !important;
            min-width: 100%;
            max-width: 130px;
            .dropdown-toggle{
                background-color: #FFFFFF !important;
                height: 48px;
                .filter-option{
                    .filter-option-inner{
                        .filter-option-inner-inner{
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 100%;
                            max-width: 130px;
                        }
                    }
                }
            }
            .dropdown-menu{
                width: 300px;
                .dropdown-item{
                    padding-left: 20px;
                    display: flex;
                    align-items: center;
                    &.circle{
                        .text{
                            display: flex;
                            align-items: center;
                            &::before{
                                content: '';
                                display: block;
                                border-radius: 50%;
                                width: 17px;
                                height: 17px;
                                margin-right: 6px;
                            }
                        }
                        &.red{
                            .text{
                                &::before{
                                    background-color: #E43F4D;
                                }
                            }
                        }
                        &.yellow{
                            .text{
                                &::before{
                                    background-color: #FFBB00;
                                }
                            }
                        }
                        &.green{
                            .text{
                                &::before{
                                    background-color: #1FB778;  
                                }
                            }
                        }
                    }
                    .check-mark{
                        right: initial;
                        left: 16px;
                        width: 20px;
                        height: 20px;
                        border: 1px solid #0056A3;
                        border-radius: 3px;
                        display: flex !important;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        top: initial;
                        left: 0;
                        margin-right: 12px;
                        &::after{
                            border-color: #FFFFFF;
                            width: 5px;
                            height: 10px;
                            border-style: solid;
                            border-width: 0 2px 2px 0;
                        }
                        .selected &{
                            background-color: #0056A3;
                        }
                    }
                }
            }
        }
    }
}

.qx-filter__radiobutton{
    border: 1px solid var(--color-blue-20);
    border-radius: 12px;
    overflow: hidden;
    padding: 6px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    background-color: #FFFFFF;
    width: 100%;
    max-width: max-content;
    .btn-group{
        .btn-check{
            border: none;
            &:checked{
                + .btn{
                    background-color: #0056A3;
                    color: #FFFFFF;
                    img {
                        &.default{
                            display: none;
                        }
                        &.active{
                            display: block;
                        }
                    }
                }
            }
        }
        .btn{
            border: none;
            width: 100%;
            min-width: 95px;
            color: #616981;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px !important;
            img {
                margin-right: 10px;
                &.default{
                    display: block;
                }
                &.active{
                    display: none;
                }
            }
        }
    }
}

.qx-card {
    border: 1px solid var(--color-blue-20);
    border-radius: 20px;
    box-shadow: 0 0 12px 0 rgba(44, 123, 214, 0.08);
    overflow: hidden;
    &.qx-card--default{
        padding: 28.5px;
        border: none;
        margin-bottom: 20px;
        overflow: visible;
    }
    &.qx-card__white{
        background-color: #FFFFFF;
    }
    .qx-card__title {
        border-bottom: 1px solid var(--color-blue-40);
        display: flex;
        align-items: center;
        padding: 10px 20px;
        h2{
            font-size: 24px;
            font-family: var(--font-family-medium);
            color: #033E73;
        }
    }
    .qx-default__title{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 12px;
        h2{
            font-size: 24px;
            font-family: var(--font-family-medium);
            color: #033E73;
        }
        span{
          font-size: 16px;
          line-height: 24px;
          color: #616981;  
        }
        .qx-dropdown{
            width: 100%;
            max-width: 350px;
            .bootstrap-select{
                width: 100% !important;
                max-width: 350px;
            }
        }
    }
    .qx-default__subtitle{
        margin-bottom: 20px;
        p{
            font-size: 16px;
            line-height: 24px;
            color: #616981;
        }
    }
}

.qx-card__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 20px;
    margin-bottom: 20px;
    .qx-card{
        margin: 0;
    }
}

.qx-metodo{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 30px;
    padding: 34px;
    background-color: #FFFFFF;
}

.qx-videoclases__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(165px,1fr));
    column-gap: 90px;
    row-gap: 40px;
    padding: 50px;
    background-color: #FFFFFF;
    &.qx-videoclases__list{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.qx-card__video {
    width: 100%;
    max-width: 480px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    .qx-video__title{
        position: absolute;
        top: 16px;
        right: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        border-radius: 25px;
        border: 1px solid #FFFFFF;
        p{
            color: #FFFFFF;
            font-size: 14px;
            line-height: 22px;
            font-family: var(--font-family-medium);
            font-weight: 100;
        }
    }
    .qx-video__header {
        width: 100%;
        height: 182px;
        overflow: hidden;
        border-radius: 16px;
        position: relative;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .qx-video__play{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            -webkit-transition: background-color .25s ease;
            -moz-transition: background-color .25s ease;
            -ms-transition: background-color .25s ease;
            -o-transition: background-color .25s ease;
            transition: background-color .25s ease;
            img{
                width: initial;
                height: initial;
                opacity: 0;
                transform: scale(0);
                -webkit-transition: all .25s ease;
                -moz-transition: all .25s ease;
                -ms-transition: all .25s ease;
                -o-transition: all .25s ease;
                transition: all .25s ease;
                position: absolute;
                &.default{
                    opacity: 1;
                    transform: scale(1);
                }
                &.active{
                    opacity: 0;
                    transform: scale(0);
                }
            }
            &:hover{
                background-color: rgba(0,0,0,0.4);
                .default{
                    opacity: 0;
                    transform: scale(0);
                }
                .active{
                    opacity: 1;
                    transform: scale(1);
                } 
            }
        }
    }
    .qx-video__content{
        margin-top: 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        h2{
            font-size: 16px;
            color: var(--color-dark-100);
            font-family: var(--font-family-bold);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .qx-content__image{
            width: 46px;
            height: 46px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .qx-content__text{
            p{
                font-size: 14px;
                line-height: 22px;
                color: var(--color-dark-100);
                strong{
                    font-family: var(--font-family-bold);
                }
            }
        }
    }
}

.qx-card__videoclase {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
    .qx-videoclases__list & {
        flex-direction: row;
        max-width: 100%;
        gap: 23px;
    }
    .qx-videoclase__header {
        width: 100%;
        height: 182px;
        overflow: hidden;
        border-radius: 16px;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .qx-videoclases__list & {
            max-width: 110px;
            height: 90px;
        }
    }
    .qx-videoclase__content{
        margin-top: 12px;
        h2{
            font-size: 20px;
            color: var(--color-dark-100);
            font-family: var(--font-family-medium);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            margin-bottom: 8px;
            position: relative;
            &::before{
                content: '';
                width: 3px;
                height: 24px;
                border-radius: 25px;
                position: absolute;
                left: 0;
                display: none;
            }
            .complementario &{
                padding-left: 10px;
                &::before{
                    background-color:  var(--color-red-100);
                    display: block;
                }
            }
            .especialidad &{
                padding-left: 10px;
                &::before{
                    background-color:  #FFBB00;
                    display: block;
                }
            }
            .fundamental &{
                padding-left: 10px;
                &::before{
                    background-color:  #1FB778;
                    display: block;
                }
            }
        }
        .qx-videoclase__percent{
            p{
                font-size: 16px;
                color: var(--color-dark-100);
                margin-bottom: 12px;
            }
            .qx-percent{
                width: 100%;
                height: 8px;
                background-color: var(--color-blue-10);
                border-radius: 25px;
                overflow: hidden;
                margin-bottom: 24px;
                span{
                    background-color: var(--color-blue-80);
                    width: 20%;
                    height: 100%;
                    display: block;
                }
                .qx-videoclases__list & {
                    margin: 0;
                }
            }
        }
        .qx-videoclases__list & {
            margin: 0;
            width: 100%;
        }
    }
    .qx-videoclase__footer{
        width: 100%;
        .qx-button{
            width: 100%;
        }
        .qx-videoclases__list & {
            max-width: 172px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.qx-modal{
    .modal-content{
        border-radius: 26px;
        .modal-header{
            border: none;
            padding: 16px 24px;
            h2{
                font-size: 20px;
                color: #033E73;
                font-family: var(--font-family-medium);
            }
            .btn-close{
                font-size: 12px;
            }
        }
        .modal-body{
            padding: 10px 24px;
        }
    }
}

.qx-modal__ranking{
    width: 100%;
    max-width: 390px;
    .modal-body{
        padding: 0 !important;
        .qx-ranking{
            padding: 0;
            .qx-ranking__title{
                padding: 0 24px;
            }
            .qx-ranking__content{
                height: 400px;
                overflow: auto;
                padding: 5px 24px;
                &::-webkit-scrollbar {
                    width: 8px;
                    height: 8px;
                }
                &::-webkit-scrollbar-thumb {
                    background-color: var(--color-blue-30);
                    border-radius: 10px;
                }
            }
        }
    }
}

.qx-material__item{
    display: flex;
    align-items: center;
    height: 75px;
    border-bottom: 1px solid #A7BCD9;
    padding: 10px 20px;
    gap: 10px;
    &:last-child{
        border: none;
    }
    .qx-text{
        p{
           font-size: 16px;
           color: var(--color-dark-100); 
        }
        .qx-link{
            display: flex;
            align-items: center;
            gap: 8px;
            a{
                color: var(--color-dark-100);
                font-size: 16px;
                font-family: var(--font-family-bold);
                text-decoration: underline;
            }
            span{
                font-size: 12px;
                color: var(--color-dark-100);
                font-family: var(--font-family-medium);
            }
        }
    }
}

.qx-evaluacion__item{
    width: 100%;
    border-bottom: 0.5px solid var(--color-blue-40);
    padding: 14px 19px;
    &:last-child{
        border: none;
    }
    .qx-item__header{
        gap: 10px;
        margin-bottom: 12px;
        .qx-header__title{
            gap: 10px;
            .qx-icon{
                width: 100%;
                max-width: 27px;
                img{
                    width: 100%;
                }
            }
            .qx-text {
                h2{
                    font-size: 16px;
                    font-family: var(--font-family-bold);
                }
            }
        }
        .qx-header__subtitle{
            p{
                font-size: 16px;
                line-height: 24px;
            }
        }
    }
    .qx-item__content{
        padding-left: 37px;
        gap: 16px;
        .qx-evaluacion__content{
            width: 100%;
            .qx-evaluacion__percent{
                margin-bottom: 8px;
                p{
                    font-size: 16px;
                    line-height: 24px;
                    color: #616981;
                    margin-bottom: 2px;
                }
                .qx-percent{
                    width: 100%;
                    height: 6px;
                    background-color: var(--color-blue-10);
                    border-radius: 25px;
                    overflow: hidden;
                    span{
                        background-color: var(--color-blue-80);
                        width: 20%;
                        height: 100%;
                        display: block;
                    }
                }
            }
            .qx-evaluacion__resultados{
                padding-left: 60px;
                gap: 15px;
                .qx-resultado__item{
                    height: 24px;
                    border-radius: 8px;
                    padding: 4px 9px;
                    gap: 7px;
                    &.correct{
                        background-color: #E4FCEF;
                        color: #00953E;
                    }
                    &.incorrect{
                        background-color: #F7EAEA;
                        color: #E43F4D;
                    }
                    p{
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

.qx-aprendiendo{
    background-color: #FFFFFF;
    .qx-card__content{
        padding: 24px;
    }
}

.qx-evaluaciones__grid{
    display: flex;
    gap: 20px;
    margin-top: 20px;
    .qx-card__content{
        padding: 5px 0;
    }
}

.qx-evaluaciones{
    width: 100%;
    background-color: #FFFFFF;
}

.qx-materiales{
    width: 100%;
    max-width: 375px;
    background-color: #FFFFFF;
    height: max-content;
}

.tooltip{
    .tooltip-arrow{
        display: none;
    }
    .tooltip-inner{  
        background-color: #FFFFFF;
        color: var(--color-dark-100);
        font-size: 16px;
        box-shadow: 0px 0px 4px 0px rgba(0, 106, 201, 0.2);
        border-radius: 4px;
    }
    &.show{
        opacity: 1;
    }
}

.qx-login{
    height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../img/fondo-login.png') center right no-repeat;
    background-color: var(--color-blue-pastel);
    background-size: contain;
    .qx-login__container{
        width: 100%;
        max-width: 1200px;
        margin: auto;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
        .qx-login__card{
            width: 100%;
            padding: 20px 40px;
            .qx-card{
                background-color: #FFFFFF;
                padding: 45px 32px 24px 32px;
                .qx-login__title{
                    margin-bottom: 32px;
                    img{
                        margin-bottom: 20px;
                    }
                    p{
                        font-size: 18px;
                        line-height: 28px;
                    }
                }
                .qx-login__content{
                    .qx-login__titlepassword{
                        font-size: 20px;
                        color: var(--color-dark-100);
                        font-family: var(--font-family-medium);
                        margin-bottom: 8px;
                    }
                    .qx-login__subtitlepassword{
                        font-size: 16px;
                        color: var(--color-dark-100);
                        font-family: var(--font-family-regular);
                        margin-bottom: 24px;
                    }
                    .qx-login__buttons{
                        margin-top: 24px;
                        display: flex;
                        display: -webkit-flex;
                        align-items: center;
                        gap: 16px;
                        .qx-button{
                            width: 100%;
                        }
                    }
                    .qx-tab__container{
                        p{
                           font-size: 18px;
                           line-height: 28px;
                           margin-bottom: 10px; 
                        }
                        .qx-login__form{
                            a{
                                font-family: var(--font-family-medium);
                                color: #0056A3;
                                display: block;
                                font-size: 14px;
                                line-height: 22px;
                                text-decoration: none;
                                margin-bottom: 24px;
                            }
                            .qx-button{
                                width: 100%;
                                height: 48px;
                                margin-bottom: 60px;
                            }
                        }
                        .qx-register__step{
                            display: none;
                            &.active{
                                display: block
                            }
                            h2{
                                font-size: 14px;
                                line-height: 28px;
                                color: var(--color-dark-100);
                                font-family: var(--font-family-bold);
                                margin-bottom: 12px;
                            }
                            p{
                                margin-bottom: 5px;
                            }
                            .qx-register__form{
                                .qx-form__grid{
                                    display: grid;
                                    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
                                    gap: 14px;
                                    .qx-dropdown,
                                    .qx-input{
                                        margin: 0;
                                    }
                                }
                                .qx-dropdown{
                                    margin: 14px 0;
                                    .bootstrap-select{
                                        width: 100%;
                                        max-width: 100%;
                                        .dropdown-toggle{
                                            .filter-option-inner-inner{
                                                font-size: 16px;
                                                color: #616981;
                                            }

                                        }
                                    }
                                }
                            }
                            .qx-register__arrows{
                                display: flex;
                                display: -webkit-flex;
                                align-items: center;
                                justify-content: center;
                                gap: 16px;
                                margin-top: 20px;
                                button{
                                    background-color: transparent;
                                    border: 1px solid #033E73;
                                    border-radius: 14px;
                                    box-shadow: none;
                                    outline: none;
                                    height: 38px;
                                    width: 38px;
                                    &[disabled]{
                                        opacity: 0.6;
                                        cursor: default;
                                    }
                                }
                            }
                            .qx-register__actions{
                                .qx-button{
                                    width: 100%;
                                    margin-top: 30px;
                                    height: 48px;
                                }
                            }
                        }
                    }
                }
            }
        }
        .qx-login__slider{
            width: 100%;
            max-width: 520px;
            .qx-title__slider{
                background-color: #FFFFFF;
                border-top-left-radius: 14px;
                border-top-right-radius: 14px;
                width: 100%;
                max-width: max-content;
                padding: 12px 20px 24px 20px;
                border: 1px solid var(--color-blue-20);
                margin-bottom: -15px;
                h2{
                    font-size: 26px;
                    line-height: 28px;
                    color: #033E73;
                    font-family: var(--font-family-medium);
                }
            }
        }
    }
}

.qx-tabs{
    border: 1px solid var(--color-blue-20);
    width: 100%;
    max-width: max-content;
    border-radius: 12px;
    overflow: hidden;
    padding: 6px;
    gap: 14px;
    margin-bottom: 24px;
    background-color: #FFFFFF;
    flex-wrap: initial;
    .nav-item{
        .nav-link{
            border: none;
            margin: 0;
            border-radius: 8px;
            padding: 7px 26px;
            color: #616981;
            font-size: 14px;
            line-height: 22px;
            box-shadow: none;
            outline: none;
            &.active{
                background-color: var(--color-blue-80);
                color: #FFFFFF;
                .qx-tabs--blue &{
                    background-color: #0056A3;
                }
            }
        }
    }
}

.qx-input{
    margin: 14px 0;
    position: relative;
    label{
        display: block;
        margin-bottom: 5px;
    }
    .form-control{
        height: 44px;
        border-radius: 10px;
        border-color: var(--color-blue-20);
        color: #616981;
        box-shadow: none;
        outline: none;
    }
    textarea{
        height: auto !important;
        resize: none;
    }
    &.qx-input--icon{
        i{
            position: absolute;
            right: 10px;
            top: 0;
            bottom: 0;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #616981;
        }
    }
}

.qx-input__group{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    border: 1px solid var(--color-blue-20);
    border-radius: 11px;
    background-color: #FFFFFF;
    height: 40px;
    label{
        white-space: nowrap;
        min-width: 120px;
        border-right: 1px solid var(--color-blue-20);
        padding: 2px 12px;
        color: #7E7E7E;
        font-size: 16px;
        line-height: 24px;
    }
    .form-control{
        border: none;
        box-shadow: none;
        border-radius: 11px;
    }
    .qx-dropdown{
        width: 100%;
        .bootstrap-select{
            width: 100% !important;
            max-width: 100%;
            .dropdown-toggle{
                width: 100%;
                border: none;
                .filter-option{
                    .filter-option-inner{
                        .filter-option-inner-inner{
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 100%;
                            max-width: 140px;
                        }
                    }
                }
            }
        }
    }
}

.qx-input__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(285px,1fr));
    gap: 20px;
    margin: 20px 0;
}

.qx-examenes{
    border-radius: 20px;
    box-shadow: 0 0 12px 0 rgba(44, 123, 214, 0.08);
    overflow: hidden;
    background-color: #FFFFFF;
    padding: 24px;
    .qx-examen__item{
        position: relative;
        overflow: hidden;
        &:last-child{
            .qx-examen__title{
                span{
                    &::before{
                        display: none;
                    }
                }
            }
        }
        .qx-examen__title{
            width: 100%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            span{
                display: flex;
                display: -webkit-flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                max-width: 34px;
                min-width: 34px;
                height: 34px;
                background-color: var(--color-blue-90);
                border-radius: 50%;
                color: #FFFFFF; 
                font-size: 24px;
                font-family: var(--font-family-medium);
                z-index: 10;
                &::before{
                    content: '';
                    position: absolute;
                    display: block;
                    background-color: var(--color-blue-90);
                    height: 100%;
                    width: 2px;
                    bottom: 0;
                    top: 0;
                    z-index: -1;
                }
            }
            p{
                font-size: 20px;
                color: var(--color-dark-100);
                font-family: var(--font-family-medium);
            }
        }
        .qx-examen__content{
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
            gap: 12px;
            padding-left: 45px;
            padding-bottom: 36px;
        }
    }
}

.qx-examen__card{
    width: 100%;
    border-radius: 24px;
    height: 180px;
    padding: 20px;
    background-size: cover !important;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-direction: column;
    text-decoration: none;
    &.blue{
        background: url('../img/fondo-examen-blue.png') center right no-repeat;
    }
    &.purple{
        background: url('../img/fondo-examen-purple.png') center right no-repeat;
    }
    .qx-card__header{
        display: flex;
        display: -webkit-flex;
        align-items: flex-start;
        justify-content: space-between;
        height: 100%;
        h2{
            font-size: 18px;
            line-height: 24px;
            color: #033E73;
        }
        h3{
            font-size: 24px;
            color: #033E73;
            font-family: var(--font-family-medium);
        }
        img{
            width: 100%;
            max-width: 67px;
        }
    }
    .qx-card__content{
        h2{
            font-size: 24px;
            width: 100%;
            max-width: 150px;
            color: #033E73;
            font-family: var(--font-family-medium);
        }
        span{
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            background-color: #FFFFFF;
            border-radius: 11px;
            height: 34px;
            padding: 0 9px;
            width: 100%;
            max-width: max-content;
            color: #033E73;
            font-size: 16px;
            font-family: var(--font-family-medium);
        }
        p{
            font-size: 16px;
            line-height: 24px;
            color: #616981;
        }
    }
}

.qx-examen__filter{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 14px;
    .qx-tabs{
        margin: 0;
    }
    .qx-dropdown{
        width: 100%;
        max-width: 350px;
        .bootstrap-select{
            width: 100% !important;
            max-width: 350px;
            .dropdown-toggle{
                width: 100% !important;
                background-color: #FFFFFF !important;
            }
        }
    }
}

.qx-examen__interno{
    border-radius: 26px;
    background-color: #FFFFFF;
    padding: 36px 32px;
}

.qx-table{
    thead{
        tr{
            border-radius: 8px;
            overflow: hidden;
            th{
                background-color: var(--color-blue-90);
                color: #FFFFFF;
                font-weight: 100;
                font-family: var(--font-family-bold);
                border: none;
                padding: 10px;
                font-size: 16px;
                line-height: 24px;
                &:first-child{
                    border-top-left-radius: 8px;
                    border-bottom-left-radius: 8px;
                }
                &:last-child{
                    border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                }
            }
        }
    }
    tbody{
        tr{
            td{
                vertical-align: middle;
                font-size: 16px;
                line-height: 24px;
                border-color: var(--color-blue-20);
                .qx-table__item{
                    position: relative;
                    padding: 4px 6px;
                    padding-left: 14px;
                    &::before{
                        display: block;
                        content: '';
                        width: 4px;
                        height: 100%;
                        position: absolute;
                        border-radius: 90px;
                        left: 0;
                        top: 0;
                    }
                    &.red{
                        &::before{
                            background-color: var(--color-red-100);
                        }
                    }
                    &.green{
                        &::before{
                            background-color: #1FB778;
                        }
                    }
                }
                .qx-button{
                    min-width: 145px;
                    margin: auto;
                    text-decoration: none;
                }
                .qx-icon{
                    width: 44px;
                    height: 44px;
                    border-radius: 8px;
                    background-color: transparent;
                    -webkit-transition: background-color .25s ease;
                    -moz-transition: background-color .25s ease;
                    -ms-transition: background-color .25s ease;
                    -o-transition: background-color .25s ease;
                    transition: background-color .25s ease;
                    cursor: pointer;
                    display: flex;
                    display: -webkit-flex;
                    align-items: center;
                    justify-content: center;
                    margin: auto;
                    &:hover{
                        background-color: #F0F5F8;
                    }
                }
            }
        }
    }
}

.qx-paginator{
    margin: 24px 0;
    .btn{
        border-color: #033E73;
        width: 38px;
        height: 38px;
        min-width: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background-color: transparent !important;
    }
}

.qx-pregunta{
    background-color: #FFFFFF;
    border-radius: 26px;
    box-shadow: 0 0 12px 0 rgba(44, 123, 214, 0.08);
    .qx-pregunta__header{
        padding: 12px 36px;
        border-bottom: 1px solid var(--color-blue-20);
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        .qx-pregunta__timer{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            .qx-pregunta__counter{
                background-color: #FDF9FF;
                gap: 15px;
                border-radius: 8px;
                display: flex;
                display: -webkit-flex;
                align-items: center;
                justify-content: center;
                padding: 8px 12px;
                .qx-text{
                    h2{
                        font-size: 18px;
                        line-height: 24px;
                        font-family: var(--font-family-bold);
                        color: #7C5ADB;
                    }
                    p{
                        font-size: 16px;
                        line-height: 24px;
                        color: #7C5ADB;
                    }
                }
            }
            .qx-pregunta__buttons{
                display: flex;
                display: -webkit-flex;
                align-items: center;
                gap: 16px;
                flex: 1;
                justify-content: flex-end;
                .btn{
                    border-color: #033E73;
                    width: 38px;
                    height: 38px;
                    min-width: 38px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 14px;
                    background-color: transparent !important;
                }
            }
        }
        .qx-pregunta__actions{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            max-width: 480px;
            flex-wrap: wrap;
            .qx-button{
                white-space: nowrap;
                width: 100%;
                flex: 1;
            }
        }
    }
    .qx-pregunta__content{
        padding: 24px 36px 48px 36px;
        h2{
            font-size: 16px;
            font-family: var(--font-family-bold);
            margin-bottom: 20px;
            color: var(--color-dark-100);
        }
        p{
            font-size: 18px;
            line-height: 24px;
            color: var(--color-dark-100);
        }
        .qx-pregunta__alternativas{
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            margin-top: 36px;
            flex-wrap: wrap;
            gap: 24px;
            .qx-alternativas{
                display: flex;
                display: -webkit-flex;
                flex-direction: column;
                width: 100%;
                gap: 13px;
                flex: 1;
            }
            .qx-image{
                width: 100%;
                display: flex;
                display: -webkit-flex;
                align-items: center;
                justify-content: center;
                flex: 1;
            }
        }
    }
}

.qx-alternative__item{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background-color: #F0F5F8;
    padding: 12px;
    border-radius: 10px;
    gap: 10px;
    cursor: pointer;
    &.incorrect{
        background-color: #F7EAEA;
    }
    &.correct{
        background-color: #EDFDF1;
    }
    &.pending{
        background-color: var(--color-blue-20);
    }
    .qx-letter{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
        width: 21px;
        min-width: 21px;
        border-radius: 50%;
        height: 21px;
        border: 1px solid var(--color-dark-100);
        .incorrect &{
            border-color: #E43F4D;
        }
        .correct &{
            border-color: #15B151;
        }
        p{
            font-size: 14px;
            line-height: 22px;
            color: var(--color-dark-100);
            .incorrect &{
                color: #E43F4D;
            }
            .correct &{
                color: #15B151;
            }
        }
    }
    .qx-text{
        p{
            font-size: 16px;
            line-height: 24px;
            color: var(--color-dark-100);
            .incorrect &{
                color: #E43F4D;
            }
            .correct &{
                color: #15B151;
            }
        }
    }
}

.qx-ayuda{
    padding: 60px 40px;
    background-color: #FFFFFF;
    border: none;
    .qx-ayuda__password{
        background: linear-gradient(91.23deg, #0056A3 1.05%, #0E6FC6 86.06%);
        color: #FFFFFF;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        border-radius: 20px;
        padding: 28px 20px;
        align-items: center;
        margin-bottom: 60px;
        text-align: center;
        h2{
            font-size: 24px;
            font-family: var(--font-family-medium);
            font-weight: 100;
            margin-bottom: 12px;
        }
        p{
            font-size: 16px;
            line-height: 24px;
             margin-bottom: 18px;
        }
        .qx-button{
            height: 48px;
        }
    }
    .qx-ayuda__respuestas{
        h2{
            color: #033E73;
            font-size: 24px;
            font-family: var(--font-family-medium);
            text-align: center;
            margin-bottom: 24px;
        }
        p{
            color: #000000;
            font-size: 16px;
            line-height: 24px;
            text-align: center;
            margin-bottom: 24px;
        }
        .qx-respuestas__grid{
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
            gap: 18px;
            margin-bottom: 60px;
            .qx-respuesta__item{
                background-color: #F0F6FD;
                border-radius: 20px;
                padding: 14px 11px;
                padding-bottom: 20px;
                display: flex;
                display: -webkit-flex;
                flex-direction: column;
                gap: 10px;
                h2{
                    text-align: left;
                    margin: 0;
                    font-size: 16px;
                    color: #000000;
                    font-family: var(--font-family-bold);
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                p{
                    text-align: left;
                    margin: 0;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    font-size: 14px;
                    line-height: 22px;
                    color: #565656;
                }
            }
        }
    }
    .qx-ayuda__preguntas{
        margin-bottom: 60px;
        h2{
            font-size: 24px;
            color: #033E73;
            font-family: var(--font-family-medium);
            margin-bottom: 24px;
        }
        .qx-preguntabas__tabs{
            display: flex;
            display: -webkit-flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
    }
    .qx-ayuda__cards{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 80px;
        .qx-ayuda__dudas{
            width: 100%;
            height: 177px;
            background: url('../img/fondo-dudas.png') top right;
            background-size: cover;
            background-color: #E8EDF4;
            border-radius: 20px;
            padding: 20px;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            justify-content: space-between;
            .qx-text{
                h2{
                    color: #033E73;
                    font-size: 24px;
                    margin-bottom: 8px;
                    font-family: var(--font-family-medium);
                }
                p{
                    font-size: 16px;
                    line-height: 24px;
                }
            }
            .qx-actions{
                .qx-button{
                    height: 48px;
                }
            }
        }
        .qx-ayuda__soporte{
            width: 100%;
            max-width: 358px;
            height: 175px;
            background-color: #0056A3;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .qx-ayuda__item{
        border: none;
        border-bottom: 1px solid #D8DDE3;
        border-radius: 0;
        .qx-ayuda__title{
            .accordion-button{
                box-shadow: none;
                background-color: transparent;
                h2{
                    margin: 0;
                    font-size: 16px;
                    color: #000000;
                    font-family: var(--font-family-bold);
                    font-weight: 100;
                }
                &::after{
                    background-size: 16px;
                }
            }
        }
        .qx-ayuda__content{
            padding-top: 10px;
            p{
                font-size: 14px;
                line-height: 22px;
                color: #565656;
            }
        }
    }
    .qx-ayuda__politicas{
        text-align: center;
        img{
            margin-bottom: 20px;
        }
        p{
            font-size: 14px;
            line-height: 22px;
            color: #000000;
            a{
                color: #000000;
            }
        }
    }
}

.qx-biblioteca{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 30px;
    padding: 32px;
    background-color: #FFFFFF;
}

.qx-biblioteca__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    column-gap: 65px;
    row-gap: 32px;
}

.qx-biblioteca__item{
    .qx-biblioteca__header{
        background: linear-gradient(302.43deg, #2157A1 25.36%, #0073B5 95.59%);
        height: 168px;
        border-radius: 16px;
        margin-bottom: 12px;
    }
    .qx-biblioteca__body{
        display: flex;
        display: -webkit-flex;
        align-items: flex-start;
        gap: 10px;
        p{
            margin-top: 4px;
        }
    }
}

.qx-ficha{
    background-color: #FFFFFF;
    padding: 42px;
    .qx-ficha__header{
        h2{
            font-size: 24px;
            font-family: var(--font-family-medium);
            color: #033E73;
            margin-bottom: 20px;
        }
        .qx-ficha__aviso{
            display: flex;
            display: -webkit-flex;
            align-items: flex-start;
            gap: 14px;
            background-color: #FDF9FF;
            border: 1px solid #7C5ADB;
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 40px;
            .qx-icon{
                width: 100%;
                max-width: 46px;
                padding-top: 10px;
            }
            .qx-text{
                h2{
                    margin: 0;
                    color: #7C5ADB;
                    font-family: var(--font-family-bold);
                    font-size: 18px;
                    line-height: 24px;
                }
                p{
                    font-size: 16px;
                    line-height: 24px;
                }
            }
            .qx-button{
                min-width: 180px;
                margin-top: 20px;
            }
        }
    }
    .qx-ficha__formulario{
        .qx-formulario{
            display: none;
            &.active{
                display: block;
            }
            .qx-formulario__item{
                .qx-formulario__title{
                    width: 100%;
                    border-radius: 8px;
                    background-color: var(--color-blue-90);
                    padding: 10px;
                    p{
                        color: #FFFFFF;
                        font-size: 18px;
                        line-height: 24px;
                    }
                }
                .qx-formulario__content{
                    padding: 24px 12px;
                    display: grid;
                    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
                    column-gap: 48px;
                    row-gap: 24px;
                    .qx-dropdown{
                        margin: 16px 0;
                        .bootstrap-select{
                            width: 100%;
                            max-width: 100%;
                            .dropdown-toggle{
                                .filter-option-inner-inner{
                                    font-size: 16px;
                                    color: #616981;
                                }

                            }
                        }
                    }
                }
            }
        }
    }
}

.qx-tendencias{
    background-color: #FFFFFF;
    padding: 40px;
    .qx-tendencias__cards{
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        width: 100%;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--color-blue-20);
        .qx-tendencia__item{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            padding: 12px 32px 12px 16px;
            border-radius: 12px;
            border: 1px solid var(--color-blue-20);
            .qx-icon{
                min-width: 42px;
                width: 42px;
                height: 42px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .qx-text{
                p{
                    font-size: 16px;
                    line-height: 24px;
                    color: #033E73;
                    font-family: var(--font-family-medium);
                }
                h2{
                    font-size: 26px;
                    color: #033E73;
                    font-family: var(--font-family-bold);
                }
            }
        }
    }
    .qx-tendencias__filters{
        display: flex;
        gap: 12px;
        width: 100%;
        max-width: 700px;
        .qx-dropdown{
            width: 100%;
            .bootstrap-select{
                width: 100%;
                max-width: 100%;
                .dropdown-toggle{
                    .filter-option-inner-inner{
                        font-size: 16px;
                        color: #616981;
                    }

                }
            }
        }
    }
}

.qx-imprimir{
    margin-bottom: 24px;
    img{
        margin-left: 10px;
    }
}

.qx-calendario{
    background-color: #FFFFFF;
    .qx-calendar{
        padding: 4px;
        .fc-header-toolbar{
            padding: 24px;
            gap: 8px;
            margin: 0;
            .fc-toolbar-chunk{
                &:first-child{
                    div{
                        display: flex;
                        display: -webkit-flex;
                        align-items: center;
                        gap: 8px;
                    }
                }
                .fc-button{
                    background-color: transparent;
                    border-color: #033E73;
                    box-shadow: none;
                    color: #033E73;
                    border-radius: 14px;
                    width: 38px;
                    height: 38px;
                    display: flex;
                    display: -webkit-flex;
                    align-items: center;
                    justify-content: center;
                    &.fc-today-button{
                        width: initial;
                        border: none;
                        color: #000000;
                        font-size: 16px;
                    }
                }
                .fc-button-group{
                    border: 1px solid var(--color-blue-20);
                    padding: 7px 6px;
                    border-radius: 12px;
                    gap: 10px;
                    .fc-button{
                        width: initial;
                        border: none;
                        border-radius: 8px;
                        padding: 6px 24px;
                        font-size: 14px;
                        color: #616981;
                        &.fc-button-active{
                            background-color: #0056A3;
                            color: #FFFFFF;
                        }
                    }
                }
            }
        }
    }
}

.fc{
    .fc-toolbar-title{
        font-size: 28px;
        margin-right: 16px;
    }
    .fc-daygrid-day{
        &.fc-day-today{
            background-color: transparent;
            .fc-daygrid-day-top{
                justify-content: center;
                .fc-daygrid-day-number{
                    background-color: #033E73;
                    color: #FFFFFF;
                }
            }
        }
    }
    .fc-col-header-cell-cushion{
        text-decoration: none;
        color: #033E73;
        font-family: var(--font-family-medium);
        font-size: 16px;
        text-transform: capitalize;
    }
    .fc-daygrid-day-top{
        flex-direction: initial;
        padding: 6px;
        .fc-daygrid-day-number{
            text-decoration: none;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            color: var(--color-dark-100);
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
        }
    }
    .fc-scrollgrid{
        border: none;
    }
    th{
        border: none;
        background-color: var(--color-blue-10);
        padding: 6px;
    }
    td{
        &:last-child{
            border-right: none;
        }
    }
    tr{
        &:last-child{
            td{
                border-bottom: none;
            }
        }
    }
}

.qx-pregunta__item{
    display: flex;
    align-items: flex-start;
    padding: 9px 16px;
    gap: 10px;
    background-color: #FFFFFF;
    border-left: 3px solid transparent;
    -webkit-transition: background-color .25s ease;
    -moz-transition: background-color .25s ease;
    -ms-transition: background-color .25s ease;
    -o-transition: background-color .25s ease;
    transition: background-color .25s ease;
    &:hover,
    &.active{
        background-color: var(--color-blue-10);
    }
    &.active{
        border-color: var(--color-blue-90);
    }
    .qx-icon{
        width: 100%;
        max-width: 24px;
    }
    .qx-content{
        display: flex;
        display: -webkit-flex;
        align-items: flex-start;
        gap: 4px;
        p,
        span{
            font-size: 16px;
            line-height: 24px;
        }
        p{
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }
}

.qx-testimonios{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    .qx-testimonios__multimedia{
        padding: 28px;
        width: 100%;
        border: none;
        height: -webkit-fill-available;
        .qx-card__video{
            max-width: 100%;
            .qx-video__header{
                height: 100%;
                border-radius: 30px;
                margin-bottom: 20px;
            }
            .qx-video__content{
                flex-direction: column;
                align-items: flex-start;
                h2{
                    margin-bottom: 12px;
                }
                p{
                    font-size: 16px;
                    line-height: 24px;
                    color: var(--color-dark-100);
                }
            }
        }
    }
    .qx-testimonios__especialidad{
        padding: 28px;
        width: 100%;
        max-width: 380px;
        border: none;
        .qx-especialidad__header{
            margin-bottom: 10px;
            .qx-dropdown{
                width: 100%;
                .bootstrap-select{
                    width: 100% !important;
                    min-width: 100%;
                }
            }
        }
        .qx-especialidad__body{
            height: 100%;
            max-height: 500px;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }
            &::-webkit-scrollbar-thumb {
                background-color: var(--color-blue-30);
                border-radius: 45px;
            }
        }
    }
}

.qx-especialidad{
    margin: 20px 0;
    border: none;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--color-blue-10);
    .qx-especialidad__title{
        padding: 0 24px;
        margin-bottom: 16px;
        .accordion-button{
            background-color: transparent;
            padding: 0;
            font-size: 16px;
            font-family: var(--font-family-bold);
            border: none;
            box-shadow: none;
            outline: none;
            color: var(--color-dark-100);
        }
    }
    .qx-especialidad__content{
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 0;
        .qx-especialidad__item{
            display: flex;
            align-items: flex-start;
            border-color: #000000;
            border-left: 6px solid transparent;
            height: 60px;
            width: 100%;
            padding: 6px 0;
            padding-right: 8px;
            cursor: pointer;
            -webkit-transition: all .35s ease;
            -moz-transition: all .35s ease;
            -ms-transition: all .35s ease;
            -o-transition: all .35s ease;
            transition: all .35s ease;
            &:hover{
                background-color: var(--color-blue-10);
            }
            .qx-item__icon{
                width: 100%;
                max-width: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
                .default{
                    display: block;
                    .active & {
                        display: none;
                    }
                }
                .active{
                    display: none;
                    .active & {
                        display: block;
                    }
                }
            }
            .qx-item__description{
                width: 100%;
                h2{
                    font-size: 16px;
                    line-height: 24px;
                    color: var(--color-dark-100); 
                }
                p{
                    font-size: 16px;
                    line-height: 22px;
                    color: var(--color-dark-100); 
                }
            }
        }
    }
}

.qx-reproduccion{
    .qx-card__title{
        padding: 15px 30px;
    }
    .qx-card__content{
        padding: 16px 30px 40px 30px;
        .qx-reproduccion__item{
            padding: 12px 0;
            border-bottom: 1px solid var(--color-blue-20);
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            gap: 12px;
            text-decoration: none;
            cursor: pointer;
            .qx-reproduccion__title{
                h2{
                    font-size: 24px;
                    font-family: var(--font-family-medium);
                    color: #033E73;
                }
                p{
                   font-size: 18px;
                   line-height: 24px;
                   color: #000000;
                }
            }
            .qx-reproduccion__content{
                display: flex;
                display: -webkit-flex;
                align-items: center;
                gap: 20px;
                .qx-item{
                    position: relative;
                    p{
                        font-size: 14px;
                        color: var(--color-dark-100);
                        strong{
                            font-weight: 100;
                            font-family: var(--font-family-bold);
                        }
                    }
                    &::before{
                        content: '';
                        display: block;
                        position: absolute;
                        left: -12px;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background-color: var(--color-dark-100);
                    }
                    &:first-child{
                        &::before{
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

.qx-reproduccion__lista{
    .qx-lista__header{
        padding: 20px 30px;
        border-bottom: 1px solid var(--color-blue-20);
        .qx-header__title{
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            gap: 20px;
            .qx-title__text{
                h2{
                    font-size: 24px;
                    font-family: var(--font-family-medium);
                    color: #033E73;
                    margin-bottom: 16px;
                }
                .qx-header__content{
                    display: flex;
                    display: -webkit-flex;
                    align-items: center;
                    gap: 20px;
                    .qx-item{
                        position: relative;
                        p{
                            font-size: 14px;
                            color: var(--color-dark-100);
                            strong{
                                font-weight: 100;
                                font-family: var(--font-family-bold);
                            }
                        }
                        &::before{
                            content: '';
                            display: block;
                            position: absolute;
                            left: -12px;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                            width: 5px;
                            height: 5px;
                            border-radius: 50%;
                            background-color: var(--color-dark-100);
                        }
                        &:first-child{
                            &::before{
                                display: none;
                            }
                        }
                    }
                }
            }
            .qx-header__shared{
                display: flex;
                display: -webkit-flex;
                align-items: center;
                gap: 10px;
                .qx-shared{
                    display: flex;
                    display: -webkit-flex;
                    align-items: center;
                    gap: 10px;
                    cursor: pointer;
                }
                img{
                    cursor: pointer;
                }
            }
        }
        .qx-header__actions{
            display: flex;
            display: -webkit-flex;
            align-items: center;
            gap: 10px;
        }
    }
    .qx-lista__body{
        padding: 10px 50px 30px 30px;
        .qx-item{
            display: flex;
            display: -webkit-flex;
            align-items: center;
            padding: 24px 0;
            gap: 20px;
            border-bottom: 1px solid var(--color-blue-20);
            position: relative;
            &:last-child{
                border: none;
            }
            .qx-card__video{
                max-width: 128px;
                .qx-video__header{
                    height: 82px;
                    border-radius: 8px;
                    .qx-video__play{
                        .default{
                            width: 100%;
                            max-width: 24px;
                        }
                        .active{
                            width: 100%;
                            max-width: 32px;
                        }
                    }
                }
            }
            .qx-text{
                h2{
                    font-size: 16px;
                    color: var(--color-dark-100);
                    font-family: var(--font-family-bold);
                    margin-bottom: 8px;
                }
                .qx-text__list{
                    display: flex;
                    display: -webkit-flex;
                    align-items: center;
                    gap: 20px;
                    p{
                        font-size: 14px;
                        line-height: 22px;
                        color: #616981;
                        position: relative;
                        &::before{
                            display: block;
                            content: '';
                            width: 100%;
                            max-width: 12px;
                            height: 12px;
                            background-image: url('../icons/icon-arrow-right-gray.svg');
                            background-position: center center;
                            background-size: 10px;
                            background-repeat: no-repeat;
                            position: absolute;
                            left: -15px;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                        }
                        &:first-child{
                            &::before{
                                display: none;
                            }
                        }
                    }
                }
            }
            .qx-menu{
                margin-left: auto;
            }
        }
    }
}

.qx-asesor__seleccion{
    padding: 30px;
    margin-bottom: 20px;
    border: none;
}

.qx-asesor__detalle{
    padding: 30px;
    border: none;
    .qx-asesor__slider{
        background-color: #FDF9FF;
        border: 1px solid #7C5ADB;
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 20px;
        position: relative;
        p{
            font-size: 16px;
            line-height: 24px;
            color: #7E7E7E;
            margin-bottom: 5px;
        }
        .asesor__slider{
            padding-right: 100px;
            h2{
                font-size: 18px;
                line-height: 24px;
                color: #7C5ADB;
                font-family: var(--font-family-bold);
                margin-bottom: 5px;
            }
            p{
                font-size: 16px;
                line-height: 24px;
                color: var(--color-dark-100);
            }
        }
        .qx-slider__actions{
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 100%;
            max-width: max-content;
            margin: auto;
            .qx-slider__dots{
                height: 38px;
                display: flex;
                align-items: center;
                .owl-dot{
                    border: none;
                    box-shadow: none;
                    padding: 0 4px;
                    background-color: transparent;
                    span{
                        width: 7px;
                        height: 7px;
                        border-radius: 25px;
                        background-color: rgba(124, 90, 219, .4);
                        border: none;
                        box-shadow: none;
                        display: block;
                        content: '';
                        .active & {
                            background-color: #7C5ADB;
                            width: 45px;
                        }
                    }
                }
            }
        }
        .qx-slider__nav{
            position: absolute;
            right: 12px;
            top: 12px;
            gap: 12px;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            .owl-prev{
                border: 1px solid #033E73;
                border-radius: 14px;
                width: 38px;
                height: 38px;
                background-color: transparent;
                span{
                    color: #033E73;
                    font-size: 24px;
                    line-height: normal;
                }
            }
            .owl-next{
                border: 1px solid #033E73;
                border-radius: 14px;
                width: 38px;
                height: 38px;
                background-color: transparent;
                span{
                    color: #033E73;
                    font-size: 24px;
                    line-height: normal;
                }
            }  
        }
    }
}

.qx-asesor__title{
    h2{
        color: #033E73;
        font-family: var(--font-family-medium);
        font-size: 24px;
        margin-bottom: 12px;
    }
    p{
        font-size: 16px;
        line-height: 24px;
        color: #616981;
        margin-bottom: 20px;
    }
}

.qx-asesor__types{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(275px,1fr));
    gap: 15px;
    margin-bottom: 30px;
    .qx-item{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0px 0px 7.3px 0px rgba(64, 119, 183, 0.28);
        border-radius: 8px;
        gap: 13px;
        padding: 10px 12px;
        .qx-item__title{
            display: flex;
            display: -webkit-flex;
            align-items: center;
            gap: 8px;
            img{
                width: 100%;
                max-width: 24px;
            }
        }
        .qx-item__counter{
            width: 100%;
            min-width: 60px;
            max-width: 60px;
            background-color: var(--color-blue-10);
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            span{
                font-size: 16px;
                line-height: 24px;
                color: var(--color-dark-100);
                font-family: var(--font-family-medium);
            }
        }
    }
}

.qx-asesor__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 16px;
    height: 100%;
    max-height: 510px;
    overflow-y: auto;
    padding-right: 10px;
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: var(--color-blue-30);
        border-radius: 45px;
    }
    .qx-item{
        background-color: var(--color-blue-10);
        border-radius: 17px;
        padding: 16px 12px;
        .qx-item__header{
            display: flex;
            display: -webkit-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 24px;
            width: 100%;
            .qx-image{
                width: 100%;
                max-width: 67px;
                height: 67px;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .qx-text{
                width: 100%;
                p{
                    font-size: 16px;
                    line-height: 24px;
                    color: var(--color-dark-100);
                    font-family: var(--font-family-medium);
                    margin-left: 8px;
                    margin-bottom: 5px;
                }
                .qx-text__grid{
                    display: flex;
                    display: -webkit-flex;
                    align-items: center;
                    width: 100%;
                    gap: 6px;
                    span{
                        display: flex;
                        display: -webkit-flex;
                        align-items: center;
                        justify-content: center;
                        width: 100%;
                        background-color: #FFFFFF;
                        border-radius: 6px;
                        padding: 4px 5px;
                        font-size: 14px;
                        line-height: 22px;
                        font-family: var(--font-family-medium);
                    }
                }
            }
        }
        .qx-item__footer{
            display: flex;
            display: -webkit-flex;
            align-items: center;
            gap: 10px;
            .qx-button{
                width: 100%;
                max-width: 100%;
                font-size: 14px;
                line-height: 22px;
                img{
                    margin-left: 8px;
                }
            }
        }
    }
}

.qx-card--asesor{
    box-shadow: none;
    padding: 24px;
    h2{
        font-size: 16px;
        color: var(--color-dark-100);
        font-family: var(--font-family-bold);
        margin-bottom: 8px;
    }
    p{
        font-size: 16px;
        line-height: 24px;
        color: var(--color-dark-100);
        margin-bottom: 8px;
    }
    .qx-zoom{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        img{
            margin-right: 10px;
        }
        a{
            color: #0056A3;
            font-size: 16px;
            line-height: 24px;
        }
    }
}

.qx-modal__agenda{
    max-width: 990px;
    .modal-content{
        border-radius: 20px;
        .modal-header{
            border-bottom: 1px solid var(--color-blue-20);
            padding: 22px 36px;
        }
        .modal-body{
            padding: 36px;
        }
    }  
}

.qx-modal__tareas{
    max-width: 465px;
    .modal-content{
        .modal-body{
            .qx-tareas__calendar{
                margin-bottom: 20px;
                .qx-calendar__dias{
                    display: flex;
                    display: -webkit-flex;
                    align-items: center;
                    gap: 6px;
                    margin-bottom: 2px;
                    div{
                        width: 100%;
                        font-size: 16px;
                        line-height: 24px;
                        text-align: center;
                    }
                }
                .qx-calendar__fechas{
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    div{
                        width: 100%;
                        height: 44px;
                        border-radius: 6px;
                        font-size: 18px;
                        line-height: 24px;
                        display: flex;
                        display: -webkit-flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        &.active{
                            background-color: var(--color-blue-20);
                            color: #033E73;
                        }
                    }
                }
            }
            .qx-tareas__progreso{
                margin-bottom: 20px;
                .qx-progreso__title{
                    display: flex;
                    display: -webkit-flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 16px;
                    p{
                        font-size: 20px;
                        font-family: var(--font-family-medium);
                    }
                }
                .qx-percent{
                    width: 100%;
                    height: 10px;
                    background-color: var(--color-blue-10);
                    border-radius: 25px;
                    overflow: hidden;
                    span{
                        background-color: var(--color-blue-80);
                        width: 13%;
                        height: 100%;
                        display: block;
                    }
                }
            }
            .qx-tareas__lista{
                .qx-tarea__title{
                    margin-bottom: 20px;
                    p{
                        font-size: 20px;
                        font-family: var(--font-family-medium);
                    }
                }
                .qx-tab__container{
                    height: 100%;
                    max-height: 300px;
                    overflow-y: auto;
                    margin-right: -20px;
                    padding-right: 20px;
                    &::-webkit-scrollbar {
                        width: 8px;
                        height: 8px;
                    }
                    &::-webkit-scrollbar-thumb {
                        background-color: var(--color-blue-30);
                        border-radius: 45px;
                    }
                }
            }
        }
    }
}

.qx-agenda{
    display: flex;
    display: -webkit-flex;
    align-items: flex-start;
    gap: 30px;
    .qx-agenda__calendar{
        width: 100%;
        padding: 20px 10px;
    }
    .qx-agenda__horarios{
        width: 100%;
        max-width: 360px;
        background-color: #F0F5F8;
        border-radius: 24px;
        h2{
            font-size: 18px;
            line-height: 24px;
            color: var(--color-dark-100);
            font-family: var(--font-family-bold);
            padding: 20px 50px;
        }
        .qx-horarios{
            padding: 0 50px;
            height: 100%;
            max-height: 400px;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }
            &::-webkit-scrollbar-thumb {
                background-color: var(--color-blue-30);
                border-radius: 45px;
            }
            .qx-item{
                margin: 5px 0;
                display: flex;
                display: -webkit-flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--color-blue-90);
                border-radius: 8px;
                height: 43px;
                cursor: pointer;
                span{
                    font-size: 16px;
                    font-family: var(--font-family-bold);
                    color: var(--color-blue-90);
                }
            }
        }
    }
}

.qx-datepicker{
    .ui-datepicker{
        width: 100%;
        border: none;
        .ui-datepicker-header{
            background-color: transparent;
            border: none;
            margin-bottom: 20px;
            .ui-datepicker-title{
                font-size: 18px;
                line-height: 24px;
                font-family: var(--color-dark-100);
                height: 100%;
                min-height: 38px;
                padding: 0;
                display: flex;
                display: -webkit-flex;
                align-items: center;
                justify-content: center;
            }
            .ui-datepicker-prev{
                width: 38px;
                height: 38px;
                border: 1px solid #033E73;
                border-radius: 14px;
                top: 0;
                left: 0;
                background-color: transparent;
                cursor: pointer;
                .ui-icon{
                    background-image: url('../icons/icon-arrow-left-blue.svg');
                    background-position: center center;
                }
            }
            .ui-datepicker-next{
                width: 38px;
                height: 38px;
                border: 1px solid #033E73;
                border-radius: 14px;
                top: 0;
                right: 0;
                background-color: transparent;
                cursor: pointer;
                .ui-icon{
                    background-image: url('../icons/icon-arrow-right-blue.svg');
                    background-position: center center;
                }
            }
        }
        .ui-datepicker-calendar{
            thead{
                tr{
                    th{
                        background-color: #3968AA;
                        color: #FFFFFF;
                        font-size: 18px;
                        line-height: 24px;
                        &:first-child{
                            border-top-left-radius: 20px;
                        }
                        &:last-child{
                            border-top-right-radius: 20px;
                        }
                    }
                }
            }
            tbody{
                border: 1px solid #DDE1E6; 
                border-top: none;
                border-bottom-left-radius: 20px;
                border-bottom-right-radius: 20px;
                tr{
                    td{
                        .ui-state-default{
                            text-align: center;
                            padding: 18px;
                            font-size: 18px;
                            line-height: 24px;
                            color: #616981;
                            border: none;
                            border-radius: 16px;
                            background-color: transparent;
                            &.ui-state-active{
                                background-color: var(--color-blue-20);
                                color: #033E73;
                                font-family: var(--font-family-bold);
                            }
                        }
                    }
                }
            }
        }
    }
}

.qx-estadisticas__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(165px,1fr));
    gap: 18px;
    .qx-item{
        border: 1px solid var(--color-blue-20);
        border-radius: 12px;
        padding: 12px;
        p{
            font-size: 16px;
            line-height: 24px;
            color: #616981;
        }
        h2{
            font-size: 24px;
            color: #033E73;
            font-family: var(--font-family-medium);
        }
    }
}

.qx-accordion{
    .accordion-item{
        border: none;
        .accordion-header{
            .accordion-button{
                box-shadow: none;
                background-color: transparent;
                p{
                    font-size: 16px;
                    line-height: 24px;
                    color: #252525;
                }
            }
        }
        .accordion-body{
            background-color: #F0F5F8;
            border-radius: 14px;
            padding: 4px 15px;
            .qx-detalle__item{
                display: flex;
                display: -webkit-flex;
                align-items: flex-start;
                justify-content: space-between;
                margin: 12px 0;
                .qx-text{
                    h2{
                        font-size: 16px;
                        line-height: 24px;
                        color: #000000;
                        margin: 0;
                    }
                    p{
                        font-size: 14px;
                        line-height: 22px;
                        color: #616981;
                    }
                }
            }
        }
    }
}

.qx-resultados__cards{
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    width: 100%;
    margin-bottom: 16px;
    padding-bottom: 16px;
    .qx-resultado__item{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 32px 12px 16px;
        border-radius: 12px;
        border: 1px solid var(--color-blue-20);
        .qx-icon{
            min-width: 42px;
            width: 42px;
            height: 42px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .qx-text{
            p{
                font-size: 16px;
                line-height: 24px;
                color: #033E73;
                font-family: var(--font-family-medium);
            }
            h2{
                font-size: 26px;
                color: #033E73;
                font-family: var(--font-family-bold);
                span{
                    font-family: var(--font-family-medium);
                }
            }
        }
    }
}

.qx-dificultad{
    display: flex;
    display: -webkit-flex;
    gap: 3px;
    align-items: flex-end;
    justify-content: center;
    span{
        width: 100%;
        max-width: 3px;
        border-radius: 80px;
        display: block;
        background-color: var(--color-blue-20);
        &:nth-child(1){
            height: 9.5px;
        }
        &:nth-child(2){
            height: 12.5px;
        }
        &:nth-child(3){
            height: 16px;
        }
    }
    &.facil{
        span{
            &:nth-child(1){
                background-color: #0056A3;
            }
        }
    }
    &.intermedio{
        span{
            &:nth-child(1),
            &:nth-child(2){
                background-color: #0056A3;
            }
        }
    }
    &.dificil{
        span{
            background-color: #0056A3;
        }
    }
}

.qx-resultado__note{
    border: 1px solid #7C5ADB;
    border-radius: 10px;
    background-color: #FDF9FF;
    padding: 6px 12px;
    width: 100%;
    max-width: 165px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .qx-icon{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        gap: 5px;
        p{
            font-size: 16px;
            line-height: 24px;
            color: #7C5ADB;
        }
    }
    .qx-text{
        p{
            font-size: 16px;
            line-height: 24px;
            color: #7C5ADB;
        }
    }
}

.qx-card__tarea{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    background-color: var(--color-blue-10);
    border-radius: 10px;
    margin: 8px 0;
    padding: 8px;
    justify-content: space-between;
    &.blue{
        border-left: 10px solid #0377E0;
    }
    &.red{
        border-left: 10px solid #CE5265;
    }
    &.yellow{
        border-left: 10px solid #C57900;
    }
    &.active{
        .qx-check{
            .default{
                display: none;
            }
            .active{
                display: block;
            }
        }
    }
    .qx-text{
        width: 100%;
        max-width: 300px;
        img{
            margin-right: 5px;
        }
        p{
            font-size: 16px;
            line-height: 24px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            .blue &{
                color: #0377E0;
            }
            .red &{
                color: #CE5265;
            }
            .yellow &{
                color: #C57900;
            }
        }
        .qx-text__list{
            display: flex;
            display: -webkit-flex;
            align-items: center;
            gap: 20px;
            padding-left: 20px;
            span{
                font-size: 16px;
                color: #7E7E7E;
                position: relative;
                &::before{
                    position: absolute;
                    left: -10px;
                    display: block;
                    content: '';
                    background-color: #616981;
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    bottom: 0;
                    top: 0;
                    margin: auto;
                }
                &:first-child{
                    &::before{
                        display: none;
                    }
                }
            }
        }
    }
    .qx-check{
        width: 100%;
        max-width: 25px;
        .default{
            display: block;
        }
        .active{
            display: none;
        }
    }
}

@media (max-width: 1024px){
    body {
        font-family: var(--font-family-regular);
        overflow: hidden;
        background-color: var(--color-blue-pastel);
        &.reduced{
            &::before {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                content: '';
                display: block;
                background-color: rgba(0,0,0,0.4);
                width: 100%;
                height: 100%;
                z-index: 5;
            }
        }
        &.expanded{
            &::before {
                z-index: 10;
            }
        }
    }
    .qx-nav {
        flex-direction: column;
        .qx-nav__principal{
            height: 60px;
            .qx-nav__logo{
                .navbar-brand{
                    display: none;
                }
            }
            .qx-nav__menu{
                gap: 24px;
                .qx-menu__dropdown{
                    display: none;
                }
                .qx-menu__user {
                    width: 31px;
                    min-width: 31px;
                    height: 31px;
                }
            }
        }
        .qx-nav__secondary{
            display: flex;
            border-top: 1px solid #FFFFFF;
        }
        .qx-menu__dropdown{
            .bootstrap-select {
                .dropdown-menu{
                    margin-top: 5px;
                }
            }
        }
    }
    .qx-sidebar{
        .qx-sidebar__principal{
            -webkit-transform: translateX(-300px);
            -moz-transform: translateX(-300px);
            -ms-transform: translateX(-300px);
            -o-transform: translateX(-300px);
            transform: translateX(-300px);
            height: calc(100dvh - 95px);
            .expanded &{
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0);
            }
            .qx-sidebar__logo{
                display: flex;
            }
        }
        .qx-sidebar__secondary{
            -webkit-transform: translateX(-400px);
            -moz-transform: translateX(-400px);
            -ms-transform: translateX(-400px);
            -o-transform: translateX(-400px);
            transform: translateX(-400px);
            left: 0;
            border: none;
            .reduced &{
                display: block;
               -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                transform: translateX(0); 
            }
            .qx-sidebar__content{
                height: calc(100dvh - 235px);
                .preguntas & {
                    height: calc(100dvh - 195px);
                }
            }
        }
        .qx-sidebar__expanded{
            top: 95px;
            left: 0 !important;
            img{
                transform: rotate(180deg) !important;
            }
            .reduced &{
                left: 313px !important;
                z-index: 20;
                border-radius: 0;
                border-top-left-radius: 12px;
                border-bottom-left-radius: 12px;
                img{
                    transform: rotate(0) !important;
                }
            }
        }
    }
    .qx-main{
        margin-left: 0 !important;
        padding: 32px 24px;
        height: calc(100dvh - 95px);
        &.qx-main--expanded{
            padding: 32px 24px;
        }
    }
    .qx-home{
        .qx-home__sliders{
            max-width: 420px;
            margin-bottom: 24px;
        }
        .qx-home__content{
            max-width: 100%;
        }
    }
    .qx-videoclases__grid {
        column-gap: 50px;
    }
    .qx-calificacion{
        .qx-calificacion__image{
            display: none;
        }
    }
    .qx-syllabus__item{
        .qx-syllabus__content{
            padding: 10px 24px 20px 24px;
        }
    }
    .qx-login{
        background-size: cover;
        .qx-login__container{
            .qx-login__slider{
                display: none;
            }
        }
    }
}

@media (max-width: 768px){
    .qx-nav {
        .qx-nav__principal{
            .qx-nav__logo{
                .show-search &{
                    display: none !important;
                }
            }
            .qx-nav__menu{
                .qx-menu__icon{
                    .show-search &{
                        display: none;
                    }
                }
                .qx-menu__user{
                    .show-search &{
                        display: none !important;
                    }
                }
            }
        }
    }
    .qx-search{
        .show-search &{
            max-width: 100%;
            .qx-search__arrow{
                display: flex;
            }
        }
        .qx-search__menu{
            .show-search &{
                max-width: 100%;
            }
        }
    }
    .qx-home{
        flex-direction: column;
        .qx-home__sliders{
            max-width: 100%;
        }
    }
    .qx-home__default{
        flex-direction: column;
        padding: 24px;
        .qx-home__image{
            padding: 0 30px;
            order: 1;
            img{
                width: 100%;
            }
        }
        .qx-home__content{
            order: 2;
            h2{
                font-size: 20px;
            }
            p{
                font-size: 16px;
                line-height: normal;

            }
            .qx-home__list{
                .qx-item__list{
                    .qx-text{
                        p{
                            font-size: 16px;
                            line-height: normal;
                        }
                    }
                }
            }
        }
    }
    .qx-evaluaciones__grid{
        flex-direction: column;
    }
    .qx-videoclases__grid {
        gap: 28px;
        padding: 28px;
    }
    .qx-materiales{
        max-width: 100%;
    }
    .qx-evaluacion__item{
        .qx-item__content{
            flex-direction: column;
            padding-left: 0;
            align-items: flex-start !important;
            .qx-evaluacion__content{
                .qx-evaluacion__resultados{
                    padding-left: 0;
                }
            }
        }
    }
    .qx-card {
        &.qx-card--default{
            padding: 20px;
        }
        .qx-card__title {
            h2{
                font-size: 20px;
            }
        }
        .qx-default__title{
            h2{
                font-size: 22px;
            }
        }
        .qx-default__subtitle{
            p{
                font-size: 14px;
                line-height: 20px;
            }
        }
    }
    .qx-metodo{
        gap: 24px;
        padding: 24px;
    }
    .qx-card__video{
        max-width: 100%;
    }
    .qx-search__filter{
        &.show-search{
            max-width: 100%;
        }
    }
    .qx-calificacion{
        flex-direction: column;
        justify-content: center;
        text-align: center;
        .qx-calificacion__content{
            h2{
                font-size: 18px;
            }
        }
        .qx-califincacion__actions{
            gap: 16px !important;
        }
    }
    .qx-recursos{
        h2{
            font-size: 22px;
        }
    }
    .qx-filter{
        .qx-filter__radiobutton{
            display: none;
        }
    }
    .qx-login{
        background: none;
        .qx-login__container{
            height: 100dvh;
            .qx-login__card{
                height: 100dvh;
                padding: 0;
                .qx-card{
                    border: none;
                    border-radius: 0;
                    height: 100dvh;
                    padding: 24px;
                    overflow-y: auto;
                }
            }
        }
    }
    .qx-examen__filter{
        flex-direction: column;
    }
    .qx-examen__interno{
        padding: 24px;
    }
    .qx-table{
        thead{
            tr{
                th{
                    font-size: 14px;
                    line-height: normal;
                }
            }
        }
        tbody{
            tr{
                td{
                    font-size: 14px;
                    line-height: normal;
                }
            }
        }
    }
    .qx-pregunta{
        .qx-pregunta__header,
        .qx-pregunta__content{
            padding: 20px;
        }
        .qx-pregunta__content{
            .qx-pregunta__alternativas{
                flex-direction: column;
                .qx-image{
                    order: 1;
                }
                .qx-alternativas{
                    order: 2;
                }
            }
        }
    }
    .qx-ayuda{
        padding: 24px;
        .qx-ayuda__cards{
            flex-direction: column;
            .qx-ayuda__dudas{
                height: 100%;
                .qx-text{
                    margin-bottom: 20px;
                }
            }
        }
    }
    .qx-biblioteca{
        padding: 24px;
        gap: 24px;
    }
    .qx-biblioteca__grid{
        gap: 24px;
    }
    .qx-ficha{
        padding: 24px;
        .qx-ficha__header{
            .qx-ficha__aviso{
                flex-direction: column;
                .qx-button{
                    margin: 0;
                }
            }
        }
        .qx-ficha__formulario{
            .qx-formulario{
                .qx-formulario__item{
                    .qx-formulario__content{
                        padding: 12px 0;
                        gap: 0;
                    }
                }
            }
        }
    }
    .qx-tendencias{
        padding: 24px;
        .qx-tendencias__cards{
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
            .qx-tendencia__item{
                padding: 10px 12px;
                .qx-text{
                    p{
                        font-size: 14px;
                        line-height: normal;
                    }
                    h2{
                        font-size: 24px;
                    }
                }
            }
        }
    }

    .qx-resultados__cards{
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
        .qx-resultado__item{
            padding: 10px 12px;
            .qx-text{
                p{
                    font-size: 14px;
                    line-height: normal;
                }
                h2{
                    font-size: 24px;
                }
            }
        }
    }

    .qx-calendario{
        .qx-calendar{
            .fc-header-toolbar{
                flex-direction: column;
                padding: 16px;
            }
        }
    }

    .fc{
        .fc-toolbar-title{
            font-size: 18px;
            margin-right: 12px;
        }
    }
    .qx-testimonios{
        flex-direction: column;
        .qx-testimonios__especialidad{
            order: 1;
            max-width: 100%;
            padding: 24px;
            .qx-especialidad__body{
                max-height: 200px;
            }
        }
        .qx-testimonios__multimedia{
            padding: 24px;
            order: 2;
            .qx-card__video{
                .qx-video__header{
                    border-radius: 20px;
                }
            }
        }
    }
    .qx-asesor__seleccion{
        padding: 24px;
        margin-bottom: 20px;
    }
    .qx-asesor__types{
        margin-bottom: 20px;
    }
    .qx-asesor__grid{
        grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
        .qx-item{
            .qx-item__footer,
            .qx-item__header{
                flex-direction: column;
            }
            
        }
    }
    .qx-asesor__detalle{
        padding: 24px;
        .qx-asesor__slider{
            .asesor__slider{
                padding: 0;
            }
            .qx-slider__nav{
                display: none;
            }
        }
    }
    .qx-estadisticas__grid{
        .qx-item{
            h2{
                font-size: 20px;
            }
            p{
                font-size: 14px;
                line-height: 20px;
            }
        }
    }
    .qx-reproduccion__lista{
        .qx-lista__header{
            padding: 20px;
            .qx-header__title{
                flex-direction: column;
                .qx-title__text{
                    .qx-header__content{
                        flex-direction: column;
                        gap: 10px;
                    }
                }
            }
            .qx-header__actions{
                justify-content: center;
            }
        }
        .qx-lista__body{
            padding: 20px;
            .qx-item{
                flex-direction: column;
                .qx-card__video{
                    max-width: 200px;
                    .qx-video__header{
                        height: 100px;
                    }
                }
                .qx-menu{
                    position: absolute;
                    right: 20px;
                    top: 20px;
                }
            }
        }
    }
}

@media (max-width: 580px){
    .qx-metodo{
        display: flex;
        flex-direction: column;
    }
    .qx-multimedia{
        .qx-multimedia__header{
            gap: 20px;
            flex-direction: column;
            .qx-multimedia__title{
                margin-right: auto;
            }
            .qx-multimedia__actions{
                margin-left: auto;
            }
        }
    }
    .qx-filter{
        flex-direction: column;
        .qx-filter__prioridad{
            .qx-dropdown{
                max-width: 100%;
                .bootstrap-select{
                    .dropdown-toggle{
                        .filter-option{
                            .filter-option-inner{
                                .filter-option-inner-inner{
                                    max-width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .qx-syllabus__item{
        .qx-syllabus__content{
            flex-direction: column;
        }
    }
    .qx-tabs{
        gap: 6px;
        .nav-item{
            .nav-link{
                padding: 7px 12px;
            }
        }
    }
    .qx-examenes{
        padding: 20px 16px;
        .qx-examen__item{
            .qx-examen__content{
                padding-left: 35px;
                padding-bottom: 30px;
            }
        }
    }
    .qx-tendencias{
        .qx-tendencias__filters{
            flex-direction: column;
            max-width: 100%;
        }
    }
    .qx-card__tarea{
        .qx-text{
            max-width: 220px;
        }
    }
}