/* LOGIN */

.row.g-0.flex-fill + footer {

    display: flex;

    justify-content: center;

    color: #66626c !important;

}

.row.g-0.flex-fill + footer .row {

    justify-content: center;

}

.row.g-0.flex-fill + footer .row .ms-lg-auto {

    margin-left: unset !important;

    margin-bottom: .5rem;

}

.auth-logo-container img {
	max-width: 150px;
}
.login-cover .auth-logo-container + h2 {
	display: none;
}

@media (min-width: 992px) {

    .row.g-0.flex-fill + footer {

        flex: 0 0 auto;

        width: 50%;

    }

}

@media (min-width: 1200px) {

    .row.g-0.flex-fill + footer {

        flex: 0 0 auto;

        width: 33.33333333%;

    }

}



table#crudTable tbody tr td a.btn.btn-sm.btn-link span {

    display: flex;

    align-items: center;

    gap: 3px;

}

table#crudTable tbody tr td a.btn.btn-sm.btn-link i {

    font-size: 1.1rem;

}

.btn.float-end .la-print {

    font-size: 1.2rem;

}

.btn-primary.search i {

    position: relative;

    top: 1px;

}

.dashboard-cards .card-body {

	padding: 0;

}

.row.dashboard-cards, .row.progress-cards {

	margin-left: 0;

	margin-right: 0;

}

.dashboard-cards .card-body table {

	margin-bottom: 0;

}

.dashboard-cards a.view-all {

	float: right;

}

.inline-info {

    display: flex;

    justify-content: flex-end;

    align-items: flex-end;

}

.scene-icon {

    font-size: 38px;

    position: relative;

    background: #7e59e9d6;

    color: #fff;

    padding: 0 6px;

    display: flex;

}

.scene-icon .scene-number {

    position: absolute;

    font-size: 16px;

    font-family: 'Source Sans Pro';

    width: 100%;

    text-align: center;

    left: 0;

    display: flex;

    height: 100%;

    justify-content: center;

    align-items: center;

    top: 0;

    margin-top: -1px;

    background: transparent;

    color: #fff !important;

    box-shadow: none;

}

.app-header {

    flex: 0 0 70px;

    height: 70px;

}

.app-header.bg-light .navbar-brand img {

    max-width: 130px;

}

.app-header.bg-light .navbar-brand {

    opacity: 1;
}

.swal-button--cancel {

    background: #7c69ef;

    outline: none;

}

.btn-group-sm>.btn, .btn-sm {

    font-size: .875rem !important;

}

.logo {

    max-width: 100px;

    margin: .5rem 0;

}

.text-left {

    text-align: left;

}



/* Dashboard */

.card-title {

    background: var(--tblr-bg-surface) !important;

    border-color: var(--tblr-light-border-subtle) !important;

    border-bottom: 1px solid;

    padding: 1rem 1.5rem;

    margin: 0;

    border-radius: 4px;

    display: flex;

    align-items: center;

}

.card-top-header > .card-body > .card-title {   

    border: 1px solid;

}

.card.card-top-header .card-body {

    padding: 0;

}

.card.card-top-header .card-body .card-title + div {

    padding: var(--tblr-card-spacer-y) var(--tblr-card-spacer-x);

}

.card-title i {

    margin-right: .5rem;

}

.card.card-top-header .card-footer {

    padding-left: var(--tblr-card-spacer-x) !important;

    padding-right: var(--tblr-card-spacer-x) !important;

}

.dashboard-cards .card-top-header .card-footer {

    margin-top: 1.5rem;

    border-color: var(--tblr-light-border-subtle) !important;

    border: 1px solid;

    border-radius: 4px;

}



/* Caso */

.instance-page {

    width: 100%;

    height: 100%;

    position: absolute;     

    background-size: cover;

    overflow: hidden;

    background-position: center bottom;

}

.instance-page main {

    width: 100%;

    height: 100%;

    padding: 0 !important;

}

.instance-page .navbar {

    background-color: none !important;

    padding: 1.5rem 2rem;

}

.instance-page .navbar-dark .navbar-toggler {

    border: none;

    color: #fff;

}

.instance-page .navscenes-right {

    position: absolute;

    right: 50px;

    background: #00000036;

    border-radius: 10px;

    padding: 20px 5px;

}

.instance-page .navscenes-right a {

    display: block;

    color: #ffffff59;

    font-size: 18px;

    font-weight: 700;

    padding: 10px;

}

.instance-page .navscenes-right a.active {

    color: #fff;

}

.instance-body {   

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    padding-bottom: 5%;

    height: calc(100% - 90px);

}

.instance-description {

    width: auto;

    max-width: 75%;

    margin: 0 auto;   

    overflow: auto;

    max-height: 90%;

}

.instance-description table .bg-dark, .instance-finished table .bg-dark {

    background-color: #181818 !important;

}

.tooltip {

    font-size: 14px;

}

.instance-description .instance-message, .instance-finished .instance-message {

    height: auto;

    z-index: 10;

}

.instance-description .instance-message i.las, .instance-finished .instance-message i.las {

    font-size: 40px;

}

span.title-top {

    letter-spacing: 2px;

    margin: 10px;

    display: block;

    color: #ffffff94;

    text-transform: uppercase;

    font-size: 0.8rem;

    white-space: nowrap;

}

.instance-description > i.la {

    display: block;

    margin: 10px 0;

    font-size: 24px;

}

.finish .description.collapsed {

    display: flex;

    justify-content: space-between;

    flex-direction: row;

}

.finish .description p {    

    overflow: hidden;

    white-space: unset;

    text-overflow: unset;

    display: inline;

}

.finish .description.collapsed p {    

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

.finish .description .more-link, .instance-item .more-link {

    display: inline-block;

}

.finish .description.collapsed .more-link {

    min-width: 90px;

}

.finish .description .more-link, .instance-item .more-link {

    min-width: 90px;

    margin-left: 5px;

}

.instance-item .more-link {  

    box-shadow: none;

    padding: 0;

    margin: 0;

    top: -8px;

    float: right;

    position: relative;

    text-align: right;

}

.instance-student {

    padding: 5px;

}

.instance-description .instance-dates span {

    margin: 0 15px;

}

.instance-description .instance-dates span i {

    margin: 0 5px;

}

.instance-attempts-timeline.history .instance-item.background {   

    min-width: 200px;

    position: relative;

}

.instance-attempts-timeline label {

    margin: 15px 0;

    letter-spacing: 3px;

    margin: 10px;

    display: block;

    color: #ffffff94;

    text-transform: uppercase;

    font-size: 0.8rem;

}

/* Scroll descripcion */

.instance-description::-webkit-scrollbar {

  width: 8px;

}

.instance-description::-webkit-scrollbar-thumb {

  background: #000;

  border-radius: 4px;

}

.instance-description::-webkit-scrollbar-thumb:active {

  background-color: #999999;

}

.instance-description::-webkit-scrollbar-thumb:hover {

  background: #b3b3b3;

  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);

}

 /* Estilos track de scroll */

.container::-webkit-scrollbar-track {

  background: #e1e1e1;

  border-radius: 4px;

}

.container::-webkit-scrollbar-track:hover, 

.container::-webkit-scrollbar-track:active {

  background: #d4d4d4;

}

.instance-students {

    min-height: 200px;

}

.instance-students .not-results, .overall.instances .not-results {

    margin: 15px;

}

.instance-students .student-list-filter ul {

    list-style: none;

    padding-left: 20px;

}

.instance-students .student-list-filter > label {

    padding: 5px; 

    width: 100%;

    text-transform: none;

}

.instance-item .student-list-filter a {

    color: #2196f3;

    background: transparent !important;

    box-shadow: none !important;

    margin: 0;

    padding: 0;

}

.instance-item .student-list-filter a:hover {

   

}

.instance-students .student-list-filter .filters {

    padding: 5px; 

}

.instance-students .student-list-filter .filters input[type="checkbox"] {

    position: relative;

    top: 1px;

    margin-right: 4px;

}

.instance-students .student-list-filter .filters span {

    text-decoration: underline;

}

