//... General Post SCSS for use in all presets....

/*------------------------------------
   ?CONTENIDO
------------------------------------*/


/**
   * CONTENIDO...........Lo estás leyendo!!
   * AJUSTES A MOODLE...........Ajustes de los estilos de Moodle.
   * AJUSTES GENERALES...........Ajustes de los estilos generales.
   * FRONTPAGE...........Estilos del template.
   * COURSE...........Estilos del template.
   * COLUMNS...........Estilos del template.
   * CUESTIONARIO...........Estilos del template.
   * COMPONENTES...........Estilos de los componentes.
   * COURSE-BANNER-LANZADORES...........Estilos del banner y lanzadores del curso
   * TEACHER...........Estilos del bloque docente
   * BACKDROP...........Estilos del backdrop
   * ESTILOS PERSONALIZADOS...........Estilos que el tema no soporta ya que son muy personalizados
   * PRESENTACIÓN...........Estilos de la presentación de los cursos
   * AGILESSON AJUSTES PARA IMASTER...........Estilos plugin Agilesson personalizados
   * BLOQUE NECESITO AYUDA...........Estilos del bloque ayuda HTML
   * BLOQUE COMPAÑEROS...........Estilos del bloque compañeros generado por Moodle
   * BLOQUE EXPERTO...........Estilos del bloque experto HTML
**/


/*------------------------------------
   ?AJUSTES A MOODLE
------------------------------------*/

//...Header...
.page-context-header {
    padding-right: 1rem;
}

.header-button-group {
    margin-left: .3em;
    margin-right: .3em;
}

.page-context-header .header-button-group {
    float: right;
}

.page-context-header .header-button-group a {
    top: 0;
}

//...Pagina mensajes...
#page-message-index #region-main {
    padding-bottom: 100px;
}

.summary .no-overflow,
.activity .no-overflow {
    overflow: initial;
}


/*------------------------------------
   ?AJUSTES GENERALES
------------------------------------*/

h1,
.h1 {
    font-size: $h1-fontSize;
}


/*------------------------------------
   ?FRONTPAGE
------------------------------------*/

.imaster-frontpage__content {
    padding-top: 1rem;
}

//...Rejilla de cursos...
.imaster-courseGrid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: $courses-grid-columns;
    grid-gap: $courses-grid-gap;

    @media (min-width: $lg) {
        grid-template-columns: $courses-grid-columns--lg;
    }

    @media (min-width: $xxl) {
        grid-template-columns: $courses-grid-columns--xxl;
    }
}

//...Tarjeta de curso...
.imaster-courseCard {
    display: grid;
    grid-template-rows: auto 1fr auto;
    border: $courseCard-border;
    border-radius: $courseCard-borderRadius;
    overflow: hidden;
}

.imaster-courseCard__image {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: $courseCard-image-paddingBottom;
    background-size: cover;
    background-position: center;
}

.imaster-courseCard__body {
    background-color: $courseCard-bgColor;
}

.imaster-courseCard__title {
    font-size: $courseCard-title-fontSize;
    color: $courseCard-title-color;
    background-color: $courseCard-title-bgColor;
    padding: $courseCard-padding;
    margin-bottom: 0;
}

.imaster-courseCard__description,
.imaster-courseCard__body p {
    padding: $courseCard-padding;
    margin-bottom: 0;
}

.imaster-courseCard__btnContent {
    padding: $courseCard-padding;
    text-align: center;
}

.imaster-courseCard__footer {
    background-color: $courseCard-bgColor;
    align-self: end;
}

.imaster-courseCard__progressText {
    text-align: right;
    padding: 0 $courseCard-padding;
}

.imaster-courseCard__progressNumber {
    font-weight: $font-weight-title;
}

.imaster-courseCard__progressBar {
    height: $courseCard-progressBar-height;
    background-color: $courseCard-progressBar-bgColor;
    padding: $courseCard-progressBar-padding;
}

.imaster-courseCard__progressBarBar {
    display: block;
    background-color: $courseCard-progressBar-colorBar;
    height: $courseCard-progressBar-height - ($courseCard-progressBar-padding * 2);
    border-radius: 1.2em;
    transition: width .3s, background-color .3s;
}

.imaster-courseCard--completo {
    .imaster-courseCard__progressBarBar {
        background-color: $courseCard-progressBar-colorBar--completo;
    }
}

//...Bloque de bienvenida...
.imaster-userWelcomeBlock {
    margin-top: 50px;
    margin-bottom: 20px;
    border-radius: .45rem;
    background-color: $userWelcomeBlock-bgColor;
    background-image: $userWelcomeBlock-bgImage;
    background-size: $userWelcomeBlock-bgSize;
    background-position: $userWelcomeBlock-bgPosition;
    background-repeat: $userWelcomeBlock-bgRepeat;
}

.imaster-userWelcomeBlock__header {
    text-align: center;
    margin-bottom: 20px;
}

