@font-face {
    font-family: 'Gontserrat';
    src: url('../fonts/Gontserrat-Regular.ttf') format('truetype');
    /* url('../fonts/Gontserrat-BlackItalic.ttf') format('truetype'),
    url('../fonts/Gontserrat-Bold.ttf') format('truetype'),
    url('../fonts/Gontserrat-BoldItalic.ttf') format('truetype'),
    url('../fonts/Gontserrat-ExtraBold.ttf') format('truetype'),
    url('../fonts/Gontserrat-ExtraBoldItalic.ttf') format('truetype'),
    url('../fonts/Gontserrat-ExtraLight.ttf') format('truetype'),
    url('../fonts/Gontserrat-ExtraLightItalic.ttf') format('truetype'),
    url('../fonts/Gontserrat-Italic.ttf') format('truetype'),
    url('../fonts/Gontserrat-Light.ttf') format('truetype'),
    url('../fonts/Gontserrat-LightItalic.ttf') format('truetype'),
    url('../fonts/Gontserrat-Medium.ttf') format('truetype'),
    url('../fonts/Gontserrat-MediumItalic.ttf') format('truetype'),
    url('../fonts/Gontserrat-Black.ttf ') format('truetype')
    url('../fonts/Gontserrat-SemiBold.ttf') format('truetype'),
    url('../fonts/Gontserrat-SemiBoldItalic.ttf') format('truetype'),
    url('../fonts/Gontserrat-Thin.ttf') format('truetype'),
    url('../fonts/Gontserrat-ThinItalic.ttf') format('truetype'); */

}


* {
    /* font-family: 'Roboto', sans-serif; */

    font-family: 'Gontserrat', sans-serif;
    font-weight: 100;

}

html {
    min-height: 100%;
    position: relative;
}

html#html-principal {
    background-color: #f4f9f9;
    height: 100%;
    min-height: 100%;
    position: relative;
}

body {
    /* background-color: #f4f9f9 !important; */
    background-color: var(--content-crear-bg) !important;
    margin: 0 0 100px 0;
}

body#body-principal {
    align-items: center;
    background-color: #f4f9f9;
    /* background-image: url(../img/background.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    font-weight: lighter;
    /* height: 100%; */
    width: 100%;
    justify-content: center;
    margin: 0;
    padding: 0;
    position: relative;
}

body#body-principal #logo {
    background-image: url(../img/logo_sgp_color_sombra.png);
    background-repeat: no-repeat;
    background-size: 300px 102px;
    height: 102px;
    left: 30px;
    position: absolute;
    top: 30px;
    width: 300px;
}

.container {
    width: 80% !important;
}

a {
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.header-logo {
    margin-top: 0%;
    height: 65px;
}

.header-text {
    margin-left: 5rem;
    margin-top: 1rem;
    color: var(--header-text);
}

.header-logo-div {}

.header-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

header {

    background-color: var(--header-bg);
    height: 100px;
    position: relative;
}

header h1 {
    text-align: center;
    color: #FFFFFF;
}


header .titulo-sitio {
    font-size: 30px;
    font-style: italic;
}

header .titulo-sitio span {
    font-size: 50px;
}

.contenedor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contenedor-header .icon-perfil {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contenedor-header .icon-perfil span {
    color: #FFFFFF;
    font-weight: 600;
}

footer {
    background-color: var(--footer-bg);
    bottom: 0;
    color: #FFFFFF;
    margin-top: 50px;
    padding: 10px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.cursor-pointer {
    cursor: pointer;
}


.min-height-300 {
    min-height: 300px;
}

.min-height-400 {
    min-height: 400px;
}

.min-height-450 {
    min-height: 450px;
}

.min-height-500 {
    min-height: 500px;
}


.min-height-vh {
    min-height: calc(100vh - 250px);
}

.align-center-td {
    text-align: center;
}


.fondo-blanco {
    background-color: #FFFFFF;
}

#login_incorrecto {
    color: #dd2527;
    font-size: 1.5em;
    font-weight: bold;
}

#img-logo {
    margin-top: 0px;
    width: 100px;
}


.div-login {
    /* background-color: rgba(255, 255, 255, 0.7); */
    background-color: #ddedec;
    /* border-radius: 20px; */
    padding: 50px;
    position: relative;
    width: 30%;
}

.div-login p {
    margin-bottom: -1px;
    text-align: center;
}


.div-login>div {
    margin: 20px 20px 20px 20px;
    padding: 10px;
}

.div-login a {
    cursor: pointer;
    color: #009999;
    text-decoration: none;
}

.div-login .titulo {
    border-bottom: 2px solid #009999;
    color: #009999;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 5px;
}


.div-login a * {
    cursor: pointer;
    text-decoration: none;
}

.div-login input[type="text"],
.div-login input[type="password"] {
    background-color: #FFFFFF;
    /* border-radius: 50px; */
    /* border: 2px solid #009999; */
    display: block;
    margin-bottom: 30px;
    padding: 10px;
    text-indent: 20px;
    width: 100%;
}

.div-login-input {
    position: relative;
}

.div-login-input-icono {
    color: #808080;
    left: 10px;
    position: absolute;
    top: 30%;
}

#btn-enviar-login {
    background-color: #1aa29f;
    /* border-radius: 50px; */
    border: 0;
    color: #FFFFFF;
    display: block;
    font-size: 2em;
    margin: 10px auto;
    padding: 5px;
    text-align: center;
    width: 100%;
}