.instance-students-table {

    display: table;

    width: 100%;

    z-index: 2;

    position: relative;

}

.instance-students-table .instance-item-header, .instance-students-table .instance-item-row {

    display: table-row;

}

.instance-students-table .instance-item-header div, .instance-students-table .instance-item-row div {

    display: table-cell;

    padding: 5px 10px;

    font-weight: normal;

}

.instances-bottom-actions {

    display: flex;

    justify-content: space-between;

    margin: 20px 0;

}

.btn-scroll-top {

    background: #7e59e9;

    color: #fff;

    border: none;

    outline: none !important;

    font-size: 20px;

    padding: .25rem .5rem;

    border-radius: 0.25rem;

}

.instance-students-table .instance-item-header div {

    font-weight: 500 !important;

}

.scene-bottombar {

    position: relative;

    top: calc(100vh - 100px);

    text-align: left;

    width: 100%;

    max-width: 80vw;

    z-index: 10;

}

.scene-help {

    width: 100%;

    margin: 0 auto;    

    background: #000;    

    text-align: left;

    -webkit-transition: all .5s ease-in-out;

    -moz-transition: all .5s ease-in-out;

    -ms-transition: all .5s ease-in-out;

    -o-transition: all .5s ease-in-out;

    transition: all .5s ease-in-out;

    height: auto;

    max-height: 400px;

    padding: 0;

    color: #fff;

    box-shadow: 0 0 10px 10px #0000001a;

    font-size: 0.9rem;

    display: flex;

    justify-content: space-between;

    flex-direction: row;

    border-radius: 33px;

    margin-bottom: 2rem;

}

.scene-help > .col2, .scene-help > .col1, .scene-help > .col3 {

    display: inline-block;

    padding: 20px 30px;

    vertical-align: top;

}

.scene-help > .col1 {

    min-width: 250px;

    display: flex;

    flex-direction: row;

}

.scene-help > .col2 {

    min-width: calc(70% - 260px);

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.scene-help > .col3 {

    padding-right: 10%;

    text-align: left;

}

label.upper-gray {

    text-transform: uppercase;

    font-size: 0.8rem;

    color: #ffffff8c;

    display: block;  

    margin-bottom: 0; 

}

.scene-help .col2 label + span {

    margin-bottom: 10px;

    display: block;  

}

.scene-help .scene-help-score, .scene-help .scene-help-iteractions {    

    align-items: center;

    display: flex;

    justify-content: center;

    border: 12px solid #ffffff30;

    border-radius: 9999px;

    height: 100px;

    width: 100px;   

    position: relative;

}

.scene-help .scene-help-score + .curve, .scene-help .scene-help-iteractions + .curve {

    left: 0;

    position: absolute;

    top: 0;

    height: 100%;

    width: 100%;   

    /* If percentages is greater than or equals to 50 */

    clip: rect(auto, auto, auto, auto);

}

.scene-help .scene-help-score + .curve.less50, .scene-help .scene-help-iteractions + .curve.less50 {

    /* If percentages is less than 50 */

    clip: rect(0px, 100px, 100px, 50px);

}

.scene-help .scene-help-score + .curve .first, .scene-help .scene-help-iteractions + .curve .first {

    height: 100%;

    position: absolute;

    width: 100%;

    border: 12px solid rgb(66 186 150);

    border-radius: 9999px;

    clip: rect(0px, 50px, 100px, 0px);

    /*transform: rotate(162deg); Number of percentages * 360 / 100 */

}

.scene-help .scene-help-score + .curve .second, .scene-help .scene-help-iteractions + .curve .second {

    height: 100%;

    position: absolute;

    width: 100%;

    border: 12px solid rgb(66 186 150);

    border-radius: 9999px;

    /* Position */

    clip: rect(0px, 50px, 100px, 0px);

    /* If percentages is less than 50 */

    /*transform: rotate(0deg);*/

    /* If percentages is greater than or equals to 50 */

    transform: rotate(180deg);

}

.scene-help .scene-help-score + .curve .second.less50, .scene-help .scene-help-iteractions + .curve .second.less50 {

    transform: rotate(0deg);

}

.scene-help .curve.warning .first, 

.scene-help .curve.warning .second {   

    border: 12px solid #ffc107;

}

.scene-help .curve.danger .first, 

.scene-help .curve.danger .second {   

    border: 12px solid #df4759;

}

.scene-help .col1 > label {

    position: absolute;

    font-size: 0.8rem;

    text-transform: uppercase;

    color: #ffffff8c;

    width: 70px;

    text-align: center;

}

/* Barra de casos izquierda */

.instance-progress-bar .bar-item {

    position: relative;

    margin-bottom: 20px;

}

.instance-progress-bar .bar-item-info {    

    align-items: center;

    display: flex;

    justify-content: center;

    border: 4px solid #ffffff30;

    border-radius: 9999px;

    height: 56px;

    width: 56px;   

    position: relative;

    box-shadow: 0 0 10px 10px #0000004a;

}

.instance-progress-bar a {

    text-decoration: none !important;

    color: #fff !important;

}

.instance-progress-bar a:hover .radial-progress {

    text-decoration: none;

    box-shadow: 0 0 10px 10px #000000d6;

}

.square.instance-progress-bar .radial-progress {

    display: flex;

    align-items: center;

    box-shadow: none;

}

.instance-progress-bar .bar-item.current .first, .instance-progress-bar .bar-item.current .second {

    border-color: #1976d259 !important;

}

.instance-progress-bar .bar-item-info + .curve {

    left: 0;

    position: absolute;

    top: 0;

    height: 100%;

    width: 100%;   

    /* If percentages is greater than or equals to 50 */

    clip: rect(auto, auto, auto, auto);

}

.instance-progress-bar .bar-item-info + .curve.less50 {

    /* If percentages is less than 50 */

    clip: rect(0px, 56px, 56px, 28px);

}

.instance-progress-bar .bar-item-info + .curve .first {

    height: 100%;

    position: absolute;

    width: 100%;

    border: 4px solid rgb(66 186 150);

    border-radius: 9999px;

    clip: rect(0px, 28px, 56px, 0px);

    /*transform: rotate(162deg); Number of percentages * 360 / 100 */

}

.instance-progress-bar .bar-item-info + .curve .second {

    height: 100%;

    position: absolute;

    width: 100%;

    border: 4px solid rgb(66 186 150);

    border-radius: 9999px;

    /* Position */

    clip: rect(0px, 28px, 56px, 0px);

    /* If percentages is less than 50 */

    /*transform: rotate(0deg);*/

    /* If percentages is greater than or equals to 50 */

    transform: rotate(180deg);

}

.instance-progress-bar .bar-item-info + .curve .second.less50 {

    transform: rotate(0deg);

}

.instance-progress-bar .bar-item .curve.warning .first, 

.instance-progress-bar .bar-item .curve.warning .second {   

    border: 4px solid #ffc107;

}

.instance-progress-bar .bar-item .curve.danger .first, 

.instance-progress-bar .bar-item .curve.danger .second {   

    border: 4px solid #df4759;

}

.instance-progress-bar .bar-item .scene-title {

    display: none;

    position: absolute;

    padding: 5px;

    color: #fff;

    font-size: 11px;

    background-color: #464646;

    border-radius: 5px;

    top: 30px;

    min-width: 200px;

    left: 56px;

    width: auto;

    text-align: left;

}

.instance-progress-bar .bar-item:hover .scene-title {

    display: block;

}

.instance-progress-bar .bar-item .scene-title span {

    color: #ffc107;

}

.instance-progress-bar .bar-item .scene-title span.scenename {

    text-decoration: underline;

    color: #fff;

}

.square .progress {

    height: auto !important;

}

.scene-help .scene-instance-dates {

    font-size: .8em;

}

.scene-help .scene-instance-dates span {

    margin-right: 20px;

}

.scene-help .scene-instance-dates span i {

    margin: 0 5px;

}

.scene-help .scene-help-score i, .scene-help .scene-help-iteractions i {  

    margin-right: 5px;   

}

.scene-help .scene-help-score label, .scene-help .scene-help-iteractions label {  

    text-transform: uppercase;

    font-size: 0.7em;

    display: block;

    margin-bottom: 0;

    position: relative;

}    

.scene-help .scene-help-score span, .scene-help .scene-help-iteractions span {  

    font-size: 25px;

    line-height: 25px;

    position: relative;

}

.scene-bottombar.collapsed  {

    justify-content: flex-start !important;

}

.scene-bottombar.collapsed .scene-help {

    width: auto !important;

    margin: 0;

}

.scene-bottombar.collapsed .scene-help .collapse-hidden {

    display: none !important;

}

.scene-bottombar.collapsed .toogle-footer {

    background-color: #000 !important;

}

.scene-help .breadcrumb {

    margin: 0;

    margin-bottom: 10px;

    font-size: 1em;

}

.toogle-footer {

    width: 42px;

    height: 42px;

}

.scene-help .scene-description, .scene-help .scene-online-help {

    width: 100%;

}

.scene-status {

    margin-bottom: 10px;

}

.scene-description {

    display: inline-block;    

    width: calc(100% - 100px);

    margin-bottom: 10px;

}

.scene-help-toggle {

    width: 64px;

    height: 64px;

    position: absolute;

    bottom: 25px;

    left: 25px;

    z-index: 9;

    background: #ffffffeb;

    border-radius: 50%;

    text-align: center;

    display: flex;

    justify-content: center;

    flex-direction: column;

}

.scene-help-toggle i {

    font-size: 45px;

}

.scene-header {

    position: absolute;

    top: 20px;

    right: 30px;

    z-index: 10;

}

.scene-header button i, .scene-header a i {

    font-size: 25px;    

}

.scene-action {

    display: inline-block;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background-color: #f93154;

    box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);

    cursor: pointer;

    border: 0;     

    transition: all .5s;

    margin: 0 25px;   

    text-align: center; 

    position: relative;

}