.imaster-userWelcomeBlock__greeting {
    font-size: 1.2rem;
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.imaster-userWelcomeBlock__userImage {
    margin-top: -50px;
}

.imaster-userWelcomeBlock__greetingText {
    display: block;
    color: $userWelcomeBlock-greetingText-color;
}

.imaster-userWelcomeBlock__greetingName {
    color: $userWelcomeBlock-greetingName-color;
    font-weight: $font-weight-title;
}

.imaster-userWelcomeBlock__body {
    padding: 1rem;
    border-top: $userWelcomeBlock-body-border-top;
    border-bottom: $userWelcomeBlock-body-border-bottom;
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: center;
}

.imaster-userWelcomeBlock__footer {
    border-radius: 0 0 .45rem .45rem;
    padding-bottom: 50%;
    background-image: url([[pix:theme|frontpage/uwb-decor]]);
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
}

.block_welcome .imaster-block__content {
    background-color: white;
    padding: 0.6rem;
}


/*------------------------------------
   ?MY
------------------------------------*/

.region-main-content .imaster-block__title {
    background-color: $marca-color1;
    color: $white;
    padding: 0.7em;

    &:after {
        left: 0;
        width: 100%;
    }
}

$progress-bar-bg: $marca-color1;

.imaster-my__progressBar {
    background-color: $marca-color2;
}

.imaster-my__progressText {
    font-size: 90%;
    color: $marca-color1;
    margin-top: 5px;
    margin-left: 5px;
}


#page-my-index .card-body .categoryname.text-truncate {
    font-size: 14px;
}

#page-my-index .card-body .multiline {
    color: #25294F;
}


/*------------------------------------
   ?COURSE
------------------------------------*/

.imaster-course__regionMain {

    //...Header (título del curso)...
    .card {
        border-radius: $course-cardTitle-borderRadius;
        border: $course-cardTitle-border;
        border-bottom: $course-cardTitle-borderBottom;
    }

    .card-body {
        padding: $course-cardTitle-padding;
    }

    //...Contenido curso...
    #region-main {
        border: $course-regionMain-border;
        padding: $course-regionMain-padding;
        overflow-y: hidden;
    }

    .imaster-title--secondary {
        margin-bottom: $title-secondary-curso-margin-bottom;
    }

    .course-content ul.section {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
    }

    .section .label .contentwithoutlink {
        padding-right: 0;
    }

    .section .label .mod-indent-outer {
        padding-left: 0;
    }

    //...Completado...
    .section .activity .actions {
        display: none;
    }

    //...Módulos de actividad...
    li.activity.modtype_label {
        border-bottom: 0;
        margin-left: 0;
    }

    li.activity {
        margin-bottom: $course-activity-marginBottom;
        border-bottom: $course-activity-borderBottom;
        border-radius: 0;
        padding-top: $course-activity-paddingTop;
        padding-bottom: $course-activity-paddingBottom;
        margin-left: 0;
    }

    li.activity>div {
        padding: 0;
    }

    .single-section .completionprogress,
    .completionprogress {
        display: none;
    }
}

//...Editing (Cuando se tiene activada la opción de edición)...
.editing {
    .section .label .contentwithoutlink {
        padding-right: 200px;
    }

    .section .label .mod-indent-outer {
        padding-left: 2rem;
    }

    //...Completado...
    .section .activity .actions {
        display: flex;
    }

    .single-section .completionprogress,
    .completionprogress {
        display: block;
    }
}

//... Navegación módulos ...
.imaster-course__regionMain .nav-tabs {
    border-bottom: none;
    background-color: $marca-color1;
    padding: 2px 15px 9px;
    border-radius: 5px;
}

.imaster-course__regionMain .nav-tabs .nav-link {
    position: relative;
    font-family: $font-family-title;
    font-size: $mod-nav-button-font-size;
    font-weight: $font-weight-title;
    color: $mod-nav-button-color;
    white-space: normal;
    border: 0;
    border-bottom: $mod-nav-button-border;
    border-radius: $mod-nav-button-border-radius;
    line-height: 1.2;
    margin: $mod-nav-button-margin;
    transition: $mod-nav-button-transition;
}

.imaster-course__regionMain .nav-tabs .nav-link:hover {
    cursor: pointer;
    color: $mod-nav-button-hover-color;
    box-shadow: $mod-nav-button-hover-box-shadow;
    transform: $mod-nav-button-hover-transform;
}

.imaster-course__regionMain .nav-tabs .nav-link:active {
    box-shadow: $mod-nav-button-active-box-shadow;
    transform: $mod-nav-button-active-transform;
}

.imaster-course__regionMain .nav-tabs .nav-link:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: $mod-nav-button-color;
}

.imaster-course__regionMain .nav-tabs .nav-item:first-child .nav-link:after {
    border-radius: 3px 0 0 3px;
}

.imaster-course__regionMain .nav-tabs .nav-item:last-child .nav-link:after {
    border-radius: 0 3px 3px 0;
}

.imaster-course__regionMain .nav-tabs .nav-link .tab_content.marker {
    font-weight: $font-weight-title;
}

.imaster-course__regionMain .nav-tabs .nav-link.active {
    color: $active-mod-nav-button-color;
    font-weight: $active-mod-nav-button-font-weight;
    background-color: $active-mod-nav-button-background-color;
    border-bottom: $active-mod-nav-button-border;
}

.imaster-course__regionMain .nav-tabs .nav-link.active:hover {
    color: $active-mod-nav-button-hover-color;
    background-color: $active-mod-nav-button-hover-background-color;
    border: 0;
    border-bottom: $active-mod-nav-button-hover-border;
}

.imaster-course__regionMain .nav-tabs .nav-link.active:active {
    box-shadow: $active-mod-nav-button-active-box-shadow;
    transform: $active-mod-nav-button-active-transform;
}

.imaster-course__regionMain .nav-tabs .nav-link.active:after {
    background-color: $active-mod-nav-button-color;
}

.imaster-course__regionMain .nav-tabs .nav-link.active .tab_content.marker {
    font-weight: $active-mod-nav-button-font-weight;
}