.div-login .aprende {
    text-align: center;
}

.div-login input[type="text"].input-text-obligatorio,
.div-login input[type="password"].input-text-obligatorio {
    border: 1px solid red;
    -webkit-box-shadow: inset -5px -9px 32px -20px red;
    -moz-box-shadow: inset -5px -9px 32px -20px red;
    box-shadow: inset -5px -9px 32px -20px red;
}

#contenido-central {
    padding: 50px 0 30px 0;
    min-height: 500px;
    position: relative;
}


#menu-sup {
    position: absolute;
    right: 10px;
    top: 2px;
    z-index: 1000;
    display: none;
}

.menu-horizontal {
    background-color: #009999;
    padding: 5px;
    display: flex;
    justify-content: center;
    gap: 5px 10px;
}

.menu-horizontal a {
    color: #FFFFFF;
    font-size: 18px;
    padding: 2px 10px;
    text-decoration: none;
}

.menu-horizontal a:hover {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    text-decoration: none;
}

.input-obligatorio {
    border: 1px solid red;
    box-shadow: 1px 1px 5px red;
}

a#btn-menu-mobile {
    background-color: #f56a0e;
    color: #FFFFFF;
    display: none;
    font-size: 2em;
    height: 40px;
    padding-left: 10px;
    position: relative;
    text-decoration: none;
    width: 100%;
}

a#btn-menu-mobile label {
    font-size: 15px;
    line-height: 40px;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 0;
    text-indent: 10px;
}


a.btn-header {
    display: inline-block;
    width: 80px;
    margin-left: 5px;
    margin-top: 5px;
    position: relative;
    padding-top: 5px;
    margin-bottom: -5px;
}

a.btn-header:hover {
    opacity: 0.8;
}

a.btn-header.activo {
    background-color: #1c7eb8;
}

a.btn-header.activo:before {
    content: "";
    display: block;
    height: 5px;
    background-color: #FFFFFF;
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
}

/* Mensaje para la libreria jqueryvalidation */
.mensaje-error-validate-form {
    color: red;
    font-size: 12px;
}

.cajita-notificacion {
    align-items: center;
    border-radius: 5px;
    bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    font-family: Arial, sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
    opacity: 1;
    padding: 15px;
    position: fixed;
    right: 20px;
    transition: opacity 0.5s ease-in-out;
    z-index: 3000 !important;
}

.cajita-notificacion svg {
    height: 20px;
    margin-right: 10px;
    width: 20px;
}

.cajita-notificacion.hidden {
    opacity: 0;
}

.cajita-notificacion.success {
    background-color: #4CAF50;
    color: white;
}