#statusWidget .scene-action {

    display: flex;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background-color: #f93154;

    box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);

    cursor: pointer;

    border: 0;     

    transition: all .5s;

    text-align: center; 

    position: relative;

    margin: 0 5px 0 0;   

    align-items: center;

    justify-content: center;

    text-decoration: none !important;

}

#statusWidget .scene-action:last-child {

    margin-right: 0;

}

.scene-action.play:hover, .scene-action.initplay:hover, .scene-action.micro:hover {

    background: #ec0029 !important;

}

.scene-footer .scene-action.play {   

    position: relative; 

    top: unset;

    left: unset;

}

.toogle-footer {

    border-radius: 50%;

    text-decoration: none !important;

}

.toogle-footer:hover {

    background-color: #5f49e5 !important;

}

.scene-action.audio {

     background-color: #f0ad4e;

}

.scene-action.disabled, .scene-action[disabled='disabled']  {

     background-color: #6c757d !important;

     cursor: not-allowed !important;

}

.scene-number {

    display: inline-block;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background-color: #f93154;

    box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);

    cursor: pointer;

    border: 0;   

    transition: all .5s;

    line-height: 20px;

    text-align: center;

    background-color: #ffffff33;

    color: #ffffff52 !important;

    vertical-align: top;

}

.scene-number.active {

    background-color: #f44336d4;

    color: #fff !important;

}

.scene-number.finished {

    background-color: #42ba96; 

    color: #222 !important;

}

.scene-number.finished.normal {

    background-color: #ffc107; 

    color: #222 !important;

}

.instance-progress > div {

    display: inline-block;

    vertical-align: top;

}

.instance-progress label i {

    margin-right: 6px;

}

.instance-progress .instance-scenes-progress, .instance-progress .instance-score-progress {

    display: inline-block;

    margin: 0 15px;

    width: calc(49% - 30px);   

}

.instance-score-progress .bar {

    min-width: calc(100% - 230px);

}



.scene-action:hover span, .scene-number:hover span {

    display: block;

}

.scene-action span {

    display: none;

    position: absolute;

    padding: 5px;

    color: #fff;

    font-size:.9rem;

    background-color: #464646;

    border-radius: 5px;

    left: 82px;

    width: 150px;

    top: 0;

    z-index: 7;

}

.scene-action.initplay span, .scene-action.micro span {

    left: 100px;

    top: unset;

}

.scene-number span {

    display: none;

    position: absolute;

    padding: 5px;

    color: #fff;

    font-size: 11px;

    background-color: #464646;

    border-radius: 5px;

    top: 30px;

    min-width: 200px;

    width: auto;

}

.scene-action.initplay, .scene-action.micro {

    position: relative; 

    width: 100px;

    height: 100px;

    margin: 0 auto;

}

.scene-action i {

    font-size: 42px;

    line-height: 82px;

    color: #fff;

}

.scene-action.initplay i, .scene-action.micro i {

    font-size: 60px;

    line-height: 100px

}

.scene-header .speed-dial__button--root {

    color: #fff;

}

.scene-header button {

    outline: none;    

}

.instance-header {

    height: 90px;

    position: relative;

    text-align: center;

}

.instance-progress {

    width: 60%;

    min-width: 500px;

    position: relative;    

    top: 0;

    z-index: 9;

    background: #000000bd;

    padding: 8px 60px;

    color: #fff;

    font-size: 0.8em;

    text-transform: uppercase;    

    padding-right: 40px;

    height: 35px;

    display: inline-block;

}

.instance-progress .progress {

    background: #e9ecef;

    height: 18px;   

}

.instance-progress > div {

    display: inline-block;

}

.instance-progress label {

    margin: 0;

    margin-right: 10px;

    min-width: 175px;

}

.instance-progress .label + div {

    display: inline-block;

    position: relative;

    top: -2px;

}

.instance-progress div.label {

    min-width: 165px;

    display: inline-block;

    line-height: 20px;

}

.instance-progress div.label i {

    font-size: 30px;

    position: relative;

    top: -5px;

    color: #42ba96;

    float: left;

}

.instance-progress > div.bar {

    width: calc(100% - 168px);

    top: -1px;

    position: relative;

}

.instance-progress:after {

    content: "";

    width: 30px;

    height: 35px;

    position: relative;

    position: absolute;

    right: -35px;

    top: 0;

    border-top: 35px solid #000000bd;

    border-right: 35px solid transparent;

}

.instance-progress:before {

    content: "";

    width: 30px;

    height: 35px;

    position: relative;

    position: absolute;

    left: -35px;

    top: 0;

    border-top: 35px solid #000000bd;

    border-left: 35px solid transparent;

}

.progress-bar {   

    transition: width 2.0s ease;

}



/* Video background */

#player {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

}

.video-background {

    background: #000;

    position: fixed;

    top: 0; right: 0; bottom: 0; left: 0;

    z-index: -99;

}

.video-foreground,

.video-background iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}

@media (min-aspect-ratio: 16/9) {

    .video-foreground { height: 300%; top: -100%; }

}

@media (max-aspect-ratio: 16/9) {

    .video-foreground { width: 300%; left: -100%; }

}

@media all and (max-width: 600px) {

    .vid-info { width: 50%; padding: .5rem; }

    .vid-info h1 { margin-bottom: .2rem; }

}

@media all and (max-width: 500px) {

    .vid-info .acronym { display: none; }

}



.video-poster, .front-actions {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%; 

    background-repeat: no-repeat;

    background-size: cover !important;

    background-position: center;

    display: flex;

    justify-content: center;

    flex-direction: column;

    z-index: 1;

}

.video-poster {

    z-index: 2;

}

.video-poster.played .scene-action {

    display: none;

}

#player iframe { 

  pointer-events: none;

}

.default-label-gray {

    margin-bottom: 10px;

    text-transform: uppercase;    

    color: #1b2a4e8c;

    display: block; 

}

.stepsbar > label, label.top-center-label {

    margin-bottom: 10px;

    text-transform: uppercase;    

    color: #1b2a4e8c;

    display: block; 

    font-size: .8em;

}

label.top-center-label.white {

    color: #ffffff94;

}

