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

.pagelayout-mydashboard #region-main {
   padding: 0 15px;
}

#block-region-side-post {
   padding-top: 1.25rem;
}

#block-region-side-post .block {
   margin-bottom: 33px !important;
}

#block-region-side-post .block>.content,
#dockeditempanel .dockeditempanel_bd {
   background-color: #f1f1f1;
   padding: 10px;
   border-radius: 6px;
   margin-top: 6px;
   overflow: auto;
}

#block-region-side-post .block .title h2 {
   margin-top: 5px;
}






/*------------------------------------
   ?MENSAJES DRAWER
------------------------------------*/
[data-region="right-hand-drawer"].drawer {
   top: 90px;
   height: calc(100% - 90px);
   border-top: 2px solid var(--brand__color1);
   border-left: 2px solid var(--brand__color1);
   border-radius: 10px 0 0 0;
   overflow: auto;
}

[data-region="message-drawer"] [data-region="body-container"] .btn-link:hover {
   color: var(--brand__color3) !important;
}

.message-app .message.send {
   background-color: var(--color__white);
   box-shadow: inset 0 0 0 2px #dee2e6;
}







/*------------------------------------
   ?MENSAJES
------------------------------------*/
.message-app {
   border-color: var(--brand__color1) !important;
   border-radius: 10px;
   overflow: auto;
}

.message-app .row-fluid {
   margin-left: 0;
   margin-right: 0;
}








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

#intro.generalbox {
   background-color: transparent;
   margin-top: 30px;
   line-height: 1.4;
}

#page-mod-quiz-view .generalbox#feedback h3 {
   text-align: center;
}

.que .formulation {
   padding: .5rem;
   background-color: #f1f1f1 !important;
   border-radius: 6px;
}

.que .qtext {
   background-color: var(--color__white);
   padding: 0.5rem;
   border-radius: 5px;
}

.que .ablock {
   padding: 0 .8rem .8rem;
}

.formulation td select {
   width: 100%;
}

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



/*...Navegación por el cuestionario...*/

.path-mod-quiz #user-picture {
   margin: 5px 0 20px;
}

.path-mod-quiz #mod_quiz_navblock a.qnbutton {
   color: var(--brand__color1);
   font-size: 18px;
   font-weight: bold;
   height: 36px;
   max-width: 36px;
   width: 36px;
   min-width: 36px;
   border: 1px solid var(--brand__color1);
   border-radius: 50%;
   overflow: hidden;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0;
}

.path-mod-quiz #mod_quiz_navblock a.qnbutton:hover {
   text-decoration: none;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton.thispage .thispageholder {
   border-width: 3px;
   border-color: var(--brand__color2);
}

.path-mod-quiz #mod_quiz_navblock .qnbutton .thispageholder,
.accesshide {
   border-radius: 50%;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton .trafficlight {
   margin-top: 17px;
   z-index: -1;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
   background-color: #a2d071;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton.notanswered .trafficlight,
.path-mod-quiz #mod_quiz_navblock .qnbutton.incorrect .trafficlight {
   background-color: #ffa29a;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton.correct .trafficlight {
   background-image: none;
}

.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: hsl(211, 60%, 80%);
   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: hsl(211, 60%, 80%);
   margin-top: 0;
   top: auto;
   height: 100%;
   z-index: -1;
}

.path-mod-quiz #mod_quiz_navblock .qnbutton.flagged .thispageholder {
   background-image: none;
   box-shadow: inset 0 0 0 3px red;
}


/*...Info...*/
.que .info {
   background-color: #f1f1f1 !important;
   border-radius: 6px;
   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;
}








/*------------------------------------
   ?MÓVIL
------------------------------------*/

#showsidebaricon {
   background: var(--brand__color1);
   border-color: var(--brand__color1);
}

#showsidebaricon .fa {
   font-size: 28px;
   color: var(--color__white);
}







/*------------------------------------
   ?HEADER
------------------------------------*/

#header2,
#header2 .row {
   min-height: 72px;
   margin-left: auto;
   margin-right: auto;
}

.header-style2 [data-region="drawer"] {
   height: calc(100% - 72px);
   top: 72px;
}






/*------------------------------------
    ?MODAL
 ------------------------------------*/
.edModal {
   --modalContenedor__marginY: 40px;
   --modalContenedor__ancho: 800px;
   --modalContenido__colorFondo: hsl(0, 0%, 100%);
   --modalContenido__redondeado: 10px;
   --modalEncabezado__alineacion: flex-end;
   --modalEncabezado__padding: 15px 15px 5px;
   --modalCerrar__tamano: 30px;
   --modalCerrar__colorFondo: var(--brand__color2);
   --modalCerrar__colorFondo--hover: var(--brand__color4);
   --modalCerrar__colorIcono: hsl(0, 0%, 100%);
   --modalCuerpo__padding: 5px 20px 20px;
   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;
}

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

.edModal--activo .edModal__contenido {
   opacity: 1;
   transform: translateY(0);
}

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

.edModal__contenedor {
   max-width: var(--modalContenedor__ancho);
   width: 100%;
   min-height: calc(100% - (var(--modalContenedor__marginY) * 2));
   display: flex;
   align-items: center;
   margin: var(--modalContenedor__marginY) auto;
}

.edModal__contenido {
   width: 100%;
   min-height: var(--modalCerrar__tamano);
   background-color: var(--modalContenido__colorFondo);
   border-radius: var(--modalContenido__redondeado);
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
   opacity: 0;
   transition: transform .6s, opacity .6s;
   transform: translateY(-100px);
   border: 5px solid var(--brand__color1);
}

.edModal__encabezado {
   display: flex;
   justify-content: var(--modalEncabezado__alineacion);
   padding: var(--modalEncabezado__padding);
}

.edModal__cerrar {
   border: 0;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: var(--modalCerrar__tamano);
   height: var(--modalCerrar__tamano);
   background-color: var(--modalCerrar__colorFondo);
   border-radius: 50%;
   transition: background-color .3s;
   position: absolute;
   top: 0px;
   right: 0;
   transform: translate(40%, -40%);
}

.edModal__cerrar:hover {
   cursor: pointer;
   background-color: var(--modalCerrar__colorFondo--hover);
}

.edModal__cerrarIcono {
   width: 80%;
}

.edModal__cerrarIcono path {
   fill: var(--modalCerrar__colorIcono);
}

.edModal__cuerpo {
   padding: var(--modalCuerpo__padding);
}