.cajita-notificacion.danger {
    background-color: #f44336;
    color: white;
}

.cajita-notificacion.warning {
    background-color: #ffeb3b;
    color: black;
}



.contenedor-seccion-chatgpt {
    display: flex;
    gap: 10px;
    height: 70vh;
}

.contenedor-seccion-chatgpt .listado-chats {
    background-color: #F9F9F9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20%;
}

.contenedor-seccion-chatgpt .listado-chats .lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 88%;
    overflow-y: scroll;
    padding: 10px;
}

.contenedor-seccion-chatgpt .listado-chats #btn-nuevo-chat {
    align-items: center;
    background-color: #ececec;
    color: #434343;
    display: flex;
    font-size: 22px;
    justify-content: center;
    margin-bottom: 10px;
    padding: 20px;
    text-align: center;
}

.contenedor-seccion-chatgpt .listado-chats #btn-nuevo-chat:hover {
    background-color: #CDCDCD;
    border-radius: 10px;
}

#txt-historial-chats {
    color: #434343;
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
    padding: 5px 10px 0px 10px;
}


.contenedor-seccion-chatgpt .listado-chats .lista a {
    color: #434343;
    padding: 10px;
    border-radius: 10px;
}

.contenedor-seccion-chatgpt .listado-chats .lista a:hover {
    background-color: #ececec;
}

.contenedor-seccion-chatgpt .listado-chats .lista a.activo {
    background-color: #CDCDCD;
}

.contenedor-seccion-chatgpt .info-chat {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    padding: 20px;
    width: 80%;
}

.contenedor-seccion-chatgpt .info-chat .prompts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 90%;
    overflow-y: scroll;
}

.contenedor-seccion-chatgpt .info-chat .prompts .prompt {
    margin-bottom: 20px;
}

.contenedor-seccion-chatgpt .info-chat .prompts .prompt .perfil {
    font-weight: 700;
}

.contenedor-seccion-chatgpt .info-chat .inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contenedor-seccion-chatgpt .info-chat .inputs.hidden {
    opacity: 0;
}



/* 
********************************************************
   INICIO NEIA HERRAMIENTA PARA LA CREACIÓN DE CURSOS 
********************************************************
*/

/* VARIABLES */

.calipso-theme {
    /* columna acción */
    --action-texto-color: #896981;


    /* circulo pasos */

    --activo-border-color: #896981;
    --activo-bg-color: #896981;
    --activo-color: #f4f9f9;
    --pasivo-bg-color: #f2e7ef;
    --pasivo-color: #1c121a;

    /* header*/

    --header-bg: #ddedec;
    --header-text: #1aa29f;

    /* perfil header */
    --texto-color: #1aa29f;

    /* footer */
    --footer-bg: #1aa29f;

    /* leftbar */
    --header-bar-bg: #1aa29f;
    --primary-color: #1aa29f;
    --nav-item-border-bottom: 2px solid black;
    --nav-item-a: black;
    --nav-item-active: #1aa29f;
    --left-bar-bg: #ddedec;

    /* content crear */
    --titulos-h: #896981;
    --content-crear-bg: #f4f9f9;
    --btn-1-crear-color: #1c121a;
    --btn-1-crear-bg: #f2e7ef;

    /* inputs */

    --text-input-color: #ddedec;
    --text-input-bg: #3abab3;


    --input-color: #1c121a;
    --input-bg-color: #ddedec;
    /* --placeholder-color     : ; */

    --txt-area-color: #1c121a;
    --txt-area-bg: #ddedec;

    /* desplegables */

    --text-acordeon-color: #ddedec;
    --text-acordeon-bg: #3abab3;

    /* PREVIEW PDF  */

    --previewPDF-bg-color: #ddedec;
    --previewPDF-color: #1c121a;

    /* CONFIG PARCIAL */
    --titulo-color: #1c121a;

    /* PREVIEW PARCIAL  */

    --previewParcial-bg-color: #1aa29f;
    ;
    --previewParcial-color: #f2e7ef;

    /* PREVIEW FINAL  */

    --previewFinal-bg-color: #1aa29f;
    --previewFinal-color: #f2e7ef;

    /* DTT */
    --dtt-bg-color: #ddedec;
}