.stepsbar .step {

    height: auto;

    position: relative;

    display: inline-block;

    min-width: 200px;

    text-align: center;

    padding: 5px 20px;

}

.stepsbar .step span {

    background: #007bff;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    color: #fff;

    display: inline-block;

    text-align: center;

    font-size: 22px;

    line-height: 32px;

}

.stepsbar .step.finish span {

    background: #42ba96;

}

.stepsbar .step label {   

    display: block;

    margin-top: 5px;

    margin-bottom: 0;

}

.stepsbar .step p {   

    display: block;

    margin: 0 0 0 35px;

    font-size: .8em;

}

.step.step.current:after {

    content: "";

    position: absolute;

    height: 100%;

    background: #ffffff61;

    width: 100%;

    left: 0;

    top: 0;

}

.modal-dialog .step.step.current:after {

    background: #0069d924;

}

.modal-dialog .step.step.current:after {   

    height: 26px;

    border-radius: 0;

}

.modal-dialog .stepsbar > label {

    margin: 30px 0 15px 0;

    background: #f5f5f5;

    padding: 4px;

}

.modal-dialog .stepsbar .step {

    height: 70px;

}

.modal-dialog .stepsbar .step label {

    vertical-align: middle;

}

.modal-dialog .stepsbar {

    background: #fff;

    margin-left: -1rem;

    margin-right: -1rem;

    margin-bottom: -1rem;

}   

.scene-footer {

    position: absolute;

    background: #000000;

    width: 100%;

    height: 175px;

    bottom: 0;

    z-index: 8;

    -webkit-transition: all .5s ease-in-out;

    -moz-transition: all .5s ease-in-out;

    -ms-transition: all .5s ease-in-out;

    -o-transition: all .5s ease-in-out;

    transition: all .5s ease-in-out;

    display: none;

    box-shadow: 1px 0px 14px 14px #000000ed;

    padding-top: 35px;

    text-align: center;

    display: none !important;

}

.scene-audio-front, .scene-finish-front, .instance-front {

    position: absolute;

    background: #00000066;

    height: 100%;

    width: 100%;

    top: 0;

    display: none;

    flex-direction: column;

    justify-content: center;

    padding-bottom: 10%;

    color: #fff;

    z-index: 8;   

}

.instance-front {

    display: flex !important;

    flex-direction: column;

    justify-content: center;

    padding-bottom: 0;

}

.scene-finish-front.hidden {

    display: none !important;

}



/* Condicionales */ 

.scene-root.has-attempts .on-hasattempts {

    display: inline-block;

}

.scene-root.not-attempts .on-not-hasattempts {

    display: inline-block;

}

.display-on {

    display: none;

}

.scene-root.has-attempts .on-hasattempts {

    display: inline-block;

}

.scene-root.lastscene .btn-repeat {

    display: none;

}

.scene-root.lastscene .on-not-lastscene {

    display: none;

}

.scene-root.not-lastscene .on-not-lastscene {

    display: flex;

}

.scene-root.video-played .on-video-played {

    display: block;

}

.scene-root.scene-completed .on-scene-completed {

    display: block;

}

.scene-root.scene-notcompleted .on-scene-notcompleted {

    display: block;

}



.front-message {

    position: absolute;

    width: 100%;

    text-align: center;

    background: #de2c4bd1;

    left: 0;

    top: 0;

    padding: 3rem;

    height: 100%;

    z-index: 9;

    flex-direction: column;

    justify-content: center;

    color: #fff;

    display: none;    

}

.front-message h1 {

    font-weight: 700;

}

.front-message p, .front-message label {

    font-size: 1.1rem;

}

.front-message.init {

    background: #467fd0d1;

}

.front-message i.separator {

    font-size: 24px;

    margin-top: 10px;

    margin-bottom: 30px;

}

.front-message.init i.front-icon {

    background: #467fd0;

}

.front-message .front-message-dialog-centered {

    margin: 0 auto;

}

.front-message i.front-icon {

    font-size: 60px;

    background: #bd2740;

    font-size: 60px;

    color: #fff;

    display: none;

    font-size: 60px;

    border-radius: 50%;

    margin: 0 auto;

    margin-bottom: 30px;

    padding: 21px;

    box-shadow: 0 0 8px 3px #00000033;

    transition: 1.5s all ease;

    position: relative;

    width: 102px;

    overflow: hidden;

}

.front-message .front-message-footer {

    margin-top: 50px;

}

.front-message .front-message-box {

    background: #ffffff14;

    padding: 30px;

    border-radius: 10px; 

}

.front-message.init .on-init-front, .front-message.error .on-error-front, .front-message.success .on-success-front, 

.front-message.repeat .on-repeat-front, .front-message.video-finish .on-video-finish-front {

    display: block;

}

.front-message.success, .front-message.video-finish {

    background: #4caf50d1;

} 

.front-message.success i.front-icon, .front-message.video-finish i.front-icon {

    background: #4caf50;

}

.scene-video-toggle-top .scene-action, .scene-audio-actions .scene-action {

    width: 56px;

    height: 56px;

    margin: 20px 0;

    margin-top: 0;

    display: block;

}

.scene-video-toggle-top .scene-action:hover, .scene-audio-actions .scene-action:hover {

    background-color: #7e59e9 !important;

}

.scene-audio-actions .scene-action {

    margin-top: 0;

}

.scene-video-toggle-top .scene-action.disabled, .scene-audio-actions .scene-action.disabled {

    background-color: #5a5959 !important;

    cursor: initial;

}

.scene-video-toggle-top .scene-action i, .scene-audio-actions .scene-action i {

    line-height: 56px;

}

.record-actions {

    margin-bottom: 25px;

}

.record-actions #confirm {

    display: none;

}

.scene-audio-front div.micro > i {

    font-size: 60px;

    border-radius: 50%;

    margin-bottom: 30px;

    padding: 21px;

    box-shadow: 0 0 10px 10px #00000082;

    transition: 1.5s all ease;

    position: relative;

    width: 102px; 

}

.scene-audio-front .la-microphone {

    background: #f93154;

}

.scene-audio-front.disabled .la-microphone {

    background: #6c757d;

}

.scene-audio-front.actived .la-microphone.recording {

    background: #ec0029;

}

.scene-audio-front .la-thumbs-up, .scene-audio-front .la-save {

    background: #4caf50 !important;

}

.scene-audio-front .la-cloud-upload-alt {

    background: #ff9800 !important;

}

#microphoneicon::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    background: #0000001c;

    width: 100%;

    height: 100%;

    z-index: 0;

    display: block;

    transition: all 8s;

}

#microphoneicon.loading.la-cloud-upload-alt::after {

    top: -120px;

}

#confirmActions {

    padding: 50px 0;

    font-size: 1.1rem;

    display: none;

}

#confirmActions i {

    color: #4caf50;

    font-size: 60px;

}   

.pulse-ring {

  content: '';

  width: 114px;

  height: 114px;

  border: 15px solid #ec0029;

  border-radius: 50%;

  position: absolute;

  top: -6px;

  left: -6px;

  animation: pulsate infinite 2s;

  display: none;

}

.pulse-ring-sidebar {

  content: '';

  width: 110px;

  height: 110px;

  border: 15px solid #ec0029;

  border-radius: 50%;

  position: absolute;

  top: -5px;
  left: -5px;

  animation: pulsate infinite 2s;

  display: none;

}

.recording .pulse-ring, .recording .pulse-ring-sidebar {

    display: block;

}

@-webkit-keyframes pulsate {

  0% {

    -webkit-transform: scale(1, 1);

    opacity: 1;

  }

  100% {

    -webkit-transform: scale(1.2, 1.2);

    opacity: 0;

  }

}

.modal-dialog.error .modal-error-box {

    color: #f44336;

    margin: 10px;

}

.modal-dialog.error .modal-header, .modal-dialog.error .modal-footer {

    background: #f4433612;

}

.modal-dialog.success .modal-header, .modal-dialog.success .modal-footer {

    background: #4caf501f;

}

.modal-dialog .modal-body > i {

    font-size: 45px;

}

.video-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 6;

    display: none;

}