.imaster-course__regionMain .nav-tabs .tab_content {
    padding: $mod-nav-button-padding;
}

.imaster-course__regionMain .course-content ul.topics li.section .summary {
    margin-left: 0;
}


/*------------------------------------
   ?COLUMNS
------------------------------------*/

.imaster-columns {

    //...Header...
    .imaster-header {
        .card {
            border: 0;
            padding: 0;
        }

        .card-body {
            padding: 0 0 1rem;
        }
    }

    //...H1 header...
    .page-context-header {
        float: none;
        @extend .imaster-title__container;
        margin-bottom: 1rem;

        h1 {
            margin-bottom: 0.2rem;
        }

        .page-header-image {
            margin-bottom: .3rem;
        }
    }

    #maincontent+h2 {
        @extend .imaster-title--secondary;
    }

    //...Region main...
    #region-main {
        padding-left: 0;
        padding-right: 0;
        border: 0;
        overflow: initial;
    }

    //...Pagina perfil...
    .userprofile .profile_tree {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;

        @media (min-width: $sm) {
            grid-template-columns: repeat(2, 1fr);
        }

        section {
            margin-bottom: 0;
        }
    }
}

//...Foro...
.imaster-forumpost {
    background-color: $forum-card-bgColor;
    border: $forum-card-border;
    border-radius: $forum-card-borderRadius;
}

.imaster-forumpost__header {
    border-bottom: $forum-card-header-borderBotom;

    .imaster-userImage {
        width: 50px;
    }
}


/*------------------------------------
   ?CUESTIONARIO
------------------------------------*/

.que .formulation {
    padding: $questionnaire-form-padding;
    background-color: $questionnaire-form-bgColor;
}

.que .qtext {
    background-color: $questionnaire-form-question-bgColor;
    padding: $questionnaire-form-question-padding;
    border-radius: $questionnaire-form-question-borderRadius;
}

.que .ablock {
    padding: $questionnaire-form-reply-padding;
}

.formulation td select {
    width: 100%;
}

.confirmation-buttons .btn {
    margin-bottom: 10px;
}

//...Navegación por el cuestionario...
.path-mod-quiz #mod_quiz_navblock .qnbutton {
    color: $questionnaire-nav-color;
    font-size: $questionnaire-nav-fontSize;
    font-weight: $questionnaire-nav-fontWeight;
    width: 40px;
    border: $questionnaire-nav-border;
    border-radius: $questionnaire-nav-borderRadius;
    overflow: hidden;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        text-decoration: none;
    }
}

.path-mod-quiz #mod_quiz_navblock .qnbutton.thispage .thispageholder {
    border-width: $questionnaire-nav-thispageholder-border-width;
    border-color: $questionnaire-nav-thispageholder-border-color;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton .thispageholder,