.morado-theme {

    /* columna acción */
    --action-texto-color: #f2e7ef;


    /* circulo pasos */

    --activo-border-color: #0f97bc;
    --activo-bg-color: #0f97bc;
    --activo-color: #d9e5e8;
    --pasivo-bg-color: #f2e7ef;
    --pasivo-color: #1c121a;

    /* header*/
    --header-bg: #2f2933;
    --header-text: #9200ff;

    /* perfil header */
    --texto-color: #9200ff;

    /* footer */
    --footer-bg: #644080;

    /* --header-bg: #9200ff; */

    /* leftbar */
    --header-bar-bg: #9200ff;
    --primary-color: #644080;
    --nav-item-border-bottom: 2px solid #e3d9ed;
    --nav-item-a: #e3d9ed;
    --nav-item-active: #9200ff;
    --left-bar-bg: #2f2933;

    /* content crear */
    --titulos-h: #e3d9ed;
    --content-crear-bg: #0f0d11;
    --btn-1-crear-color: #e3d9ed;
    --btn-1-crear-bg: #2f2933;

    /* inputs */
    --text-input-color: #d9e5e8;
    --text-input-bg: #644080;

    --input-bg-color: #2f2933;
    --input-color: #d9e5e8;
    /* --placeholder-color     : ; */

    --txt-area-color: #d9e5e8;
    --txt-area-bg: #2f2933;

    /* desplegables */
    --text-acordeon-color: #d9e5e8;
    --text-acordeon-bg: #644080;

    /* PREVIEW PDF  */

    --previewPDF-bg-color: #2f2933;
    --previewPDF-color: #d9e5e8;

    /* CONFIG PARCIAL */
    --titulo-color: #d9e5e8;

    /* PREVIEW PARCIAL  */

    --previewParcial-bg-color: #2f2933;
    --previewParcial-color: #d9e5e8;

    /* PREVIEW FINAL  */

    --previewFinal-bg-color: #2f2933;
    --previewFinal-color: #d9e5e8;

    /* DTT */
    --dtt-bg-color: #e3d9ed;
}


.morado-crema-theme {

    /* columna acción */
    --action-texto-color: #aa88a3;


    /* circulo pasos */

    --activo-border-color: #1aa29f;
    --activo-bg-color: #1aa29f;
    --activo-color: #fcf7fb;
    --pasivo-bg-color: #ddedec;
    --pasivo-color: #022321;

    /* header*/
    --header-bg: #f2e7ef;
    --header-text: #aa88a3;

    /* perfil header */
    --texto-color: #aa88a3;

    /* footer */
    --footer-bg: #aa88a3;

    /* --header-bg: #9200ff; */

    /* leftbar */
    --header-bar-bg: #aa88a3;
    --primary-color: #644080;
    --nav-item-border-bottom: 2px solid #1c121a;
    --nav-item-a: #1c121a;
    --nav-item-active: #896981;
    --left-bar-bg: #f2e7ef;

    /* content crear */
    --titulos-h: #1aa29f;
    --content-crear-bg: #fcf7fb;
    --btn-1-crear-color: #022321;
    --btn-1-crear-bg: #ddedec;

    /* inputs */
    --text-input-color: #f2e7ef;
    --text-input-bg: #aa88a3;
    --input-bg-color: #f2e7ef;
    --input-color: #022321;
    --txt-area-color: #1c121a;
    --txt-area-bg: #f2e7ef;


    /* desplegables */
    --text-acordeon-color: #f2e7ef;
    --text-acordeon-bg: #aa88a3;

    /* PREVIEW PDF  */

    --previewPDF-bg-color: #f2e7ef;
    --previewPDF-color: #2f2933;

    /* CONFIG PARCIAL */
    --titulo-color: #1aa29f;

    /* PREVIEW PARCIAL  */

    --previewParcial-bg-color: #aa88a3;
    --previewParcial-color: #2f2933;

    /* PREVIEW FINAL  */

    --previewFinal-bg-color: #aa88a3;
    --previewFinal-color: #2f2933;

    /* DTT */
    --dtt-bg-color: #f2e7ef;

}