#feedbackScore, #sceneRepeat {

    width: 50%;

    margin: 30px auto;

}

#feedbackScore .progress, #sceneRepeat .progress {

    font-size: 1rem;

    height: 2rem;

    background-color: #f0f1f3;

}

/*.bs-tooltip-auto[x-placement^=top] .arrow:before, .bs-tooltip-top .arrow:before {

    border-top-color: #ffffff;

}

.bs-tooltip-auto[x-placement^=left] .arrow:before, .bs-tooltip-left .arrow:before {

    border-left-color: #ffffff;

}

.bs-tooltip-auto[x-placement^=right] .arrow:before, .bs-tooltip-right .arrow:before {

    border-right-color: #ffffff;

}

.bs-tooltip-auto[x-placement^=bottom] .arrow:before, .bs-tooltip-bottom .arrow:before {

    border-bottom-color: #ffffff;

}*/

.tooltip.show {

    opacity: 1;

    left: -4px;

}

.tooltip-inner {    

    /*color: #000;

    background-color: #ffffff;*/

    border-radius: 10px;

    position: relative;

    padding: 15px;

}

.tooltip-inner i.las, .tooltip-inner i.lar {

    display: none;

    font-size: 30px;

    color: #4caf50;    

}

.tooltip-inner i.la-exclamation-triangle {

    color: #ec0029;

}

.tooltip .tooltip-inner a {

    cursor: pointer;

    position: absolute;

    top: 0px;

    right: 8px;

    font-size: 1.2rem;

    display: none;

}

.tooltip.bs-tooltip-left .tooltip-inner a {

    left: 8px;

    right: unset;

}

#sceneHelp div i.las {

    display: block;

    margin-bottom: 20px;

    font-size: 42px;

    display: none;

}

#feedbackText {

    font-weight: 700;

}

.scene-finish-front .la-thumbs-up {

    background: #42ba96;

    font-size: 40px;

    color: #fff;   

    display: inline-block;

    border-radius: 50%;

    margin: 0 auto;

    margin-bottom: 30px;    

    box-shadow: 0 0 10px 10px #00000082;

    transition: 1.5s all ease;

    position: relative;

    width: 65px;   

    height: 65px;

    line-height: 65px; 

    overflow: hidden;

}

.scene-finish-front.normal .la-thumbs-up {

    background: #ffc107;

}

.scene-finish-front .bar {

    margin: 0 auto;

}

.scene-finish-front .bar .progress {

    height: 2rem;   

    width: 100%;

}

.text-uppercase {

    text-transform: uppercase;

}

.table-bordered.border-white {

    border-color: #373737 !important;

}

.instance-status .time {

    background-color: #181818;

}

.scene-finish-front .bar .bar-2col {

    width: 310px;

    display: inline-block;

    margin: 0 10px;

}

.instance-description .bar .bar-2col {

    width: 45%;

    display: inline-block;

    margin: 0 10px;

    min-width: 410px;

}

#playerTimeBarProgress, #playerTimeBarProgress + .viewed {

    position: absolute;

    top: 0;

    left: 0;

    height: 5px;

    z-index: 9;

    width: 0;

    background: #1976d2;

}

.instance-progress-bar .bar-item {

    position: relative;

    margin-bottom: 20px;

    color: #fff;

}    

.instance-progress-bar {

    position: absolute;

    z-index: 9;

    width: 100%;

    height: 100vh;

    min-height: 100%;

    margin: 0 auto;

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: flex-start;  

    background: #000;

    overflow: scroll;

    padding: 4rem 0;

}

.instance-progress-bar .scenes {

    width: 85%;

    height: 100%;   

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-start;

}

.fs-8 {

    font-size: .75rem !important;

}

.instance-progress-bar .scenes > .square-col {

    background: #212121;

    border: 2px;

    border-style: solid;

    border-radius: 8px;

    width: 100%;

}

.square-help {

    border-color: #373737 !important;

}

.ellipsis {

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

}

.instance-progress-bar .scenes .progress {

    background-color: #3d3d3d !important;

}

#closeScenes i {

    font-size: 60px;

}

.progress-toggle {

    z-index: 10;

}

.progress-toggle i {

    font-size: 25px;

}

.progress-toggle a {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background-color: #000;

    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);

    text-decoration: none;

}

.square-col.active:hover {

    border-color: #206bc4 !important;

}

.square-col.current {

    border-color: #7c69ef !important;

}



/* Columna de intentos de un caso */

#userAttempts .progress {

    height: 20px;

    width: 100%;

    min-width: 115px;

}

#userAttempts .attempts-table-body .attempt-row {

    display: flex;

    justify-content: space-between;

    flex-direction: row;

}

#userAttempts .attempts-table-body {

    margin-top: 10px;

}

#userAttempts .row-score {

    min-width: 115px;

}

#userAttempts .row-num {

    min-width: 50px;

}

#userAttempts .row-date {

    min-width: 135px;

}

#userAttempts .row-help a {

    font-size: 1.5rem;

    line-height: 20px;

    position: relative;

    top: -2px;

    color: #fff;

}  

#userAttempts .progress-bar {

    color: #222;

}

#userAttempts .attempts-table-body .attempt-row {

    width: 100%;

    margin-bottom: 2px;

    font-size: 0.8rem;

}

#userAttempts .attempts-table-body .attempt-row > div {

    display: inline-block;

    vertical-align: middle;

    padding-right: 20px;

}

#userAttempts .attempts-table-body .attempt-row > div:last-child {

   text-align: right;

}

#userAttempts .row-date i {    

    margin-right: 5px;

}

#continueSection {

    margin: 50px;

}

#continueSection > h1, .scene-finish-front h1 {

    font-weight: 700;

}

.scene-finish-front > p  {

    font-size: 1.1rem;

}

#continueSection > h1 + div  {

    margin: 35px 0;

    font-size: 1.1rem;

}

#continueSection > h1 + div span, .scene-finish-front p span {

    color: #1976d2;

}

.instance-footer .scene-help .scene-guide {

    font-size: 0.9rem;

}

.instance-footer .scene-help .scene-guide .step {

    margin-top: 10px;

}

.instance-footer .scene-help .scene-guide .guide-steps {

    display: flex;

    flex-direction: row;

    justify-content: center;

}



/* Loading spinner */

#ajaxLoading {

    display: none;

}

.spinner {

  width: 40px;

  height: 40px;

  position: relative;

  margin: 20px auto;

}



.double-bounce1, .double-bounce2 {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background-color: #fff;

  opacity: 0.6;

  position: absolute;

  top: 0;

  left: 0;  

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;

  animation: sk-bounce 2.0s infinite ease-in-out;

}



.double-bounce2 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}



@-webkit-keyframes sk-bounce {

  0%, 100% { -webkit-transform: scale(0.0) }

  50% { -webkit-transform: scale(1.0) }

}



@keyframes sk-bounce {

  0%, 100% { 

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 50% { 

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}



#helpBubble {

    position: relative; 

    width: 100%;

    text-align: center;

    z-index: 9;    

    color: #1b2a4e;

    margin-bottom: 20px;

    cursor: pointer;

}

#helpBubble img {

    max-width: 56px;

    position: relative;

}

.bubble

{

   position: absolute;

   width: auto;

   min-width: 250px;

   max-width: 450px;

   height: auto;

   padding: 10px;

   background: #ffffff;

   -webkit-border-radius: 10px;

   -moz-border-radius: 10px;

   border-radius: 10px;

   border: #000 solid 1px;

   font-size: 0.9rem;

   margin: 0 auto;

   display: block;

   right: 65px;

}



.bubble:after

{

    content: '';

    position: absolute;

    border-style: solid;

    border-width: 8px 0 8px 8px;

    border-color: transparent #ffffff;

    display: block;

    width: 0;

    z-index: 1;

    right: -8px;

    top: 12px;

}



.bubble:before

{

    content: '';

    position: absolute;

    border-style: solid;

    border-width: 8px 0 8px 8px;

    border-color: transparent #D6D2D2;

    display: block;

    width: 0;

    z-index: 0;

    right: -9px;

    top: 12px;

}