.accesshide {
    border-radius: $questionnaire-nav-borderRadius;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton.notyetanswered .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.invalidanswer .trafficlight {
    z-index: -1;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton.invalidanswer .trafficlight {
    background-color: $questionnaire-nav-complete-bgColor;
    margin-top: 0;
    height: 50%;
    width: 100%;
    background-image: none;
    z-index: -1;
    top: auto;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton.complete .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.requiresgrading .trafficlight {
    background-color: $questionnaire-nav-complete-bgColor;
    margin-top: 0;
    top: auto;
    height: 100%;
    z-index: -1;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton.flagged .thispageholder {
    background-image: none;
    box-shadow: $questionnaire-nav-flagged-boxShadow;
}

//...Info...
.que .info {
    background-color: $questionnaire-info-bgColor;
    border: $questionnaire-info-border;
    border-radius: $questionnaire-info-borderRadius;
    width: 8rem;
}

.que .content {
    margin: 0 0 0 8.6rem;
}

.que h3.no {
    font-size: 0.9rem;
}

.que span.qno {
    font-size: 1.3em;
}

.questionflag:hover {
    text-decoration: underline;
}


/*------------------------------------
   ?COMPONENTES
------------------------------------*/

//...Títulos...
.imaster-title__container {
    border-bottom: $title-container-borderBottom;
    padding-bottom: $title-container-paddingBottom;

    h1 {
        margin-bottom: 0.2rem;
    }
}

.imaster-title--secondary {
    position: relative;
    background: $title-secondary-bg;
    padding: $title-secondary-padding;
    font-size: $title-secondary-fontSize;
    color: $title-secondary-color;
    margin-bottom: $title-secondary-margin-bottom;
}

//...Botones...
.btn {
    white-space: normal;
    border-color: initial;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;

    &:not(:disabled):not(.disabled):hover {
        box-shadow: $btn-shadow--hover;
        transform: $btn-transform--hover;
    }

    &:active,
    &:focus,
    &:active:focus,
    &:not(:disabled):not(.disabled):active:focus {
        box-shadow: $btn-shadow--active;
        transform: $btn-transform--active;
    }
}

.btn.btn-link {
    border-color: $btn-link-borderColor;

    &:not(:disabled):not(.disabled),
    &:hover {
        background-color: $btn-link-bgColor;
        box-shadow: $btn-link-shadow;
    }
}

.btn-primary {
    color: $btn-primary-color;
    font-weight: $btn-primary-weight;
    background-color: $btn-primary-bgColor;
    border: $btn-primary-border;

    &:hover {
        color: $btn-primary-color;
        background-color: $btn-primary-bgColor--hover;
        border: $btn-primary-border--hover;
    }

    &:active,
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active {
        color: $btn-primary-color;
        background-color: $btn-primary-bgColor;
        border: $btn-primary-border;
    }
}

.btn-secondary {
    font-weight: $btn-secondary-weight;
    color: $btn-secondary-color;
    background-color: $btn-secondary-bgColor;
    border: $btn-secondary-border;

    &:hover {
        color: $btn-secondary-color;
        background-color: $btn-secondary-bgColor--hover;
        border: $btn-secondary-border--hover;
    }

    &:active,
    &:not(:disabled):not(.disabled):active {
        color: $btn-secondary-color;
        border: $btn-secondary-border;
        background-color: $btn-secondary-bgColor;
    }
}

//...Imágenes de usuario...
.imaster-userImage,
.userpicture {
    border: $userImages-border;
    border-radius: $userImages-borderRadius;
    padding: $userImages-padding;
    box-sizing: $userImages-boxSizing;
}

//...Modal...
.moodle-dialogue-base .moodle-dialogue.mod_quiz_preflight_popup .moodle-dialogue-bd #mod_quiz_preflight_form #fgroup_id_buttonar {
    padding-bottom: 12px;
}

//...Login...
#page-wrapper #page.imaster-login {
    flex-direction: row;
}

.imaster-login {
    position: relative;
    background-image: $login-bgImg;
    background-repeat: no-repeat;
    background-size: 200% 100%, cover;
    background-position: left center, center;
    padding-bottom: $loginForm-paddingBottom;
    align-items: center;
    justify-content: center;

    @media (min-width: $md) {
        background-size: 65% 100%, cover;
    }
}

.imaster-login__container {
    max-width: $loginContainer-max-width;
    width: 100%;
    flex-wrap: wrap;
}

.imaster-loginForm__container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.imaster-loginForm {
    width: 100%;
    max-width: $loginForm-maxWidth;
    padding: $loginForm-padding;
    border-radius: $loginForm-radius;
    border: $loginForm-border;
    background: $loginForm-image;
    box-shadow: $loginForm-boxShadow;

    .card {
        border: $loginForm-card-border;
    }

    .rememberpass,
    .forgetpass {
        font-size: 17px;
    }
}

.imaster-loginForm__header {
    display: none;
    background-color: transparent;
    border-bottom: none;
    padding: 1.5rem 1.25rem 0;
}

.imaster-bannerLogin {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $loginBanner-padding;
    margin-right: 0;
}

.imaster-bannerLogin__img {
    max-width: $loginBanner-max-width;
    width: 100%;
    margin-bottom: $loginBanner-marginBottom;
}

.imaster-bannerLogin__phrase {
    display: block;
    width: 100%;
    max-width: 500px;
    position: relative;
    bottom: 0;
    right: 0;
    margin-left: auto;
    margin-right: 0;

    @media (min-width: $md) {
        position: absolute;
    }
}

.imaster-login__footer {
    position: $loginFooter-position;
    bottom: $loginFooter-bottom;
    left: $loginFooter-left;
    width: 100%;
    padding: $loginFooter-padding;
    text-align: $loginFooter-textAlign;
    background-color: $marca-color1;
    border-top: 5px solid $marca-color2;

    .imaster-login__link {
        color: $loginFooter-color;
        font-weight: $loginFooter-fontWeight;
        font-size: $loginFooter-fontSize;
    }
}

//...Navbar...
.imaster-navbar {
    min-height: max-content;
    background-color: $navbar-bgColor;
    background-image: $navbar-bgImg1, $navbar-bgImg2;
    background-size: $navbar-bgSize1, $navbar-bgSize2;
    background-position: $navbar-bgPosition1, $navbar-bgPosition2;
    background-repeat: $navbar-bgRepeat;
    border: 0;
    border-bottom: $navbar-border;
    border-image: $navbar-borderGradient;
    box-shadow: $navbar-boxShadow;

    .nav-link {
        color: $navbar-navlink-color;
    }

    .usertext {
        font-size: 1rem;
        color: $navbar-usertext-color;
    }

    .dropdown-toggle::after {
        color: $navbar-usertextCarret-color;
        border-top: $navbar-usertextCarret-size solid;
        border-right: $navbar-usertextCarret-size solid transparent;
        border-bottom: 0;
        border-left: $navbar-usertextCarret-size solid transparent;
    }
}

.imaster-brand {
    max-width: $navbar-logo;
}

.imaster-logo {
    max-width: 100%;
}

//...Header...
.breadcrumb {
    font-size: $breadcrumb-fontSize;
}

.imaster-header {
    .userpicture {
        max-width: $header-userPicture-tamano;
        height: auto;
    }
}

.imaster-header__singlebutton {
    background-color: $singlebutton-bgColor;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: .45rem;
    margin-bottom: 5px;
    text-align: right;

    .singlebutton {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

//...Botones fijos...
.imaster-fixedButtons {
    position: fixed;
    bottom: $fixedButtons-bottom;
    right: $fixedButtons-right;
    border-radius: $fixedButtons-radius;
    background-color: $fixedButtons-bgColor;
    padding-left: 5px;
    padding-right: 5px;
    z-index: 1021;

    .popover-region {
        margin-right: 0;

        .popover-region-toggle {
            width: auto;
            padding: 12px 13px 7px;

            &:before,
            &:after {
                right: 50%;
                transform: translateX(50%);
                bottom: 100%;
                border-bottom-color: $fixedButtons-bgColor;
                transition: bottom .3s;
            }
        }
    }

    .popover-region-toggle .icon {
        width: auto;
        height: auto;
        margin-right: 0;
        font-size: $fixedButtons-icon-tamano;
        border-radius: 50%;
        color: $fixedButtons-icon-bgColor;
        background-color: $fixedButtons-icon-color;
        box-shadow: 0px 0 0 6px $fixedButtons-icon-color;
        transition: color .3s, background-color .3s, box-shadow .3s;
    }

    .collapsed {
        .popover-region-toggle {

            &:before,
            &:after {
                bottom: 0;
            }

            .icon {
                color: $fixedButtons-icon-color;
                background-color: $fixedButtons-icon-bgColor;
                box-shadow: 0px 0 0 6px $fixedButtons-icon-bgColor;
            }
        }
    }

    .popover-region-toggle.imaster-fixedButtons__btn--active {
        &:before {
            content: "";
            display: inline-block;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: $fixedButtons-btn-caret;
            position: absolute;
            right: 50%;
            transform: translateX(50%);
            bottom: 100%;
            transition: bottom .3s;
        }

        .icon {
            color: $fixedButtons-icon-bgColor;
            background-color: $fixedButtons-icon-color;
            box-shadow: 0px 0 0 6px $fixedButtons-icon-color;
        }
    }

    //Contador de notificaciones
    .count-container {
        background-color: $fixedButtons-count-bgColor;
        right: 50%;
        transform: translateX(50%);
        top: -3px;
        padding: 3px;
    }
}

//...Notificaciones (ventana fija)...
.imaster-fixedButtons {
    .popover-region-container {
        top: auto;
        right: -100%;
        bottom: $notifications-bottom;
        border: $notifications-border;
        border-radius: $notifications-borderRadius;
        overflow: hidden;
    }
}

//...Mensajes (ventana fija)...
.imaster-messageDrawer {
    &.drawer {
        top: auto;
        bottom: $messages-bottom;
        right: 10px;
        height: $messages-height;
        border: $messages-border;
        border-radius: $messages-borderRadius;
        opacity: 1;
        overflow: hidden;
        transition: height .3s;

        &.hidden {
            opacity: 0;
            height: 0;
            width: 0;
            transition: height .3s, width 0s .3s, opacity 0s .3s;
        }
    }

    .card-header {
        overflow-x: hidden;
    }
}

//...Blocks (Tamaño de la columna de blocks)...
//When changing this please check the size of the calendar block
@include media-breakpoint-up(md) {
    @include page_layout($block-width--md);
}

@include media-breakpoint-up(lg) {
    @include page_layout($block-width--lg);
}

@include media-breakpoint-up(xl) {
    @include page_layout($block-width--xl);
}

//...Blocks (Columna de bloques que normalmente está al lado derecho) ...
.imaster-block {
    font-size: $block-fontSize;
    background-color: $block-bgColor;
    border: $block-border;
    margin-bottom: 1rem;

    .depth_1>.tree_item,
    .depth_1>.tree_item a {
        font-weight: $font-weight-title;
        color: $block-Depth1TreeItem-color;
    }

    .btn {
        font-size: 1em;
    }
}

.imaster-block__body {
    padding: 0;
}

.imaster-block__title {
    position: relative;
    font-size: $block-fontSizeTitle;
    text-align: center;
    padding: $block-paddingTitle;
    background-color: $block-bgColorTitle;
    color: $block-colorTitle;
    border-bottom: $block-borderTitle;
    border-radius: $border-radius $border-radius 0 0;
    margin-bottom: 0;

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 10px;
        width: calc(100% - 20px);
        height: 3px;
        border-radius: 3px;
        background-color: $marca-color2;
    }
}

.imaster-block__content {
    padding: $block-paddingContent;

    .no-overflow {
        overflow: initial;
    }
}

.imaster-block__footer {

    .form-group,
    .form-control {
        width: 100%;
    }

    .btn[type="submit"] {
        margin-left: auto;
        margin-right: auto;
        margin-top: .6rem;
    }
}

//...Region main...
#region-main.imaster-regionMain {
    padding: $regionMain-padding;
    border: $regionMain-border;

    @media (min-width: $md) {
        padding: $regionMain-padding--md;
    }
}

.blockcolumn,
.region-main {
    max-width: 100%;
}

//...Footer...
.imaster-footer {
    background-color: $footer-bgColor;
    padding: $footer-padding;
}

.imaster-footer__content {
    margin-bottom: 0;
    color: $footer-color;
    text-align: center;
}

.imaster-footer__marca {
    font-weight: $font-weight-title;
    font-size: 1.1rem;
}

//...Embed...
.imaster-embed {
    background-color: $embed-bgColor;
    border: $embed-border;
    border-radius: $embed-border-radius;

    iframe {
        border: $embed-border;
    }
}

//Los estilos de aquí en adelante se deben pasar a cada plugin

/*------------------------------------
   ?COURSE-BANNER-LANZADORES Estilos del banner y lanzadores del curso
------------------------------------*/

.imaster-course__regionMain .course-content .topics {
    border-bottom: 4px solid $marca-color2;
}

.imaster-courseBanner {
    background-color: transparent;
    border-radius: $border-radius;
    display: grid;
    grid-template-columns: 100%;
    padding: 0;
    margin-bottom: .2rem;
}

@media (min-width: 767px) {
    .imaster-courseBanner {
        grid-template-columns: 40% 60%;
    }

    .imaster-courseBanner--contenido {
        grid-template-columns: 40% 60%;
    }
}

.imaster-courseBanner__column {
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
}

.imaster-courseBanner__logo {
    max-width: 100%;
}

// .imaster-courseBanner__title {
//     color: $white;
// }
.imaster-courseBanner__description {
    font-size: 1.1rem;
    color: $white;
    margin-bottom: 0;
}

.imaster-listUA {
    background-color: transparent;
    padding: .5rem 1rem 1rem;
    border-radius: $border-radius;
    margin-top: .5rem;
    margin-bottom: 0;
}

.imaster-launcherUA {
    display: grid;
    grid-template-columns: 150px 1fr;
    min-height: 90px;
    background-color: $marca-color1;
    background-image: url([[pix:theme|courses/background-launcher]]);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-blend-mode: soft-light;
    border: 0;
    margin-bottom: 1rem;
    border-radius: 0.45rem;
    overflow: hidden;
    transform: scale(1);
    transition: transform .3s;
}

.imaster-launcherUA:last-child {
    margin-bottom: 0;
}

.imaster-launcherUA:hover {
    cursor: pointer;
    text-decoration: none;
    transform: scale(1.02);
}

.imaster-launcherUA:active {
    transform: scale(1);
}

.imaster-launcherUA__column {
    display: flex;
    align-items: center;
    padding: .7rem;
    position: relative;
}

.imaster-launcherUA__numberContainer {
    background-color: transparent;
    padding: .5rem .4rem .4rem;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

.imaster-launcherUA__number {
    color: $white;
    font-family: $font-family-title;
    font-size: 5rem;
    font-weight: $font-weight-title;
    line-height: 1;
    margin-bottom: -25px;
}

.imaster-launcherUA__title {
    color: $white;
    font-family: $font-family-base;
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 0;
}

.imaster-launcherUA.imaster-launcherUA--locked {
    opacity: .2;
}

.imaster-launcherUA.imaster-launcherUA--locked:hover {
    opacity: .2;
    cursor: not-allowed;
    transform: none;
}

.imaster-launcherUA--check {
    .imaster-launcherUA__title {
        color: $marca-color2;
    }

    .imaster-launcherUA__number {
        color: $marca-color2;
    }
}

.imaster-launcherUA.imaster-launcherUA--evaluation {
    background-color: $marca-color2;
}

.imaster-launcherUA--check.imaster-launcherUA--evaluation {
    .imaster-launcherUA__title {
        color: $marca-color1;
    }

    .imaster-launcherUA__number {
        color: $marca-color1;
    }
}


/*------------------------------------
   ?TEACHER
------------------------------------*/

.imaster-teacherBlock__userImage {
    max-width: 60px;
}

.imaster-teacherBlock__userName {
    font-size: 1em;
    line-height: 1.2;
}


/*------------------------------------
   ?BACKDROP
------------------------------------*/

@keyframes backdropPreload {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 0;
        height: 100vh;
    }

    100% {
        opacity: 1;
        height: 0;
    }
}

@keyframes loading {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.imaster-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 100%;
    width: 100%;
    height: 100vh;
    background-color: $gray-200;
    overflow: auto;
    z-index: 9999;
    transition: all 0.8s;
}

.imaster-backdrop.imaster-backdrop--in {
    left: 0;
    right: 0;
}

.imaster-backdrop__iframe {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

//...Precarga backdrop...
.imaster-backdrop__preload {
    height: 100vh;
    width: 100%;
    background-color: $marca-color1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 1;
}

.imaster-backdrop__preload--invisible {
    animation: backdropPreload 0.8s forwards;
}

.imaster-backdropPreload__logo {
    max-width: 230px;
    width: 100%;
    margin-bottom: 1rem;
}

.imaster-backdropPreload__spinner {
    width: 38px;
    animation: loading 0.8s infinite;
}


/*------------------------------------
   ?ESTILOS PERSONALIZADOS
------------------------------------*/

.imaster-title__container h1::after,
.page-header-headings h1::after {
    content: "";
    width: 42px;
    height: 0.9em;
    background-image: url('https://web.escuelaimastera.com/wp-content/uploads/2019/09/favicon.png');
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    top: 0.15em;
}


/*------------------------------------
   ?PRESENTACIÓN
------------------------------------*/

.presentation__title {
    font-size: 32px;
    color: #edca86;
}

.presentationMainSection {
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
    grid-template-areas: "area1T area2T""area1 area2";
}

@media (max-width: 767px) {
    .presentationMainSection {
        grid-template-columns: 1fr;
        grid-template-areas: "area1T""area1""area2T""area2";
    }
}

.presentationMainSection__area1T {
    grid-area: area1T;
}

.presentationMainSection__area1 {
    grid-area: area1;
}

.presentationMainSection__area2T {
    grid-area: area2T;
}

.presentationMainSection__area2 {
    grid-area: area2;
}

.presentationMainSection__text {
    display: inline-block;
    color: #25294f;
    margin-top: 10px;
}

.presentationMainSection__video {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 260px;
    border-radius: 10px;
    overflow: hidden;
}

.presentationMainSection__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}


/*-- Lanzador primario --*/

.primaryLauncher {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #25294f;
    border-radius: 10px;
    padding: 30px 15px;
    z-index: 1;
    overflow: hidden;
}

.primaryLauncher::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url([[pix:theme|courses/pattern]]);
    opacity: .25;
    z-index: -1;
}

.primaryLauncher__icon {
    width: 80px;
    max-width: 100%;
    margin-bottom: 15px;
}

.primaryLauncher__text {
    color: #fff;
    font-size: 1.1rem;
    text-align: center;
}

.primaryLauncher__button {
    margin-top: 15px;
}


/*=== LISTA TÉCNICA ===*/

.presentationTechnicalListSection {
    margin-bottom: 1.5rem;
}

.course-content li.section ul.presentationTechnicalListSection__list {
    column-count: 2;
    list-style: none;
    padding-left: 0;
}

@media (max-width: 767px) {
    .presentationTechnicalListSection__list {
        column-count: 1;
    }
}

.presentationTechnicalListSection__item {
    position: relative;
    padding-left: 1.9rem;
    margin-left: 5px;
    margin-bottom: .7em;
}

.presentationTechnicalListSection__item::before {
    content: "";
    position: absolute;
    top: .1em;
    left: 0;
    display: inline-block;
    width: 1.5rem;
    height: 1.1rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.presentationTechnicalListSection__item--po::before {
    background-image: url([[pix:theme|courses/users-solid]]);
}

.presentationTechnicalListSection__item--mo::before {
    background-image: url([[pix:theme|courses/laptop-solid]]);
}

.presentationTechnicalListSection__item--ce::before {
    background-image: url([[pix:theme|courses/certificate-solid]]);
}

.presentationTechnicalListSection__item--du::before {
    background-image: url([[pix:theme|courses/clock-regular]]);
}

.presentationTechnicalListSection__item--pl::before {
    background-image: url([[pix:theme|courses/calendar-alt-regular]]);
}

.presentationTechnicalListSection__subTitle {
    color: #25294f;
}


/*=== CONTENIDO ===*/

.presentationContent {
    margin-bottom: 1.5rem;
}

.presentationContent__title {
    font-size: 1.4rem;
}

.course-content li.section ul.presentationContent__list {
    list-style: none !important;
    padding-left: 0;
}

.presentationContent__list li {
    margin-bottom: .5rem;
    position: relative;
    padding-left: 1.2rem;
}

.presentationContent__list li::before {
    position: absolute;
    top: 0.45em;
    left: .3rem;
    content: "";
    display: inline-block;
    background-color: #edca86;
    width: 0.5rem;
    height: .5rem;
    border-radius: 50%;
}


/*=== TARJETAS ===*/

.presentationContent__gridCard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

@media (max-width: 767px) {
    .presentationContent__gridCard {
        grid-template-columns: 1fr;
    }
}

.presentationContent__card {
    border: 3px solid hsl(0, 0%, 94%);
    border-radius: 10px;
    padding: 10px;
}

.color--primary {
    color: #25294f;
}

.presentationContent__listOl {
    counter-reset: listNumber;
    list-style: none;
    padding-left: 0;
}

.presentationContent__listOl li {
    margin-bottom: .5rem;
}

.presentationContent__listOl li::before {
    counter-increment: listNumber;
    content: counter(listNumber) ".";
    display: inline-block;
    color: #edca86;
    font-weight: $font-weight-title;
    margin-right: 4px;
}


/*=== VARIACIÓN LANZADORES ===*/

.gridLauncher {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

@media (max-width: 960px) {
    .gridLauncher {
        grid-template-columns: 1fr;
    }
}

.primaryLauncher {
    transform: scale(1);
    transition: transform .3s;
}

.primaryLauncher:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.primaryLauncher:active {
    transform: scale(1);
}

.primaryLauncher--gray {
    background-color: #f2f2f2;
}

.primaryLauncher.primaryLauncher--gray::before {
    opacity: .05;
}

.primaryLauncher--gray .primaryLauncher__text {
    color: #22284f;
}

.certificateLauncherGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

@media (max-width: 991px) {
    .certificateLauncherGrid {
        grid-template-columns: 1fr;
    }
}

.certificateLauncher {
    display: flex;
    align-items: center;
    position: relative;
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 30px 20px;
    z-index: 1;
    overflow: hidden;
    min-height: 210px;
    transform: scale(1);
    transition: transform .3s;
}

.certificateLauncher:hover {
    cursor: pointer;
    transform: scale(1.04);
}

.certificateLauncher:active {
    transform: scale(1);
}

.certificateLauncher::before,
.certificateLauncher::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.certificateLauncher::before {
    background-image: url([[pix:theme|courses/pattern]]);
    opacity: .05;
    z-index: -1;
}

.certificateLauncher::after {
    background-image: url([[pix:theme|courses/certificate]]);
    background-repeat: no-repeat;
    background-size: 44% auto;
    background-position: right bottom;
    z-index: -1;
}

.certificateLauncher--masterHerramienta::after {
    background-image: url([[pix:theme|courses/master-herramienta]]);
}

.certificateLauncher__text {
    font-size: 1.2rem;
    font-weight: $font-weight-title;
    color: #22284f;
}


/*------------------------------------
   ?MY OVERVIEW
------------------------------------*/
.block_myoverview .dashboard-card-deck .dashboard-card,
.block_recentlyaccesseditems .dashboard-card-deck .dashboard-card {
    @media (max-width: 960px) {
        width: calc(50% - .5rem);
    }

    @media (max-width: 590px) {
        width: calc(100% - .5rem);
    }
}







/*------------------------------------
   ?AGILESSON AJUSTES PARA IMASTER
------------------------------------*/

#scorm_layout {
    margin-bottom: 0;
}

#page-mod-scorm-player #scormpage #scorm_object {
    height: 100%;
    width: 100%;
}

.path-course .region-main-content#region-main {
    overflow: initial;
}