/* BARRA LETERAL*/

/* 
.sidebar.active {
    transform: translateX(0);
}
.content {
    margin-left: 0;
    padding: 20px;
    transition: margin-left 0.3s ease;
}
.content.shifted {
    margin-left: 250px;
}


.header-bar {
    height: 100px;
    background-color: #30ccbf;
}
.footer-bar {
    margin-top: 130%;
}


.footer-bar img {
    width: 150px ;
    height: 150px;
} */

/* .sidebar {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    background-color: #f8f9fa;
    padding: 15px;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
} */


.bar-logo {
    width: max-content;
}

.nav-item {
    border-bottom: var(--nav-item-border-bottom);
    margin-bottom: 5px;
    /* margin: 20px; */
    margin: 2%;
}

.nav-item a {
    color: var(--nav-item-a);
}

.nav-item-active {
    color: var(--nav-item-active);
}



.menu-icon {
    /* background-color: var(--header-bar-bg); */
    width: 30px;
    height: 30px;
    margin-right: 10px;
}


.menu-icon-hamburguer {
    background-color: var(--header-bar-bg);
    width: 30px;
    height: 30px;
    margin-right: 10px;
}


.profile-img {
    margin-left: 10%;
    margin-right: 10%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}


body {

    overflow-x: hidden;
}

.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -250px;
    transition: left 0.3s ease;
    background-color: var(--left-bar-bg);
}

.sidebar.active {
    left: 0;
}

.content {
    margin-left: 0;
    transition: margin-left 0.3s ease;
    background-color: var(--content-crear-bg);
}

.content.shifted {
    margin-left: 250px;
}

.header-bar {
    height: 100px;
    padding: 10px;
    background-color: var(--header-bar-bg);
}

.header-bar h5 {
    color: white;

}


.footer-bar {
    margin-top: 4rem;
    margin-bottom: 100px;
    position: absolute;
    /* bottom: 30px; */
    width: 100%;
    padding: 10px;
}

.footer-bar img {
    width: 70%;
}

/* 
    fin barra lateral
*/


/* 
    indicador acción
*/


.header-text-action {
    margin-left: 5rem;
    margin-top: 1rem;
    color: var(--action-texto-color);
}

.col-create {
    margin-left: 10%;
}

/* 
    botón continuar
*/

.opt2-titulo {
    color: var(--titulos-h);
}


.btn-continuar {

    color: white;
    background-color: #eab44d;
    padding: 10px 70px;
    border: none;

    display: inline-flex;
    align-items: center;
    margin-top: 165%;
}

.btn-continuar img {

    margin-left: 10px;
}


/* 
    QUIERO CREAR..
*/

.btn-crear-config {
    margin-right: 200px;
    padding: 7px 7rem;
    border: none;
    color: var(--btn-1-crear-color);
    background-color: var(--btn-1-crear-bg);
}


.selector-crear-config {


    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 17rem;
    padding: -3px 3rem;
    color: var(--btn-1-crear-color);
    background-color: var(--btn-1-crear-bg);
    border-color: var(--btn-1-crear-bg);



    /* width: 17rem;
    padding: 1px 5rem;
    color: var(--btn-1-crear-color);
    background-color: var(--btn-1-crear-bg);
    border-color: var(--btn-1-crear-bg); */

}


/* .btn-1-config {
    margin-right: 200px;
    padding: 7px 5rem;
    border: none;
    color : #896981;
    background-color: #f2e7ef;
} 




.selector-1-config {
    padding: 1px 5rem;
    color: #896981;
    background-color: #f2e7ef;
    border-color:#f2e7ef;
} */

.row-config-1 {
    margin-top: 11rem;
}

.row-config-2 {
    margin-top: 8rem;
}

.row-config-3 {
    margin-top: 11rem;
}

/* 
    FIN QUIERO CREAR..
*/