/* Dashboard */

[data-bs-theme=dark] .card.transparent {

    background: #221e26f5;

}

[data-bs-theme=dark] .card.transparent .card-body, [data-bs-theme=dark] .card.transparent .card-title, [data-bs-theme=dark] .card.transparent .card-footer {

    background: transparent !important;

    border-color: #373737 !important;

}

[data-bs-theme=dark] .instance-status .progress {

    background-color: #181818 !important;

}

.dashboard-instances {

    display: flex;

    overflow: hidden;

    overflow-x: auto;

}

/* Scroll descripcion */

.dashboard-instances::-webkit-scrollbar {

  width: 8px;

}

.dashboard-instances::-webkit-scrollbar-thumb {

  background: #e7ecf3;

  border-radius: 4px;

}

.dashboard-instances::-webkit-scrollbar-thumb:active {

  background-color: #999999;

}

.dashboard-instances::-webkit-scrollbar-thumb:hover {

  background: #b3b3b3;

}

.dashboard-instances::-webkit-scrollbar-track {

  background: #e1e1e1;

  border-radius: 4px;

}

.dashboard-instances::-webkit-scrollbar-track:hover, 

.dashboard-instances::-webkit-scrollbar-track:active {

  background: #d4d4d4;

}

.instance-description .instance-status .progress, .instance-finished .instance-status .progress {

    height: 25px;

    font-size: 1rem;

}

.instance-description .instance-status .progress .progress-bar, .instance-finished .instance-status .progress .progress-bar {

    color: #000;

}

.instance-description .instance-status .progress .progress-bar span, .instance-finished .instance-status .progress .progress-bar span {

    padding: 0 6px;

}

.dashboard-instances.more3 {    

    overflow-x: scroll;

}

.dashboard-instances.more3 .instance-item {

    width: calc((100% - 110px) / 4);

    min-width: calc((100% - 110px) / 4);

}

.instance-item.empty {

    background: #e7ecf3;

}

.instance-item:last-child {

    margin-right: 0;

}

.instance-attempts-timeline .instance-item:before {

    width: 100%;

    height: 100%;

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    background: #000000c7;

    z-index: 1;

}

.instance-item.background {

    background-size: cover;

    background-position: center;

    min-height: 110px;    

    min-width: 25%;

}

.instance-item .item-body {

    padding: 10px;

    font-size: .9rem;

    padding-bottom: 0;

    padding-bottom: 0;

}

.instance-body .overall-return {

    position: absolute;

    right: 30px;

}

.instance-body .overall-return a {

    color: #fff;

    font-size: 30px;

}

.timeline-row .instance-item .item-body {   

    /*align-items: flex-start;*/

}

.instance-item .item-body .item-help, .instance-footer .col3 .item-help {

    background: #ffeb3b;

    padding: 0 5px;

    margin-top: 6px;

    font-weight: bold;

    line-height: 25px;

}

.instance-item .item-body .item-help img {

    margin-right: 6px;

    border: 1px solid #d0bb00;

    border-radius: 50%;

    max-width: 20px;

}

.instance-item .item-body .item-help label {

    text-decoration: underline;

}

.instance-item .item-body .item-other-data {

    margin-top: 8px;

    align-self: flex-end;

}

.instance-item .item-body .item-other-data span {

    margin: 0;

}

.instance-item .item-body .item-other-data a,

.instance-item .item-body .item-other-data span span {

    background: none;

    box-shadow: none;

    text-decoration: none;

    color: inherit;

    margin: 0;

    padding: 0;

    font-size: 18px;

    border-radius: 4px;

    text-align: center;

    min-width: 32px;

    display: inline-block;

    background: #1976d22b;

    color: #1976d2;

    padding: 0 8px;

}

.instance-item .item-body .item-other-data a:hover {

    background: #1976d24b;

}

.instance-item .item-body .item-other-data a i,

.instance-item .item-body .item-other-data span i {

    margin-right: 0;

}

.instance-item .item-body .item-other-data .repeats i {

    font-size: 16px;

}

.instance-item .item-body .status-and-actions {

    display: flex;

    justify-content: space-between;

    vertical-align: top;

}

.instance-item .item-body .status-and-actions .item-other-data {

    margin-top: 0;

}

audio::-webkit-media-controls-play-button,

audio::-webkit-media-controls-panel {

    background-color: #fff;

}

.other-data-overlay {

    position: absolute;

    top: 0;

    left: 0;

    background: #fff;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    display: none;

    justify-content: flex-start;   

    display: none;

    padding: 20px 20px 50px 20px;

    z-index: 10;

}

.other-data-overlay span {

    align-self: flex-end;

}

.other-data-overlay audio { 

    max-width: 80%;

    padding: 6px;

    margin-top: 50px;

}

.other-data-overlay div.help-content { 

    padding-top: 25px;

    font-size: .9rem;

    line-height: 1rem;

}

.other-data-overlay label { 

    font-weight: 600;

    padding-bottom: 10px;

    position: absolute;

    left: 20px;

}

.instance-item .item-body .name {

    font-weight: 700;

    display: block;

}

.instance-item .item-body .name a {

    background: none;

    color: inherit;

    box-shadow: none;

}

.instance-item .item-body .name a i {

    margin-left: 4px;

    font-size: 18px;

    color: #2196f3;

    display: inline;

    text-decoration: none;

    position: relative;

    top: 1px;

}

.instance-item .item-body .instance-status .badge {

    font-size: .9rem;

    padding: 4px 8px;

}

.instance-item .item-body .field-row span:first-child {

    margin-right: 10px;

}

.instance-item .item-body .description {

    display: block;    

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: .9rem;

    margin-bottom: 8px;

}

.instance-item .item-body .item-status span {

    font-size: .8rem;

}

.instance-item .score .progress {

    background: #f9fbfdc7 !important;   

    height: 18px;

    font-size: .85rem;

    font-weight: 600; 

    opacity: .8;

}

.instance-item .score .progress .progress-bar {

    color: #1b2a4e;

    position: relative;

    overflow: visible;

}

.instance-item .score .progress .progress-bar + span {

    padding: 0 5px;

    position: absolute;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 2;

}

.instance-item a, .instance-item span.badge {   

    padding: 0.4375rem 1rem;

    color: #fff;

    margin-right: 5px;

    text-decoration: none;

    transition: background-color 0.5s ease;

    font-size: .9rem;

    white-space: nowrap;

    display: flex;

    align-items: center;

    border-radius: 4px;

}

.instance-item a i {

    margin-right: 6px;

    font-size: 1.1rem;

    position: relative;

    top: 1px;

}

.dashboard-instances .not-results {

    width: 100%;

    text-align: center;

    margin: 20px 0;

    display: flex;

    justify-content: center;

    align-items: center;

}

.dashboard-ranking .img-avatar, .dashboard-badges .img-avatar {

    height: 28px;

    width: 32px;

}

.dashboard-ranking .ranking-data, .dashboard-badges .badge-data {

    width: calc(100% - 58px);

}

.dashboard-ranking .ranking-item, .dashboard-badges .badge-item {

    display: flex;

    padding: 10px 5px;

}

.dashboard-ranking .ranking-item:first-child {

    background: #C9B03721;

}

.dashboard-ranking .ranking-item:nth-child(2) {

    background: #D7D7D721;

}

.dashboard-ranking .ranking-item:nth-child(3) {

    background: #AD8A5621;

}

[data-bs-theme=dark] .dashboard-ranking .ranking-item {

    background: none !important;

}

.dashboard-ranking .ranking-data .score {

    width: 60px;

    font-weight: 600;

}

.dashboard-ranking .ranking-data .name, .dashboard-badges .badge-data .name {   

    font-size: .9rem;   

    width: calc(100% - 60px);

    max-width: calc(100% - 60px);

}

.dashboard-badges .badge-data .name.has-last {     

    width: calc(100% - 90px);

    max-width: calc(100% - 90px);

}