/*------------------------------------
   ?BLOQUE NECESITAS AYUDA
------------------------------------*/

.imaster-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.imaster-help__content {
    max-width: calc(100% - 35%);
    width: 100%;
    text-align: center;
}

.imaster-help__contentTitle {
    font-size: .9rem !important;
    color: $marca-color1;
    margin-bottom: 1rem;
}

.imaster-help__contentButton {
    font-family: $font-family-title;
    background-color: $marca-color2;
    border: 1px solid $marca-color2;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: $font-weight-title;
    color: $marca-color1;
    padding: 7.5px 15px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    margin: 0 auto 20px;
    transition: all .3s;
}

.imaster-help__contentButton:hover {
    background-color: $btn-secondary-bgColor--hover;
    border: 1px solid $btn-secondary-bgColor--hover;
}

.imaster-help__icon {
    max-width: 35%;
    width: 100%;
    padding-left: 10px;
}

.imaster-help__img {
    margin: 0;
    max-width: 80px !important;
    width: 100%;
}


/*------------------------------------
   ?BLOQUE COMPAÑEROS
------------------------------------*/

.participante {
    list-style: none;
    display: inline-block;
    margin: 3px;
}

.participante img {
    border-radius: 50%;
    border: 3px solid $marca-color2;
}


/*------------------------------------
   ?BLOQUE EXPERTO
------------------------------------*/