.config-crear-container {
    height: 750px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa;
}

.config-crear-header {
    font-size: 1.5rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.config-crear-button-group {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.config-crear-button,
.config-crear-select {
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #6c757d;
    background-color: #ffffff;
    color: #6c757d;
}


.config-crear-select {
    padding: 0.5rem 1rem;
}

.config-crear-bottom-right {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background-color: #ffc107;
    border: none;
    padding: 0.5rem 1rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-height {
    height: 100vh;
    /* 100% de la altura del viewport */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Alinea el contenido al final verticalmente */
    align-items: flex-end;
    /* Alinea el contenido al final horizontalmente */
}

.rotate-icon {
    transition: transform 0.3s ease-in-out;
}

.rotate-icon.collapsed {
    transform: rotate(180deg);
}

.input-group .input-group-addon {
    background-color: #2c7a90;
    color: white;
    border: 1px solid #2c7a90;
    border-radius: 4px 0 0 4px;
    min-width: 150px;
    text-align: center;
}


/* .input-group .form-control {
      border: 1px solid #2c7a90; 
      border-radius: 0 4px 4px 0; 
  }
  
  .input-group {
      margin: 10px 0;
  } */

/* paso 1 */
.text-input-config {
    color: var(--text-input-color);
    background-color: var(--text-input-bg);
    text-align: center;
    padding: 8px 1px;
    margin: 1rem 0rem;

}

/* paso 6  */
.text-input-config-evaf {
    width: 50%;
    color: var(--text-input-color);
    background-color: var(--text-input-bg);
    text-align: center;
    padding: 8px 1px;
    margin: 1rem 0rem;
}


.input-config-vr {
    /* color: #1c121a;
    background-color: #ddedec; */

    color: var(--input-color);
    background-color: var(--input-bg-color);
    text-align: center;
    border: 0;
    padding: 8px 1px;
    margin: 0rem 0rem;
    /* width: -webkit-fill-available; */
    width: 100%;
}

.input-config-hr {
    color: var(--input-color);
    background-color: var(--input-bg-color);
    text-align: center;
    border: 0;
    padding: 8px 1px;
    margin: 0rem 0rem;
}


.input-courseName {
    /* color: #1c121a;
    background-color: #ddedec; */
    color: var(--input-color);
    background-color: var(--input-bg-color);
    text-align: center;
    border: 0;
    padding: 8px 1px;
    margin: 1rem 0rem;
    width: -webkit-fill-available;
}



.input-config-select {
    width: 100%;
    display: block;
    color: var(--btn-1-crear-color);
    background-color: var(--input-bg-color);
    text-align: center;
    border-color: var(--btn-1-crear-bg);
    padding: 8px 1px;
    margin: 0rem 0rem;
}

.acordion-calipso {
    background-color: var(--text-acordeon-bg);
    color: var(--text-acordeon-color-text-acordeon-color);
}

.accordion-item {
    background-color: var(--text-acordeon-bg);
}

.flex-container-calipso {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.input-group-text-calipso {
    width: 11rem;
    margin-right: 0rem;
    color: var(--text-input-color);
    background-color: var(--text-input-bg);
    text-align: center;
    padding: 8px 1px;
    margin: 0rem 0rem;
}


.input-config-linear {
    color: #1c121a;
    background-color: #ddedec;
    text-align: center;
    border: 0;
    padding: 8px 1px;
    margin: 2rem 0rem;
    width: -webkit-fill-available;
}


.input-placeholder::placeholder {
    color: #1c121a;
    /* Cambia este color al que desees */
}

.input-select-arrowd {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    /* Color de la flecha */
    pointer-events: none;
}

.btn-custom {
    background-color: #28a745;
    color: white;
    border: 1px solid #28a745;
    border-radius: 4px;
}

.bg-primary-custom {
    background-color: var(--text-input-bg);
    color: var(--text-input-color);
    padding: 5px;
    border-radius: 4px;
    margin: 10px 0;
    text-align: center;
}

.checkbox-custom {
    width: 70%;
    height: 20px;
    margin-top: 7px;
}

.txt-area-1 {
    background-color: var(--txt-area-bg);
    color: var(--txt-area-color);
}


textarea.form-control {
    height: 121px;
    max-width: 100%;
}



/* TxtAreas por módulo */

.hiddenDIV {
    display: none;
}

.loading-indicator {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, .3);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* PREVIEW PDF */
.contentPDF {
    background-color: var(--previewPDF-bg-color);
    color: var(--previewPDF-color);
}

#pdf-container {
    width: 100%;
    height: 100vh;
    overflow: auto;
}

canvas {
    display: block;
    margin: 0 auto;
}


/* JSon editor */

#jsoneditor {
    width: 100%;
    height: 400px;
}

/* JSON VIEWER */

.json-viewer {
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #f5f5f5;
    padding: 10px;
    border: 1px solid #ddd;
}

/* barra paso a paso */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

.container-step {
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 450px;
    width: 100%;
    /* margin-left: 9%; */
}

.container-step .steps {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    position: relative;
}


.steps .circle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    color: var(--pasivo-color);
    font-size: 22px;
    font-weight: 500;
    border-radius: 50%;
    background: var(--pasivo-bg-color);
    border: 4px solid var(--pasivo-bg-color);
    transition: all 200ms ease;
    transition-delay: 0s;

    /* display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    color: white;
    font-size: 22px;
    font-weight: 500;
    border-radius: 50%;
    background: #896981;

    transition: all 200ms ease;
    transition-delay: 0s; */
}

.steps .circle.active {
    transition-delay: 100ms;
    border-color: var(--activo-border-color);
    background-color: var(--activo-bg-color);
    color: var(--activo-color);
    /* color: rgb(104, 24, 24); */
}

.steps .progress-bar-step {
    position: absolute;
    height: 4px;
    width: 100%;
    background: #e0e0e0;
    z-index: -1;
}

.progress-bar-step .indicator {
    position: absolute;
    height: 100%;
    width: 0%;
    background: #4070f4;
    transition: all 300ms ease;
}

.container-step .buttons {
    display: flex;
    gap: 20px;
}

.buttons-step button {
    /* padding: 8px 25px;
    background: #4070f4;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    transition: all 200ms linear; */
    transition: all 200ms linear;
    color: white;
    background-color: #eab44d;
    padding: 10px 70px;
    border: none;

    display: inline-flex;
    align-items: center;
    /* margin-left: 60%; */

}

.buttons-step button:active {
    transform: scale(0.97);
}

.buttons_-tep button:disabled {
    background: #87a5f8;
    cursor: not-allowed;
}


.custom-btn-group button {
    width: 50px;
    height: 34px;
}

.btn-c {
    background-color: #1aa29f;
}

.btn-m {
    background-color: #9200ff;
}

.btn-mc {
    background-color: #f2e7ef;
}

/* vistas paso a paso */

.view_step {
    display: none;
}

.active_step {
    display: block;
}

/* PREVIEW PDF */

.content-pdf {
    background-color: #2f2933;
    color: #d9e5e8;
}

/* PREVIEW CONTENIDO */
.course-container {
    color: var(--btn-1-crear-color);
    background-color: var(--btn-1-crear-bg);
}

.modules-container {
    color: var(--btn-1-crear-color);
    background: var(--btn-1-crear-bg);
}

.btn-regen {
    transition: all 200ms linear;
    color: white;
    background-color: #eab44d;
    padding: 10px 70px;
    border: none;
    display: inline-flex;
    align-items: center;
}


.btn-download-pdf {
    margin-top: 1.5rem;
    margin-left: 1%;
    transition: all 200ms linear;
    color: black;
    background-color: #eab44d;
    padding: 10px 70px;
    border: none;
    display: inline-flex;
    align-items: center;
    width: 20rem;
    justify-content: center;
}

.title-preview-1 {
    color: var(--btn-1-crear-color);
}

/* step 3 PRUEBAS */

/* body {
      font-family: Arial, sans-serif;
      background-color: #E6EFEF;
      padding: 20px;
  } */
/* .container {
      background-color: #FFFFFF;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
  } */
.panel-heading {
    background-color: #00A19A !important;
    color: #FFFFFF !important;
}

.objective {
    background-color: #DFF3F3;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.objective textarea {
    width: 100%;
    height: 50px;
    border: 1px solid #00A19A;
    border-radius: 5px;
    padding: 10px;
    resize: none;
}

.add-button {
    background-color: #00A19A;
    color: #FFFFFF;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.add-button:hover {
    background-color: #007C76;
}

.continue-button {
    background-color: #00A19A;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: 20px auto 0;
    text-align: center;
}

.continue-button:hover {
    background-color: #007C76;
}

/* Evaluaciones */

.evaluaciones-container {
    background-color: var(--content-crear-bg);
    padding: 20px;
    border-radius: 10px;
    width: 900px;
}

.evaluaciones-title {
    color: var(--titulo-color);
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.evaluaciones-row {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    margin-bottom: 10px;
}

.evaluaciones-label {
    background-color: #14a19c;
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
}

.evaluaciones-input,
.evaluaciones-m-button {
    background-color: white;
    border: 2px solid #14a19c;
    border-radius: 10px;
    padding: 5px 10px;
    text-align: center;
    width: 50px;
}

.evaluaciones-input-select,
.evaluaciones-m-button {
    background-color: white;
    border: 2px solid #14a19c;
    border-radius: 10px;
    padding: 5px 10px;
    text-align: center;
    width: 180px;
}

.evaluaciones-m-button {
    background-color: #14a19c;
    color: white;
    width: 80px;
}

.evaluaciones-input-full {
    width: 100px;
}

.evaluaciones-button {

    background-color: #14a19c;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
    width: 100%;
    cursor: pointer;
    margin-top: 20px;
}


/* PREVIEW PARCIAL */

.PrevParcial {
    background-color: var(--previewParcial-bg-color);
    color: var(--previewParcial-color);
}


/* PREVIEW FINAL */

.PrevFinal {
    background-color: var(--previewFinal-bg-color);
    color: var(--previewFinal-color);
}



/* PERFIL HEADER */



.perfil-header {
    color: var(--texto-color);
}

.header-left-logo{
    width: 50%;
}

.header-left-logo img {

}


/* DTT */

.tags-filas {
    font-weight: bold;
    font-size: 11px;
    font-style: italic;
    color: #272424ab;
}

.dtt {
    background-color: var(--dtt-bg-color);    
}

.btn-archivar {
    border-color: #ff9810cc;
    color: #ff9810cc;
}



.btn-contenido {

}
.btn-descargar {

}



/* pruebas */

.mt-md-custom {
    margin-top: -20%;
}


/* TAGS */

        /* Mover la "X" al costado derecho del tag */
        .select2-selection__choice {
            padding-right: 20px !important;
            padding-left: 8px !important;
            position: relative;
            display: flex;
            align-items: center;
        }

        .select2-selection__choice__remove {
            margin-left: 75%;
            position: absolute;
            right: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            background: none;
            border: none;
            cursor: pointer;

        }   

        .select2-container--default .select2-selection--multiple.select2-selection--clearable {
            margin-left: 2%;
            width: 400px;
        }

        .select2-container--default .select2-selection--multiple {
            margin-left: 2%;
            width: 400px;
        }

        .select2-container--open .select2-dropdown--below {
            width: 400px;
            border-top: none;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }



        .filter-container {
            display: flex;
            align-items: center;
            gap: 10px; /* Espacio entre el select y el botón */
        }

        #filterButton {
            padding: 6px 12px;
            background-color: #1aa29f;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #filterButton:hover {
            background-color: #138c7a;
        }


/* 

    ************************************************
    FIN HCC HERRAMIENTA PARA LA CREACIÓN DE CURSOS 
    ************************************************

*/

.contenedor-admin {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contenedor-admin .fila {
    display: flex;
    gap: 10px;
    align-items: center;
}

.contenedor-admin .fila .icono {
    width: 30px;
}

.contenedor-admin .fila a {
    color: #000000;
}