.dashboard-ranking .ranking-item .score:before {

    font-family: 'Line Awesome Free';

    font-weight: 900;

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    display: inline-block;

    font-style: normal;

    font-variant: normal;

    text-rendering: auto;

    line-height: 1;

    content: "\f559";

    opacity: 0;

    margin-right: 8px;

    font-size: 1.2rem;

    top: 2px;

    position: relative;

}

.dashboard-ranking .ranking-item:first-child .score:before,

.dashboard-ranking .ranking-item:nth-child(2) .score:before,

.dashboard-ranking .ranking-item:nth-child(3) .score:before {

    opacity: 1;

}

.dashboard-ranking .ranking-item:first-child .score:before {

    color: #C9B037;

}

.dashboard-ranking .ranking-item:nth-child(2) .score:before {

    color: #bbb7b7;

}

.dashboard-ranking .ranking-item:nth-child(3) .score:before {

    color: #AD8A56;

}

.dashboard-ranking .percent-bottom, .dashboard-badges .last-bottom {  

    font-size: .75rem;

}

.overall.instances form .form-check-label {

    color: #0069d9;

}

.overall.instances form label {

    margin-bottom: 0;

}

.instance-item .item-header.background .order {

    position: absolute;

    top: 0;

    color: #fff;

    left: 0;

    background: #0000009c;

    padding: 0 10px;

}

.instance-item .item-body .badge {

    font-size: 0.8rem;

    font-weight: normal;

    display: flex;

    align-items: center;

}

.instance-item .item-body span.value {

    font-weight: 600;

    display: inline-block;

}

.instance-item .item-body span.value-circle {

    background: #80808030;

    border-radius: 4px;

    width: 16px;

    display: inline-block;

    text-align: center;

    padding: 0;

    line-height: 16px;

}

.instance-item .item-body .incomplete {

    color: #ff5722;

    display: inline-block;

}

.instance-item .item-body .incomplete i {

    font-size: 20px;

    position: relative;

    top: 2px;

}

.instance-item .item-body span.value span {

    font-weight: normal;

}

.instance-item .item-body .field-icon span i {

    margin-right: 6px;

}

.instance-item .item-edit {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: auto;

    max-height: 0;

    justify-content: center;

    flex-direction: row;

    text-align: center;

    background: #e7ecf3d9;

    display: flex;

    transition: 1s all;

    overflow: hidden;

    font-size: 0.9rem; 

    z-index: 9;

}

.instance-item:hover .item-edit {

    max-height: 100px;

}

.instance-item .item-edit a {

    display: block;

    margin: 0 auto;

    padding: 10px 20px;

    margin: 0 auto;

    padding: 5px 5px;

    margin: 10px 15px;

}



/* Widget top */

#statusWidget {

    display: inline-block;

    z-index: 8;

    position: relative;

    color: #fff;

    background: #000000;

    padding: 0;

    border-radius: 33px;

    height: 50px;

    line-height: 43px;    

    padding: 4px 6px;

    transform: translateY(-50px);

    animation-duration: 1s;

    animation-fill-mode: both;

    overflow: hidden;

}

#statusWidget.repeat {

    background: #f93154;

}

#statusWidget.finish {

    background: #42ba96;

    color: #000 !important;

}

#statusWidget .widget-content {

    display: flex;

    justify-content: space-between;

    flex-direction: row;

}

#statusWidget .widget-left {

    background: #ffffff33;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    z-index: 2;

    position: relative;

}

#statusWidget .widget-right {

    width: auto;

    height: 42px;

    border-radius: 50%;

    z-index: 2;

    transition: .5s all;

}

#statusWidget .widget-left i, #statusWidget .widget-right i {

    font-size: 30px;

}

#statusWidget .widget-right .play i {

    font-size: 26px;

}

#statusWidget .widget-center {

    padding: 0 30px;

    z-index: 2;

}

#statusWidget .widget-center label {

    opacity: 0;    

    white-space: nowrap; 

    margin: 0 auto; 

    letter-spacing: 1px; 

}

#statusWidget .widget-center span {

    opacity: 0;

    display: block;     

    position: absolute;

    top: 0;

    line-height: 50px;

    margin: 0;

    text-align: left;   

}

#statusWidget .widget-center span.typing {

    opacity: 1;   

    overflow: hidden; 

    white-space: nowrap; 

    margin: 0 auto; 

    letter-spacing: 1px; 

    /*animation: typing 3.0s steps(40, end);  */   

}

#statusWidget .widget-progress {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    background: #7c69ef;

    z-index: 1;

    transition: all 5s;

    width: 0;

}

#statusWidget.finish .widget-right {

    background: #42ba96;

}

#statusWidget.finish .widget-progress {

    display: none;

}



.fadeTopBottom { animation-name: fadeTopBottom }

@keyframes fadeTopBottom {

    from {

        opacity: 0;        

    }

    to { opacity: 1; transform: translateY(30px); }

}

@keyframes typing {

    from { width: 0 }

    to { width: 100%; }

}



/* Counter */

div.counter {

    color: #000;

    font-size: 100px;

    display: block;

    position: fixed;

    width: 100%;

    height: 100%;

    z-index: 9;

    top: 0;

    display: flex;

    justify-content: center;

    flex-direction: column;

}

div.counter::after {

  font: 800 300px system-ui;

  content: counter(count);

  animation: counter 5s linear;

  counter-reset: count 0;

  color: #000000c0;

}

div#help-center {

    position: absolute;

    width: 100%;

    height: 100%;

    z-index: 9;

    display: flex;

    align-items: center;

    justify-content: center;

}

div#help-center > div {

    background: #ffeb3b;  

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: center;

    color: #000;

    padding: 25px;

}

div#help-center div span {

    text-transform: uppercase;

    font-weight: 700; 

    margin-bottom: 5px;   

}



@keyframes counter {

  0% {

    counter-increment: count 5;

  }

  25% {

    counter-increment: count 4;

  }

  50% {

    counter-increment: count 3;

  }  

  75% {

    counter-increment: count 2;

  }

  100% {

    counter-increment: count 1;

  }

}



#btnAudioIcon.stop {

    background: #42ba96;

}

.role-student:not(.page-overall) .sidebar-toggler {

    display: none;

}

.navbar .menu-top-student .nav-link {

    color: #fff;

}

.navbar .menu-top-student .nav-link.active i {

    color: #467fd0;

}

.navbar .menu-top-student .nav-link.finish i {

    color: #42ba96;

}

.navbar .menu-top-student .nav-link.active:hover {

    background: #467fd050;

}

.navbar .menu-top-student .nav-link.finish:hover {   

    background: #42ba9650;

}

.navbar .menu-top-student {

    list-style: none;

    margin: 0 50px 0 0;

    display: flex;

}

.navbar .menu-top-student .nav-link i.la {

    position: relative;

    top: 1px;    

}

.main .container-fluid {

    padding-top: 20px;

}



/* overall */

.mw-20 {

    max-width: 20%;

}

.w-20 {

    width: 20%;

}

.overall .title {

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 1.2rem;

    font-weight: 600;

    margin-bottom: 20px;

}

.overall .title a { 

    float: right;

    letter-spacing: 0;

    text-transform: none;

    font-size: 1rem;

    font-weight: normal;

    line-height: 30px;

}

.overall .instance-item .description.collapsed {

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    padding-right: 75px;

}

.overall .instance-item .more-link {

    top: 0;

    position: absolute;

    right: 0;

    min-width: 75px;

}

.overall .instance-item .item-edit {

    display: none !important;

}

.overall.detail .instance-item .item-body .item-status {

    display: none;

}

.page-item.active .page-link {

    background-color: #0075fd;

    border-color: #0075fd;

}

.page-link {

    color: #0075fd;

}

.bt-dotted {  

    border-top: 1px dotted #80808029;

}

#badge-fields > div {

    margin-top: 1rem;

    padding: 10px 0;

}

#badge-fields .form-group {

    margin-bottom: .2rem;

}

#badge-fields .form-group .badge-name {

    border-bottom: 1px solid #dedede;

    display: block;

    padding-bottom: 4px;

}