.imaster-expert {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.imaster-expert__img {
    display: block;
    margin: 0 auto 15px;
    border-radius: 50%;
    border: 4px solid $marca-color2;
}

.imaster-expert__content {
    text-align: center;
}

.imaster-expert__contentName {
    font-size: 1.1rem;
}

.imaster-expert__contentExtract {
    font-size: 0.8rem;
}

.imaster-expert__social {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.imaster-expert__social a {
    width: 100%;
    display: flex;
    max-width: 26px;
    margin: 0 15px;
}

.imaster-expert__socialImg {
    width: 100%;
    transform: scale(1);
    transition: transform 0.3s;
}

.imaster-expert__socialImg:hover {
    transform: scale(1.1);
}


/*------------------------------------
    ?MODAL Escuela Didactica
 ------------------------------------*/

.escuelaDidacticaModal {
    z-index: 999;
    background-color: rgba(0, 0, 0, 0);
    padding: 15px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    visibility: hidden;
    opacity: 0;
}

.escuelaDidacticaModal--active {
    visibility: visible;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color .4s;
}

.escuelaDidacticaModal--active .escuelaDidacticaModal__content {
    opacity: 1;
    transform: translateY(0);
}

.escuelaDidacticaModal__background {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.escuelaDidacticaModal__container {
    max-width: 1000px;
    width: 100%;
    min-height: calc(100% - 80px);
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.escuelaDidacticaModal__content {
    width: 100%;
    min-height: 30px;
    height: 100%;
    max-height: calc(100vh - 80px);
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 5px hsla(0, 0%, 0%, .2);
    opacity: 0;
    transition: transform .6s, opacity .6s;
    transform: translateY(-100px);
    border: 7px solid $primary;
}

.escuelaDidacticaModal__header {
    display: flex;
    justify-content: flex-end;
    padding: 15px 15px 5px;
}

.escuelaDidacticaModal__close {
    position: absolute;
    right: -20px;
    top: -20px;
    border: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: $primary;
    border-radius: 50%;
    transition: background-color .3s;
    z-index: 9;
    transition: all .3s;
}

.escuelaDidacticaModal__close:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.escuelaDidacticaModal__closeIcon {
    width: 80%;
}

.escuelaDidacticaModal__closeIcon path {
    fill: #fff;
}

.escuelaDidacticaModal__body {
    padding: 5px 30px 15px;
}

.escuelaDidacticaModal__body .escuelaDidacticaModal__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*------------------------------------
   ?BACKDROP Escuela Didactica
------------------------------------*/

.escuelaDidacticaBackdrop {
    position: fixed;
    top: 1.5vh;
    left: calc(-100% - 20px);
    width: 98vw;
    height: 97vh;
    background-color: $white;
    // overflow: hidden;
    z-index: 9999;
    transition: left .6s;
    border: 5px solid $brand-color4;
    border-radius: 10px;
    box-shadow: 0 0 50px 10px rgba(0, 0, 0, .5);
}

.escuelaDidacticaBackdrop--in {
    left: 1vw;
}

.escuelaDidacticaBackdrop__close {
    height: 30px;
    width: 30px;
    position: absolute;
    top: -10px;
    right: -10px;
    border: none;
    border-radius: 50%;
    padding-bottom: 2px;
    background-color: $primary;
    box-shadow: 0 0 3px hsla(0, 0%, 0%, .2);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(1);
    z-index: 9;
    transition: transform .3s;
}

.escuelaDidacticaBackdrop__close:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.escuelaDidacticaBackdrop__closeIcon {
    width: 77%;
}

.escuelaDidacticaBackdrop__closeIcon path {
    fill: $white;
}

.escuelaDidacticaBackdrop__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.escuelaDidacticaBackdrop__preload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $white;
    overflow: hidden;
    z-index: 8;
}

@keyframes preloadInvisible {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 0;
        height: 100%;
    }

    100% {
        opacity: 1;
        height: 0;
    }
}

.escuelaDidacticaBackdrop__preload--invisible {
    animation: preloadInvisible .6s forwards;
}

@keyframes loading {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.escuelaDidacticaBackdrop__preloadIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    transform: translate(-50%, -50%);
    animation: loading 0.9s infinite;
}

.escuelaDidacticaBackdrop__preloadIcon path {
    fill: $grayBackgroud;
}