.user-profile, .welcome-consultation {

    background-size: cover !important;

    background-position: center bottom !important;

    background: url('/images/profile.jpg');   

    background-repeat: no-repeat !important;

    margin-top: calc(-0.5em - 20px);

    height: calc(100% + (0.5em + 20px));

    margin-left: -30px;

    margin-right: -30px;

}

.user-badges {

    width: 100%;

    display: flex;

    justify-content: center;

    padding: 2vh 3vw;

}

.user-badges > div {
    width: auto;

    max-width: 100%;

    display: flex;

    justify-content: center;

    background: #00000085;

}

.user-badges img {

    margin: 0 15px 15px 15px;

}

.user-badges .title {

    color: #fff;

    padding: 0 50px;

    font-size: 25px;

    font-weight: 700;

    display: flex;

    justify-content: center;

    align-items: center;

}

.user-badges .badge-item {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 10px 0;

}

.user-badges .badge-item span {

    color: #fff;

    font-size: .9rem;

}

.consultation .box {

    color: #fff;

    padding: 0 50px;

    font-size: 25px;

    font-weight: 700;

    display: flex;

    justify-content: center;

    align-items: center;

}

.not-results i.la-exclamation-triangle {

    font-size: 1.5rem;

    margin-right: 8px;

}

.not-results {

    font-size: .9rem;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    opacity: .9;

    flex-wrap: wrap;

    column-count: 2;

}

.table.table-striped td strong {

    white-space: pre;

}

body.login {

    background-size: cover !important;

    background-position: bottom center !important;

    background: url('/images/profile.jpg');   

    background-repeat: no-repeat;

    justify-content: center;

}

body.login:after {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background: #ffffffb1;

    z-index: 1

}

body.login .container, body.login .app-footer {

    z-index: 2;

}

.top-card-info-bottom {

    position: relative;

    display: block;

    text-transform: none;

    font-weight: normal;

}

.progress-cards .card-body div {

    width: 100%;

}

.progress-cards .card-body div .text-uppercase {

    position: relative;

}

.progress-cards .card-body .text-value-sm {

    line-height: 1.1rem;

}

.menu-circle-badge {

    position: relative;

    border-radius: 50%;

    width: 18px;

    height: 18px;

    text-align: center;

    font-size: .8rem;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-right: 8px;

}

.instance-ptb {

    position: fixed;

    width: 100%;

    height: 100vh;

    top: 0;

    left: 0;

    background-position: center center;

    background-size: cover;

}

.instance-ptb h1 {    

    font-size: 2.75rem;

}

.instance-ptb .instance-front {

    z-index: 2;

}

.instance-ptb-content {

    z-index: 9;

    position: relative;

}

.item-header.background {

    background-position: center;

    background-size: cover;

}

.item-header.background > .w-100 {

    z-index: 9;

    position: relative;

}

.item-header.background:after {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background: #22222247;

    top: 0;

    left: 0;

}

.speed-dial__button--small:hover {

    background-color: #000 !important;

}

.col-score {

    width: 125px;

}

.field-criteria .form-control-sm {

    padding: .5rem;

}

.field-criteria .array-row td:first-child {

    padding-left: 0;

}

.field-criteria .array-row td:nth-child(1) {

    width: 100%;

}

.field-criteria .array-row td:nth-child(2), .field-criteria .array-row td:nth-child(3) {

    width: 75px;

}

.field-criteria .array-row td:nth-child(4), .field-criteria .array-row td:nth-child(5) {

    max-width: 50px;

    width: 50px;

    vertical-align: middle;

}

.field-criteria .array-row td:nth-child(4) {

    display: none;

}

.field-criteria td .btn {

    padding: .5rem;

}

.scenes-total-progress {

    border-radius: var(--tblr-border-radius);

    overflow: hidden;

}

.scenes-total-progress .progress-bar {

    border-radius: var(--tblr-border-radius) 0 0 var(--tblr-border-radius);

}

.scenes-total-progress .progress-bar.width-100 {

    border-radius: var(--tblr-border-radius) !important;

}

.login-logos img {

    max-height: 40px;

}

.login-overlay {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000000d9;

    z-index: 0;

}

.login-cover .container, .login-cover .login-logos, .login-cofunded {

    position: relative;

    z-index: 2;

}

.login-cover {

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

}

.login-cofunded img {

    max-height: 40px;

}



@media screen and (max-width: 1280px) {

    .instance-description {

        width: 100%;

        height: auto;

        max-height: 100%;

        border-radius: 0;

    }

    #continueSection > h1, .scene-finish-front h1 {

        font-size: 1.5rem;

    }

    .scene-finish-front > p {

        font-size: 1.0rem;

        line-height: 1.1rem;

    }

    .scene-finish-front .la-thumbs-up,

    .scene-audio-front div.micro > i {

        font-size: 30px;       

        line-height: 65px;      

        width: 65px;

        height: 65px;

        margin-bottom: 10px;

        padding: 0;

    }

}

@media screen and (max-width: 920px) {

    .scene-video-toggle-top .scene-action, .scene-audio-actions .scene-action,

    .speed-dial__button--root {

        width: 32px !important;

        height: 32px !important;

    }

    .scene-video-toggle-top .scene-action i, .scene-audio-actions .scene-action i {

        line-height: 32px;

    }

    .scene-header button i, .scene-header a i {

        font-size: 18px;

    }

    .scene-header {

        right: 10px;

    }   

    .instance-progress-bar {

        display: none !important;

    }

    .scene-bottombar {

        max-height: 30%;

        overflow-y: auto;

    }

    .scene-help > .col1, .col3.stepsbar {

        display: none !important;

    }    

    .scene-help > .col2 { 

        width: 100%;

        max-width: 100%;

        padding: 10px;

    }

    #helpBubble img {

        max-width: 32px;

    }

    .scene-audio-front, .scene-finish-front, .instance-front {

        padding: 20px 40px;

        max-height: 100%;

        overflow-y: auto;

        justify-content: flex-start;

    }

    #continueSection > h1, .scene-finish-front h1 {

        font-size: 1rem;

    }

    .scene-finish-front .bar .bar-2col {

        width: 100%;

        margin: 0;

    }

    .scene-finish-front .la-thumbs-up,

    .scene-audio-front div.micro > i {

        font-size: 25px;       

        line-height: 50px;      

        width: 50px;

        height: 50px;

        margin-bottom: 10px;

        padding: 0;

        overflow: visible;

    }

    .scene-help-icon {

        font-size: 20px;

        padding: 0 10px;

        width: 50px;      

        height: 25px;

    }

    .btn {

        display: block;

        margin: 2px;

        width: 100%;

        font-size: .9rem;

        line-height: .9rem;

    }

    .scene-finish-front .bar .progress {

        max-height: 25px;

    }

    .speed-dial__button--small {

        width: 32px !important;

        height: 32px !important;

    }

    .speed-dial [data-direction=left] {

        right: 32px !important;

        height: 32px !important;

    }

    .speed-dial:hover .speed-dial__item {

        height: 32px;

    }

    .dashboard-instances {

        display: block;

    }    

    .instance-item {

        width: 100%;

        margin-right: 0;

        display: block;

    }

    .dashboard-ranking .ranking-data .name,

    .dashboard-ranking .ranking-item,

    .dashboard-badges .badge-data .name,

    .dashboard-badges .badge-item {

        line-height: .9rem;

    }

    .logo + .card {

        margin-left: -15px;

        margin-right: -15px;

        border-left: none;

        border-right: none;

        border-radius: 0;

    }

    .logo > img {

        max-width: 40%;

    }

    .app.align-items-center .logo {

         margin-bottom: 1.5rem !important;

    }

    .app.align-items-center .app-footer {

        height: auto !important;

        text-align: center;

    }

    .app.align-items-center .app-footer img {

        margin-bottom: 0;

    }

    .app.align-items-center .footer-logos {

        margin-bottom: 0 !important;

    }

.login-logos img {

    max-height: 30px;

}
.login-logos {
	gap: 1rem !important;
}
.auth-logo-container img {
	max-height: 60px;
}
.login-cover h2.h2 {
	display: none;
}
.login-cover {
	padding: 0 1rem;
}

}